// Variation B — Navy-dominant confident hero.
// Hero is full-width dark navy with split layout: big statement left,
// live-feeling dashboard mock right. Body returns to cream for content
// sections, with a second dark section for the CTA.

const B_PALETTE = {
  bg: '#F5F2EC',
  bgAlt: '#EFEAE0',
  cardBg: '#FBF8F2',
  ink: '#0B1F3A',
  body: 'rgba(11, 31, 58, 0.78)',
  mute: 'rgba(11, 31, 58, 0.52)',
  rule: 'rgba(11, 31, 58, 0.14)',
  accent: '#B8894A',
  accent2: '#E8C06A',
  stepActive: '#EFEAE0',
  // dark
  darkBg: '#0B1F3A',
  darkBgAlt: '#0E2340',
  darkInk: '#F5F2EC',
  darkMute: 'rgba(245,242,236,0.58)',
  darkRule: 'rgba(245,242,236,0.14)',
};

function VarB_Nav() {
  const isMobile = useIsMobile();
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => { if (!isMobile && open) setOpen(false); }, [isMobile]);
  // Lock body scroll while menu is open. Deterministic: any time the menu is
  // not open (or we're not on mobile), clear the lock. Avoids "stuck hidden"
  // bugs when viewport changes mid-open or on rotate.
  React.useEffect(() => {
    if (typeof document === 'undefined') return;
    const shouldLock = isMobile && open;
    document.body.style.overflow = shouldLock ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [isMobile, open]);

  const links = [
    { href: '#platform', label: 'Platform' },
    { href: '#how', label: 'How it works' },
    { href: '#work-with-us', label: 'Contact' },
  ];

  return (
    <>
      <div style={{
        display:'flex', alignItems:'center', justifyContent:'space-between',
        padding: isMobile ? '14px 20px' : '20px 56px',
        fontFamily: '"Inter", ui-sans-serif, system-ui, sans-serif',
        position: 'sticky', top: 0, zIndex: 20,
        background: 'rgba(11,31,58,0.88)', backdropFilter: 'blur(12px)',
        borderBottom: `1px solid ${B_PALETTE.darkRule}`,
      }}>
        <div style={{display:'flex', alignItems:'center', gap: 10}}>
          <div style={{
            fontFamily:'"Source Serif Pro", "Source Serif 4", Georgia, serif',
            fontSize: isMobile ? 22 : 26, letterSpacing: '-0.03em', color: B_PALETTE.darkInk, fontWeight: 500,
          }}>Eddy</div>
          <span style={{ fontSize: 10.5, letterSpacing: '0.2em', color: B_PALETTE.darkMute, textTransform:'uppercase', fontWeight: 600, marginLeft: 4, paddingLeft: 12, borderLeft: `1px solid ${B_PALETTE.darkRule}` }}>
            Health
          </span>
        </div>
        {!isMobile && (
          <nav style={{ display:'flex', gap: 36, fontSize: 13.5, color: 'rgba(245,242,236,0.82)', fontWeight: 500 }}>
            {links.map(l => (
              <a key={l.href} style={{color:'inherit', textDecoration:'none'}} href={l.href}>{l.label}</a>
            ))}
          </nav>
        )}
        <div style={{display:'flex', gap: 12, alignItems:'center'}}>
          {!isMobile && (
            <a href="#work-with-us" style={{
              background: B_PALETTE.accent2, color: B_PALETTE.ink,
              padding: '10px 18px', borderRadius: 2, fontSize: 13.5, fontWeight: 600,
              textDecoration:'none', letterSpacing: '0.01em',
            }}>Get in touch →</a>
          )}
          {isMobile && (
            <button
              type="button"
              onClick={() => setOpen(o => !o)}
              aria-expanded={open}
              aria-controls="mobile-menu"
              aria-label={open ? 'Close menu' : 'Open menu'}
              style={{
                all: 'unset', cursor: 'pointer',
                width: 40, height: 40, display: 'grid', placeItems: 'center',
                color: B_PALETTE.darkInk,
                border: `1px solid ${B_PALETTE.darkRule}`, borderRadius: 4,
              }}
            >
              <span aria-hidden="true" style={{
                display: 'inline-flex', flexDirection: 'column', gap: 4,
              }}>
                <span style={{width: 18, height: 1.5, background: B_PALETTE.darkInk, transform: open ? 'translateY(5.5px) rotate(45deg)' : 'none', transition: 'transform .2s'}}/>
                <span style={{width: 18, height: 1.5, background: B_PALETTE.darkInk, opacity: open ? 0 : 1, transition: 'opacity .15s'}}/>
                <span style={{width: 18, height: 1.5, background: B_PALETTE.darkInk, transform: open ? 'translateY(-5.5px) rotate(-45deg)' : 'none', transition: 'transform .2s'}}/>
              </span>
            </button>
          )}
        </div>
      </div>

      {isMobile && open && (
        <div id="mobile-menu" style={{
          position: 'fixed', left: 0, right: 0, top: 69, bottom: 0, zIndex: 19,
          background: 'rgba(11,31,58,0.98)', backdropFilter: 'blur(20px)',
          padding: '32px 20px',
          display: 'flex', flexDirection: 'column', gap: 4,
          fontFamily: '"Inter", sans-serif',
        }}>
          {links.map(l => (
            <a key={l.href} href={l.href} onClick={() => setOpen(false)} style={{
              color: B_PALETTE.darkInk, textDecoration: 'none',
              fontFamily: '"Source Serif Pro", Georgia, serif',
              fontSize: 28, letterSpacing: '-0.02em', padding: '18px 0',
              borderBottom: `1px solid ${B_PALETTE.darkRule}`,
            }}>{l.label}</a>
          ))}
          <a href="#work-with-us" onClick={() => setOpen(false)} style={{
            marginTop: 28,
            background: B_PALETTE.accent2, color: B_PALETTE.ink,
            padding: '16px 18px', borderRadius: 2,
            fontSize: 15, fontWeight: 600, textDecoration: 'none',
            textAlign: 'center', letterSpacing: '0.01em',
          }}>Get in touch →</a>
        </div>
      )}
    </>
  );
}

