/* 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>
  );
}

// ---------- Hero v2 — Memory Stream ----------
// Editorial split-layout. Left: word-by-word fade-up headline.
// Right: animated vertical timeline of memory snippets that build over "time"
// (Day 1 → Year 1) — suggesting continuity, AgentBrain's core thesis.
function HeroV2({ c, lang }) {
  const titleWords = (c.hero.title_a + ' ' + c.hero.title_b).split(/\s+/);

  // Memory snippets that map to AgentBrain's value prop
  const snippets = lang === 'de' ? [
    { t: 'Tag 1',     l: 'New',        body: 'User mentions they are launching a SaaS in Q3.' },
    { t: 'Tag 7',     l: 'Confirmed',  body: 'Goal restated. Promoted from observation → active goal.' },
    { t: 'Tag 30',    l: 'Linked',     body: 'New decision connected to launch goal. Old assumption retired.' },
    { t: 'Monat 6',   l: 'Consolidated', body: 'Repeated patterns clustered. Working style learned.' },
    { t: 'Jahr 1',    l: 'Salient',    body: 'Recall stays sharp as memory grows. Continuity intact.' },
  ] : [
    { t: 'Day 1',     l: 'New',        body: 'User mentions they are launching a SaaS in Q3.' },
    { t: 'Day 7',     l: 'Confirmed',  body: 'Goal restated. Promoted from observation → active goal.' },
    { t: 'Day 30',    l: 'Linked',     body: 'New decision connected to launch goal. Old assumption retired.' },
    { t: 'Month 6',   l: 'Consolidated', body: 'Repeated patterns clustered. Working style learned.' },
    { t: 'Year 1',    l: 'Salient',    body: 'Recall stays sharp as memory grows. Continuity intact.' },
  ];

  const [visible, setVisible] = useState(0);
  const [typed, setTyped]     = useState('');
  const [cycle, setCycle]     = useState(0); // re-trigger on remount

  // Sequentially reveal nodes
  useEffect(() => {
    setVisible(0); setTyped('');
    const timers = [];
    snippets.forEach((_, i) => {
      timers.push(setTimeout(() => setVisible(v => Math.max(v, i + 1)), 1100 + i * 900));
    });
    // After all visible, run typewriter on the LAST node body
    const last = snippets[snippets.length - 1].body;
    timers.push(setTimeout(() => {
      let k = 0;
      const id = setInterval(() => {
        k += 1;
        setTyped(last.slice(0, k));
        if (k >= last.length) clearInterval(id);
      }, 18);
      timers.push({ clear: () => clearInterval(id) });
    }, 1100 + snippets.length * 900 + 300));
    return () => timers.forEach(t => t && (t.clear ? t.clear() : clearTimeout(t)));
  }, [lang, cycle]);

  return (
    <section className="hero-v2" id="top">
      <div className="hero-v2-grain" aria-hidden="true"></div>

      <div className="hero-v2-grid">
        {/* LEFT: Editorial copy */}
        <div className="hero-v2-left">
          <div className="hero-v2-meta">
            <span className="dot" aria-hidden="true"></span>
            <span>{lang === 'de' ? 'Memory · live' : 'Memory · live'}</span>
            <span className="sep">/</span>
            <span>v0.1</span>
          </div>

          <h1 className="hero-v2-title display">
            {titleWords.map((w, i) => (
              <span key={i} className="w" style={{ animationDelay: `${0.08 * i + 0.1}s` }}>
                {w}{i < titleWords.length - 1 ? '\u00A0' : ''}
              </span>
            ))}
          </h1>

          <p className="lede hero-v2-lede">
            <span className="reveal-up" style={{ animationDelay: `${0.08 * titleWords.length + 0.2}s` }}>
              {c.hero.lede}
            </span>
          </p>

          <div className="hero-v2-ctas reveal-up" style={{ animationDelay: `${0.08 * titleWords.length + 0.4}s` }}>
            <a href="#docs" className="btn btn-primary">{c.cta.paper}</a>
            <a href="#products" className="btn btn-secondary">{c.cta.uc}</a>
          </div>

          <button
            className="hero-v2-replay reveal-up"
            style={{ animationDelay: `${0.08 * titleWords.length + 0.55}s` }}
            onClick={() => setCycle(x => x + 1)}
          >
            <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
              <path d="M2 6a4 4 0 1 1 1.2 2.85" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/>
              <path d="M2 3v2.5h2.5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            {lang === 'de' ? 'Sequenz erneut abspielen' : 'Replay sequence'}
          </button>
        </div>

        {/* RIGHT: Memory timeline */}
        <div className="hero-v2-right" aria-hidden="true">
          <div className="hero-v2-stream">
            <div className="stream-axis">
              <div className="stream-line" style={{ height: `${(visible / snippets.length) * 100}%` }}></div>
              <div className="stream-pulse" style={{ top: `${(visible / snippets.length) * 100}%` }}></div>
            </div>

            <ul className="stream-nodes">
              {snippets.map((s, i) => {
                const on = i < visible;
                const isLast = i === snippets.length - 1;
                return (
                  <li key={i} className={`stream-node ${on ? 'on' : ''}`}>
                    <div className="node-dot">
                      <span className="ring"></span>
                      <span className="core"></span>
                    </div>
                    <div className="node-card">
                      <div className="node-head">
                        <span className="node-time">{s.t}</span>
                        <span className="node-tag">{s.l}</span>
                      </div>
                      <div className="node-body">
                        {isLast && on ? (
                          <>{typed}<span className="caret"></span></>
                        ) : (
                          s.body
                        )}
                      </div>
                    </div>
                  </li>
                );
              })}
            </ul>

            <div className="stream-foot">
              <span>{lang === 'de' ? 'kontinuität' : 'continuity'}</span>
              <span className="stream-foot-bar"></span>
              <span>{lang === 'de' ? 'eine person · ein gehirn' : 'one person · one brain'}</span>
            </div>
          </div>
        </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>
  );
}

// ---------- Closing ----------
function Closing({ c }) {
  return (
    <section className="section-pad" id="contact" style={{ paddingTop: 'clamp(120px, 16vw, 200px)', paddingBottom: 'clamp(120px, 16vw, 200px)' }}>
      <div className="container">
        <div className="eyebrow reveal" style={{ textAlign: 'center', marginBottom: 36 }}>{c.closing.eyebrow}</div>
        <h2 className="big-statement reveal reveal-delay-1">
          <span style={{ color: 'var(--fg-soft)' }}>{c.closing.title_a}</span><br/>
          <span>{c.closing.title_b}</span>
        </h2>
        <p className="lede reveal reveal-delay-2" style={{ textAlign: 'center', marginTop: 40, maxWidth: 720, marginLeft: 'auto', marginRight: 'auto' }}>{c.closing.sub}</p>
        <div style={{ marginTop: 56, display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
          <a href="#products" className="btn btn-primary reveal">{c.cta.uc}</a>
          <a href="#" className="btn btn-secondary reveal reveal-delay-1">{c.cta.talk}</a>
        </div>
      </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, HeroV2, Problem, What, Principles, Enables,
  Architecture, Products, Why, Trust, Docs, Closing, Footer,
  ImageBand, BleedQuote
});