// Sections — flat. Technology is the hero. People serve the technology.
// 8/0 boosts teams; we never frame the buyer as the problem.

// Inline brand glyph helper — 8 green, / white, 0 green (matches wordmark).
function BN({ slashColor = '#FFFFFF' }) {
  return (
    <span className="bn">
      <span style={{ color: 'var(--accent)' }}>8</span>
      <span style={{ color: slashColor }}>/</span>
      <span style={{ color: 'var(--accent)' }}>0</span>
    </span>
  );
}

// ------- BOOST — pre-sales, implementation, ops + the engineering foundation -------
function BoostSection() {
  const slots = [
    {
      tag: 'Engineering',
      title: 'Stop building point integrations. Start shipping product.',
      body: '8/0 plugs into the stack your team built. We carry the integration tax: schema drift, vendor versioning, the long tail. Your engineers keep shipping the surface that differentiates you.',
      footer: 'Eng time reclaimed',
    },
    {
      tag: 'Pre-sales',
      title: 'Proof in the room.',
      body: 'Live employer data during the discovery call. Quote on real census, real eligibility, in real time.',
      footer: 'Hours to first sync',
    },
    {
      tag: 'Implementation',
      title: 'Nine days, not nine months.',
      body: 'Production-grade connectors for Workday, UKG, ADP, BambooHR, Ceridian, SAP SuccessFactors. Bespoke when your customer\'s stack calls for it.',
      footer: 'Documented runbook, not a fire drill',
    },
    {
      tag: 'Operations',
      title: 'A team that doesn\'t sleep.',
      body: 'Once live, the layer watches every dataflow, self-corrects on the routine, and escalates only what matters.',
      footer: 'Continuous, exceptions only',
    },
  ];

  return (
    <section className="flat lands-flat watery">
      <div className="container">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16, marginBottom: 64, maxWidth: 900 }}>
          <span className="eyebrow" style={{ alignSelf: 'flex-start', color: 'var(--accent)' }}>What changes for your team</span>
          <h2 style={{ fontSize: 'clamp(32px, 3.6vw, 48px)', fontWeight: 700, letterSpacing: '-0.02em', margin: 0, lineHeight: 1.1, textWrap: 'balance' }}>
            The stack your engineers built,<br className="desktop-only"/>
            <span style={{ color: 'var(--accent)' }}>with more reach.</span>
          </h2>
          <p style={{ fontSize: 16, color: 'var(--fg-2)', maxWidth: 760, margin: '8px 0 0 0', lineHeight: 1.6 }}>
            <BN/> sits beside the systems your team already runs. We build
            the integrations between employer HR, payroll, time, benefits,
            and medical systems and your underwriting, eligibility, claims,
            billing, and audit workflows. Service first. Bespoke build for your exact needs.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 20 }}>
          {slots.map(s => (
            <div key={s.tag} style={{
              padding: 32,
              border: '1px solid var(--border-1)',
              borderRadius: 4,
              background: 'var(--bg-elev-1)',
              display: 'flex', flexDirection: 'column', gap: 18,
              minHeight: 320,
            }}>
              <span className="eyebrow-chip green" style={{ alignSelf: 'flex-start' }}>{s.tag}</span>
              <h3 style={{ fontSize: 24, fontWeight: 600, letterSpacing: '-0.015em', margin: 0, color: 'var(--fg-1)', lineHeight: 1.15 }}>{s.title}</h3>
              <p style={{ fontSize: 14.5, lineHeight: 1.6, color: 'var(--fg-2)', margin: 0 }}>{s.body}</p>
              <div style={{
                marginTop: 'auto', paddingTop: 18, borderTop: '1px solid var(--border-1)',
                fontFamily: 'var(--font-mono)', fontSize: 12.5, letterSpacing: '0.04em',
                color: 'var(--accent)',
              }}>{s.footer}</div>
            </div>
          ))}
        </div>

      </div>
    </section>
  );
}

