/* eslint-disable */

// ============ NAV ============
function Nav({ onCreateAccount }) {
  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      height: 64, padding: '0 40px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      background: 'rgba(255,255,255,0.88)',
      backdropFilter: 'blur(12px)',
      WebkitBackdropFilter: 'blur(12px)',
      borderBottom: '1px solid var(--muted-200)',
    }}>
      <a href="/" style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
        <span className="font-display gradient-text-subtle" style={{ fontSize: 22, fontWeight: 900, letterSpacing: '-1px' }}>Praxis</span>
        <span className="font-mono" style={{ fontSize: 11, color: 'var(--muted-400)' }}>by ShiftWorks</span>
      </a>
      <div style={{ display: 'flex', alignItems: 'center', gap: 28 }}>
        <a href="#features" className="nav-link">Features</a>
        <a href="#pricing" className="nav-link">Pricing</a>
        <a href="#faq" className="nav-link">FAQ</a>
        <a href="https://shiftworksai.com" className="nav-link">ShiftWorks</a>
        <a href="/login" style={{ fontSize: 14, color: 'var(--muted-500)', transition: 'color .15s' }}
           onMouseEnter={e => e.currentTarget.style.color = 'var(--fg)'}
           onMouseLeave={e => e.currentTarget.style.color = 'var(--muted-500)'}>Sign in</a>
        <button onClick={onCreateAccount} className="btn-primary" style={{ padding: '10px 20px', fontSize: 14 }}>
          Start free →
        </button>
      </div>
      <style>{`
        .nav-link { font-size: 14px; color: var(--muted-500); transition: color .15s ease; }
        .nav-link:hover { color: var(--fg); }
        @media (max-width: 820px) { .nav-link { display: none; } }
      `}</style>
    </nav>
  );
}

// ============ HERO ============
function ReferralHeroCard({ code }) {
  const [email, setEmail] = React.useState('');
  const [companyName, setCompanyName] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState('');
  const [copied, setCopied] = React.useState(false);

  const onSubmit = async (e) => {
    e.preventDefault();
    setError('');

    if (!email || !/\S+@\S+\.\S+/.test(email)) {
      setError('Enter a valid work email.');
      return;
    }

    setLoading(true);
    try {
      const res = await fetch('/api/affiliates/capture-lead', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ code, email, company_name: companyName || null }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error || 'Could not continue');
      window.location.href = `/signup?ref=${encodeURIComponent(code)}`;
    } catch (err) {
      setError((err && err.message) || 'Could not continue');
      setLoading(false);
    }
  };

  return (
    <div style={{
      borderRadius: 24,
      border: '1px solid var(--muted-200)',
      background: 'white',
      padding: 20,
      boxShadow: '0 6px 28px rgba(15,17,23,0.08)',
    }}>
      <p style={{ margin: 0, fontSize: 12, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--praxis-primary)' }}>
        Praxis Plus — Referral Offer
      </p>
      <h3 style={{ margin: '8px 0 0', fontSize: 48, lineHeight: 1.1, letterSpacing: '-1.5px', color: 'var(--fg)', fontWeight: 800, fontFamily: 'var(--font-display)' }}>
        Claim your offer & get started
      </h3>

      <div style={{ marginTop: 16, display: 'flex', alignItems: 'flex-start', gap: 12, borderRadius: 14, border: '1px solid rgba(124,58,237,0.25)', background: 'rgba(124,58,237,0.08)', padding: 14 }}>
        <span style={{ fontSize: 20, color: 'var(--praxis-primary)' }}>🎁</span>
        <div>
          <p style={{ margin: 0, fontSize: 18, fontWeight: 700, color: '#4c1d95' }}>First month free + $3,000 credit</p>
          <p style={{ margin: '2px 0 0', fontSize: 14, color: 'var(--praxis-primary)' }}>Applied automatically across your first 3 paid months</p>
        </div>
      </div>

      <form onSubmit={onSubmit} style={{ marginTop: 14 }}>
        <div style={{ borderRadius: 12, border: '1px solid var(--muted-200)', background: 'var(--muted-50)', padding: 14, marginBottom: 12 }}>
          <div style={{ marginBottom: 6, fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--muted-400)' }}>Referral code</div>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10 }}>
            <span style={{ fontFamily: 'var(--font-mono)', fontSize: 24, fontWeight: 700, color: 'var(--fg)' }}>{code}</span>
            <button
              type="button"
              onClick={() => {
                navigator.clipboard.writeText(code);
                setCopied(true);
                setTimeout(() => setCopied(false), 1500);
              }}
              style={{ borderRadius: 10, border: '1px solid var(--muted-200)', background: 'white', padding: '8px 12px', fontSize: 14, color: 'var(--muted-600)', cursor: 'pointer' }}
            >
              {copied ? 'Copied' : 'Copy'}
            </button>
          </div>
        </div>

        <label style={{ display: 'block', marginBottom: 6, fontSize: 14, color: 'var(--muted-600)' }}>Work email</label>
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="you@company.com"
          style={{ width: '100%', marginBottom: 12, borderRadius: 12, border: '1px solid var(--muted-200)', background: 'white', padding: '12px 14px', fontSize: 15, color: 'var(--fg)' }}
        />

        <label style={{ display: 'block', marginBottom: 6, fontSize: 14, color: 'var(--muted-600)' }}>Company name (optional)</label>
        <input
          type="text"
          value={companyName}
          onChange={(e) => setCompanyName(e.target.value)}
          placeholder="Acme Inc"
          style={{ width: '100%', marginBottom: 12, borderRadius: 12, border: '1px solid var(--muted-200)', background: 'white', padding: '12px 14px', fontSize: 15, color: 'var(--fg)' }}
        />

        {error ? <p style={{ margin: '0 0 10px', fontSize: 12, color: '#dc2626' }}>{error}</p> : null}

        <button
          type="submit"
          disabled={loading}
          className="btn-primary"
          style={{ width: '100%', justifyContent: 'center', opacity: loading ? 0.6 : 1 }}
        >
          {loading ? 'Working…' : 'Continue to signup →'}
        </button>
      </form>
    </div>
  );
}

function Hero({ rotate, onCreateAccount, onStartPlus, referralCode }) {
  const lines = [
    <>The <span className="gradient-text">ongoing AI practice</span><br/>for your team.</>,
    <>Make AI part of how<br/>your team <span className="gradient-text">works</span>.</>,
  ];

  return (
    <section style={{ paddingTop: 120, paddingBottom: 72 }}>
      <div className="container-1120" style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(460px,1fr))', gap: 64, alignItems: 'center' }}>
        <div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            fontSize: 11, fontWeight: 700, letterSpacing: '1.5px', textTransform: 'uppercase',
            color: 'var(--praxis-primary)',
            background: 'rgba(124,58,237,0.08)',
            border: '1px solid rgba(124,58,237,0.18)',
            padding: '6px 14px', borderRadius: 999, marginBottom: 28,
          }}>
            <span className="pulse-dot" style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--praxis-secondary)', boxShadow: '0 0 8px var(--praxis-secondary)' }} />
            Ongoing AI practice · for your whole team
          </div>

          <h1 className="font-display" style={{
            fontSize: 'clamp(36px, 4.4vw, 58px)',
            fontWeight: 800, lineHeight: 1.08, letterSpacing: '-1.5px',
            color: 'var(--fg)', margin: 0, marginBottom: 28,
          }}>
            <span className="rot-wrap">
              {/* One hidden ghost reserves the height; all lines have the same 2-line structure */}
              <span className="rot-ghost" aria-hidden="true">{lines[0]}</span>
              {lines.map((ln, i) => (
                <span key={i} className={`rot-line rot-line-${i} ${rotate ? '' : 'rot-static'}`}>{ln}</span>
              ))}
            </span>
          </h1>

          <p style={{
            fontSize: 18, color: 'var(--muted-500)', lineHeight: 1.65,
            maxWidth: 520, margin: 0, marginBottom: 36,
          }}>
            Praxis is a <strong style={{ color: 'var(--muted-700)', fontWeight: 600 }}>platform + practice hybrid</strong> — custom curriculum built around your team&apos;s real workflows, live sessions, and practitioner-reviewed certification. One flat price, unlimited seats, month to month.
          </p>

          <div style={{ display: 'flex', alignItems: 'center', gap: 14, flexWrap: 'wrap', marginBottom: 36 }}>
            <button onClick={onCreateAccount} className="btn-primary">
              Create account →
            </button>
            <button onClick={onStartPlus} className="btn-plus">
              Start Praxis Plus
            </button>
          </div>
          <div style={{ fontSize: 12, color: 'var(--muted-400)', display: 'flex', gap: 18, flexWrap: 'wrap', marginBottom: 32 }}>
            <span>✓ Unlimited seats</span>
            <span>✓ No credit card to explore</span>
            <span>✓ Cancel any time</span>
          </div>

          <div style={{ display: 'flex', gap: 36, paddingTop: 24, borderTop: '1px solid var(--muted-200)', flexWrap: 'wrap' }}>
            {[
              { val: '48h', accent: false, label: 'to first missions live' },
              { val: '1:1', accent: true, label: 'practitioner sessions' },
              { val: '∞',   accent: false, label: 'seats, one flat price' },
            ].map(({ val, accent, label }) => (
              <div key={label}>
                <div className="font-display" style={{ fontSize: 28, fontWeight: 800, letterSpacing: '-1px', lineHeight: 1, color: accent ? 'var(--praxis-primary)' : 'var(--fg)' }}>{val}</div>
                <div style={{ fontSize: 12, color: 'var(--muted-400)', marginTop: 6 }}>{label}</div>
              </div>
            ))}
          </div>
        </div>

        <div>{referralCode ? <ReferralHeroCard code={referralCode} /> : <HeroMockup />}</div>
      </div>
    </section>
  );
}

