/* MedSpaCopy — Landing v4 sections (extension blocks for v0.4 spec).
   Owns: Problem, Clinical Review, Free Report preview, How It Works,
   Sample Articles, Why-not-ChatGPT, Who We Are Not For, FAQ, Footer CTA,
   Sticky-nav. Reads tokens from window.MSC_V4 set by screens-v4.jsx. */

/* global React */
const { useEffect: lvE, useRef: lvR, useState: lvS } = React;

/* Tokens — duplicated locally so this file is self-contained but values
   match screens-v4.jsx exactly. */
const LV = {
  accent: '#1f5161',
  accent600: '#173d4a',
  warm: '#b8895c',
  good: '#3d8b6e',
  bad: '#a8553f',
  ink: '#1a2226',
  inkMid: '#39434a',
  inkSoft: '#5c6772',
  surface: '#ffffff',
  surfaceTint: '#f6f3ee',
  surfaceCool: '#eef1f3',
  border: '#e1e6eb',
  borderWarm: '#e6dccb',
};
const LV_FONT_SERIF = "var(--font-serif-display)";
const LV_FONT_SANS  = "var(--font-sans-display)";
const LV_FONT_MONO  = "var(--font-mono)";
const LV_FONT_BODY  = "var(--font-body)";

/* =============================================================
   01 · Section header — used across landing sections
   ============================================================= */
