/* MedSpaCopy v4 — refined master direction.
   Locks in Direction 3 v3 system; refines header/nav, diagnostic card hierarchy,
   hero proof row, Strategy Audit card, and footer. Adds matching Free Report and
   ResearchDashboard surfaces in the same visual system.

   Outputs:
     Landing_v4
     FreeReport_v4
     ResearchDashboard_v4
*/

const P4 = {
  accent: '#1f5161',
  accent600: '#173d4a',
  accent50:  '#f0f5f6',
  accent100: '#dfe9ec',
  warm: '#c79a5a',
  warmSoft: '#e6cfa6',
  warmInk: '#5a4220',
  warmTint: '#f6efe1',
  warn: '#b8762b',
  good: '#1f8a5b',
  ink: '#0f1a1f',
  inkMid: '#3a4a55',
  inkSoft: '#5c6772',
  surface: '#ffffff',
  surfaceTint: '#f6f3ee',
  surfaceCool: '#eef1f3',
  border: '#e1e6eb',
  borderWarm: '#e6dccb',
  borderInk: 'rgba(255,255,255,0.12)',
};

const FONT_SERIF = "var(--font-serif-display)";
const FONT_SANS  = "var(--font-sans-display)";
const FONT_MONO  = "var(--font-mono)";
const FONT_BODY  = "var(--font-body)";

/* =============================================================
   Shared primitives
   ============================================================= */

const Wordmark_v4 = ({ size = 16, color = P4.ink }) => (
  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
    <svg width={size + 6} height={size + 6} viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="12" r="10.5" stroke={color} strokeWidth="1.1" opacity="0.32" />
      <circle cx="12" cy="12" r="7" stroke={color} strokeWidth="1.1" opacity="0.62" />
      <circle cx="12" cy="12" r="3.5" stroke={color} strokeWidth="1.1" />
      <circle cx="12" cy="12" r="1.4" fill={color} />
    </svg>
    <span style={{ fontFamily: FONT_SANS, fontSize: size, fontWeight: 600, letterSpacing: '-0.018em', color }}>
      MedSpaCopy
    </span>
  </span>
);

const SignalGrid_v4 = ({ size = 720, faint = false }) => (
  <svg width={size} height={size} viewBox="0 0 720 720" aria-hidden="true">
    <defs>
      <pattern id={`dg_v4_${faint ? 'f' : 'n'}`} x="0" y="0" width="22" height="22" patternUnits="userSpaceOnUse">
        <circle cx="1" cy="1" r="0.6" fill={P4.accent} opacity={faint ? 0.10 : 0.16} />
      </pattern>
      <radialGradient id={`rg_v4_${faint ? 'f' : 'n'}`} cx="50%" cy="50%" r="55%">
        <stop offset="0%" stopColor="white" stopOpacity="0" />
        <stop offset="65%" stopColor="white" stopOpacity="0.55" />
        <stop offset="100%" stopColor="white" stopOpacity="1" />
      </radialGradient>
      <mask id={`rgM_v4_${faint ? 'f' : 'n'}`}><rect width="720" height="720" fill={`url(#rg_v4_${faint ? 'f' : 'n'})`} /></mask>
    </defs>
    <rect width="720" height="720" fill={`url(#dg_v4_${faint ? 'f' : 'n'})`} />
    <g mask={`url(#rgM_v4_${faint ? 'f' : 'n'})`}>
      {[320, 260, 200, 140, 80].map((r, i) => (
        <circle key={i} cx="360" cy="360" r={r} fill="none" stroke={P4.accent} strokeWidth="0.5" opacity={(faint ? 0.18 : 0.32) - i * 0.05} />
      ))}
    </g>
    <circle cx="220" cy="200" r="3" fill={P4.accent} />
    <circle cx="510" cy="240" r="3" fill={P4.warm} />
    <circle cx="470" cy="490" r="2.5" fill={P4.accent} opacity="0.55" />
    <circle cx="200" cy="470" r="2.5" fill={P4.warm} opacity="0.6" />
  </svg>
);

const Marker_v4 = ({ kind, size = 26 }) => {
  const map = {
    issue:       { glyph: '!', fg: P4.warn, bg: `color-mix(in oklab, ${P4.warn} 16%, transparent)` },
    opportunity: { glyph: '~', fg: P4.warm, bg: `color-mix(in oklab, ${P4.warm} 22%, transparent)` },
    good:        { glyph: '+', fg: P4.good, bg: `color-mix(in oklab, ${P4.good} 16%, transparent)` },
    info:        { glyph: 'o', fg: P4.accent, bg: `color-mix(in oklab, ${P4.accent} 12%, transparent)` },
  };
  const m = map[kind];
  return (
    <span style={{
      width: size, height: size, borderRadius: 6, display: 'inline-flex', alignItems: 'center',
      justifyContent: 'center', fontWeight: 700, fontSize: size * 0.5, flexShrink: 0,
      background: m.bg, color: m.fg, fontFamily: FONT_BODY,
    }}>{m.glyph}</span>
  );
};

const MonoKicker_v4 = ({ children, color = P4.inkSoft, mb = 0 }) => (
  <div style={{ fontFamily: FONT_MONO, fontSize: 11, fontWeight: 600, letterSpacing: '0.12em', color, marginBottom: mb, textTransform: 'uppercase' }}>
    {children}
  </div>
);

/* =============================================================
   Refined header — proper marketing nav
   ============================================================= */
function Header_v4({ ctaLabel = 'Run free diagnosis', signedIn = false, email }) {
  return (
    <div style={{
      padding: '14px 56px', background: '#fff', borderBottom: `1px solid ${P4.border}`,
      display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      position: 'relative',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 36 }}>
        <a href="/" style={{ textDecoration: 'none' }}><Wordmark_v4 size={16} /></a>
        <nav style={{ display: 'flex', gap: 26, fontSize: 13.5, color: P4.inkMid, fontWeight: 500 }}>
          <a href="/#how" style={{ color: P4.inkMid, textDecoration: 'none' }}>Product</a>
          <a href="/pricing" style={{ color: P4.inkMid, textDecoration: 'none' }}>Pricing</a>
          <a href="/sample-report" style={{ color: P4.inkMid, textDecoration: 'none' }}>Sample report</a>
          <a href="/#how" style={{ color: P4.inkMid, textDecoration: 'none' }}>How it works</a>
          <a href="/for-doctors" style={{ color: P4.inkMid, textDecoration: 'none' }}>For doctors</a>
        </nav>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 18 }}>
        {signedIn ? (
          <>
            <span style={{ fontSize: 12.5, color: P4.inkSoft }}>{email}</span>
            <span style={{ width: 1, height: 16, background: P4.border }} />
            <a href="#" style={{ fontSize: 13, color: P4.ink, textDecoration: 'none', fontWeight: 500 }}>Account</a>
          </>
        ) : (
          <>
            <a href="#" style={{ fontSize: 13.5, color: P4.inkMid, textDecoration: 'none', fontWeight: 500 }}>Sign in</a>
            <button style={{
              height: 36, padding: '0 16px', background: P4.accent, color: '#fff', border: 'none',
              borderRadius: 8, fontSize: 13, fontWeight: 600, cursor: 'pointer',
              fontFamily: FONT_BODY,
            }}>{ctaLabel} →</button>
          </>
        )}
      </div>
    </div>
  );
}

/* =============================================================
   Refined footer — intentional, finished
   ============================================================= */
