/* global React, FadeUp, SP_DATA */
const { useState, useEffect } = React;

function Ticker() {
  const items = [...SP_DATA.TICKER, ...SP_DATA.TICKER]; // double for seamless loop
  return (
    <div className="ticker-strip">
      <div className="label">即時 AI 推薦</div>
      <div className="ticker-track-wrap">
        <div className="ticker-track">
          {items.map((it, i) => (
            <span className="item" key={i}>
              <span className="lg">{it.lg}</span>
              <span>{it.match}</span>
              <span className="sep">·</span>
              <span className="pick">{it.pick}</span>
              <span className="sep">@</span>
              <span>{it.odds}</span>
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}

function HeroTerminal({ onCta }) {
  const [phase, setPhase] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setPhase((p) => (p + 1) % 3), 5000);
    return () => clearInterval(t);
  }, []);
  return (
    <FadeUp className="hero hero-terminal" id="hero">
      <div>
        <span className="hero-eyebrow"><span className="dot" />Sports365 · AI Lab</span>
        <h1 className="hero-title">
          AI 超前預測<br />
          <span className="accent">精準掌握</span>賽事動態
        </h1>
        <p className="hero-sub">
          以 AI 深度學習結合 600+ 特徵因子，將每天上千場賽事縮減為一份結構化的下注情報。
          看見市場看不見的細節，提前一步行動。
        </p>
        <div className="hero-cta">
          <button className="btn btn-primary" onClick={() => onCta("analyzer")}>
            立即試用 AI 分析 →
          </button>
          <button className="btn btn-ghost" onClick={() => onCta("records")}>
            查看歷史戰績
          </button>
        </div>
        <div className="hero-stats">
          <div className="hero-stat">
            <div className="num en"><span className="accent">68.4</span>%</div>
            <div className="lbl">近 30 天命中率</div>
          </div>
          <div className="hero-stat">
            <div className="num en">200<span style={{color:'var(--fg-2)'}}>K+</span></div>
            <div className="lbl">累積賽事分析</div>
          </div>
          <div className="hero-stat">
            <div className="num en">8</div>
            <div className="lbl">運算模型策略</div>
          </div>
        </div>
      </div>

      <div>
        <div className="terminal">
          <div className="terminal-bar">
            <div className="lights"><i style={{background:'#ff5b6d'}}/><i style={{background:'#ffb547'}}/><i style={{background:'var(--accent)'}}/></div>
            <span className="title">sports365 / live-analysis.py</span>
            <span className="live">LIVE</span>
          </div>
          <div className="terminal-body">
            <div className="line"><span className="ln">01</span><span><span className="kw">import</span> sports365.<span className="fn">models</span></span></div>
            <div className="line"><span className="ln">02</span><span><span className="kw">from</span> markets <span className="kw">import</span> live_odds, deep_features</span></div>
            <div className="line"><span className="ln">03</span><span className="com"># Tonight's high-conviction setups</span></div>
            <div className="line"><span className="ln">04</span><span>match = <span className="fn">load</span>(<span className="str">"Bayern vs Real Madrid"</span>)</span></div>
            <div className="line"><span className="ln">05</span><span>features = <span className="fn">extract</span>(match, depth=<span className="str">600</span>)</span></div>
            <div className="line"><span className="ln">06</span><span>model = <span className="fn">ensemble</span>(<span className="str">"value"</span>, <span className="str">"trend"</span>)</span></div>
            <div className="line"><span className="ln">07</span><span>signal = model.<span className="fn">predict</span>(features)</span></div>
            <div className="line"><span className="ln">08</span><span className="com"># &gt;&gt; signal: BUY · pick=RMA+0.5 · conf=70.4%</span></div>
            <div className="out">
              <div style={{color:'var(--accent)', fontSize:11, letterSpacing:'0.14em', marginBottom:6, fontFamily:'var(--font-mono)'}}>SIGNAL · 22:14:08</div>
              <div style={{fontSize:14, fontWeight:600}}>UCL · Bayern vs Real Madrid</div>
              <div style={{fontSize:13, color:'var(--fg-2)', marginTop:6}}>建議倉位 <b style={{color:'var(--fg)'}}>RMA +0.5</b> @ 1.83 · 信心度 70.4%</div>
            </div>
          </div>
        </div>
      </div>
    </FadeUp>
  );
}

function HeroMarketing({ onCta }) {
  return (
    <FadeUp className="hero hero-marketing" id="hero">
      <span className="hero-eyebrow"><span className="dot" />Sports365 · AI 賽事預測</span>
      <h1 className="hero-title">
        提升投注價值<br /><span className="accent">獲利從現在開始</span>
      </h1>
      <p className="hero-sub">
        AI 深度學習結合 600+ 特徵因子。
        <br/>每天為你縮減上千場賽事，找出真正值得下注的機會。
      </p>
      <div className="hero-cta">
        <button className="btn btn-primary" onClick={() => onCta("analyzer")}>免費試用 →</button>
        <button className="btn btn-ghost" onClick={() => onCta("records")}>歷史戰績</button>
      </div>
      <div className="hero-stats">
        <div className="hero-stat"><div className="num en"><span className="accent">68.4</span>%</div><div className="lbl">近 30 天命中率</div></div>
        <div className="hero-stat"><div className="num en">200K+</div><div className="lbl">累積賽事</div></div>
        <div className="hero-stat"><div className="num en">36萬</div><div className="lbl">會員回報</div></div>
      </div>
    </FadeUp>
  );
}

function HeroTickerVariant({ onCta }) {
  return (
    <FadeUp className="hero hero-ticker" id="hero">
      <div className="hero-banner">
        <span className="hero-eyebrow"><span className="dot" />今日 AI 推薦 · 即時更新</span>
        <h1 className="hero-title">今晚 <span className="accent">12 場</span><br />值得下注的賽事</h1>
        <p className="hero-sub">AI 已掃描 1,847 場全球賽事。為你篩選出信心度 ≥ 70% 的高價值倉位。</p>
        <div className="hero-cta">
          <button className="btn btn-primary" onClick={() => onCta("schedule")}>查看今日賽程 →</button>
          <button className="btn btn-ghost" onClick={() => onCta("analyzer")}>開啟 AI 分析</button>
        </div>
      </div>
      <Ticker />
    </FadeUp>
  );
}

function Hero({ variant, onCta }) {
  if (variant === "marketing") return <HeroMarketing onCta={onCta} />;
  if (variant === "ticker") return <HeroTickerVariant onCta={onCta} />;
  return <HeroTerminal onCta={onCta} />;
}

window.Hero = Hero;
window.Ticker = Ticker;