// Sefra - product-led sections (browser agent for legacy software)
// VideoShowcase · TriggerRail · LegacyAgentMock · UseCases · PricingTrial
// ────────────────────────────────────────────────────────────────

// ─── Legacy agent mock - Sefra operating an old terminal (industry-aware) ──
const DEFAULT_MOCK = {
  running: 'RiskMaster 7.2 (legacy)',
  winTitle: 'RiskMaster 7.2 - Claim Entry',
  menus: ['File', 'Edit', 'Claim', 'Payments'],
  fields: [
    ['Claim No.', 'WC-2026-04812', true],
    ['Claimant', 'VELASQUEZ, MARIA', false],
    ['Provider', 'BAY AREA ORTHO', false],
    ['Proc Code', '99214', true],
    ['Amount', '$248.00', true],
  ],
  steps: [
    { t: '00:00', a: 'Trigger received', d: 'Email - "Pay PT invoice, claim WC-04812"', kind: 'trigger' },
    { t: '00:02', a: 'Signed in to RiskMaster', d: 'Legacy claims portal · session opened', kind: 'act' },
    { t: '00:06', a: 'Opened claim WC-04812', d: 'Velasquez, Maria · navigated 4 menus', kind: 'act' },
    { t: '00:11', a: 'Keyed payment', d: 'Bay Area Ortho · $248.00 · code 99214', kind: 'act' },
    { t: '00:15', a: 'Posted to loss fund', d: 'Authorization matched · saved', kind: 'act' },
    { t: '00:17', a: 'Replied in Slack', d: '#claims-ops - "Paid. Conf #PT-88213."', kind: 'done' },
  ],
};