function VarB_Hero() {
  const isMobile = useIsMobile();
  return (
    <section style={{
      background: B_PALETTE.darkBg, color: B_PALETTE.darkInk,
      padding: isMobile ? '48px 20px 64px' : '80px 56px 104px',
      borderBottom: `1px solid ${B_PALETTE.darkRule}`,
      position: 'relative', overflow: 'hidden',
    }}>
      {/* subtle grid ornament */}
      <div style={{
        position:'absolute', inset: 0, pointerEvents:'none',
        backgroundImage: `linear-gradient(${B_PALETTE.darkRule} 1px, transparent 1px), linear-gradient(90deg, ${B_PALETTE.darkRule} 1px, transparent 1px)`,
        backgroundSize: '80px 80px', opacity: 0.5,
        maskImage: 'radial-gradient(ellipse at top right, black, transparent 70%)',
      }}/>

      <div style={{
        display:'flex', alignItems:'center', gap: 14,
        fontFamily: '"Inter", ui-sans-serif, system-ui, sans-serif',
        fontSize: isMobile ? 10 : 11, letterSpacing: '0.22em', textTransform: 'uppercase',
        color: B_PALETTE.darkMute, fontWeight: 600,
        marginBottom: isMobile ? 28 : 48, position:'relative',
      }}>
        <span style={{ width: 6, height: 6, background: B_PALETTE.accent2, borderRadius: 99, flex:'0 0 auto' }}/>
        <span>The operating system for pharma creator marketing</span>
      </div>

      <div style={{
        position:'relative',
        display:'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1.15fr 0.85fr',
        gap: isMobile ? 40 : 72,
        alignItems:'center',
      }}>
        <div>
          <h1 style={{
            fontFamily: '"Source Serif Pro", "Source Serif 4", Georgia, serif',
            fontSize: 'clamp(40px, 8.5vw, 92px)',
            lineHeight: 1.02, letterSpacing: '-0.035em',
            color: B_PALETTE.darkInk, fontWeight: 400, margin: 0,
            textWrap: 'balance', WebkitTextWrap: 'balance',
          }}>
            The most trusted voice in healthcare isn't an ad.{' '}
            <span style={{fontStyle:'italic', color: B_PALETTE.accent2}}>It's a peer.</span>
          </h1>

          <p style={{
            fontFamily: '"Inter", sans-serif',
            fontSize: 19, lineHeight: 1.5,
            color: 'rgba(245,242,236,0.78)', maxWidth: 560, marginTop: 36, marginBottom: 0, fontWeight: 400,
          }}>
            Eddy is the operating system pharma brands, agencies, medical, and legal use to run
            compliant creator campaigns at scale — from brief to live post.
          </p>

          <div style={{ display:'flex', gap: 14, marginTop: 40, flexWrap: 'wrap' }}>
            <a href="#platform" style={{
              background: B_PALETTE.accent2, color: B_PALETTE.ink,
              padding: '16px 26px', fontSize: 14.5, fontWeight: 600, letterSpacing: '0.01em',
              textDecoration:'none', fontFamily: '"Inter", sans-serif',
              textAlign: 'center', flex: isMobile ? '1 1 100%' : '0 0 auto',
            }}>See the platform →</a>
            <a href="#work-with-us" style={{
              background: 'transparent', color: B_PALETTE.darkInk,
              padding: '16px 26px', fontSize: 14.5, fontWeight: 550,
              textDecoration:'none', border: `1px solid rgba(245,242,236,0.3)`,
              fontFamily: '"Inter", sans-serif',
              textAlign: 'center', flex: isMobile ? '1 1 100%' : '0 0 auto',
            }}>Book a pilot</a>
          </div>
        </div>

        <div style={{ position:'relative' }}>
          <MLRReviewCard />
          <div style={{
            position:'absolute', top: -12, right: -8,
            background: B_PALETTE.accent2, color: B_PALETTE.ink,
            padding: '5px 10px', fontSize: 10, letterSpacing: '0.18em',
            textTransform:'uppercase', fontWeight: 700,
            fontFamily:'"Inter", sans-serif',
          }}>Live · in review</div>
          <div style={{
            marginTop: 14, textAlign: 'center',
            fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase',
            color: 'rgba(245,242,236,0.45)', fontWeight: 600,
            fontFamily: '"Inter", sans-serif',
          }}>Illustrative — not a real campaign. Brand and creator names are fictional.</div>
        </div>
      </div>
    </section>
  );
}

