// ============================================================
// LANDING C — Modern · Bold · Black · subtle motion
// ============================================================

const { useState: useStC } = React;

// —— Nav (dark)
function LpcNav({ onRequest }) {
  return (
    <nav className="lpc-nav">
      <div className="lpc-nav__brand">
        <span className="lpc-nav__mark">PB</span>
        Process Builder
      </div>
      <div className="lpc-nav__links">
        <a href="#problem">Why</a>
        <a href="#product">Product</a>
        <a href="#benefits">Benefits</a>
        <a href="#faq">FAQ</a>
      </div>
      <div className="lpc-nav__spacer" />
      <span className="lpc-status">
        <span className="lpc-status__dot" />
        Early access · Cohort 02
      </span>
      <a className="lpc-nav__login" href="/auth/login">Sign in</a>
      <button className="lpc-btn lpc-btn--primary lpc-btn--sm" onClick={onRequest}>
        Request access
      </button>
    </nav>
  );
}

// —— Hero
function HeroC({ onRequest, onWatch }) {
  return (
    <section className="lpc-hero">
      <div className="lpc-hero__grid-bg" />
      <div className="lpc-hero__glow lpc-hero__glow--a" />
      <div className="lpc-hero__glow lpc-hero__glow--b" />
      <div className="lpc-hero__inner">
        <div className="lpc-hero__badge">
          <span className="lpc-hero__badge-tag">Early access</span>
          Cohort 02 now open
        </div>
        <h1 className="lpc-hero__title">
          <span className="lpc-hero__accent">Brand</span> is how you show up.<br />Process is how&nbsp;you <br />do it <em>consistently.</em>
        </h1>
        <p className="lpc-hero__lede">
          Process Builder is where service businesses get their best work out of their heads and into a system their whole team can follow. This takes real work. Once it is done, changing step 17 takes sixty seconds.
        </p>
        <div className="lpc-hero__cta">
          <button className="lpc-btn lpc-btn--accent" onClick={onRequest}>
            Request access
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12" /><polyline points="13 6 19 12 13 18" /></svg>
          </button>
          <button className="lpc-btn lpc-btn--ghost" onClick={onWatch}>
            <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor"><polygon points="6,4 20,12 6,20" /></svg>
            Watch the 2-minute tour
          </button>
        </div>
        <div className="lpc-hero__caption">
          Built for owners who are building something · No credit card to apply
        </div>

        {/* Floating product stack */}
        <div className="lpc-hero__stack">
          <div className="lpc-hero__screen lpc-hero__screen--left">
            <div className="lpc-light-reset">
              <MockMiniStep />
              <div style={{ padding: '0 16px 16px' }}>
                <div style={{ height: 6, background: 'var(--surface-2)', borderRadius: 3, marginBottom: 6 }} />
                <div style={{ height: 6, background: 'var(--surface-2)', borderRadius: 3, width: '88%', marginBottom: 6 }} />
                <div style={{ height: 6, background: 'var(--surface-2)', borderRadius: 3, width: '70%' }} />
              </div>
            </div>
          </div>

          <div className="lpc-hero__screen lpc-hero__screen--main">
            <div className="lpc-light-reset" style={{ height: '100%' }}>
              <MockProcessMap />
            </div>
          </div>

          <div className="lpc-hero__screen lpc-hero__screen--right">
            <div className="lpc-light-reset" style={{ padding: 18 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.1em', color: 'var(--text-faint)', textTransform: 'uppercase', marginBottom: 12 }}>
                Role · Cover Designer
              </div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 700, letterSpacing: '-0.02em', color: 'var(--text-strong)', marginBottom: 14 }}>
                12 steps across 4 stages
              </div>
              {['Cover concept exploration', 'Cover refinement & approval', 'Pricing reconciliation', 'Launch handoff'].map((t, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 0', borderBottom: '1px solid var(--border)' }}>
                  <span style={{ width: 14, height: 14, borderRadius: 4, background: '#9333EA', flexShrink: 0 }} />
                  <span style={{ fontSize: 12, color: 'var(--text-strong)', fontWeight: 600 }}>{t}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// —— Marquee
function MarqueeC() {
  const items = [
    'For ops leaders',
    'For founder-operators',
    'For fractional COOs',
    'For consulting partners',
    'For publishers',
    'For brokerages',
    'For agencies',
    'For studios',
    'For professional services',
  ];
  // duplicate for seamless loop
  const doubled = [...items, ...items];
  return (
    <div className="lpc-marquee">
      <div className="lpc-marquee__track">
        {doubled.map((it, i) => (
          <span className="lpc-marquee__item" key={i}>{it}</span>
        ))}
      </div>
    </div>
  );
}

// —— Problem section
function ProblemC() {
  return (
    <section className="lpc-section" id="problem">
      <div className="lpc-container">
        <div className="lpc-section__head">
          <div className="lpc-eyebrow">Sound familiar?</div>
          <h2 className="lpc-section__title">
            You've tried to document your process before.<br /><em>It didn't stick.</em>
          </h2>
          <p className="lpc-section__lede">
            Not because you lacked discipline. Because a Google Doc isn't a system. Neither is a Notion page, a shared drive folder, or a consultant's slide deck. If any of these sound familiar, the tools have finally caught up.
          </p>
        </div>
        <div className="lpc-problem__grid">
          <div className="lpc-problem-card">
            <p className="lpc-problem-card__quote">We've doubled the team and somehow halved how it feels.</p>
            <div className="lpc-problem-card__attrib">
              <span className="lpc-problem-card__attrib-dot" style={{ background: '#7C2D12' }}>VO</span>
              <span>VP of Operations · Professional services</span>
            </div>
          </div>
          <div className="lpc-problem-card">
            <p className="lpc-problem-card__quote">Onboarding takes six months because the playbook lives in three people's heads.</p>
            <div className="lpc-problem-card__attrib">
              <span className="lpc-problem-card__attrib-dot" style={{ background: '#0F766E' }}>CO</span>
              <span>COO · Hybrid publishing</span>
            </div>
          </div>
          <div className="lpc-problem-card">
            <p className="lpc-problem-card__quote">Every engagement runs differently, depending on who picked it up.</p>
            <div className="lpc-problem-card__attrib">
              <span className="lpc-problem-card__attrib-dot" style={{ background: '#6D28D9' }}>MC</span>
              <span>Managing Consultant · Ops advisory</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// —— Product showcase
function ProductC() {
  return (
    <section className="lpc-section lpc-section--tight" id="product">
      <div className="lpc-container">
        <div className="lpc-section__head">
          <div className="lpc-eyebrow">The product</div>
          <h2 className="lpc-section__title">
            Not a document.<em> A system.</em>
          </h2>
          <p className="lpc-section__lede">
            Wikis go stale. Slides get archived. Process Builder is where your process actually lives, structured the way your team delivers work. Flo, the built-in AI agent, helps your senior people get what they know into the system, then walks new teammates through it without months of shadowing.
          </p>
        </div>
      </div>

      <div className="lpc-product">
        <div className="lpc-product__frame">
          <div className="lpc-product__chrome">
            <span className="lpc-product__chrome-dot" style={{ background: '#ff5f57' }} />
            <span className="lpc-product__chrome-dot" style={{ background: '#febc2e' }} />
            <span className="lpc-product__chrome-dot" style={{ background: '#28c840' }} />
            <span className="lpc-product__chrome-url">app.processbuilder.com / inicio / map</span>
            <span className="lpc-product__chrome-spacer" />
            <span className="lpc-product__chrome-typing">filtering by tier: premium</span>
          </div>
          <div className="lpc-product__viewport">
            <div className="lpc-product__scan" />
            <div className="lpc-light-reset">
              <MockProcessMap />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// —— Benefits bento
function BentoC() {
  return (
    <section className="lpc-section" id="benefits">
      <div className="lpc-container">
        <div className="lpc-section__head">
          <div className="lpc-eyebrow">What changes</div>
          <h2 className="lpc-section__title">
            Repeatable. Refinable. <em>Transferable.</em>
          </h2>
        </div>

        <div className="lpc-bento">
          {/* Big feature card */}
          <div className="lpc-bento__cell lpc-bento__cell--lg lpc-bento__cell--feature">
            <div className="lpc-bento__kicker">01 · Repeatable</div>
            <h3 className="lpc-bento__title">Every client gets your best work.</h3>
            <p className="lpc-bento__body">
              Not the version that happens when the right person picks it up. Every engagement, every time, in the right order, with the right handoffs. The 2am Slack messages stop being how the work gets remembered.
            </p>
            <div className="lpc-bento__art">
              <div className="lpc-flow-art">
                <div className="lpc-flow-art__node">
                  <span className="lpc-flow-art__phase">Before</span>
                  <span className="lpc-flow-art__label">Intake</span>
                </div>
                <span className="lpc-flow-art__arrow">→</span>
                <div className="lpc-flow-art__node lpc-flow-art__node--active">
                  <span className="lpc-flow-art__phase">During</span>
                  <span className="lpc-flow-art__label">Production</span>
                </div>
                <span className="lpc-flow-art__arrow">→</span>
                <div className="lpc-flow-art__node">
                  <span className="lpc-flow-art__phase">After</span>
                  <span className="lpc-flow-art__label">Launch</span>
                </div>
              </div>
            </div>
          </div>

          {/* Mid card — refinable */}
          <div className="lpc-bento__cell lpc-bento__cell--sm">
            <div className="lpc-bento__kicker">02 · Refinable</div>
            <h3 className="lpc-bento__title">Change step 17. Just step 17.</h3>
            <p className="lpc-bento__body">
              When something needs updating, you update it in one place. The whole team sees it immediately. No version confusion, no hunting the right document.
            </p>
            <div className="lpc-bento__art" style={{ flexDirection: 'column', alignItems: 'flex-start' }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                <span style={{ fontWeight: 600, fontSize: 48, color: 'var(--c-accent)', letterSpacing: '-0.04em' }}>62</span>
                <span style={{ fontSize: 24, fontWeight: 600, color: 'var(--c-text-2)' }}>%</span>
              </div>
              <span style={{ fontFamily: 'Geist Mono, monospace', fontSize: 10.5, letterSpacing: '0.08em', color: 'var(--c-text-4)', textTransform: 'uppercase', marginTop: -4 }}>
                Avg ramp-time cut
              </span>
            </div>
          </div>

          {/* Variants card */}
          <div className="lpc-bento__cell lpc-bento__cell--md">
            <div className="lpc-bento__kicker">03 · Variants</div>
            <h3 className="lpc-bento__title">One map. Every service tier.</h3>
            <p className="lpc-bento__body">
              Standard, premium, concierge. Each tier is a different set of steps, not a different document. Run them all from one place, and show only the work that applies.
            </p>
            <div className="lpc-bento__art">
              <div className="lpc-variants-art">
                <div className="lpc-variants-art__layer">
                  <div className="lpc-variants-art__tag">Tier · Standard</div>
                  <div className="lpc-variants-art__name">Line edit · Copy edit</div>
                </div>
                <div className="lpc-variants-art__layer">
                  <div className="lpc-variants-art__tag">Tier · Premium</div>
                  <div className="lpc-variants-art__name">+ Developmental edit</div>
                </div>
                <div className="lpc-variants-art__layer">
                  <div className="lpc-variants-art__tag">Tier · Concierge</div>
                  <div className="lpc-variants-art__name">+ Daily standup</div>
                </div>
              </div>
            </div>
          </div>

          {/* Transferable card */}
          <div className="lpc-bento__cell lpc-bento__cell--md">
            <div className="lpc-bento__kicker">04 · Transferable</div>
            <h3 className="lpc-bento__title">The knowledge leaves your head.</h3>
            <p className="lpc-bento__body">
              Thirty years of expertise, locked in the founder's mind. When it's documented, a new hire can follow it. When you're ready to scale or sell, the business runs without you.
            </p>
            <div className="lpc-bento__art">
              <div className="lpc-coverage-art" style={{ width: '100%' }}>
                {Array.from({ length: 9 }).map((_, i) => (
                  <div key={i} className="lpc-coverage-art__col">
                    {[0,1,2,3,4].map((j) => {
                      // Manually pattern the cells so it looks like a real coverage grid w/ visible gaps.
                      const filled = [
                        '11111','11110','11111',
                        '11111','11111','01001',
                        '11000','00000','00000'
                      ];
                      const on = filled[i][j] === '1';
                      const gap = i >= 6 && j >= 1 && !on; // mark the late-phase missing role red
                      return <div key={j} className={'lpc-coverage-art__cell' + (on ? ' is-on' : gap ? ' is-gap' : '')} />;
                    })}
                    <div className="lpc-coverage-art__label">S{i+1}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// —— Stats strip
function StatsC() {
  return (
    <div className="lpc-stats">
      <div className="lpc-stat">
        <div className="lpc-stat__num">~<em>1</em>wk</div>
        <p className="lpc-stat__label">First phase mapped in an afternoon. Full process live in a week. Not six months.</p>
      </div>
      <div className="lpc-stat">
        <div className="lpc-stat__num"><em>62</em>%</div>
        <p className="lpc-stat__label">Average ramp-time reduction. New hires stop shadowing and start doing.</p>
      </div>
      <div className="lpc-stat">
        <div className="lpc-stat__num">0<em>·</em>1</div>
        <p className="lpc-stat__label">Source of truth. Your entire process on one map, not scattered across five documents.</p>
      </div>
    </div>
  );
}

// —— Final CTA
function FinalC({ onRequest }) {
  return (
    <section className="lpc-final">
      <div className="lpc-final__glow" />
      <div className="lpc-final__inner">
        <div className="lpc-eyebrow" style={{ justifyContent: 'center' }}>Now in early access</div>
        <h2 className="lpc-final__title">
          Build something <em>worth owning.</em>
        </h2>
        <p className="lpc-final__lede">
          A documented, transferable process is a business asset. It is what lets you scale without losing quality, onboard without six months of shadowing, and hand the business to someone else when the time comes. We are rolling out access in small cohorts so every team gets real attention from people who have lived this problem.
        </p>
        <div className="lpc-final__cta">
          <button className="lpc-btn lpc-btn--accent" onClick={onRequest}>
            Request access
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12" /><polyline points="13 6 19 12 13 18" /></svg>
          </button>
          <button className="lpc-btn lpc-btn--ghost">Talk to the team</button>
        </div>
      </div>
    </section>
  );
}

// —— FAQ
function FaqC() {
  const items = [
    { q: 'Is this for software companies or service businesses?', a: 'Service businesses: agencies, publishers, consultancies, brokerages, professional services. Any business where the quality of the work depends on who does it and how they do it. If your brand is how you show up, and your consistency varies by team member or engagement, this is for you.' },
    { q: 'How long does this actually take to set up?', a: 'The first phase typically takes an afternoon. A complete 30-stage process takes about a week. This is not a six-month implementation. It is work you do once, then maintain as the business evolves. A process for a process.' },
    { q: 'We have different service tiers. Will it handle that?', a: 'That is what variants are for. Each tier runs a different set of steps from the same map. Standard, premium, concierge, whatever your tiers are called. One process, multiple service shapes, no duplicate documents.' },
    { q: 'We already document our process in Notion. Why Process Builder?', a: 'Because a Notion page is a document, not a system. It goes stale, gets edited by the wrong person, and is not connected to how your team actually works day to day. Process Builder is where the process lives. Your team logs in, references it, and Flo helps you keep it current.' },
    { q: 'I am a consultant working with several clients. Can I use it that way?', a: 'Yes. Each client gets their own workspace, fully separate, and you can switch between them from the top of the app. A lot of fractional COOs and ops consultants use Process Builder as the thing they leave behind when the engagement ends.' },
    { q: 'What does it cost?', a: 'Early-access cohorts are free for 90 days. After that, pricing is per workspace, scaled to team size. No usage fees, no per-step charges. We will send you the full number when you request access.' },
  ];
  return (
    <section className="lpc-section" id="faq">
      <div className="lpc-container lpc-container--narrow">
        <div className="lpc-section__head" style={{ textAlign: 'left', marginBottom: 40, marginLeft: 0 }}>
          <div className="lpc-eyebrow">Frequently asked</div>
          <h2 className="lpc-section__title" style={{ fontSize: 44 }}>Questions, before you ask them.</h2>
        </div>
        <div className="lpc-faq__list">
          {items.map((it, i) => (
            <div className="lpc-faq__item" key={i}>
              <div className="lpc-faq__q">
                <span>{it.q}</span>
                <span className="lpc-faq__q-icon">+</span>
              </div>
              <p className="lpc-faq__a">{it.a}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// —— Footer
function LpcFooter() {
  return (
    <footer className="lpc-footer">
      <div className="lpc-footer__brand">
        <span className="lpc-nav__mark" style={{ width: 22, height: 22, fontSize: 10.5 }}>PB</span>
        Process Builder
      </div>
      <div className="lpc-footer__spacer" />
      <div className="lpc-footer__links">
        <a href="#">Product</a>
        <a href="#">Customers</a>
        <a href="#">Pricing</a>
        <a href="#">Careers</a>
        <a href="#">Privacy</a>
      </div>
      <span style={{ color: 'var(--c-text-4)' }}>© Process Builder 2026</span>
    </footer>
  );
}

// —— Top-level
function LandingPageC() {
  const [modal, setModal] = useStC(false);
  const [videoOpen, setVideoOpen] = useStC(false);
  return (
    <div className="lp-c" data-mode="dark" data-screen-label="03 Landing — Bold black">
      <LpcNav onRequest={() => setModal(true)} />
      <HeroC onRequest={() => setModal(true)} onWatch={() => setVideoOpen(true)} />
      <MarqueeC />
      <ProblemC />
      <ProductC />
      <BentoC />
      <StatsC />
      <FinalC onRequest={() => setModal(true)} />
      <FaqC />
      <LpcFooter />
      <RequestAccessModal open={modal} onClose={() => setModal(false)} />
      <VideoModal open={videoOpen} onClose={() => setVideoOpen(false)} src="/landing/tour.mp4" />
    </div>
  );
}

Object.assign(window, { LandingPageC });