function LegacyAgentMock({ compact = false, mock }) {
  const m = mock || DEFAULT_MOCK;
  const steps = m.steps;
  const [active, setActive] = React.useState(0);
  React.useEffect(() => {
    setActive(0);
    const id = setInterval(() => setActive((i) => (i + 1) % steps.length), 1700);
    return () => clearInterval(id);
  }, [steps]);

  const kindColor = (k) => k === 'trigger' ? BASEN.accent : k === 'done' ? BASEN.positive : BASEN.muted;

  return (
    <div style={{
      background: BASEN.paperRaised, border: `1px solid ${BASEN.rule}`, borderRadius: 8,
      overflow: 'hidden', boxShadow: '0 30px 60px -30px rgba(15,18,22,0.28)',
    }}>
      {/* window chrome */}
      <div style={{
        padding: '11px 16px', borderBottom: `1px solid ${BASEN.ruleSoft}`, background: BASEN.paper,
        display: 'flex', alignItems: 'center', gap: 12,
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
          <BirdMark size={18} />
          <span style={{ fontFamily: FONTS.mono, fontSize: 11.5, color: BASEN.ink, fontWeight: 500, letterSpacing: 0.2 }}>Sefra agent</span>
        </div>
        <span style={{ width: 1, height: 12, background: BASEN.rule }}></span>
        <span style={{ fontFamily: FONTS.mono, fontSize: 11, color: BASEN.muted, letterSpacing: 0.3 }}>running · {m.running}</span>
        <span style={{
          marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', gap: 6,
          fontFamily: FONTS.mono, fontSize: 10, color: BASEN.positive, letterSpacing: 0.6, textTransform: 'uppercase',
        }}>
          <span style={{ width: 7, height: 7, background: BASEN.positive }}></span>live
        </span>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: compact ? '1fr' : '1.15fr 1fr' }}>
        {/* fake legacy UI */}
        <div style={{
          background: '#C3CBD3', padding: 14, borderRight: compact ? 'none' : `1px solid ${BASEN.rule}`,
          borderBottom: compact ? `1px solid ${BASEN.rule}` : 'none',
          fontFamily: '"Times New Roman", Georgia, serif',
        }}>
          {/* title bar */}
          <div style={{
            background: 'linear-gradient(#1e40af,#152c7a)', color: '#fff', padding: '4px 8px',
            fontFamily: 'Tahoma, Geneva, sans-serif', fontSize: 11, fontWeight: 700, letterSpacing: 0.2,
            display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          }}>
            <span>{m.winTitle}</span>
            <span style={{ fontWeight: 400 }}>▣ ✕</span>
          </div>
          {/* menu strip */}
          <div style={{
            background: '#E6E6E6', borderLeft: '1px solid #fff', borderTop: '1px solid #fff',
            padding: '3px 8px', fontFamily: 'Tahoma, sans-serif', fontSize: 10.5, color: '#222',
            display: 'flex', gap: 14,
          }}>
            {m.menus.map((mi, i) => (
              <span key={i}><span style={{ textDecoration: 'underline' }}>{mi[0]}</span>{mi.slice(1)}</span>
            ))}
          </div>
          {/* form body */}
          <div style={{ background: '#D4D0C8', border: '2px solid #fff', borderRightColor: '#808080', borderBottomColor: '#808080', padding: 12, marginTop: 6 }}>
            {m.fields.map(([label, val, hot], i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 7 }}>
                <span style={{ width: 78, fontSize: 11, color: '#000', textAlign: 'right', fontFamily: 'Tahoma, sans-serif' }}>{label}:</span>
                <span style={{
                  flex: 1, background: '#fff', border: '2px inset #b0b0b0', padding: '2px 6px',
                  fontSize: 11.5, color: '#000', fontFamily: '"Courier New", monospace',
                  outline: hot ? `2px solid ${BASEN.accent}` : 'none',
                  boxShadow: hot ? `0 0 0 3px ${BASEN.accent}33` : 'none',
                }}>{val}</span>
              </div>
            ))}
            <div style={{ display: 'flex', gap: 8, marginTop: 12, justifyContent: 'flex-end' }}>
              <span style={{ background: '#D4D0C8', border: '2px outset #fff', padding: '3px 14px', fontSize: 11, fontFamily: 'Tahoma, sans-serif' }}>Cancel</span>
              <span style={{
                background: BASEN.accent, color: '#fff', border: '2px outset', borderColor: '#6f8dff #0e2fbc #0e2fbc #6f8dff',
                padding: '3px 14px', fontSize: 11, fontFamily: 'Tahoma, sans-serif', fontWeight: 700,
              }}>Post ▸</span>
            </div>
          </div>
          <div style={{ fontFamily: 'Tahoma, sans-serif', fontSize: 9.5, color: '#3a3a3a', marginTop: 8 }}>
            Sefra drives this screen exactly like a person - nothing to install.
          </div>
        </div>

        {/* agent action log */}
        <div style={{ padding: compact ? 14 : 16, background: BASEN.paperRaised, display: 'flex', flexDirection: 'column' }}>
          <div style={{ fontFamily: FONTS.mono, fontSize: 10, color: BASEN.muted, letterSpacing: 0.9, textTransform: 'uppercase', marginBottom: 12 }}>Agent run · live log</div>
          <div style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
            {steps.map((s, i) => {
              const on = i === active, done = i < active;
              return (
                <div key={i} style={{
                  display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 10, alignItems: 'flex-start',
                  padding: '7px 8px', borderRadius: 4,
                  background: on ? BASEN.accentBg : 'transparent',
                  opacity: done ? 0.55 : 1, transition: 'background 200ms ease, opacity 200ms ease',
                }}>
                  <span style={{
                    width: 9, height: 9, marginTop: 4, flexShrink: 0,
                    background: on || done ? kindColor(s.kind) : BASEN.rule,
                    borderRadius: s.kind === 'trigger' ? 0 : '50%',
                  }}></span>
                  <div style={{ minWidth: 0, position: 'relative' }}>
                    <span style={{ position: 'absolute', top: 0, right: 0, fontFamily: FONTS.mono, fontSize: 9.5, color: BASEN.muted }}>{s.t}</span>
                    <div style={{ fontFamily: FONTS.sans, fontSize: 12.5, color: BASEN.ink, fontWeight: 500, letterSpacing: -0.1, lineHeight: 1.3, paddingRight: 36 }}>{s.a}</div>
                    <div style={{ fontFamily: FONTS.sans, fontSize: 11.5, color: BASEN.muted, lineHeight: 1.4, letterSpacing: -0.1, marginTop: 3 }}>{s.d}</div>
                  </div>
                </div>
              );
            })}
          </div>
          <div style={{
            marginTop: 12, paddingTop: 12, borderTop: `1px solid ${BASEN.ruleSoft}`,
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            fontFamily: FONTS.mono, fontSize: 10, color: BASEN.muted, letterSpacing: 0.4,
          }}>
            <span>17s end-to-end</span>
            <span style={{ color: BASEN.positive }}>✓ no human touch</span>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── Video showcase ──────────────────────────────────────────
