// Section 4 — AI inside Fortec (dark, interactive)
const { IBrain } = window;

function createLandingRandom(seed) {
  let value = seed >>> 0;
  return () => {
    value = (value * 1664525 + 1013904223) >>> 0;
    return value / 4294967296;
  };
}

function AiDemo() {
  const { t } = useLandingI18n();
  const tickers = {
    AAPL: { price: '184.21', name: 'Apple Inc.', rank: 0.74, vol: [0.18, 0.26], regime: 'Trend · neutral', regimeT: 'neutral', sent: '+0.24', mc: '€198 → €214', thesis: 'Margins expanded Q3; services tier supports ranker confidence. Volatility has compressed — ensemble treats current level as fairly priced.' },
    NVDA: { price: '904.18', name: 'NVIDIA Corp.', rank: 0.94, vol: [0.38, 0.54], regime: 'Momentum · bull', regimeT: 'bull', sent: '+0.71', mc: '€890 → €1,120', thesis: 'Five of seven models overweight. Realized vol is elevated — position sizing matters more than entry. Monte Carlo p50 implies +24% over 90 days.' },
    TSLA: { price: '178.32', name: 'Tesla Inc.', rank: 0.41, vol: [0.42, 0.61], regime: 'Range · mean-revert', regimeT: 'neutral', sent: '−0.12', mc: '€162 → €198', thesis: 'Ranker underweight. News features show delivery-miss drag; regime detector flags narrow range. Avoid aggressive adds; hedged exposure only.' },
    BTC: { price: '62,481', name: 'Bitcoin', rank: 0.68, vol: [0.52, 0.74], regime: 'Momentum · bull', regimeT: 'bull', sent: '+0.58', mc: '€58,200 → €74,100', thesis: 'Regime detector confirms bull trend post-halving. Funding rates remain sane. Ensemble treats drawdowns > 12% as accumulation.' },
  };
  const [sym, setSym] = React.useState('NVDA');
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => { setTick(t => t + 1); }, [sym]);
  const ticker = tickers[sym];

  return (
    <div className="ai-demo">
      <div className="ai-demo__top">
        <span className="ai-demo__label">{t('Seven-model ensemble · {{name}}', { name: t(ticker.name) })}</span>
        <span className="ai-demo__live"><span className="ai-demo__live-dot"/>Computing</span>
      </div>
      <div className="ticker-pick" role="tablist">
        {Object.keys(tickers).map(k => (
          <button key={k}
            className={'ticker-pick__btn ' + (sym === k ? 'is-active' : '')}
            onClick={() => setSym(k)}
            role="tab" aria-selected={sym === k}>
            {k}
            <span className="ticker-pick__price">€{tickers[k].price}</span>
          </button>
        ))}
      </div>
      <div className="ai-demo__body" key={tick}>
        <OutRow delay={0}
          label="Ranker score"
          value={ticker.rank.toFixed(2)}
          sub={`${Math.round(ticker.rank * 100)}th percentile · S&P 500`}
          viz={<RankBar v={ticker.rank}/>}
          tag={ticker.rank > 0.7 ? {kind:'bull', text:'OVERWEIGHT'} : ticker.rank < 0.5 ? {kind:'bear', text:'UNDERWEIGHT'} : {kind:'neutral', text:'HOLD'}}
        />
        <OutRow delay={70}
          label="Volatility band"
          value={`${(ticker.vol[0]*100).toFixed(0)}–${(ticker.vol[1]*100).toFixed(0)}%`}
          sub="Darts · 20-day realized + GARCH"
          viz={<VolBand lo={ticker.vol[0]} hi={ticker.vol[1]}/>}
        />
        <OutRow delay={140}
          label="Regime"
          value={t(ticker.regime)}
          sub="HMM + change-point detector"
          viz={<RegimeDots regime={ticker.regimeT}/>}
          tag={ticker.regimeT === 'bull' ? {kind:'bull', text:'BULL'} : ticker.regimeT === 'bear' ? {kind:'bear', text:'BEAR'} : {kind:'neutral', text:'NEUTRAL'}}
        />
        <OutRow delay={210}
          label="News sentiment"
          value={ticker.sent}
          sub="7-day rolling · 412 articles"
          viz={<Sentiment v={parseFloat(ticker.sent)}/>}
        />
        <OutRow delay={280}
          label="Monte Carlo p50"
          value={ticker.mc}
          sub="10,000 paths · 90 days · 2σ envelope"
          viz={<MCViz/>}
        />
        <div className="thesis reveal" style={{animationDelay:'360ms'}}>
          <div style={{display:'flex', gap:10, alignItems:'flex-start'}}>
            <div style={{width:24, height:24, borderRadius:6, background:'#FAFAFA', color:'#0A0A0A', display:'grid', placeItems:'center', flexShrink:0}}>
              <IBrain size={14}/>
            </div>
            <div>
              <div style={{fontFamily:'var(--font-mono)', fontSize:10, color:'#737373', letterSpacing:'0.1em', textTransform:'uppercase', marginBottom:6}}>Ensemble thesis</div>
              {t(ticker.thesis)}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function OutRow({ label, value, sub, viz, tag, delay }) {
  const ref = React.useRef();
  React.useEffect(() => {
    const el = ref.current; if (!el) return;
    el.classList.remove('reveal');
    void el.offsetWidth;
    const timer = setTimeout(() => el.classList.add('reveal'), delay);
    return () => clearTimeout(timer);
  }, [delay, value]);
  return (
    <div ref={ref} className="ai-out" style={{transitionDelay: `${delay}ms`}}>
      <div>
        <div className="ai-out__label">{label}</div>
        <div className="ai-out__val num">{value}</div>
        <div className="ai-out__sub">{sub}</div>
      </div>
      <div className="ai-out__viz">{viz}</div>
      {tag ? <div className={`ai-out__tag tag--${tag.kind}`}>{tag.text}</div> : <div/>}
    </div>
  );
}

function RankBar({ v }) {
  return (
    <div style={{width: 140}}>
      <div style={{height:8, background:'#1F1F1F', borderRadius:999, overflow:'hidden', position:'relative'}}>
        <div style={{position:'absolute', inset:0, right:'auto', width:`${v*100}%`, background:'#FAFAFA', borderRadius:999, transition:'width 600ms var(--ease-out)'}}/>
      </div>
      <div style={{display:'flex', justifyContent:'space-between', fontFamily:'var(--font-mono)', fontSize:9, color:'#525252', marginTop:4}}>
        <span>0</span><span>0.5</span><span>1.0</span>
      </div>
    </div>
  );
}

function VolBand({ lo, hi }) {
  return (
    <svg width="140" height="36" viewBox="0 0 140 36">
      <defs>
        <linearGradient id="vg" x1="0" x2="1">
          <stop offset="0%" stopColor="#0B8F4C" stopOpacity="0.2"/>
          <stop offset="50%" stopColor="#B8710B" stopOpacity="0.25"/>
          <stop offset="100%" stopColor="#C8321A" stopOpacity="0.25"/>
        </linearGradient>
      </defs>
      <rect x="0" y="14" width="140" height="8" rx="4" fill="#1F1F1F"/>
      <rect x={lo * 140} y="14" width={(hi-lo) * 140} height="8" rx="4" fill="url(#vg)"/>
      <line x1={lo * 140} x2={lo * 140} y1="8" y2="28" stroke="#FAFAFA" strokeWidth="1.2"/>
      <line x1={hi * 140} x2={hi * 140} y1="8" y2="28" stroke="#FAFAFA" strokeWidth="1.2"/>
    </svg>
  );
}

function RegimeDots({ regime }) {
  const states = ['bear', 'neutral', 'bull'];
  return (
    <div style={{display:'flex', gap:4, alignItems:'center'}}>
      {states.map(s => (
        <div key={s} style={{
          width:28, height:6, borderRadius:3,
          background: s === regime ? (s==='bull'?'#0B8F4C':s==='bear'?'#C8321A':'#A3A3A3') : '#262626',
          transition: 'background 400ms var(--ease-out)'
        }}/>
      ))}
    </div>
  );
}

function Sentiment({ v }) {
  const pct = (v + 1) / 2;
  return (
    <svg width="140" height="28" viewBox="0 0 140 28">
      <line x1="0" y1="14" x2="140" y2="14" stroke="#262626" strokeWidth="1"/>
      <line x1="70" y1="6" x2="70" y2="22" stroke="#525252" strokeWidth="1" strokeDasharray="2 2"/>
      <circle cx={pct * 140} cy="14" r="5" fill={v >= 0 ? '#0B8F4C' : '#C8321A'}/>
      <circle cx={pct * 140} cy="14" r="10" fill={v >= 0 ? '#0B8F4C' : '#C8321A'} opacity="0.2"/>
    </svg>
  );
}

function MCViz() {
  const paths = React.useMemo(() => {
    const ps = [];
    for (let k = 0; k < 5; k++) {
      const random = createLandingRandom((k + 1) * 97);
      const pts = [];
      let v = 20;
      for (let i = 0; i < 14; i++) {
        v += (random() - 0.35) * 3;
        pts.push(v);
      }
      ps.push(pts);
    }
    return ps;
  }, []);
  return (
    <svg width="140" height="36" viewBox="0 0 140 36">
      {paths.map((pts, i) => (
        <path key={i}
          d={pts.map((p, j) => `${j===0?'M':'L'}${j*10} ${36 - Math.max(2, Math.min(34, p))}`).join(' ')}
          fill="none" stroke="#FAFAFA" strokeWidth="0.9" opacity={0.2 + i * 0.1}/>
      ))}
    </svg>
  );
}

Object.assign(window, { AiDemo });