// Sefra landing - product-led flow (browser agent for legacy software)
// Hero → Video → Triggers → How it works → Use cases → Pricing/Trial → FAQ
// ────────────────────────────────────────────────────────────────

const PRODUCT_STEPS = [
  { n: '01', eyebrow: 'Connect', title: 'Point it at the system.', body: 'Give Sefra a login to the legacy app - the claims portal, the green-screen terminal, the vendor site with no modern way in. It runs in a real browser, so if a person can reach it, so can the agent.' },
  { n: '02', eyebrow: 'Trigger', title: 'Kick it off from anywhere.', body: 'An email, a Slack message, a nightly schedule, or a nudge from a tool you already use. No one has to log into a new dashboard to start the work.' },
  { n: '03', eyebrow: 'Operate', title: 'The agent does the task.', body: 'It navigates menus, keys in data, posts payments, files forms, pulls statuses - clicking through the screens the same way your team does, with every step logged.' },
  { n: '04', eyebrow: 'Hand off', title: 'It reports back and flags edge cases.', body: 'Sefra replies where the trigger came from with a confirmation, and routes anything ambiguous to a human instead of guessing. You stay in control of the judgment calls.' },
];

function PageSplit() {
  const { isMobile, isTablet } = useViewport();
  const industry = (window.getIndustry && window.getIndustry()) || {};
  React.useEffect(() => {
    if (industry.title) document.title = industry.title;
    if (typeof window !== 'undefined') window.SEFRA_INDUSTRY = industry.key;
  }, [industry.key]);
  const stack = isMobile || isTablet;
  const padX = isMobile ? 20 : 48;
  const sectionPadY = isMobile ? 56 : 96;
  const stepCols = isMobile ? 1 : isTablet ? 2 : 4;

  const goWatch = () => {
    if (window.sefraTrack) { const m = window.SEFRA_META || {}; window.sefraTrack('ViewContent', { content_name: 'Watch it work (hero)', value: typeof m.viewDemoValue === 'number' ? m.viewDemoValue : 1, currency: m.currency || 'USD' }); }
    const el = document.getElementById('watch');
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.pageYOffset - 12, behavior: 'smooth' });
    else window.location.hash = 'watch';
  };
  const startTrial = () => { if (window.sefraStartTrial) window.sefraStartTrial('hero'); };

  return (
    <div style={{ background: BASEN.paper, fontFamily: FONTS.sans, color: BASEN.ink, width: '100%', overflowX: 'hidden' }}>
      <TopNav />

      {/* HERO */}
      <div style={{ padding: `${isMobile ? 44 : 72}px ${padX}px ${isMobile ? 56 : 80}px`, maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: stack ? '1fr' : '0.95fr 1.05fr', gap: stack ? 44 : 56, alignItems: 'center' }}>
          <div>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 10, padding: '6px 12px 6px 6px',
              background: BASEN.paperRaised, border: `1px solid ${BASEN.rule}`, borderRadius: 999, marginBottom: 28, maxWidth: '100%',
            }}>
              <span style={{ fontFamily: FONTS.mono, fontSize: 9.5, padding: '3px 8px', borderRadius: 999, background: BASEN.accent, color: BASEN.accentInk, letterSpacing: 0.6, fontWeight: 500, flexShrink: 0, whiteSpace: 'nowrap' }}>NEW</span>
              <span style={{ fontFamily: FONTS.sans, fontSize: 12.5, color: BASEN.ink, letterSpacing: -0.1 }}>{industry.pill || 'A browser agent for software with no modern way in'}</span>
            </div>

            <h1 style={{
              fontFamily: FONTS.display, fontWeight: 500, fontSize: isMobile ? 39 : isTablet ? 52 : 62, lineHeight: 0.98,
              letterSpacing: isMobile ? -1.4 : -2.4, color: BASEN.ink, margin: 0, textWrap: 'balance',
            }}>
              {industry.headPre || 'Put your oldest software'} <span style={{ color: BASEN.accent }}>{industry.headAccent || 'on autopilot.'}</span>
            </h1>

            <p style={{ fontFamily: FONTS.sans, fontSize: isMobile ? 16 : 17.5, lineHeight: 1.55, color: BASEN.muted, margin: '26px 0 0', textWrap: 'pretty', letterSpacing: -0.15, maxWidth: 520 }}>
              {industry.sub || 'Sefra is a browser agent that operates clunky legacy systems like a person would.'}
            </p>

            <div style={{ marginTop: 34, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              <Btn label="Start for free" variant="accent" size="lg" arrow onClick={startTrial} />
              <Btn label="Watch it work" variant="ghost" size="lg" onClick={goWatch} />
            </div>

            <div style={{
              marginTop: 44, paddingTop: 26, borderTop: `1px solid ${BASEN.rule}`,
              display: 'flex', alignItems: 'center', gap: isMobile ? '10px 18px' : 24, flexWrap: 'wrap',
              fontFamily: FONTS.mono, fontSize: 10.5, letterSpacing: 1, textTransform: 'uppercase', color: BASEN.muted,
            }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7 }}><span style={{ width: 7, height: 7, background: BASEN.accent }}></span>No setup</span>
              <span>Nothing to install</span>
              <span>Runs on a trigger</span>
            </div>
          </div>

          {/* Live agent mock */}
          <div style={{ position: 'relative', marginBottom: stack ? 0 : 8 }}>
            <LegacyAgentMock compact={isMobile} mock={industry.mock} />
          </div>
        </div>
      </div>

      {/* VIDEO */}
      <VideoShowcase industry={industry} />

      {/* TRIGGERS */}
      <TriggerRail />

      {/* HOW IT WORKS */}
      <div id="how-it-works" style={{ background: BASEN.paperRaised, borderTop: `1px solid ${BASEN.rule}`, borderBottom: `1px solid ${BASEN.rule}` }}>
        <div style={{ padding: `${sectionPadY}px ${padX}px`, maxWidth: 1320, margin: '0 auto' }}>
          <div style={{ display: 'grid', gridTemplateColumns: stack ? '1fr' : '1fr 1fr', gap: stack ? 20 : 48, alignItems: 'flex-end', marginBottom: isMobile ? 40 : 64 }}>
            <div>
              <Eyebrow accent style={{ marginBottom: 18 }}>How it works</Eyebrow>
              <h2 style={{ fontFamily: FONTS.display, fontWeight: 500, fontSize: isMobile ? 34 : 48, lineHeight: 1.02, letterSpacing: isMobile ? -1.2 : -1.8, color: BASEN.ink, margin: 0, textWrap: 'balance' }}>
                Connect. Trigger.<br />Operate. Hand off.
              </h2>
            </div>
            <div style={{ fontFamily: FONTS.sans, fontSize: 16, lineHeight: 1.6, color: BASEN.muted, letterSpacing: -0.1, justifySelf: stack ? 'start' : 'end', maxWidth: 460 }}>
              No setup, no IT project, no months of waiting. Point the agent at a system and it
              works it like one of your own people.
            </div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: `repeat(${stepCols}, 1fr)`, gap: stepCols === 4 ? 0 : 1, background: stepCols === 4 ? 'transparent' : BASEN.rule }}>
            {PRODUCT_STEPS.map((s, i) => (
              <div key={s.n} style={{
                padding: isMobile ? '28px 24px 30px' : '32px 28px 36px',
                borderTop: `2px solid ${BASEN.ink}`,
                borderRight: stepCols === 4 && i < PRODUCT_STEPS.length - 1 ? `1px solid ${BASEN.rule}` : 'none',
                background: i === 2 ? BASEN.accentBg : BASEN.paperRaised, position: 'relative',
              }}>
                <div style={{ position: 'absolute', top: -2, left: 0, width: 64, height: 2, background: BASEN.accent }}></div>
                <div style={{ fontFamily: FONTS.mono, fontSize: 12, color: BASEN.accent, fontWeight: 500, letterSpacing: 1, marginBottom: 24 }}>{s.n}</div>
                <div style={{ fontFamily: FONTS.mono, fontSize: 10.5, color: BASEN.muted, letterSpacing: 1, textTransform: 'uppercase', marginBottom: 12 }}>{s.eyebrow}</div>
                <h3 style={{ fontFamily: FONTS.display, fontSize: 22, fontWeight: 500, lineHeight: 1.18, letterSpacing: -0.6, color: BASEN.ink, margin: '0 0 14px', textWrap: 'balance' }}>{s.title}</h3>
                <p style={{ fontFamily: FONTS.sans, fontSize: 14, lineHeight: 1.6, color: BASEN.muted, margin: 0, letterSpacing: -0.1 }}>{s.body}</p>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* USE CASES */}
      <UseCases industry={industry} />

      {/* PRICING / TRIAL */}
      <PricingTrial />

      {/* FAQ */}
      <div id="faq" style={{ background: BASEN.paperRaised, borderTop: `1px solid ${BASEN.rule}` }}>
        <div style={{ padding: `${isMobile ? 56 : 96}px ${padX}px`, maxWidth: 1320, margin: '0 auto' }}>
          <div style={{ display: 'grid', gridTemplateColumns: stack ? '1fr' : '400px 1fr', gap: stack ? 32 : 80, alignItems: 'flex-start' }}>
            <div style={stack ? {} : { position: 'sticky', top: 40 }}>
              <Eyebrow accent style={{ marginBottom: 16 }}>Frequently asked</Eyebrow>
              <h2 style={{ fontFamily: FONTS.display, fontWeight: 500, fontSize: isMobile ? 30 : 40, lineHeight: 1.02, letterSpacing: isMobile ? -1 : -1.4, color: BASEN.ink, margin: '0 0 20px' }}>
                Good questions.
              </h2>
              <p style={{ fontFamily: FONTS.sans, fontSize: 15, lineHeight: 1.6, color: BASEN.muted, margin: 0, letterSpacing: -0.1 }}>
                Still wondering something? Email{' '}
                <span style={{ color: BASEN.ink, fontWeight: 500 }}>hello@meetsefra.com</span>
                {' '}- a real human from the team will answer within a day.
              </p>
            </div>
            <div style={{ borderBottom: `1px solid ${BASEN.ruleSoft}` }}>
              {FAQ_ITEMS.map((item, i) => (
                <FAQItem key={i} q={item.q} a={item.a} defaultOpen={i === 0} />
              ))}
            </div>
          </div>
        </div>
      </div>

      <Footer />
    </div>
  );
}

Object.assign(window, { PageSplit });