// ============ 48-HOUR PROMISE ============
function PromiseStrip() {
  const cards = [
    { day: 'Day 0', head: 'You sign up.', body: 'Fill out a short form about your team&apos;s role, tools, and goals.' },
    { day: '48 hours later', head: 'Your curriculum is live.', body: 'Custom missions written around your actual work, delivered to every seat.' },
    { day: 'Week 1+', head: 'Your team is shipping.', body: 'Real missions, reviewed by practitioners, certifications earned as work compounds.' },
  ];
  return (
    <section style={{ background: 'var(--muted-50)', borderTop: '1px solid var(--muted-200)', borderBottom: '1px solid var(--muted-200)', padding: '64px 0' }}>
      <div className="container-1120">
        <FadeIn>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24, marginBottom: 40 }}>
            <div>
              <Eyebrow>The 48-hour promise</Eyebrow>
              <h2 className="font-display" style={{ margin: 0, fontSize: 'clamp(28px, 3vw, 40px)', fontWeight: 800, letterSpacing: '-1px', lineHeight: 1.15, color: 'var(--fg)', maxWidth: 640 }}>
                Here&apos;s how fast <span className="syne-italic">this actually starts.</span>
              </h2>
            </div>
            <p style={{ margin: 0, fontSize: 14, color: 'var(--muted-500)', maxWidth: 280, lineHeight: 1.6 }}>
              Most team AI programs take a quarter to launch. Praxis is measured in days — tested against ops, marketing, finance and CX teams.
            </p>
          </div>
        </FadeIn>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 16 }}>
          {cards.map((c, i) => (
            <FadeIn key={c.day} className="promise-card">
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
                <div style={{ width: 26, height: 26, borderRadius: 7, background: 'linear-gradient(135deg,#7c3aed,#00c8e0)', color: 'white', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 800, fontFamily: 'var(--font-mono)' }}>
                  {i + 1}
                </div>
                <span className="font-mono" style={{ fontSize: 11, fontWeight: 700, letterSpacing: 1, textTransform: 'uppercase', color: 'var(--muted-500)' }}>{c.day}</span>
              </div>
              <h3 className="font-display" style={{ margin: 0, fontSize: 22, fontWeight: 800, letterSpacing: '-0.5px', color: 'var(--fg)', marginBottom: 8 }}>{c.head}</h3>
              <p style={{ margin: 0, fontSize: 14, color: 'var(--muted-500)', lineHeight: 1.65 }} dangerouslySetInnerHTML={{ __html: c.body }} />
            </FadeIn>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============ WHAT IS PRAXIS ============
function WhatIs() {
  return (
    <section id="features" style={{ padding: '88px 0 40px' }}>
      <div className="container-1120">
        <FadeIn>
          <Eyebrow>What is Praxis</Eyebrow>
          <h2 className="font-display" style={{
            margin: 0, marginBottom: 20,
            fontSize: 'clamp(30px, 3.6vw, 46px)',
            fontWeight: 800, letterSpacing: '-1px', lineHeight: 1.12,
            color: 'var(--fg)', maxWidth: 760,
          }}>
            Not a course. Not a one-time thing.<br/>
            <span className="syne-italic gradient-text">A continuous system.</span>
          </h2>
          <p style={{ margin: 0, fontSize: 17, color: 'var(--muted-500)', maxWidth: 600, lineHeight: 1.65 }}>
            Praxis is a platform + practice hybrid. The software handles curriculum, coaching schedules, certification, and team visibility. ShiftWorks practitioners handle facilitation, portfolio reviews, and 1-on-1 coaching. Your team learns by doing — on real work, with real humans reviewing real outputs.
          </p>
        </FadeIn>
      </div>
    </section>
  );
}

// ============ MISSIONS NOT LESSONS (promoted) ============
function MissionsBanner() {
  return (
    <section className="container-1120" style={{ paddingTop: 32, paddingBottom: 32 }}>
      <FadeIn>
        <div style={{
          borderRadius: 24,
          background: 'linear-gradient(135deg, #1a0b3d 0%, #2a0f54 60%, #3d1f73 100%)',
          padding: '40px 44px',
          color: '#ede9fe',
          position: 'relative',
          overflow: 'hidden',
        }}>
          <div aria-hidden style={{
            position: 'absolute', right: -60, top: -40, width: 260, height: 260, borderRadius: '50%',
            background: 'radial-gradient(circle, rgba(0,200,224,0.22), transparent 70%)', pointerEvents: 'none',
          }} />
          <div aria-hidden style={{
            position: 'absolute', left: -40, bottom: -40, width: 220, height: 220, borderRadius: '50%',
            background: 'radial-gradient(circle, rgba(124,58,237,0.32), transparent 70%)', pointerEvents: 'none',
          }} />
          <div style={{ display: 'flex', gap: 24, alignItems: 'flex-start', position: 'relative', flexWrap: 'wrap' }}>
            <div style={{
              width: 52, height: 52, borderRadius: 12,
              background: 'rgba(139,92,246,0.25)',
              border: '1px solid rgba(139,92,246,0.4)',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 22, color: '#c4b5fd', flexShrink: 0,
            }}>◆</div>
            <div style={{ flex: 1, minWidth: 260 }}>
              <p className="font-mono" style={{ margin: 0, marginBottom: 8, fontSize: 11, fontWeight: 700, letterSpacing: '1.5px', textTransform: 'uppercase', color: '#c4b5fd' }}>Missions, not video lessons</p>
              <h3 className="font-display" style={{ margin: 0, marginBottom: 10, fontSize: 'clamp(24px, 2.6vw, 34px)', fontWeight: 800, letterSpacing: '-0.5px', color: 'white', lineHeight: 1.15 }}>
                Your team doesn&apos;t <span className="syne-italic" style={{ color: '#c4b5fd' }}>watch</span> AI tutorials.<br/>They <span className="syne-italic" style={{ color: '#67e8f9' }}>ship</span> real work.
              </h3>
              <p style={{ margin: 0, fontSize: 16, lineHeight: 1.65, color: 'rgba(237,233,254,0.92)', maxWidth: 780 }}>
                Every mission is a real task your team already executes: a quarterly report, a customer email, a process SOP, an analysis. They build it using AI. The platform grades readiness between missions, and a ShiftWorks practitioner reviews the work for certification. That&apos;s how fluency compounds — by use, not by watching.
              </p>
            </div>
          </div>
        </div>
      </FadeIn>
    </section>
  );
}

// ============ FEATURE 2-COL (reusable) ============
function FeatureRow({ eyebrow, title, titleAccent, body, bullets, mockOnLeft, mock, bordered = true }) {
  const text = (
    <div>
      <Eyebrow>{eyebrow}</Eyebrow>
      <h3 className="font-display" style={{
        margin: 0, marginBottom: 16,
        fontSize: 'clamp(22px, 2.5vw, 32px)', fontWeight: 800, letterSpacing: '-0.5px', lineHeight: 1.18, color: 'var(--fg)',
      }}>
        {title}{titleAccent && <> <span className="syne-italic gradient-text">{titleAccent}</span></>}
      </h3>
      <p style={{ margin: 0, marginBottom: 16, fontSize: 16, color: 'var(--muted-500)', lineHeight: 1.7 }} dangerouslySetInnerHTML={{ __html: body }} />
      {bullets && (
        <ul style={{ margin: 0, marginTop: 18, padding: 0, listStyle: 'none' }}>
          {bullets.map((b) => (
            <li key={b} style={{ fontSize: 14, color: 'var(--muted-500)', padding: '10px 0', borderBottom: '1px solid var(--muted-200)', display: 'flex', gap: 10, alignItems: 'flex-start', lineHeight: 1.55 }}>
              <Check />
              <span dangerouslySetInnerHTML={{ __html: b }} />
            </li>
          ))}
        </ul>
      )}
    </div>
  );
  return (
    <FadeIn style={{
      display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(380px, 1fr))', gap: 56,
      alignItems: 'center', padding: '64px 0',
      borderBottom: bordered ? '1px solid var(--muted-200)' : 'none',
    }}>
      {mockOnLeft ? <>{mock}{text}</> : <>{text}{mock}</>}
    </FadeIn>
  );
}

// ============ PRICING ============
function Pricing({ onCreateAccount, onStartPlus }) {
  return (
    <section id="pricing" style={{ background: 'var(--muted-50)', borderTop: '1px solid var(--muted-200)', borderBottom: '1px solid var(--muted-200)', padding: '88px 0' }}>
      <div className="container-1120">
        <FadeIn style={{ textAlign: 'center', marginBottom: 48 }}>
          <Eyebrow>Pricing</Eyebrow>
          <h2 className="font-display" style={{ margin: 0, marginBottom: 14, fontSize: 'clamp(30px, 3.6vw, 46px)', fontWeight: 800, letterSpacing: '-1px', lineHeight: 1.12, color: 'var(--fg)' }}>
            Start free. <span className="syne-italic gradient-text">Scale as you grow.</span>
          </h2>
          <p style={{ margin: '0 auto', fontSize: 17, color: 'var(--muted-500)', maxWidth: 540, lineHeight: 1.65 }}>
            One simple price. Unlimited seats. Cancel any time.
          </p>
        </FadeIn>

        <FadeIn>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 20, alignItems: 'stretch', gridAutoRows: '1fr' }}>
            {/* Explorer */}
            <div style={{ background: 'white', border: '1px solid var(--muted-200)', borderRadius: 20, padding: 32, display: 'flex', flexDirection: 'column' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20 }}>
                <div className="font-mono" style={{ fontSize: 11, fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase', color: 'var(--muted-400)' }}>Explorer</div>
                <Pill variant="gray">Free access</Pill>
              </div>
              <div className="font-display" style={{ fontSize: 44, fontWeight: 800, letterSpacing: '-1.5px', lineHeight: 1, marginBottom: 6, color: 'var(--fg)' }}>Free</div>
              <div style={{ fontSize: 14, color: 'var(--muted-400)', marginBottom: 24 }}>Explore the platform and free resources. Upgrade when you're ready.</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, marginBottom: 28, flex: 1, display: 'flex', flexDirection: 'column', gap: 10 }}>
                {[
                  'Full platform access to explore',
                  'Free resources and sample missions',
                  'See how Praxis actually works',
                  'Upgrade to Plus for curriculum, coaching, certification',
                ].map(f => (
                  <li key={f} style={{ fontSize: 13, color: 'var(--muted-500)', display: 'flex', gap: 8, lineHeight: 1.55 }}>
                    <span style={{ color: 'var(--muted-400)', fontWeight: 700 }}>·</span> {f}
                  </li>
                ))}
              </ul>
              <button onClick={onCreateAccount} className="btn-secondary" style={{ justifyContent: 'center', width: '100%' }}>
                Sign up free
              </button>
            </div>

            {/* Plus — spans 2 cols */}
            <div style={{
              gridColumn: 'span 2',
              minWidth: 0,
              background: 'white',
              border: '1px solid rgba(124,58,237,0.2)',
              borderRadius: 20, overflow: 'hidden',
              boxShadow: '0 12px 40px rgba(124,58,237,0.1)',
              display: 'flex', flexDirection: 'column',
            }}>
              <div style={{ background: 'linear-gradient(120deg, #6d28d9 0%, #7c3aed 50%, #a21caf 100%)', padding: '28px 32px', color: 'white', position: 'relative', overflow: 'hidden' }}>
                <div aria-hidden style={{ position: 'absolute', top: -20, right: -40, width: 160, height: 160, borderRadius: '50%', background: 'radial-gradient(circle, rgba(0,200,224,0.3), transparent 70%)' }} />
                <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', position: 'relative', flexWrap: 'wrap', gap: 16 }}>
                  <div>
                    <div className="font-mono" style={{ fontSize: 11, fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase', marginBottom: 6, opacity: 0.9 }}>Praxis Plus</div>
                    <div className="font-display" style={{ fontSize: 46, fontWeight: 800, letterSpacing: '-1.5px', lineHeight: 1 }}>
                      $3,200<span style={{ fontSize: 20, fontWeight: 600 }}>/month</span>
                    </div>
                    <div style={{ fontSize: 14, marginTop: 8, color: '#e9d5ff' }}>Unlimited seats. Your whole org.</div>
                  </div>
                  <button onClick={onStartPlus} style={{
                    background: 'white', color: '#6d28d9', border: 'none', padding: '12px 22px', borderRadius: 10,
                    fontSize: 14, fontWeight: 700, cursor: 'pointer', transition: 'transform .15s ease'
                  }} onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-1px)'} onMouseLeave={e => e.currentTarget.style.transform = ''}>
                    Start Praxis Plus →
                  </button>
                </div>
              </div>

              <div style={{ padding: 24 }}>
                <div className="font-mono" style={{ fontSize: 10, fontWeight: 700, letterSpacing: 1.6, textTransform: 'uppercase', color: 'var(--muted-500)', marginBottom: 14 }}>Everything included</div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px,1fr))', gap: 12 }}>
                  {[
                    ['◉', 'Org-wide custom curriculum', 'First missions live within 48 hours.'],
                    ['◎', '1:1 practitioner sessions', 'Book directly with a ShiftWorks practitioner.'],
                    ['◌', 'Always-on inbox access', 'Message a practitioner any time between sessions.'],
                    ['◍', 'Practitioner-reviewed certification', 'Every portfolio reviewed by a real person.'],
                    ['◈', 'Quarterly live sessions', 'Open to every Plus team. New content each quarter.'],
                    ['◇', 'Private quarterly workshop', 'Dedicated workshop, private to your org.'],
                  ].map(([icon, title, body]) => (
                    <div key={title} style={{ border: '1px solid var(--muted-200)', background: 'var(--muted-50)', borderRadius: 12, padding: 14 }}>
                      <div style={{ display: 'inline-flex', width: 26, height: 26, borderRadius: 7, background: '#ede9fe', color: 'var(--praxis-primary)', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 700, marginBottom: 8 }}>{icon}</div>
                      <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--fg)' }}>{title}</div>
                      <div style={{ fontSize: 13, color: 'var(--muted-500)', lineHeight: 1.5, marginTop: 3 }}>{body}</div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>

          {/* ROI card */}
          <div className="roi-card" style={{ marginTop: 24, border: '1px solid var(--muted-200)', background: 'white', borderRadius: 20, padding: '28px 32px', position: 'relative' }}>
            <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px,1fr))', gap: 32, alignItems: 'center' }}>
              <div>
                <Eyebrow color="var(--praxis-primary)">The math</Eyebrow>
                <h4 className="font-display" style={{ margin: 0, marginBottom: 10, fontSize: 24, fontWeight: 800, letterSpacing: '-0.5px', color: 'var(--fg)', lineHeight: 1.2 }}>
                  Less than one senior hire&apos;s <span className="syne-italic gradient-text">weekly rate.</span>
                </h4>
                <p style={{ margin: 0, fontSize: 15, color: 'var(--muted-500)', lineHeight: 1.6 }}>
                  For your whole org, every month. If Praxis saves each team member 2 hours a week, payback is ~4 business days. Everything after that is margin.
                </p>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 10 }}>
                {[
                  { val: '$3,200', label: 'per month, flat', accent: false },
                  { val: '~4 days', label: 'to payback', accent: true },
                  { val: '∞', label: 'seats included', accent: false },
                ].map(x => (
                  <div key={x.label} style={{
                    background: 'var(--muted-50)', border: '1px solid var(--muted-200)',
                    borderRadius: 12, padding: 14, textAlign: 'center',
                  }}>
                    <div className="font-display" style={{ fontSize: 20, fontWeight: 800, letterSpacing: '-0.5px', color: x.accent ? 'var(--praxis-primary)' : 'var(--fg)' }}>{x.val}</div>
                    <div style={{ fontSize: 11, color: 'var(--muted-500)', marginTop: 4 }}>{x.label}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Small-team note */}
          <div style={{ marginTop: 16, display: 'flex', alignItems: 'center', gap: 14, padding: '16px 22px', border: '1px dashed var(--muted-300)', borderRadius: 14, background: 'white' }}>
            <div style={{ width: 36, height: 36, borderRadius: 10, background: 'rgba(124,58,237,0.08)', color: 'var(--praxis-primary)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 16, flexShrink: 0 }}>✉</div>
            <div style={{ flex: 1, fontSize: 14, color: 'var(--muted-700)', lineHeight: 1.5 }}>
              <strong style={{ color: 'var(--fg)' }}>Team of fewer than 10?</strong> Email <a href="mailto:praxis@shiftworksai.com" style={{ color: 'var(--praxis-primary)', fontWeight: 600 }}>praxis@shiftworksai.com</a> — we offer discounts for smaller teams.
            </div>
          </div>

          {/* How it works */}
          <div style={{ marginTop: 32, background: 'white', border: '1px solid var(--muted-200)', borderRadius: 20, padding: 28 }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20, flexWrap: 'wrap', gap: 12 }}>
              <div>
                <Eyebrow>How it works</Eyebrow>
                <h4 className="font-display" style={{ margin: 0, fontSize: 22, fontWeight: 800, letterSpacing: '-0.5px', color: 'var(--fg)' }}>
                  Your team is shipping AI work by <span className="syne-italic">the end of the week.</span>
                </h4>
              </div>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 12 }}>
              {[
                ['Mon', 'Sign up', 'Anyone on your email domain joins instantly — no seat provisioning.'],
                ['Mon', 'Intake form', '10-minute form on your team, tools, and AI goals.'],
                ['Wed', 'Missions live', 'Team gets their custom track delivered via email.'],
                ['Thu', 'First ship', 'Real AI-assisted deliverable. Practitioner reviews. Admin sees it.'],
              ].map(([day, title, body], i) => (
                <div key={title} style={{ border: '1px solid var(--muted-200)', background: 'var(--muted-50)', borderRadius: 14, padding: 16 }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 }}>
                    <div style={{ width: 26, height: 26, borderRadius: 7, background: 'linear-gradient(135deg,#7c3aed,#00c8e0)', color: 'white', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 800, fontFamily: 'var(--font-mono)' }}>{i + 1}</div>
                    <span className="font-mono" style={{ fontSize: 10, fontWeight: 700, letterSpacing: 1, textTransform: 'uppercase', color: 'var(--muted-500)' }}>{day}</span>
                  </div>
                  <div style={{ fontSize: 15, fontWeight: 700, color: 'var(--fg)', marginBottom: 6 }}>{title}</div>
                  <div style={{ fontSize: 13, color: 'var(--muted-500)', lineHeight: 1.55 }}>{body}</div>
                </div>
              ))}
            </div>
          </div>
        </FadeIn>
      </div>
    </section>
  );
}