// MLR review card — compact, tangible piece of product for the hero.
// A draft creator asset mid-approval: creator attribution, caption snippet,
// three-stage review tracker (brand / medical / legal), comment thread, and
// SLA footer. Sized to sit in the hero's right column (~460px wide).
function MLRReviewCard() {
  return (
    <div style={{
      background: B_PALETTE.cardBg, color: B_PALETTE.ink,
      fontFamily: '"Inter", sans-serif',
      border: `1px solid rgba(245,242,236,0.2)`,
      boxShadow: '0 40px 80px -30px rgba(0,0,0,0.55)',
      borderRadius: 2, maxWidth: 480, margin: '0 auto',
      display:'flex', flexDirection:'column',
    }}>
      {/* header */}
      <div style={{
        display:'flex', justifyContent:'space-between', alignItems:'center',
        padding: '14px 20px', borderBottom: `1px solid ${B_PALETTE.rule}`,
        background: '#FDFAF3',
      }}>
        <div style={{display:'flex', alignItems:'center', gap: 10}}>
          <div style={{
            width: 22, height: 22, background: B_PALETTE.ink,
            display:'grid', placeItems:'center',
            fontFamily:'"Source Serif Pro", Georgia, serif',
            color: B_PALETTE.accent2, fontSize: 13, letterSpacing:'-0.02em',
          }}>E</div>
          <div style={{
            fontSize: 10.5, letterSpacing:'0.2em', textTransform:'uppercase',
            color: B_PALETTE.mute, fontWeight: 600,
          }}>MLR review · Asset 03 / 06</div>
        </div>
        <div style={{
          display:'flex', alignItems:'center', gap: 6,
          background: 'rgba(232,192,106,0.18)', color: B_PALETTE.accent,
          padding: '3px 9px', borderRadius: 99,
          fontSize: 10, letterSpacing:'0.14em', textTransform:'uppercase', fontWeight: 700,
        }}>
          <span style={{ width: 5, height: 5, borderRadius: 99, background: B_PALETTE.accent }}/>
          In medical
        </div>
      </div>

      {/* creator */}
      <div style={{
        display:'flex', alignItems:'center', gap: 12,
        padding: '16px 20px', borderBottom: `1px solid ${B_PALETTE.rule}`,
      }}>
        <div style={{
          width: 36, height: 36, borderRadius: 99,
          background: `linear-gradient(135deg, ${B_PALETTE.accent} 0%, ${B_PALETTE.accent2} 100%)`,
          display:'grid', placeItems:'center',
          fontFamily:'"Source Serif Pro", Georgia, serif', fontSize: 15, color: B_PALETTE.ink,
          fontWeight: 500, letterSpacing:'-0.01em',
        }}>MR</div>
        <div style={{flex: 1, minWidth: 0}}>
          <div style={{
            fontFamily:'"Source Serif Pro", Georgia, serif',
            fontSize: 16, letterSpacing:'-0.015em', color: B_PALETTE.ink,
          }}>@maria.r.patient</div>
          <div style={{
            fontSize: 10.5, letterSpacing:'0.18em', textTransform:'uppercase',
            color: B_PALETTE.mute, fontWeight: 600, marginTop: 2,
          }}>Patient creator · 48K · TikTok + IG</div>
        </div>
        <div style={{
          fontSize: 10.5, letterSpacing:'0.14em', textTransform:'uppercase',
          color: B_PALETTE.mute, fontWeight: 600,
        }}>Draft 2</div>
      </div>

      {/* caption preview */}
      <div style={{ padding: '16px 20px', borderBottom: `1px solid ${B_PALETTE.rule}` }}>
        <div style={{
          fontFamily:'"Source Serif Pro", Georgia, serif',
          fontSize: 14.5, lineHeight: 1.45, color: B_PALETTE.ink,
          letterSpacing:'-0.005em',
        }}>
          "I've lived with <span style={{
            background: 'rgba(184,137,74,0.14)', borderBottom: `1px solid ${B_PALETTE.accent}`,
            padding: '0 2px',
          }}>[CONDITION]</span> for seven years. What my <span style={{
            background: 'rgba(184,137,74,0.14)', borderBottom: `1px solid ${B_PALETTE.accent}`,
            padding: '0 2px',
          }}>doctor and I tried</span> — and what finally worked for me…"
        </div>
        <div style={{
          marginTop: 12, display:'flex', gap: 8,
          fontSize: 10.5, letterSpacing:'0.14em', textTransform:'uppercase',
          color: B_PALETTE.mute, fontWeight: 600,
        }}>
          <span>Indication: Varelos Rx</span>
          <span style={{color: B_PALETTE.rule}}>·</span>
          <span>Format: 45s vertical</span>
        </div>
      </div>

      {/* review tracker */}
      <div style={{ padding: '18px 20px 16px', borderBottom: `1px solid ${B_PALETTE.rule}` }}>
        <div style={{
          display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 8, position:'relative',
        }}>
          {[
            { k: 'Brand',   state: 'done', who: 'Approved · J. Chen' },
            { k: 'Medical', state: 'active', who: 'Reviewing · 2h' },
            { k: 'Legal',   state: 'queued', who: 'Queued' },
          ].map((s, i) => {
            const isDone = s.state === 'done';
            const isActive = s.state === 'active';
            const color = isDone ? B_PALETTE.accent : isActive ? B_PALETTE.accent2 : B_PALETTE.rule;
            return (
              <div key={s.k} style={{display:'flex', flexDirection:'column', gap: 8}}>
                <div style={{display:'flex', alignItems:'center', gap: 8}}>
                  <div style={{
                    width: 16, height: 16, borderRadius: 99,
                    background: isDone ? B_PALETTE.accent : 'transparent',
                    border: `1.5px solid ${isDone ? B_PALETTE.accent : isActive ? B_PALETTE.accent2 : B_PALETTE.rule}`,
                    display:'grid', placeItems:'center',
                    color: B_PALETTE.bg, fontSize: 10, fontWeight: 700,
                  }}>{isDone ? '✓' : isActive ? <span style={{
                    width: 6, height: 6, borderRadius: 99, background: B_PALETTE.accent2,
                  }}/> : ''}</div>
                  <span style={{
                    fontSize: 11.5, fontWeight: 600,
                    color: isDone ? B_PALETTE.ink : isActive ? B_PALETTE.ink : B_PALETTE.mute,
                  }}>{s.k}</span>
                </div>
                <div style={{
                  height: 2, background: color,
                  width: isDone ? '100%' : isActive ? '55%' : '0%',
                }}/>
                <div style={{
                  fontSize: 10.5, letterSpacing: '0.05em',
                  color: isDone || isActive ? B_PALETTE.body : B_PALETTE.mute,
                }}>{s.who}</div>
              </div>
            );
          })}
        </div>
      </div>

      {/* comment thread */}
      <div style={{ padding: '16px 20px' }}>
        <div style={{
          fontSize: 10.5, letterSpacing:'0.2em', textTransform:'uppercase',
          color: B_PALETTE.mute, fontWeight: 600, marginBottom: 12,
        }}>Thread · 3 comments</div>
        <div style={{display:'flex', flexDirection:'column', gap: 10}}>
          <div style={{
            display:'flex', gap: 10, fontSize: 12.5, lineHeight: 1.4,
          }}>
            <span style={{
              flex:'0 0 auto', width: 22, height: 22, borderRadius: 99,
              background: '#2A4B7C', color: B_PALETTE.bg,
              display:'grid', placeItems:'center', fontSize: 10, fontWeight: 700,
            }}>MV</span>
            <div style={{flex: 1}}>
              <div style={{display:'flex', gap: 8, alignItems:'baseline', marginBottom: 2}}>
                <span style={{fontWeight: 600, color: B_PALETTE.ink}}>Dr. M. Vasquez</span>
                <span style={{fontSize: 10, color: B_PALETTE.mute, letterSpacing: '0.1em', textTransform:'uppercase'}}>Medical · 18m</span>
              </div>
              <div style={{color: B_PALETTE.body}}>
                Please add the fair-balance line for class side effects — Eddy template M-04.
              </div>
            </div>
          </div>

          <div style={{
            display:'flex', gap: 10, fontSize: 12.5, lineHeight: 1.4,
          }}>
            <span style={{
              flex:'0 0 auto', width: 22, height: 22, borderRadius: 99,
              background: B_PALETTE.accent, color: B_PALETTE.bg,
              display:'grid', placeItems:'center', fontSize: 10, fontWeight: 700,
            }}>AI</span>
            <div style={{flex: 1}}>
              <div style={{display:'flex', gap: 8, alignItems:'baseline', marginBottom: 2}}>
                <span style={{fontWeight: 600, color: B_PALETTE.ink}}>Eddy pre-review</span>
                <span style={{fontSize: 10, color: B_PALETTE.mute, letterSpacing: '0.1em', textTransform:'uppercase'}}>Auto · 2h</span>
              </div>
              <div style={{color: B_PALETTE.body}}>
                Claim language aligned to PI §5.2. No unsubstantiated superiority detected.
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* footer SLA bar */}
      <div style={{
        display:'flex', justifyContent:'space-between', alignItems:'center',
        padding: '12px 20px', background: B_PALETTE.bgAlt,
        borderTop: `1px solid ${B_PALETTE.rule}`,
        fontSize: 10.5, letterSpacing: '0.18em', textTransform:'uppercase',
        color: B_PALETTE.mute, fontWeight: 600,
      }}>
        <span>Routed to Legal · Next</span>
        <span style={{color: B_PALETTE.ink}}>2.1<span style={{color:B_PALETTE.mute, fontWeight:500}}>d avg</span></span>
      </div>
    </div>
  );
}

