// Variation B — Split hero: copy left, live demo panel right
// Target: product-forward, "see it work immediately"

const VariationB = () => {
  return (
    <div style={{ background: C.cream, color: C.ink, minHeight: '100vh' }}>
      <Nav glass />

      {/* HERO — split 60/40, demo card is the hero */}
      <section style={{ position: 'relative', padding: '64px 48px 96px', overflow: 'hidden' }}>
        {/* Flickering waveform grid background — hero-wide equalizer */}
        <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', opacity: 0.9 }}>
          <FlickeringWaveGrid />
        </div>
        {/* Subtle cream fade at top/bottom so hero content sits on softer ground */}
        <div style={{
          position: 'absolute', inset: 0, pointerEvents: 'none',
          background: `linear-gradient(180deg, ${C.cream} 0%, rgba(250,246,237,0.2) 18%, rgba(250,246,237,0.2) 82%, ${C.cream} 100%)`,
        }} />
        <Blob size={700} color={C.terracotta} opacity={0.1} style={{ top: '20%', right: '-10%' }} />
        <Blob size={500} color={C.navy} opacity={0.08} style={{ bottom: '-10%', left: '-5%' }} />

        <div data-hero-grid style={{ position: 'relative', maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 64, alignItems: 'center' }}>
          <div>
            <Eyebrow>AI Voice Agent · Shopify</Eyebrow>
            <H size={96} data-h-xl style={{ marginBottom: 28 }}>
              Every call<br/>
              <span style={{ fontStyle: 'italic' }}>answered.</span><br/>
              Every callback<br/>
              <span style={{ fontStyle: 'italic' }}>captured.</span>
            </H>
            <P style={{ fontSize: 19, maxWidth: 520, marginBottom: 36 }}>
              Inclamo answers your store's calls. It auto-syncs your Shopify knowledge base, summarizes every conversation, and queues callbacks when a human is needed.
            </P>
            <div style={{ display: 'flex', gap: 12, marginBottom: 24, flexWrap: 'wrap' }}>
              <Btn variant="primary" size="lg">Talk to us</Btn>
              <Btn variant="ghost" size="lg" href="https://www.linkedin.com/in/roman-poliashenko/" target="_blank" rel="noopener noreferrer">LinkedIn</Btn>
            </div>
            <div style={{ marginBottom: 36 }}>
              <div style={{
                fontFamily: 'ui-monospace, monospace', fontSize: 10, letterSpacing: '0.14em',
                textTransform: 'uppercase', color: C.inkMute, marginBottom: 8,
              }}>or install on your Shopify store</div>
              <InstallWidget size="md" />
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, color: C.inkMute, marginTop: 8, maxWidth: 480 }}>
                Private beta — if your store isn't whitelisted yet, drop us a line via <a href="#" onClick={(e) => { e.preventDefault(); window.openLeadForm && window.openLeadForm(); }} style={{ color: C.terracotta }}>Talk to us</a>.
              </div>
            </div>
            <div data-hero-stats data-hero-stats-divider style={{ display: 'flex', gap: 32, paddingTop: 32, borderTop: `1px solid ${C.lineSoft}` }}>
              {[
                ['Shopify', 'Native integration'],
                ['Auto-sync', 'Products · pages · policies'],
                ['Summaries', 'Every call, in plain English'],
                ['Callbacks', 'Queued when humans are needed'],
              ].map(([n, l]) => (
                <div key={l}>
                  <div style={{ fontFamily: '"Instrument Serif", serif', fontSize: 26, color: C.terracotta, lineHeight: 1 }}>{n}</div>
                  <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, color: C.inkSoft, marginTop: 4, letterSpacing: '0.04em' }}>{l}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Live demo panel — conversation carousel from real call examples */}
          <HeroConversationCarousel />
        </div>
      </section>

      {/* LOGOS — inline bar with availability badges */}
      <section style={{ padding: '48px 48px', borderTop: `1px solid ${C.lineSoft}`, borderBottom: `1px solid ${C.lineSoft}`, background: C.creamLight }}>
        <div data-platforms style={{ maxWidth: 1200, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap' }}>
          <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, color: C.inkMute, letterSpacing: '0.14em', textTransform: 'uppercase' }}>Platforms</div>
          {[
            { name: 'Shopify',      src: 'logos/shopify.png',     available: true  },
            { name: 'BigCommerce',  src: 'logos/bigcommerce.png', available: false },
            { name: 'Wix',          src: 'logos/wix.png',         available: false },
            { name: 'WooCommerce',  src: 'logos/woocommerce.png', available: false },
            { name: 'PrestaShop',   src: 'logos/prestashop.png',  available: false },
          ].map(l => (
            <div key={l.name} data-platform-cell style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 10 }}>
              {/* Fixed-height row for the image so all wordmarks sit on the same visual baseline */}
              <div style={{ height: 28, display: 'flex', alignItems: 'center' }}>
                <img
                  src={l.src}
                  alt={l.name}
                  style={{
                    height: 24,
                    width: 'auto',
                    display: 'block',
                    objectFit: 'contain',
                    opacity: l.available ? 1 : 0.45,
                    filter: l.available ? 'none' : 'grayscale(1) contrast(0.9)',
                    mixBlendMode: l.available ? 'normal' : 'multiply',
                  }}
                />
              </div>
              <span style={{
                fontFamily: 'ui-monospace, "SF Mono", Menlo, monospace',
                fontSize: 9,
                letterSpacing: '0.12em',
                textTransform: 'uppercase',
                padding: '3px 8px',
                borderRadius: 999,
                background: l.available ? C.terracotta : 'transparent',
                color: l.available ? C.cream : C.inkMute,
                border: l.available ? `1px solid ${C.terracotta}` : `1px solid ${C.lineSoft}`,
                whiteSpace: 'nowrap',
              }}>
                {l.available ? 'Available' : 'Coming soon'}
              </span>
            </div>
          ))}
        </div>
      </section>

      {/* HOW IT WORKS — 5 steps with admin screenshots */}
      <section id="how-it-works" style={{ padding: '120px 48px', position: 'relative', overflow: 'hidden' }}>
        <Blob size={600} color={C.terracotta} opacity={0.1} style={{ top: '10%', left: '-10%' }} />
        <Blob size={500} color={C.navy} opacity={0.08} style={{ bottom: '10%', right: '-8%' }} />

        <div style={{ position: 'relative', maxWidth: 1200, margin: '0 auto' }}>
          <div style={{ marginBottom: 80, maxWidth: 720 }}>
            <Eyebrow>How it works</Eyebrow>
            <H size={64} data-h-lg style={{ marginBottom: 20 }}>Live in minutes. <span style={{ fontStyle: 'italic' }}>No prompt engineering.</span></H>
            <P style={{ fontSize: 17, maxWidth: 600 }}>
              Pick a number, sync your store, and your agent is on the line. Every call is summarized, every callback captured.
            </P>
          </div>

          {[
            {
              num: '01',
              label: 'Setup',
              title: 'Pick a phone number and a voice.',
              body: 'Choose your Inclamo number and the voice your callers will hear. Dial it to test the agent end-to-end before you go live.',
              img: 'Number+voice.png',
              alt: 'Inclamo number and agent voice picker',
            },
            {
              num: '02',
              label: 'Knowledge',
              title: 'We sync your store knowledge automatically.',
              body: 'Products, pages, policies and FAQ flow in from your Shopify store within ~60 seconds of any change. Optionally add short brand-voice rules in plain English — no prompt engineering required.',
              img: 'knowlage_base+instructions.png',
              alt: 'Knowledge base auto-sync and brand voice rules',
            },
            {
              num: '03',
              label: 'Call logs',
              title: 'Every call summarized, in plain English.',
              body: 'Caller, duration, intent, sentiment, tags, and a one-line summary. Click any call to read the full transcript or listen to the recording.',
              img: 'call_logs.png',
              alt: 'Call logs with summaries, intents, sentiment',
            },
            {
              num: '04',
              label: 'Callbacks',
              title: 'Never miss a follow-up.',
              body: 'When the agent can\'t resolve a request, it offers a callback. The number, reason, and conversation summary land in your queue — ready to mark contacted or resolved.',
              img: 'callbacks.png',
              alt: 'Callbacks queue with status, reason and conversation summary',
            },
          ].map((row, i) => {
            const reverse = i % 2 === 1;
            return (
              <div key={row.num} data-2col data-2col-text-first style={{
                display: 'grid',
                gridTemplateColumns: '1fr 1.2fr',
                gap: 64,
                alignItems: 'center',
                marginBottom: 96,
              }}>
                {/* Text column */}
                <div style={{ order: reverse ? 2 : 1 }}>
                  <div style={{ display: 'flex', alignItems: 'baseline', gap: 16, marginBottom: 16 }}>
                    <div style={{ fontFamily: '"Instrument Serif", serif', fontSize: 72, color: C.terracotta, lineHeight: 1 }}>{row.num}</div>
                    <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 12, letterSpacing: '0.14em', color: C.inkMute, textTransform: 'uppercase' }}>{row.label}</div>
                  </div>
                  <H size={40} data-h-md style={{ marginBottom: 16, lineHeight: 1.05 }}>{row.title}</H>
                  <P style={{ fontSize: 17, maxWidth: 480 }}>{row.body}</P>
                </div>

                {/* Screenshot column */}
                <div style={{ order: reverse ? 1 : 2 }}>
                  <div style={{
                    background: C.creamLight,
                    border: `1px solid ${C.lineSoft}`,
                    borderRadius: 14,
                    padding: 10,
                    boxShadow: '0 24px 60px -20px rgba(26,24,21,0.18), 0 4px 12px rgba(26,24,21,0.06)',
                    overflow: 'hidden',
                  }}>
                    <img
                      src={row.img}
                      alt={row.alt}
                      style={{
                        width: '100%',
                        height: 'auto',
                        display: 'block',
                        borderRadius: 8,
                        border: `1px solid ${C.lineSoft}`,
                      }}
                    />
                  </div>
                </div>
              </div>
            );
          })}

          {/* Step 5 — Email/SMS notifications (text-only card, full width) */}
          <Glass strong data-email-card style={{
            padding: '36px 40px',
            display: 'grid',
            gridTemplateColumns: 'auto 1fr auto',
            gap: 32,
            alignItems: 'center',
          }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 16 }}>
              <div data-step-num style={{ fontFamily: '"Instrument Serif", serif', fontSize: 72, color: C.terracotta, lineHeight: 1 }}>05</div>
              <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 12, letterSpacing: '0.14em', color: C.inkMute, textTransform: 'uppercase' }}>Notify</div>
            </div>
            <div>
              <H size={28} data-h-md style={{ marginBottom: 8, lineHeight: 1.1 }}>Email & SMS notifications.</H>
              <P style={{ fontSize: 15 }}>
                Stay in the loop without watching the dashboard — get pinged the moment a callback comes in or an escalation needs you.
              </P>
            </div>
            <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
              <span style={{
                padding: '8px 14px',
                background: C.cream,
                border: `1px solid ${C.lineSoft}`,
                borderRadius: 999,
                fontFamily: 'Inter, sans-serif', fontSize: 13, color: C.ink,
                display: 'inline-flex', alignItems: 'center', gap: 8,
              }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: C.terracotta }} />
                Email
              </span>
              <span style={{
                padding: '8px 14px',
                background: C.cream,
                border: `1px solid ${C.lineSoft}`,
                borderRadius: 999,
                fontFamily: 'Inter, sans-serif', fontSize: 13, color: C.ink,
                display: 'inline-flex', alignItems: 'center', gap: 8,
              }}>
                <span style={{ width: 6, height: 6, borderRadius: '50%', background: C.navy }} />
                SMS
              </span>
            </div>
          </Glass>
        </div>
      </section>

      {/* ROADMAP + SECURITY */}
      <section id="roadmap" style={{ padding: '80px 48px', background: C.creamLight, borderTop: `1px solid ${C.lineSoft}`, borderBottom: `1px solid ${C.lineSoft}`, position: 'relative', overflow: 'hidden' }}>
        <Blob size={800} color={C.terracotta} opacity={0.18} style={{ top: '-20%', left: '20%' }} />
        <Blob size={600} color={C.navy} opacity={0.14} style={{ bottom: '-20%', right: '15%' }} />
        <div style={{ maxWidth: 1200, margin: '0 auto', display: 'flex', flexDirection: 'column', gap: 32, position: 'relative' }}>
          {/* Roadmap — coming features, weekly cadence */}
          <Glass strong style={{ padding: 0, overflow: 'hidden' }}>
            {/* Header */}
            <div style={{ padding: '28px 32px 20px', borderBottom: `1px solid ${C.lineSoft}`, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap' }}>
              <div>
                <Eyebrow>Roadmap</Eyebrow>
                <H size={34} style={{ marginBottom: 10, marginTop: 4 }}>Shipping every week.</H>
                <P style={{ fontSize: 14, maxWidth: 520 }}>What's next on the build queue. We ship one new feature each week — these are already in development.</P>
              </div>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '8px 14px',
                background: C.cream,
                border: `1px solid ${C.lineSoft}`,
                borderRadius: 999,
                fontFamily: 'Inter, sans-serif', fontSize: 12, color: C.ink,
              }}>
                <span style={{
                  width: 8, height: 8, borderRadius: '50%',
                  background: C.terracotta,
                  boxShadow: `0 0 0 4px ${C.terracotta}25`,
                }} />
                Live changelog
              </div>
            </div>

            {/* Roadmap rows */}
            <div>
              {[
                {
                  icon: '◐', tone: C.terracotta,
                  cat: 'Marketing',
                  name: 'Outbound campaigns',
                  desc: 'Segment your customers and run scheduled voice campaigns — flash sales, drops, win-back.',
                  eta: 'This week', shipping: true,
                },
                {
                  icon: '↻', tone: C.terracotta,
                  cat: 'Upsales',
                  name: 'Abandoned cart recovery',
                  desc: 'Auto-call within 45 min of abandonment with a personalized offer.',
                  eta: 'Next week',
                },
                {
                  icon: '◔', tone: C.navy,
                  cat: 'Support',
                  name: 'Live agent transfer',
                  desc: 'Hand off to a human seamlessly — with full context, transcript, and intent.',
                  eta: 'In dev',
                },
                {
                  icon: '⌥', tone: C.terracotta,
                  cat: 'Voice',
                  name: 'Voice cloning',
                  desc: 'Clone your founder\'s voice from a 60-second sample. Same voice, every call.',
                  eta: 'In dev',
                },
                {
                  icon: '◇', tone: C.navy,
                  cat: 'Languages',
                  name: 'Auto language switching',
                  desc: 'Detect the caller\'s language on the first word and switch on the fly. 32 languages.',
                  eta: 'In dev',
                },
                {
                  icon: '↺', tone: C.navy,
                  cat: 'Support',
                  name: 'Returns & RMA automation',
                  desc: 'Verify the order, authorize the return, and email the RMA — all in-call.',
                  eta: 'In dev',
                },
                {
                  icon: '⛓', tone: C.terracotta,
                  cat: 'Integrations',
                  name: 'Klaviyo & Gorgias sync',
                  desc: 'Push call events to your CRM and helpdesk. Trigger flows from voice intent.',
                  eta: 'In dev',
                },
                {
                  icon: '◕', tone: C.navy,
                  cat: 'Analytics',
                  name: 'Analytics dashboard',
                  desc: 'Volume, intents, deflection rate, ROI — broken down by SKU, hour, and campaign.',
                  eta: 'In dev',
                },
                {
                  icon: '◊', tone: C.terracotta,
                  cat: 'Channels',
                  name: 'WhatsApp & SMS chat',
                  desc: 'Same agent, same knowledge — now over chat. One inbox, every channel.',
                  eta: 'Soon',
                },
                {
                  icon: '⛨', tone: C.navy,
                  cat: 'Fraud',
                  name: 'Pre-ship verification',
                  desc: 'Confirm card digits and shipping address on high-risk orders before they ship.',
                  eta: 'Soon',
                },
              ].map((t, i) => (
                <div key={t.name} data-roadmap-row style={{
                  display: 'grid', gridTemplateColumns: '32px 1fr auto 20px',
                  gap: 16, alignItems: 'center',
                  padding: '14px 32px',
                  borderTop: i === 0 ? 'none' : `1px solid ${C.lineSoft}`,
                  background: t.shipping ? `${C.terracotta}08` : 'transparent',
                }}>
                  {/* Icon */}
                  <div data-rm-icon style={{
                    width: 28, height: 28, borderRadius: 6,
                    background: `${t.tone}18`,
                    color: t.tone,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 13,
                  }}>{t.icon}</div>

                  {/* Name + desc */}
                  <div data-rm-name style={{ minWidth: 0 }}>
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 2, flexWrap: 'wrap' }}>
                      <span style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 500, color: C.ink }}>{t.name}</span>
                      <span style={{
                        fontFamily: 'ui-monospace, monospace', fontSize: 9, letterSpacing: '0.08em',
                        color: t.tone, textTransform: 'uppercase',
                      }}>{t.cat}</span>
                      {t.shipping && (
                        <span style={{
                          padding: '1px 6px', borderRadius: 999,
                          background: C.terracotta, color: C.cream,
                          fontFamily: 'ui-monospace, monospace', fontSize: 9, letterSpacing: '0.06em',
                        }}>SHIPPING</span>
                      )}
                    </div>
                    <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, color: C.inkSoft }}>{t.desc}</div>
                  </div>

                  {/* ETA badge */}
                  <div data-rm-eta style={{
                    minWidth: 92, textAlign: 'center',
                    padding: '6px 10px',
                    borderRadius: 999,
                    background: t.shipping ? C.terracotta : 'transparent',
                    color: t.shipping ? C.cream : C.inkSoft,
                    border: t.shipping ? `1px solid ${C.terracotta}` : `1px dashed ${C.line}`,
                    fontFamily: 'ui-monospace, monospace', fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase',
                  }}>{t.eta}</div>

                  {/* Arrow */}
                  <span data-rm-arrow style={{ color: C.inkMute, fontSize: 14, textAlign: 'right' }}>→</span>
                </div>
              ))}
            </div>

            {/* Footer bar */}
            <div style={{
              padding: '14px 32px',
              borderTop: `1px solid ${C.lineSoft}`,
              background: C.cream,
              display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 14, fontFamily: 'Inter, sans-serif', fontSize: 12, color: C.inkSoft, flexWrap: 'wrap' }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                  <span style={{ width: 6, height: 6, borderRadius: '50%', background: C.terracotta }} /> One new feature every week
                </span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                  <span style={{ width: 6, height: 6, borderRadius: '50%', background: C.navy }} /> All in active development
                </span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                  <span style={{ width: 6, height: 6, borderRadius: '50%', background: C.inkSoft }} /> Vote on what's next
                </span>
              </div>
              <Btn variant="primary" size="sm">Get on the pilot list →</Btn>
            </div>
          </Glass>

          <Glass strong style={{ padding: 36 }}>
            <div data-2col style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 40, alignItems: 'start' }}>
              <div>
                <Eyebrow color={C.navy}>Security</Eyebrow>
                <H size={36} data-h-md style={{ marginBottom: 16 }}>Enterprise by default.</H>
                <P>Calls travel over end-to-end encrypted transport. We're built for GDPR compliance — DPA available on request. Healthcare deployments are HIPAA-ready (BAAs available).</P>
              </div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
                {/* GDPR row */}
                <div style={{
                  display: 'grid', gridTemplateColumns: '72px 1fr',
                  gap: 18, alignItems: 'center',
                  padding: '6px 0',
                }}>
                  {/* GDPR mark */}
                  <img
                    src="https://ackcent.com/wp-content/uploads/2018/02/GDPR-scaled.jpg"
                    alt="GDPR"
                    style={{
                      width: 72, height: 56, objectFit: 'contain',
                      display: 'block',
                      mixBlendMode: 'multiply',
                    }}
                  />
                  <div>
                    <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 500, color: C.ink, lineHeight: 1.45 }}>
                      Designed for GDPR compliance.
                    </div>
                    <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, color: C.inkSoft, marginTop: 3, lineHeight: 1.45 }}>
                      DPA and EU data residency available.
                    </div>
                  </div>
                </div>

                {/* HIPAA row */}
                <div style={{
                  display: 'grid', gridTemplateColumns: '72px 1fr',
                  gap: 18, alignItems: 'center',
                  padding: '6px 0',
                }}>
                  {/* HIPAA mark */}
                  <img
                    src="https://www.paubox.com/hubfs/Imported_Blog_Media/HIPAA_logo-2.png"
                    alt="HIPAA"
                    style={{
                      width: 72, height: 56, objectFit: 'contain',
                      display: 'block',
                      mixBlendMode: 'multiply',
                    }}
                  />
                  <div>
                    <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 500, color: C.ink, lineHeight: 1.45 }}>
                      HIPAA-ready architecture.
                    </div>
                    <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, color: C.inkSoft, marginTop: 3, lineHeight: 1.45 }}>
                      BAAs available for qualified healthcare deployments.
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </Glass>
        </div>
      </section>

      {/* PRICING — early access, no fictional tiers */}
      <section id="pricing" style={{ padding: '96px 48px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none', opacity: 0.75 }}>
          <FlickeringWaveGrid />
        </div>
        <div style={{
          position: 'absolute', inset: 0, pointerEvents: 'none',
          background: `linear-gradient(180deg, ${C.cream} 0%, rgba(250,246,237,0.25) 22%, rgba(250,246,237,0.25) 78%, ${C.cream} 100%)`,
        }} />
        <div style={{ position: 'relative', maxWidth: 1100, margin: '0 auto' }}>
          <div style={{ textAlign: 'center', marginBottom: 48 }}>
            <Eyebrow>Pricing</Eyebrow>
            <H size={56} data-h-lg>Early access. <span style={{ fontStyle: 'italic' }}>Talk to us.</span></H>
            <P style={{ fontSize: 16, maxWidth: 560, margin: '20px auto 0' }}>
              Inclamo is in private beta. We're scoping each store individually so the agent fits your catalog and policies before it goes on the line.
            </P>
          </div>
          <Glass strong data-pricing style={{ padding: 0, overflow: 'hidden', display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)' }}>
            {[
              {
                name: 'Pilot',
                price: 'No-cost pilot',
                vol: 'Limited stores · scoped per use case',
                bullets: ['Your number, your voice', 'Knowledge base auto-sync from Shopify', 'Call summaries + callback queue', 'Email & SMS notifications'],
                cta: 'Apply for pilot',
                featured: true,
              },
              {
                name: 'Production',
                price: 'Custom',
                vol: 'Per-minute pricing once shipped',
                bullets: ['Everything in pilot', 'Roadmap features as they ship', 'Direct line to the team', 'GDPR DPA on request'],
                cta: 'Talk to us',
              },
            ].map((p, i) => (
              <div key={p.name} style={{
                padding: 36,
                borderRight: i === 0 ? `1px solid ${C.lineSoft}` : 'none',
                background: p.featured ? 'rgba(232,93,58,0.06)' : 'transparent',
                display: 'flex', flexDirection: 'column', gap: 8,
              }}>
                <div style={{ fontFamily: 'ui-monospace, monospace', fontSize: 11, letterSpacing: '0.14em', color: p.featured ? C.terracotta : C.inkMute, textTransform: 'uppercase' }}>{p.name}</div>
                <div style={{ fontFamily: '"Instrument Serif", serif', fontSize: 36, color: C.ink, lineHeight: 1.1 }}>{p.price}</div>
                <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 13, color: C.inkMute, marginBottom: 8 }}>{p.vol}</div>
                <ul style={{ listStyle: 'none', padding: 0, margin: '4px 0 16px', display: 'flex', flexDirection: 'column', gap: 6 }}>
                  {p.bullets.map((b) => (
                    <li key={b} style={{ display: 'flex', alignItems: 'flex-start', gap: 8, fontFamily: 'Inter, sans-serif', fontSize: 13.5, color: C.inkSoft }}>
                      <span style={{ color: C.terracotta, marginTop: 2 }}>✓</span> {b}
                    </li>
                  ))}
                </ul>
                <div style={{ marginTop: 'auto' }}>
                  <Btn variant={p.featured ? 'accent' : 'ghost'} size="md" style={{ width: '100%' }}>{p.cta}</Btn>
                </div>
              </div>
            ))}
          </Glass>
        </div>
      </section>

      {/* FAQ — real Q&A, expandable */}
      <section id="faq" style={{ padding: '80px 48px', background: C.creamLight, borderTop: `1px solid ${C.lineSoft}`, borderBottom: `1px solid ${C.lineSoft}` }}>
        <div style={{ maxWidth: 820, margin: '0 auto' }}>
          <div style={{ marginBottom: 32 }}>
            <Eyebrow>FAQ</Eyebrow>
            <H size={48} data-h-lg>Questions.</H>
          </div>
          {[
            {
              q: 'Which stores does Inclamo work with today?',
              a: 'Shopify only — Inclamo is a Shopify-native app and pulls products, pages, policies, and FAQs straight from your store. BigCommerce, Wix, WooCommerce and PrestaShop are on the roadmap.',
            },
            {
              q: 'Do I have to write prompts?',
              a: 'No. The brand voice and rules are short, plain-English instructions you write once (e.g., "never invent prices, hand off complaints, mention free shipping over $50"). The knowledge base is auto-synced from your Shopify store and refreshes within ~60 seconds of a change.',
            },
            {
              q: 'What happens when the agent can\'t answer?',
              a: 'It offers the caller a callback. Their number, the reason, and a conversation summary land in your Callbacks queue with status (New / Contacted / Resolved). You also get an email or SMS notification.',
            },
            {
              q: 'Can I bring my own phone number?',
              a: 'Today we provision the number for you so you can dial it and test end-to-end. Bring-your-own-number routing is on the roadmap.',
            },
            {
              q: 'How is data handled?',
              a: 'Calls run over encrypted transport. We\'re designed for GDPR compliance — DPA available on request. Healthcare deployments are HIPAA-ready (BAAs available).',
            },
            {
              q: 'How do I get access?',
              a: 'Tell us about your store and we\'ll scope a pilot. Use the Talk to us form on this page or reach us on LinkedIn.',
            },
          ].map((item, i) => (
            <details key={item.q} style={{
              padding: '20px 0',
              borderBottom: `1px solid ${C.lineSoft}`,
              cursor: 'pointer',
            }}>
              <summary style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                fontFamily: 'Inter, sans-serif', fontSize: 17, color: C.ink,
                listStyle: 'none', cursor: 'pointer',
              }}>
                {item.q}<span style={{ color: C.inkMute, fontSize: 20, marginLeft: 12 }}>+</span>
              </summary>
              <div style={{
                marginTop: 12,
                fontFamily: 'Inter, sans-serif', fontSize: 15, color: C.inkSoft, lineHeight: 1.6,
              }}>{item.a}</div>
            </details>
          ))}
          <style>{`
            details[open] summary span { transform: rotate(45deg); display: inline-block; transition: transform 0.15s; }
            summary::-webkit-details-marker { display: none; }
          `}</style>
        </div>
      </section>

      {/* FINAL CTA — no fictional offers */}
      <section style={{ padding: '120px 48px', textAlign: 'center', position: 'relative', overflow: 'hidden' }}>
        <Blob size={800} color={C.terracotta} opacity={0.18} style={{ top: '-20%', left: '20%' }} />
        <Blob size={600} color={C.navy} opacity={0.14} style={{ bottom: '-20%', right: '15%' }} />
        <div style={{ position: 'relative', maxWidth: 720, margin: '0 auto' }}>
          <H size={84} data-h-xl style={{ marginBottom: 24 }}>Every call. <span style={{ fontStyle: 'italic' }}>Handled.</span></H>
          <P style={{ fontSize: 18, maxWidth: 520, margin: '0 auto 36px' }}>
            Tell us about your store and we'll scope a pilot. One business day to first reply.
          </P>
          <div data-final-cta style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <Btn variant="primary" size="lg">Talk to us</Btn>
            <Btn variant="ghost" size="lg" href="https://www.linkedin.com/in/roman-poliashenko/" target="_blank" rel="noopener noreferrer">LinkedIn</Btn>
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
};

window.VariationB = VariationB;