import { Info, X } from 'lucide-react';
import { Button } from '@/components/ui/button';

export default function MethodologyModal({ isOpen, onClose }) {
  if (!isOpen) return null;
  
  return (
    <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4" onClick={onClose}>
      <div 
        className="bg-slate-900 border border-slate-700 rounded-lg max-w-2xl w-full mx-auto shadow-2xl flex flex-col max-h-[90vh]"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex items-center justify-between border-b border-slate-800 p-4">
          <div className="flex items-center gap-3">
            <Info className="w-5 h-5 text-blue-400" />
            <h2 className="text-xl font-bold text-slate-100">
              Our Methodology: Why We Don't Sell Predictions
            </h2>
          </div>
          <button onClick={onClose} className="text-slate-400 hover:text-white transition-colors">
            <X className="w-5 h-5" />
          </button>
        </div>
        
        <div className="overflow-y-auto p-6 space-y-6 text-sm text-slate-300">
          <section>
            <h3 className="text-lg font-semibold text-slate-100 mb-2">The Out-of-Sample Reality</h3>
            <p className="mb-4">
              Most platforms show you backtests that work perfectly. We're showing you ours that didn't — because that's how you know our descriptive tools are honest.
            </p>
            <p className="mb-4">
              We built a highly sophisticated predictive scoring engine based on technical indicators and options flow. We optimized it, tuned the hyperparameters, and achieved a 63% win rate in-sample. 
              <strong> Then, we tested it honestly.</strong> We ran a strict out-of-sample forward test on unseen data.
            </p>
            
            <div className="bg-slate-950 border border-slate-800 rounded-md overflow-hidden mb-4">
              <table className="w-full text-left border-collapse">
                <thead>
                  <tr className="bg-slate-800/50 text-slate-200">
                    <th className="p-3 border-b border-slate-700 font-medium">Test Group</th>
                    <th className="p-3 border-b border-slate-700 font-medium text-right">Expectancy (R-Multiple)</th>
                    <th className="p-3 border-b border-slate-700 font-medium text-right">Hit Rate</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td className="p-3 border-b border-slate-800 text-slate-300">Random Control (Coin Flip)</td>
                    <td className="p-3 border-b border-slate-800 text-right font-mono">+0.027R</td>
                    <td className="p-3 border-b border-slate-800 text-right font-mono">49.2%</td>
                  </tr>
                  <tr className="bg-red-950/20">
                    <td className="p-3 text-red-200">Top-Graded "A" Signals</td>
                    <td className="p-3 text-right font-mono text-red-300">+0.019R</td>
                    <td className="p-3 text-right font-mono text-red-300">48.5%</td>
                  </tr>
                </tbody>
              </table>
            </div>
            
            <p className="text-slate-400 italic">
              <strong>The Result:</strong> The edge completely vanished. The highly-engineered signals failed to beat a random coin flip. So we stopped selling them.
            </p>
          </section>

          <section>
            <h3 className="text-lg font-semibold text-slate-100 mb-2">The FactorLab Approach</h3>
            <p className="mb-3">
              Instead of black-box predictions, we built the <strong>FactorLab</strong>. This is a purely descriptive lens.
            </p>
            <p className="mb-3">
              We take the Top 50 liquid stocks and ETFs, ingest their raw fundamentals and technicals, and mathematically rank them across four academic factors: 
              <span className="text-blue-300 ml-1">Value</span>, 
              <span className="text-emerald-300 mx-1">Quality</span>, 
              <span className="text-purple-300 mx-1">Low-Volatility</span>, and 
              <span className="text-orange-300 ml-1">Momentum</span>.
            </p>
            <p>
              When you see a stock is in the 95th percentile for Quality, it is a mathematical fact about its balance sheet relative to its peers. <strong>It is not a buy recommendation.</strong> Think of this tool like Zillow for stocks: we show you the facts fast, but you still do the homework and make the decision.
            </p>
          </section>
        </div>
        
        <div className="p-4 border-t border-slate-800 bg-slate-900 rounded-b-lg flex justify-end">
          <Button onClick={onClose} className="px-6 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded">
            Got it, I'll do my own homework
          </Button>
        </div>
      </div>
    </div>
  );
}