function VarB_Shift() {
  const isMobile = useIsMobile();
  const statsGrid = {
    display: 'grid',
    gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
    gap: isMobile ? 40 : 60, alignItems: 'start',
  };
  return (
    <section style={{ padding: isMobile ? '72px 20px 80px' : '120px 56px 132px', background: B_PALETTE.bg }}>
      <h2 style={{
        fontFamily: '"Source Serif Pro", Georgia, serif',
        fontSize: 'clamp(36px, 6.5vw, 72px)', lineHeight: 1.04, letterSpacing: '-0.03em',
        color: B_PALETTE.ink, fontWeight: 400, margin: isMobile ? '0 0 48px' : '0 0 72px', maxWidth: 1100,
        textWrap: 'balance', WebkitTextWrap: 'balance',
      }}>
        Your patients — and their doctors — don't trust ads.{isMobile ? ' ' : <br/>}
        They trust <span style={{fontStyle:'italic', color: B_PALETTE.accent}}>each other.</span>
      </h2>

      {/* Top row — peer-trust evidence */}
      <div style={statsGrid}>
        <TrustStat palette={B_PALETTE}
          value="85%"
          caption="of doctors have patients mention social media posts in appointments."
          source="Fierce Pharma · 2023"
        />
        <TrustStat palette={B_PALETTE}
          value="90%"
          caption="of patients research treatment before a visit — mostly on social."
          source="Yahoo Finance · 2024"
        />
        <TrustStat palette={B_PALETTE}
          value="57%"
          caption="of US physicians shift on treatments from peer social content."
          source="Sermo & LiveWorld · 2023"
        />
      </div>

      {/* Connector line between rows */}
      <div style={{
        margin: isMobile ? '56px 0 40px' : '72px 0 48px',
        display:'flex', alignItems:'center', gap: 20, flexWrap: 'wrap',
        fontFamily:'"Inter", sans-serif', fontSize: 11,
        letterSpacing: '0.22em', textTransform:'uppercase',
        color: B_PALETTE.mute, fontWeight: 600,
      }}>
        <span style={{ height: 1, width: 40, background: B_PALETTE.rule }}/>
        <span style={{
          fontFamily:'"Source Serif Pro", Georgia, serif',
          fontSize: isMobile ? 18 : 22, letterSpacing:'-0.01em', textTransform:'none',
          color: B_PALETTE.ink, fontWeight: 400, fontStyle:'italic',
        }}>
          The numbers have been there for years.
        </span>
        <span style={{ height: 1, flex: 1, background: B_PALETTE.rule, minWidth: 40 }}/>
      </div>

      {/* Bottom row — market opportunity */}
      <div style={statsGrid}>
        <TrustStat palette={B_PALETTE}
          value="~10:1"
          caption="ROI of creator campaigns vs. traditional creative in pharma."
          source="Eddy partner benchmarks · 2026"
        />
        <TrustStat palette={B_PALETTE}
          value="3×+"
          caption="longer watch time on peer-led educational content vs. branded formats."
          source="Eddy partner analytics · 2026"
        />
        <TrustStat palette={B_PALETTE}
          value="$1B+"
          caption="annual pharma influencer spend — fragmented across agencies and one-off deals."
          source="eMarketer · 2024"
        />
      </div>
    </section>
  );
}