function LV_SectionHeader({ kicker, title, italicWord, eyebrow, kickerColor = LV.accent }) {
  return (
    <div style={{ marginBottom: 36, maxWidth: 880 }}>
      <div style={{ fontFamily: LV_FONT_MONO, fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', color: kickerColor, textTransform: 'uppercase', marginBottom: 14 }}>{kicker}</div>
      <h2 style={{ fontFamily: LV_FONT_SERIF, fontSize: 40, fontWeight: 450, color: LV.ink, letterSpacing: '-0.022em', lineHeight: 1.08, fontVariationSettings: "'opsz' 72, 'SOFT' 50", margin: 0 }} className="balance">
        {title}{italicWord && <> <span style={{ fontStyle: 'italic' }}>{italicWord}</span></>}
      </h2>
      {eyebrow && <p style={{ fontSize: 16, lineHeight: 1.55, color: LV.inkSoft, marginTop: 16, maxWidth: 680 }} className="pretty">{eyebrow}</p>}
    </div>
  );
}

/* =============================================================
   02 · Problem block — Why most med spa content fails
   ============================================================= */
function LV_ProblemBlock() {
  const items = [
    { title: 'It sounds like every other clinic',     body: "Generic posts don't reflect your protocols, tone, services, or patient experience." },
    { title: 'It misses high-intent patient questions', body: 'Patients search for recovery, safety, cost, downtime, and side effects before booking.' },
    { title: 'It creates clinical trust risk',         body: 'Medical content needs accuracy and clinic-fit, not just keywords.' },
  ];
  return (
    <section style={{ padding: '88px 56px', background: '#fff', borderTop: `1px solid ${LV.border}` }}>
      <LV_SectionHeader
        kicker="The problem"
        title="Why most med spa content"
        italicWord="fails."
        eyebrow="Generic AI articles and thin SEO posts rarely answer the treatment-specific questions patients ask before booking."
        kickerColor={LV.bad}
      />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18, marginTop: 12 }}>
        {items.map((it, i) => (
          <div key={i} style={{ background: LV.surfaceTint, borderRadius: 14, padding: '26px 26px 28px', border: `1px solid ${LV.borderWarm}`, position: 'relative' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14 }}>
              <span style={{
                width: 26, height: 26, borderRadius: 13, background: '#fff',
                border: `1.5px solid ${LV.bad}`, color: LV.bad,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 16, fontWeight: 600, lineHeight: 1,
              }}>−</span>
              <span style={{ fontFamily: LV_FONT_MONO, fontSize: 10.5, color: LV.inkSoft, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Failure mode {String(i + 1).padStart(2, '0')}</span>
            </div>
            <h3 style={{ fontFamily: LV_FONT_SERIF, fontSize: 21, fontWeight: 500, color: LV.ink, lineHeight: 1.22, letterSpacing: '-0.012em', marginBottom: 10, fontVariationSettings: "'opsz' 36, 'SOFT' 50" }} className="balance">{it.title}</h3>
            <p style={{ fontSize: 13.5, lineHeight: 1.55, color: LV.inkSoft, margin: 0 }}>{it.body}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

/* =============================================================
   03 · Clinical Review trust block
   ============================================================= */
function LV_ClinicalReview() {
  const items = [
    { title: 'Claim-level review',         body: 'Recovery timelines, safety language, aftercare, and protocol-sensitive details.' },
    { title: 'Clinic-fit, not generic accuracy', body: "A claim can be medically common but wrong for your clinic's protocol. We review for your actual service approach." },
    { title: 'Approve or request changes', body: 'Reviewer can approve, add notes, or request changes from their phone before delivery.' },
  ];
  return (
    <section style={{ padding: '92px 56px', background: LV.ink, color: '#fff', position: 'relative', overflow: 'hidden' }}>
      {/* Faint accent grid in the background */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(80% 60% at 80% 20%, color-mix(in oklab, ${LV.accent} 32%, transparent) 0%, transparent 60%)`,
        opacity: 0.85,
      }} />
      <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 64, alignItems: 'flex-start' }}>
        <div>
          <div style={{ fontFamily: LV_FONT_MONO, fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', color: LV.warm, textTransform: 'uppercase', marginBottom: 18 }}>Clinical review</div>
          <h2 style={{ fontFamily: LV_FONT_SERIF, fontSize: 44, fontWeight: 450, color: '#fff', letterSpacing: '-0.024em', lineHeight: 1.05, fontVariationSettings: "'opsz' 72, 'SOFT' 50", marginBottom: 20 }} className="balance">
            Content your clinic can <span style={{ fontStyle: 'italic', color: '#e9d6b9' }}>stand behind.</span>
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.6, color: 'rgba(255,255,255,0.72)', maxWidth: 440 }} className="pretty">
            Before delivery, key medical claims are reviewed for accuracy and clinic-fit — so your content does not promise what your providers would not say.
          </p>
          <div style={{ marginTop: 26, paddingTop: 22, borderTop: '1px solid rgba(255,255,255,0.14)', fontSize: 12, color: 'rgba(255,255,255,0.55)', lineHeight: 1.55, maxWidth: 440 }}>
            Reviewed for patient-facing accuracy and clinic-fit. Not a substitute for legal, regulatory, or individual medical advice.
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          {items.map((it, i) => (
            <div key={i} style={{
              background: 'rgba(255,255,255,0.04)',
              border: '1px solid rgba(255,255,255,0.10)',
              borderRadius: 12,
              padding: '22px 24px',
              display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 18, alignItems: 'flex-start',
            }}>
              <div style={{
                width: 36, height: 36, borderRadius: 10,
                background: `color-mix(in oklab, ${LV.warm} 24%, transparent)`,
                border: `1px solid color-mix(in oklab, ${LV.warm} 50%, transparent)`,
                color: LV.warm, fontFamily: LV_FONT_MONO, fontSize: 13, fontWeight: 600,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              }}>+</div>
              <div>
                <h3 style={{ fontFamily: LV_FONT_SERIF, fontSize: 19, fontWeight: 500, color: '#fff', lineHeight: 1.25, letterSpacing: '-0.008em', margin: '2px 0 6px', fontVariationSettings: "'opsz' 36, 'SOFT' 50" }}>{it.title}</h3>
                <p style={{ fontSize: 13.5, lineHeight: 1.55, color: 'rgba(255,255,255,0.72)', margin: 0 }}>{it.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* =============================================================
   04 · Free report preview — what the report shows + sample card
   ============================================================= */
function LV_FreeReportPreview() {
  const checks = [
    'Treatment pages and service coverage',
    'Missing or weak meta signals',
    'Patient questions not answered',
    'Local visibility opportunities',
    'AI-search readability',
    'Quick wins your team can act on',
  ];
  return (
    <section id="sample-report" style={{ padding: '96px 56px', background: LV.surfaceTint, borderTop: `1px solid ${LV.borderWarm}` }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
        <div>
          <LV_SectionHeader
            kicker="Your free report"
            title="What it"
            italicWord="actually shows."
            eyebrow="A real audit, not a teaser. You see the visibility score, the gaps that cost you bookings, and the quick wins your team can ship this week."
          />
          <div style={{ marginTop: 28 }}>
            <div style={{ fontFamily: LV_FONT_MONO, fontSize: 11, fontWeight: 600, letterSpacing: '0.12em', color: LV.inkSoft, textTransform: 'uppercase', marginBottom: 14 }}>What we check on your site</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px 22px', fontSize: 14, color: LV.ink }}>
              {checks.map((c, i) => (
                <li key={i} style={{ display: 'flex', gap: 10 }}><span style={{ color: LV.accent, fontWeight: 700 }}>+</span><span>{c}</span></li>
              ))}
            </ul>
            <div style={{ marginTop: 26, fontSize: 13, color: LV.inkSoft }}>No credit card. No sales call required.</div>
          </div>
        </div>

        {/* Sample report mock card */}
        <div style={{ position: 'relative' }}>
          <div style={{
            position: 'absolute', top: -14, right: -14,
            background: LV.warm, color: '#1d1108',
            padding: '6px 12px', borderRadius: 999,
            fontSize: 11, fontWeight: 700, letterSpacing: '0.04em',
            boxShadow: '0 8px 20px rgba(0,0,0,0.10)',
            transform: 'rotate(2deg)',
            zIndex: 2,
          }}>SAMPLE</div>

          <div style={{ background: '#fff', border: `1px solid ${LV.border}`, borderRadius: 14, overflow: 'hidden', boxShadow: '0 32px 64px -28px rgba(15,40,50,0.20), 0 4px 16px -10px rgba(15,40,50,0.08)' }}>
            <div style={{ padding: '14px 22px', borderBottom: `1px solid ${LV.border}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center', background: '#fff' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                <span style={{ width: 7, height: 7, borderRadius: 4, background: LV.accent, boxShadow: `0 0 0 3px color-mix(in oklab, ${LV.accent} 22%, transparent)` }} />
                <span style={{ fontFamily: LV_FONT_MONO, fontSize: 10.5, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase', color: LV.accent }}>Free Site Report</span>
              </div>
              <span style={{ fontFamily: LV_FONT_MONO, fontSize: 10.5, color: LV.inkSoft, letterSpacing: '0.06em' }}>smithmedspa.com</span>
            </div>

            <div style={{ padding: '26px 26px 22px', display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 26, alignItems: 'center', borderBottom: `1px solid ${LV.border}` }}>
              <div>
                <div style={{ fontFamily: LV_FONT_MONO, fontSize: 10, color: LV.inkSoft, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 6 }}>Score</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
                  <span style={{ fontFamily: LV_FONT_SANS, fontSize: 64, fontWeight: 600, color: LV.ink, letterSpacing: '-0.03em', fontVariantNumeric: 'tabular-nums', lineHeight: 1 }}>47</span>
                  <span style={{ fontFamily: LV_FONT_SANS, fontSize: 22, fontWeight: 500, color: LV.inkSoft, letterSpacing: '-0.02em' }}>/100</span>
                </div>
              </div>
              <div>
                <div style={{ fontFamily: LV_FONT_MONO, fontSize: 10, color: LV.inkSoft, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 8 }}>Diagnosis</div>
                <div style={{ fontFamily: LV_FONT_SERIF, fontSize: 17, fontWeight: 500, color: LV.ink, lineHeight: 1.3, letterSpacing: '-0.005em' }} className="pretty">
                  Strong foundation, with major gaps.
                </div>
                <div style={{ marginTop: 10, height: 6, borderRadius: 3, background: LV.surfaceTint, overflow: 'hidden' }}>
                  <div style={{ width: '47%', height: '100%', background: `linear-gradient(90deg, ${LV.bad} 0%, ${LV.warm} 100%)` }} />
                </div>
              </div>
            </div>

            <div style={{ padding: '14px 22px 18px' }}>
              <div style={{ fontFamily: LV_FONT_MONO, fontSize: 10, color: LV.inkSoft, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 12 }}>Top findings</div>
              {[
                { v: '5',  label: 'treatment pages missing search signals', sev: 'bad' },
                { v: '12', label: 'patient questions not answered',         sev: 'bad' },
                { v: '3',  label: 'services weak in AI-search visibility',  sev: 'warm' },
                { v: '+',  label: 'quick wins checklist included',          sev: 'good' },
              ].map((f, i) => (
                <div key={i} style={{
                  display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 14, alignItems: 'center',
                  padding: '11px 0', borderTop: i === 0 ? 'none' : `1px solid ${LV.border}`,
                }}>
                  <span style={{
                    width: 30, height: 24, borderRadius: 6,
                    background: f.sev === 'bad' ? `color-mix(in oklab, ${LV.bad} 14%, #fff)`
                              : f.sev === 'warm' ? `color-mix(in oklab, ${LV.warm} 18%, #fff)`
                              : `color-mix(in oklab, ${LV.good} 14%, #fff)`,
                    color: f.sev === 'bad' ? LV.bad : f.sev === 'warm' ? LV.warm : LV.good,
                    fontFamily: LV_FONT_SANS, fontSize: 13, fontWeight: 700,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    fontVariantNumeric: 'tabular-nums',
                  }}>{f.v}</span>
                  <span style={{ fontSize: 13.5, color: LV.ink }}>{f.label}</span>
                  <span style={{ fontFamily: LV_FONT_MONO, fontSize: 10, color: LV.inkSoft, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{f.sev === 'good' ? 'Win' : f.sev === 'warm' ? 'Watch' : 'Gap'}</span>
                </div>
              ))}
            </div>

            <div style={{
              padding: '12px 22px', background: LV.surfaceTint, borderTop: `1px solid ${LV.border}`,
              display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              fontFamily: LV_FONT_MONO, fontSize: 10.5, color: LV.inkSoft, letterSpacing: '0.06em',
            }}>
              <span>READY IN ~5 MIN · NO CARD</span>
              <span>RUN 04/26</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =============================================================
   05 · How it works — 5 steps, vertical timeline
   ============================================================= */
function LV_HowItWorks() {
  const steps = [
    { n: '01', title: 'Free site report',                  body: "We scan your site and show what's missing.", meta: 'Free · ~5 min' },
    { n: '02', title: 'Strategy audit',                    body: 'Clinic profile, competitor scan, content plan, research roadmap.', meta: '$1,500 · ~7 business days' },
    { n: '03', title: 'Order articles from your plan',     body: 'Doctor review included on every article.', meta: 'From $250 / article' },
    { n: '04', title: 'Approve from your phone in ~5 min', body: 'Mobile-first review surface for clinicians.', meta: 'Mobile review' },
    { n: '05', title: 'Optional updates keep articles current', body: 'On ongoing plans, we refresh articles when guidance, search intent, or rankings change.', meta: 'Optional · ongoing' },
  ];
  return (
    <section id="how" style={{ padding: '96px 56px', background: '#fff', borderTop: `1px solid ${LV.border}` }}>
      <LV_SectionHeader
        kicker="How it works"
        title="A system, not a"
        italicWord="one-shot purchase."
        eyebrow="Diagnose. Plan. Ship. Update. The same loop your editor would run if they sat in your clinic."
      />
      <div style={{ position: 'relative', marginTop: 12 }}>
        <div style={{ position: 'absolute', left: 22, top: 16, bottom: 16, width: 1, background: LV.border }} />
        {steps.map((s, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '46px 1fr auto', gap: 22, alignItems: 'flex-start', padding: '20px 0', borderBottom: i < steps.length - 1 ? `1px solid ${LV.border}` : 'none' }}>
            <div style={{
              width: 46, height: 46, borderRadius: 23,
              background: '#fff', border: `1.5px solid ${LV.accent}`,
              color: LV.accent, fontFamily: LV_FONT_MONO, fontSize: 12, fontWeight: 700,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              letterSpacing: '0.04em', position: 'relative', zIndex: 1,
            }}>{s.n}</div>
            <div>
              <h3 style={{ fontFamily: LV_FONT_SERIF, fontSize: 24, fontWeight: 500, color: LV.ink, lineHeight: 1.2, letterSpacing: '-0.014em', margin: '4px 0 6px', fontVariationSettings: "'opsz' 36, 'SOFT' 50" }}>{s.title}</h3>
              <p style={{ fontSize: 14.5, lineHeight: 1.55, color: LV.inkSoft, margin: 0, maxWidth: 640 }} className="pretty">{s.body}</p>
            </div>
            <span style={{ fontFamily: LV_FONT_MONO, fontSize: 11, color: LV.inkSoft, letterSpacing: '0.08em', textTransform: 'uppercase', marginTop: 14 }}>{s.meta}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

/* =============================================================
   06 · Sample articles ×3
   ============================================================= */
function LV_SampleArticles() {
  const articles = [
    {
      title: 'Chemical peel recovery: day-by-day timeline',
      intent: 'patients researching downtime',
      focus: 'peeling timeline, aftercare',
      structure: 'FAQ-ready answers, patient-friendly',
      tag: 'Recovery · Aesthetic',
    },
    {
      title: 'How long do dermal fillers really last?',
      intent: 'patients comparing options',
      focus: 'duration, safety, expectations',
      structure: 'answer-first, comparison blocks',
      tag: 'Comparison · Injectables',
    },
    {
      title: 'Microneedling vs RF microneedling',
      intent: 'patients comparing treatments',
      focus: 'indications, contraindications',
      structure: 'comparison table, decision guide',
      tag: 'Decision guide · Skin',
    },
  ];
  return (
    <section style={{ padding: '96px 56px', background: LV.surfaceTint, borderTop: `1px solid ${LV.borderWarm}` }}>
      <LV_SectionHeader
        kicker="Sample articles"
        title="Written for patient"
        italicWord="intent — not word count."
        eyebrow="Each piece targets a real question patients ask before booking. Reviewed by a clinician for accuracy and clinic-fit."
        kickerColor={LV.warm}
      />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
        {articles.map((a, i) => (
          <article key={i} style={{ background: '#fff', border: `1px solid ${LV.border}`, borderRadius: 14, padding: '24px 24px 22px', display: 'flex', flexDirection: 'column', gap: 16 }}>
            <div style={{ fontFamily: LV_FONT_MONO, fontSize: 10.5, color: LV.inkSoft, letterSpacing: '0.1em', textTransform: 'uppercase' }}>{a.tag}</div>
            <h3 style={{ fontFamily: LV_FONT_SERIF, fontSize: 22, fontWeight: 500, color: LV.ink, lineHeight: 1.22, letterSpacing: '-0.012em', margin: 0, fontVariationSettings: "'opsz' 36, 'SOFT' 50" }} className="balance">{a.title}</h3>
            <dl style={{ margin: 0, display: 'flex', flexDirection: 'column', gap: 10, fontSize: 13 }}>
              {[
                { k: 'Target intent', v: a.intent },
                { k: 'Review focus',  v: a.focus },
                { k: 'Structure',     v: a.structure },
              ].map((row, j) => (
                <div key={j} style={{ display: 'grid', gridTemplateColumns: '102px 1fr', gap: 10, paddingTop: 10, borderTop: `1px solid ${LV.border}` }}>
                  <dt style={{ fontFamily: LV_FONT_MONO, fontSize: 10.5, color: LV.inkSoft, letterSpacing: '0.08em', textTransform: 'uppercase' }}>{row.k}</dt>
                  <dd style={{ margin: 0, color: LV.ink, lineHeight: 1.45 }}>{row.v}</dd>
                </div>
              ))}
            </dl>
            <a href="#" style={{ marginTop: 'auto', fontSize: 13.5, fontWeight: 600, color: LV.accent, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6 }}>Read sample <span aria-hidden="true">→</span></a>
          </article>
        ))}
      </div>
    </section>
  );
}

/* =============================================================
   07 · Why not just use ChatGPT?
   ============================================================= */
function LV_WhyNotChatGPT() {
  const points = [
    "ChatGPT doesn't know your service priorities",
    "It doesn't see which pages miss signals",
    "It doesn't provide clinician review for protocol-sensitive claims",
  ];
  return (
    <section style={{ padding: '92px 56px', background: '#fff', borderTop: `1px solid ${LV.border}` }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'flex-start' }}>
        <div>
          <LV_SectionHeader
            kicker="The honest answer"
            title="Why not just use"
            italicWord="ChatGPT?"
            eyebrow="Your risk is not writing speed. Your risk is publishing generic medical content that doesn't match your clinic, services, protocols, or what patients actually search before booking."
          />
        </div>
        <div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
            {points.map((p, i) => (
              <li key={i} style={{
                display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 16,
                padding: '18px 22px',
                background: LV.surfaceTint,
                border: `1px solid ${LV.borderWarm}`,
                borderRadius: 12,
                alignItems: 'center',
              }}>
                <span style={{
                  width: 28, height: 28, borderRadius: 14,
                  background: '#fff', border: `1.5px solid ${LV.bad}`, color: LV.bad,
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 15, fontWeight: 600, lineHeight: 1,
                }}>−</span>
                <span style={{ fontSize: 15, color: LV.ink, lineHeight: 1.4 }}>{p}</span>
              </li>
            ))}
          </ul>
          <div style={{
            marginTop: 22, padding: '20px 24px',
            background: LV.ink, color: '#fff', borderRadius: 12,
            display: 'flex', alignItems: 'flex-start', gap: 14,
          }}>
            <span style={{
              width: 28, height: 28, borderRadius: 14,
              background: `color-mix(in oklab, ${LV.warm} 30%, transparent)`,
              border: `1px solid color-mix(in oklab, ${LV.warm} 60%, transparent)`,
              color: LV.warm, flexShrink: 0,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 14, fontWeight: 700,
            }}>+</span>
            <p style={{ fontFamily: LV_FONT_SERIF, fontSize: 17, lineHeight: 1.4, margin: 0, color: '#fff', letterSpacing: '-0.005em' }} className="pretty">
              MedSpaCopy uses AI where it helps — the product is strategy, research, review, and clinic-fit.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* =============================================================
   08 · Who we are not for
   ============================================================= */
function LV_NotForUs() {
  const items = [
    'Clinics looking for high-volume, low-cost blog posts',
    'Generic healthcare websites outside aesthetics',
    'Teams that want $50 SEO articles with no clinical review',
  ];
  return (
    <section style={{ padding: '88px 56px', background: LV.surfaceTint, borderTop: `1px solid ${LV.borderWarm}` }}>
      <div style={{ display: 'grid', gridTemplateColumns: '0.85fr 1fr', gap: 56, alignItems: 'center' }}>
        <div>
          <div style={{ fontFamily: LV_FONT_MONO, fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', color: LV.inkSoft, textTransform: 'uppercase', marginBottom: 14 }}>Honest fit</div>
          <h2 style={{ fontFamily: LV_FONT_SERIF, fontSize: 38, fontWeight: 450, color: LV.ink, letterSpacing: '-0.022em', lineHeight: 1.08, fontVariationSettings: "'opsz' 72, 'SOFT' 50", margin: 0 }} className="balance">
            Who we are <span style={{ fontStyle: 'italic' }}>not</span> for.
          </h2>
          <p style={{ fontSize: 15, lineHeight: 1.6, color: LV.inkSoft, marginTop: 16, maxWidth: 360 }} className="pretty">
            We'd rather say no than ship work that won't move your clinic forward.
          </p>
        </div>
        <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 0, background: '#fff', border: `1px solid ${LV.borderWarm}`, borderRadius: 14, overflow: 'hidden' }}>
          {items.map((it, i) => (
            <li key={i} style={{
              display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 16, alignItems: 'flex-start',
              padding: '20px 24px', borderTop: i === 0 ? 'none' : `1px solid ${LV.border}`,
            }}>
              <span style={{
                width: 26, height: 26, borderRadius: 13, background: '#fff',
                border: `1.5px solid ${LV.bad}`, color: LV.bad, marginTop: 2,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 14, fontWeight: 700, lineHeight: 1,
              }}>×</span>
              <span style={{ fontSize: 15, color: LV.ink, lineHeight: 1.45 }}>{it}</span>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

/* =============================================================
   09 · FAQ accordion ×6
   ============================================================= */
function LV_FAQ() {
  const items = [
    {
      q: 'Is this an AI writing tool?',
      a: 'No. MedSpaCopy is AI-assisted research and drafting inside a managed editorial workflow with clinical review. The product is strategy, research, review, and clinic-fit — not a content generator you log into.',
    },
    {
      q: 'Who reviews the articles?',
      a: "Your medical director or a clinician you nominate. We also have an editorial team that reviews every article for structure, claim accuracy, and patient-readiness before it reaches your reviewer. If you don't have a clinician on staff, we can pair you with one of our review partners.",
    },
    {
      q: 'Will Google penalize AI-assisted content?',
      a: "Google's guidance is about quality and helpfulness, not about how content was made. Our articles are research-led, doctor-reviewed, and built around real patient questions — exactly the type of content Google rewards.",
    },
    {
      q: "What if I don't have a doctor on staff?",
      a: 'We can pair you with a clinician reviewer for protocol-sensitive claims. For most med spas this is a small per-article add-on; for larger clinics we set up a recurring review relationship.',
    },
    {
      q: 'Can I cancel anytime?',
      a: 'Yes. Articles are ordered one at a time from your plan — no contract, no minimum. Strategy Audit is a one-time purchase. Optional updates run month-to-month and cancel in one click.',
    },
    {
      q: 'How fast is delivery?',
      a: 'Free site report: ~5 minutes. Strategy Audit: ~7 business days. Articles: 5-10 business days from order to clinician approval, depending on review turnaround on your side.',
    },
  ];

  const [open, setOpen] = lvS(0);

  return (
    <section id="faq" style={{ padding: '96px 56px', background: '#fff', borderTop: `1px solid ${LV.border}` }}>
      <div style={{ display: 'grid', gridTemplateColumns: '0.8fr 1.2fr', gap: 56, alignItems: 'flex-start' }}>
        <div style={{ position: 'sticky', top: 32 }}>
          <LV_SectionHeader
            kicker="FAQ"
            title="The honest"
            italicWord="answers."
            eyebrow="Real questions med spa owners ask before they trust us with patient-facing content."
          />
          <div style={{ marginTop: 12, fontSize: 13.5, color: LV.inkSoft }}>
            Still on the fence? <a href="#" style={{ color: LV.accent, textDecoration: 'none', fontWeight: 600 }}>Talk to our editor →</a>
          </div>
        </div>
        <div>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ borderBottom: `1px solid ${LV.border}`, borderTop: i === 0 ? `1px solid ${LV.border}` : 'none' }}>
                <button
                  onClick={() => setOpen(isOpen ? -1 : i)}
                  aria-expanded={isOpen}
                  style={{
                    width: '100%', padding: '22px 4px',
                    background: 'transparent', border: 'none', cursor: 'pointer',
                    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                    fontFamily: LV_FONT_BODY, color: LV.ink, textAlign: 'left',
                    fontSize: 17, fontWeight: 500, letterSpacing: '-0.005em',
                  }}
                >
                  <span>{it.q}</span>
                  <span style={{
                    width: 30, height: 30, borderRadius: 15,
                    background: isOpen ? LV.accent : '#fff',
                    border: `1.5px solid ${LV.accent}`,
                    color: isOpen ? '#fff' : LV.accent,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 16, fontWeight: 600,
                    transition: 'background 180ms ease, color 180ms ease, transform 180ms ease',
                    transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)',
                    flexShrink: 0,
                  }}>+</span>
                </button>
                <div style={{
                  maxHeight: isOpen ? 280 : 0,
                  opacity: isOpen ? 1 : 0,
                  overflow: 'hidden',
                  transition: 'max-height 280ms ease, opacity 280ms ease, padding 280ms ease',
                  padding: isOpen ? '0 4px 22px' : '0 4px',
                }}>
                  <p style={{ fontSize: 14.5, lineHeight: 1.65, color: LV.inkSoft, margin: 0, maxWidth: 640 }} className="pretty">
                    {it.a}
                  </p>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

/* =============================================================
   10 · Footer CTA — repeat hero CTA
   ============================================================= */
function LV_FooterCTA() {
  return (
    <section style={{ padding: '96px 56px', background: LV.ink, color: '#fff', borderTop: '1px solid rgba(255,255,255,0.08)', position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0,
        background: `radial-gradient(60% 80% at 50% 100%, color-mix(in oklab, ${LV.accent} 40%, transparent) 0%, transparent 70%)`,
      }} />
      <div style={{ position: 'relative', textAlign: 'center', maxWidth: 720, margin: '0 auto' }}>
        <div style={{ fontFamily: LV_FONT_MONO, fontSize: 11, fontWeight: 600, letterSpacing: '0.14em', color: LV.warm, textTransform: 'uppercase', marginBottom: 18 }}>Start free</div>
        <h2 style={{ fontFamily: LV_FONT_SERIF, fontSize: 52, fontWeight: 450, color: '#fff', letterSpacing: '-0.026em', lineHeight: 1.04, fontVariationSettings: "'opsz' 96, 'SOFT' 50", margin: '0 0 22px' }} className="balance">
          Ready to see what's <span style={{ fontStyle: 'italic', color: '#e9d6b9' }}>missing</span> on your site?
        </h2>
        <p style={{ fontSize: 17, lineHeight: 1.55, color: 'rgba(255,255,255,0.72)', maxWidth: 520, margin: '0 auto 36px' }} className="pretty">
          Run the diagnostic. Get the gaps, the wins, and a sample article — all reviewed by a clinician.
        </p>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 0,
          background: '#fff', borderRadius: 12, padding: 6,
          boxShadow: '0 24px 48px -20px rgba(0,0,0,0.45)',
          maxWidth: 540, width: '100%',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', flex: 1, gap: 10, padding: '0 14px' }}>
            <span style={{ fontFamily: LV_FONT_MONO, fontSize: 12, color: LV.inkSoft }}>https://</span>
            <input defaultValue="yourclinic.com" style={{ border: 'none', outline: 'none', flex: 1, height: 44, fontSize: 15, fontFamily: LV_FONT_BODY, background: 'transparent', color: LV.ink, fontWeight: 500 }} />
          </div>
          <button style={{
            background: LV.accent, color: '#fff', border: 'none', borderRadius: 8,
            height: 44, padding: '0 22px', fontSize: 14, fontWeight: 600, cursor: 'pointer',
            fontFamily: LV_FONT_BODY,
          }}>Get free report →</button>
        </div>
        <div style={{ marginTop: 18, fontSize: 12.5, color: 'rgba(255,255,255,0.55)' }}>No credit card. Report ready in ~5 minutes.</div>
      </div>
    </section>
  );
}

/* =============================================================
   11 · Sticky compact nav (after 200px scroll)
   ============================================================= */
function LV_StickyNav() {
  const [show, setShow] = lvS(false);
  lvE(() => {
    let raf = 0;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        setShow(window.scrollY > 200);
        raf = 0;
      });
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <div
      aria-hidden={!show}
      style={{
        position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
        transform: show ? 'translateY(0)' : 'translateY(-100%)',
        transition: 'transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1)',
        background: 'rgba(255,255,255,0.94)',
        backdropFilter: 'saturate(180%) blur(12px)',
        WebkitBackdropFilter: 'saturate(180%) blur(12px)',
        borderBottom: `1px solid ${LV.border}`,
      }}
    >
      <div style={{ padding: '10px 56px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
          <span style={{ fontFamily: LV_FONT_SERIF, fontSize: 15, fontWeight: 500, color: LV.ink, letterSpacing: '-0.01em' }}>MedSpaCopy</span>
          <nav style={{ display: 'flex', gap: 22, fontSize: 12.5, color: LV.inkMid }}>
            <a href="#how"           style={{ color: LV.inkMid, textDecoration: 'none' }}>How it works</a>
            <a href="#sample-report" style={{ color: LV.inkMid, textDecoration: 'none' }}>Sample report</a>
            <a href="#pricing"       style={{ color: LV.inkMid, textDecoration: 'none' }}>Pricing</a>
            <a href="#faq"           style={{ color: LV.inkMid, textDecoration: 'none' }}>FAQ</a>
          </nav>
        </div>
        <button style={{
          height: 32, padding: '0 14px', background: LV.accent, color: '#fff', border: 'none',
          borderRadius: 7, fontSize: 12.5, fontWeight: 600, cursor: 'pointer', fontFamily: LV_FONT_BODY,
        }}>Get free report →</button>
      </div>
    </div>
  );
}

/* Expose to other Babel scripts */
Object.assign(window, {
  LV_ProblemBlock, LV_ClinicalReview, LV_FreeReportPreview, LV_HowItWorks,
  LV_SampleArticles, LV_WhyNotChatGPT, LV_NotForUs, LV_FAQ, LV_FooterCTA,
  LV_StickyNav,
});