// ============ COMPARISON TABLE (optional) ============
function ComparisonTable() {
  const rows = [
    ['Curriculum built around your real work', true, false, 'Sometimes'],
    ['Portfolio reviewed by a senior practitioner', true, false, false],
    ['Quarterly live sessions & private workshops', true, false, false],
    ['Certification that means someone shipped work', true, false, false],
    ['Org-wide, unlimited seats', true, false, 'No'],
    ['Live in 48 hours', true, false, 'No'],
  ];
  const Cell = ({ v }) => {
    if (v === true) return <span style={{ color: 'var(--green)', fontSize: 16, fontWeight: 800 }}>✓</span>;
    if (v === false) return <span style={{ color: 'var(--muted-300)', fontSize: 16, fontWeight: 700 }}>—</span>;
    return <span style={{ fontSize: 12, color: 'var(--muted-500)' }}>{v}</span>;
  };
  return (
    <FadeIn style={{ marginTop: 24, background: 'white', border: '1px solid var(--muted-200)', borderRadius: 20, padding: 28 }}>
      <Eyebrow>Honest comparison</Eyebrow>
      <h4 className="font-display" style={{ margin: 0, marginBottom: 16, fontSize: 22, fontWeight: 800, letterSpacing: '-0.5px', color: 'var(--fg)' }}>
        Praxis vs. the alternatives.
      </h4>
      <div style={{ overflowX: 'auto' }}>
        <table style={{ width: '100%', borderCollapse: 'collapse', minWidth: 520 }}>
          <thead>
            <tr>
              <th style={{ textAlign: 'left', padding: '10px 12px', fontSize: 11, fontWeight: 700, letterSpacing: 1, textTransform: 'uppercase', color: 'var(--muted-500)' }}></th>
              <th style={{ textAlign: 'center', padding: '10px 12px', fontSize: 13, fontWeight: 700, color: 'var(--praxis-primary)' }}>Praxis</th>
              <th style={{ textAlign: 'center', padding: '10px 12px', fontSize: 13, fontWeight: 600, color: 'var(--muted-500)' }}>Course library</th>
              <th style={{ textAlign: 'center', padding: '10px 12px', fontSize: 13, fontWeight: 600, color: 'var(--muted-500)' }}>Internal training</th>
            </tr>
          </thead>
          <tbody>
            {rows.map(([label, a, b, c]) => (
              <tr key={label} style={{ borderTop: '1px solid var(--muted-200)' }}>
                <td style={{ padding: '14px 12px', fontSize: 14, color: 'var(--muted-700)' }}>{label}</td>
                <td style={{ padding: '14px 12px', textAlign: 'center', background: 'rgba(124,58,237,0.03)' }}><Cell v={a} /></td>
                <td style={{ padding: '14px 12px', textAlign: 'center' }}><Cell v={b} /></td>
                <td style={{ padding: '14px 12px', textAlign: 'center' }}><Cell v={c} /></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </FadeIn>
  );
}

// ============ FAQ ============
function FAQ() {
  const items = [
    ['How is this different from a Udemy course or corporate training?',
      'Courses teach AI in theory. Praxis has your team use AI on real work — the reports, emails, and analyses they already produce. The platform grades pacing between missions, and a senior practitioner reviews every portfolio submission personally. You\'re not certifying that they watched videos; you\'re certifying that they shipped.'],
    ['Why org-wide licensing instead of per-seat?',
      'Because per-seat pricing punishes rollouts. We want every person on your team using the platform, not just the two or three you bought seats for. $3,200/month flat. Unlimited seats. Anyone with your company email can join.'],
    ['What if my team is smaller than 10 people?',
      'Praxis Plus is built for teams of 10+. For smaller groups, email <a style="color:var(--praxis-primary);font-weight:600" href="mailto:praxis@shiftworksai.com">praxis@shiftworksai.com</a> — we offer discounts for smaller teams.'],
    ['We already use Copilot / ChatGPT / Claude. Why do we need this?',
      'Having access to AI tools isn\'t the same as your team knowing how to use them well. Most orgs we talk to have 90%+ tool access and 20% actual adoption. Praxis is the layer that closes that gap — training, practitioner reviews, certification, and a way for admins to see who\'s actually using it.'],
    ['How does the reviewing work?',
      'The platform uses AI grading to gauge whether someone\'s ready to move on to a new mission — it\'s pacing, not certification. Actual certifications are only issued after a ShiftWorks practitioner reviews the portfolio. Practitioners leave notes, comments, and suggestions on submissions, and every team member can reach them directly via the inbox panel between sessions.'],
    ['How is our data handled?',
      'Your mission submissions stay inside your Praxis workspace. They\'re used only to give you feedback and certify your team. We don\'t train models on your data. If your org has specific data handling requirements, email us before signing up and we\'ll talk through them.'],
    ['What if we want to cancel?',
      'Month-to-month, no contracts. Cancel any time. Your credentialed team members keep their certifications.'],
    ['Who reviews the portfolios?',
      'Senior ShiftWorks practitioners — not interns, not AI. The platform uses AI only to gauge readiness between missions; all certifications come from human review.'],
    ['How fast will my team actually be up and running?',
      'Onboarding form on Monday, first missions live within 48 hours, first portfolio submission usually within a week. The bottleneck is your team\'s time, not ours.'],
  ];
  return (
    <section id="faq" style={{ padding: '88px 0' }}>
      <div className="container-1120" style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.6fr)', gap: 64 }}>
        <FadeIn>
          <Eyebrow>FAQ</Eyebrow>
          <h2 className="font-display" style={{ margin: 0, marginBottom: 18, fontSize: 'clamp(28px, 3vw, 38px)', fontWeight: 800, letterSpacing: '-1px', lineHeight: 1.15, color: 'var(--fg)' }}>
            The short list of <span className="syne-italic gradient-text">what buyers ask.</span>
          </h2>
          <p style={{ margin: 0, fontSize: 15, color: 'var(--muted-500)', lineHeight: 1.65, marginBottom: 24 }}>
            If yours isn&apos;t here, email <a href="mailto:praxis@shiftworksai.com" style={{ color: 'var(--praxis-primary)', fontWeight: 600 }}>praxis@shiftworksai.com</a>. Real response, no sales loop.
          </p>
        </FadeIn>
        <FadeIn>
          <div>
            {items.map(([q, a], i) => (
              <details className="faq" key={q} open={i === 0}>
                <summary>
                  <span>{q}</span>
                  <span className="chev">+</span>
                </summary>
                <div className="faq-body" dangerouslySetInnerHTML={{ __html: a }} />
              </details>
            ))}
          </div>
        </FadeIn>
      </div>
      <style>{`
        @media (max-width: 820px) {
          #faq .container-1120 { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </section>
  );
}

// ============ FINAL CTA ============
function FinalCTA({ onCreateAccount, onStartPlus, onGetPlaybook }) {
  return (
    <section id="get-started" style={{ background: 'var(--muted-50)', borderTop: '1px solid var(--muted-200)', padding: '88px 0' }}>
      <div className="container-1120">
        <FadeIn style={{ textAlign: 'center', marginBottom: 48 }}>
          <Eyebrow>Now live</Eyebrow>
          <h2 className="font-display" style={{ margin: 0, marginBottom: 14, fontSize: 'clamp(30px, 3.6vw, 46px)', fontWeight: 800, letterSpacing: '-1px', lineHeight: 1.12, color: 'var(--fg)' }}>
            Three ways <span className="syne-italic gradient-text">to start.</span>
          </h2>
          <p style={{ margin: '0 auto', fontSize: 17, color: 'var(--muted-500)', maxWidth: 540, lineHeight: 1.65 }}>
            Pick the one that matches where your team is.
          </p>
        </FadeIn>
        <FadeIn>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 16 }}>
            {/* Ready now */}
            <div style={{
              border: '1px solid rgba(124,58,237,0.25)', borderRadius: 20, padding: 28,
              background: 'linear-gradient(180deg, rgba(124,58,237,0.05), white)',
              display: 'flex', flexDirection: 'column',
            }}>
              <div className="font-mono" style={{ fontSize: 11, fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase', color: 'var(--praxis-primary)', marginBottom: 10 }}>Ready now</div>
              <h3 className="font-display" style={{ margin: 0, marginBottom: 8, fontSize: 24, fontWeight: 800, letterSpacing: '-0.5px', color: 'var(--fg)' }}>Start Praxis Plus</h3>
              <p style={{ margin: 0, marginBottom: 20, fontSize: 14, color: 'var(--muted-500)', lineHeight: 1.6, flex: 1 }}>Your first missions live in 48 hours. Unlimited seats. $3,200/mo, cancel any time.</p>
              <button onClick={onStartPlus} className="btn-plus" style={{ justifyContent: 'center', width: '100%' }}>
                Start Praxis Plus →
              </button>
            </div>
            {/* Kicking tires */}
            <div style={{ border: '1px solid var(--muted-200)', borderRadius: 20, padding: 28, background: 'white', display: 'flex', flexDirection: 'column' }}>
              <div className="font-mono" style={{ fontSize: 11, fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase', color: 'var(--muted-500)', marginBottom: 10 }}>Kicking tires</div>
              <h3 className="font-display" style={{ margin: 0, marginBottom: 8, fontSize: 24, fontWeight: 800, letterSpacing: '-0.5px', color: 'var(--fg)' }}>Create a free account</h3>
              <p style={{ margin: 0, marginBottom: 20, fontSize: 14, color: 'var(--muted-500)', lineHeight: 1.6, flex: 1 }}>Explore the platform, browse free resources, see how it works. No credit card.</p>
              <button onClick={onCreateAccount} className="btn-primary" style={{ justifyContent: 'center', width: '100%' }}>
                Sign up free →
              </button>
            </div>
            {/* Still looking */}
            <div style={{ border: '1px solid var(--muted-200)', borderRadius: 20, padding: 28, background: 'white', display: 'flex', flexDirection: 'column' }}>
              <div className="font-mono" style={{ fontSize: 11, fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase', color: 'var(--muted-500)', marginBottom: 10 }}>Still looking</div>
              <h3 className="font-display" style={{ margin: 0, marginBottom: 8, fontSize: 24, fontWeight: 800, letterSpacing: '-0.5px', color: 'var(--fg)' }}>Grab the playbook</h3>
              <p style={{ margin: 0, marginBottom: 20, fontSize: 14, color: 'var(--muted-500)', lineHeight: 1.6, flex: 1 }}>The 48-Hour AI Team Readiness Playbook. A tactical PDF. No signup wall, just your email.</p>
              <button onClick={onGetPlaybook} className="btn-secondary" style={{ justifyContent: 'center', width: '100%' }}>
                Get the PDF ↓
              </button>
            </div>
          </div>
        </FadeIn>
      </div>
    </section>
  );
}

// ============ LEAD MAGNET IN-BODY ============
function PlaybookBand({ onGetPlaybook }) {
  return (
    <section className="container-1120" style={{ paddingTop: 32, paddingBottom: 64 }}>
      <FadeIn>
        <div style={{
          border: '1px solid var(--muted-200)', background: 'white', borderRadius: 20,
          padding: '28px 32px', display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 28, alignItems: 'center',
        }} className="playbook-band">
          <div style={{
            width: 84, height: 108, flexShrink: 0, borderRadius: 6,
            background: 'linear-gradient(155deg, #1a0b3d 0%, #2a0f54 50%, #6d28d9 100%)',
            color: 'white',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 10px 28px rgba(124,58,237,0.28)',
            position: 'relative', overflow: 'hidden',
          }}>
            {/* Spine highlight */}
            <div aria-hidden style={{ position: 'absolute', top: 0, left: 6, bottom: 0, width: 1, background: 'rgba(255,255,255,0.18)' }} />
            {/* Soft corner glow */}
            <div aria-hidden style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 80% 20%, rgba(0,200,224,0.25), transparent 55%)' }} />
            {/* Central glyph: stacked pages */}
            <svg width="36" height="44" viewBox="0 0 36 44" fill="none" style={{ position: 'relative', opacity: 0.95 }} aria-hidden="true">
              <rect x="8"  y="6"  width="22" height="30" rx="2" fill="rgba(255,255,255,0.18)" />
              <rect x="5"  y="10" width="22" height="30" rx="2" fill="rgba(255,255,255,0.30)" />
              <rect x="2"  y="14" width="22" height="30" rx="2" fill="white" />
              <rect x="6"  y="21" width="12" height="1.5" rx=".75" fill="#6d28d9" />
              <rect x="6"  y="26" width="14" height="1.5" rx=".75" fill="#a78bfa" />
              <rect x="6"  y="31" width="9"  height="1.5" rx=".75" fill="#a78bfa" />
            </svg>
            {/* Corner PDF pill */}
            <span className="font-mono" style={{
              position: 'absolute', bottom: 6, right: 6,
              fontSize: 8, fontWeight: 700, letterSpacing: 0.8,
              color: 'rgba(255,255,255,0.75)',
            }}>PDF</span>
          </div>
          <div>
            <Eyebrow>Not ready to sign up?</Eyebrow>
            <h3 className="font-display" style={{ margin: 0, marginBottom: 6, fontSize: 'clamp(20px, 2vw, 26px)', fontWeight: 800, letterSpacing: '-0.5px', color: 'var(--fg)' }}>
              Take the <span className="syne-italic gradient-text">48-Hour Playbook</span> with you.
            </h3>
            <p style={{ margin: 0, fontSize: 14, color: 'var(--muted-500)', lineHeight: 1.6, maxWidth: 520 }}>
              The same framework we use to onboard teams onto Praxis — written as a tactical, DIY guide. Free PDF, just drop your email.
            </p>
          </div>
          <button onClick={onGetPlaybook} className="btn-primary" style={{ whiteSpace: 'nowrap' }}>
            Get the PDF ↓
          </button>
        </div>
        <style>{`
          @media (max-width: 780px) {
            .playbook-band { grid-template-columns: 1fr !important; text-align: left; }
          }
        `}</style>
      </FadeIn>
    </section>
  );
}

// ============ PLAYBOOK MODAL ============
function PlaybookModal({ open, onClose }) {
  const [email, setEmail] = React.useState('');
  const [submitted, setSubmitted] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState('');
  if (!open) return null;
  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, zIndex: 200,
      background: 'rgba(15,17,23,0.55)',
      backdropFilter: 'blur(4px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 20,
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        background: 'white', borderRadius: 20, maxWidth: 440, width: '100%',
        overflow: 'hidden', boxShadow: '0 24px 64px rgba(0,0,0,0.3)',
      }}>
        <div style={{ padding: '28px 28px 20px', background: 'linear-gradient(135deg, #1a0b3d, #6d28d9)', color: 'white', position: 'relative' }}>
          <button onClick={onClose} aria-label="Close" style={{ position: 'absolute', top: 14, right: 14, background: 'rgba(255,255,255,0.15)', border: 'none', color: 'white', width: 28, height: 28, borderRadius: 999, cursor: 'pointer', fontSize: 14 }}>×</button>
          <div className="font-mono" style={{ fontSize: 11, fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase', opacity: 0.8, marginBottom: 8 }}>Free PDF · 12 pages</div>
          <h3 className="font-display" style={{ margin: 0, fontSize: 24, fontWeight: 800, letterSpacing: '-0.5px' }}>The 48-Hour AI Team Readiness Playbook</h3>
        </div>
        <div style={{ padding: 28 }}>
          {submitted ? (
            <div style={{ textAlign: 'center', padding: '20px 0' }}>
              <div style={{ fontSize: 32, marginBottom: 10 }}>✓</div>
              <h4 className="font-display" style={{ margin: 0, marginBottom: 8, fontSize: 22, color: 'var(--fg)' }}>Check your inbox.</h4>
              <p style={{ margin: 0, color: 'var(--muted-500)', fontSize: 14 }}>We&apos;ll send the PDF to <strong>{email}</strong> in a minute.</p>
            </div>
          ) : (
            <>
              <p style={{ margin: 0, marginBottom: 18, fontSize: 14, color: 'var(--muted-500)', lineHeight: 1.6 }}>
                The exact framework we use at ShiftWorks to onboard teams onto Praxis. Tactical, specific, and runnable by your L&amp;D team without us.
              </p>
              <form onSubmit={async (e) => {
                e.preventDefault();
                if (!email.includes('@')) return;
                setLoading(true);
                setError('');
                try {
                  const res = await fetch('/api/marketing/playbook', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ email }),
                  });
                  if (!res.ok) {
                    const payload = await res.json().catch(() => ({}));
                    throw new Error(payload?.error || 'Unable to submit right now.');
                  }
                  setSubmitted(true);
                } catch (err) {
                  setError(err?.message || 'Unable to submit right now.');
                } finally {
                  setLoading(false);
                }
              }}>
                <label style={{ display: 'block', fontSize: 12, fontWeight: 600, color: 'var(--muted-500)', marginBottom: 6, textTransform: 'uppercase', letterSpacing: .5 }}>Work email</label>
                <input
                  type="email" required
                  value={email} onChange={e => setEmail(e.target.value)}
                  placeholder="you@yourcompany.com"
                  style={{
                    width: '100%', padding: '12px 14px', borderRadius: 10,
                    border: '1px solid var(--muted-300)', fontSize: 15, fontFamily: 'inherit',
                    outline: 'none',
                  }}
                  onFocus={e => e.target.style.borderColor = 'var(--praxis-primary)'}
                  onBlur={e => e.target.style.borderColor = 'var(--muted-300)'}
                />
                <button type="submit" className="btn-primary" disabled={loading} style={{ marginTop: 14, justifyContent: 'center', width: '100%', opacity: loading ? 0.75 : 1 }}>
                  {loading ? 'Submitting…' : 'Send me the PDF'}
                </button>
                {error ? <p style={{ margin: 0, marginTop: 10, fontSize: 12, color: '#b91c1c' }}>{error}</p> : null}
                <p style={{ margin: 0, marginTop: 12, fontSize: 11, color: 'var(--muted-400)', textAlign: 'center' }}>No spam. Short nurture sequence you can unsubscribe from any time.</p>
              </form>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

// ============ FOOTER ============
function Footer() {
  return (
    <footer style={{ borderTop: '1px solid var(--muted-200)', padding: '36px 40px', background: 'var(--muted-50)' }}>
      <div style={{ maxWidth: 1120, margin: '0 auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16 }}>
        <a href="/" style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
          <span className="font-display gradient-text-subtle" style={{ fontSize: 18, fontWeight: 900, letterSpacing: '-1px' }}>Praxis</span>
          <span className="font-mono" style={{ fontSize: 11, color: 'var(--muted-400)' }}>by ShiftWorks</span>
        </a>
        <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>
          <a href="https://shiftworksai.com" style={{ fontSize: 13, color: 'var(--muted-400)' }}>ShiftWorks</a>
          <a href="https://atlas.shiftworksai.com" style={{ fontSize: 13, color: 'var(--muted-400)' }}>Atlas</a>
          <a href="mailto:praxis@shiftworksai.com" style={{ fontSize: 13, color: 'var(--muted-400)' }}>Contact</a>
        </div>
        <span style={{ fontSize: 12, color: 'var(--muted-400)' }}>© 2026 ShiftWorks AI</span>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Nav, Hero, PromiseStrip, WhatIs, MissionsBanner, FeatureRow,
  Pricing, ComparisonTable, FAQ, FinalCTA, PlaybookBand, PlaybookModal, Footer,
});