// hybrid-sections.jsx — All page sections for the hybrid homepage.
// Requires hybrid-receipt.jsx to be loaded first (Receipt, CashRegister, calcModel).

function LogoMark({ size = 30, variant = 'chip' }) {
  if (variant === 'chip') {
    return (
      <div style={{ width: size, height: size, borderRadius: Math.round(size * 0.22), background: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
        <img src="assets/logo-mark-white.svg" alt="1st-verse" style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
      </div>
    );
  }
  if (variant === 'ghost') {
    return (
      <img src="assets/logo-mark-white.svg" alt="1st-verse" style={{ width: size, height: size }} />
    );
  }
  return (
    <img src="assets/logo-mark-orange.svg" alt="1st-verse" style={{ width: size, height: size }} />
  );
}

// ─── RESPONSIVE CSS ────────────────────────────────────────────────
const __RESPONSIVE_CSS = `
  /* ──────── BOOK-A-CALL NAV BUTTON ──────── */
  .btn-book {
    border: 1px solid #333 !important;
    background: transparent !important;
    color: var(--ink) !important;
    box-shadow: none !important;
    transition: border-color .2s ease, color .2s ease, transform .15s !important;
  }
  .btn-book:hover {
    border-color: #ff5a1f !important;
    color: #ff5a1f !important;
    background: transparent !important;
    transform: none !important;
  }

  /* ──────── HAMBURGER MENU ──────── */
  .nav-hamburger {
    display: none;
    background: none; border: none; cursor: pointer;
    flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    width: 40px; height: 40px; border-radius: 8px; padding: 0; color: var(--ink);
  }
  .nav-hamburger:hover { background: var(--bg-2); }
  .nav-hamburger span {
    display: block; width: 22px; height: 2px;
    background: currentColor; border-radius: 2px;
    transition: transform .2s, opacity .2s;
  }
  .nav-mobile-menu {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(250,246,235,0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--rule);
    padding: 8px 24px 20px;
    flex-direction: column;
    z-index: 100;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  }
  .nav-mobile-menu.open { display: flex; }
  .nav-mobile-menu > a {
    font: 500 16px 'Geist', sans-serif;
    color: var(--ink); text-decoration: none;
    padding: 12px 0; border-bottom: 1px solid var(--rule);
    display: block;
  }
  .nav-mobile-btns {
    display: flex; flex-direction: column; gap: 8px; margin-top: 14px;
  }
  .nav-mobile-btns .btn { text-align: center; display: block; }

  /* ──────── TABLET  641–1024px ──────── */
  @media (max-width: 1024px) {
    .hero-grid        { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
    .calc-grid        { grid-template-columns: 260px 1fr !important; gap: 32px !important; }
    .workspace-grid   { grid-template-columns: 200px 1fr !important; }
    .workspace-agent  { display: none !important; }
    .hiw-grid         { grid-template-columns: repeat(2, 1fr) !important; }
    .promise-grid     { grid-template-columns: repeat(2, 1fr) !important; }
    .promise-grid > :last-child { grid-column: 1 / -1 !important; }
    .footer-links     { flex-wrap: wrap !important; }
  }

  /* ──────── MOBILE  ≤640px ──────── */
  @media (max-width: 640px) {
    /* Nav */
    .nav-links     { display: none !important; }
    .nav-cta       { display: none !important; }
    .nav-hamburger { display: flex !important; }

    /* Section padding */
    #calc, #workspace, #integrations {
      padding-left: 20px !important; padding-right: 20px !important;
      padding-top: 56px !important; padding-bottom: 56px !important;
    }
    #cta {
      padding-left: 20px !important; padding-right: 20px !important;
      padding-top: 64px !important; padding-bottom: 64px !important;
    }

    /* Typography */
    .h1, .h1.hero { font-size: 36px !important; line-height: 1.1 !important; }
    .h2            { font-size: 26px !important; }

    /* Hero */
    .hero-grid    { grid-template-columns: 1fr !important; gap: 0 !important; padding: 28px 20px 40px !important; }
    .hero-receipt { display: none !important; }

    /* Calc */
    .calc-grid     { grid-template-columns: 1fr !important; gap: 24px !important; }
    .calc-register { position: static !important; }

    /* Workspace */
    .workspace-grid    { grid-template-columns: 1fr !important; min-height: 0 !important; }
    .workspace-sidebar { display: none !important; }
    .workspace-agent   { display: none !important; }

    /* How it works — disable scroll-pin on mobile */
    .hiw-wrap   { height: auto !important; }
    .hiw-sticky {
      position: relative !important; top: auto !important;
      min-height: 0 !important; align-items: flex-start !important;
      padding: 40px 20px 56px !important;
    }
    .hiw-grid   { grid-template-columns: 1fr !important; }
    .hiw-progress .play-state { display: none !important; }

    /* Promise cards */
    .promise-grid { grid-template-columns: 1fr !important; }

    /* Footer */
    .footer-inner { flex-direction: column !important; align-items: center !important; text-align: center !important; }
    .footer-links { flex-wrap: wrap !important; justify-content: center !important; gap: 14px !important; }
  }
`;

(function injectResponsiveCss() {
  if (document.getElementById('__responsive_css')) return;
  const s = document.createElement('style');
  s.id = '__responsive_css';
  s.textContent = __RESPONSIVE_CSS;
  document.head.appendChild(s);
})();

function HybridNav() {
  const [open, setOpen] = React.useState(false);
  const navLinks = [
    { label: 'Calculator',   href: '#calc' },
    { label: 'Integrations', href: '#integrations' },
    { label: 'How It Works', href: '#how-it-works' },
  ];
  // Spreads data-cal-* attributes onto Cal.com-linked items
  const calProps = (calLink) => calLink ? {
    'data-cal-link': calLink,
    'data-cal-namespace': '30min',
    'data-cal-config': '{"layout":"month_view"}',
  } : {};
  return (
    <header style={{ position: 'sticky', top: 0, zIndex: 50, background: 'rgba(250,246,235,0.85)', backdropFilter: 'blur(8px)', borderBottom: '1px solid var(--rule)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto', padding: '16px 32px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <a href="#" style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none' }}>
          <LogoMark size={32} variant="chip" />
          <span style={{ font: '700 18px "Bricolage Grotesque", sans-serif', letterSpacing: '-0.02em', color: 'var(--ink)' }}>1st-verse</span>
          <span className="chip" style={{ marginLeft: 8, padding: '2px 8px', fontSize: 11 }}>BETA</span>
        </a>
        <nav className="nav-links" style={{ display: 'flex', gap: 28 }}>
          {navLinks.map(({ label, href, calLink }) => (
            <a key={label} href={href} {...calProps(calLink)}
               onClick={(e) => { if (calLink) e.preventDefault(); setOpen(false); }}
               style={{ color: 'var(--ink)', textDecoration: 'none', font: '500 14px "Geist", sans-serif' }}>{label}</a>
          ))}
        </nav>
        <div className="nav-cta" style={{ display: 'flex', gap: 8 }}>
          <a className="btn primary" href="#calc">Calculate savings</a>
          <a className="btn btn-book" href="#"
             data-cal-link="1st-verse/30min" data-cal-namespace="30min"
             data-cal-config='{"layout":"month_view"}'
             onClick={(e) => e.preventDefault()}>Book a call</a>
        </div>
        <button className="nav-hamburger" aria-label={open ? 'Close menu' : 'Open menu'} aria-expanded={open}
                onClick={() => setOpen((o) => !o)}>
          <span />
          <span />
          <span />
        </button>
      </div>
      <div className={`nav-mobile-menu${open ? ' open' : ''}`}>
        {navLinks.map(({ label, href, calLink }) => (
          <a key={label} href={href} {...calProps(calLink)}
             onClick={(e) => { if (calLink) e.preventDefault(); setOpen(false); }}>{label}</a>
        ))}
        <div className="nav-mobile-btns">
          <a className="btn primary" href="#calc" onClick={() => setOpen(false)}>Calculate savings →</a>
        </div>
      </div>
    </header>
  );
}

const HERO_VARIANTS = {
  itemized: {
    eyebrow: 'Human-led support · Built for Shopify & SaaS',
    line1: 'Your support tab,',
    line2: 'itemized.',
    sub: "Real humans on your tickets. Real money back in your runway. Punch in your weekly hours — we'll print a transparent receipt of what you're paying now versus what you'd pay us.",
  },
  saved: {
    eyebrow: 'Human-led support · For Shopify & SaaS',
    line1: 'Save real money',
    line2: 'on real support.',
    sub: 'No bots. No scripts. No overhead. Just trained humans on your stack, charged by the hour, with a receipt to prove it.',
  },
  switch: {
    eyebrow: 'Human-led support · Built for Shopify & SaaS',
    line1: 'Pay support by the minute.',
    line2: 'Keep the receipts.',
    sub: 'Trained humans on your stack, charged by the minute — with a receipt to prove it.',
  },
};

function HybridHero({ hours, variant = 'switch' }) {
  const v = HERO_VARIANTS[variant] || HERO_VARIANTS.switch;
  return (
    <section className="hero-grid" style={{ maxWidth: 1280, margin: '0 auto', padding: '40px 32px 48px', display: 'grid', gridTemplateColumns: '1.25fr 1fr', gap: 48, alignItems: 'center' }}>
      <div>
        <div className="chip" style={{ marginBottom: 18 }}>
          <span className="dot" />
          <span>{v.eyebrow}</span>
        </div>
        <h1 className="h1 hero">
          {v.line1}<br/>
          <span style={{ display: 'inline-block', background: 'var(--accent)', color: '#fff', padding: '0 18px 6px', transform: 'rotate(-1.5deg)', margin: '6px 0' }}>{v.line2}</span>
        </h1>
        <p className="lead" style={{ marginTop: 24, maxWidth: 520 }}>{v.sub}</p>
        <div style={{ marginTop: 28, display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
          <a className="btn primary lg" href="#calc">Calculate my savings →</a>
          <a className="btn lg" href="#"
             data-cal-link="1st-verse/30min" data-cal-namespace="30min"
             data-cal-config='{"layout":"month_view"}'
             onClick={(e) => e.preventDefault()}>Book a 15-min call</a>
        </div>
        <div style={{ marginTop: 24, display: 'flex', gap: 20, alignItems: 'center', flexWrap: 'wrap' }}>
          <Stat n="100%" l="Human agents" />
          <span style={{ color: 'var(--rule)' }}>·</span>
          <Stat n="< 60min" l="Time to launch" />
          <span style={{ color: 'var(--rule)' }}>·</span>
          <Stat n="421" l="Agents online now" />
        </div>
      </div>
      <div className="hero-receipt" style={{ position: 'relative' }}>
        <div style={{ transform: 'rotate(2.5deg)', maxWidth: 380, marginLeft: 'auto' }}>
          <Receipt hours={hours} variant="full" />
        </div>
        <ScrawlNote top={-26} right={-10} rotate={6} arrow="↙">live preview</ScrawlNote>
        <ScrawlNote bottom={-44} left={-10} rotate={-4} arrow="↗">your real numbers,<br/>your real receipt</ScrawlNote>
      </div>
    </section>
  );
}

function Stat({ n, l }) {
  return (
    <div>
      <div style={{ font: '700 18px "Bricolage Grotesque", sans-serif', letterSpacing: '-0.02em' }}>{n}</div>
      <div className="eyebrow" style={{ fontSize: 10, marginTop: 2 }}>{l}</div>
    </div>
  );
}

function ScrawlNote({ children, top, left, right, bottom, rotate = 0, arrow = '↗' }) {
  return (
    <div style={{ position: 'absolute', top, left, right, bottom, transform: `rotate(${rotate}deg)`, font: '15px/1.2 "Caveat", "Kalam", cursive', color: 'var(--accent-deep)', maxWidth: 160, pointerEvents: 'none' }}>
      <span style={{ display: 'block', fontSize: 22, lineHeight: 1 }}>{arrow}</span>
      {children}
    </div>
  );
}

// ─── TRUST BAR (infinite marquee) ─────────────────────────────────
const __MARQUEE_CSS = `
  @keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  .marquee-wrap {
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  }
  .marquee-track {
    display: flex;
    width: max-content;
    gap: 120px;
    align-items: center;
    animation: marquee-scroll 50s linear infinite;
  }
  .marquee-wrap:hover .marquee-track { animation-play-state: paused; }
  .marquee-track img {
    display: block;
    width: auto;
    flex-shrink: 0;
    filter: grayscale(1) opacity(0.55) contrast(1.1);
    transition: filter .2s ease;
  }
  .marquee-track img:hover { filter: grayscale(0) opacity(1); }
`;

function TrustBar() {
  React.useEffect(() => {
    if (document.getElementById('__marquee_css')) return;
    const s = document.createElement('style');
    s.id = '__marquee_css';
    s.textContent = __MARQUEE_CSS;
    document.head.appendChild(s);
  }, []);

  const logos = [
    { src: 'assets/logos/shopify.svg', alt: 'Shopify', h: 36 },
    { src: 'assets/logos/gorgias.svg', alt: 'Gorgias', h: 34 },
    { src: 'assets/logos/slack.svg', alt: 'Slack', h: 34 },
    { src: 'assets/logos/zendesk.svg', alt: 'Zendesk', h: 36 },
    { src: 'assets/logos/hubspot.svg', alt: 'HubSpot', h: 34 },
    { src: 'assets/logos/freshworks.svg', alt: 'Freshworks', h: 30 },
    { src: 'assets/logos/recharge.svg', alt: 'Recharge', h: 28 },
    { src: 'assets/logos/monday.svg', alt: 'Monday', h: 26 },
    { src: 'assets/logos/tidio.svg', alt: 'Tidio', h: 28 },
  ];

  return (
    <section style={{ background: 'var(--bg-2)', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)', padding: '32px 0' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto 16px', padding: '0 32px', textAlign: 'center' }}>
        <div className="eyebrow">Plugs into the stack you already use</div>
      </div>
      <div className="marquee-wrap">
        <div className="marquee-track">
          {[0, 1].map((dupe) => (
            <React.Fragment key={dupe}>
              {logos.map((l) => (
                <img key={`${dupe}-${l.alt}`} src={l.src} alt={dupe === 0 ? l.alt : ''}
                     aria-hidden={dupe === 1 ? 'true' : undefined}
                     style={{ height: l.h }} />
              ))}
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── CALCULATOR SECTION ────────────────────────────────────────────
function CalcSection({ hours, setHours }) {
  return (
    <section id="calc" style={{ padding: '90px 32px', background: 'var(--bg)', position: 'relative' }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 48 }}>
          <div className="eyebrow">★ Cost calculator</div>
          <h2 className="h2" style={{ marginTop: 12 }}>Punch in the hours. Get the receipt.</h2>
          <p className="lead" style={{ marginTop: 14, maxWidth: 560, marginLeft: 'auto', marginRight: 'auto' }}>
            Tap your weekly support hours into the register. We'll print a transparent line-by-line breakdown of what you pay in-house versus what you'd pay us.
          </p>
        </div>
        <div className="calc-grid" style={{ display: 'grid', gridTemplateColumns: '340px 1fr', gap: 56, alignItems: 'start', maxWidth: 980, margin: '0 auto' }}>
          <div className="calc-register" style={{ position: 'sticky', top: 100 }}>
            <CashRegister hours={hours} setHours={setHours} />
            <div style={{ marginTop: 16, padding: '12px 14px', background: 'var(--paper)', borderRadius: 8, border: '1px solid var(--rule)', font: '500 12px "Geist", sans-serif', color: 'var(--ink-2)' }}>
              <strong style={{ color: 'var(--ink)' }}>Pro tip:</strong> Try 8 hrs (part-time), 40 hrs (full-time), or 168 hrs (24/7) to see the curve.
            </div>
          </div>
          <div style={{ position: 'relative' }}>
            <Receipt hours={hours} variant="full" />
          </div>
        </div>
        <div style={{ marginTop: 48, textAlign: 'center' }}>
          <p className="body" style={{ marginBottom: 14 }}>Need 24/7 coverage or multiple dedicated agents?</p>
          <a className="btn" href="#booking">Let's build a custom plan →</a>
        </div>
      </div>
    </section>
  );
}

// ─── PRODUCT WINDOW (credibility section) ──────────────────────────
function ProductWindow() {
  return (
    <section id="workspace" style={{ padding: '90px 32px', background: 'var(--bg-2)', borderTop: '1px solid var(--rule)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 44 }}>
          <div className="eyebrow">Inside the workspace</div>
          <h2 className="h2" style={{ marginTop: 12, maxWidth: 760, marginLeft: 'auto', marginRight: 'auto' }}>
            Once you sign, <span style={{ color: 'var(--accent-deep)' }}>this</span> is where the work lives.
          </h2>
          <p className="lead" style={{ marginTop: 14, maxWidth: 580, marginLeft: 'auto', marginRight: 'auto' }}>
            Your shared queue, your dedicated agents, your weekly receipt — all in one workspace. Built so you actually want to log in.
          </p>
        </div>

        <div style={{ background: 'var(--paper)', borderRadius: 16, boxShadow: '0 24px 64px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.04)', overflow: 'hidden', border: '1px solid var(--rule)', maxWidth: 1180, margin: '0 auto' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '12px 16px', background: 'var(--bg-2)', borderBottom: '1px solid var(--rule)' }}>
            <div style={{ display: 'flex', gap: 6 }}>
              {['#ED6A5E', '#F5BF4F', '#62C554'].map((c) => <div key={c} style={{ width: 12, height: 12, borderRadius: '50%', background: c }} />)}
            </div>
            <div style={{ flex: 1, textAlign: 'center', font: '500 12px "JetBrains Mono", monospace', color: 'var(--ink-3)' }}>app.1st-verse.com/workspace</div>
            <div style={{ width: 48 }} />
          </div>

          <div className="workspace-grid" style={{ display: 'grid', gridTemplateColumns: '220px 1fr 320px', minHeight: 540 }}>
            <aside className="workspace-sidebar" style={{ borderRight: '1px solid var(--rule)', padding: '20px 16px', background: '#FBFAF4' }}>
              <button style={{ width: '100%', padding: '10px 14px', background: 'var(--ink)', color: '#fff', border: 0, borderRadius: 8, font: '600 13px "Geist", sans-serif', cursor: 'pointer', marginBottom: 18 }}>+ New ticket</button>
              <div className="eyebrow" style={{ marginBottom: 10 }}>Inbox</div>
              {[
                ['Unassigned', '23', false],
                ['Assigned to me', '8', true],
                ['Shared with team', '47', false],
                ['Snoozed', '4', false],
                ['Closed', '—', false],
              ].map(([l, n, active]) => (
                <div key={l} style={{ display: 'flex', justifyContent: 'space-between', padding: '8px 10px', borderRadius: 6, marginBottom: 2, background: active ? 'var(--accent-soft)' : 'transparent', color: active ? 'var(--accent-deep)' : 'var(--ink)', font: `${active ? 600 : 500} 13px "Geist", sans-serif`, cursor: 'pointer' }}>
                  <span>{l}</span>
                  <span style={{ font: '500 12px "JetBrains Mono", monospace', color: 'var(--ink-3)' }}>{n}</span>
                </div>
              ))}
              <div className="eyebrow" style={{ marginTop: 20, marginBottom: 10 }}>Channels</div>
              {['Shopify', 'Gorgias', 'Slack', 'Email'].map((l) => (
                <div key={l} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 10px', font: '500 13px "Geist", sans-serif', color: 'var(--ink-2)' }}>
                  <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent)' }} />
                  {l}
                </div>
              ))}
            </aside>

            <div style={{ padding: '20px 24px' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
                <div>
                  <div className="eyebrow">Assigned to me · live</div>
                  <h3 className="h3" style={{ marginTop: 4 }}>Tuesday queue</h3>
                </div>
                <div style={{ display: 'flex', gap: 6 }}>
                  <span className="chip" style={{ padding: '4px 10px', fontSize: 12 }}>All</span>
                  <span className="chip dark" style={{ padding: '4px 10px', fontSize: 12 }}>Open · 8</span>
                  <span className="chip" style={{ padding: '4px 10px', fontSize: 12 }}>Pending</span>
                </div>
              </div>

              {[
                { from: 'Marisol P.', ch: 'Shopify', subj: "Order #4823 — Where's my refund?", time: '2m', tag: 'returns', accent: true },
                { from: 'Devon K.', ch: 'Gorgias', subj: 'Subscription pause — can I skip the next box?', time: '7m', tag: 'subscriptions' },
                { from: 'Aisha N.', ch: 'Email', subj: 'Bulk order for the holiday market', time: '14m', tag: 'wholesale' },
                { from: 'Jordan T.', ch: 'Shopify', subj: 'Size question — between M and L', time: '22m', tag: 'pre-sale' },
                { from: 'Rio S.', ch: 'Slack', subj: 'API rate limit on /webhooks endpoint', time: '38m', tag: 'tech · escalated', accent: true },
              ].map((t, i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 14, padding: '12px 14px', borderRadius: 8, marginBottom: 6, background: t.accent ? 'var(--bg-2)' : 'transparent', border: t.accent ? '1px solid var(--rule)' : '1px solid transparent', alignItems: 'center' }}>
                  <div style={{ width: 34, height: 34, borderRadius: '50%', background: 'var(--bg-3)', display: 'flex', alignItems: 'center', justifyContent: 'center', font: '700 13px "Bricolage Grotesque", sans-serif', color: 'var(--ink-2)' }}>{t.from[0]}</div>
                  <div>
                    <div style={{ display: 'flex', gap: 8, alignItems: 'baseline' }}>
                      <span style={{ font: '600 14px "Geist", sans-serif' }}>{t.from}</span>
                      <span style={{ font: '500 11px "JetBrains Mono", monospace', color: 'var(--ink-3)' }}>via {t.ch}</span>
                    </div>
                    <div style={{ font: '400 14px "Geist", sans-serif', color: 'var(--ink-2)', marginTop: 2 }}>{t.subj}</div>
                  </div>
                  <div style={{ textAlign: 'right' }}>
                    <div style={{ font: '500 12px "JetBrains Mono", monospace', color: 'var(--ink-3)' }}>{t.time} ago</div>
                    <div style={{ font: '500 11px "Geist", sans-serif', color: 'var(--accent-deep)', marginTop: 2 }}>#{t.tag}</div>
                  </div>
                </div>
              ))}
            </div>

            <aside className="workspace-agent" style={{ borderLeft: '1px solid var(--rule)', padding: '20px', background: '#FBFAF4', display: 'flex', flexDirection: 'column', gap: 16 }}>
              <div className="eyebrow">Your dedicated agent</div>
              <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                <div style={{ width: 48, height: 48, borderRadius: '50%', background: 'linear-gradient(135deg, #F5BF4F, #E64A19)', display: 'flex', alignItems: 'center', justifyContent: 'center', font: '700 18px "Bricolage Grotesque", sans-serif', color: '#fff' }}>SK</div>
                <div>
                  <div style={{ font: '600 15px "Geist", sans-serif' }}>Sarah K. <span style={{ color: '#62C554', fontSize: 12 }}>● live</span></div>
                  <div style={{ font: '500 12px "JetBrains Mono", monospace', color: 'var(--ink-3)' }}>Senior · Shopify · 3 yr</div>
                </div>
              </div>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
                {['Gorgias', 'Klaviyo', 'Recharge', 'Shopify Flow'].map((s) => (
                  <span key={s} className="chip" style={{ padding: '3px 9px', fontSize: 11 }}>{s}</span>
                ))}
              </div>

              <div style={{ marginTop: 6 }}>
                <div className="eyebrow" style={{ marginBottom: 8 }}>Reply draft · #4823</div>
                <div style={{ background: 'var(--bg-2)', borderRadius: 10, padding: 12, font: '500 13px/1.5 "Geist", sans-serif', color: 'var(--ink)' }}>
                  Hi Marisol — totally hear you, refunds taking this long is frustrating. I just pulled order #4823 — looks like the refund posted on our side May 24. Your bank should clear it within 3 biz days. I've also flagged your account so the next order ships priority on us. ↩
                </div>
                <div style={{ marginTop: 8, display: 'flex', gap: 6 }}>
                  <button className="register-btn" style={{ flex: 1, padding: '8px', borderRadius: 6, boxShadow: '0 2px 0 var(--accent-deep)' }}>SEND</button>
                  <button className="register-btn ghost" style={{ flex: 1, padding: '8px', borderRadius: 6, boxShadow: '0 2px 0 #000', background: '#3a3835' }}>EDIT</button>
                </div>
              </div>

              <div style={{ marginTop: 'auto', padding: '12px', background: 'var(--bg-2)', borderRadius: 10, border: '1px dashed var(--rule)' }}>
                <div className="eyebrow" style={{ marginBottom: 4 }}>This week so far</div>
                <div style={{ display: 'flex', justifyContent: 'space-between', font: '600 13px "Geist", sans-serif' }}>
                  <span>87 tickets</span>
                  <span style={{ color: 'var(--accent-deep)' }}>4.9 ★ CSAT</span>
                </div>
              </div>
            </aside>
          </div>
        </div>

        <PromiseCards />
      </div>
    </section>
  );
}

// ─── HOW IT WORKS ──────────────────────────────────────────────────
const __HIW_CSS = `
  .hiw-card {
    padding: 24px; background: var(--paper); border: 1px solid var(--rule);
    border-radius: 14px; position: relative; min-height: 300px;
    cursor: pointer; transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s, border-color .35s;
  }
  .hiw-card:hover { border-color: var(--ink-3); }
  .hiw-card.active {
    transform: translateY(-6px);
    border-color: var(--accent);
    box-shadow: 0 14px 28px -14px color-mix(in oklab, var(--accent) 60%, transparent);
  }
  .hiw-card .hiw-bignum { transition: color .35s; }
  .hiw-card.active .hiw-bignum { color: var(--accent); }
  .hiw-progress {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
    margin-bottom: 18px; position: relative;
  }
  .hiw-progress .track {
    position: absolute; left: 6%; right: 6%; top: 9px; height: 2px;
    background: var(--rule); border-radius: 2px; overflow: hidden;
  }
  .hiw-progress .fill {
    position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent);
    border-radius: 2px; transition: width .6s cubic-bezier(.2,.7,.2,1);
  }
  .hiw-progress button {
    background: transparent; border: 0; padding: 0; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    font: 500 11px 'JetBrains Mono', monospace; color: var(--ink-3); letter-spacing: 0.12em;
  }
  .hiw-progress button .node {
    width: 20px; height: 20px; border-radius: 50%; background: var(--bg);
    border: 2px solid var(--rule); position: relative; z-index: 2;
    transition: background .3s, border-color .3s, transform .3s;
  }
  .hiw-progress button.done .node { background: var(--accent); border-color: var(--accent); }
  .hiw-progress button.active .node {
    background: var(--accent); border-color: var(--accent); transform: scale(1.25);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 20%, transparent);
  }
  .hiw-progress button.active { color: var(--ink); }
  .hiw-progress button:hover { color: var(--ink); }
  .hiw-progress .play-state {
    position: absolute; right: 0; top: -28px;
    font: 500 10px 'JetBrains Mono', monospace; color: var(--ink-3); letter-spacing: 0.16em;
    display: flex; gap: 6px; align-items: center;
  }
  .hiw-progress .play-state .lp {
    width: 6px; height: 6px; border-radius: 50%; background: #62C554;
    animation: hiw-pulse 1.6s ease-in-out infinite;
  }
  @keyframes hiw-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.45;transform:scale(.7)} }

  .hiw-logo-row {
    padding: 9px 12px; background: var(--bg-2); border-radius: 8px;
    font: 600 13px 'Bricolage Grotesque', sans-serif;
    display: flex; justify-content: space-between; align-items: center;
    transition: opacity .35s, transform .35s, background .35s;
  }
  .hiw-logo-row.pending { opacity: .35; }
  .hiw-logo-row .status {
    font: 500 10px 'JetBrains Mono', monospace; letter-spacing: 0.08em;
  }
  .hiw-logo-row.pending .status { color: var(--ink-3); }
  .hiw-logo-row.connected .status { color: var(--accent-deep); }
  .hiw-logo-row .check {
    display: inline-block; width: 10px; height: 10px; margin-left: 4px;
    border-radius: 50%; background: var(--accent);
    transform: scale(0); transition: transform .3s cubic-bezier(.4,1.6,.5,1);
  }
  .hiw-logo-row.connected .check { transform: scale(1); }

  .hiw-checklist { font: 500 12px/1.7 'JetBrains Mono', monospace; color: var(--ink-2); }
  .hiw-checklist .item { opacity: 0; transform: translateX(-6px); transition: opacity .35s, transform .35s; }
  .hiw-checklist .item.in { opacity: 1; transform: translateX(0); }
  .hiw-checklist .dots::after {
    content: '...'; display: inline-block; width: 1.2em; overflow: hidden; vertical-align: bottom;
    animation: hiw-dots 1.6s steps(4, end) infinite;
  }
  @keyframes hiw-dots { 0%{width:0} 100%{width:1.2em} }

  .hiw-caret {
    display: inline-block; width: 2px; height: 1em; background: var(--accent);
    vertical-align: -2px; margin-left: 1px; animation: hiw-blink 0.9s steps(2) infinite;
  }
  @keyframes hiw-blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }

  .hiw-stamp {
    margin-top: 10px; padding: 8px 10px; background: rgba(98, 197, 84, 0.16); border-radius: 4px;
    font: 700 13px 'JetBrains Mono', monospace; color: #1F6E2E;
    text-align: center; letter-spacing: 0.12em;
    transform: scale(.4) rotate(-8deg); opacity: 0;
    transition: transform .35s cubic-bezier(.3,1.7,.4,1), opacity .25s;
  }
  .hiw-stamp.in { transform: scale(1) rotate(-2deg); opacity: 1; }
`;

function ConnectVisual({ active, logos }) {
  const [n, setN] = React.useState(active ? 0 : logos.length);
  React.useEffect(() => {
    if (!active) { setN(logos.length); return; }
    setN(0);
    const ids = logos.map((_, i) => setTimeout(() => setN(i + 1), 350 + i * 600));
    return () => ids.forEach(clearTimeout);
  }, [active, logos.length]);
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      {logos.map((l, i) => (
        <div key={l} className={`hiw-logo-row ${i < n ? 'connected' : 'pending'}`}>
          <span>{l}</span>
          <span className="status">
            {i < n ? <>connected<span className="check" /></> : 'connecting…'}
          </span>
        </div>
      ))}
    </div>
  );
}

function TrainVisual({ active }) {
  const target = 92;
  const [pct, setPct] = React.useState(active ? 0 : target);
  const [step, setStep] = React.useState(active ? 0 : 3);
  React.useEffect(() => {
    if (!active) { setPct(target); setStep(3); return; }
    setPct(0); setStep(0);
    const start = performance.now();
    let raf;
    const tick = (now) => {
      const dt = Math.min(1, (now - start) / 2400);
      const e = 1 - Math.pow(1 - dt, 2);
      setPct(Math.round(e * target));
      if (dt < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    const t1 = setTimeout(() => setStep(1), 500);
    const t2 = setTimeout(() => setStep(2), 1300);
    const t3 = setTimeout(() => setStep(3), 2100);
    return () => { cancelAnimationFrame(raf); clearTimeout(t1); clearTimeout(t2); clearTimeout(t3); };
  }, [active]);
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', font: '500 11px "JetBrains Mono", monospace', color: 'var(--ink-3)' }}>
        <span>Brand voice ingestion</span><span>{pct}%</span>
      </div>
      <div style={{ height: 8, background: 'var(--bg-2)', borderRadius: 4, marginTop: 6, overflow: 'hidden' }}>
        <div style={{ width: `${pct}%`, height: '100%', background: 'var(--accent)', transition: active ? 'none' : 'width .4s' }} />
      </div>
      <div className="hiw-checklist" style={{ marginTop: 12 }}>
        <div className={`item ${step >= 1 ? 'in' : ''}`}>✓ Loaded 150 past tickets</div>
        <div className={`item ${step >= 2 ? 'in' : ''}`}>✓ Mapped 47 macros</div>
        <div className={`item ${step >= 3 ? 'in' : ''}`}>
          {pct >= target ? '✓ Tone calibrated' : <span className="dots">⌛ Calibrating tone</span>}
        </div>
      </div>
    </div>
  );
}

function LaunchVisual({ active }) {
  const msg = "Hi! I see your order hasn't shipped yet — let me check on that for you...";
  const [n, setN] = React.useState(active ? 0 : msg.length);
  React.useEffect(() => {
    if (!active) { setN(msg.length); return; }
    setN(0);
    let i = 0;
    const id = setInterval(() => {
      i = Math.min(msg.length, i + 2);
      setN(i);
      if (i >= msg.length) clearInterval(id);
    }, 32);
    return () => clearInterval(id);
  }, [active]);
  return (
    <div style={{ background: 'var(--bg-2)', borderRadius: 8, padding: 12 }}>
      <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
        <div style={{ width: 24, height: 24, borderRadius: '50%', background: 'var(--accent)', color: '#fff', display: 'flex', alignItems: 'center', justifyContent: 'center', font: '700 11px sans-serif' }}>S</div>
        <span style={{ font: '600 13px "Geist", sans-serif' }}>Sarah K.</span>
        <span style={{ font: '500 10px "JetBrains Mono", monospace', color: '#62C554', marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 4 }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#62C554', animation: 'hiw-pulse 1.6s ease-in-out infinite' }} />
          LIVE
        </span>
      </div>
      <div style={{ marginTop: 8, font: '500 12px/1.5 "Geist", sans-serif', color: 'var(--ink-2)', minHeight: '3.6em' }}>
        "{msg.slice(0, n)}{n < msg.length && <span className="hiw-caret" />}"
      </div>
    </div>
  );
}

function ScaleVisual({ active }) {
  const before = 6754;
  const after = 2360;
  const [val, setVal] = React.useState(active ? before : after);
  const [stamped, setStamped] = React.useState(!active);
  React.useEffect(() => {
    if (!active) { setVal(after); setStamped(true); return; }
    setVal(before); setStamped(false);
    const start = performance.now();
    let raf;
    const tick = (now) => {
      const dt = Math.min(1, (now - start) / 2000);
      const e = 1 - Math.pow(1 - dt, 3);
      setVal(Math.round(before - (before - after) * e));
      if (dt < 1) raf = requestAnimationFrame(tick);
      else setTimeout(() => setStamped(true), 200);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [active]);
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 0', borderBottom: '1px dashed var(--rule)' }}>
        <span className="body" style={{ fontSize: 12 }}>BEFORE</span>
        <span style={{ font: '600 14px "JetBrains Mono", monospace', color: 'var(--ink-3)' }}>${before.toLocaleString()}<span style={{ fontSize: 10 }}>/mo</span></span>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 0' }}>
        <span className="body" style={{ fontSize: 12, color: 'var(--accent-deep)', fontWeight: 600 }}>AFTER</span>
        <span style={{ font: '700 14px "JetBrains Mono", monospace', color: 'var(--accent-deep)' }} className="hiw-bignum">${val.toLocaleString()}<span style={{ fontSize: 10 }}>/mo</span></span>
      </div>
      <div className={`hiw-stamp ${stamped ? 'in' : ''}`}>
        + ${(before - after).toLocaleString()} SAVED/MO
      </div>
    </div>
  );
}

function HowItWorks() {
  React.useEffect(() => {
    if (document.getElementById('__hiw_css')) return;
    const s = document.createElement('style');
    s.id = '__hiw_css'; s.textContent = __HIW_CSS;
    document.head.appendChild(s);
  }, []);

  const steps = [
    { n: '01', t: 'Connect', d: 'Plug in your helpdesk, store, and Slack. Takes 60 seconds.' },
    { n: '02', t: 'Train',   d: 'We ingest your brand voice, past tickets, and macros.' },
    { n: '03', t: 'Launch',  d: 'Your agent goes live in a shared Slack channel.' },
    { n: '04', t: 'Scale',   d: 'Costs drop. CSAT climbs. The receipt prints itself.' },
  ];
  const [active, setActive] = React.useState(0);
  const [progress, setProgress] = React.useState(0);
  const wrapRef = React.useRef(null);

  const STEP_VH = 70;

  React.useEffect(() => {
    let raf = 0;
    const compute = () => {
      raf = 0;
      const el = wrapRef.current;
      if (!el) return;
      const rect = el.getBoundingClientRect();
      const total = rect.height - window.innerHeight;
      if (total <= 0) { setActive(0); setProgress(0); return; }
      const p = Math.max(0, Math.min(1, -rect.top / total));
      setProgress(p);
      const idx = Math.min(steps.length - 1, Math.floor(p * steps.length * 0.999));
      setActive(idx);
    };
    const onScroll = () => { if (!raf) raf = requestAnimationFrame(compute); };
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    compute();
    return () => {
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
      if (raf) cancelAnimationFrame(raf);
    };
  }, [steps.length]);

  const jumpTo = (i) => {
    const el = wrapRef.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    const total = rect.height - window.innerHeight;
    const target = (i + 0.5) / steps.length;
    const targetY = window.scrollY + rect.top + target * total;
    window.scrollTo({ top: targetY, behavior: 'smooth' });
  };

  return (
    <section id="how-it-works" style={{ background: 'var(--bg)', position: 'relative' }}>
      <div ref={wrapRef} className="hiw-wrap" style={{ height: `${steps.length * STEP_VH + 30}vh`, position: 'relative' }}>
        <div className="hiw-sticky" style={{ position: 'sticky', top: 0, minHeight: '100vh', display: 'flex', alignItems: 'center', padding: '40px 32px' }}>
          <div style={{ maxWidth: 1280, margin: '0 auto', width: '100%' }}>
            <div style={{ textAlign: 'center', marginBottom: 40 }}>
              <div className="eyebrow">From signup to first ticket</div>
              <h2 className="h2" style={{ marginTop: 12 }}>Zero friction. Total scale. Here's how.</h2>
              <p className="lead" style={{ marginTop: 14 }}>Cost-savings begin in under 60 minutes.</p>
            </div>

            <div className="hiw-progress" role="tablist" aria-label="How it works steps">
              <div className="track">
                <div className="fill" style={{ width: `${progress * 100}%`, transition: 'none' }} />
              </div>
              <div className="play-state">
                <span className="lp" />
                SCROLL TO ADVANCE
              </div>
              {steps.map((s, i) => (
                <button
                  key={s.n}
                  role="tab"
                  aria-selected={i === active}
                  className={i === active ? 'active' : i < active ? 'done' : ''}
                  onClick={() => jumpTo(i)}
                >
                  <span className="node" />
                  <span>STEP {s.n}</span>
                </button>
              ))}
            </div>

            <div className="hiw-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
              {steps.map((s, i) => {
                const isActive = i === active;
                return (
                  <div
                    key={s.n}
                    className={`hiw-card ${isActive ? 'active' : ''}`}
                    onClick={() => jumpTo(i)}
                  >
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                      <div className="eyebrow">Step {s.n}</div>
                      <div className="hiw-bignum" style={{ font: '700 36px "Bricolage Grotesque", sans-serif', color: 'var(--bg-3)', letterSpacing: '-0.04em' }}>{s.n}</div>
                    </div>
                    <h3 className="h3" style={{ marginTop: 8 }}>{s.t}</h3>
                    <p className="body" style={{ marginTop: 6 }}>{s.d}</p>
                    <div style={{ marginTop: 16 }}>
                      {i === 0 && <ConnectVisual active={isActive} logos={['Gorgias', 'Shopify', 'Slack']} />}
                      {i === 1 && <TrainVisual active={isActive} />}
                      {i === 2 && <LaunchVisual active={isActive} />}
                      {i === 3 && <ScaleVisual active={isActive} />}
                    </div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── CAL.COM BOOKING SECTION ──────────────────────────────────────
function CalBookingSection() {
  React.useEffect(() => {
    const cal = window.Cal;
    if (!cal || !cal.ns || !cal.ns['30min']) return;
    cal.ns['30min']('inline', {
      elementOrSelector: '#my-cal-inline-30min',
      config: { layout: 'month_view', useSlotsViewOnSmallScreen: 'true' },
      calLink: '1st-verse/30min',
    });
  }, []);

  return (
    <section id="booking" style={{ background: 'var(--bg)', padding: '90px 32px 100px', borderTop: '1px solid var(--rule)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 44 }}>
          <div className="eyebrow">No waitlist. No pitch required.</div>
          <h2 className="h2" style={{ marginTop: 12 }}>
            Ready to optimize? Book your session instantly.
          </h2>
          <p className="lead" style={{ marginTop: 14, maxWidth: 540, marginLeft: 'auto', marginRight: 'auto' }}>
            Pick a slot and we'll build your custom receipt live — your stack, your hours, your real savings number.
          </p>
        </div>

        {/* Dark dashboard card — matches footer, clips Cal.com badge at bottom */}
        <div style={{
          maxWidth: 850,
          margin: '0 auto',
          height: 540,
          overflow: 'hidden',
          position: 'relative',
          padding: 20,
          background: '#1a1a1a',
          borderRadius: 24,
        }}>
          <div id="my-cal-inline-30min" style={{ width: '100%', height: '100%' }} />
        </div>
      </div>
    </section>
  );
}

// ─── FINAL CTA ─────────────────────────────────────────────────────
function FinalCTA() {
  return (
    <section id="cta" style={{ padding: '100px 32px', background: 'var(--ink)', color: 'var(--bg)', position: 'relative', overflow: 'hidden' }}>
      <img src="assets/logo-mark-orange.svg" alt="" aria-hidden="true"
           style={{ position: 'absolute', right: -120, bottom: -120, width: 560, opacity: 0.12, pointerEvents: 'none' }} />
      <div style={{ maxWidth: 760, margin: '0 auto', textAlign: 'center', position: 'relative', zIndex: 2 }}>
        <img src="assets/logo-mark-white.svg" alt="" style={{ width: 56, opacity: 0.95, marginBottom: 20 }} />
        <div className="eyebrow" style={{ color: 'var(--ink-3)' }}>Ready when you are</div>
        <h2 className="h2" style={{ color: 'var(--bg)', marginTop: 14 }}>
          Stop guessing what support<br/>actually costs you.
        </h2>
        <p className="lead" style={{ color: '#bbb6a8', marginTop: 18, maxWidth: 520, marginLeft: 'auto', marginRight: 'auto' }}>
          Print a custom receipt with our team in 15 minutes. No obligation, no sales pitch — just your numbers, your stack, your call.
        </p>
        <div style={{ marginTop: 28, display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <a className="btn primary lg" href="#booking">Schedule discovery call →</a>
          <a className="btn lg" style={{ borderColor: 'var(--bg)', color: 'var(--bg)' }} href="#calc">Or run the calculator again</a>
        </div>
        <div style={{ marginTop: 22, font: '500 12px "JetBrains Mono", monospace', color: 'var(--ink-3)', letterSpacing: '0.1em' }}>
          100% HUMAN-LED STRATEGY · NO BOTS, EVER · 14-DAY FREE TRIAL
        </div>
      </div>
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 16,
          backgroundImage: 'linear-gradient(135deg, transparent 50%, var(--ink) 50%), linear-gradient(45deg, transparent 50%, var(--ink) 50%)',
          backgroundSize: '16px 16px', backgroundPosition: '0 0, 8px 0', backgroundRepeat: 'repeat-x', backgroundColor: 'var(--bg)' }} />
    </section>
  );
}

function HybridFooter() {
  return (
    <footer style={{ background: 'var(--bg)', padding: '36px 32px 28px', borderTop: '1px solid var(--rule)' }}>
      <div className="footer-inner" style={{ maxWidth: 1280, margin: '0 auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <LogoMark size={28} variant="chip" />
          <span style={{ font: '700 16px "Bricolage Grotesque", sans-serif' }}>1st-verse</span>
        </div>
        <div className="footer-links" style={{ display: 'flex', gap: 24 }}>
          {['Features', 'Human Agents', 'Pricing', 'Integrations', 'Help', 'Privacy', 'Terms'].map((l) => (
            <a key={l} href="#" style={{ font: '500 13px "Geist", sans-serif', color: 'var(--ink-2)', textDecoration: 'none' }}>{l}</a>
          ))}
        </div>
        <div className="mono" style={{ fontSize: 12, color: 'var(--ink-3)' }}>© 2026 1st-verse · Built for Shopify & SaaS</div>
      </div>
    </footer>
  );
}

Object.assign(window, { LogoMark, HybridNav, HybridHero, TrustBar, CalcSection, ProductWindow, HowItWorks, CalBookingSection, FinalCTA, HybridFooter });