/* MedSpaCopy v4 — Content Plan screen.
   Reuses primitives + palette from screens-v4.jsx (P4, FONT_*, Marker_v4,
   MonoKicker_v4, Wordmark_v4, NavGroup, NavItem). No new visual language.

   Output: ContentPlan_v4
*/

function ContentPlan_v4() {
  const ink = P4.ink, accent = P4.accent;

  /* Status badge — text-glyph + tinted background. Same vocabulary as
     ResearchDashboard's table. */
  const StatusBadge = ({ kind }) => {
    const map = {
      delivered: { label: '+ delivered',     fg: P4.good,    bg: `color-mix(in oklab, ${P4.good} 12%, transparent)` },
      inprogress:{ label: '~ in progress',   fg: P4.accent,  bg: `color-mix(in oklab, ${P4.accent} 10%, transparent)` },
      notordered:{ label: '[ ] not ordered', fg: P4.inkSoft, bg: `color-mix(in oklab, ${P4.inkSoft} 10%, transparent)` },
    };
    const m = map[kind];
    return (
      <span style={{
        fontFamily: FONT_BODY, fontSize: 11, padding: '4px 9px', borderRadius: 4,
        background: m.bg, color: m.fg, fontWeight: 600, letterSpacing: '0.02em',
        whiteSpace: 'nowrap', display: 'inline-block',
      }}>{m.label}</span>
    );
  };

  /* Topic card — three width modes: full (recommended), normal, delivered (deemphasized) */
  const TopicCard = ({ t, recommended }) => {
    const isDelivered  = t.status === 'delivered';
    const isInProgress = t.status === 'inprogress';
    const isOrderable  = t.status === 'notordered';

    return (
      <div style={{
        position: 'relative',
        background: recommended ? '#fff' : (isDelivered ? '#fcfdfd' : '#fff'),
        border: recommended ? `2px solid ${P4.accent}` : `1px solid ${P4.border}`,
        borderRadius: 12,
        padding: recommended ? 22 : 20,
        boxShadow: recommended
          ? '0 24px 48px -28px rgba(15,40,50,0.28), 0 4px 14px rgba(15,40,50,0.05)'
          : '0 1px 2px rgba(0,0,0,0.03)',
        opacity: isDelivered ? 0.92 : 1,
        display: 'flex', flexDirection: 'column', gap: 14,
      }}>
        {/* Recommended ribbon — sits ON the card top edge */}
        {recommended && (
          <span style={{
            position: 'absolute', top: -11, left: 18,
            background: P4.warm, color: P4.warmInk,
            padding: '4px 11px', borderRadius: 4,
            fontFamily: FONT_MONO, fontSize: 10.5, fontWeight: 700,
            letterSpacing: '0.14em', textTransform: 'uppercase',
            boxShadow: '0 6px 14px rgba(0,0,0,0.08)',
          }}>★ Recommended next</span>
        )}

        {/* Header row: status + service + progress (if any) */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
          <StatusBadge kind={t.status} />
          <span style={{
            fontFamily: FONT_BODY, fontSize: 10.5, padding: '4px 9px', borderRadius: 4,
            background: `color-mix(in oklab, ${P4.accent} 8%, transparent)`,
            color: P4.accent, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase',
          }}>{t.service}</span>
          {isInProgress && (
            <span style={{
              marginLeft: 'auto', fontSize: 11.5, color: P4.inkSoft,
              fontFamily: FONT_MONO, letterSpacing: '0.04em',
            }}>{t.progressLabel}</span>
          )}
        </div>

        {/* Title — Fraunces, restrained */}
        <h3 style={{
          fontFamily: FONT_SERIF, fontSize: recommended ? 22 : 19, fontWeight: 450,
          letterSpacing: '-0.012em', lineHeight: 1.25, color: ink,
          fontVariationSettings: "'opsz' 36, 'SOFT' 50",
          margin: 0,
        }} className="balance">{t.title}</h3>

        {/* Target keyword — mono + label */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 12.5, flexWrap: 'wrap' }}>
          <span style={{ fontFamily: FONT_MONO, fontSize: 10, color: P4.inkSoft, letterSpacing: '0.12em', textTransform: 'uppercase' }}>Target</span>
          <span style={{
            fontFamily: FONT_MONO, fontSize: 12.5, color: ink,
            background: P4.surfaceCool, padding: '3px 8px', borderRadius: 4,
            border: `1px solid ${P4.border}`,
          }}>{t.target}</span>
        </div>

        {/* Why this matters — single sentence */}
        <p style={{
          fontSize: 13.5, lineHeight: 1.55, color: P4.inkMid, margin: 0,
        }} className="pretty">
          <span style={{ fontFamily: FONT_MONO, fontSize: 10, color: P4.inkSoft, letterSpacing: '0.12em', textTransform: 'uppercase', marginRight: 6 }}>Why</span>
          {t.why}
        </p>

        {/* In-progress detail rail — only on in-progress cards */}
        {isInProgress && (
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
            border: `1px solid ${P4.border}`, borderRadius: 8, overflow: 'hidden',
            background: P4.accent50,
          }}>
            {[
              { l: 'Research',     done: true },
              { l: 'Drafting',     done: true },
              { l: 'Doctor review',done: false, active: true },
              { l: 'Delivery',     done: false },
            ].map((s, i, arr) => (
              <div key={i} style={{
                padding: '10px 12px',
                borderRight: i < arr.length - 1 ? `1px solid ${P4.border}` : 'none',
                background: s.active ? '#fff' : 'transparent',
              }}>
                <div style={{ fontFamily: FONT_MONO, fontSize: 9.5, color: P4.inkSoft, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 4 }}>{`0${i + 1}`}</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12 }}>
                  <span style={{
                    width: 8, height: 8, borderRadius: 4,
                    background: s.done ? P4.good : (s.active ? P4.accent : P4.border),
                    boxShadow: s.active ? `0 0 0 3px color-mix(in oklab, ${P4.accent} 25%, transparent)` : 'none',
                  }} />
                  <span style={{ color: ink, fontWeight: s.active ? 600 : 500 }}>{s.l}</span>
                </div>
              </div>
            ))}
          </div>
        )}

        {/* Footer — cost / review / action */}
        <div style={{
          display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 14,
          paddingTop: 14, borderTop: `1px dashed ${P4.border}`,
          marginTop: 'auto',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 18, fontSize: 12.5 }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 4 }}>
              <span style={{ fontFamily: FONT_SANS, fontSize: 17, fontWeight: 600, color: ink, fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.01em' }}>$250</span>
              <span style={{ fontSize: 11, color: P4.inkSoft }}>· per article</span>
            </div>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: P4.inkSoft }}>
              <span style={{
                width: 18, height: 18, borderRadius: 9,
                border: `1.5px solid ${P4.accent}`,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 9, fontWeight: 700, color: P4.accent,
              }}>R</span>
              <span style={{ fontSize: 12 }}>Clinical review included</span>
            </span>
          </div>

          {isOrderable && (
            <button style={{
              height: 38, padding: '0 16px',
              background: recommended ? P4.accent : '#fff',
              color: recommended ? '#fff' : P4.accent,
              border: recommended ? 'none' : `1px solid ${P4.accent}`,
              borderRadius: 8, fontSize: 13, fontWeight: 600, cursor: 'pointer',
              fontFamily: FONT_BODY, whiteSpace: 'nowrap',
            }}>{recommended ? 'Order this article →' : 'Order article'}</button>
          )}
          {isInProgress && (
            <button style={{
              height: 38, padding: '0 16px', background: '#fff', color: P4.accent,
              border: `1px solid ${P4.accent}`, borderRadius: 8, fontSize: 13, fontWeight: 600,
              cursor: 'pointer', fontFamily: FONT_BODY, whiteSpace: 'nowrap',
            }}>View progress →</button>
          )}
          {isDelivered && (
            <button style={{
              height: 38, padding: '0 16px', background: '#fff', color: ink,
              border: `1px solid ${P4.border}`, borderRadius: 8, fontSize: 13, fontWeight: 600,
              cursor: 'pointer', fontFamily: FONT_BODY, whiteSpace: 'nowrap',
            }}>View article →</button>
          )}
        </div>
      </div>
    );
  };

  /* Month group header — kicker + count + thin rule */
  const MonthHeader = ({ kicker, title, count, priority, status }) => (
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, paddingBottom: 14, borderBottom: `1px solid ${P4.border}`, marginBottom: 22 }}>
      <div style={{
        fontFamily: FONT_MONO, fontSize: 11, fontWeight: 600, letterSpacing: '0.14em',
        color: priority ? P4.warm : P4.accent, textTransform: 'uppercase',
      }}>{kicker}</div>
      <h2 style={{
        fontFamily: FONT_SERIF, fontSize: 24, fontWeight: 450, letterSpacing: '-0.014em',
        color: ink, fontVariationSettings: "'opsz' 72, 'SOFT' 50", margin: 0,
      }}>{title}</h2>
      <span style={{ fontFamily: FONT_MONO, fontSize: 11, color: P4.inkSoft, letterSpacing: '0.06em' }}>{count}</span>
      {status && (
        <span style={{ marginLeft: 'auto', fontSize: 12, color: P4.inkSoft }}>{status}</span>
      )}
    </div>
  );

  return (
    <div style={{ width: 1280, fontFamily: FONT_BODY, color: ink, '--font-display': FONT_SANS, background: P4.surfaceCool, minHeight: 1400 }}>
      <div style={{ display: 'grid', gridTemplateColumns: '224px 1fr', minHeight: 1400 }}>
        {/* Sidebar — same as ResearchDashboard */}
        <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" />
            <NavItem label="Content plan" active badge="14" />
            <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 }}>Content plan</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, services, claims…</span>
                <span style={{ marginLeft: 'auto', fontFamily: FONT_MONO, fontSize: 10, color: P4.inkSoft, opacity: 0.7 }}>⌘K</span>
              </div>
              <div style={{
                width: 32, height: 32, borderRadius: 16,
                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: 11, fontWeight: 700, color: P4.accent,
              }}>SM</div>
            </div>
          </div>

          {/* Page content */}
          <div style={{ padding: '28px 32px 56px', display: 'grid', gridTemplateColumns: '1fr 320px', gap: 28, alignItems: 'flex-start' }}>
            {/* LEFT */}
            <div style={{ display: 'flex', flexDirection: 'column', gap: 24, minWidth: 0 }}>
              {/* Page header */}
              <div style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 24 }}>
                <div>
                  <MonoKicker_v4 mb={8}>Strategy Audit · Apr 2026 · 90-day plan</MonoKicker_v4>
                  <h1 style={{ fontFamily: FONT_SANS, fontSize: 30, fontWeight: 600, color: ink, letterSpacing: '-0.022em', marginBottom: 6, margin: 0 }}>Content plan</h1>
                  <p style={{ fontSize: 14, color: P4.inkSoft, lineHeight: 1.55, maxWidth: 660, marginTop: 8 }} className="pretty">
                    Fourteen articles, prioritized by patient intent and visibility gap. Order one at a time. Every article is doctor-reviewed 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 PDF</button>
                  <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 }}>Select to order</button>
                </div>
              </div>

              {/* Summary strip */}
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0, background: '#fff', border: `1px solid ${P4.border}`, borderRadius: 12, overflow: 'hidden' }}>
                {[
                  { v: '14',        l: 'Topics in plan',  sub: 'across 90 days' },
                  { v: '01',        l: 'Delivered',       sub: 'in your library', kind: 'good' },
                  { v: '01',        l: 'In progress',     sub: 'doctor review',   kind: 'progress' },
                  { v: '12',        l: 'Not ordered',     sub: '11 weeks ahead',  kind: 'queued' },
                  { v: '$1,250',    l: 'Wallet balance',  sub: '≈ 5 articles',    warm: true },
                ].map((s, i) => (
                  <div key={i} style={{
                    padding: '18px 22px',
                    borderRight: i < 4 ? `1px solid ${P4.border}` : 'none',
                    background: s.warm ? P4.surfaceTint : '#fff',
                  }}>
                    <div style={{ fontFamily: FONT_SANS, fontSize: 24, 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>

              {/* Filter row */}
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
                <div style={{ display: 'flex', gap: 6, fontSize: 12, flexWrap: 'wrap' }}>
                  {[
                    { l: 'All', n: 14, active: true },
                    { l: 'Recommended', n: 1, warm: true },
                    { l: 'Not ordered', n: 12 },
                    { l: 'In progress', n: 1 },
                    { l: 'Delivered', n: 1 },
                  ].map((t, i) => (
                    <span key={i} style={{
                      padding: '6px 12px', borderRadius: 999,
                      background: t.active ? P4.ink : (t.warm ? `color-mix(in oklab, ${P4.warm} 14%, #fff)` : 'transparent'),
                      color: t.active ? '#fff' : (t.warm ? P4.warmInk : P4.inkSoft),
                      border: `1px solid ${t.active ? P4.ink : (t.warm ? P4.borderWarm : P4.border)}`,
                      fontWeight: 500, cursor: 'pointer',
                      display: 'inline-flex', alignItems: 'center', gap: 7,
                    }}>{t.l} <span style={{ fontFamily: FONT_MONO, fontSize: 10.5, opacity: 0.7 }}>{String(t.n).padStart(2, '0')}</span></span>
                  ))}
                </div>
                <div style={{
                  display: 'inline-flex', alignItems: 'center', gap: 8,
                  padding: '5px 10px 5px 12px', borderRadius: 8, border: `1px solid ${P4.border}`,
                  background: '#fff', fontSize: 12, color: P4.inkSoft,
                }}>
                  <span style={{ fontFamily: FONT_MONO, fontSize: 10, color: P4.inkSoft, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Service</span>
                  <span style={{ width: 1, height: 12, background: P4.border }} />
                  <span style={{ color: ink, fontWeight: 500 }}>All services</span>
                  <span style={{ opacity: 0.6 }}>▾</span>
                </div>
              </div>

              {/* === MONTH 1 === */}
              <section>
                <MonthHeader kicker="Month 1 · Priority" title="Foundations" count="5 topics" priority status="Targeting your top patient intents" />
                <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 18 }}>
                  <TopicCard t={{
                    title: 'Botox aftercare: what to expect in the first 72 hours',
                    target: 'botox aftercare austin',
                    why: 'Post-booking question. Builds patient retention and reduces front-desk follow-up calls.',
                    service: 'Botox',
                    status: 'delivered',
                  }} />
                  <TopicCard t={{
                    title: 'How much does laser hair removal cost in Austin?',
                    target: 'laser hair removal cost austin',
                    why: 'High-intent pre-booking research. Patients comparison-shop on price before reaching out.',
                    service: 'Laser hair',
                    status: 'inprogress',
                    progressLabel: 'Doctor review · est. 2 days',
                  }} />
                  <TopicCard t={{
                    title: 'Chemical peel recovery: a day-by-day timeline',
                    target: 'chemical peel recovery',
                    why: 'High-intent post-booking question. Sets recovery expectations and reduces anxiety calls.',
                    service: 'Peels',
                    status: 'notordered',
                  }} recommended />
                </div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18, marginTop: 18 }}>
                  <TopicCard t={{
                    title: 'Are dermal fillers safe? A clinician\u2019s overview',
                    target: 'are fillers safe',
                    why: 'Trust-building. Addresses the top safety concern patients voice in consultations.',
                    service: 'Fillers',
                    status: 'notordered',
                  }} />
                  <TopicCard t={{
                    title: 'Microneedling vs RF microneedling: how to choose',
                    target: 'microneedling vs rf microneedling',
                    why: 'Comparison query with high patient confusion. Captures undecided researchers.',
                    service: 'Microneedling',
                    status: 'notordered',
                  }} />
                </div>
              </section>

              {/* === MONTH 2 === */}
              <section>
                <MonthHeader kicker="Month 2 · Depth" title="Service deep-dives" count="5 topics" status="Build editorial authority on your core services" />
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
                  {[
                    { title: 'CoolSculpting candidacy: who it works for, who it doesn\u2019t', target: 'coolsculpting candidacy', why: 'Pre-consult filter. Reduces low-fit consultations.', service: 'CoolSculpting' },
                    { title: 'Lip filler styles: subtle, defined, full — visual guide',         target: 'lip filler styles',     why: 'Highest-intent comparison query. Drives consults.', service: 'Fillers' },
                    { title: 'Hydrafacial vs medical-grade facial: what\u2019s different',     target: 'hydrafacial vs facial',  why: 'Common confusion query. Owns local search.',        service: 'Facials' },
                    { title: 'Choosing your injector: 7 questions patients should ask',         target: 'how to choose injector', why: 'Trust-building. Differentiates your team.',         service: 'Trust' },
                  ].map((t, i) => (
                    <TopicCard key={i} t={{ ...t, status: 'notordered' }} />
                  ))}
                </div>
              </section>

              {/* === MONTH 3 === */}
              <section>
                <MonthHeader kicker="Month 3 · Reach" title="Local & comparison" count="4 topics" status="Capture geo-modifiers + adjacent intent" />
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
                  {[
                    { title: 'Best med spa in Westlake: what to look for', target: 'med spa westlake',          why: 'Underserved geo within your service radius.',     service: 'Local' },
                    { title: 'Sun damage repair: treatment options compared', target: 'sun damage treatment',     why: 'Seasonal high-intent. Pre-summer demand spike.',  service: 'Skin' },
                    { title: 'Botox vs Dysport vs Xeomin: a clinician\u2019s read', target: 'botox vs dysport',     why: 'Comparison query patients ask after consult.',     service: 'Botox' },
                    { title: 'Body contouring without surgery: what actually works', target: 'non-surgical body contouring', why: 'Adjacent expansion category.',                     service: 'Body' },
                  ].map((t, i) => (
                    <TopicCard key={i} t={{ ...t, status: 'notordered' }} />
                  ))}
                </div>
              </section>
            </div>

            {/* RIGHT — workflow side panel */}
            <aside style={{ position: 'sticky', top: 80, alignSelf: 'start', display: 'flex', flexDirection: 'column', gap: 18 }}>
              {/* Recommended next — explainer */}
              <div style={{ background: '#fff', border: `1px solid ${P4.borderWarm}`, borderRadius: 12, overflow: 'hidden' }}>
                <div style={{
                  padding: '12px 18px', display: 'flex', alignItems: 'center', gap: 8,
                  background: `color-mix(in oklab, ${P4.warm} 12%, #fff)`,
                  borderBottom: `1px solid ${P4.borderWarm}`,
                }}>
                  <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 }}>Recommended next</span>
                </div>
                <div style={{ padding: 18 }}>
                  <h4 style={{
                    fontFamily: FONT_SERIF, fontSize: 18, fontWeight: 450, letterSpacing: '-0.012em',
                    lineHeight: 1.3, margin: '0 0 10px', color: ink,
                    fontVariationSettings: "'opsz' 36, 'SOFT' 50",
                  }} className="balance">
                    Chemical peel recovery
                  </h4>
                  <p style={{ fontSize: 13, color: P4.inkSoft, lineHeight: 1.55, margin: '0 0 14px' }} className="pretty">
                    Highest priority remaining: post-booking patient question that reduces follow-up load and lifts retention.
                  </p>
                  <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 14, fontSize: 12, color: P4.inkSoft }}>
                    <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5 }}>
                      <span style={{ width: 5, height: 5, borderRadius: 5, background: P4.warm }} />
                      Patient intent <strong style={{ color: ink, fontWeight: 600 }}>high</strong>
                    </span>
                    <span style={{ width: 3, height: 3, borderRadius: 3, background: P4.border }} />
                    <span>Visibility gap <strong style={{ color: ink, fontWeight: 600 }}>91</strong>/100</span>
                  </div>
                  <button style={{
                    width: '100%', height: 40, background: P4.accent, color: '#fff', border: 'none',
                    borderRadius: 8, fontSize: 13, fontWeight: 600, cursor: 'pointer', fontFamily: FONT_BODY,
                  }}>Order this article →</button>
                  <p style={{ fontSize: 11, color: P4.inkSoft, marginTop: 10, textAlign: 'center' }}>
                    $250 from your wallet · est. 7 business days
                  </p>
                </div>
              </div>

              {/* Wallet mini */}
              <div style={{ background: '#fff', border: `1px solid ${P4.border}`, borderRadius: 12, padding: 18 }}>
                <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 12 }}>
                  <MonoKicker_v4 color={P4.accent}>Wallet</MonoKicker_v4>
                  <a href="#" style={{ fontSize: 11.5, color: P4.accent, fontWeight: 600, textDecoration: 'none' }}>Top up</a>
                </div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 14 }}>
                  <span style={{ fontFamily: FONT_SANS, fontSize: 28, fontWeight: 600, color: ink, fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.02em', lineHeight: 1 }}>$1,250.00</span>
                </div>
                <div style={{ height: 6, borderRadius: 3, background: P4.border, overflow: 'hidden', marginBottom: 8 }}>
                  <div style={{ width: '50%', height: '100%', background: P4.accent }} />
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11.5, color: P4.inkSoft }}>
                  <span>≈ 5 articles remaining</span>
                  <span>Bonus credit · 12%</span>
                </div>
              </div>

              {/* Upcoming statuses */}
              <div style={{ background: '#fff', border: `1px solid ${P4.border}`, borderRadius: 12, overflow: 'hidden' }}>
                <div style={{ padding: '12px 18px', borderBottom: `1px solid ${P4.border}`, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                  <h4 style={{ fontFamily: FONT_SANS, fontSize: 13, fontWeight: 600, color: ink, margin: 0, letterSpacing: '-0.005em' }}>Upcoming</h4>
                  <span style={{ fontFamily: FONT_MONO, fontSize: 10, color: P4.inkSoft, letterSpacing: '0.06em' }}>NEXT 7 DAYS</span>
                </div>
                {[
                  { kind: 'opportunity', t: 'Laser hair removal cost',    sub: 'Doctor review · est. 2 days' },
                  { kind: 'info',        t: 'Botox aftercare',             sub: 'Published Apr 22' },
                  { kind: 'queued',      t: 'Chemical peel recovery',      sub: 'Awaiting order' },
                ].map((u, i, arr) => (
                  <div key={i} style={{
                    display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 10,
                    padding: '12px 18px', alignItems: 'center',
                    borderTop: i > 0 ? `1px dashed ${P4.border}` : 'none',
                  }}>
                    <Marker_v4 kind={u.kind === 'queued' ? 'info' : u.kind} size={20} />
                    <div>
                      <div style={{ fontSize: 12.5, fontWeight: 500, color: ink }}>{u.t}</div>
                      <div style={{ fontSize: 11.5, color: P4.inkSoft, marginTop: 1 }}>{u.sub}</div>
                    </div>
                  </div>
                ))}
              </div>

              {/* Plan source / methodology */}
              <div style={{
                background: P4.ink, color: '#fff', borderRadius: 12, padding: 18, position: 'relative', overflow: 'hidden',
              }}>
                <div style={{ position: 'absolute', top: -40, right: -40, opacity: 0.15 }}>
                  <SignalGrid_v4 size={240} />
                </div>
                <div style={{ position: 'relative' }}>
                  <div style={{ fontFamily: FONT_MONO, fontSize: 10.5, fontWeight: 600, letterSpacing: '0.14em', color: P4.warm, textTransform: 'uppercase', marginBottom: 10 }}>From Strategy Audit</div>
                  <p style={{ fontSize: 13, color: 'rgba(255,255,255,0.8)', lineHeight: 1.55, margin: '0 0 14px' }} className="pretty">
                    This 90-day plan was generated from your Apr 2026 audit. Refresh after major service changes or every six months.
                  </p>
                  <a href="#" style={{ fontSize: 12.5, color: '#fff', fontWeight: 600, textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                    View source audit <span style={{ color: P4.warm }}>→</span>
                  </a>
                </div>
              </div>
            </aside>
          </div>
        </main>
      </div>
    </div>
  );
}

Object.assign(window, { ContentPlan_v4 });