// ------- Manifesto — single bold statement, no animation -------
function Manifesto() {
  return (
    <section style={{
      background: 'var(--bg)',
      padding: '160px 0',
      borderTop: '1px solid var(--border-1)',
      borderBottom: '1px solid var(--border-1)',
    }}>
      <div className="container">
        <h2 style={{
          fontSize: 'clamp(36px, 4.4vw, 64px)',
          lineHeight: 1.05,
          fontWeight: 700,
          letterSpacing: '-0.025em',
          color: '#FFFFFF',
          margin: 0,
          maxWidth: 1000,
        }}>
          <span style={{ color: 'var(--accent)' }}>8</span>
          <span style={{ color: '#FFFFFF' }}>by</span>
          <span style={{ color: 'var(--accent)' }}>0</span>{' '}
          makes carrier dataflows<br/>adaptive and AI-ready.
        </h2>
      </div>
    </section>
  );
}


function HowItWorks() {
  const stages = [
    { n: '01', title: 'Connect & Learn',
      body: 'Reads vendor APIs and EDI specs. Maps to your canonical schema. Adapts when vendors version.' },
    { n: '02', title: 'Workflow Interpretation',
      body: 'Turns the carrier\'s eligibility rules and the employer\'s policies into structured, executable workflows.' },
    { n: '03', title: 'Monitoring & Self-Healing',
      body: 'Watches every dataflow. Auto-corrects the routine, escalates the exceptions.' },
  ];
  return (
    <section id="how" className="flat watery deep" style={{ background: 'var(--bg-sunken)' }}>
      <div className="container">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginBottom: 56, maxWidth: 820 }}>
          <span className="eyebrow" style={{ alignSelf: 'flex-start' }}>How 8/0 works</span>
          <h2 style={{ fontSize: 'clamp(32px, 3.6vw, 48px)', fontWeight: 700, letterSpacing: '-0.02em', margin: 0, lineHeight: 1.1 }}>
            Three behaviors,<br/>one continuous pipeline.
          </h2>
          <p style={{ fontSize: 16, color: 'var(--fg-2)', margin: '6px 0 0 0', lineHeight: 1.6, maxWidth: 720 }}>
            <BN/> reads vendor systems, translates carrier and employer
            policy into runnable workflows, and self-corrects when the data
            shifts underneath. Engineered, supervised, and supported by humans.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32, borderTop: '1px solid var(--border-1)', paddingTop: 36 }}>
          {stages.map(s => (
            <div key={s.n} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--accent)', letterSpacing: '0.16em' }}>{s.n}</div>
              <h3 style={{ fontSize: 22, fontWeight: 700, letterSpacing: '-0.012em', margin: 0, lineHeight: 1.18 }}>{s.title}</h3>
              <p style={{ fontSize: 14.5, color: 'var(--fg-2)', lineHeight: 1.6, margin: 0 }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ------- Live agent console — the three behaviors, in production -------
const LOG_TEMPLATES = [
  () => ({ lvl: 'info', ms: '128ms', msg: <><span className="tag">[connect]</span> parsed <b>workday-v44.2</b> API spec · <span className="accent">312 endpoints</span></> }),
  () => ({ lvl: 'heal', ms: '41ms',  msg: <><span className="tag">[self-heal]</span> remapped <b>employee.dob → person.birth_date</b> · drift auto-corrected</> }),
  () => ({ lvl: 'ok',   ms: '1.4s',  msg: <><span className="tag">[sync]</span> <b>ADP → MetLife</b> claims feed · 4,213 records · <span className="accent">100% accuracy</span></> }),
  () => ({ lvl: 'info', ms: '212ms', msg: <><span className="tag">[learn]</span> ingested policy <b>"FMLA continuous, intermittent split"</b></> }),
  () => ({ lvl: 'ok',   ms: '87ms',  msg: <><span className="tag">[connect]</span> handshake <b>UKG Pro · v0224.1</b> · token rotation OK</> }),
  () => ({ lvl: 'warn', ms: '2.1s',  msg: <><span className="tag">[rate]</span> <b>BambooHR</b> 429 burst · backoff applied · queue drained</> }),
  () => ({ lvl: 'heal', ms: '63ms',  msg: <><span className="tag">[self-heal]</span> rebuilt mapping for <b>Ceridian Dayforce v2025.3</b> · schema delta absorbed</> }),
  () => ({ lvl: 'info', ms: '94ms',  msg: <><span className="tag">[workflow]</span> translated rule <b>"NJ TDB stacking"</b> → 7 conditional steps</> }),
  () => ({ lvl: 'ok',   ms: '780ms', msg: <><span className="tag">[sync]</span> <b>SAP SuccessFactors → Unum</b> disability intake · 86 events</> }),
  () => ({ lvl: 'info', ms: '38ms',  msg: <><span className="tag">[connect]</span> discovered field <b>person.preferred_pronouns</b> · routed to PII vault</> }),
  () => ({ lvl: 'heal', ms: '155ms', msg: <><span className="tag">[self-heal]</span> mediated <b>EDI 834 v5010 → JSON</b> for downstream carrier · zero loss</> }),
  () => ({ lvl: 'ok',   ms: '3.2s',  msg: <><span className="tag">[sync]</span> <b>Paylocity → Lincoln Financial</b> absence claims · <span className="accent">12,408 records</span></> }),
  () => ({ lvl: 'warn', ms: '—',     msg: <><span className="tag">[confidence]</span> mapping confidence <b>0.71</b> on <b>custom_pto_buckets</b> · queued for human review</> }),
  () => ({ lvl: 'info', ms: '1.1s',  msg: <><span className="tag">[monitor]</span> sweep complete · <span className="accent">217 dataflows green</span> · 2 quarantined</> }),
  () => ({ lvl: 'ok',   ms: '52ms',  msg: <><span className="tag">[connect]</span> Workday customer <b>acme-prod-204</b> validated · 0 schema delta</> }),
];

function pad2(n) { return String(n).padStart(2, '0'); }
function tsStr(d) { return `${pad2(d.getHours())}:${pad2(d.getMinutes())}:${pad2(d.getSeconds())}`; }

function LiveConsole() {
  const [rows, setRows] = React.useState(() => {
    const now = new Date();
    const arr = [];
    for (let i = 0; i < 12; i++) {
      const t = new Date(now.getTime() - (12 - i) * 1700);
      const tmpl = LOG_TEMPLATES[(i * 5 + 3) % LOG_TEMPLATES.length]();
      arr.push({ id: i, ts: tsStr(t), ...tmpl });
    }
    return arr;
  });
  const idRef = React.useRef(12);
  const cursorRef = React.useRef(12);

  React.useEffect(() => {
    let timer;
    const tick = () => {
      const tmpl = LOG_TEMPLATES[cursorRef.current % LOG_TEMPLATES.length]();
      cursorRef.current += 1;
      const next = { id: idRef.current++, ts: tsStr(new Date()), ...tmpl };
      setRows(prev => {
        const out = [...prev, next];
        if (out.length > 14) out.shift();
        return out;
      });
      timer = setTimeout(tick, 1100 + Math.random() * 1700);
    };
    timer = setTimeout(tick, 900);
    return () => clearTimeout(timer);
  }, []);

  return (
    <div className="console" role="presentation" aria-hidden="true">
      <div className="console-head">
        <span className="title">
          <span className="pulse"/>
          agent.eightbyzero.live
        </span>
        <span className="right">Live · production customers</span>
      </div>
      <div className="console-body">
        {rows.map(r => (
          <div className="console-row" key={r.id}>
            <span className="ts">{r.ts}</span>
            <span className={`lvl ${r.lvl}`}>{r.lvl}</span>
            <span className="msg">{r.msg}</span>
            <span className="ms">{r.ms}</span>
          </div>
        ))}
      </div>
      <div className="console-foot">
        <span className="stat green"><b>217</b> dataflows green</span>
        <span className="stat"><b>3</b> customers</span>
        <span className="stat"><b>99%+</b> accuracy · 24h</span>
      </div>
    </div>
  );
}

// ------- Who 8/0 serves — Carriers, TPAs, Employers (no brokers) -------
function WhoItServes() {
  const audiences = [
    { tag: 'Carriers',  body: 'Reach employer data on day one. Win the quote with proof, not promises.' },
    { tag: 'TPAs',      body: 'Take cost out of claims handling. Stop staffing for data plumbing. Start staffing for service quality.' },
    { tag: 'Employers', body: 'Connect once. Stay connected. No more file drops, no more re-keying, no more vendor coordination meetings.' },
  ];
  return (
    <section className="flat watery flat-bottom fiber-bg">
      <div className="container">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginBottom: 56, maxWidth: 900 }}>
          <span className="eyebrow" style={{ alignSelf: 'flex-start' }}>Who we serve</span>
          <h2 style={{ fontSize: 'clamp(36px, 4.4vw, 56px)', fontWeight: 800, letterSpacing: '-0.025em', margin: 0, lineHeight: 1.05 }}>
            One layer.<br/>
            <span style={{ color: 'var(--accent)' }}>Every leg of the stool.</span>
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {audiences.map(a => (
            <div key={a.tag} style={{
              padding: 28,
              background: 'var(--bg-elev-1)',
              border: '1px solid var(--border-1)',
              borderRadius: 4,
              display: 'flex', flexDirection: 'column', gap: 16,
              minHeight: 200,
            }}>
              <div style={{
                fontSize: 24, fontWeight: 700, letterSpacing: '-0.015em',
                color: 'var(--fg-1)',
              }}>{a.tag}</div>
              <p style={{ fontSize: 14, color: 'var(--fg-2)', lineHeight: 1.55, margin: 0 }}>{a.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ------- Metric row (commercial framing) -------
function MetricRowV2() {
  const metrics = [
    { label: 'Revenue',         value: '+5%',  kind: 'pos',
      body: 'Carriers that lead with employer-data depth quote earlier, more accurately, and win more often.' },
    { label: 'Claims expense',  value: '−20%', kind: 'neg',
      body: 'Direct access trims the data-fetching round trips that pad cost without adding service.' },
    { label: 'Onboarding cost', value: '−40%', kind: 'neg',
      body: 'A single layer across all employer systems means implementation stops being bespoke engineering per customer.' },
  ];
  return (
    <section className="flat watery deep" style={{ background: 'var(--bg-sunken)', borderTop: '1px solid var(--border-1)' }}>
      <div className="container">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginBottom: 56, maxWidth: 900 }}>
          <span className="eyebrow" style={{ alignSelf: 'flex-start' }}>The math</span>
          <h2 style={{ fontSize: 'clamp(36px, 4.4vw, 56px)', fontWeight: 800, letterSpacing: '-0.025em', margin: 0, lineHeight: 1.05 }}>
            What 8/0 unlocks<br/>
            <span style={{ color: 'var(--accent)' }}>for operators.</span>
          </h2>
        </div>
        <div style={{ display:'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1px solid var(--border-1)' }}>
          {metrics.map((m, i) => (
            <div key={m.label} style={{
              padding: '40px 32px 0 32px',
              borderLeft: i === 0 ? 'none' : '1px solid var(--border-1)',
              display: 'flex', flexDirection: 'column', gap: 18,
            }}>
              <div className="eyebrow" style={{ alignSelf: 'flex-start' }}>{m.label}</div>
              <div style={{
                fontSize: 'clamp(56px, 6vw, 92px)',
                lineHeight: 1, fontWeight: 800,
                letterSpacing: '-0.04em',
                color: m.kind === 'pos' ? 'var(--accent)' : 'var(--attention)',
              }}>{m.value}</div>
              <p style={{ fontSize: 14.5, color: 'var(--fg-2)', margin: 0, lineHeight: 1.55 }}>{m.body}</p>
            </div>
          ))}
        </div>
        <p style={{ marginTop: 32, fontSize: 12.5, color: 'var(--fg-4)', fontStyle: 'italic', lineHeight: 1.55, maxWidth: 720 }}>
          Modeled from customer engagements and industry benchmarks. Real results vary by customer and use case.
        </p>
      </div>
    </section>
  );
}

// ------- Closing CTA (paper canvas — bookends the hero) -------
function CTASectionV2() {
  return (
    <section className="paper-canvas" style={{ textAlign: 'center', paddingTop: 111, paddingBottom: 111 }}>
      <div style={{ maxWidth: 920, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 24, alignItems: 'center', padding: '0 32px' }}>
        <img src="/assets/logo-mark.svg" width="64" height="64" alt="" style={{ opacity: 0.95 }}/>
        <h2 style={{
          fontSize: 'clamp(28px, 3.4vw, 52px)',
          fontWeight: 800, letterSpacing: '-0.025em',
          margin: 0, lineHeight: 1.1,
          color: '#FFFFFF',
          textWrap: 'balance',
        }}>
          The integration layer<br className="desktop-only"/>
          <span> insurance has been waiting for.</span>
        </h2>
        <p style={{
          fontFamily: 'var(--font-mono)',
          fontSize: 18, fontWeight: 500,
          color: 'var(--accent)',
          margin: '8px 0 0 0',
          lineHeight: 1.35,
          letterSpacing: '-0.005em',
          whiteSpace: 'pre-line',
          textAlign: 'center',
        }}>
          {"Infinite connectivity,\nzero friction."}<sup style={{ fontSize: 9, marginLeft: 1 }}>™</sup>
        </p>
        <a href="mailto:connect@eightbyzero.com" style={{
          fontSize: 18,
          color: 'var(--accent)',
          textDecoration: 'none',
          fontWeight: 500,
          padding: '4px 0',
          borderBottom: '1px solid rgba(16, 200, 128, 0.55)',
          fontFamily: 'var(--font-mono)',
          letterSpacing: '-0.005em',
          transition: 'border-color 180ms',
        }}>connect@eightbyzero.com</a>
      </div>
    </section>
  );
}

// ------- The Connector — recent issues + signup -------
// Subscribe form hits the same Google Apps Script web app the Connector
// itself uses; signups from the marketing site land in the same Sheet,
// tagged with `source=eightbyzero-home` so they can be told apart.
const CONNECTOR_SUBSCRIBE_URL = "https://script.google.com/macros/s/AKfycbz4gEEB_-9mbYsIcuwgYuu6C4c2xAyrdrRnbPxswmdMoelQ7UNcxUXlT0P4fbeWiAUo/exec";

function ConnectorSubscribeForm() {
  const [email, setEmail] = React.useState("");
  const [state, setState] = React.useState("idle"); // idle | sending | done | invalid

  const looksValid = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim());

  const submit = (e) => {
    if (e && e.preventDefault) e.preventDefault();
    if (state === "sending" || state === "done") return;
    if (!looksValid) { setState("invalid"); return; }
    setState("sending");
    // CORS-free beacon — Apps Script logs the GET request and writes to the Sheet.
    const beacon = new Image();
    beacon.src =
      CONNECTOR_SUBSCRIBE_URL +
      "?email=" + encodeURIComponent(email.trim()) +
      "&source=eightbyzero-home" +
      "&t=" + Date.now();
    // Apps Script will respond ~instantly; give it a short pad before showing success.
    setTimeout(() => setState("done"), 700);
  };

  if (state === "done") {
    return (
      <div style={{
        padding: '14px 18px',
        border: '1px solid rgba(16, 200, 128, 0.35)',
        borderLeft: '2px solid var(--accent)',
        background: 'rgba(16, 200, 128, 0.06)',
        borderRadius: 4,
        display: 'flex', alignItems: 'baseline', gap: 10,
      }}>
        <span style={{ color: 'var(--accent)', fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.06em' }}>✓</span>
        <span style={{ fontSize: 13.5, color: 'var(--fg-1)', letterSpacing: '-0.005em' }}>
          You're in. The next issue will land in your inbox.
        </span>
      </div>
    );
  }

  return (
    <form onSubmit={submit} style={{
      display: 'flex',
      border: `1px solid ${state === 'invalid' ? 'var(--attention)' : 'var(--border-2)'}`,
      borderRadius: 4,
      background: 'var(--bg)',
      overflow: 'hidden',
      alignItems: 'stretch',
      transition: 'border-color 160ms',
    }}>
      <input
        type="email"
        required
        placeholder="name@carrier.com"
        value={email}
        onChange={(e) => { setEmail(e.target.value); if (state === 'invalid') setState('idle'); }}
        disabled={state === 'sending'}
        style={{
          flex: 1, padding: '14px 16px',
          background: 'transparent',
          border: 'none', outline: 'none',
          color: 'var(--fg-1)',
          fontFamily: 'var(--font-sans)',
          fontSize: 14,
        }}
      />
      <button
        type="submit"
        disabled={state === 'sending' || !looksValid}
        style={{
          padding: '0 22px',
          background: 'transparent',
          color: looksValid ? 'var(--accent)' : 'var(--fg-3)',
          border: 'none', borderLeft: '1px solid var(--border-2)',
          fontFamily: 'var(--font-sans)',
          fontSize: 13, fontWeight: 500,
          cursor: (state === 'sending' || !looksValid) ? 'default' : 'pointer',
          letterSpacing: '-0.005em',
          transition: 'color 160ms',
          minWidth: 96,
        }}
      >{state === 'sending' ? 'Sending…' : 'Subscribe'}</button>
    </form>
  );
}

function ConnectorSignup() {
  const issues = [
    { num: '002', title: 'EDI is fine, actually',                              date: 'Feb 2026' },
    { num: '001', title: 'The agentic integration layer, explained',           date: 'Jan 2026' },
  ];
  return (
    <section className="watery deep" style={{
      padding: '128px 0 72px',
      borderTop: '1px solid var(--border-1)',
      background: 'var(--bg-sunken)',
    }}>
      <div className="container">
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14, marginBottom: 48, maxWidth: 800 }}>
          <span className="eyebrow" style={{ alignSelf: 'flex-start', color: 'var(--accent)' }}>The Connector</span>
          <h3 style={{ fontSize: 32, fontWeight: 700, letterSpacing: '-0.02em', margin: 0, color: 'var(--fg-1)', lineHeight: 1.15 }}>
            Insurtech data-layer notes from <BN/>.
          </h3>
          <p style={{ fontSize: 15, color: 'var(--fg-3)', margin: 0, lineHeight: 1.55, maxWidth: 640 }}>
            Once a month. Short. Specifically for the people running carrier, TPA, and employer integrations.
          </p>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 64,
          alignItems: 'flex-start',
        }}>
          {/* Recent issues nav */}
          <div>
            <div className="eyebrow" style={{ marginBottom: 18, color: 'var(--fg-3)' }}>Recent issues</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, borderTop: '1px solid var(--border-1)' }}>
              {issues.map(it => (
                <li key={it.num}>
                  <a href={`https://connector.eightbyzero.com/issues/${it.num}`} style={{
                    display: 'grid',
                    gridTemplateColumns: '60px 1fr auto',
                    gap: 18, padding: '14px 0',
                    borderBottom: '1px solid var(--border-1)',
                    textDecoration: 'none',
                    color: 'var(--fg-2)',
                    alignItems: 'baseline',
                    transition: 'color 120ms',
                  }}
                  onMouseEnter={e=>e.currentTarget.style.color='var(--fg-1)'}
                  onMouseLeave={e=>e.currentTarget.style.color='var(--fg-2)'}>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-4)', letterSpacing: '0.04em' }}>№ {it.num}</span>
                    <span style={{ fontSize: 15, letterSpacing: '-0.005em' }}>{it.title}</span>
                    <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-4)', letterSpacing: '0.04em', whiteSpace: 'nowrap' }}>{it.date}</span>
                  </a>
                </li>
              ))}
            </ul>
            <a href="https://connector.eightbyzero.com" style={{
              display: 'inline-block', marginTop: 18,
              fontSize: 13, color: 'var(--fg-3)',
              textDecoration: 'none',
              borderBottom: '1px solid var(--border-2)',
              paddingBottom: 2,
            }}>All issues →</a>
          </div>

          {/* Subscribe form */}
          <div>
            <div className="eyebrow" style={{ marginBottom: 18, color: 'var(--fg-3)' }}>Subscribe</div>
            <ConnectorSubscribeForm/>
            <p style={{
              marginTop: 12,
              fontSize: 11.5, color: 'var(--fg-4)', lineHeight: 1.55,
              fontFamily: 'var(--font-mono)', letterSpacing: '0.02em',
            }}>
              One email a month. No spam. Unsubscribe anytime.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ------- Footer (About + Connector nav) -------
