/* global React */
function AboutPage({ go }) {
  const [sent, setSent] = React.useState(false);
  return (
    <div>
      {/* HERO */}
      <section style={{ padding: '64px 0' }}>
        <div className="container">
          <div className="grid" style={{ gridTemplateColumns: '1.4fr 1fr', gap: 64, alignItems: 'center' }}>
            <div>
              <span className="eyebrow">ABOUT · MISSION</span>
              <h1 className="mt-4" style={{ fontSize: 64, lineHeight: 1 }}>
                Built by algo<br/>traders, for<br/><span className="gradient-text">algo traders.</span>
              </h1>
              <p className="mt-6 text-muted" style={{ fontSize: 17, maxWidth: 540, lineHeight: 1.6 }}>
Expert For Forex started as an internal toolkit. We were tired of marketplaces that hid drawdown data, faked equity curves, and sold black-box EAs. So we built our own. Every EA on this site ships with a full backtest report — every trade, every drawdown, every parameter. You see what we ship. No hiding.
              </p>
            </div>
            <div className="panel panel-padded" style={{ background: 'rgba(0,0,0,0.4)' }}>
              <div className="grid grid-2">
                <div>
                  <div className="display text-cyan" style={{ fontSize: 40 }}>10</div>
                  <div className="text-xs text-muted font-mono mt-2">EXPERT ADVISORS</div>
                </div>
                <div>
                  <div className="display text-green" style={{ fontSize: 40 }}>7.3k</div>
                  <div className="text-xs text-muted font-mono mt-2">ACTIVE TRADERS</div>
                </div>
                <div>
                  <div className="display" style={{ fontSize: 40, color: 'var(--magenta)' }}>2.4M</div>
                  <div className="text-xs text-muted font-mono mt-2">USD VOLUME 30D</div>
                </div>
                <div>
                  <div className="display" style={{ fontSize: 40, color: 'var(--amber)' }}>99.94%</div>
                  <div className="text-xs text-muted font-mono mt-2">VPS UPTIME</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* PRINCIPLES */}
      <section className="section">
        <div className="container">
          <div className="section-head text-center">
            <span className="eyebrow">PRINCIPLES</span>
            <h2 className="section-title mt-4">What we don't do</h2>
          </div>
          <div className="grid grid-3">
            {[
              { i: '01', t: 'No fake curves', d: 'Every backtest is run on 5+ years of ICMarkets tick data. We publish the trade-by-trade .csv so you can verify it yourself.' },
              { i: '02', t: 'No black-box vendors', d: 'EA developers must show their strategy logic and disclose all parameters. We don\'t resell mystery boxes.' },
              { i: '03', t: 'No subscription gates on EAs', d: 'You buy an EA once, you own it forever. Updates included. We make money from the platform, not held-hostage licenses.' },
            ].map(p => (
              <div key={p.i} className="panel panel-padded-lg lift">
                <div className="display" style={{ fontSize: 14, color: 'var(--cyan)', fontFamily: 'var(--font-mono)' }}>{p.i}</div>
                <h3 className="mt-4" style={{ fontSize: 22 }}>{p.t}</h3>
                <p className="mt-4 text-muted">{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* THE TEAM */}
      <section className="section">
        <div className="container">
          <div className="section-head text-center">
            <span className="eyebrow">THE BUILDERS</span>
            <h2 className="section-title mt-4">Small team, deep stack</h2>
          </div>
          <div className="grid grid-4">
            {[
              { name: 'Adel R.', role: 'Founder · Quant', tag: 'Ex-prop firm', accent: 'cyan' },
              { name: 'Maya N.', role: 'Lead · MQL5', tag: '12 yrs MT5', accent: 'magenta' },
              { name: 'Tariq H.', role: 'AI Engineer', tag: 'Built EFF Agent', accent: 'green' },
              { name: 'Lila K.', role: 'Infra · AWS', tag: 'Cert. Solutions Arch.', accent: 'amber' },
            ].map(p => (
              <div key={p.name} className="panel panel-padded lift">
                <div className="placeholder-img" style={{ height: 140 }}>// FACE_SHOT</div>
                <h4 className="mt-4" style={{ fontSize: 16 }}>{p.name}</h4>
                <div className="text-xs text-muted mt-1 font-mono">{p.role}</div>
                <span className={`tag tag-${p.accent} mt-3`} style={{ fontSize: 9 }}>{p.tag}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CONTACT */}
      <section className="section">
        <div className="container">
          <div className="grid grid-2" style={{ gap: 48, alignItems: 'start' }}>
            <div>
              <span className="eyebrow">CONTACT</span>
              <h2 className="mt-4" style={{ fontSize: 48, lineHeight: 1.05 }}>Let's talk<br/><span className="gradient-text">strategy</span></h2>
              <p className="mt-6 text-muted" style={{ fontSize: 16, maxWidth: 460 }}>
                Have an EA you'd like listed? Need a custom strategy built? Want to partner as a prop firm? Drop a line.
              </p>
              <div className="mt-8 flex-col gap-4">
                <div className="flex gap-4" style={{ alignItems: 'center', padding: '12px 0', borderBottom: '1px solid var(--line-soft)' }}>
                  <div className="font-mono text-xs" style={{ color: 'var(--cyan)', width: 80, letterSpacing: '0.15em' }}>EMAIL</div>
                  <EditableText id="about.contact.email" tag="div" className="font-mono" style={{ flex: 1 }}>your@email.com</EditableText>
                </div>
                <div className="flex gap-4" style={{ alignItems: 'center', padding: '12px 0', borderBottom: '1px solid var(--line-soft)' }}>
                  <div className="font-mono text-xs" style={{ color: 'var(--amber)', width: 80, letterSpacing: '0.15em' }}>TIMEZONE</div>
                  <div className="font-mono" style={{ flex: 1 }}>UTC+3 · GST · 24/7 ops</div>
                </div>
              </div>
              <div className="mt-8">
                <div className="font-mono text-xs" style={{ color: 'var(--text-3)', letterSpacing: '0.15em', marginBottom: 14 }}>FOLLOW US</div>
                <SocialLinks size={46} showLabels={true} gap={10} />
              </div>
            </div>

            <div className="panel panel-padded-lg">
              {!sent ? (
                <form onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
                  <h3 style={{ fontSize: 20 }}>Send a transmission</h3>
                  <p className="text-muted text-sm mt-2">Average response time: 4 hours.</p>
                  <div className="mt-6 flex-col gap-4">
                    <div className="field">
                      <label>Your name</label>
                      <input className="input" required/>
                    </div>
                    <div className="field">
                      <label>Email</label>
                      <input className="input" type="email" required/>
                    </div>
                    <div className="field">
                      <label>Topic</label>
                      <select className="input">
                        <option>EA submission</option>
                        <option>Custom strategy build</option>
                        <option>Prop firm partnership</option>
                        <option>Bug report</option>
                        <option>Other</option>
                      </select>
                    </div>
                    <div className="field">
                      <label>Message</label>
                      <textarea className="input" rows="5" required></textarea>
                    </div>
                    <button className="btn btn-primary btn-lg btn-block btn-sheen" type="submit">Transmit →</button>
                  </div>
                </form>
              ) : (
                <div className="text-center" style={{ padding: '48px 0' }}>
                  <div style={{ width: 80, height: 80, margin: '0 auto', borderRadius: '50%', background: 'rgba(0,255,148,0.1)', border: '2px solid var(--green)', display: 'grid', placeItems: 'center', boxShadow: '0 0 24px rgba(0,255,148,0.4)' }}>
                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="var(--green)" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  </div>
                  <h3 className="mt-6">Transmission received</h3>
                  <p className="text-muted mt-2">We'll respond within 4 hours.</p>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

window.AboutPage = AboutPage;