/* PersonalBrain — Sections (consumer warm) */

function PBConstellation({ chips }) {
  // Nodes — fixed positions (percentages of the SVG viewBox)
  const nodes = [
    { x: 50, y: 50, r: 6, core: true, label: 'memory' }, // 0
    { x: 22, y: 24, r: 3.5, chip: 0 },  // 1
    { x: 80, y: 22, r: 3.5, chip: 1 },  // 2
    { x: 14, y: 62, r: 3.5, chip: 2 },  // 3
    { x: 86, y: 70, r: 3.5, chip: 3 },  // 4
    { x: 36, y: 86, r: 3.5, chip: 4 },  // 5
    { x: 70, y: 86, r: 3.5, chip: 5 },  // 6
    { x: 50, y: 14, r: 2.4 },           // 7  top
    { x: 92, y: 46, r: 2.4 },           // 8  right
    { x: 8,  y: 42, r: 2.4 },           // 9  left
    { x: 50, y: 92, r: 2.4 },           // 10 bottom
    { x: 32, y: 50, r: 1.8 },           // 11 inner-left
    { x: 68, y: 50, r: 1.8 },           // 12 inner-right
    { x: 50, y: 32, r: 1.8 },           // 13 inner-top
    { x: 50, y: 68, r: 1.8 },           // 14 inner-bottom
  ];
  // Edges — lots of cross-links, not just spokes
  const edges = [
    // core spokes
    [0,11],[0,12],[0,13],[0,14],
    // inner ring
    [11,13],[13,12],[12,14],[14,11],
    // inner to satellites
    [11,1],[11,3],[12,2],[12,4],[13,1],[13,2],[14,5],[14,6],
    // outer connectors
    [7,1],[7,2],[7,13],
    [8,2],[8,4],[8,12],
    [9,1],[9,3],[9,11],
    [10,5],[10,6],[10,14],
    // cross diagonals
    [1,4],[2,3],[3,6],[4,5],
    [1,2],[3,5],[4,6],
    [7,8],[8,10],[10,9],[9,7],
  ];

  // Multiple traveling pulses, continuously animating
  const [pulses, setPulses] = React.useState([]);
  React.useEffect(() => {
    let id = 0;
    const fire = () => {
      const eIdx = Math.floor(Math.random() * edges.length);
      const reverse = Math.random() < 0.5;
      const newId = ++id;
      setPulses(p => [...p, { id: newId, eIdx, reverse }]);
      setTimeout(() => {
        setPulses(p => p.filter(x => x.id !== newId));
      }, 1500);
    };
    // start with a couple
    fire(); setTimeout(fire, 280); setTimeout(fire, 560);
    const t = setInterval(fire, 380);
    return () => clearInterval(t);
  }, []);

  return (
    <div className="pb-constellation">
      <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" className="pb-const-svg">
        <defs>
          <radialGradient id="pbCoreGlow" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="var(--accent)" stopOpacity="0.55" />
            <stop offset="60%" stopColor="var(--accent)" stopOpacity="0.08" />
            <stop offset="100%" stopColor="var(--accent)" stopOpacity="0" />
          </radialGradient>
        </defs>
        <circle cx="50" cy="50" r="34" fill="url(#pbCoreGlow)" />

        {/* Edges */}
        {edges.map(([a, b], i) => {
          const A = nodes[a], B = nodes[b];
          const len = Math.hypot(B.x - A.x, B.y - A.y);
          return (
            <line
              key={`e${i}`}
              x1={A.x} y1={A.y} x2={B.x} y2={B.y}
              className="pb-const-edge"
              style={{
                strokeDasharray: len,
                strokeDashoffset: len,
                animationDelay: `${(i % 20) * 0.06}s`,
              }}
            />
          );
        })}

        {/* Active pulses */}
        {pulses.map(p => {
          const [a, b] = edges[p.eIdx];
          const A = nodes[a], B = nodes[b];
          const fromX = p.reverse ? B.x : A.x;
          const fromY = p.reverse ? B.y : A.y;
          const toX = p.reverse ? A.x : B.x;
          const toY = p.reverse ? A.y : B.y;
          return (
            <circle key={`pulse${p.id}`} r="1" fill="var(--accent)">
              <animate attributeName="cx" from={fromX} to={toX} dur="1.4s" fill="freeze" />
              <animate attributeName="cy" from={fromY} to={toY} dur="1.4s" fill="freeze" />
              <animate attributeName="opacity" values="0;1;1;0" keyTimes="0;0.15;0.85;1" dur="1.4s" fill="freeze" />
            </circle>
          );
        })}

        {/* Nodes */}
        {nodes.map((n, i) => (
          <g key={`n${i}`} className={`pb-const-node ${n.core ? 'is-core' : ''}`} style={{ animationDelay: `${0.3 + i * 0.07}s` }}>
            {n.core && <circle cx={n.x} cy={n.y} r={n.r + 4} className="pb-const-core-ring" />}
            <circle cx={n.x} cy={n.y} r={n.r} />
          </g>
        ))}
      </svg>

      {/* Floating chip labels next to satellite nodes */}
      {nodes.filter(n => n.chip !== undefined).map((n, i) => (
        <div
          key={`c${i}`}
          className="pb-const-chip"
          style={{
            left: `${n.x}%`,
            top: `${n.y}%`,
            animationDelay: `${0.8 + i * 0.18}s`,
            '--ox': n.x < 50 ? '-100%' : '14px',
            '--oy': n.y < 50 ? '-100%' : '14px',
          }}
        >
          <span className="dot"></span>{chips[n.chip].t}
        </div>
      ))}

      <div className="pb-const-core-label">memory</div>
    </div>
  );
}