function FooterV2() {
  return (
    <footer style={{
      padding: '56px 0 32px',
      background: 'var(--bg-sunken)',
      borderTop: '1px solid var(--border-1)',
    }}>
      <div className="container">
        {/* Nav row */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1.6fr 1fr 1fr',
          gap: 32, marginBottom: 40,
        }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <img src="/assets/logo-mark.svg" width="26" height="26" alt=""/>
              <span className="wordmark" style={{ fontSize: 15 }}>
                <span style={{ color: 'var(--accent)' }}>Eight</span>
                <span style={{ color: 'var(--fg-1)' }}>by</span>
                <span style={{ color: 'var(--accent)' }}>Zero</span>
              </span>
            </div>
            <div style={{ fontSize: 13, color: 'var(--fg-3)', maxWidth: 280, lineHeight: 1.5, fontStyle: 'italic' }}>
              Infinite connectivity, zero friction.<sup style={{ fontSize: 8, marginLeft: 1, fontStyle: 'normal' }}>™</sup>
            </div>
          </div>
          <FooterCol title="Site" links={[
            ['About',         '/about'],
            ['The Connector', 'https://connector.eightbyzero.com'],
          ]}/>
          <FooterCol title="Contact" links={[
            ['Book a demo',                'https://calendar.app.google/9eoXfoSh692Xr7ks9'],
            ['connect@eightbyzero.com',    'mailto:connect@eightbyzero.com'],
          ]}/>
        </div>

        <div style={{
          paddingTop: 20, borderTop: '1px solid var(--border-1)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          fontSize: 12, color: 'var(--fg-4)', gap: 24, flexWrap: 'wrap',
        }}>
          <span>© 2026 EightbyZero, Inc.</span>
          <div style={{ display: 'flex', gap: 18, alignItems: 'center', flexWrap: 'wrap' }}>
            <a href="/legal/terms" style={{ fontSize: 12, color: 'var(--fg-3)', textDecoration: 'none', letterSpacing: '-0.005em' }}>Terms</a>
            <span style={{ color: 'var(--fg-4)' }}>·</span>
            <a href="/legal/privacy" style={{ fontSize: 12, color: 'var(--fg-3)', textDecoration: 'none', letterSpacing: '-0.005em' }}>Privacy</a>
            <span style={{ color: 'var(--fg-4)' }}>·</span>
            <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--fg-3)' }}>connect@eightbyzero.com</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

function FooterCol({ title, links }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <div style={{ fontSize: 11, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.12em', fontWeight: 600 }}>{title}</div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        {links.map(([label, href]) => (
          <a key={label} href={href} style={{ fontSize: 13.5, color: 'var(--fg-2)', textDecoration: 'none', letterSpacing: '-0.005em' }}>{label}</a>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, {
  BoostSection, HowItWorks, Manifesto, WhoItServes, MetricRowV2, CTASectionV2,
  ConnectorSignup, FooterV2, BN,
});