function VideoShowcase({ industry }) {
  const ind = industry || (window.getIndustry && window.getIndustry()) || {};
  const noun = ind.videoNoun || 'legacy system';
  const { isMobile } = useViewport();
  const [playing, setPlaying] = React.useState(false);
  const cfg = (typeof window !== 'undefined' && window.SEFRA_META) || {};
  const url = cfg.videoUrl;

  const onPlay = () => {
    if (window.sefraTrackVideo) window.sefraTrackVideo();
    if (url) setPlaying(true);
  };

  return (
    <div id="watch" style={{ background: BASEN.ink, color: BASEN.paper, padding: `${isMobile ? 56 : 104}px ${isMobile ? 20 : 48}px` }}>
      <div style={{ maxWidth: 1080, margin: '0 auto', textAlign: 'center' }}>
        <Eyebrow accent style={{ marginBottom: 18, justifyContent: 'center' }}>Watch it work</Eyebrow>
        <h2 style={{
          fontFamily: FONTS.display, fontWeight: 500, fontSize: isMobile ? 32 : 48, lineHeight: 1.03,
          letterSpacing: isMobile ? -1.2 : -1.8, color: BASEN.paper, margin: '0 auto', textWrap: 'balance', maxWidth: 820,
        }}>
          See the agent log in, click through, and finish the job.
        </h2>
        <p style={{
          fontFamily: FONTS.sans, fontSize: isMobile ? 15.5 : 17, lineHeight: 1.55, color: BASEN.mutedDark,
          margin: '20px auto 40px', maxWidth: 600, letterSpacing: -0.15,
        }}>
          A quick run on a real {noun} - kicked off by a simple email,
          with nothing to install. Watch Sefra do the whole task.
        </p>

        <div style={{
          position: 'relative', borderRadius: 10, overflow: 'hidden',
          border: `1px solid ${BASEN.ruleDark}`, aspectRatio: '16 / 9',
          background: '#080a0d',
        }}>
          {playing && url ? (
            <iframe
              src={url + (url.indexOf('?') === -1 ? '?' : '&') + 'autoplay=1&t=0'}
              title="Sefra product demo"
              allow="autoplay; fullscreen; picture-in-picture"
              allowFullScreen
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 'none' }}
            ></iframe>
          ) : (
            <button onClick={onPlay} style={{
              position: 'absolute', inset: 0, width: '100%', height: '100%', cursor: 'pointer',
              border: 'none', background: 'transparent', color: BASEN.paper,
              display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 20,
            }}>
              {/* faint agent-grid backdrop */}
              <div style={{
                position: 'absolute', inset: 0, opacity: 0.5,
                backgroundImage: `radial-gradient(circle at 50% 45%, rgba(21,71,245,0.22), transparent 60%),
                  linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
                  linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px)`,
                backgroundSize: '100% 100%, 44px 44px, 44px 44px',
              }}></div>
              <span style={{
                position: 'relative', width: 78, height: 78, borderRadius: '50%', background: BASEN.accent,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                boxShadow: '0 0 0 12px rgba(21,71,245,0.18)',
              }}>
                <span style={{ marginLeft: 6, borderStyle: 'solid', borderWidth: '13px 0 13px 22px', borderColor: 'transparent transparent transparent #fff' }}></span>
              </span>
              <span style={{ position: 'relative', fontFamily: FONTS.mono, fontSize: 12, letterSpacing: 1.4, textTransform: 'uppercase', color: BASEN.paper }}>
                {url ? 'Play the demo' : 'Demo video coming soon'}
              </span>
            </button>
          )}
        </div>
        {!url && (
          <div style={{ fontFamily: FONTS.mono, fontSize: 10.5, color: BASEN.mutedDark, letterSpacing: 0.5, marginTop: 16, textTransform: 'uppercase' }}>
            Set window.SEFRA_META.videoUrl to your embed link
          </div>
        )}
      </div>
    </div>
  );
}