function PBNav({ 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: '#products', label: c.nav.uc },
    { href: '#how', label: c.nav.how },
    { href: '#contact', label: c.nav.waitlist },
  ];
  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>
          PersonalBrain
        </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>
  );
}

function PBHero({ c, lang }) {
  // Memory chips that float around the core
  const chips = lang === 'de'
    ? [
        { t: 'Schwester heißt Mia', x: 18, y: 22, d: 0.2 },
        { t: 'Knie nach dem Lauf', x: 78, y: 18, d: 0.5 },
        { t: 'Q3-Launch im Blick', x: 12, y: 70, d: 0.8 },
        { t: 'Mag Earl Grey', x: 84, y: 76, d: 1.1 },
        { t: 'Jeden Mittwoch Yoga', x: 22, y: 90, d: 1.4 },
        { t: 'Sparen für Tokio', x: 72, y: 50, d: 1.7 },
      ]
    : [
        { t: 'Sister is Mia', x: 18, y: 22, d: 0.2 },
        { t: 'Knee after long runs', x: 78, y: 18, d: 0.5 },
        { t: 'Q3 launch on her mind', x: 12, y: 70, d: 0.8 },
        { t: 'Earl Grey, no sugar', x: 84, y: 76, d: 1.1 },
        { t: 'Yoga on Wednesdays', x: 22, y: 90, d: 1.4 },
        { t: 'Saving for Tokyo', x: 72, y: 50, d: 1.7 },
      ];

  return (
    <section className="pb-hero" id="top">
      <div className="pb-hero-bg" aria-hidden="true"></div>
      <div className="pb-hero-grid">
        <div>
          <div className="pb-hero-meta">
            <span className="dot" aria-hidden="true"></span>
            <span>{c.hero.eyebrow}</span>
            <span>·</span>
            <span>{lang === 'de' ? 'für Menschen' : 'for people'}</span>
          </div>
          <h1 className="pb-hero-title display reveal">
            {c.hero.title_a}<br/>
            <span className="soft">{c.hero.title_b}</span>
          </h1>
          <p className="lede pb-hero-lede reveal reveal-delay-1">{c.hero.lede}</p>
          <div className="pb-hero-ctas reveal reveal-delay-2">
            <a href="#products" className="btn btn-primary">{c.cta.uc}</a>
            <a href="#how" className="btn btn-secondary">{c.cta.how}</a>
          </div>
        </div>
        <div aria-hidden="true">
          <PBConstellation chips={chips} />
        </div>
      </div>
      <div className="hero-scroll">
        <span>Scroll</span>
        <span className="line"></span>
      </div>
    </section>
  );
}

function PBProblem({ c }) {
  return (
    <section className="section-pad section-dark" id="problem">
      <div className="container-narrow">
        <div className="reveal eyebrow" style={{ color: '#a8a29a', 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: '#f4ede0' }}>{c.problem.kicker}</p>
      </div>
    </section>
  );
}

