// Expanded sections for VariationB:
//   VarB_HowRich        — "one partner handles everything" with stepper + outcomes rail
//   VarB_Compliance     — compliance-first deep dive (four pillars)
//   VarB_Engagement     — Pilot → Scale → Embed phase ladder
//   VarB_FooterRich     — full sitemap, contact, compliance line

function VarB_HowRich() {
  const isMobile = useIsMobile();
  const outcomes = [
    { k: 'Timeline', v: '6–8 wks', d: 'Pilot from brief to first live post — including MLR review.' },
    { k: 'MLR turnaround', v: '2.1d', d: 'Average across Eddy campaigns, down from 11d industry avg.' },
    { k: 'Creator pool', v: '400+', d: 'Vetted patient & HCP creators across 30+ therapeutic areas.' },
    { k: 'Team lift', v: '1 PM', d: 'What Eddy asks of your brand team. We handle the rest.' },
  ];
  return (
    <section id="how" style={{
      padding: isMobile ? '72px 20px' : '104px 56px',
      borderTop: `1px solid ${B_PALETTE.rule}`,
    }}>
      <div style={{
        display:'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1.25fr 1fr',
        gap: isMobile ? 24 : 80,
        alignItems: isMobile ? 'start' : 'end',
        marginBottom: isMobile ? 40 : 56,
      }}>
        <h2 style={{
          fontFamily: '"Source Serif Pro", Georgia, serif',
          fontSize: 'clamp(32px, 5.5vw, 60px)', lineHeight: 1.04, letterSpacing: '-0.03em',
          color: B_PALETTE.ink, fontWeight: 400, margin: 0,
          textWrap: 'balance', WebkitTextWrap: 'balance',
        }}>
          From brief to live post — <span style={{fontStyle:'italic'}}>Eddy</span> handles everything.
        </h2>
        <p style={{ fontFamily:'"Inter", sans-serif', fontSize: 15.5, lineHeight:1.55, color: B_PALETTE.body, maxWidth: 440, margin:0 }}>
          Six stages, one workflow. {isMobile ? 'Tap' : 'Click'} any stage to step through what Eddy owns — and what lands
          back in your team's hands. There's no separate agency, no manual handoff, no "we'll send you a
          CSV and circle back."
        </p>
      </div>

      <HowItWorksStepper palette={B_PALETTE} accentStrong />

      {/* outcomes rail */}
      <div style={{
        marginTop: isMobile ? 48 : 72, padding: '40px 0 0',
        borderTop: `1px solid ${B_PALETTE.rule}`,
        display:'grid',
        gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(4, 1fr)',
        gap: isMobile ? 32 : 0,
        rowGap: isMobile ? 36 : 0,
      }}>
        {outcomes.map((s, i, a) => (
          <div key={s.k} style={{
            padding: isMobile ? 0 : '4px 28px 4px 0',
            marginRight: isMobile ? 0 : 28,
            borderRight: !isMobile && i < a.length-1 ? `1px solid ${B_PALETTE.rule}` : 'none',
          }}>
            <div style={{
              fontFamily:'"Inter", sans-serif', fontSize: 10.5,
              letterSpacing:'0.22em', textTransform:'uppercase',
              color: B_PALETTE.mute, fontWeight: 600, marginBottom: 14,
            }}>{s.k}</div>
            <div style={{
              fontFamily:'"Source Serif Pro", Georgia, serif',
              fontSize: 'clamp(36px, 6vw, 52px)',
              letterSpacing:'-0.025em', lineHeight: 1.0, color: B_PALETTE.ink, fontWeight: 400,
            }}>{s.v}</div>
            <div style={{
              fontFamily:'"Inter", sans-serif', fontSize: 13.5, lineHeight: 1.5,
              color: B_PALETTE.body, marginTop: 14, maxWidth: 240,
            }}>{s.d}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function VarB_Compliance() {
  const pillars = [
    {
      roman: 'I',
      k: 'Compliance first',
      h: 'Every creator, every post, triple-reviewed before MLR.',
      points: [
        'Creators trained on compliance best practices at onboarding.',
        'In-depth guidance from the Eddy MLR team throughout every campaign.',
        'Human + AI review before any content reaches your compliance team.',
      ],
    },
    {
      roman: 'II',
      k: 'Thorough vetting',
      h: 'We know every creator personally — before your brand sees them.',
      points: [
        'Every creator is personally interviewed on the platform.',
        'Automated and human-reviewed background checks.',
        'Compliance risks surfaced early — before contracts are signed.',
      ],
    },
    {
      roman: 'III',
      k: 'Seamless feedback',
      h: 'Review rounds that used to take weeks, done in days.',
      points: [
        'Inline comments and versioning on every asset.',
        'Direct handoff to your MLR system of record.',
        'Full audit trail preserved for every revision.',
      ],
    },
    {
      roman: 'IV',
      k: 'Analytics made easy',
      h: 'Campaign performance in the language your brand team speaks.',
      points: [
        'Reach, engagement, and sentiment by creator and asset.',
        'Benchmarked against category norms we see across Eddy.',
        'Exportable reporting packs for brand, legal, and leadership.',
      ],
    },
  ];
  return (
    <section id="compliance" style={{
      padding: '104px 56px', background: B_PALETTE.bgAlt, borderTop: `1px solid ${B_PALETTE.rule}`,
    }}>
      <div style={{ display:'grid', gridTemplateColumns:'1.15fr 1fr', gap: 80, alignItems:'end', marginBottom: 64 }}>
        <h2 style={{
          fontFamily: '"Source Serif Pro", Georgia, serif',
          fontSize: 60, lineHeight: 1.02, letterSpacing: '-0.03em',
          color: B_PALETTE.ink, fontWeight: 400, margin: 0,
        }}>
          Compliance is <span style={{fontStyle:'italic', color: B_PALETTE.accent}}>in the workflow</span> — not bolted on at the end.
        </h2>
        <p style={{ fontFamily:'"Inter", sans-serif', fontSize: 15.5, lineHeight:1.55, color: B_PALETTE.body, maxWidth: 460, margin:0 }}>
          The reason pharma creator marketing hasn't scaled is not that the channel doesn't work.
          It's that the operating model doesn't. Eddy rebuilds it from the ground up, with MLR,
          legal, and medical embedded at every stage.
        </p>
      </div>

      <div style={{
        display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap: 0,
        border: `1px solid ${B_PALETTE.rule}`, background: B_PALETTE.cardBg,
      }}>
        {pillars.map((p, i) => (
          <div key={p.roman} style={{
            padding: '32px 36px 36px',
            borderRight: i%2===0 ? `1px solid ${B_PALETTE.rule}` : 'none',
            borderBottom: i<2 ? `1px solid ${B_PALETTE.rule}` : 'none',
            display:'grid', gridTemplateColumns:'60px 1fr', gap: 24, alignItems:'start',
          }}>
            <div style={{
              fontFamily:'"Source Serif Pro", Georgia, serif',
              fontSize: 56, letterSpacing:'-0.01em', lineHeight: 1.0,
              color: B_PALETTE.accent, fontWeight: 400, fontStyle:'italic',
            }}>{p.roman}</div>
            <div>
              <div style={{
                fontFamily:'"Inter", sans-serif', fontSize: 10.5,
                letterSpacing:'0.22em', textTransform:'uppercase',
                color: B_PALETTE.mute, fontWeight: 600, marginBottom: 10,
              }}>{p.k}</div>
              <div style={{
                fontFamily:'"Source Serif Pro", Georgia, serif',
                fontSize: 22, lineHeight: 1.2, letterSpacing:'-0.015em',
                color: B_PALETTE.ink, fontWeight: 400, marginBottom: 20,
              }}>{p.h}</div>
              <ul style={{ listStyle:'none', padding: 0, margin: 0, display:'flex', flexDirection:'column', gap: 10 }}>
                {p.points.map((pt,j)=>(
                  <li key={j} style={{ display:'flex', gap: 12, fontSize: 13.5, lineHeight: 1.5, color: B_PALETTE.body }}>
                    <span style={{color: B_PALETTE.accent, flex:'0 0 auto'}}>—</span>
                    <span>{pt}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function VarB_Engagement() {
  const phases = [
    { n:'01', k:'Pilot',  cad:'6–8 weeks',
      d:'One brand, one indication. 3–5 creators. We establish baseline performance and prove the compliance model on a live therapeutic area.',
      bullets:['Single therapeutic area','3–5 vetted creators','Baseline performance benchmarks','Compliance model validated'] },
    { n:'02', k:'Scale',  cad:'Quarterly cadence',
      d:'Expand to additional indications and therapeutic areas with a dedicated creator bench, always-on compliance review, and quarterly strategy reviews.',
      bullets:['Multi-indication rollout','Dedicated creator bench','Always-on MLR review','Quarterly strategy reviews'] },
    { n:'03', k:'Embed',  cad:'Annual partnership',
      d:'Eddy becomes the creator infrastructure across your portfolio. Enterprise agreement, full integration with your MLR and media stack.',
      bullets:['Portfolio-wide program','Enterprise agreement','MLR & media stack integration','Dedicated Eddy team'] },
  ];
  return (
    <section id="engagement" style={{ padding: '104px 56px', borderTop: `1px solid ${B_PALETTE.rule}` }}>
      <SectionLabel palette={B_PALETTE} num="06" style={{marginBottom: 40}}>Engagement model</SectionLabel>
      <div style={{ display:'grid', gridTemplateColumns:'1.15fr 1fr', gap: 80, alignItems:'end', marginBottom: 60 }}>
        <h2 style={{
          fontFamily: '"Source Serif Pro", Georgia, serif',
          fontSize: 60, lineHeight: 1.02, letterSpacing: '-0.03em',
          color: B_PALETTE.ink, fontWeight: 400, margin: 0,
        }}>
          A <span style={{fontStyle:'italic', color: B_PALETTE.accent}}>lightweight start</span> — a partnership that grows with the results.
        </h2>
        <p style={{ fontFamily:'"Inter", sans-serif', fontSize: 15.5, lineHeight: 1.55, color: B_PALETTE.body, maxWidth: 440, margin:0 }}>
          Most partners start with one brand and one indication. The best expand from there — into
          portfolios, and eventually into the default creator infrastructure across their pharma org.
        </p>
      </div>

      <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 0, border: `1px solid ${B_PALETTE.rule}` }}>
        {phases.map((p,i)=>(
          <div key={p.n} style={{
            padding: '36px 32px 40px',
            background: i===0 ? B_PALETTE.darkBg : B_PALETTE.cardBg,
            color: i===0 ? B_PALETTE.darkInk : B_PALETTE.ink,
            borderRight: i<2 ? `1px solid ${i===0 ? B_PALETTE.darkRule : B_PALETTE.rule}` : 'none',
            display:'flex', flexDirection:'column', gap: 18, minHeight: 340,
          }}>
            <div style={{ display:'flex', justifyContent:'space-between', alignItems:'baseline' }}>
              <span style={{
                fontFamily:'"Inter", sans-serif', fontSize: 10.5,
                letterSpacing:'0.22em', textTransform:'uppercase',
                color: i===0 ? B_PALETTE.darkMute : B_PALETTE.mute, fontWeight: 600,
              }}>Phase {p.n}</span>
              <span style={{
                fontFamily:'"Inter", sans-serif', fontSize: 10.5,
                letterSpacing:'0.18em', textTransform:'uppercase',
                color: i===0 ? B_PALETTE.accent2 : B_PALETTE.accent, fontWeight: 600,
              }}>{p.cad}</span>
            </div>
            <div style={{
              fontFamily:'"Source Serif Pro", Georgia, serif', fontSize: 56,
              letterSpacing:'-0.03em', lineHeight: 0.95, fontWeight: 400,
            }}>{p.k}</div>
            <div style={{
              fontFamily:'"Inter", sans-serif', fontSize: 14, lineHeight: 1.55,
              color: i===0 ? 'rgba(245,242,236,0.78)' : B_PALETTE.body,
            }}>{p.d}</div>
            <ul style={{
              listStyle:'none', padding: '18px 0 0', margin:'auto 0 0',
              borderTop: `1px solid ${i===0 ? B_PALETTE.darkRule : B_PALETTE.rule}`,
              display:'flex', flexDirection:'column', gap: 8,
            }}>
              {p.bullets.map((b,j)=>(
                <li key={j} style={{
                  fontFamily:'"Inter", sans-serif', fontSize: 12.5,
                  color: i===0 ? 'rgba(245,242,236,0.72)' : B_PALETTE.body,
                  display:'flex', gap: 10,
                }}>
                  <span style={{color: i===0 ? B_PALETTE.accent2 : B_PALETTE.accent}}>→</span>
                  <span>{b}</span>
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </section>
  );
}

function VarB_FooterRich() {
  const isMobile = useIsMobile();
  return (
    <footer style={{
      background: B_PALETTE.darkBg, color: B_PALETTE.darkInk,
      fontFamily: '"Inter", sans-serif',
      padding: isMobile ? '56px 20px 28px' : '72px 56px 32px',
      borderTop: `1px solid ${B_PALETTE.darkRule}`, position: 'relative', overflow:'hidden',
    }}>
      {/* top — brand + contact */}
      <div style={{
        display:'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1.3fr 1fr',
        gap: isMobile ? 36 : 80,
        paddingBottom: isMobile ? 40 : 56,
        borderBottom: `1px solid ${B_PALETTE.darkRule}`, alignItems:'start',
      }}>
        <div>
          <div style={{display:'flex', alignItems:'center', gap: 12, marginBottom: 20}}>
            <div style={{
              fontFamily:'"Source Serif Pro", Georgia, serif', fontSize: 36,
              letterSpacing:'-0.03em', color: B_PALETTE.darkInk, fontWeight: 500,
            }}>Eddy</div>
            <span style={{ fontSize: 10.5, letterSpacing: '0.22em', color: B_PALETTE.darkMute, textTransform:'uppercase', fontWeight: 600, paddingLeft: 14, borderLeft: `1px solid ${B_PALETTE.darkRule}` }}>
              Health
            </span>
          </div>
          <p style={{
            fontSize: 14, lineHeight: 1.55, color: 'rgba(245,242,236,0.68)', margin: 0, maxWidth: 380,
          }}>
            The operating system for compliant, scalable creator marketing in pharma. Brand, medical,
            and legal — one surface, from brief to live post.
          </p>
        </div>
        <div>
          <div style={{ fontSize: 10.5, letterSpacing: '0.22em', textTransform:'uppercase', color: B_PALETTE.darkMute, fontWeight: 600, marginBottom: 14 }}>
            Contact
          </div>
          <a href="mailto:hello@witheddy.ai" style={{
            fontFamily:'"Source Serif Pro", Georgia, serif', fontSize: 28,
            letterSpacing:'-0.015em', color: B_PALETTE.darkInk, textDecoration:'none',
            display:'block', marginBottom: 10,
          }}>hello@witheddy.ai</a>
          <div style={{ fontSize: 13, color: 'rgba(245,242,236,0.62)', lineHeight: 1.6 }}>
            New York · Remote-first
          </div>
        </div>
      </div>

      {/* bottom bar */}
      <div style={{
        display:'flex', justifyContent:'space-between', alignItems:'center',
        paddingTop: 28, fontSize: 12, color: 'rgba(245,242,236,0.55)',
        flexWrap: 'wrap', gap: 16,
      }}>
        <div>© 2026 Eddy Health, Inc. · Operates as Eddy at witheddy.ai. All rights reserved.</div>
        <div style={{display:'flex', gap: 24, fontSize: 12.5}}>
          <a href="/privacy" style={{color:'inherit', textDecoration:'none'}}>Privacy</a>
          <a href="/terms" style={{color:'inherit', textDecoration:'none'}}>Terms</a>
          <a href="/security" style={{color:'inherit', textDecoration:'none'}}>Security</a>
        </div>
      </div>
    </footer>
  );
}

window.VarB_HowRich = VarB_HowRich;
window.VarB_Compliance = VarB_Compliance;
window.VarB_Engagement = VarB_Engagement;
window.VarB_FooterRich = VarB_FooterRich;