// ─── Trigger rail - email / slack / schedule / other tools ───
const TRIGGERS = [
  { k: 'Email', glyph: '✉', d: 'Forward a request. Sefra reads it and runs the task.', ex: 'pay this invoice →' },
  { k: 'Slack', glyph: '#', d: 'Mention the agent in a channel or DM. It replies when done.', ex: '/sefra close claim →' },
  { k: 'Schedule', glyph: '◷', d: 'For the work that has to run every day at the same time.', ex: 'nightly status sync →' },
  { k: 'Other tools', glyph: '⇄', d: 'Kick it off from the other tools your team already uses.', ex: 'when a record changes →' },
];

function TriggerRail() {
  const { isMobile, isTablet } = useViewport();
  const cols = isMobile ? 1 : isTablet ? 2 : 4;
  return (
    <div style={{ padding: `${isMobile ? 56 : 96}px ${isMobile ? 20 : 48}px`, maxWidth: 1320, margin: '0 auto' }}>
      <div style={{ marginBottom: isMobile ? 36 : 56, maxWidth: 720 }}>
        <Eyebrow accent style={{ marginBottom: 18 }}>Starts where work already happens</Eyebrow>
        <h2 style={{
          fontFamily: FONTS.display, fontWeight: 500, fontSize: isMobile ? 30 : 44, lineHeight: 1.03,
          letterSpacing: isMobile ? -1 : -1.6, color: BASEN.ink, margin: 0, textWrap: 'balance',
        }}>
          No new dashboard to babysit. Trigger it from your inbox.
        </h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: 16 }}>
        {TRIGGERS.map((t) => (
          <div key={t.k} style={{
            background: BASEN.paperRaised, border: `1px solid ${BASEN.rule}`, borderRadius: 8,
            padding: '24px 22px', display: 'flex', flexDirection: 'column', gap: 12, minHeight: 180,
          }}>
            <span style={{
              width: 40, height: 40, borderRadius: 8, background: BASEN.accentBg, color: BASEN.accent,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: FONTS.mono, fontSize: 18, fontWeight: 500,
            }}>{t.glyph}</span>
            <div style={{ fontFamily: FONTS.display, fontSize: 18, fontWeight: 500, color: BASEN.ink, letterSpacing: -0.3 }}>{t.k}</div>
            <div style={{ fontFamily: FONTS.sans, fontSize: 14, lineHeight: 1.5, color: BASEN.muted, letterSpacing: -0.1, flex: 1 }}>{t.d}</div>
            <div style={{ fontFamily: FONTS.mono, fontSize: 11, color: BASEN.accent, letterSpacing: 0.2, background: BASEN.accentBg, padding: '6px 10px', borderRadius: 5, alignSelf: 'flex-start' }}>{t.ex}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─── Use cases - industry-aware ('beyond' grid adapts) ───────────
function UseCases({ industry }) {
  const ind = industry || (window.getIndustry && window.getIndustry()) || {};
  const primary = ind.usePrimary || [];
  const beyond = (window.beyondFor && window.beyondFor(ind.key)) || [];
  const { isMobile, isTablet } = useViewport();
  const stack = isMobile || isTablet;
  return (
    <div id="use-cases" style={{ background: BASEN.paperRaised, borderTop: `1px solid ${BASEN.rule}`, borderBottom: `1px solid ${BASEN.rule}` }}>
      <div style={{ padding: `${isMobile ? 56 : 96}px ${isMobile ? 20 : 48}px`, maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: stack ? '1fr' : '0.9fr 1.1fr', gap: stack ? 40 : 64 }}>
          {/* primary */}
          <div>
            <Eyebrow accent style={{ marginBottom: 18 }}>{ind.useEyebrow || 'Built for legacy software first'}</Eyebrow>
            <h2 style={{
              fontFamily: FONTS.display, fontWeight: 500, fontSize: isMobile ? 30 : 40, lineHeight: 1.04,
              letterSpacing: isMobile ? -1 : -1.5, color: BASEN.ink, margin: '0 0 24px', textWrap: 'balance',
            }}>
              {ind.useHead || 'The systems your team fights every day.'}
            </h2>
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              {primary.map((u, i) => (
                <div key={i} style={{
                  display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 14, alignItems: 'flex-start',
                  padding: '16px 0', borderTop: `1px solid ${BASEN.ruleSoft}`,
                }}>
                  <span style={{ fontFamily: FONTS.mono, fontSize: 11, color: BASEN.accent, marginTop: 2, fontWeight: 500 }}>{String(i + 1).padStart(2, '0')}</span>
                  <span style={{ fontFamily: FONTS.sans, fontSize: 15.5, lineHeight: 1.5, color: BASEN.ink, letterSpacing: -0.1 }}>{u}</span>
                </div>
              ))}
            </div>
          </div>
          {/* beyond */}
          <div>
            <Eyebrow style={{ marginBottom: 18 }}>And anywhere there's old software</Eyebrow>
            <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 14 }}>
              {beyond.map(([h, d]) => (
                <div key={h} style={{
                  background: BASEN.paper, border: `1px solid ${BASEN.rule}`, borderRadius: 8, padding: '22px 20px',
                }}>
                  <div style={{ fontFamily: FONTS.display, fontSize: 17, fontWeight: 500, color: BASEN.ink, letterSpacing: -0.3, marginBottom: 8 }}>{h}</div>
                  <div style={{ fontFamily: FONTS.sans, fontSize: 13.5, lineHeight: 1.5, color: BASEN.muted, letterSpacing: -0.1 }}>{d}</div>
                </div>
              ))}
            </div>
            <div style={{
              marginTop: 16, background: BASEN.ink, color: BASEN.paper, borderRadius: 8, padding: '20px 22px',
              fontFamily: FONTS.sans, fontSize: 14.5, lineHeight: 1.5, letterSpacing: -0.1,
            }}>
              <span style={{ color: BASEN.mutedDark }}>The rule of thumb:</span> if a person can do it in a browser,
              Sefra can run it on a trigger - even on the oldest software with no modern way in.
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── Pricing - four tiers ────────────────────────────────────
function PricingTrial() {
  const { isMobile, isTablet } = useViewport();
  const cols = isMobile ? 1 : isTablet ? 2 : 4;
  const startTrial = (src) => { if (window.sefraStartTrial) window.sefraStartTrial(src); };
  const scope = (src) => { if (window.sefraOpenCalendly) window.sefraOpenCalendly(src); };
  const [waitlist, setWaitlist] = React.useState(null); // plan name or null
  const openWaitlist = (planName) => {
    if (window.sefraTrack) { const m = window.SEFRA_META || {}; window.sefraTrack('Lead', { content_name: 'Waitlist - ' + planName, value: 5, currency: m.currency || 'USD' }); }
    setWaitlist(planName);
  };
  const tiers = [
    {
      name: 'Free', price: '$0', unit: '', tagline: 'Kick the tires on one system.',
      feats: ['50 runs / mo', '3 agents', '5 triggers', '1 concurrent browser', 'All frontier models'],
      cta: 'Start for free', status: 'live', highlight: false, action: () => startTrial('pricing-free'),
    },
    {
      name: 'Starter', price: '$29', unit: '/ mo', tagline: 'For the solo adjuster.',
      feats: ['500 runs / mo', '10 agents', '25 triggers', '2 concurrent browsers', 'All frontier models'],
      cta: 'Start for free', status: 'live', highlight: false, action: () => startTrial('pricing-starter'),
    },
    {
      name: 'Pro', price: '$149', unit: '/ mo', tagline: 'For a small TPA team.',
      feats: ['5,000 runs / mo', 'Unlimited agents', 'Unlimited triggers', '5 concurrent browsers', 'All frontier models'],
      cta: 'Start for free', status: 'live', highlight: true, badge: 'Most popular', action: () => startTrial('pricing-pro'),
    },
    {
      name: 'Enterprise', price: 'Custom', unit: '', tagline: 'For scale and compliance.',
      feats: ['Custom run volume', 'Unlimited agents & triggers', 'Custom concurrency', 'All + custom routing', 'SSO · SLA · audit log · on-prem'],
      cta: "Let's scope it", status: 'live', highlight: false, action: () => scope('pricing-enterprise'),
    },
  ];
  return (
    <div id="pricing" style={{ padding: `${isMobile ? 56 : 104}px ${isMobile ? 20 : 48}px`, maxWidth: 1320, margin: '0 auto' }}>
      <div style={{ textAlign: 'center', marginBottom: isMobile ? 40 : 64 }}>
        <Eyebrow accent style={{ marginBottom: 18, justifyContent: 'center' }}>Pricing</Eyebrow>
        <h2 style={{
          fontFamily: FONTS.display, fontWeight: 500, fontSize: isMobile ? 32 : 48, lineHeight: 1.03,
          letterSpacing: isMobile ? -1.2 : -1.8, color: BASEN.ink, margin: '0 auto', textWrap: 'balance', maxWidth: 720,
        }}>
          Start free. Scale by runs, not seats.
        </h2>
        <p style={{ fontFamily: FONTS.sans, fontSize: isMobile ? 15.5 : 17, lineHeight: 1.55, color: BASEN.muted, margin: '18px auto 0', maxWidth: 560, letterSpacing: -0.15 }}>
          Every plan runs on frontier models. No setup project, no rip-and-replace -
          connect a system, fire a trigger, and see it work first.
        </p>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: 16, alignItems: 'stretch' }}>
        {tiers.map((t) => (
          <div key={t.name} style={{
            background: t.highlight ? BASEN.ink : BASEN.paperRaised,
            color: t.highlight ? BASEN.paper : BASEN.ink,
            border: `1px solid ${t.highlight ? BASEN.ink : BASEN.rule}`, borderRadius: 12,
            padding: isMobile ? '26px 22px' : '30px 26px', display: 'flex', flexDirection: 'column', gap: 18,
            position: 'relative',
          }}>
            {t.badge && (
              <span style={{
                position: 'absolute', top: 18, right: 18,
                fontFamily: FONTS.mono, fontSize: 9.5, letterSpacing: 0.8, textTransform: 'uppercase',
                color: t.status === 'live' ? '#fff' : BASEN.muted,
                background: t.status === 'live' ? BASEN.accent : (t.highlight ? 'rgba(244,244,241,0.12)' : BASEN.paperDeep),
                padding: '3px 9px', borderRadius: 999, fontWeight: 500,
              }}>{t.badge}</span>
            )}
            <div style={{ opacity: t.status === 'soon' ? 0.62 : 1 }}>
              <div style={{ fontFamily: FONTS.mono, fontSize: 11, letterSpacing: 1.2, textTransform: 'uppercase', color: t.highlight ? BASEN.accent : BASEN.muted, marginBottom: 14 }}>{t.name}</div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6 }}>
                <span style={{ fontFamily: FONTS.display, fontSize: isMobile ? 34 : 38, fontWeight: 500, letterSpacing: -1.4 }}>{t.price}</span>
                {t.unit && <span style={{ fontFamily: FONTS.sans, fontSize: 14, color: t.highlight ? BASEN.mutedDark : BASEN.muted, letterSpacing: -0.1 }}>{t.unit}</span>}
              </div>
              <div style={{ fontFamily: FONTS.sans, fontSize: 14, lineHeight: 1.45, color: t.highlight ? BASEN.mutedDark : BASEN.muted, marginTop: 10, letterSpacing: -0.1 }}>{t.tagline}</div>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, flex: 1, opacity: t.status === 'soon' ? 0.62 : 1 }}>
              {t.feats.map((f) => (
                <div key={f} style={{ display: 'flex', alignItems: 'flex-start', gap: 9 }}>
                  <span style={{ color: BASEN.accent, fontFamily: FONTS.mono, fontSize: 12.5, marginTop: 1 }}>✓</span>
                  <span style={{ fontFamily: FONTS.sans, fontSize: 13.5, lineHeight: 1.4, color: t.highlight ? BASEN.paper : BASEN.ink, letterSpacing: -0.1 }}>{f}</span>
                </div>
              ))}
            </div>
            <button onClick={t.action} style={{
              fontFamily: FONTS.sans, fontWeight: 500, fontSize: 14.5, letterSpacing: -0.1,
              padding: '13px 20px', borderRadius: 6, cursor: 'pointer', border: 'none',
              background: t.highlight ? BASEN.accent : 'transparent',
              color: t.highlight ? '#fff' : BASEN.ink,
              boxShadow: t.highlight ? 'none' : `inset 0 0 0 1px ${BASEN.ink}`,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
            }}>
              {t.cta}<span style={{ fontWeight: 400 }}>→</span>
            </button>
          </div>
        ))}
      </div>
      <div style={{ textAlign: 'center', fontFamily: FONTS.mono, fontSize: 10.5, color: BASEN.muted, letterSpacing: 0.5, marginTop: 22, textTransform: 'uppercase' }}>
        Start free · No credit card · Scale anytime
      </div>
      {waitlist && <WaitlistModal plan={waitlist} onClose={() => setWaitlist(null)} isMobile={isMobile} />}
    </div>
  );
}

