/* AgentBrain Page Sections */
const { useState, useEffect, useRef } = React;

// ---------- Reveal Hook ----------
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll('.reveal:not(.in)');
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' });
    els.forEach(el => io.observe(el));
    return () => io.disconnect();
  });
}

// ---------- Nav ----------
function Nav({ lang, setLang, c }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
  }, [open]);
  const links = [
    { href: '#what', label: c.nav.product },
    { href: '#arch', label: c.nav.arch },
    { href: '#products', label: c.nav.uc },
    { href: '#docs', label: c.nav.paper },
    { href: '#contact', label: c.nav.contact },
  ];
  return (
    <nav className="nav" style={{ borderBottomColor: scrolled ? 'var(--line)' : 'transparent' }}>
      <div className="nav-inner">
        <a href="#top" className="nav-brand" onClick={() => setOpen(false)}>
          <svg className="logo" viewBox="0 0 24 24" fill="none">
            <circle cx="12" cy="12" r="3" fill="currentColor"/>
            <circle cx="12" cy="12" r="7" stroke="currentColor" strokeWidth="1" opacity=".5"/>
            <circle cx="12" cy="12" r="11" stroke="currentColor" strokeWidth="1" opacity=".25"/>
          </svg>
          AgentBrain
        </a>
        <div className="nav-links">
          {links.map(l => <a key={l.href} href={l.href}>{l.label}</a>)}
        </div>
        <div className="nav-actions">
          <div className="lang-toggle">
            <button className={lang === 'en' ? 'on' : ''} onClick={() => setLang('en')}>EN</button>
            <button className={lang === 'de' ? 'on' : ''} onClick={() => setLang('de')}>DE</button>
          </div>
          <button className="nav-burger" aria-label="Menu" onClick={() => setOpen(o => !o)}>
            <span className={`burger ${open ? 'open' : ''}`}>
              <i></i><i></i>
            </span>
          </button>
        </div>
      </div>
      <div className={`mobile-menu ${open ? 'open' : ''}`}>
        <div className="mobile-menu-inner">
          {links.map(l => (
            <a key={l.href} href={l.href} onClick={() => setOpen(false)}>{l.label}</a>
          ))}
        </div>
      </div>
    </nav>
  );
}

// ---------- Hero ----------
function Hero({ c, dark }) {
  return (
    <section className="hero" id="top">
      <div className="hero-canvas">
        <BrainCanvas dark={dark} />
      </div>
      <div className="hero-content">
        <div className="hero-eyebrow reveal">{c.hero.eyebrow}</div>
        <h1 className="display reveal reveal-delay-1">
          {c.hero.title_a}<br/>
          <span style={{ color: 'var(--fg-soft)' }}>{c.hero.title_b}</span>
        </h1>
        <p className="lede hero-lede reveal reveal-delay-2">{c.hero.lede}</p>
        <div className="hero-ctas reveal reveal-delay-3">
          <a href="#docs" className="btn btn-primary">{c.cta.paper}</a>
          <a href="#products" className="btn btn-secondary">{c.cta.uc}</a>
        </div>
      </div>
      <div className="hero-scroll">
        <span>Scroll</span>
        <span className="line"></span>
      </div>
    </section>
  );
}

// ---------- Problem ----------
function Problem({ c }) {
  return (
    <section className="section-pad section-dark" id="problem">
      <div className="container-narrow">
        <div className="reveal eyebrow" style={{ color: '#86868b', marginBottom: 24 }}>{c.problem.eyebrow}</div>
        <h2 className="headline reveal reveal-delay-1" style={{ marginBottom: 56 }}>{c.problem.title}</h2>
        <p className="body-text reveal reveal-delay-2" style={{ maxWidth: 760, marginBottom: 28 }}>{c.problem.p1}</p>
        <p className="body-text reveal reveal-delay-3" style={{ maxWidth: 760, marginBottom: 80 }}>{c.problem.p2}</p>
        <p className="subhead reveal" style={{ maxWidth: 880, color: '#f5f5f7' }}>
          {c.problem.kicker}
        </p>
      </div>
    </section>
  );
}