function VarB_Problem() {
  const isMobile = useIsMobile();
  const darkPalette = {
    ...B_PALETTE,
    ink: B_PALETTE.darkInk,
    body: 'rgba(245,242,236,0.78)',
    mute: B_PALETTE.darkMute,
    rule: B_PALETTE.darkRule,
    cardBg: 'transparent',
    accent: B_PALETTE.accent2,
  };
  return (
    <section id="problem" style={{
      padding: isMobile ? '72px 20px' : '104px 56px',
      background: B_PALETTE.darkBg, color: B_PALETTE.darkInk,
      borderTop: `1px solid ${B_PALETTE.rule}`,
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position:'absolute', inset:0, pointerEvents:'none',
        backgroundImage: `linear-gradient(${B_PALETTE.darkRule} 1px, transparent 1px), linear-gradient(90deg, ${B_PALETTE.darkRule} 1px, transparent 1px)`,
        backgroundSize: '80px 80px', opacity: 0.4,
        maskImage: 'radial-gradient(ellipse at top left, black, transparent 70%)',
      }}/>
      <div style={{
        position:'relative', display:'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1.1fr 1fr',
        gap: isMobile ? 24 : 80,
        alignItems: isMobile ? 'start' : 'end',
        marginBottom: isMobile ? 40 : 56,
      }}>
        <h2 style={{
          fontFamily: '"Source Serif Pro", Georgia, serif',
          fontSize: 'clamp(34px, 5.5vw, 60px)', lineHeight: 1.04, letterSpacing: '-0.03em',
          color: B_PALETTE.darkInk, fontWeight: 400, margin: 0,
          textWrap: 'balance', WebkitTextWrap: 'balance',
        }}>
          The highest-ROI channel in pharma is <span style={{fontStyle:'italic', color: B_PALETTE.accent2}}>chronically underused.</span>
        </h2>
        <p style={{ fontFamily:'"Inter", sans-serif', fontSize: 16, color: 'rgba(245,242,236,0.78)', margin:0, maxWidth: 440 }}>
          It's easy to see why most brand teams stay away. Every campaign hits the same three walls.
        </p>
      </div>

      <div style={{
        position:'relative', display:'grid',
        gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)',
        gap: 0,
        border: `1px solid ${B_PALETTE.darkRule}`, background: 'rgba(245,242,236,0.02)',
      }}>
        <div style={{ borderRight: isMobile ? 'none' : `1px solid ${B_PALETTE.darkRule}`, borderBottom: isMobile ? `1px solid ${B_PALETTE.darkRule}` : 'none' }}>
          <ProblemCard palette={darkPalette} num="01" title="Compliance, baked upstream" points={[
            'Guidance rarely embedded in the creative process.',
            'Creators untrained or new to pharma guardrails.',
            'MLR teams unfamiliar with the influencer format.',
          ]}/>
        </div>
        <div style={{ borderRight: isMobile ? 'none' : `1px solid ${B_PALETTE.darkRule}`, borderBottom: isMobile ? `1px solid ${B_PALETTE.darkRule}` : 'none' }}>
          <ProblemCard palette={darkPalette} num="02" title="Deep creator vetting" points={[
            'Prior content, affiliations, reputational risk — all checked.',
            'Today the process is manual and time-intensive.',
            'And it slows execution across every campaign.',
          ]}/>
        </div>
        <ProblemCard palette={darkPalette} num="03" title="Operational complexity" points={[
          'Individual contracts, tax forms, payments — per creator.',
          'Blackout and exclusivity terms managed ad-hoc.',
          'Extensive, time-consuming legal back-and-forth.',
        ]}/>
      </div>
    </section>
  );
}

