// NeuroForge — subpages
const { useEffect: uE, useRef: uR, useState: uS } = React;

function AgentsPage({ t, go }) {
  const a = t.agents;
  return (
    <div className="page active">
      <section className="page-hero">
        <div className="hero-grid"></div>
        <div className="container">
          <span className="eyebrow"><span className="dot"></span>{a.h_eyebrow}</span>
          <h1><span className="gradient-text">{a.h_title_lead}</span>{a.h_title_rest}</h1>
          <p>{a.h_tag}</p>
          <div style={{display:'flex', gap:'12px', marginTop:'32px', flexWrap:'wrap'}}>
            <button className="btn btn-plasma" onClick={() => go('contact')}>{t.cta.deploy} →</button>
            <button className="btn btn-ghost" onClick={() => go('rl')}>{a.h_cta_alt}</button>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="sec-head reveal">
            <span className="eyebrow mono">{a.arch_eyebrow}</span>
            <h2>{a.arch_title}</h2>
            <p>{a.arch_tag}</p>
          </div>

          <div className="feat-grid">
            {a.arch.map((c, i) => {
              const icon = ['◆','◇','○','△','□','☆'][i] || '◆';
              return (
                <div key={i} className="card col-4 reveal" data-d={(i%4)+1}>
                  <div className="icon" style={{fontSize:'22px', color:'#00e0ff'}}>{icon}</div>
                  <h3>{c.t}</h3>
                  <p>{c.d}</p>
                </div>
              );
            })}
          </div>
        </div>
      </section>

      <section className="section" style={{paddingTop:0}}>
        <div className="container">
          <div className="sec-head reveal">
            <span className="eyebrow mono">{a.runtime_eyebrow}</span>
            <h2>{a.runtime_title}</h2>
          </div>
          <div className="feat-grid">
            {a.runtime.map((c, i) => (
              <div key={i} className="card col-6 reveal" data-d={(i%2)+1}>
                <h3>{c.t}</h3>
                <p style={{marginTop:'8px'}}>{c.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTABand t={t} go={go}/>
    </div>
  );
}

function RLPage({ t, go }) {
  const r = t.rl;
  return (
    <div className="page active">
      <section className="page-hero">
        <div className="hero-grid"></div>
        <div className="container">
          <span className="eyebrow"><span className="dot"></span>{r.h_eyebrow}</span>
          <h1><span className="gradient-text">{r.h_title_lead}</span>{r.h_title_rest}</h1>
          <p>{r.h_tag}</p>
          <div style={{display:'flex', gap:'12px', marginTop:'32px', flexWrap:'wrap'}}>
            <button className="btn btn-plasma" onClick={() => go('contact')}>{t.cta.talk} →</button>
            <button className="btn btn-ghost" onClick={() => go('agents')}>{r.h_cta_alt}</button>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="sec-head reveal">
            <span className="eyebrow mono">{r.methods_eyebrow}</span>
            <h2>{r.methods_title}</h2>
          </div>
          <div className="feat-grid">
            {r.methods.map((c, i) => (
              <div key={i} className="card col-4 reveal" data-d={(i%3)+1}>
                <h3>{c.t}</h3>
                <p style={{marginTop:'8px'}}>{c.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{paddingTop:0}}>
        <div className="container">
          <div className="sec-head reveal">
            <span className="eyebrow mono">{r.tel_eyebrow}</span>
            <h2>{r.tel_title}</h2>
            <p>{r.tel_tag}</p>
          </div>
          <div className="rl-viz reveal">
            <div className="rl-charts">
              <RLChart label={r.chart_reward} color="#00e0ff" trend="up"/>
              <RLChart label={r.chart_entropy} color="#a855f7" trend="down"/>
              <RLChart label={r.chart_loss} color="#ec4899" trend="down"/>
              <RLChart label={r.chart_episode} color="#22f0d5" trend="up"/>
            </div>
          </div>
        </div>
      </section>

      <CTABand t={t} go={go}/>
    </div>
  );
}

function RLChart({ label, color, trend }) {
  const points = uS(() => {
    const arr = Array.from({length: 60}, (_, i) => {
      const base = trend === 'up' ? i * 1.4 : 80 - i * 1.0;
      const noise = Math.sin(i * 0.5) * 6 + (Math.random() - 0.5) * 4;
      return Math.max(8, Math.min(110, base + noise + 20));
    });
    return arr.map((y, i) => `${(i/59)*280},${130 - y}`).join(' ');
  })[0];
  // Sanitize label for use in SVG gradient id (avoid spaces/diacritics)
  const gid = `g-${label.replace(/[^A-Za-z0-9]/g, '-')}`;
  return (
    <div className="rl-chart">
      <h4>{label}</h4>
      <svg viewBox="0 0 280 130" preserveAspectRatio="none">
        <defs>
          <linearGradient id={gid} x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={color} stopOpacity="0.4"/>
            <stop offset="100%" stopColor={color} stopOpacity="0"/>
          </linearGradient>
        </defs>
        {[0,1,2,3].map(i => <line key={i} x1="0" x2="280" y1={20+i*30} y2={20+i*30} stroke="rgba(255,255,255,0.05)"/>)}
        <polygon points={`0,130 ${points} 280,130`} fill={`url(#${gid})`}/>
        <polyline points={points} fill="none" stroke={color} strokeWidth="1.5"/>
      </svg>
    </div>
  );
}

function CyberPage({ t, go }) {
  const c = t.cyber;
  return (
    <div className="page active">
      <section className="page-hero">
        <div className="hero-grid"></div>
        <div className="container">
          <span className="eyebrow"><span className="dot"></span>{c.h_eyebrow}</span>
          <h1>{c.h_title_pre}<span className="gradient-text">{c.h_title_grad}</span>{c.h_title_post}</h1>
          <p>{c.h_tag}</p>
          <div style={{display:'flex', gap:'12px', marginTop:'32px', flexWrap:'wrap'}}>
            <button className="btn btn-plasma" onClick={() => go('contact')}>{t.cta.book} →</button>
            <button className="btn btn-ghost" onClick={() => go('agents')}>{c.h_cta_alt}</button>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="sec-head reveal">
            <span className="eyebrow mono">{c.soc_eyebrow}</span>
            <h2>{c.soc_title}</h2>
          </div>
          <ThreatPanel t={t}/>
        </div>
      </section>

      <section className="section" style={{paddingTop:0}}>
        <div className="container">
          <div className="sec-head reveal">
            <span className="eyebrow mono">{c.caps_eyebrow}</span>
            <h2>{c.caps_title}</h2>
          </div>
          <div className="feat-grid">
            {c.caps.map((card, i) => (
              <div key={i} className="card col-4 reveal" data-d={(i%3)+1}>
                <h3>{card.t}</h3>
                <p style={{marginTop:'8px'}}>{card.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTABand t={t} go={go}/>
    </div>
  );
}

function ThreatPanel({ t }) {
  // Event labels intentionally kept in English — these mimic real SOC log entries,
  // which are language-agnostic in practice (security tooling outputs English).
  const [threats, setThreats] = uS([
    { sev: 'crit', lbl: 'Lateral movement detected · DC-SRV-04', src: 'EDR', time: '0.2s ago' },
    { sev: 'high', lbl: 'Credential spray · /auth/login', src: 'WAF', time: '4s ago' },
    { sev: 'high', lbl: 'Anomalous DNS exfil · 8.8.4.4', src: 'NDR', time: '11s ago' },
    { sev: 'med', lbl: 'PowerShell encoded payload', src: 'EDR', time: '32s ago' },
    { sev: 'med', lbl: 'New admin account · IT-OPS', src: 'AD', time: '1m ago' },
    { sev: 'low', lbl: 'TLS cert expiring · api.corp', src: 'NET', time: '4m ago' },
  ]);
  uE(() => {
    const id = setInterval(() => {
      setThreats(prev => {
        const labels = ['Beacon callback detected', 'Privilege escalation attempt', 'Suspicious S3 GET burst', 'WebShell signature match', 'Token theft · OAuth flow', 'Container escape attempt'];
        const sevs = ['crit','high','high','med','med','low'];
        const sources = ['EDR','SIEM','WAF','NDR','CWP','AD'];
        const newRow = {
          sev: sevs[Math.floor(Math.random()*sevs.length)],
          lbl: labels[Math.floor(Math.random()*labels.length)],
          src: sources[Math.floor(Math.random()*sources.length)],
          time: '0.1s ago',
        };
        return [newRow, ...prev.slice(0,5)];
      });
    }, 2800);
    return () => clearInterval(id);
  }, []);

  const hdr = t.cyber.threat_hdr;
  return (
    <div className="threat-panel reveal">
      <div className="radar">
        <svg viewBox="0 0 300 300">
          <defs>
            <radialGradient id="rdg" cx="50%" cy="50%">
              <stop offset="0%" stopColor="#00e0ff" stopOpacity="0.15"/>
              <stop offset="100%" stopColor="#00e0ff" stopOpacity="0"/>
            </radialGradient>
            <linearGradient id="sweep" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0%" stopColor="#00e0ff" stopOpacity="0"/>
              <stop offset="100%" stopColor="#00e0ff" stopOpacity="0.7"/>
            </linearGradient>
          </defs>
          <circle cx="150" cy="150" r="140" fill="url(#rdg)"/>
          {[40,80,120].map(r => <circle key={r} cx="150" cy="150" r={r} fill="none" stroke="rgba(0,224,255,0.2)" strokeDasharray="4 6"/>)}
          <line x1="10" x2="290" y1="150" y2="150" stroke="rgba(0,224,255,0.1)"/>
          <line x1="150" x2="150" y1="10" y2="290" stroke="rgba(0,224,255,0.1)"/>
          <g style={{transformOrigin:'150px 150px'}}>
            <path d="M 150 150 L 290 150 A 140 140 0 0 0 220 30 Z" fill="url(#sweep)" opacity="0.4">
              <animateTransform attributeName="transform" type="rotate" from="0 150 150" to="360 150 150" dur="4s" repeatCount="indefinite"/>
            </path>
          </g>
          {[[110,80,'#ef4444'],[200,110,'#ff8c42'],[170,200,'#fbbf24'],[90,170,'#4ade80'],[210,180,'#ef4444'],[230,70,'#fbbf24']].map(([x,y,c],i) => (
            <circle key={i} cx={x} cy={y} r="4" fill={c}>
              <animate attributeName="opacity" values="1;0.2;1" dur={`${1.5+i*0.3}s`} repeatCount="indefinite"/>
              <animate attributeName="r" values="4;6;4" dur={`${1.5+i*0.3}s`} repeatCount="indefinite"/>
            </circle>
          ))}
          <circle cx="150" cy="150" r="6" fill="#fff"/>
          <circle cx="150" cy="150" r="12" fill="none" stroke="#fff" strokeOpacity="0.4"/>
        </svg>
      </div>
      <div className="threat-list">
        <div style={{display:'grid',gridTemplateColumns:'80px 1fr 70px 90px',gap:'14px',padding:'0 14px 8px',fontSize:'10px',color:'#5b6080',letterSpacing:'0.15em',textTransform:'uppercase'}}>
          <div>{hdr.sev}</div><div>{hdr.evt}</div><div>{hdr.src}</div><div style={{textAlign:'right'}}>{hdr.when}</div>
        </div>
        {threats.map((th, i) => (
          <div key={`${th.lbl}-${i}`} className={`threat-row ${th.sev}`}>
            <div className="sev">{th.sev}</div>
            <div className="lbl">{th.lbl}</div>
            <div className="src">{th.src}</div>
            <div className="time">{th.time}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function AboutPage({ t, go }) {
  const a = t.about;
  return (
    <div className="page active">
      <section className="page-hero">
        <div className="hero-grid"></div>
        <div className="container">
          <span className="eyebrow"><span className="dot"></span>{a.h_eyebrow}</span>
          <h1>{a.h_title_pre}<span className="gradient-text">{a.h_title_grad}</span>{a.h_title_post}</h1>
          <p>{a.h_tag}</p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="feat-grid">
            <div className="col-6 reveal">
              <span className="eyebrow mono">{a.princ_eyebrow}</span>
              <h2 style={{marginTop:'18px'}}>{a.princ_title}</h2>
            </div>
            <div className="col-6 reveal" data-d="2">
              <p style={{fontSize:'17px'}}>{a.princ_lead}</p>
            </div>
          </div>

          <div className="feat-grid" style={{marginTop:'48px'}}>
            {a.principles.map(p => (
              <div key={p.n} className="card col-6 reveal">
                <div className="mono" style={{color:'#00e0ff', fontSize:'12px', letterSpacing:'0.15em', marginBottom:'8px'}}>{p.n}</div>
                <h3>{p.t}</h3>
                <p style={{marginTop:'10px'}}>{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{paddingTop:0}}>
        <div className="container">
          <div className="sec-head reveal">
            <span className="eyebrow mono">{a.focus_eyebrow}</span>
            <h2>{a.focus_title}</h2>
          </div>
          <div className="feat-grid">
            {a.focus.map((c, i) => (
              <div key={i} className="card col-6 reveal" data-d={(i%2)+1}>
                <h3>{c.t}</h3>
                <p style={{marginTop:'10px'}}>{c.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTABand t={t} go={go}/>
    </div>
  );
}

function ContactPage({ t, go }) {
  const c = t.contact;
  const [sent, setSent] = uS(false);
  const submit = (e) => { e.preventDefault(); setSent(true); };
  return (
    <div className="page active">
      <section className="page-hero">
        <div className="hero-grid"></div>
        <div className="container">
          <span className="eyebrow"><span className="dot"></span>{c.h_eyebrow}</span>
          <h1>{c.h_title_pre}<span className="gradient-text">{c.h_title_grad}</span>{c.h_title_post}</h1>
          <p>{c.h_tag}</p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="feat-grid">
            <div className="col-8 reveal">
              <div className="card" style={{padding:'40px'}}>
                {!sent ? (
                  <form onSubmit={submit}>
                    <div className="form-grid">
                      <div className="field">
                        <label htmlFor="cf-name">{c.form.name}</label>
                        <input id="cf-name" name="name" type="text" required placeholder={c.form.name_ph} autoComplete="name"/>
                      </div>
                      <div className="field">
                        <label htmlFor="cf-email">{c.form.email}</label>
                        <input id="cf-email" name="email" type="email" required placeholder={c.form.email_ph} autoComplete="email"/>
                      </div>
                      <div className="field">
                        <label htmlFor="cf-company">{c.form.company}</label>
                        <input id="cf-company" name="company" type="text" required placeholder={c.form.company_ph} autoComplete="organization"/>
                      </div>
                      <div className="field">
                        <label htmlFor="cf-industry">{c.form.industry}</label>
                        <select id="cf-industry" name="industry">
                          {c.form.industries.map((opt, i) => <option key={i}>{opt}</option>)}
                        </select>
                      </div>
                      <div className="field full">
                        <label htmlFor="cf-msg">{c.form.msg}</label>
                        <textarea id="cf-msg" name="message" placeholder={c.form.msg_ph} required></textarea>
                      </div>
                    </div>
                    <button type="submit" className="btn btn-plasma" style={{marginTop:'24px'}}>{c.form.submit}<span className="btn-arrow">→</span></button>
                  </form>
                ) : (
                  <div style={{padding:'40px 0', textAlign:'center'}}>
                    <div style={{fontSize:'48px', marginBottom:'16px'}}>◆</div>
                    <h3 style={{marginBottom:'12px'}}>{c.success_title}</h3>
                    <p style={{maxWidth:'420px', margin:'0 auto'}}>{c.success_body}</p>
                  </div>
                )}
              </div>
            </div>
            <div className="col-4 reveal" data-d="2">
              <div className="card">
                <div className="mono" style={{color:'#00e0ff', fontSize:'11px', letterSpacing:'0.15em', textTransform:'uppercase', marginBottom:'16px'}}>{c.card_general_eyebrow}</div>
                <h3 style={{marginBottom:'8px', fontFamily:'var(--font-mono)', fontSize:'15px'}}>hello@neuro-forge.com</h3>
                <p style={{fontSize:'13px'}}>{c.card_general_body}</p>
              </div>
              <div className="card" style={{marginTop:'16px'}}>
                <div className="mono" style={{color:'#00e0ff', fontSize:'11px', letterSpacing:'0.15em', textTransform:'uppercase', marginBottom:'16px'}}>{c.card_eng_eyebrow}</div>
                <h3 style={{marginBottom:'8px', fontFamily:'var(--font-mono)', fontSize:'15px'}}>engineering@neuro-forge.com</h3>
                <p style={{fontSize:'13px'}}>{c.card_eng_body}</p>
              </div>
              <div className="card" style={{marginTop:'16px'}}>
                <div className="mono" style={{color:'#00e0ff', fontSize:'11px', letterSpacing:'0.15em', textTransform:'uppercase', marginBottom:'16px'}}>{c.card_secure_eyebrow}</div>
                <h3 style={{marginBottom:'8px', fontFamily:'var(--font-mono)', fontSize:'15px'}}>security@neuro-forge.com</h3>
                <p style={{fontSize:'13px', color:'var(--text-dim)'}}>{c.card_secure_body}</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function CTABand({ t, go }) {
  return (
    <section className="section" style={{paddingTop:0}}>
      <div className="container">
        <div className="cta reveal">
          <h2>{t.cta_band.title}</h2>
          <p>{t.cta_band.tag}</p>
          <div className="cta-actions">
            <button className="btn btn-plasma" onClick={() => go('contact')}>{t.cta_band.btn}<span className="btn-arrow">→</span></button>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window.NF, { AgentsPage, RLPage, CyberPage, AboutPage, ContactPage, CTABand });