function PBWhat({ c }) {
  return (
    <section className="section-pad" id="what">
      <div className="container-narrow">
        <div className="s-header" style={{ textAlign: 'left', marginBottom: 56 }}>
          <div className="eyebrow reveal">{c.what.eyebrow}</div>
          <h2 className="headline reveal reveal-delay-1" style={{ marginTop: 18 }}>{c.what.title}</h2>
        </div>
        <p className="body-text reveal" style={{ fontSize: 22, lineHeight: 1.5, color: 'var(--fg)', marginBottom: 32, maxWidth: 760 }}>{c.what.p1}</p>
        <p className="body-text reveal reveal-delay-1" style={{ maxWidth: 760 }}>{c.what.p2}</p>
        <div className="pb-pills reveal reveal-delay-2">
          {c.what.bullets.map((b, i) => (
            <div key={i} className="pb-pill"><span className="pb-pill-dot"></span>{b}</div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PBChanges({ c }) {
  const ic = [
    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M5 7h10M5 10h10M5 13h6"/></svg>,
    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M4 10h12M11 5l5 5-5 5"/></svg>,
    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><circle cx="10" cy="10" r="6"/><path d="M10 7v3l2 2"/></svg>,
    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M5 11l3 3 7-7"/></svg>,
    <svg viewBox="0 0 20 20" fill="currentColor"><path d="M10 3l1.8 4.2 4.2.4-3 2.9.9 4.5L10 12.8 6.1 15l.9-4.5-3-2.9 4.2-.4z"/></svg>,
  ];
  return (
    <section className="section-pad" id="changes">
      <div className="container-narrow">
        <span className="pb-flash reveal">
          <svg viewBox="0 0 20 20" fill="currentColor"><path d="M11 2L4 11h4l-1 7 7-9h-4l1-7z"/></svg>
          {c.changes.eyebrow}
        </span>
        <h2 className="headline reveal reveal-delay-1" style={{ marginBottom: 56 }}>{c.changes.title}</h2>
        <ul className="pb-change-list">
          {c.changes.items.map((it, i) => (
            <li key={i} className="reveal" style={{ transitionDelay: `${0.05 * i}s` }}>
              <div className="pb-change-icon">{ic[i]}</div>
              <div className="pb-change-h">{it.h}</div>
              <div className="pb-change-p">{it.p}</div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

function PBProducts({ c, lang }) {
  // 5 items, layout: 3 / 3 then 2 / 2 / 2 (6-col grid)
  const spans = ['span2', 'span2', 'span2', 'span3', 'span3'];
  const linkLabels = lang === 'de'
    ? ['Memento entdecken', 'Für Founders', 'Für Sales', 'Für Teams', 'Für Learning']
    : ['Explore Memento', 'Explore for Founders', 'Explore for Sales', 'Explore for Teams', 'Explore for Learning'];
  const colors = ['c-coral', 'c-amber', 'c-teal', 'c-plum', 'c-olive'];
  const icons = [
    // Companion — heart
    <svg viewBox="0 0 20 20" fill="currentColor"><path d="M10 17s-6-3.6-6-8.2A3.8 3.8 0 0 1 10 5a3.8 3.8 0 0 1 6 3.8C16 13.4 10 17 10 17z"/></svg>,
    // Founders — flag
    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M5 3v15M5 4h10l-2 3 2 3H5"/></svg>,
    // Sales — chart up
    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M3 16l4-4 3 3 7-7M11 8h5v5"/></svg>,
    // Teams — people
    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="7" cy="8" r="2.4"/><circle cx="14" cy="8" r="2.4"/><path d="M3 16c.5-2 2.2-3 4-3s3.5 1 4 3M11 16c.5-2 2.2-3 4-3 .8 0 1.5.2 2 .5"/></svg>,
    // Learning — book
    <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"><path d="M4 5h5a3 3 0 0 1 3 3v8a2.5 2.5 0 0 0-2.5-2.5H4V5zM16 5h-5a3 3 0 0 0-3 3v8a2.5 2.5 0 0 1 2.5-2.5H16V5z"/></svg>,
  ];

  return (
    <section className="section-pad" id="products">
      <div className="container">
        <div className="s-header" style={{ textAlign: 'left', marginBottom: 56 }}>
          <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="pb-uc-grid">
          {c.products.items.map((it, i) => (
            <div key={i} className={`pb-uc-card ${spans[i]} reveal`} style={{ transitionDelay: `${0.06 * i}s` }}>
              <div className={`pb-uc-mark ${colors[i]}`}>{icons[i]}</div>
              <h3 className="pb-uc-h">{it.h}</h3>
              <p className="pb-uc-p">{it.p}</p>
              <a className="pb-uc-link" href={i === 0 ? "Memento.html" : "#contact"}>{linkLabels[i]} →</a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PBHow({ c, lang }) {
  const layers = lang === 'de'
    ? ['Wahrnehmen', 'Verknüpfen', 'Priorisieren', 'Konsolidieren', 'Erinnern']
    : ['Perceive', 'Link', 'Prioritise', 'Consolidate', 'Recall'];
  return (
    <section className="section-pad" id="how">
      <div className="container">
        <div className="pb-how-card reveal">
          <div>
            <div className="eyebrow" style={{ marginBottom: 18 }}>{c.how.eyebrow}</div>
            <h2 className="headline" style={{ marginBottom: 28, maxWidth: 540 }}>{c.how.title}</h2>
            <p className="body-text" style={{ marginBottom: 22, maxWidth: 520 }}>{c.how.p1}</p>
            <p className="body-text" style={{ marginBottom: 36, maxWidth: 520 }}>{c.how.p2}</p>
            <a href="AgentBrain Homepage.html" className="btn btn-primary">{c.how.cta}</a>
          </div>
          <div className="pb-how-vis" aria-hidden="true">
            <div className="pb-how-layers">
              {layers.map((l, i) => (
                <div key={i} className={`pb-how-layer l${i + 1}`}>{l}</div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function PBClosing({ c }) {
  return (
    <section className="pb-closing" id="contact">
      <div className="container">
        <div className="eyebrow reveal" style={{ 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={{ 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.waitlist}</a>
        </div>
      </div>
    </section>
  );
}

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

Object.assign(window, {
  PBNav, PBHero, PBProblem, PBWhat, PBChanges, PBProducts, PBHow, PBClosing, PBFooter,
});