// Pulse landing page — real scrolling page in the sketch wireframe style.
// Direction B ("Overview-led") with the demo player as the hero visual.
// Exports: LandingPage

function lpScrollTo(id) {
  const el = document.getElementById(id);
  if (el) window.scrollTo({ top: el.offsetTop - 84, behavior: 'smooth' });
}

function LPSection({ id, label, children, style }) {
  return (
    <div id={id} data-screen-label={label} style={style}>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '0 56px' }}>{children}</div>
    </div>
  );
}

// ---- sticky nav with working anchors ----
function PageNav({ accent }) {
  const links = [
    ['demo', 'Demo'], ['how', 'How it works'], ['faq', 'FAQ'],
  ];
  return (
    <div data-screen-label="Nav" style={{
      position: 'sticky', top: 0, zIndex: 20,
      display: 'flex', alignItems: 'center', gap: 28, padding: '18px 56px',
      borderBottom: '2px solid #2b2a28', background: '#fff',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 11, fontWeight: 700, fontSize: 24, letterSpacing: '0.06em' }}>
        <span style={{ width: 20, height: 20, borderRadius: '50%', border: `2.5px dashed ${accent}`, position: 'relative', flex: 'none', display: 'inline-block' }}>
          <span style={{ position: 'absolute', inset: 5, borderRadius: '50%', background: accent }}></span>
        </span>
        PULSE
      </div>
      <div style={{ display: 'flex', gap: 24, marginLeft: 22 }}>
        {links.map(([id, l]) => (
          <button key={id} onClick={() => lpScrollTo(id)} style={{
            fontFamily: "'Patrick Hand', cursive", fontSize: 17, color: '#6f6a60',
            background: 'none', border: 0, cursor: 'pointer', padding: 0,
          }}>{l}</button>
        ))}
        <a href="blogs/" style={{
          fontFamily: "'Patrick Hand', cursive", fontSize: 17, color: '#6f6a60',
          textDecoration: 'none',
        }}>Blog</a>
      </div>
      <div style={{ marginLeft: 'auto', display: 'flex', gap: 14, alignItems: 'center' }}>
        <span style={{ fontSize: 17, color: '#6f6a60' }}>Sign in</span>
        <button onClick={() => lpScrollTo('cta')} className="wf-box r1" style={{
          fontFamily: "'Patrick Hand', cursive", fontSize: 16, fontWeight: 700, cursor: 'pointer',
          padding: '7px 18px', background: accent, color: '#fff', borderColor: accent,
        }}>Join waitlist</button>
      </div>
    </div>
  );
}