// ─── Waitlist modal (Formspree) ──────────────────────────────
function WaitlistModal({ plan, onClose, isMobile }) {
  const [state, setState] = React.useState({ name: '', email: '', sending: false, sent: false, error: '' });
  const ENDPOINT = 'https://formspree.io/f/xpqelzwp';

  const submit = async (e) => {
    e.preventDefault();
    if (state.sending) return;
    setState((s) => ({ ...s, sending: true, error: '' }));
    try {
      const res = await fetch(ENDPOINT, {
        method: 'POST',
        headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: state.name, email: state.email, plan: plan, _subject: 'Sefra waitlist - ' + plan + ' plan' }),
      });
      if (res.ok) setState((s) => ({ ...s, sent: true, sending: false }));
      else setState((s) => ({ ...s, sending: false, error: 'Something went wrong. Please try again.' }));
    } catch (err) {
      setState((s) => ({ ...s, sending: false, error: 'Network error - please try again or email hello@meetsefra.com.' }));
    }
  };

  const field = {
    fontFamily: FONTS.sans, fontSize: 15, color: BASEN.ink, background: BASEN.paper,
    border: `1px solid ${BASEN.rule}`, borderRadius: 6, padding: '13px 14px', outline: 'none',
    width: '100%', letterSpacing: -0.1,
  };

  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, zIndex: 1000, background: 'rgba(15,18,22,0.55)',
      backdropFilter: 'blur(3px)', display: 'flex', alignItems: 'center', justifyContent: 'center',
      padding: isMobile ? 20 : 40,
    }}>
      <div onClick={(e) => e.stopPropagation()} style={{
        background: BASEN.paperRaised, border: `1px solid ${BASEN.rule}`, borderRadius: 14,
        width: '100%', maxWidth: 440, padding: isMobile ? '28px 24px' : '36px 34px',
        boxShadow: '0 40px 80px -30px rgba(15,18,22,0.45)', position: 'relative',
      }}>
        <button onClick={onClose} aria-label="Close" style={{
          position: 'absolute', top: 16, right: 16, width: 30, height: 30, borderRadius: 8,
          border: 'none', background: 'transparent', color: BASEN.muted, cursor: 'pointer', fontSize: 20, lineHeight: 1,
        }}>×</button>

        {state.sent ? (
          <div style={{ textAlign: 'center', padding: '12px 0' }}>
            <div style={{ fontFamily: FONTS.display, fontSize: 24, fontWeight: 600, color: BASEN.ink, letterSpacing: -0.5, marginBottom: 8 }}>You're on the list.</div>
            <div style={{ fontFamily: FONTS.sans, fontSize: 15, color: BASEN.muted, lineHeight: 1.5 }}>
              We'll email you the moment the {plan} plan goes live.
            </div>
            <button onClick={onClose} style={{
              marginTop: 24, fontFamily: FONTS.sans, fontWeight: 500, fontSize: 14.5, letterSpacing: -0.1,
              padding: '12px 22px', borderRadius: 6, border: 'none', background: BASEN.accent, color: '#fff', cursor: 'pointer',
            }}>Done</button>
          </div>
        ) : (
          <React.Fragment>
            <div style={{ fontFamily: FONTS.mono, fontSize: 11, letterSpacing: 1.2, textTransform: 'uppercase', color: BASEN.accent, marginBottom: 12 }}>{plan} plan · Coming soon</div>
            <h3 style={{ fontFamily: FONTS.display, fontSize: 25, fontWeight: 500, letterSpacing: -0.8, color: BASEN.ink, margin: '0 0 8px' }}>Join the waitlist</h3>
            <p style={{ fontFamily: FONTS.sans, fontSize: 14.5, lineHeight: 1.5, color: BASEN.muted, margin: '0 0 22px', letterSpacing: -0.1 }}>
              Drop your name and work email and we'll reach out the moment paid plans go live.
            </p>
            <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              <input style={field} name="name" placeholder="Your name" value={state.name} onChange={(e) => setState({ ...state, name: e.target.value })} required />
              <input style={field} name="email" type="email" placeholder="Work email" value={state.email} onChange={(e) => setState({ ...state, email: e.target.value })} required />
              <button type="submit" disabled={state.sending} style={{
                fontFamily: FONTS.sans, fontWeight: 500, fontSize: 15, letterSpacing: -0.1, marginTop: 4,
                padding: '14px 22px', borderRadius: 6, border: 'none', background: BASEN.accent, color: '#fff',
                cursor: state.sending ? 'wait' : 'pointer', opacity: state.sending ? 0.7 : 1,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
              }}>
                {state.sending ? 'Joining…' : 'Join the waitlist'}{!state.sending && <span style={{ fontWeight: 400 }}>→</span>}
              </button>
              {state.error && <div style={{ fontFamily: FONTS.sans, fontSize: 13, color: BASEN.signal, letterSpacing: -0.1 }}>{state.error}</div>}
            </form>
          </React.Fragment>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { LegacyAgentMock, VideoShowcase, TriggerRail, UseCases, PricingTrial });