function VarB_Platform() {
  const isMobile = useIsMobile();
  return (
    <section id="platform" style={{
      padding: isMobile ? '72px 20px 80px' : '140px 56px 156px',
      background: B_PALETTE.bgAlt, borderTop: `1px solid ${B_PALETTE.rule}`,
    }}>
      <div style={{
        display:'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
        gap: isMobile ? 24 : 80,
        alignItems: isMobile ? 'start' : 'end',
        marginBottom: isMobile ? 40 : 84,
      }}>
        <h2 style={{
          fontFamily: '"Source Serif Pro", Georgia, serif',
          fontSize: 'clamp(36px, 6.5vw, 72px)', lineHeight: 1.04, letterSpacing: '-0.03em',
          color: B_PALETTE.ink, fontWeight: 400, margin: 0,
          textWrap: 'balance', WebkitTextWrap: 'balance',
        }}>
          Every campaign <span style={{fontStyle:'italic'}}>lives</span> in one workspace.
        </h2>
        <p style={{ fontFamily:'"Inter", sans-serif', fontSize: 17, lineHeight: 1.55, color: B_PALETTE.body, maxWidth: 520, margin: 0 }}>
          Brand, agency, medical, and legal work from the same surface — from brief through live post.
          Reach, engagement, and sentiment refresh hourly from platform APIs.
        </p>
      </div>
      {/* full-bleed on desktop; horizontally scrollable on mobile so the dashboard keeps its proportions */}
      <div
        className={isMobile ? 'dash-scroll' : ''}
        style={{
          margin: isMobile ? '0 -20px' : '0 -24px',
          overflowX: isMobile ? 'auto' : 'visible',
        }}
      >
        <div style={{ minWidth: isMobile ? 920 : 'auto', padding: isMobile ? '0 20px' : 0 }}>
          <DashboardMock variant="cream" />
        </div>
      </div>
      <div style={{
        marginTop: 18, fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase',
        color: B_PALETTE.mute, fontWeight: 600, fontFamily: '"Inter", sans-serif',
        textAlign: isMobile ? 'left' : 'right',
      }}>
        Illustrative — not a real campaign. Brand and creator names are fictional.
        {isMobile && <span style={{display:'block', marginTop: 6, color: B_PALETTE.body, letterSpacing: '0.04em', textTransform:'none', fontWeight:500}}>Swipe horizontally to view the full dashboard.</span>}
      </div>
    </section>
  );
}