// ---- interactive FAQ accordion ----
function FaqAccordion({ accent, items }) {
  const [open, setOpen] = React.useState(0);
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      {items.map((it, i) => {
        const isOpen = open === i;
        return (
          <div key={i} className={`wf-box ${i % 2 ? 'r2' : 'r1'}`}
            onClick={() => setOpen(isOpen ? -1 : i)}
            style={{ padding: '18px 22px', background: '#fff', cursor: 'pointer', display: 'flex', flexDirection: 'column', gap: isOpen ? 10 : 0 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <div style={{ fontSize: 20, fontWeight: 700, color: '#2b2a28', flex: 1 }}>{it.q}</div>
              <span style={{ fontSize: 26, color: accent, lineHeight: 1 }}>{isOpen ? '–' : '+'}</span>
            </div>
            {isOpen && <div style={{ fontSize: 16.5, color: '#6f6a60', lineHeight: 1.45 }}>{it.a}</div>}
          </div>
        );
      })}
    </div>
  );
}

function LandingPage({ accent }) {
  return (
    <div className="wf" style={{ minHeight: '100vh', background: '#faf8f3' }}>
      <PageNav accent={accent} />

      {/* HERO */}
      <LPSection id="hero" label="Hero" style={{ paddingTop: 64 }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
          <div className="wf-box r3" style={{ display: 'inline-flex', alignItems: 'center', gap: 9, padding: '6px 14px', background: '#fff', marginBottom: 24 }}>
            <span className="wf-pulse" style={{ width: 10, height: 10, borderRadius: '50%', background: accent, display: 'block' }}></span>
            <span className="wf-mono" style={{ fontSize: 13, color: '#6f6a60' }}>backed by Spring VC · private beta</span>
          </div>
          <h1 style={{ margin: 0, fontSize: 'clamp(48px, 5vw, 72px)', fontWeight: 700, lineHeight: 0.98, color: '#2b2a28', letterSpacing: '-0.5px', maxWidth: 980 }}>
            Ship a dozen things at once.<br /><span style={{ color: accent }}>Babysit none of them.</span>
          </h1>
          <p style={{ fontSize: 21, color: '#6f6a60', margin: '24px 0 0', lineHeight: 1.4, maxWidth: 640 }}>
            Pulse runs all your coding agents as parallel tasks under one voice coordinator. It watches every job and pulls you in only when there's a real decision to make.
          </p>
          <div style={{ marginTop: 30, width: 'min(520px, 100%)' }}>
            <EmailCapture accent={accent} note="Join 10 teams already in the beta." />
          </div>
        </div>
      </LPSection>

      {/* DEMO */}
      <LPSection id="demo" label="Demo" style={{ paddingTop: 48 }}>
        <div style={{ position: 'relative' }}>
          <DemoPlayer accent={accent} />
          <div className="wf-annot" style={{ position: 'absolute', right: 6, top: -30, color: accent, fontSize: 21 }}>
            ↓ the actual product, 32 seconds
          </div>
        </div>
      </LPSection>

      {/* STATS */}
      <LPSection id="stats" label="Stats" style={{ paddingTop: 64 }}>
        <StatBand accent={accent} stats={[
          { n: '12+', l: 'tasks at once' },
          { n: '10', l: 'teams in beta' },
          { n: '70%', l: 'less babysitting' },
          { n: '1', l: 'agent to talk to' },
        ]} />
      </LPSection>

      {/* LOGOS */}
      <LPSection id="logos" label="Logos" style={{ paddingTop: 56 }}>
        <LogoRow count={6} label="The teams shipping fastest already run Pulse" />
      </LPSection>

      {/* HOW IT WORKS */}
      <LPSection id="how" label="How it works" style={{ paddingTop: 88 }}>
        <SectionHead eyebrow="How it works" title="From brief to merged — hands-free." accent={accent} align="center" maxW={700} />
        <div style={{ marginTop: 36 }}>
          <StepsRow accent={accent} steps={[
            { title: 'Brief many tasks', body: 'Describe the work across your repos. Each job becomes its own running task.', shot: 'multi-brief' },
            { title: 'Watch one screen', body: 'The floor shows every task live. The coordinator narrates as it goes.', shot: 'floor overview' },
            { title: 'Decide by voice', body: 'Pulse pings you when a task is blocked or done. Answer out loud, keep moving.', shot: 'voice review' },
          ]} />
        </div>
      </LPSection>

      {/* VOICE DEEP-DIVE */}
      <LPSection id="voice" label="Voice coordinator" style={{ paddingTop: 88 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 48, alignItems: 'center' }}>
          <div>
            <SectionHead eyebrow="Voice coordinator" title="Less a tool. More a teammate." sub="Pulse tells you what changed and asks what it needs. You answer like you would a colleague — and it does the rest." accent={accent} />
          </div>
          <div className="wf-box r1" style={{ padding: 26, background: '#fff', display: 'flex', alignItems: 'center', gap: 22 }}>
            <AgentAvatar variant="Waveform" size={108} accent={accent} talking={true} />
            <div style={{ flex: 1 }}>
              <div className="wf-annot" style={{ fontSize: 23, color: '#2b2a28', lineHeight: 1.25 }}>
                “Two tasks finished, one needs you: <span style={{ color: accent }}>mobile</span> hit a crash and wants a fallback. Want the diff?”
              </div>
              <div style={{ display: 'flex', gap: 10, marginTop: 16 }}>
                <button className="wf-box r2 wf-btn" style={{ width: 'auto', borderColor: accent, color: accent, padding: '6px 16px' }}>“show me”</button>
                <button className="wf-box r3 wf-btn" style={{ width: 'auto', padding: '6px 16px' }}>“ship it”</button>
              </div>
            </div>
          </div>
        </div>
      </LPSection>

      {/* FEATURES */}
      <LPSection id="features" label="Features" style={{ paddingTop: 88 }}>
        <SectionHead eyebrow="What you get" title="Everything to run agents like a team." accent={accent} align="center" maxW={680} />
        <div style={{ marginTop: 32 }}>
          <FeatureGrid accent={accent} cols={2} features={[
            { title: 'Parallel tasks', body: 'Run ten jobs at once. No ten terminals, no lost threads.' },
            { title: 'Attention routing', body: 'The coordinator surfaces what needs you, mutes the rest.' },
            { title: 'Voice control', body: 'Brief, review, and approve without touching the keyboard.' },
            { title: 'Slide-in review', body: 'Terminal + diff over the overview. Decide and it\u2019s gone.' },
          ]} />
        </div>
      </LPSection>

      {/* TESTIMONIAL */}
      <LPSection id="quote" label="Testimonial" style={{ paddingTop: 80 }}>
        <div className="wf-box r1" style={{ padding: '40px 48px', background: '#fff', display: 'flex', gap: 28, alignItems: 'flex-start' }}>
          <span style={{ fontSize: 70, color: accent, lineHeight: 0.7, fontWeight: 700 }}>“</span>
          <div>
            <div style={{ fontSize: 26, color: '#2b2a28', lineHeight: 1.35, fontWeight: 700, maxWidth: 880 }}>
              We went from one engineer riding one agent to a whole floor running at once. Pulse tells us where to look — we just make the calls.
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginTop: 20 }}>
              <ImgPlaceholder label="avatar" w={46} h={46} accent={accent} radius="r3" />
              <div className="wf-mono" style={{ fontSize: 14, color: '#6f6a60' }}>Eng lead · beta team</div>
            </div>
          </div>
        </div>
      </LPSection>

      {/* FAQ */}
      <LPSection id="faq" label="FAQ" style={{ paddingTop: 88 }}>
        <SectionHead eyebrow="FAQ" title="Good questions." accent={accent} align="center" maxW={600} />
        <div style={{ maxWidth: 860, margin: '30px auto 0' }}>
          <FaqAccordion accent={accent} items={[
            { q: 'Does it replace my editor?', a: 'No. Pulse coordinates parallel agent tasks and routes your attention. A full terminal + review is one tap (or one word) away whenever a task needs you.' },
            { q: 'What models and repos work with it?', a: 'Pulse drives the coding agents you already use and connects to your existing repos — GitHub first, more on the way. Your keys, your infrastructure.' },
            { q: 'Is voice required?', a: 'No. Everything the coordinator says also lands as text, and every voice action has a tap fallback. Voice is the fast path, not the only one.' },
            { q: 'How safe is my code?', a: 'Tasks run against your repos with your credentials. Nothing is trained on, and nothing merges without your explicit approval.' },
            { q: 'When can I get in?', a: 'We onboard a few teams each week from the waitlist. Joining today puts you in the next batch review.' },
          ]} />
        </div>
      </LPSection>

      {/* FINAL CTA */}
      <LPSection id="cta" label="Final CTA" style={{ paddingTop: 88, paddingBottom: 72 }}>
        <CTABand accent={accent} title="Run the floor. Don't babysit it." sub="Join the waitlist and we'll bring your team in." />
      </LPSection>

      <div data-screen-label="Footer"><LPFooter accent={accent} /></div>
    </div>
  );
}

window.LandingPage = LandingPage;