function Footer_v4() {
  const cols = [
    { title: 'Product', items: ['Free site report', 'Strategy audit', 'Article ordering', 'Doctor review', 'Wallet & top-up'] },
    { title: 'For',     items: ['Med spa owners', 'Aesthetic clinics', 'Medical directors', 'Solo practitioners'] },
    { title: 'Resources', items: ['Sample report', 'FTC compliance guide', 'Editorial standards', 'Help center'] },
    { title: 'Company', items: ['About', 'Editorial team', 'Press', 'Contact'] },
  ];
  return (
    <footer style={{ background: P4.ink, color: '#cbd6dc', padding: '64px 56px 32px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr repeat(4, 1fr)', gap: 40, marginBottom: 56 }}>
        <div>
          <Wordmark_v4 size={17} color="#fff" />
          <p style={{ marginTop: 18, fontSize: 13.5, lineHeight: 1.6, color: 'rgba(255,255,255,0.62)', maxWidth: 280 }} className="pretty">
            Patient-ready content for US medical spas. Diagnosed, planned, and reviewed by your medical director — before it ships.
          </p>
          <div style={{ marginTop: 20, display: 'flex', gap: 8, alignItems: 'center' }}>
            <span style={{ fontFamily: FONT_MONO, fontSize: 10.5, color: P4.warm, letterSpacing: '0.1em', textTransform: 'uppercase' }}>HIPAA-aware</span>
            <span style={{ width: 4, height: 4, borderRadius: 4, background: 'rgba(255,255,255,0.25)' }} />
            <span style={{ fontFamily: FONT_MONO, fontSize: 10.5, color: P4.warm, letterSpacing: '0.1em', textTransform: 'uppercase' }}>FTC-aware claims</span>
            <span style={{ width: 4, height: 4, borderRadius: 4, background: 'rgba(255,255,255,0.25)' }} />
            <span style={{ fontFamily: FONT_MONO, fontSize: 10.5, color: P4.warm, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Made in the US</span>
          </div>
        </div>
        {cols.map((c, i) => (
          <div key={i}>
            <div style={{ fontFamily: FONT_MONO, fontSize: 10.5, fontWeight: 600, letterSpacing: '0.14em', color: 'rgba(255,255,255,0.5)', textTransform: 'uppercase', marginBottom: 18 }}>{c.title}</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {c.items.map((it, j) => (
                <li key={j}><a href="#" style={{ color: 'rgba(255,255,255,0.78)', textDecoration: 'none', fontSize: 13.5 }}>{it}</a></li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      <div style={{
        paddingTop: 24, borderTop: `1px solid rgba(255,255,255,0.10)`,
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 12, color: 'rgba(255,255,255,0.55)',
      }}>
        <div style={{ display: 'flex', gap: 22 }}>
          <span>© 2026 MedSpaCopy</span>
          <a href="/privacy" style={{ color: 'rgba(255,255,255,0.55)', textDecoration: 'none' }}>Privacy</a>
          <a href="/terms" style={{ color: 'rgba(255,255,255,0.55)', textDecoration: 'none' }}>Terms</a>
          <a href="/sample-article" style={{ color: 'rgba(255,255,255,0.55)', textDecoration: 'none' }}>Editorial policy</a>
        </div>
        <span style={{ fontFamily: FONT_MONO, letterSpacing: '0.08em' }}>v 1.04 · build 2026.04</span>
      </div>
    </footer>
  );
}

/* =============================================================
   Refined diagnostic card — clearer hierarchy, less crowded
   ============================================================= */
function DiagnosticCard_v4({ small = false }) {
  return (
    <div style={{ position: 'relative', width: '100%' }}>
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0, transform: 'translate(12px, 14px) rotate(0.4deg)',
        background: '#fff', border: `1px solid ${P4.border}`, borderRadius: 16, opacity: 0.55,
        boxShadow: '0 1px 2px rgba(0,0,0,0.04)',
      }} />

      <div style={{
        position: 'relative', background: '#fff', border: `1px solid ${P4.border}`,
        borderRadius: 16, overflow: 'hidden',
        boxShadow: '0 28px 56px -26px rgba(15,40,50,0.26), 0 4px 14px rgba(15,40,50,0.05)',
      }}>
        {/* Header — clinical document framing */}
        <div style={{
          padding: '14px 24px', background: P4.ink, color: '#cbd6dc',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
            <span style={{ width: 7, height: 7, borderRadius: 4, background: P4.warm, boxShadow: `0 0 0 3px color-mix(in oklab, ${P4.warm} 25%, transparent)` }} />
            <span style={{ fontFamily: FONT_MONO, fontSize: 10.5, fontWeight: 600, letterSpacing: '0.16em', textTransform: 'uppercase' }}>Visibility diagnosis</span>
          </div>
          <span style={{ fontFamily: FONT_MONO, fontSize: 10.5, opacity: 0.65, letterSpacing: '0.06em' }}>REPORT 04 / 26 · v 1.04</span>
        </div>

        {/* Hero row — score gets the weight, subject reads as a secondary label */}
        <div style={{ padding: '28px 28px 24px', display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 28, alignItems: 'center', borderBottom: `1px solid ${P4.border}` }}>
          {/* Score — left, dominant */}
          <div style={{ position: 'relative', width: 132, height: 132 }}>
            <svg width="132" height="132" viewBox="0 0 132 132">
              <circle cx="66" cy="66" r="56" fill="none" stroke={P4.border} strokeWidth="6" />
              <circle cx="66" cy="66" r="56" fill="none" stroke={P4.accent} strokeWidth="6" strokeLinecap="round" strokeDasharray="351.86" strokeDashoffset={351.86 * (1 - 0.47)} transform="rotate(-90 66 66)" />
              <circle cx="66" cy="10" r="3" fill={P4.warm} />
            </svg>
            <div style={{ position: 'absolute', inset: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
              <span style={{ fontFamily: FONT_SANS, fontSize: 38, fontWeight: 600, color: P4.ink, lineHeight: 1, fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.024em' }}>47</span>
              <span style={{ fontFamily: FONT_MONO, fontSize: 10, color: P4.inkSoft, letterSpacing: '0.1em', textTransform: 'uppercase', marginTop: 4 }}>Visibility / 100</span>
            </div>
          </div>

          {/* Subject — right */}
          <div>
            <MonoKicker_v4 mb={6}>Subject</MonoKicker_v4>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 10, flexWrap: 'wrap' }}>
              <span style={{ fontFamily: FONT_SANS, fontSize: 17, fontWeight: 600, color: P4.ink, letterSpacing: '-0.012em' }}>Smith Med Spa</span>
              <span style={{ fontFamily: FONT_MONO, fontSize: 12, color: P4.inkSoft }}>smithmedspa.com</span>
            </div>
            <div style={{ fontFamily: FONT_SERIF, fontSize: 24, fontWeight: 450, lineHeight: 1.22, color: P4.ink, letterSpacing: '-0.014em', fontVariationSettings: "'opsz' 36, 'SOFT' 50" }} className="balance">
              Strong foundation, with major <span style={{ fontStyle: 'italic' }}>visibility gaps</span>.
            </div>
            <div style={{ marginTop: 14, display: 'flex', flexWrap: 'wrap', gap: 6 }}>
              <span style={{ fontFamily: FONT_BODY, fontSize: 11, padding: '4px 9px', borderRadius: 4, background: `color-mix(in oklab, ${P4.accent} 8%, transparent)`, color: P4.accent, fontWeight: 600, letterSpacing: '0.04em' }}>MED SPA</span>
              <span style={{ fontFamily: FONT_BODY, fontSize: 11, padding: '4px 9px', borderRadius: 4, background: `color-mix(in oklab, ${P4.accent} 8%, transparent)`, color: P4.accent, fontWeight: 600, letterSpacing: '0.04em' }}>AUSTIN, TX</span>
              <span style={{ fontFamily: FONT_BODY, fontSize: 11, padding: '4px 9px', borderRadius: 4, background: `color-mix(in oklab, ${P4.inkSoft} 12%, transparent)`, color: P4.inkSoft, fontWeight: 500 }}>12 service pages scanned</span>
            </div>
          </div>
        </div>

        {/* Tally — three counts as a single rhythm */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', borderBottom: `1px solid ${P4.border}` }}>
          {[
            { label: 'Issues',           value: '6', kind: 'issue' },
            { label: 'Opportunities',    value: '3', kind: 'opportunity' },
            { label: 'Healthy signals',  value: '2', kind: 'good' },
          ].map((s, i) => (
            <div key={i} style={{
              padding: '16px 22px',
              borderRight: i < 2 ? `1px solid ${P4.border}` : 'none',
              display: 'flex', alignItems: 'center', gap: 12,
            }}>
              <Marker_v4 kind={s.kind} size={22} />
              <div>
                <div style={{ fontFamily: FONT_SANS, fontSize: 18, fontWeight: 600, fontVariantNumeric: 'tabular-nums', color: P4.ink, lineHeight: 1.05 }}>{s.value}</div>
                <div style={{ fontSize: 11, color: P4.inkSoft, letterSpacing: '0.04em', marginTop: 2 }}>{s.label}</div>
              </div>
            </div>
          ))}
        </div>

        {/* Findings — top 3 preview */}
        <div>
          <div style={{ padding: '14px 28px 8px', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
            <MonoKicker_v4>Top findings</MonoKicker_v4>
            <span style={{ fontFamily: FONT_MONO, fontSize: 10.5, color: P4.inkSoft, letterSpacing: '0.06em' }}>3 of 11</span>
          </div>
          {[
            { kind: 'issue',       text: 'Meta tags missing on 8 of 12 service pages', sub: 'Search engines summarize blind', tag: 'SEO' },
            { kind: 'opportunity', text: 'Botox & laser hair removal absent in AI answers', sub: 'High-intent queries route to competitors', tag: 'AI search' },
            { kind: 'good',        text: 'Site speed: 2.1s load — meets Core Web Vitals', sub: 'No action needed', tag: 'Performance' },
          ].map((f, i) => (
            <div key={i} style={{
              display: 'grid', gridTemplateColumns: 'auto 1fr auto auto', gap: 14,
              padding: '14px 28px', alignItems: 'center',
              borderTop: `1px dashed ${P4.border}`,
              background: f.kind === 'opportunity' ? `color-mix(in oklab, ${P4.warm} 4%, transparent)` : 'transparent',
            }}>
              <Marker_v4 kind={f.kind} />
              <div>
                <div style={{ fontSize: 14, fontWeight: 500, color: P4.ink, marginBottom: 2 }}>{f.text}</div>
                <div style={{ fontSize: 12, color: P4.inkSoft }}>{f.sub}</div>
              </div>
              <span style={{
                fontFamily: FONT_BODY, fontSize: 10, padding: '3px 8px', borderRadius: 4,
                background: `color-mix(in oklab, ${P4.inkSoft} 12%, transparent)`,
                color: P4.inkSoft, fontWeight: 600, letterSpacing: '0.05em', textTransform: 'uppercase',
              }}>{f.tag}</span>
              <span style={{ fontFamily: FONT_MONO, fontSize: 11, color: P4.inkSoft, opacity: 0.7 }}>0{i + 1}</span>
            </div>
          ))}
        </div>

        {/* Footer */}
        <div style={{
          padding: '14px 26px', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          borderTop: `1px solid ${P4.border}`,
          background: P4.surfaceTint,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{
              width: 24, height: 24, borderRadius: 12,
              border: `1.5px solid ${P4.accent}`,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 10, fontWeight: 700, color: P4.accent,
            }}>R</span>
            <span style={{ fontSize: 12, fontWeight: 500, color: P4.ink }}>Reviewed against current FTC guidance</span>
          </div>
          <span style={{ fontSize: 12, color: P4.accent, fontWeight: 600, cursor: 'pointer' }}>+ 8 more findings →</span>
        </div>
      </div>

      <div style={{
        position: 'absolute', top: -12, right: -16,
        background: P4.warm, color: P4.warmInk,
        padding: '5px 11px', borderRadius: 999,
        fontSize: 11, fontWeight: 700, letterSpacing: '0.06em',
        boxShadow: '0 8px 18px rgba(0,0,0,0.10)', transform: 'rotate(2deg)',
      }}>
        + 2 quick wins
      </div>
    </div>
  );
}

/* =============================================================
   LANDING — refined master
   ============================================================= */
function Landing_v4() {
  return (
    <div style={{ width: 1280, fontFamily: FONT_BODY, color: P4.ink, '--font-display': FONT_SERIF, background: '#fff' }}>
      <LV_StickyNav />
      <Header_v4 />

      {/* Hero */}
      <div style={{ position: 'relative', padding: '76px 56px 92px', background: '#ffffff', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: -120, right: -160, opacity: 0.6 }}>
          <SignalGrid_v4 size={760} />
        </div>

        <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 64, alignItems: 'center' }}>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 28, fontFamily: FONT_MONO, fontSize: 11, color: P4.inkSoft, letterSpacing: '0.1em' }}>
              <span>RUN · 04 / 26</span>
              <span style={{ width: 24, height: 1, background: P4.border }} />
              <span>EVIDENCE-LED CONTENT FOR US AESTHETIC CLINICS</span>
            </div>

            <h1 style={{ fontFamily: FONT_SERIF, fontSize: 60, lineHeight: 1.02, fontWeight: 400, letterSpacing: '-0.028em', marginBottom: 22, color: P4.ink, fontVariationSettings: "'opsz' 144, 'SOFT' 50" }} className="balance">
              Diagnose your visibility.{' '}
              <span style={{ color: P4.accent, fontStyle: 'italic', fontWeight: 400 }}>Plan the content.</span>{' '}
              Ship it doctor-reviewed.
            </h1>
            <p style={{ fontSize: 17, lineHeight: 1.6, color: P4.inkSoft, maxWidth: 520, marginBottom: 32 }} className="pretty">
              MedSpaCopy runs your site through 11 visibility signals, hands you a 90-day plan, and ships every article past your medical director — before it reaches a patient.
            </p>

            {/* URL form */}
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 0,
              background: '#fff', borderRadius: 12,
              border: `1.5px solid ${P4.accent}`,
              padding: 6, maxWidth: 540, width: '100%',
              boxShadow: '0 14px 32px -18px rgba(15,40,50,0.20)',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', flex: 1, gap: 10, padding: '0 14px' }}>
                <span style={{ fontFamily: FONT_MONO, fontSize: 12, color: P4.inkSoft }}>https://</span>
                <input defaultValue="smithmedspa.com" style={{ border: 'none', outline: 'none', flex: 1, height: 44, fontSize: 15, fontFamily: FONT_BODY, background: 'transparent', color: P4.ink, fontWeight: 500 }} />
              </div>
              <button style={{
                background: P4.accent, color: '#fff', border: 'none', borderRadius: 8,
                height: 44, padding: '0 22px', fontSize: 14, fontWeight: 600, cursor: 'pointer',
                fontFamily: FONT_BODY,
              }}>
                Run diagnosis →
              </button>
            </div>

            {/* Consolidated proof — bold label on top, description on second line */}
            <div style={{
              display: 'flex', alignItems: 'stretch', gap: 28, marginTop: 22,
              fontSize: 12.5, color: P4.inkSoft,
            }}>
              {[
                { dot: P4.good, label: 'Free', sub: 'No card.' },
                { label: '~5 min',          sub: 'to your report' },
                { label: '11 signals',      sub: 'per scan' },
                { label: 'Doctor-signed',   sub: 'output' },
              ].map((p, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
                  {i > 0 && (
                    <span style={{ width: 1, alignSelf: 'stretch', background: P4.border, marginRight: 18 }} />
                  )}
                  {p.dot && (
                    <span style={{ width: 5, height: 5, borderRadius: 5, background: p.dot, marginTop: 7, flexShrink: 0 }} />
                  )}
                  <div>
                    <div style={{ color: P4.ink, fontWeight: 600, lineHeight: 1.25 }}>{p.label}</div>
                    <div style={{ color: P4.inkSoft, marginTop: 2, lineHeight: 1.25 }}>{p.sub}</div>
                  </div>
                </div>
              ))}
            </div>

          </div>

          <div style={{ position: 'relative', maxWidth: 480, margin: '0 auto' }}>
            <img
              src="/screens/hero-puzzle.png"
              alt="MedSpaCopy content system"
              style={{ display: 'block', width: '100%', height: 'auto' }}
            />
            <HeroPuzzleLabels />
          </div>
        </div>
      </div>

      <LV_ProblemBlock />

      {/* Three-pillar — Why pick us */}
      <div style={{ padding: '88px 56px', background: '#fff', borderTop: `1px solid ${P4.border}` }}>
        <div style={{ marginBottom: 36, maxWidth: 880 }}>
          <div style={{ fontFamily: FONT_MONO, fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', color: P4.accent, textTransform: 'uppercase', marginBottom: 14 }}>Why med spas pick MedSpaCopy</div>
          <h2 style={{ fontFamily: FONT_SERIF, fontSize: 40, fontWeight: 450, color: P4.ink, letterSpacing: '-0.022em', lineHeight: 1.08, fontVariationSettings: "'opsz' 72, 'SOFT' 50", margin: 0 }} className="balance">Built for clinics, not <span style={{ fontStyle: 'italic' }}>content farms.</span></h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }}>
          {[
            { kicker: '01 · Diagnose', title: 'Eleven signals across SEO, AI search, and patient intent', body: 'Free in under five minutes. No card. No call.' },
            { kicker: '02 · Plan',     title: 'A 90-day content plan tied to the gaps we found',           body: 'Audit-grade research, prioritized for your services and city.' },
            { kicker: '03 · Ship',     title: 'Doctor-reviewed before a single patient reads it',          body: 'Every article signed off by a clinician. FTC-aware claims, on by default.' },
          ].map((c, i) => (
            <div key={i} style={{ paddingTop: 22, borderTop: `2px solid ${P4.accent}` }}>
              <div style={{ fontFamily: FONT_MONO, fontSize: 11, fontWeight: 600, letterSpacing: '0.1em', color: P4.accent, marginBottom: 12 }}>{c.kicker}</div>
              <h3 style={{ fontFamily: FONT_SERIF, fontSize: 22, fontWeight: 450, lineHeight: 1.25, marginBottom: 10, letterSpacing: '-0.012em', fontVariationSettings: "'opsz' 36, 'SOFT' 50" }} className="balance">{c.title}</h3>
              <p style={{ fontSize: 13.5, lineHeight: 1.55, color: P4.inkSoft }}>{c.body}</p>
            </div>
          ))}
        </div>
      </div>

      <LV_ClinicalReview />
      <LV_FreeReportPreview />
      <LV_HowItWorks />
      <LV_SampleArticles />
      <LV_WhyNotChatGPT />

      {/* Pricing — Strategy Audit emphasized harder */}
      <div id="pricing" style={{ padding: '92px 56px', background: P4.surfaceTint, borderTop: `1px solid ${P4.borderWarm}` }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 40 }}>
          <div>
            <MonoKicker_v4 color={P4.warm} mb={10}>Pricing</MonoKicker_v4>
            <h2 style={{ fontFamily: FONT_SERIF, fontSize: 40, fontWeight: 450, color: P4.ink, letterSpacing: '-0.022em', fontVariationSettings: "'opsz' 72, 'SOFT' 50" }} className="balance">Mirrored to your <span style={{ fontStyle: 'italic' }}>funnel</span>.</h2>
          </div>
          <span style={{ fontSize: 13.5, color: P4.inkSoft, maxWidth: 340, textAlign: 'right', lineHeight: 1.55 }}>Start free. Move to a Strategy Audit when the diagnosis is worth acting on.</span>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr 1fr', gap: 14, alignItems: 'stretch' }}>
          {/* Free */}
          <div style={{ background: '#fff', border: `1px solid ${P4.border}`, borderRadius: 12, padding: 28, display: 'flex', flexDirection: 'column' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
              <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', color: P4.inkSoft }}>Free Site Report</div>
              <span style={{ fontSize: 11, color: P4.inkSoft, fontVariantNumeric: 'tabular-nums' }}>~5 min</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 6 }}>
              <span style={{ fontFamily: FONT_SANS, fontSize: 38, fontWeight: 600, letterSpacing: '-0.02em', color: P4.ink }}>$0</span>
              <span style={{ fontSize: 13, color: P4.inkSoft }}>· no card</span>
            </div>
            <p style={{ fontSize: 13, color: P4.inkSoft, marginBottom: 22, lineHeight: 1.5 }}>Diagnose your visibility. See where patients can't find you.</p>
            <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 22px', display: 'flex', flexDirection: 'column', gap: 9, fontSize: 13.5, flex: 1 }}>
              {['Visibility score & 11 signals', 'Quick wins checklist', 'Sample article, doctor-reviewed'].map((t, j) => (
                <li key={j} style={{ display: 'flex', gap: 8 }}><span style={{ color: P4.accent, fontWeight: 600 }}>+</span><span>{t}</span></li>
              ))}
            </ul>
            <button style={{ width: '100%', height: 42, background: '#fff', color: P4.accent, border: `1px solid ${P4.accent}`, borderRadius: 8, fontSize: 13.5, fontWeight: 600, cursor: 'pointer', fontFamily: FONT_BODY }}>Get free report</button>
          </div>

          {/* Strategy Audit — emphasized harder: dark frame top + warm seal + tighter rhythm */}
          <div style={{
            position: 'relative',
            background: '#fff',
            border: `2px solid ${P4.accent}`, borderRadius: 14,
            padding: 0,
            boxShadow: `0 32px 64px -28px rgba(15,40,50,0.34), 0 4px 16px -8px rgba(15,40,50,0.10)`,
            transform: 'translateY(-12px)',
            display: 'flex', flexDirection: 'column', overflow: 'hidden',
          }}>
            {/* Dark ribbon top — mirrors the diagnostic card framing */}
            <div style={{
              padding: '11px 28px', background: P4.ink, color: '#fff',
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ width: 7, height: 7, borderRadius: 4, background: P4.warm, boxShadow: `0 0 0 3px color-mix(in oklab, ${P4.warm} 25%, transparent)` }} />
                <span style={{ fontFamily: FONT_MONO, fontSize: 10.5, fontWeight: 600, letterSpacing: '0.16em', textTransform: 'uppercase' }}>Most clinics start here</span>
              </div>
              <span style={{ fontFamily: FONT_MONO, fontSize: 10.5, opacity: 0.65, letterSpacing: '0.06em' }}>~7 BUSINESS DAYS</span>
            </div>

            <div style={{ padding: 30, display: 'flex', flexDirection: 'column', flex: 1 }}>
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 12 }}>
                <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', color: P4.accent }}>Strategy Audit</div>
              </div>

              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 6 }}>
                <span style={{ fontFamily: FONT_SANS, fontSize: 52, fontWeight: 600, letterSpacing: '-0.028em', color: P4.ink, fontVariantNumeric: 'tabular-nums', lineHeight: 1 }}>$1,500</span>
                <span style={{ fontSize: 13, color: P4.inkSoft }}>· one-time</span>
              </div>
              <p style={{ fontFamily: FONT_SERIF, fontSize: 17, color: P4.ink, marginBottom: 22, lineHeight: 1.4, letterSpacing: '-0.005em', fontWeight: 400 }} className="pretty">
                The diagnosis, the competitor scan, and your 90-day content plan — written by clinical editors.
              </p>

              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px 18px', marginBottom: 22, fontSize: 13.5, flex: 1 }}>
                {[
                  'Clinic profile & competitor scan',
                  '90-day content plan',
                  'Research roadmap',
                  'AI-search optimization',
                  'Doctor-reviewed topic list',
                  'Wallet credit on first 3 articles',
                ].map((t, j) => (
                  <div key={j} style={{ display: 'flex', gap: 8 }}>
                    <span style={{ color: P4.accent, fontWeight: 700 }}>+</span>
                    <span>{t}</span>
                  </div>
                ))}
              </div>

              {/* Trust line under features */}
              <div style={{
                marginBottom: 18, padding: '10px 14px',
                background: P4.surfaceTint, borderRadius: 8,
                display: 'flex', alignItems: 'center', gap: 10, fontSize: 12.5, color: P4.inkSoft,
              }}>
                <span style={{
                  width: 22, height: 22, borderRadius: 11,
                  border: `1.5px solid ${P4.accent}`,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 10, fontWeight: 700, color: P4.accent,
                }}>R</span>
                <span>Editorial team reviews every audit before it ships. <strong style={{ color: P4.ink, fontWeight: 600 }}>Money-back if unhelpful.</strong></span>
              </div>

              <button style={{ width: '100%', height: 48, background: P4.accent, color: '#fff', border: 'none', borderRadius: 8, fontSize: 14.5, fontWeight: 600, cursor: 'pointer', fontFamily: FONT_BODY }}>Start with audit →</button>
            </div>
          </div>

          {/* Articles */}
          <div style={{ background: '#fff', border: `1px solid ${P4.border}`, borderRadius: 12, padding: 28, display: 'flex', flexDirection: 'column' }}>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 14 }}>
              <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', color: P4.inkSoft }}>Articles</div>
              <span style={{ fontSize: 11, color: P4.inkSoft }}>per article</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 6 }}>
              <span style={{ fontFamily: FONT_SANS, fontSize: 38, fontWeight: 600, letterSpacing: '-0.02em', color: P4.ink, fontVariantNumeric: 'tabular-nums' }}>$250</span>
              <span style={{ fontSize: 13, color: P4.inkSoft }}>· top-up</span>
            </div>
            <p style={{ fontSize: 13, color: P4.inkSoft, marginBottom: 22, lineHeight: 1.5 }}>Order from your plan. Wallet credits earn 10–20% bonus.</p>
            <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 22px', display: 'flex', flexDirection: 'column', gap: 9, fontSize: 13.5, flex: 1 }}>
              {['Doctor-reviewed before delivery', 'Wallet credit · 10–20% bonus', 'Optional updates on plans'].map((t, j) => (
                <li key={j} style={{ display: 'flex', gap: 8 }}><span style={{ color: P4.accent, fontWeight: 600 }}>+</span><span>{t}</span></li>
              ))}
            </ul>
            <button style={{ width: '100%', height: 42, background: '#fff', color: P4.accent, border: `1px solid ${P4.accent}`, borderRadius: 8, fontSize: 13.5, fontWeight: 600, cursor: 'pointer', fontFamily: FONT_BODY }}>See how articles work</button>
          </div>
        </div>
      </div>

      <LV_NotForUs />
      <LV_FAQ />
      <LV_FooterCTA />

      <Footer_v4 />
    </div>
  );
}

/* =============================================================
   FREE REPORT — matching system, deliverable surface
   ============================================================= */
function FreeReport_v4() {
  return (
    <div style={{ width: 1280, fontFamily: FONT_BODY, color: P4.ink, '--font-display': FONT_SERIF, background: '#fff' }}>
      <Header_v4 signedIn email="sarah@smithmedspa.com" />

      {/* Title strip */}
      <div style={{ padding: '44px 56px 36px', background: P4.surfaceTint, borderBottom: `1px solid ${P4.borderWarm}`, position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', top: -260, right: -200, opacity: 0.5 }}>
          <SignalGrid_v4 size={620} faint />
        </div>
        <div style={{ position: 'relative', maxWidth: 880 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 18, fontFamily: FONT_MONO, fontSize: 11, color: P4.inkSoft, letterSpacing: '0.1em' }}>
            <span>FREE VISIBILITY REPORT</span>
            <span style={{ width: 24, height: 1, background: P4.border }} />
            <span>RUN · 04 / 26 · v 1.04</span>
            <span style={{ width: 24, height: 1, background: P4.border }} />
            <span>SMITHMEDSPA.COM</span>
          </div>
          <h1 style={{ fontFamily: FONT_SERIF, fontSize: 42, fontWeight: 400, letterSpacing: '-0.025em', marginBottom: 12, lineHeight: 1.08, fontVariationSettings: "'opsz' 144, 'SOFT' 50" }} className="balance">
            Hi Sarah — here's what we <span style={{ fontStyle: 'italic' }}>found</span> at Smith Med Spa.
          </h1>
          <p style={{ fontSize: 16, color: P4.inkSoft, maxWidth: 720, lineHeight: 1.55 }} className="pretty">
            Eleven visibility signals analyzed across 12 service pages. Six issues, three opportunities, two healthy signals. <strong style={{ color: P4.ink, fontWeight: 600 }}>Two quick wins inside.</strong>
          </p>
          <div style={{ marginTop: 18, display: 'flex', gap: 10 }}>
            <button style={{ height: 36, padding: '0 16px', background: P4.ink, color: '#fff', border: 'none', borderRadius: 8, fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: FONT_BODY }}>Download PDF</button>
            <button style={{ height: 36, padding: '0 16px', background: '#fff', color: P4.ink, border: `1px solid ${P4.border}`, borderRadius: 8, fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: FONT_BODY }}>Email to my doctor</button>
            <button style={{ height: 36, padding: '0 16px', background: '#fff', color: P4.ink, border: `1px solid ${P4.border}`, borderRadius: 8, fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: FONT_BODY }}>Share link</button>
          </div>
        </div>
      </div>

      <div style={{ padding: '44px 56px 64px', display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 40, alignItems: 'flex-start' }}>
        <div>
          <DiagnosticCard_v4 />

          {/* Findings */}
          <div style={{ marginTop: 36 }}>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 18 }}>
              <h2 style={{ fontFamily: FONT_SERIF, fontSize: 26, fontWeight: 450, letterSpacing: '-0.015em', fontVariationSettings: "'opsz' 72, 'SOFT' 50" }}>Eleven signals, in detail</h2>
              <div style={{ display: 'flex', gap: 6, fontSize: 11.5 }}>
                {[
                  { l: 'All', n: 11 },
                  { l: 'Issues', n: 6 },
                  { l: 'Opportunities', n: 3 },
                  { l: 'Healthy', n: 2 },
                ].map((t, i) => (
                  <span key={i} style={{
                    padding: '5px 12px', borderRadius: 999,
                    background: i === 0 ? P4.ink : 'transparent',
                    color: i === 0 ? '#fff' : P4.inkSoft,
                    border: `1px solid ${i === 0 ? P4.ink : P4.border}`,
                    fontWeight: 500, cursor: 'pointer',
                    display: 'inline-flex', alignItems: 'center', gap: 6,
                  }}>{t.l} <span style={{ fontFamily: FONT_MONO, opacity: 0.7, fontSize: 10.5 }}>{t.n}</span></span>
                ))}
              </div>
            </div>

            <div style={{ border: `1px solid ${P4.border}`, borderRadius: 12, overflow: 'hidden', background: '#fff' }}>
              {[
                { kind: 'issue', cat: 'SEO',            text: 'Meta tags missing on 8 of 12 service pages', sub: 'Patients searching by procedure don\'t see your snippet.' },
                { kind: 'opportunity', cat: 'AI search', text: 'Botox & laser hair removal absent in AI answers', sub: 'Perplexity, ChatGPT, Gemini route the query elsewhere.' },
                { kind: 'issue', cat: 'Patient intent',  text: 'Recovery & cost questions unanswered on-site', sub: 'These are the top two pre-booking patient questions.' },
                { kind: 'opportunity', cat: 'Local',     text: '"Med spa near Westlake" — no page targets it', sub: 'Underserved geo-modifier within your service radius.' },
                { kind: 'issue', cat: 'Content depth',   text: '4 service pages are under 200 words', sub: 'Below the threshold patients (and search) read as substantive.' },
                { kind: 'good', cat: 'Performance',      text: 'Site speed: 2.1s load — meets Core Web Vitals', sub: 'No action needed.' },
                { kind: 'good', cat: 'Trust',            text: 'Medical director credentials visible on home page', sub: 'Keep this; it\'s rare in the category.' },
              ].map((f, i, arr) => (
                <div key={i} style={{
                  display: 'grid', gridTemplateColumns: 'auto 1fr auto auto', gap: 16,
                  padding: '16px 22px', alignItems: 'center',
                  borderTop: i > 0 ? `1px dashed ${P4.border}` : 'none',
                  background: f.kind === 'opportunity' ? `color-mix(in oklab, ${P4.warm} 5%, transparent)` : 'transparent',
                }}>
                  <Marker_v4 kind={f.kind} />
                  <div>
                    <div style={{ fontSize: 14.5, fontWeight: 500, color: P4.ink, marginBottom: 3 }}>{f.text}</div>
                    <div style={{ fontSize: 12.5, color: P4.inkSoft }}>{f.sub}</div>
                  </div>
                  <span style={{
                    fontFamily: FONT_BODY, fontSize: 10, padding: '4px 9px', borderRadius: 4,
                    background: `color-mix(in oklab, ${P4.inkSoft} 12%, transparent)`,
                    color: P4.inkSoft, fontWeight: 600, letterSpacing: '0.05em', textTransform: 'uppercase',
                  }}>{f.cat}</span>
                  <a href="#" style={{ fontSize: 12, color: P4.accent, fontWeight: 600, textDecoration: 'none' }}>Details →</a>
                </div>
              ))}
            </div>
            <div style={{ textAlign: 'center', padding: '14px 0' }}>
              <a href="#" style={{ fontSize: 13, color: P4.accent, fontWeight: 600, textDecoration: 'none' }}>Show all 11 signals ↓</a>
            </div>
          </div>
        </div>

        {/* Right rail */}
        <div style={{ position: 'sticky', top: 24, alignSelf: 'start', display: 'flex', flexDirection: 'column', gap: 22 }}>
          {/* Quick wins */}
          <div style={{ background: '#fff', border: `1px solid ${P4.borderWarm}`, borderRadius: 12, overflow: 'hidden' }}>
            <div style={{
              padding: '14px 20px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
              background: `color-mix(in oklab, ${P4.warm} 12%, #fff)`,
              borderBottom: `1px solid ${P4.borderWarm}`,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span style={{ width: 7, height: 7, borderRadius: 4, background: P4.warm }} />
                <span style={{ fontFamily: FONT_MONO, fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: P4.warmInk }}>Quick wins · this week</span>
              </div>
              <span style={{ fontFamily: FONT_MONO, fontSize: 11, color: P4.warmInk, opacity: 0.75 }}>~ 90m total</span>
            </div>
            <div style={{ padding: 6 }}>
              {[
                { t: 'Add structured data for 5 procedures',     time: '~30m' },
                { t: 'Write FAQ blocks for top services',         time: '~45m' },
                { t: 'Optimize titles for "near me" queries',     time: '~15m' },
              ].map((q, i, arr) => (
                <div key={i} style={{ display: 'flex', gap: 12, padding: '13px 14px', borderBottom: i < arr.length - 1 ? `1px dashed ${P4.border}` : 'none', alignItems: 'center' }}>
                  <span style={{ width: 18, height: 18, borderRadius: 4, border: `1.5px solid ${P4.warm}`, flexShrink: 0 }} />
                  <span style={{ fontSize: 13.5, color: P4.ink }}>{q.t}</span>
                  <span style={{ marginLeft: 'auto', fontSize: 11, color: P4.inkSoft, fontFamily: FONT_MONO }}>{q.time}</span>
                </div>
              ))}
            </div>
            <div style={{ padding: '12px 18px', display: 'flex', gap: 8, borderTop: `1px solid ${P4.border}`, background: '#fafafa' }}>
              <button style={{ flex: 1, height: 32, background: '#fff', border: `1px solid ${P4.border}`, borderRadius: 6, fontSize: 12, fontWeight: 600, cursor: 'pointer', color: P4.ink, fontFamily: FONT_BODY }}>Download checklist</button>
              <button style={{ flex: 1, height: 32, background: '#fff', border: `1px solid ${P4.border}`, borderRadius: 6, fontSize: 12, fontWeight: 600, cursor: 'pointer', color: P4.ink, fontFamily: FONT_BODY }}>GPT prompts</button>
            </div>
          </div>

          {/* Audit upsell */}
          <div style={{
            background: P4.ink, color: '#fff',
            borderRadius: 14, padding: 28, position: 'relative', overflow: 'hidden',
          }}>
            <div style={{ position: 'absolute', top: -50, right: -50, opacity: 0.20 }}>
              <SignalGrid_v4 size={340} />
            </div>
            <div style={{ position: 'relative' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
                <span style={{ width: 7, height: 7, borderRadius: 4, background: P4.warm, boxShadow: `0 0 0 3px color-mix(in oklab, ${P4.warm} 25%, transparent)` }} />
                <span style={{ fontFamily: FONT_MONO, fontSize: 10.5, fontWeight: 600, letterSpacing: '0.16em', textTransform: 'uppercase', color: P4.warm }}>Strategy Audit · $1,500</span>
              </div>
              <h3 style={{ fontFamily: FONT_SERIF, fontSize: 28, fontWeight: 450, letterSpacing: '-0.015em', lineHeight: 1.18, marginBottom: 14, color: '#fff', fontVariationSettings: "'opsz' 72, 'SOFT' 50" }} className="balance">
                Know which pages to fix first, and which content to <span style={{ fontStyle: 'italic' }}>ship next</span>.
              </h3>
              <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 22px', display: 'flex', flexDirection: 'column', gap: 9, fontSize: 13.5, color: 'rgba(255,255,255,0.78)' }}>
                {['Full visibility & competitor analysis', 'Priority list of pages to update', '90-day content roadmap', 'Doctor-reviewed topic opportunities'].map((t, i) => (
                  <li key={i} style={{ display: 'flex', gap: 8 }}>
                    <span style={{ color: P4.warm, fontWeight: 700 }}>+</span>
                    <span>{t}</span>
                  </li>
                ))}
              </ul>
              <button style={{ width: '100%', height: 46, background: '#fff', color: P4.ink, border: 'none', borderRadius: 8, fontSize: 14, fontWeight: 600, cursor: 'pointer', fontFamily: FONT_BODY }}>See full strategy →</button>
              <p style={{ fontSize: 11.5, color: 'rgba(255,255,255,0.55)', marginTop: 12, textAlign: 'center' }}>No charge until you confirm scope.</p>
            </div>
          </div>

          {/* Doctor reviewer card */}
          <div style={{ border: `1px solid ${P4.border}`, borderRadius: 12, padding: 18, display: 'flex', gap: 14, alignItems: 'center', background: '#fff' }}>
            <div style={{
              width: 44, height: 44, borderRadius: 22,
              background: `color-mix(in oklab, ${P4.accent} 12%, #fff)`,
              border: `1px solid ${P4.accent100}`,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: FONT_SANS, fontSize: 13, fontWeight: 700, color: P4.accent, flexShrink: 0,
            }}>RM</div>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 13.5, fontWeight: 600, color: P4.ink }}>Reviewed by R. Marsden, MD</div>
              <div style={{ fontSize: 12, color: P4.inkSoft, marginTop: 2 }}>Editorial physician · FTC-aware claims</div>
            </div>
            <a href="#" style={{ fontSize: 12, color: P4.accent, fontWeight: 600, textDecoration: 'none' }}>Methodology</a>
          </div>
        </div>
      </div>

      <Footer_v4 />
    </div>
  );
}

/* =============================================================
   RESEARCH DASHBOARD — same system, app surface
   ============================================================= */
function ResearchDashboard_v4() {
  const ink = P4.ink, accent = P4.accent;
  return (
    <div style={{ width: 1280, fontFamily: FONT_BODY, color: ink, '--font-display': FONT_SANS, background: P4.surfaceCool, minHeight: 1200 }}>
      {/* App shell — sidebar + topbar */}
      <div style={{ display: 'grid', gridTemplateColumns: '224px 1fr', minHeight: 1200 }}>
        {/* Sidebar */}
        <aside style={{ background: '#fff', borderRight: `1px solid ${P4.border}`, padding: '18px 14px', display: 'flex', flexDirection: 'column', gap: 4 }}>
          <div style={{ padding: '6px 8px 14px' }}>
            <Wordmark_v4 size={15} />
          </div>
          <div style={{
            margin: '0 8px 14px', padding: '10px 12px', borderRadius: 8,
            background: P4.surfaceTint, border: `1px solid ${P4.borderWarm}`,
          }}>
            <div style={{ fontFamily: FONT_MONO, fontSize: 10, color: P4.inkSoft, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Clinic</div>
            <div style={{ fontSize: 13, fontWeight: 600, color: ink, marginTop: 4 }}>Smith Med Spa</div>
            <div style={{ fontSize: 11.5, color: P4.inkSoft, marginTop: 2 }}>Austin, TX · 12 pages</div>
          </div>

          <NavGroup label="Workspace">
            <NavItem label="Overview" />
            <NavItem label="Research" active />
            <NavItem label="Content plan" badge="06" />
            <NavItem label="Articles" badge="03" />
            <NavItem label="Doctor review" badge="02" warm />
          </NavGroup>
          <NavGroup label="Account">
            <NavItem label="Wallet" />
            <NavItem label="Billing" />
            <NavItem label="Settings" />
          </NavGroup>

          <div style={{ marginTop: 'auto', padding: 12, border: `1px solid ${P4.border}`, borderRadius: 10, background: P4.accent50 }}>
            <div style={{ fontFamily: FONT_MONO, fontSize: 10, color: accent, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Wallet</div>
            <div style={{ fontFamily: FONT_SANS, fontSize: 18, fontWeight: 600, color: ink, fontVariantNumeric: 'tabular-nums', marginTop: 4 }}>$1,250.00</div>
            <div style={{ fontSize: 11, color: P4.inkSoft, marginTop: 2 }}>≈ 5 articles + audit credit</div>
          </div>
        </aside>

        {/* Main */}
        <main style={{ display: 'flex', flexDirection: 'column' }}>
          {/* Topbar */}
          <div style={{
            height: 56, padding: '0 28px', borderBottom: `1px solid ${P4.border}`,
            display: 'flex', alignItems: 'center', justifyContent: 'space-between', background: '#fff',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, fontSize: 12.5, color: P4.inkSoft }}>
              <span>Workspace</span>
              <span style={{ opacity: 0.5 }}>/</span>
              <span style={{ color: ink, fontWeight: 600 }}>Research</span>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '6px 12px', borderRadius: 8, border: `1px solid ${P4.border}`,
                background: '#fff', fontSize: 12.5, color: P4.inkSoft, width: 280,
              }}>
                <span style={{ opacity: 0.6 }}>⌕</span>
                <span>Search topics, sources, claims…</span>
                <span style={{ marginLeft: 'auto', fontFamily: FONT_MONO, fontSize: 10, color: P4.inkSoft, opacity: 0.7 }}>⌘K</span>
              </div>
              <button style={{ height: 34, padding: '0 14px', background: P4.ink, color: '#fff', border: 'none', borderRadius: 8, fontSize: 12.5, fontWeight: 600, cursor: 'pointer', fontFamily: FONT_BODY }}>+ New article</button>
            </div>
          </div>

          {/* Page content */}
          <div style={{ padding: '28px 32px 56px', display: 'flex', flexDirection: 'column', gap: 24 }}>
            {/* Page header */}
            <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24 }}>
              <div>
                <MonoKicker_v4 mb={8}>Audit · Apr 2026 · v 1.04</MonoKicker_v4>
                <h1 style={{ fontFamily: FONT_SANS, fontSize: 30, fontWeight: 600, color: ink, letterSpacing: '-0.022em', marginBottom: 6 }}>Research</h1>
                <p style={{ fontSize: 14, color: P4.inkSoft, lineHeight: 1.55, maxWidth: 640 }} className="pretty">
                  The evidence behind your content plan. Every topic, every source, every claim — traceable before it reaches a patient.
                </p>
              </div>
              <div style={{ display: 'flex', gap: 8 }}>
                <button style={{ height: 36, padding: '0 14px', background: '#fff', color: ink, border: `1px solid ${P4.border}`, borderRadius: 8, fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: FONT_BODY }}>Export evidence pack</button>
                <button style={{ height: 36, padding: '0 14px', background: P4.accent, color: '#fff', border: 'none', borderRadius: 8, fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: FONT_BODY }}>Add topic →</button>
              </div>
            </div>

            {/* Stat strip — same rhythm as marketing */}
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, background: '#fff', border: `1px solid ${P4.border}`, borderRadius: 12, overflow: 'hidden' }}>
              {[
                { v: '14',   l: 'Topics in plan',          sub: '6 ready · 5 drafting · 3 queued' },
                { v: '186',  l: 'Sources collected',       sub: '72% peer-reviewed' },
                { v: '47',   l: 'Claims · medical',         sub: '12 awaiting doctor review',  warm: true },
                { v: '2.1%', l: 'Claim revision rate',     sub: 'Editor-flagged this audit' },
              ].map((s, i) => (
                <div key={i} style={{ padding: '18px 22px', borderRight: i < 3 ? `1px solid ${P4.border}` : 'none', background: s.warm ? P4.surfaceTint : '#fff' }}>
                  <div style={{ fontFamily: FONT_SANS, fontSize: 26, fontWeight: 600, fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.018em', color: ink }}>{s.v}</div>
                  <div style={{ fontSize: 12, color: ink, marginTop: 4, fontWeight: 600 }}>{s.l}</div>
                  <div style={{ fontSize: 11.5, color: P4.inkSoft, marginTop: 2 }}>{s.sub}</div>
                </div>
              ))}
            </div>

            {/* Two-column body */}
            <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 22, alignItems: 'flex-start' }}>
              {/* Topics table */}
              <div style={{ background: '#fff', border: `1px solid ${P4.border}`, borderRadius: 12, overflow: 'hidden' }}>
                <div style={{
                  padding: '14px 20px', borderBottom: `1px solid ${P4.border}`,
                  display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                }}>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                    <h2 style={{ fontFamily: FONT_SANS, fontSize: 15, fontWeight: 600, color: ink, letterSpacing: '-0.005em' }}>Topics in research</h2>
                    <span style={{ fontFamily: FONT_MONO, fontSize: 10.5, color: P4.inkSoft, letterSpacing: '0.06em' }}>14 TOTAL</span>
                  </div>
                  <div style={{ display: 'flex', gap: 6, fontSize: 11.5 }}>
                    {['All', 'Ready', 'Drafting', 'Queued', 'Doctor review'].map((t, i) => (
                      <span key={i} style={{
                        padding: '4px 10px', borderRadius: 999,
                        background: i === 0 ? P4.ink : 'transparent',
                        color: i === 0 ? '#fff' : P4.inkSoft,
                        border: `1px solid ${i === 0 ? P4.ink : P4.border}`,
                        fontWeight: 500, cursor: 'pointer',
                      }}>{t}</span>
                    ))}
                  </div>
                </div>

                {/* Header row */}
                <div style={{
                  display: 'grid', gridTemplateColumns: '24px 2fr 1fr 0.7fr 0.6fr 0.6fr 24px', gap: 12,
                  padding: '10px 20px', borderBottom: `1px solid ${P4.border}`,
                  fontFamily: FONT_MONO, fontSize: 10, color: P4.inkSoft, letterSpacing: '0.1em', textTransform: 'uppercase',
                  background: P4.accent50,
                }}>
                  <span></span>
                  <span>Topic</span>
                  <span>Service</span>
                  <span style={{ textAlign: 'right' }}>Sources</span>
                  <span style={{ textAlign: 'right' }}>Claims</span>
                  <span>Status</span>
                  <span></span>
                </div>

                {[
                  { topic: 'How long does Botox really last?',                   service: 'Botox',           src: 14, claims: 6, status: 'ready',     kind: 'good' },
                  { topic: 'Laser hair removal — costs, sessions, recovery',     service: 'Laser hair',      src: 22, claims: 9, status: 'drafting',  kind: 'info' },
                  { topic: 'Microneedling vs RF microneedling',                  service: 'Microneedling',   src: 18, claims: 7, status: 'review',    kind: 'opportunity' },
                  { topic: '"Med spa near Westlake" — local landing page brief', service: 'Local SEO',       src: 6,  claims: 2, status: 'drafting',  kind: 'info' },
                  { topic: 'CoolSculpting — patient candidacy & contraindications', service: 'CoolSculpting', src: 19, claims: 11, status: 'review',  kind: 'opportunity' },
                  { topic: 'Chemical peels — recovery timeline by skin type',    service: 'Peels',           src: 15, claims: 5, status: 'queued',    kind: 'queued' },
                  { topic: 'Injector credentials — what patients should ask',    service: 'Trust',           src: 9,  claims: 4, status: 'ready',     kind: 'good' },
                ].map((r, i, arr) => {
                  const statusBadge = {
                    ready:    { label: '+ ready',     fg: P4.good,   bg: `color-mix(in oklab, ${P4.good} 12%, transparent)` },
                    drafting: { label: '~ drafting',  fg: P4.accent, bg: `color-mix(in oklab, ${P4.accent} 10%, transparent)` },
                    review:   { label: '! review',    fg: P4.warn,   bg: `color-mix(in oklab, ${P4.warn} 14%, transparent)` },
                    queued:   { label: '[ ] queued',  fg: P4.inkSoft, bg: `color-mix(in oklab, ${P4.inkSoft} 12%, transparent)` },
                  }[r.status];
                  return (
                    <div key={i} style={{
                      display: 'grid', gridTemplateColumns: '24px 2fr 1fr 0.7fr 0.6fr 0.6fr 24px', gap: 12,
                      padding: '14px 20px', alignItems: 'center',
                      borderBottom: i < arr.length - 1 ? `1px solid ${P4.border}` : 'none',
                      background: r.kind === 'opportunity' ? `color-mix(in oklab, ${P4.warm} 4%, transparent)` : '#fff',
                    }}>
                      <Marker_v4 kind={r.kind === 'queued' ? 'info' : r.kind} size={20} />
                      <div style={{ minWidth: 0 }}>
                        <div style={{ fontSize: 13.5, fontWeight: 500, color: ink, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{r.topic}</div>
                        <div style={{ fontFamily: FONT_MONO, fontSize: 10.5, color: P4.inkSoft, marginTop: 2, letterSpacing: '0.04em' }}>topic_{String(i + 1).padStart(2, '0')} · v 1.{i + 1}</div>
                      </div>
                      <span style={{ fontSize: 12.5, color: P4.inkMid }}>{r.service}</span>
                      <span style={{ fontFamily: FONT_SANS, fontSize: 13, color: ink, fontVariantNumeric: 'tabular-nums', textAlign: 'right', fontWeight: 600 }}>{r.src}</span>
                      <span style={{ fontFamily: FONT_SANS, fontSize: 13, color: ink, fontVariantNumeric: 'tabular-nums', textAlign: 'right', fontWeight: 600 }}>{r.claims}</span>
                      <span style={{
                        fontFamily: FONT_BODY, fontSize: 11, padding: '4px 9px', borderRadius: 4,
                        background: statusBadge.bg, color: statusBadge.fg,
                        fontWeight: 600, letterSpacing: '0.02em', whiteSpace: 'nowrap', display: 'inline-block', textAlign: 'center',
                      }}>{statusBadge.label}</span>
                      <span style={{ color: P4.inkSoft, fontSize: 14, cursor: 'pointer' }}>›</span>
                    </div>
                  );
                })}
              </div>

              {/* Right: source quality + recent activity */}
              <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
                {/* Source quality */}
                <div style={{ background: '#fff', border: `1px solid ${P4.border}`, borderRadius: 12, padding: 22 }}>
                  <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 18 }}>
                    <h3 style={{ fontFamily: FONT_SANS, fontSize: 14, fontWeight: 600, color: ink, letterSpacing: '-0.005em' }}>Source quality · 186 total</h3>
                    <span style={{ fontFamily: FONT_MONO, fontSize: 10.5, color: P4.inkSoft, letterSpacing: '0.06em' }}>72% PEER-REVIEWED</span>
                  </div>
                  {[
                    { l: 'Peer-reviewed journals', n: 134, pct: 72, c: P4.accent },
                    { l: 'Clinical guidelines',    n: 28,  pct: 15, c: P4.accent600 },
                    { l: 'FDA / regulatory',       n: 14,  pct: 8,  c: P4.warm },
                    { l: 'Editorial / press',      n: 10,  pct: 5,  c: P4.inkSoft },
                  ].map((b, i) => (
                    <div key={i} style={{ marginBottom: 14 }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6, fontSize: 12.5 }}>
                        <span style={{ color: ink }}>{b.l}</span>
                        <span style={{ fontFamily: FONT_SANS, color: P4.inkSoft, fontVariantNumeric: 'tabular-nums', fontWeight: 600 }}>{b.n} <span style={{ opacity: 0.6, fontWeight: 400 }}>· {b.pct}%</span></span>
                      </div>
                      <div style={{ height: 6, borderRadius: 3, background: P4.border, overflow: 'hidden' }}>
                        <div style={{ width: `${b.pct}%`, height: '100%', background: b.c, borderRadius: 3 }} />
                      </div>
                    </div>
                  ))}
                  <div style={{ paddingTop: 14, borderTop: `1px solid ${P4.border}`, marginTop: 4, fontSize: 12, color: P4.inkSoft, lineHeight: 1.55 }}>
                    Sources older than 5 years are flagged for editor review. Last refresh: <span style={{ fontFamily: FONT_MONO, color: ink }}>Apr 24, 2026</span>.
                  </div>
                </div>

                {/* Recent activity */}
                <div style={{ background: '#fff', border: `1px solid ${P4.border}`, borderRadius: 12, overflow: 'hidden' }}>
                  <div style={{ padding: '14px 18px', borderBottom: `1px solid ${P4.border}`, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                    <h3 style={{ fontFamily: FONT_SANS, fontSize: 14, fontWeight: 600, color: ink, letterSpacing: '-0.005em' }}>Recent activity</h3>
                    <a href="#" style={{ fontSize: 12, color: P4.accent, fontWeight: 600, textDecoration: 'none' }}>Audit log →</a>
                  </div>
                  {[
                    { t: 'R. Marsden, MD',  act: 'approved 4 claims on',           topic: '"Botox longevity"',           when: '2h ago', kind: 'good' },
                    { t: 'Editor · L. Park', act: 'flagged source as outdated on', topic: '"Microneedling vs RF"',       when: '4h ago', kind: 'opportunity' },
                    { t: 'Sarah (you)',      act: 'added topic',                    topic: '"Westlake landing page"',     when: '1d ago', kind: 'info' },
                    { t: 'R. Marsden, MD',  act: 'requested rewrite on',           topic: '"CoolSculpting candidacy"',   when: '1d ago', kind: 'issue' },
                  ].map((a, i, arr) => (
                    <div key={i} style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 12, padding: '12px 18px', borderTop: i > 0 ? `1px dashed ${P4.border}` : 'none', alignItems: 'center' }}>
                      <Marker_v4 kind={a.kind} size={20} />
                      <div style={{ fontSize: 12.5, color: ink, lineHeight: 1.45 }}>
                        <span style={{ fontWeight: 600 }}>{a.t}</span> <span style={{ color: P4.inkSoft }}>{a.act}</span> <span style={{ color: P4.accent, fontWeight: 500 }}>{a.topic}</span>
                      </div>
                      <span style={{ fontFamily: FONT_MONO, fontSize: 10.5, color: P4.inkSoft, whiteSpace: 'nowrap' }}>{a.when}</span>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </main>
      </div>
    </div>
  );
}

/* Sidebar bits */
function NavGroup({ label, children }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 2, marginBottom: 14 }}>
      <div style={{ padding: '6px 12px', fontFamily: FONT_MONO, fontSize: 10, color: P4.inkSoft, letterSpacing: '0.12em', textTransform: 'uppercase' }}>{label}</div>
      {children}
    </div>
  );
}
function NavItem({ label, active, badge, warm }) {
  return (
    <a href="#" style={{
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '8px 12px', borderRadius: 8, textDecoration: 'none',
      background: active ? P4.accent50 : 'transparent',
      color: active ? P4.accent : P4.inkMid,
      fontSize: 13, fontWeight: active ? 600 : 500,
      border: active ? `1px solid ${P4.accent100}` : '1px solid transparent',
    }}>
      <span>{label}</span>
      {badge && (
        <span style={{
          fontFamily: FONT_MONO, fontSize: 10, padding: '2px 7px', borderRadius: 999,
          background: warm ? `color-mix(in oklab, ${P4.warm} 18%, transparent)` : `color-mix(in oklab, ${P4.inkSoft} 14%, transparent)`,
          color: warm ? P4.warmInk : P4.inkSoft, fontWeight: 700, letterSpacing: '0.04em',
        }}>{badge}</span>
      )}
    </a>
  );
}

Object.assign(window, { Landing_v4, FreeReport_v4, ResearchDashboard_v4 });
