/* global React */
const { useState: useStateHome, useEffect: useEffectHome } = React;

function HomePage({ go, onBuy }) {
  const [, setTick] = useStateHome(0);
  useEffectHome(() => {
    const handler = () => setTick((t) => t + 1);
    window.addEventListener('eff_eas_changed', handler);
    return () => window.removeEventListener('eff_eas_changed', handler);
  }, []);
  const allEAs = window.EAReports?.effectiveList?.() || window.EA_LIST || [];
  const eaCount = allEAs.length;
  const featured = allEAs.slice(0, 3);
  return (
    <div>
      {/* HERO */}
      <section style={{ padding: '80px 0 60px', position: 'relative' }}>
        <div className="container">
          <div className="grid" style={{ gridTemplateColumns: '1.1fr 1fr', gap: 64, alignItems: 'center' }}>
            <div>
              <EditableText id="home.hero.eyebrow" tag="span" className="eyebrow"> · BACKTESTED · MT5</EditableText>
              <h1 className="mt-4" style={{ fontSize: 'clamp(36px, 7vw, 72px)', lineHeight: 0.98, letterSpacing: '-0.01em' }}>
                <EditableText id="home.hero.title.l1" tag="span">Trade with</EditableText><br />
                <span className="gradient-text"><EditableText id="home.hero.title.l2" tag="span">expert systems</EditableText></span><br />
                <EditableText id="home.hero.title.l3" tag="span">that never sleep.</EditableText>
              </h1>
              <EditableText id="home.hero.desc" tag="p" className="mt-6" style={{ fontSize: 18, color: 'var(--text-2)', maxWidth: 520, lineHeight: 1.6 }}>
                A marketplace of battle-tested MT5 Expert Advisors. Every system is backtested on 5+ years of broker tick data and shipped with set files, .ex5 binaries, and an AI agent that helps you pick, tune, and size.
              </EditableText>
              <div className="flex gap-3 mt-8">
                <button className="btn btn-primary btn-lg btn-sheen" onClick={() => go('marketplace')}><EditableText id="home.hero.cta1" tag="span">Explore Marketplace →</EditableText></button>
                <button className="btn btn-ghost btn-lg" onClick={() => go('agent')}><EditableText id="home.hero.cta2" tag="span">Talk to AI Agent</EditableText></button>
              </div>
              <div className="flex gap-8 mt-12" style={{ alignItems: 'flex-end' }}>
                <div>
                  <div className="stat-value cyan" style={{ fontSize: 32 }}><CountUp to={eaCount} /></div>
                  <div className="stat-label">Expert Advisors</div>
                </div>
                <div>
                  <div className="stat-value green" style={{ fontSize: 32 }}>5+<span style={{ fontSize: 18 }}>yr</span></div>
                  <div className="stat-label">Backtest Window</div>
                </div>
                <div>
                  <div className="stat-value" style={{ fontSize: 32, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <img src="mt5-logo.png" alt="MetaTrader 5" style={{ display: 'block', height: '52px', width: 'auto' }} />
                  </div>
                  <div className="stat-label">Platform</div>
                </div>
              </div>
            </div>
            {/* Right side — backtest snapshot */}
            <div className="panel panel-glow hero-snapshot-panel" style={{ padding: 0, overflow: 'hidden', background: '#05060D', boxShadow: '0 40px 100px rgba(0,0,0,0.6), 0 0 0 1px var(--line-strong), 0 0 80px rgba(0, 229, 255, 0.15)' }}>
              <div style={{ background: '#000', borderBottom: '1px solid var(--line)', padding: '10px 14px', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <div className="flex gap-2" style={{ alignItems: 'center' }}>
                  <span style={{ width: 10, height: 10, borderRadius: '50%', background: 'var(--red)' }} />
                  <span style={{ width: 10, height: 10, borderRadius: '50%', background: 'var(--amber)' }} />
                  <span style={{ width: 10, height: 10, borderRadius: '50%', background: 'var(--green)' }} />
                </div>
                <span className="tag">AI SCALPER · BACKTEST</span>
              </div>
              <div style={{ padding: 24 }}>
                <div className="flex-between mb-4">
                  <div>
                    <div className="stat-label">12-MONTH RETURN</div>
                    <div className="display" style={{ fontSize: 36, color: 'var(--green)', textShadow: '0 0 16px rgba(0,255,148,0.4)' }}>+223.2%</div>
                  </div>
                  <div className="text-right">
                    <div className="stat-label">PERIOD</div>
                    <div className="display" style={{ fontSize: 18, color: 'var(--cyan)' }}>2025 — 2026</div>
                    <div className="font-mono text-xs text-muted mt-1">XAUUSD · H1</div>
                  </div>
                </div>
                <div style={{ height: 180, marginTop: 12 }}>
                  <EquityCurve data={featured[0].curve} height={180} />
                </div>
                <div className="grid grid-3 mt-6" style={{ gap: 12 }}>
                  <div className="panel" style={{ padding: 12, textAlign: 'center' }}>
                    <div className="stat-label">Trades</div>
                    <div className="display" style={{ fontSize: 18, color: 'var(--cyan)', marginTop: 4 }}>247</div>
                  </div>
                  <div className="panel" style={{ padding: 12, textAlign: 'center' }}>
                    <div className="stat-label">Win Rate</div>
                    <div className="display" style={{ fontSize: 18, color: 'var(--green)', marginTop: 4 }}>68.4%</div>
                  </div>
                  <div className="panel" style={{ padding: 12, textAlign: 'center' }}>
                    <div className="stat-label">PF</div>
                    <div className="display" style={{ fontSize: 18, color: 'var(--magenta)', marginTop: 4 }}>2.14</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* HOW IT WORKS */}
      <section className="section">
        <div className="container">
          <div className="section-head text-center">
            <EditableText id="home.how.eyebrow" tag="span" className="eyebrow">PROTOCOL</EditableText>
            <EditableText id="home.how.title" tag="h2" className="section-title mt-4">From purchase to profit in 4 minutes</EditableText>
          </div>
          <div className="grid grid-4">
            {[
            { n: '01', tKey: 'home.how.s1.t', dKey: 'home.how.s1.d', t: 'Choose your EA', d: 'Browse  backtested strategies. Filter by risk, pair, and timeframe.' },
            { n: '02', tKey: 'home.how.s2.t', dKey: 'home.how.s2.d', t: 'Pay with crypto or pay', d: 'USDT, BTC, Apple Pay, Binance Pay — checkout in under 30s.' },
            { n: '03', tKey: 'home.how.s3.t', dKey: 'home.how.s3.d', t: 'Deploy on VPS', d: 'One-click install on your MT5 + VPS template.' },
            { n: '04', tKey: 'home.how.s4.t', dKey: 'home.how.s4.d', t: 'Run on your VPS', d: 'Attach the .ex5 to MT5, apply the .set file, and let it trade 24/7 on your account.' }].
            map((s) =>
            <div key={s.n} className="panel panel-padded lift">
                <div className="display" style={{ fontSize: 14, color: 'var(--cyan)', fontFamily: 'var(--font-mono)' }}>{s.n}</div>
                <EditableText id={s.tKey} tag="h3" className="mt-4" style={{ fontSize: 20 }}>{s.t}</EditableText>
                <EditableText id={s.dKey} tag="p" className="mt-2 text-sm text-muted">{s.d}</EditableText>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* FEATURED EAs */}
      <section className="section">
        <div className="container">
          <div className="flex-between section-head">
            <div>
              <EditableText id="home.featured.eyebrow" tag="span" className="eyebrow">FEATURED SYSTEMS</EditableText>
              <EditableText id="home.featured.title" tag="h2" className="section-title mt-4">Top-performing this month</EditableText>
            </div>
            <button className="btn btn-ghost" onClick={() => go('marketplace')}>View all 10 →</button>
          </div>
          <div className="grid grid-3">
            {featured.map((ea) => <EACard key={ea.id} ea={ea} go={go} onBuy={onBuy} />)}
          </div>
        </div>
      </section>

      {/* AI AGENT PROMO */}
      <section className="section">
        <div className="container">
          <div className="panel panel-glow" style={{ padding: 48, position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', top: -100, right: -100, width: 400, height: 400, background: 'radial-gradient(circle, rgba(255,45,170,0.18), transparent 70%)', filter: 'blur(40px)' }} />
            <div className="grid grid-2" style={{ gap: 48, alignItems: 'center' }}>
              <div>
                <span className="eyebrow">AI AGENT</span>
                <h2 className="mt-4" style={{ fontSize: 44, lineHeight: 1.1 }}>
                  Your personal <span className="gradient-text">algo strategist</span>, on call 24/7
                </h2>
                <p className="mt-4 text-muted" style={{ fontSize: 16 }}>
Trained on every EA's source, parameters, and backtest data. Asks about your risk appetite, your broker, your timeframe — and recommends the system that fits.
                </p>
                <ul className="mt-6 flex-col gap-3" style={{ listStyle: 'none', padding: 0 }}>
                  {['Recommends EAs based on your trading style', 'Tunes lot size, SL, TP for your account size', 'Explains parameters and risk in plain language', 'Bilingual: Arabic + English'].map((t) =>
                  <li key={t} className="flex gap-3" style={{ alignItems: 'center' }}>
                      <span style={{ color: 'var(--cyan)', fontFamily: 'var(--font-mono)' }}>▸</span>
                      <span>{t}</span>
                    </li>
                  )}
                </ul>
                <button className="btn btn-magenta btn-lg btn-sheen mt-8" onClick={() => go('agent')}>Open Agent →</button>
              </div>
              <div className="panel" style={{ padding: 24, background: 'rgba(0,0,0,0.4)' }}>
                <div className="chat-msg">
                  <div className="chat-avatar user">U</div>
                  <div className="chat-bubble">I have a $5k account and want low drawdown. EURUSD only.</div>
                </div>
                <div className="chat-msg">
                  <div className="chat-avatar bot">EFF</div>
                  <div className="chat-bubble bot">
                    For your profile I'd recommend <strong style={{ color: 'var(--cyan)' }}>ORION HEDGE</strong> — DD of 6.2% and PF 1.72 on EURUSD. With $5k I'd cap risk at 1% per trade → lot size 0.05. Want me to generate the .set file?
                  </div>
                </div>
                <div className="chat-msg">
                  <div className="chat-avatar user">U</div>
                  <div className="chat-bubble">Yes please</div>
                </div>
                <div className="chat-msg">
                  <div className="chat-avatar bot">EFF</div>
                  <div className="chat-bubble bot">
                    <div className="typing"><span /><span /><span /></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* TESTIMONIALS */}
      <section className="section">
        <div className="container">
          <div className="section-head text-center">
            <span className="eyebrow">TRUST</span>
<h2 className="section-title mt-4">From traders running them today</h2>
          </div>
          <div className="grid grid-3">
            {window.TESTIMONIALS.map((t, i) =>
            <div key={i} className="panel panel-padded">
                <div style={{ fontSize: 28, color: `var(--${t.accent})`, lineHeight: 1, marginBottom: 12, fontFamily: 'var(--font-display)' }}>"</div>
                <p style={{ fontSize: 15, lineHeight: 1.6 }}>{t.text}</p>
                <div className="divider" />
                <div className="flex-between">
                  <div>
                    <div style={{ fontWeight: 600 }}>{t.name}</div>
                    <div className="text-xs text-muted">{t.role}</div>
                  </div>
                  <span className="tag tag-green">BACKTESTED</span>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section">
        <div className="container">
          <div className="text-center" style={{ padding: '64px 24px', border: '1px solid var(--line-strong)', borderRadius: 'var(--r-xl)', background: 'radial-gradient(ellipse at center, rgba(0,229,255,0.08), transparent 70%)' }}>
            <span className="eyebrow"><EditableText id="home.cta.eyebrow" tag="span">READY</EditableText></span>
            <h2 className="mt-4" style={{ fontSize: 56, lineHeight: 1.05 }}><EditableText id="home.cta.title.l1" tag="span">Deploy your first</EditableText><br /><EditableText id="home.cta.title.l2" tag="span">expert system </EditableText><span className="gradient-text"><EditableText id="home.cta.title.l3" tag="span">today</EditableText></span></h2>
            <div className="flex gap-3 mt-8" style={{ justifyContent: 'center' }}>
              <button className="btn btn-primary btn-lg btn-sheen" onClick={() => go('marketplace')}>Browse Marketplace</button>
              <button className="btn btn-ghost btn-lg" onClick={() => go('agent')}>Talk to AI Agent</button>
            </div>
          </div>
        </div>
      </section>
    </div>);

}

/* ---------- Reusable EA Card ---------- */
function EACard({ ea, go, onBuy }) {
  const badgeColor = ea.badge === 'Best Seller' ? 'tag-green' : ea.badge === 'New' ? 'tag-magenta' : ea.badge === 'High Risk' || ea.badge === 'Aggressive' ? 'tag-red' : ea.badge === 'Pro' ? 'tag-magenta' : 'tag-amber';
  return (
    <div className="panel lift" style={{ padding: 0, overflow: 'hidden', cursor: 'pointer' }} onClick={() => go('detail', ea.id)}>
      {/* EA hero image — drop your own */}
      <div style={{ position: 'relative', height: 160, background: 'rgba(0,0,0,0.4)', borderBottom: '1px solid var(--line)' }}>
        <EAImageSlot eaId={ea.id} name={ea.name} />
        <div style={{ position: 'absolute', top: 12, left: 12, right: 12, display: 'flex', justifyContent: 'space-between', pointerEvents: 'none', zIndex: 2 }}>
          <span className="tag" style={{ fontSize: 9, backdropFilter: 'blur(8px)', background: 'rgba(5,6,13,0.6)' }}>{ea.strategy}</span>
          {ea.badge && <span className={`tag ${badgeColor}`} style={{ fontSize: 9, backdropFilter: 'blur(8px)' }}>{ea.badge}</span>}
        </div>
      </div>
      {/* Mini backtest curve strip */}
      <div style={{ position: 'relative', height: 60, background: 'rgba(0,0,0,0.3)', borderBottom: '1px solid var(--line)' }}>
        <EquityCurve data={ea.curve} height={60} animated={false} />
        <div style={{ position: 'absolute', bottom: 6, left: 12 }}>
          <span className="font-mono text-xs text-muted" style={{ fontSize: 9, letterSpacing: '0.1em' }}>12M BACKTEST · +{((ea.curve[ea.curve.length - 1] / ea.curve[0] - 1) * 100).toFixed(1)}%</span>
        </div>
      </div>
      <div style={{ padding: 20 }}>
        <h3 style={{ fontSize: 18 }}>{ea.name}</h3>
        <p className="text-sm text-muted mt-2" style={{ minHeight: 40 }}>{ea.tagline}</p>
        <div className="flex gap-2 mt-4" style={{ flexWrap: 'wrap' }}>
          {ea.pairs.slice(0, 3).map((p) => <span key={p} className="font-mono text-xs" style={{ color: 'var(--text-3)', padding: '2px 8px', background: 'rgba(255,255,255,0.04)', borderRadius: 4 }}>{p}</span>)}
        </div>
        <div className="divider" />
        <div className="grid grid-3" style={{ gap: 8, marginBottom: 16 }}>
          <div><div className="stat-label" style={{ fontSize: 9 }}>Win</div><div className="font-mono text-cyan" style={{ fontSize: 14 }}>{ea.winRate}%</div></div>
          <div><div className="stat-label" style={{ fontSize: 9 }}>PF</div><div className="font-mono text-green" style={{ fontSize: 14 }}>{ea.pf}</div></div>
          <div><div className="stat-label" style={{ fontSize: 9 }}>DD</div><div className="font-mono text-red" style={{ fontSize: 14 }}>{ea.dd}%</div></div>
        </div>
        <div className="flex-between">
          <div>
            <div className="stat-label" style={{ fontSize: 9 }}>License from</div>
            <div className="display" style={{ fontSize: 22, color: 'var(--cyan)' }}>${ea.licenses ? Math.min(...ea.licenses.map((l) => l.price)) : ea.price}</div>
          </div>
          <button className="btn btn-primary btn-sm btn-sheen" onClick={(e) => {e.stopPropagation();onBuy(ea);}}>Buy →</button>
        </div>
      </div>
    </div>);

}

window.HomePage = HomePage;
window.EACard = EACard;