// lp-body.jsx — Sections S1–S6 (light mode body)

// ── S1: The Problem ──────────────────────────────────────────────
function SectionProblem() {
  const s = {
    section: { background: '#ffffff', padding: '96px var(--ci-container-pad)' },
    inner: { maxWidth: '720px', margin: '0 auto', textAlign: 'center', display: 'flex', flexDirection: 'column', gap: '32px' },
    eyebrow: { fontSize: '10px', fontWeight: '500', textTransform: 'uppercase', letterSpacing: '0.14em', color: '#64748b' },
    h2: { fontSize: 'clamp(28px, 3.5vw, 42px)', fontWeight: '500', letterSpacing: '-0.5px', color: '#0f172a', margin: 0, lineHeight: 1.2, textWrap: 'pretty' },
    body: { fontSize: '17px', fontWeight: '400', lineHeight: 1.75, color: '#475569', margin: 0, textWrap: 'pretty' },
    triGrid: { display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px', textAlign: 'left', marginTop: '8px' },
    triCard: { background: '#f8f9fb', border: '1px solid #e2e8f0', borderRadius: 'calc(var(--ci-radius) * 1.5)', padding: '20px 18px', display: 'flex', flexDirection: 'column', gap: '8px' },
    triLabel: { fontSize: '10px', fontWeight: '500', textTransform: 'uppercase', letterSpacing: '0.12em', color: '#94a3b8' },
    triValue: { fontSize: '14px', fontWeight: '500', color: '#0f172a', lineHeight: 1.4 },
  };

  const scattered = [
    { label: 'Spreadsheet', value: 'Application rows. No relationship context attached.' },
    { label: 'Email + notes', value: 'Who said what, scattered across threads and docs.' },
    { label: 'Memory', value: 'The follow-up you promised, three weeks ago.' },
  ];

  return (
    <section style={s.section} id="problem">
      <div style={s.inner} className="fade-in">
        <p style={s.eyebrow}>The Problem</p>
        <h2 style={s.h2}>Your search is not just a list of jobs.</h2>
        <p style={s.body}>
          Every serious opportunity comes with relationship context: the recruiter note, the referral path, the interview objection, the person who offered to help, and the follow-up you cannot afford to forget. Spreadsheets track rows. Resume tools polish documents. ContextualIntel keeps the human context connected to the opportunity.
        </p>
        <div style={s.triGrid} className="ci-stagger">
          {scattered.map((item) => (
            <div key={item.label} style={s.triCard} className="ci-card">
              <span style={s.triLabel}>{item.label}</span>
              <span style={s.triValue}>{item.value}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── S2: Proof Tiles ──────────────────────────────────────────────
function SectionProof() {
  const s = {
    section: { background: '#f8f9fb', padding: '96px var(--ci-container-pad)' },
    inner: { maxWidth: '1180px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '48px' },
    header: { textAlign: 'center', display: 'flex', flexDirection: 'column', gap: '12px' },
    eyebrow: { fontSize: '10px', fontWeight: '500', textTransform: 'uppercase', letterSpacing: '0.14em', color: '#64748b' },
    h2: { fontSize: 'clamp(26px, 3vw, 40px)', fontWeight: '500', letterSpacing: '-0.4px', color: '#0f172a', margin: 0, lineHeight: 1.2, textWrap: 'pretty' },
    grid: { display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px' },
    tile: { background: '#ffffff', border: '1px solid #e2e8f0', borderRadius: 'calc(var(--ci-radius) * 2)', padding: '28px 24px', display: 'flex', flexDirection: 'column', gap: '16px' },
    tileLabel: { fontSize: '10px', fontWeight: '500', textTransform: 'uppercase', letterSpacing: '0.12em', color: '#94a3b8' },
    tileTitle: { fontSize: '16px', fontWeight: '600', color: '#0f172a', letterSpacing: '-0.2px' },
    // Mini app-UI inside each tile
    miniCard: { background: '#f8f9fb', border: '1px solid #e2e8f0', borderRadius: 'var(--ci-radius)', padding: '10px 12px', display: 'flex', flexDirection: 'column', gap: '6px' },
    miniRow: { display: 'flex', alignItems: 'center', gap: '8px' },
    miniDot: (c) => ({ width: '6px', height: '6px', borderRadius: '50%', background: c, flexShrink: 0 }),
    miniText: { fontSize: '12px', color: '#334155', lineHeight: 1.4 },
    miniMeta: { fontSize: '11px', color: '#94a3b8' },
    badge: (c) => ({ display: 'inline-flex', alignItems: 'center', height: '18px', padding: '0 7px', background: `${c}20`, color: c, border: `1px solid ${c}40`, borderRadius: 'var(--ci-radius)', fontSize: '10px', fontWeight: '500' }),
    personChip: (c) => ({ display: 'flex', alignItems: 'center', gap: '7px', padding: '7px 10px', background: '#f8f9fb', border: '1px solid #e2e8f0', borderRadius: 'var(--ci-radius)' }),
    chipAvatar: (c) => ({ width: '22px', height: '22px', borderRadius: 'var(--ci-radius)', background: `${c}22`, color: c, fontSize: '8px', fontWeight: '600', display: 'flex', alignItems: 'center', justifyContent: 'center', border: `1px solid ${c}33`, flexShrink: 0 }),
    chipText: { fontSize: '11px', fontWeight: '500', color: '#334155' },
    chipSub: { fontSize: '10px', color: '#94a3b8', marginLeft: 'auto' },
  };

  return (
    <section style={s.section} id="proof">
      <div style={s.inner}>
        <div style={s.header} className="fade-in">
          <p style={s.eyebrow}>Proof</p>
          <h2 style={s.h2}>See the whole opportunity, not just the application row.</h2>
        </div>

        <div style={s.grid} className="ci-stagger">
          {/* Tile 1: Application context */}
          <div style={s.tile} className="ci-card">
            <p style={s.tileLabel}>Application context</p>
            <p style={s.tileTitle}>Every role, fully loaded.</p>
            <div style={s.miniCard}>
              <div style={s.miniRow}>
                <span style={{ fontSize: '13px', fontWeight: '600', color: '#0f172a' }}>Product Lead</span>
                <span style={s.badge('#2563eb')}>Intro requested</span>
              </div>
              <div style={s.miniRow}>
                <span style={s.miniText}>Northstar AI</span>
                <span style={{ ...s.miniMeta, marginLeft: 'auto' }}>Due Thursday</span>
              </div>
            </div>
          </div>

          {/* Tile 2: Relationship memory */}
          <div style={s.tile} className="ci-card">
            <p style={s.tileLabel}>Relationship memory</p>
            <p style={s.tileTitle}>The people behind the opportunity.</p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
              {[
                { init: 'MC', color: '#8b82ff', name: 'Maya Chen', role: 'Former teammate' },
                { init: 'LR', color: '#7be7c4', name: 'Luis Romero', role: 'Coffee chat' },
                { init: 'PS', color: '#ffb86b', name: 'Priya Shah', role: '2nd-degree intro' },
              ].map(p => (
                <div key={p.init} style={s.personChip(p.color)}>
                  <div style={s.chipAvatar(p.color)}>{p.init}</div>
                  <span style={s.chipText}>{p.name}</span>
                  <span style={s.chipSub}>{p.role}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Tile 3: Conversation evidence */}
          <div style={s.tile} className="ci-card">
            <p style={s.tileLabel}>Conversation evidence</p>
            <p style={s.tileTitle}>What was actually said.</p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
              {[
                { color: '#2563eb', text: 'Recruiter asked for evidence of enterprise launch experience' },
                { color: '#7be7c4', text: 'Luis: team values crisp, specific customer examples' },
                { color: '#ffb86b', text: 'Maya flagged decision speed as the hiring team\'s biggest risk' },
              ].map((entry, i) => (
                <div key={i} style={s.miniCard}>
                  <div style={{ display: 'flex', gap: '8px', alignItems: 'flex-start' }}>
                    <div style={{ ...s.miniDot(entry.color), marginTop: '4px' }}></div>
                    <span style={s.miniText}>{entry.text}</span>
                  </div>
                </div>
              ))}
            </div>
          </div>

          {/* Tile 4: Next actions */}
          <div style={s.tile} className="ci-card">
            <p style={s.tileLabel}>Next actions</p>
            <p style={s.tileTitle}>What needs to happen this week.</p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
              {[
                'Draft intro ask to Maya',
                'Follow up with Luis on Thursday',
                'Attach enterprise launch story to application',
              ].map((action, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: '8px' }}>
                  <div style={{ width: '14px', height: '14px', border: '1.5px solid #cbd5e1', borderRadius: '3px', flexShrink: 0, marginTop: '1px' }}></div>
                  <span style={{ fontSize: '12px', color: '#334155', lineHeight: 1.5 }}>{action}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── S3: Product Loop ──────────────────────────────────────────────
function SectionProductLoop() {
  const s = {
    section: { background: '#ffffff', padding: '96px var(--ci-container-pad)' },
    inner: { maxWidth: '1180px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '48px' },
    header: { textAlign: 'center', display: 'flex', flexDirection: 'column', gap: '12px' },
    eyebrow: { fontSize: '10px', fontWeight: '500', textTransform: 'uppercase', letterSpacing: '0.14em', color: '#64748b' },
    h2: { fontSize: 'clamp(26px, 3vw, 40px)', fontWeight: '500', letterSpacing: '-0.4px', color: '#0f172a', margin: 0, lineHeight: 1.2 },
    cards: { display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: '12px' },
    card: { background: '#f8f9fb', border: '1px solid #e2e8f0', borderRadius: 'calc(var(--ci-radius) * 2)', padding: '24px 18px', display: 'flex', flexDirection: 'column', gap: '12px' },
    cardIcon: (c) => ({ width: '36px', height: '36px', borderRadius: 'var(--ci-radius)', background: `${c}18`, color: c, display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '16px', border: `1px solid ${c}28` }),
    cardTitle: { fontSize: '14px', fontWeight: '600', color: '#0f172a', letterSpacing: '-0.1px' },
    cardDesc: { fontSize: '12px', color: '#64748b', lineHeight: 1.6 },
  };

  const features = [
    { icon: '▦', color: '#2563eb', title: 'Applications', desc: 'Every role with stage, deadline, and full context attached.' },
    { icon: '◈', color: '#8b82ff', title: 'Journal', desc: 'Record what was said, promised, and what changed.' },
    { icon: '◉', color: '#7be7c4', title: 'People', desc: 'The contacts behind each opportunity — and their role in it.' },
    { icon: '→', color: '#ffb86b', title: 'Outreach', desc: 'Drafts tied to the context that makes them land.' },
    { icon: '◷', color: '#f87aa0', title: 'Follow-ups', desc: 'Never reconstruct what you need to do and when.' },
  ];

  return (
    <section style={s.section} id="features">
      <div style={s.inner}>
        <div style={s.header} className="fade-in">
          <p style={s.eyebrow}>Product Loop</p>
          <h2 style={s.h2}>One loop for applications, conversations, and next steps.</h2>
        </div>
        <div style={s.cards} className="ci-stagger">
          {features.map(f => (
            <div key={f.title} style={s.card} className="ci-card">
              <div style={s.cardIcon(f.color)}>{f.icon}</div>
              <div style={s.cardTitle}>{f.title}</div>
              <div style={s.cardDesc}>{f.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── S4: How It Works ──────────────────────────────────────────────
function SectionHowItWorks() {
  const s = {
    section: { background: '#f8f9fb', padding: '96px var(--ci-container-pad)' },
    inner: { maxWidth: '1180px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '56px' },
    header: { textAlign: 'center', display: 'flex', flexDirection: 'column', gap: '12px' },
    eyebrow: { fontSize: '10px', fontWeight: '500', textTransform: 'uppercase', letterSpacing: '0.14em', color: '#64748b' },
    h2: { fontSize: 'clamp(26px, 3vw, 40px)', fontWeight: '500', letterSpacing: '-0.4px', color: '#0f172a', margin: 0, lineHeight: 1.2, textWrap: 'pretty' },
    steps: { display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: '0', position: 'relative' },
    stepLine: { position: 'absolute', top: '20px', left: '10%', right: '10%', height: '1px', background: '#e2e8f0', zIndex: 0 },
    step: { display: 'flex', flexDirection: 'column', gap: '14px', alignItems: 'center', textAlign: 'center', position: 'relative', zIndex: 1, padding: '0 8px' },
    stepNum: { width: '40px', height: '40px', borderRadius: '50%', background: '#ffffff', border: '1px solid #e2e8f0', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '13px', fontWeight: '600', color: '#2563eb' },
    stepTitle: { fontSize: '13px', fontWeight: '600', color: '#0f172a', lineHeight: 1.3 },
    stepDesc: { fontSize: '12px', color: '#64748b', lineHeight: 1.55 },
  };

  const steps = [
    { title: 'Add the opportunity', desc: 'Role, company, stage, and deadline in one place.' },
    { title: 'Attach the people', desc: 'Map contacts to the search. Note their role in it.' },
    { title: 'Record the conversation', desc: 'What was said. What changed. What you learned.' },
    { title: 'Turn context into action', desc: 'Next steps flow from what you actually know.' },
    { title: 'Keep the loop visible', desc: 'Nothing falls through. Nothing needs reconstructing.' },
  ];

  return (
    <section style={s.section} id="how-it-works">
      <div style={s.inner}>
        <div style={s.header} className="fade-in">
          <p style={s.eyebrow}>How It Works</p>
          <h2 style={s.h2}>Start with the role. Keep the context moving with it.</h2>
        </div>
        <div style={s.steps} className="ci-stagger">
          <div style={s.stepLine}></div>
          {steps.map((step, i) => (
            <div key={i} style={s.step}>
              <div style={s.stepNum}>{i + 1}</div>
              <div style={s.stepTitle}>{step.title}</div>
              <div style={s.stepDesc}>{step.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── S5: Who It's For ──────────────────────────────────────────────
function SectionWhoItsFor() {
  const s = {
    section: { background: '#ffffff', padding: '96px var(--ci-container-pad)' },
    inner: { maxWidth: '1180px', margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '80px', alignItems: 'center' },
    left: { display: 'flex', flexDirection: 'column', gap: '24px' },
    eyebrow: { fontSize: '10px', fontWeight: '500', textTransform: 'uppercase', letterSpacing: '0.14em', color: '#64748b' },
    h2: { fontSize: 'clamp(26px, 3vw, 38px)', fontWeight: '500', letterSpacing: '-0.4px', color: '#0f172a', margin: 0, lineHeight: 1.25, textWrap: 'pretty' },
    bullets: { display: 'flex', flexDirection: 'column', gap: '16px' },
    bullet: { display: 'flex', alignItems: 'flex-start', gap: '12px' },
    bulletDot: { width: '6px', height: '6px', borderRadius: '50%', background: '#2563eb', marginTop: '7px', flexShrink: 0 },
    bulletText: { fontSize: '15px', color: '#334155', lineHeight: 1.6 },
    right: { display: 'flex', flexDirection: 'column', gap: '12px' },
    notCard: { background: '#f8f9fb', border: '1px solid #e2e8f0', borderRadius: 'calc(var(--ci-radius) * 1.5)', padding: '20px 22px', display: 'flex', flexDirection: 'column', gap: '6px' },
    notLabel: { fontSize: '10px', fontWeight: '500', textTransform: 'uppercase', letterSpacing: '0.1em', color: '#94a3b8' },
    notTitle: { fontSize: '14px', fontWeight: '500', color: '#475569' },
    notDesc: { fontSize: '12px', color: '#94a3b8', lineHeight: 1.5 },
    vsRow: { display: 'flex', alignItems: 'center', gap: '8px', padding: '8px 0' },
    vsLabel: { fontSize: '11px', color: '#94a3b8', flexShrink: 0 },
    vsLine: { flex: 1, height: '1px', background: '#e2e8f0' },
    vsThis: { fontSize: '12px', fontWeight: '500', color: '#2563eb', flexShrink: 0 },
  };

  const bullets = [
    'You already have useful relationships but lose momentum because context is scattered',
    'You navigate referral paths, not job boards — and need a workspace to match',
    'You need private memory for conversations, compensation notes, and interview feedback',
    'You\'re tired of reconstructing who said what and what needs to happen next',
  ];

  return (
    <section style={s.section} id="who">
      <div style={s.inner}>
        <div style={s.left} className="fade-in">
          <p style={s.eyebrow}>Who It\'s For</p>
          <h2 style={s.h2}>Built for career moves where relationships matter.</h2>
          <div style={s.bullets}>
            {bullets.map((b, i) => (
              <div key={i} style={s.bullet}>
                <div style={s.bulletDot}></div>
                <span style={s.bulletText}>{b}</span>
              </div>
            ))}
          </div>
        </div>
        <div style={s.right} className="ci-stagger fade-in-delay">
          <div style={s.notCard} className="ci-card">
            <p style={s.notLabel}>Not for</p>
            <p style={s.notTitle}>Entry-level cold applicants</p>
            <p style={s.notDesc}>If your next role comes from a job board, this isn\'t the right tool.</p>
          </div>
          <div style={s.notCard} className="ci-card">
            <p style={s.notLabel}>Not for</p>
            <p style={s.notTitle}>Sales teams managing pipelines</p>
            <p style={s.notDesc}>A sales CRM is built for volume. This is built for depth.</p>
          </div>
          <div style={s.notCard} className="ci-card">
            <p style={s.notLabel}>Built for</p>
            <p style={{ ...s.notTitle, color: '#0f172a', fontWeight: '600' }}>Senior professionals in an active or near-term career move</p>
            <p style={{ ...s.notDesc, color: '#475569' }}>Director+, VP, C-suite. People who know their next role comes through a conversation.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── S6: Social Proof ──────────────────────────────────────────────
function SectionSocialProof() {
  const s = {
    section: { background: '#f8f9fb', padding: '96px var(--ci-container-pad)' },
    inner: { maxWidth: '1180px', margin: '0 auto', display: 'flex', flexDirection: 'column', gap: '48px' },
    header: { textAlign: 'center', display: 'flex', flexDirection: 'column', gap: '12px' },
    eyebrow: { fontSize: '10px', fontWeight: '500', textTransform: 'uppercase', letterSpacing: '0.14em', color: '#64748b' },
    h2: { fontSize: 'clamp(24px, 2.5vw, 36px)', fontWeight: '500', letterSpacing: '-0.4px', color: '#0f172a', margin: 0, lineHeight: 1.3, textWrap: 'pretty' },
    quoteCard: { background: '#ffffff', border: '1px solid #e2e8f0', borderRadius: 'calc(var(--ci-radius) * 2)', padding: '40px 48px', display: 'flex', flexDirection: 'column', gap: '20px', maxWidth: '720px', margin: '0 auto' },
    quoteText: { fontSize: '20px', fontWeight: '400', lineHeight: 1.65, color: '#0f172a', fontStyle: 'italic', textWrap: 'pretty' },
    quoteMeta: { fontSize: '12px', color: '#94a3b8', fontStyle: 'normal', display: 'flex', alignItems: 'center', gap: '8px' },
    quoteDot: { width: '4px', height: '4px', borderRadius: '50%', background: '#cbd5e1' },
    betaBadge: { display: 'inline-flex', alignItems: 'center', height: '22px', padding: '0 10px', background: 'color-mix(in srgb, #2563eb 12%, transparent)', color: '#2563eb', border: '1px solid color-mix(in srgb, #2563eb 25%, transparent)', borderRadius: 'var(--ci-radius)', fontSize: '10px', fontWeight: '500', letterSpacing: '0.06em', textTransform: 'uppercase', alignSelf: 'flex-start' },
  };

  return (
    <section style={s.section}>
      <div style={s.inner}>
        <div style={s.header} className="fade-in">
          <p style={s.eyebrow}>Social Proof</p>
          <h2 style={s.h2}>Built from real search friction, not generic CRM assumptions.</h2>
        </div>
        <div style={s.quoteCard} className="fade-in ci-card">
          <span style={s.betaBadge}>Beta feedback</span>
          <p style={s.quoteText}>
            "I do not need another spreadsheet. I need to remember who said what, when to follow up, and how each conversation changes the opportunity."
          </p>
          <div style={s.quoteMeta}>
            <span>Senior professional, active career search</span>
            <div style={s.quoteDot}></div>
            <span>Beta tester</span>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { SectionProblem, SectionProof, SectionProductLoop, SectionHowItWorks, SectionWhoItsFor, SectionSocialProof });