// ---------- What ----------
function What({ c }) {
  return (
    <section className="section-pad" id="what">
      <div className="container-narrow">
        <div className="s-header" style={{ textAlign: 'left', marginBottom: 64 }}>
          <div className="eyebrow reveal">{c.what.eyebrow}</div>
          <h2 className="headline reveal reveal-delay-1" style={{ marginTop: 18 }}>{c.what.title}</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 28, maxWidth: 760 }}>
          <p className="body-text reveal reveal-delay-1" style={{ fontSize: 22, lineHeight: 1.5, color: 'var(--fg)' }}>{c.what.p1}</p>
          <p className="body-text reveal reveal-delay-2">{c.what.p2}</p>
          <p className="body-text reveal reveal-delay-3" style={{ color: 'var(--fg)', fontWeight: 500 }}>{c.what.p3}</p>
        </div>
      </div>
    </section>
  );
}

// ---------- Principles ----------
function Principles({ c }) {
  return (
    <section className="section-pad section-alt" id="principles">
      <div className="container">
        <div className="s-header" style={{ marginBottom: 100 }}>
          <div className="eyebrow reveal">{c.principles.eyebrow}</div>
          <h2 className="headline reveal reveal-delay-1" style={{ marginTop: 18 }}>{c.principles.title}</h2>
        </div>
        <div className="principle-grid">
          {c.principles.items.map((it, i) => (
            <div key={i} className={`principle reveal reveal-delay-${(i % 4) + 1}`}>
              <div className="principle-num">{it.n}</div>
              <h3>{it.h}</h3>
              <p>{it.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Enables (sticky-ish list) ----------
function Enables({ c }) {
  return (
    <section className="section-pad" id="enables">
      <div className="container-narrow">
        <div className="eyebrow reveal" style={{ marginBottom: 24 }}>{c.enables.eyebrow}</div>
        <h2 className="headline reveal reveal-delay-1" style={{ marginBottom: 24 }}>{c.enables.title}</h2>
        <p className="lede reveal reveal-delay-2" style={{ marginBottom: 64 }}>{c.enables.lede}</p>
        <ul className="bullet-list">
          {c.enables.items.map((it, i) => (
            <li key={i} className="reveal" style={{ transitionDelay: `${0.05 * i}s` }}>
              <span className="num">{String(i + 1).padStart(2, '0')}</span>
              <span>{it}</span>
            </li>
          ))}
        </ul>
        <p className="subhead reveal" style={{ marginTop: 80, color: 'var(--fg)' }}>{c.enables.kicker}</p>
      </div>
    </section>
  );
}

// ---------- Architecture (Tier list with subtle vis) ----------
function Architecture({ c }) {
  return (
    <section className="section-pad section-dark" id="arch">
      <div className="container-narrow">
        <div className="eyebrow reveal" style={{ color: '#86868b', marginBottom: 24 }}>{c.arch.eyebrow}</div>
        <h2 className="headline reveal reveal-delay-1" style={{ marginBottom: 32 }}>{c.arch.title}</h2>
        <p className="lede reveal reveal-delay-2" style={{ marginBottom: 80, color: '#a1a1a6' }}>{c.arch.lede}</p>

        <div className="reveal" style={{ borderTop: '1px solid rgba(255,255,255,0.1)' }}>
          {c.arch.tiers.map((t, i) => (
            <div key={i} className="tier-row reveal" style={{
              transitionDelay: `${0.04 * i}s`,
              borderTopColor: 'rgba(255,255,255,0.1)',
              borderBottomColor: i === c.arch.tiers.length - 1 ? 'rgba(255,255,255,0.1)' : 'transparent',
            }}>
              <div className="tier-num" style={{ color: '#6e6e73' }}>{t.n}</div>
              <div className="tier-name" style={{ color: '#f5f5f7' }}>{t.name}</div>
              <div className="tier-desc" style={{ color: '#a1a1a6' }}>{t.desc}</div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 80, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
          <a href="#docs" className="btn btn-primary reveal">{c.cta.arch}</a>
          <a href="#docs" className="btn btn-secondary reveal reveal-delay-1">{c.cta.paper}</a>
        </div>
        <p className="subhead reveal" style={{ marginTop: 100, maxWidth: 880, color: '#f5f5f7' }}>{c.arch.kicker}</p>
      </div>
    </section>
  );
}

// ---------- Products / Use Cases ----------
function UseCaseVis({ idx }) {
  // Four distinct minimal SVG visuals
  const stroke = 'var(--fg)';
  switch (idx) {
    case 0: // Personal AI — orbit
      return (
        <svg width="120" height="120" viewBox="0 0 120 120" fill="none">
          <circle cx="60" cy="60" r="6" fill={stroke} />
          <circle cx="60" cy="60" r="22" stroke={stroke} strokeWidth="1" opacity=".4" />
          <circle cx="60" cy="60" r="40" stroke={stroke} strokeWidth="1" opacity=".25" />
          <circle cx="60" cy="60" r="56" stroke={stroke} strokeWidth="1" opacity=".15" />
          <circle cx="100" cy="60" r="3" fill={stroke} />
          <circle cx="44" cy="38" r="2" fill={stroke} opacity=".7" />
        </svg>
      );
    case 1: // Founder — connected nodes
      return (
        <svg width="120" height="120" viewBox="0 0 120 120" fill="none">
          <line x1="20" y1="20" x2="60" y2="60" stroke={stroke} strokeWidth="1" opacity=".4" />
          <line x1="100" y1="20" x2="60" y2="60" stroke={stroke} strokeWidth="1" opacity=".4" />
          <line x1="60" y1="60" x2="20" y2="100" stroke={stroke} strokeWidth="1" opacity=".4" />
          <line x1="60" y1="60" x2="100" y2="100" stroke={stroke} strokeWidth="1" opacity=".4" />
          <circle cx="20" cy="20" r="4" fill={stroke} />
          <circle cx="100" cy="20" r="4" fill={stroke} />
          <circle cx="60" cy="60" r="6" fill={stroke} />
          <circle cx="20" cy="100" r="4" fill={stroke} />
          <circle cx="100" cy="100" r="4" fill={stroke} />
        </svg>
      );
    case 2: // Vertical copilots — stack
      return (
        <svg width="120" height="120" viewBox="0 0 120 120" fill="none">
          <rect x="20" y="30" width="80" height="14" rx="3" stroke={stroke} strokeWidth="1" />
          <rect x="20" y="52" width="80" height="14" rx="3" stroke={stroke} strokeWidth="1" />
          <rect x="20" y="74" width="80" height="14" rx="3" fill={stroke} />
        </svg>
      );
    case 3: // Agent platforms — grid of brains
      return (
        <svg width="120" height="120" viewBox="0 0 120 120" fill="none">
          {[0,1,2].flatMap(r => [0,1,2].map(c => (
            <circle key={`${r}${c}`} cx={28 + c*32} cy={28 + r*32} r="6" stroke={stroke} strokeWidth="1" fill={r === 1 && c === 1 ? stroke : 'none'} />
          )))}
        </svg>
      );
    default: return null;
  }
}

const UC_IMAGES = [
  // Personal AI — single person quietly using laptop
  "https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?w=1400&q=80&auto=format&fit=crop",
  // Founder — workspace, focus, motion
  "https://images.unsplash.com/photo-1521737604893-d14cc237f11d?w=1400&q=80&auto=format&fit=crop",
  // Vertical copilots — professional environment
  "https://images.unsplash.com/photo-1551836022-deb4988cc6c0?w=1400&q=80&auto=format&fit=crop",
  // Agent platforms — datacenter / server abstraction
  "https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=1400&q=80&auto=format&fit=crop",
];

function Products({ c }) {
  return (
    <section className="section-pad" id="products">
      <div className="container">
        <div className="s-header" style={{ textAlign: 'left', marginBottom: 64 }}>
          <div className="eyebrow reveal">{c.products.eyebrow}</div>
          <h2 className="headline reveal reveal-delay-1" style={{ marginTop: 18, maxWidth: 900 }}>{c.products.title}</h2>
          <p className="lede reveal reveal-delay-2" style={{ marginTop: 28, maxWidth: 720 }}>{c.products.lede}</p>
        </div>
        <div className="uc-grid">
          {c.products.items.map((it, i) => (
            <div key={i} className="uc-card reveal" style={{ transitionDelay: `${0.06 * i}s` }}>
              <div className="uc-img">
                <img src={UC_IMAGES[i]} alt="" loading="lazy" />
              </div>
              <div className="uc-body">
                <div className="uc-meta">{String(i + 1).padStart(2, '0')} — {c.products.eyebrow}</div>
                <h3>{it.h}</h3>
                <p>{it.p}</p>
              </div>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 64, textAlign: 'center' }}>
          <a className="btn-link reveal" href="#contact">{c.cta.uc} <span className="arr">→</span></a>
        </div>
      </div>
    </section>
  );
}

// ---------- Image Band (atmospheric break) ----------
function ImageBand({ src, eyebrow, caption }) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { el.classList.add('in'); io.unobserve(el); } });
    }, { threshold: 0.15 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <div className="image-band" ref={ref}>
      <img src={src} alt="" loading="lazy" />
      {(eyebrow || caption) && (
        <div className="caption">
          {eyebrow && <span className="eyebrow-w">{eyebrow}</span>}
          {caption && <div>{caption}</div>}
        </div>
      )}
    </div>
  );
}

// ---------- Bleed Section (closing image bg) with optional network overlay ----------
function NetworkOverlay() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const canvas = ref.current;
    if (!canvas) return;
    const ctx = canvas.getContext('2d');
    let w, h, dpr, raf;
    const NODES = 80;
    const nodes = [];

    function resize() {
      dpr = Math.min(window.devicePixelRatio || 1, 2);
      const r = canvas.parentElement.getBoundingClientRect();
      w = r.width; h = r.height;
      canvas.width = w * dpr; canvas.height = h * dpr;
      canvas.style.width = w + 'px'; canvas.style.height = h + 'px';
      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    }
    function init() {
      nodes.length = 0;
      // Cluster nodes along a horizontal band (suggest "world surface")
      for (let i = 0; i < NODES; i++) {
        const x = Math.random() * w;
        // bias y toward middle 60%
        const y = h * 0.2 + Math.random() * h * 0.6 + (Math.random() - 0.5) * h * 0.1;
        nodes.push({
          x, y, ox: x, oy: y,
          phase: Math.random() * Math.PI * 2,
          speed: 0.0003 + Math.random() * 0.0006,
          amp: 6 + Math.random() * 18,
          size: Math.random() < 0.15 ? 2.4 : 1.1 + Math.random() * 0.9,
          bright: Math.random(),
        });
      }
    }

    let t0 = performance.now();
    function frame() {
      const t = performance.now() - t0;
      ctx.clearRect(0, 0, w, h);

      for (const n of nodes) {
        n.x = n.ox + Math.cos(t * n.speed + n.phase) * n.amp;
        n.y = n.oy + Math.sin(t * n.speed * 1.3 + n.phase) * n.amp * 0.5;
      }

      const maxDist = Math.min(w, h) * 0.15;
      ctx.lineWidth = 1;
      for (let i = 0; i < nodes.length; i++) {
        for (let j = i + 1; j < nodes.length; j++) {
          const a = nodes[i], b = nodes[j];
          const dx = a.x - b.x, dy = a.y - b.y;
          const d = Math.sqrt(dx*dx + dy*dy);
          if (d < maxDist) {
            const alpha = (1 - d / maxDist) * 0.32;
            ctx.strokeStyle = `rgba(255,255,255,${alpha})`;
            ctx.beginPath();
            ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y);
            ctx.stroke();
          }
        }
      }

      // Glow nodes
      for (const n of nodes) {
        const pulse = 0.6 + Math.sin(t * 0.0018 + n.phase * 2) * 0.4;
        // halo
        const haloR = n.size * 6;
        const grad = ctx.createRadialGradient(n.x, n.y, 0, n.x, n.y, haloR);
        grad.addColorStop(0, `rgba(255,255,255,${0.5 * pulse * (0.5 + n.bright * 0.5)})`);
        grad.addColorStop(1, 'rgba(255,255,255,0)');
        ctx.fillStyle = grad;
        ctx.beginPath();
        ctx.arc(n.x, n.y, haloR, 0, Math.PI * 2);
        ctx.fill();
        // core
        ctx.fillStyle = `rgba(255,255,255,${0.9 * pulse})`;
        ctx.beginPath();
        ctx.arc(n.x, n.y, n.size, 0, Math.PI * 2);
        ctx.fill();
      }

      raf = requestAnimationFrame(frame);
    }

    resize(); init();
    const onResize = () => { resize(); init(); };
    window.addEventListener('resize', onResize);
    frame();
    return () => { cancelAnimationFrame(raf); window.removeEventListener('resize', onResize); };
  }, []);
  return <canvas ref={ref} className="network-overlay" />;
}

function BleedQuote({ src, eyebrow, title, sub, network = false }) {
  return (
    <section className="bleed-section">
      <div className="bg"><img src={src} alt="" loading="lazy" /></div>
      {network && <NetworkOverlay />}
      <div className="bleed-content">
        <div className="eyebrow reveal" style={{ color: 'rgba(255,255,255,0.65)', marginBottom: 28 }}>{eyebrow}</div>
        <h2 className="headline reveal reveal-delay-1" style={{ color: '#fff', maxWidth: 1000, margin: '0 auto' }}>{title}</h2>
        {sub && <p className="lede reveal reveal-delay-2" style={{ color: 'rgba(255,255,255,0.75)', marginTop: 28, maxWidth: 680, marginLeft: 'auto', marginRight: 'auto' }}>{sub}</p>}
      </div>
    </section>
  );
}

// ---------- Why ----------
function Why({ c }) {
  return (
    <section className="section-pad section-alt" id="why">
      <div className="container-narrow">
        <div className="eyebrow reveal" style={{ marginBottom: 24 }}>{c.why.eyebrow}</div>
        <h2 className="headline reveal reveal-delay-1" style={{ marginBottom: 56 }}>{c.why.title}</h2>
        <div style={{ display: 'grid', gap: 28, maxWidth: 760 }}>
          <p className="body-text reveal">{c.why.p1}</p>
          <p className="body-text reveal reveal-delay-1" style={{ color: 'var(--fg)', fontSize: 22, lineHeight: 1.5, fontWeight: 500 }}>{c.why.p2}</p>
          <p className="body-text reveal reveal-delay-2">{c.why.p3}</p>
        </div>
      </div>
    </section>
  );
}

// ---------- Trust ----------
function Trust({ c }) {
  return (
    <section className="section-pad" id="trust">
      <div className="container">
        <div className="s-header" style={{ textAlign: 'left', marginBottom: 32 }}>
          <div className="eyebrow reveal">{c.trust.eyebrow}</div>
          <h2 className="headline reveal reveal-delay-1" style={{ marginTop: 18, maxWidth: 900 }}>{c.trust.title}</h2>
          <p className="lede reveal reveal-delay-2" style={{ marginTop: 28, maxWidth: 760 }}>{c.trust.lede}</p>
        </div>
        <div className="discipline-grid reveal">
          {c.trust.items.map((it, i) => (
            <div key={i}>
              <div className="label">{String(i + 1).padStart(2, '0')} · {it.l}</div>
              <div>{it.v}</div>
            </div>
          ))}
        </div>
        <p className="subhead reveal" style={{ marginTop: 80, maxWidth: 880 }}>{c.trust.kicker}</p>
      </div>
    </section>
  );
}

// ---------- Docs ----------
function Docs({ c }) {
  return (
    <section className="section-pad section-dark" id="docs">
      <div className="container-narrow">
        <div className="eyebrow reveal" style={{ color: '#86868b', marginBottom: 24 }}>{c.docs.eyebrow}</div>
        <h2 className="headline reveal reveal-delay-1" style={{ marginBottom: 32 }}>{c.docs.title}</h2>
        <p className="lede reveal reveal-delay-2" style={{ marginBottom: 56, color: '#a1a1a6' }}>{c.docs.lede}</p>
        <ul style={{ listStyle: 'none', padding: 0, marginBottom: 56 }}>
          {c.docs.items.map((it, i) => (
            <li key={i} className="reveal" style={{
              padding: '20px 0',
              borderTop: '1px solid rgba(255,255,255,0.1)',
              fontSize: 18, lineHeight: 1.45, color: '#f5f5f7',
              display: 'flex', gap: 24, alignItems: 'baseline',
              transitionDelay: `${0.05 * i}s`,
              borderBottom: i === c.docs.items.length - 1 ? '1px solid rgba(255,255,255,0.1)' : 'none',
            }}>
              <span style={{ color: '#6e6e73', fontSize: 12, letterSpacing: '0.06em', fontVariantNumeric: 'tabular-nums' }}>0{i+1}</span>
              <span>{it}</span>
            </li>
          ))}
        </ul>
        <a href="#" className="btn btn-primary reveal">{c.cta.paper}</a>
      </div>
    </section>
  );
}

// ---------- Contact Form ----------
function Closing({ c }) {
  const [form, setForm] = useState({ name: '', email: '', message: '' });
  const [status, setStatus] = useState('idle'); // idle | sending | success | error

  function handleChange(e) {
    setForm(f => ({ ...f, [e.target.name]: e.target.value }));
  }

  function handleSubmit(e) {
    e.preventDefault();
    if (!form.name || !form.email || !form.message) return;
    setStatus('sending');
    const subject = encodeURIComponent(`[AgentBrain] Contact from ${form.name}`);
    const body = encodeURIComponent(`Name: ${form.name}\nEmail: ${form.email}\n\n${form.message}`);
    window.location.href = `mailto:hello@agentbrain.ch?subject=${subject}&body=${body}`;
    setTimeout(() => setStatus('success'), 800);
  }

  const cf = c.contact;
  const inputStyle = {
    width: '100%',
    padding: '14px 16px',
    fontSize: 16,
    fontFamily: 'var(--font)',
    background: 'var(--bg-alt)',
    border: '1px solid var(--line-strong)',
    borderRadius: 10,
    color: 'var(--fg)',
    outline: 'none',
    transition: 'border-color .15s',
    letterSpacing: '-0.01em',
  };

  return (
    <section className="section-pad" id="contact" style={{ paddingTop: 'clamp(80px, 10vw, 140px)', paddingBottom: 'clamp(80px, 10vw, 140px)' }}>
      <div className="container-narrow">
        <div className="eyebrow reveal" style={{ textAlign: 'center', marginBottom: 24 }}>{cf.eyebrow}</div>
        <h2 className="headline reveal reveal-delay-1" style={{ textAlign: 'center', marginBottom: 16 }}>{cf.title}</h2>
        <p className="lede reveal reveal-delay-2" style={{ textAlign: 'center', marginBottom: 56, color: 'var(--fg-soft)' }}>{cf.sub}</p>

        {status === 'success' ? (
          <div className="reveal" style={{
            textAlign: 'center', padding: '56px 32px',
            background: 'var(--bg-alt)', borderRadius: 16,
            border: '1px solid var(--line)',
          }}>
            <div style={{ fontSize: 36, marginBottom: 16 }}>✓</div>
            <p style={{ fontSize: 18, fontWeight: 500, marginBottom: 8 }}>{cf.successTitle}</p>
            <p style={{ color: 'var(--fg-soft)' }}>{cf.successSub}</p>
          </div>
        ) : (
          <form onSubmit={handleSubmit} className="reveal" style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
              <div>
                <label style={{ display: 'block', fontSize: 13, fontWeight: 500, marginBottom: 6, color: 'var(--fg-soft)' }}>{cf.labelName}</label>
                <input
                  style={inputStyle}
                  type="text"
                  name="name"
                  value={form.name}
                  onChange={handleChange}
                  placeholder={cf.placeholderName}
                  required
                />
              </div>
              <div>
                <label style={{ display: 'block', fontSize: 13, fontWeight: 500, marginBottom: 6, color: 'var(--fg-soft)' }}>{cf.labelEmail}</label>
                <input
                  style={inputStyle}
                  type="email"
                  name="email"
                  value={form.email}
                  onChange={handleChange}
                  placeholder={cf.placeholderEmail}
                  required
                />
              </div>
            </div>
            <div>
              <label style={{ display: 'block', fontSize: 13, fontWeight: 500, marginBottom: 6, color: 'var(--fg-soft)' }}>{cf.labelMessage}</label>
              <textarea
                style={{ ...inputStyle, minHeight: 140, resize: 'vertical' }}
                name="message"
                value={form.message}
                onChange={handleChange}
                placeholder={cf.placeholderMessage}
                required
              />
            </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap', marginTop: 8 }}>
              <span style={{ fontSize: 13, color: 'var(--fg-mute)' }}>{cf.hint}</span>
              <button
                type="submit"
                className="btn btn-primary"
                disabled={status === 'sending'}
                style={{ minWidth: 160, opacity: status === 'sending' ? 0.6 : 1 }}
              >
                {status === 'sending' ? cf.sending : cf.submit}
              </button>
            </div>
          </form>
        )}
      </div>
    </section>
  );
}

// ---------- Footer ----------
function Footer({ c }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-row">
          <div>
            <strong style={{ color: 'var(--fg)', fontWeight: 500 }}>AgentBrain</strong> — {c.footer.tagline}
          </div>
          <div>
            <a href="#what">{c.nav.product}</a>
            <a href="#arch">{c.nav.arch}</a>
            <a href="#docs">{c.nav.paper}</a>
            <a href="#contact">{c.nav.contact}</a>
            <span style={{ marginLeft: 12, opacity: .7 }}>{c.footer.site}</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  useReveal, Nav, Hero, Problem, What, Principles, Enables,
  Architecture, Products, Why, Trust, Docs, Closing, Footer,
  ImageBand, BleedQuote
});