// New Market section — moved out of hero. Sits between Shift and Problem,
// arguing the category before we name what's wrong with it.
function VarB_Market() {
  const stats = [
    { v:'~10:1', k:'ROI vs. traditional creative',
      d:'Creator campaigns consistently outperform paid media on cost per engaged patient and HCP reach.' },
    { v:'3×+',   k:'Longer watch time',
      d:'Peer-led educational content holds audiences dramatically longer than branded formats.' },
    { v:'$1B+',  k:'Annual pharma influencer spend',
      d:'Already flowing — fragmented across agencies, point tools, and one-off contracts.' },
  ];
  return (
    <section style={{
      padding: '120px 56px 132px', background: B_PALETTE.bgAlt,
      borderTop: `1px solid ${B_PALETTE.rule}`,
    }}>
      <div style={{ display:'grid', gridTemplateColumns:'1.2fr 1fr', gap: 80, alignItems:'end', marginBottom: 64 }}>
        <h2 style={{
          fontFamily: '"Source Serif Pro", Georgia, serif',
          fontSize: 64, lineHeight: 1.02, letterSpacing: '-0.03em',
          color: B_PALETTE.ink, fontWeight: 400, margin: 0,
        }}>
          The numbers have been <span style={{fontStyle:'italic', color: B_PALETTE.accent}}>there for years.</span>
        </h2>
        <p style={{ fontFamily:'"Inter", sans-serif', fontSize: 16, lineHeight: 1.55, color: B_PALETTE.body, maxWidth: 440, margin:0 }}>
          The category case for creator marketing in pharma was settled a long time ago. It's the
          operating model that hasn't caught up.
        </p>
      </div>

      <div style={{
        display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 0,
        borderTop: `1px solid ${B_PALETTE.rule}`, borderBottom: `1px solid ${B_PALETTE.rule}`,
      }}>
        {stats.map((s,i,a) => (
          <div key={s.k} style={{
            padding: '40px 36px 44px',
            borderRight: i < a.length - 1 ? `1px solid ${B_PALETTE.rule}` : 'none',
            display:'flex', flexDirection:'column', gap: 18,
          }}>
            <div style={{
              fontFamily:'"Source Serif Pro", Georgia, serif',
              fontSize: 96, letterSpacing:'-0.035em', lineHeight: 0.95,
              color: B_PALETTE.ink, fontWeight: 400,
            }}>{s.v}</div>
            <div style={{
              fontFamily:'"Inter", sans-serif', fontSize: 10.5,
              letterSpacing:'0.2em', textTransform:'uppercase',
              color: B_PALETTE.mute, fontWeight: 600,
            }}>{s.k}</div>
            <div style={{
              fontFamily:'"Inter", sans-serif', fontSize: 14, lineHeight: 1.55,
              color: B_PALETTE.body, maxWidth: 320,
            }}>{s.d}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function VarB_How() {
  return (
    <section id="how" style={{ padding: '104px 56px', borderTop: `1px solid ${B_PALETTE.rule}` }}>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 60, alignItems:'end', marginBottom: 56 }}>
        <h2 style={{
          fontFamily: '"Source Serif Pro", Georgia, serif',
          fontSize: 56, lineHeight: 1.02, letterSpacing: '-0.03em',
          color: B_PALETTE.ink, fontWeight: 400, margin: 0,
        }}>
          From brief to live post — <span style={{fontStyle:'italic'}}>one partner</span> handles everything.
        </h2>
        <p style={{ fontFamily:'"Inter", sans-serif', fontSize: 15, color: B_PALETTE.body, maxWidth: 440, margin:0 }}>
          Six stages, one workflow. Hover or click any stage to step through what Eddy handles inside it.
        </p>
      </div>
      <HowItWorksStepper palette={B_PALETTE} accentStrong />
    </section>
  );
}

function VarB_CTA() {
  return (
    <section id="cta" style={{
      padding: '120px 56px', background: B_PALETTE.darkBg, color: B_PALETTE.darkInk,
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position:'absolute', inset:0, pointerEvents:'none',
        backgroundImage: `linear-gradient(${B_PALETTE.darkRule} 1px, transparent 1px), linear-gradient(90deg, ${B_PALETTE.darkRule} 1px, transparent 1px)`,
        backgroundSize: '80px 80px', opacity: 0.4,
        maskImage: 'radial-gradient(ellipse at bottom left, black, transparent 70%)',
      }}/>
      <div style={{ position:'relative', display:'grid', gridTemplateColumns:'1.2fr 1fr', gap: 80, alignItems:'end' }}>
        <div>
          <div style={{ fontFamily:'"Inter", sans-serif', fontSize: 11, letterSpacing: '0.22em', textTransform:'uppercase', color: B_PALETTE.darkMute, fontWeight: 600, marginBottom: 32 }}>
            Let's run a pilot.
          </div>
          <h2 style={{
            fontFamily: '"Source Serif Pro", Georgia, serif',
            fontSize: 96, lineHeight: 0.96, letterSpacing: '-0.035em',
            color: B_PALETTE.darkInk, fontWeight: 400, margin: 0,
          }}>
            One brand.<br/>One indication.<br/><span style={{fontStyle:'italic', color: B_PALETTE.accent2}}>Six weeks.</span>
          </h2>
        </div>
        <div style={{ display:'flex', flexDirection:'column', gap: 20 }}>
          <p style={{ fontFamily:'"Inter", sans-serif', fontSize: 16, lineHeight: 1.55, color: 'rgba(245,242,236,0.78)', margin: 0 }}>
            3–5 creators. Baseline performance. Proof of the compliance model. A lightweight start — a
            partnership that grows with results.
          </p>
          <div style={{ display:'flex', gap: 12, marginTop: 8, flexWrap:'wrap' }}>
            <a href="mailto:hello@witheddy.ai" style={{
              background: B_PALETTE.accent2, color: B_PALETTE.ink,
              padding: '16px 26px', fontSize: 14.5, fontWeight: 600,
              textDecoration:'none', fontFamily: '"Inter", sans-serif',
            }}>hello@witheddy.ai →</a>
            <a href="#platform" style={{
              background: 'transparent', color: B_PALETTE.darkInk,
              padding: '16px 26px', fontSize: 14.5, fontWeight: 550,
              textDecoration:'none', border: `1px solid rgba(245,242,236,0.3)`,
              fontFamily: '"Inter", sans-serif',
            }}>See the platform</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function VarB_Footer() {
  return (
    <footer style={{
      padding: '48px 56px 40px', background: B_PALETTE.darkBgAlt, color: 'rgba(245,242,236,0.6)',
      borderTop: `1px solid ${B_PALETTE.darkRule}`,
      fontFamily:'"Inter", sans-serif', fontSize: 12.5,
      display:'flex', justifyContent:'space-between', alignItems:'center', letterSpacing: '0.02em',
    }}>
      <div style={{display:'flex', gap: 14, alignItems:'center'}}>
        <span style={{ fontFamily:'"Source Serif Pro", Georgia, serif', fontSize: 18, color: B_PALETTE.darkInk, letterSpacing:'-0.02em' }}>Eddy</span>
        <span>© 2026 Eddy Health, Inc.</span>
      </div>
      <div style={{display:'flex', gap: 32}}>
        <a style={{color:'inherit', textDecoration:'none'}} href="#">Privacy</a>
        <a style={{color:'inherit', textDecoration:'none'}} href="#">Terms</a>
        <a style={{color:'inherit', textDecoration:'none'}} href="#">Security</a>
        <a style={{color:'inherit', textDecoration:'none'}} href="mailto:hello@witheddy.ai">hello@witheddy.ai</a>
      </div>
    </footer>
  );
}

function VariationB() {
  return (
    <div style={{
      background: B_PALETTE.bg, color: B_PALETTE.ink,
      fontFamily: '"Inter", ui-sans-serif, system-ui, sans-serif',
      minHeight: '100%',
    }}>
      <VarB_Nav />
      <VarB_Hero />
      <VarB_Shift />
      <VarB_Problem />
      <VarB_HowRich />
      <VarB_Platform />
      <VarB_Exclusive />
      <VarB_FooterRich />
    </div>
  );
}

window.VariationB = VariationB;