// Home page, franchisee dashboard hero
const { useState: useStateHome, useEffect: useEffectHome } = React;

function HomePage({ data, onNav, persona, density }) {
  const { location, scores, kpis, insights, activity, channels, variant } = data;
  const [range, setRange] = useStateHome(null);
  // Owner / Simple view, calmer summary for advisor-led owner conversations.
  // Location personas only; corporate (hq) always renders Full.
  if (density === 'simple' && persona !== 'hq') {
    return <SimpleLocationHome data={data} onNav={onNav}/>;
  }
  // Bare-minimum variant gets an opportunity-led hero layout
  if (variant === 'bare') {
    return <BareOpportunityHome data={data} onNav={onNav}/>;
  }
  return (
    <div className="page active">
      <div className="page-header">
        <div>
          <div className="page-title">Good morning, Alicia.</div>
          <div className="page-sub">Austin Downtown · Tuesday, April 14</div>
        </div>
        <div className="page-actions">
          <DateRangePicker value={range} onChange={setRange} align="right"/>
          <button className="btn btn-primary btn-sm" onClick={onNav.bind(null,'results')}>See full results {Icon.arrow}</button>
        </div>
      </div>

      {/* PRIMARY: Lenny's one clear next move, visually dominant */}
      <div style={{ marginBottom: 20 }}>
        <LennyRecommendCard onNav={onNav}/>
      </div>

      {/* SECONDARY: 3 supporting actions */}
      <TodaysFocusStrip onNav={onNav}/>

      {/* CONTEXT: where you stand (status) */}
      <div style={{ marginBottom: 20 }}>
        <ScoreHero scores={scores} onMilestone={() => window.confettiBurst()}/>
      </div>

      <SourceNote>Calculated by LOCALACT · LocalScore &amp; sub-scores</SourceNote>

      {/* KPI strip */}
      <div className="grid grid-4" style={{ marginBottom: 16 }}>
        <KpiCard label="Leads (MTD)" value={kpis.leads.val} delta={kpis.leads.delta} trend={kpis.leads.trend} color="var(--terra)" dotColor="var(--terra)"/>
        <KpiCard label="Cost per Lead" value={`$${kpis.cpl.val}`} delta={kpis.cpl.delta} invert trend={kpis.cpl.trend} color="var(--sage)" dotColor="var(--sage)"/>
        <KpiCard label="Attributed Revenue" value={`$${(kpis.rev.val/1000).toFixed(1)}K`} delta={kpis.rev.delta} trend={kpis.rev.trend} color="var(--marigold)" dotColor="var(--marigold)"/>
        <KpiCard label="Blended ROAS" value={`${kpis.roas.val}x`} delta={kpis.roas.delta} trend={kpis.roas.trend} color="var(--sky)" dotColor="var(--sky)"/>
      </div>

      <SourceNote>Source: Google Ads + FreshNest CRM · CPL &amp; ROAS calculated by LOCALACT</SourceNote>

      {/* Pacing snapshot + Plan Progress + Promo */}
      <div className="grid grid-3" style={{ marginBottom: 16 }}>
        <PacingMiniCard onNav={onNav}/>
        <PlaybookAdherenceCard onNav={onNav}/>
        <ActivePromoCard onNav={onNav}/>
      </div>
    </div>
  );
}
window.HomePage = HomePage;

function ScoreHero({ scores, onMilestone }) {
  const [showDist, setShowDist] = useStateHome(false);
  const breakdown = [
    ['Listings', scores.listings, 'Hours, photos, GBP'],
    ['Reviews', scores.reviews, 'Volume + response'],
    ['Discovery', scores.discovery, 'Local search visibility'],
    ['Conversion', scores.conversion, 'Calls, forms, bookings'],
  ];
  return (
    <div className="card" style={{ padding: '32px 36px', position: 'relative', overflow: 'hidden',
                                   background: 'var(--paper)', border: '1px solid var(--line)' }}>
      <div style={{ position: 'relative', zIndex: 1, display: 'grid', gridTemplateColumns: '180px 1fr 1.1fr', gap: 36, alignItems: 'center' }}>
        {/* Left: the ring */}
        <div style={{ position: 'relative', display: 'flex', justifyContent: 'center' }}>
          <ScoreRing value={scores.localScore} size={160} color="var(--terra)" track="var(--cream-2)" label="LOCALSCORE" textColor="var(--ink)" labelColor="var(--ink-4)"/>
          <div style={{ position: 'absolute', bottom: 4, right: 4, background: 'var(--sage)', color: '#fff',
                        fontSize: 11, fontWeight: 600, padding: '3px 9px', borderRadius: 999,
                        letterSpacing: '-0.01em' }}>+{scores.localScoreDelta}</div>
        </div>

        {/* Middle: headline + collapsed peer bar */}
        <div>
          <div style={{ fontSize: 11, letterSpacing: '.08em', textTransform: 'uppercase', color: 'var(--ink-4)', fontWeight: 600, marginBottom: 10 }}>Your performance</div>
          <div style={{ fontFamily: 'var(--ff-display)', fontSize: 28, fontWeight: 600, letterSpacing: '-0.028em', lineHeight: 1.15, marginBottom: 12, color: 'var(--ink)' }}>
            Top 18% of the FreshNest system.
          </div>
          <div style={{ fontSize: 13.5, color: 'var(--ink-3)', lineHeight: 1.5, marginBottom: 14, letterSpacing: '-0.005em' }}>
            Peers at your score get <strong style={{ color: 'var(--ink)', fontWeight: 600 }}>2.3× more inbound leads.</strong>
          </div>

          {!showDist ? (
            <button className="btn btn-quiet btn-xs" style={{ padding: 0, fontSize: 11.5 }} onClick={() => setShowDist(true)}>
              Show system distribution ↓
            </button>
          ) : (
            <div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 6, fontSize: 10.5, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 600 }}>
                <span>System distribution</span>
                <button className="btn btn-quiet btn-xs" style={{ padding: 0, fontSize: 10.5, color: 'var(--ink-3)', textTransform: 'none', letterSpacing: 0, fontWeight: 500 }} onClick={() => setShowDist(false)}>247 locations · hide ↑</button>
              </div>
              <div style={{ position: 'relative', height: 10, borderRadius: 5, background: 'linear-gradient(90deg, var(--cream-3) 0%, var(--marigold-soft) 50%, var(--sage-soft) 100%)', overflow: 'visible' }}>
                <div style={{ position: 'absolute', left: '50%', top: -3, bottom: -3, width: 1, background: 'var(--ink-4)' }}/>
                <div style={{ position: 'absolute', left: `${scores.localScore}%`, top: -6, bottom: -6, width: 3, background: 'var(--ink)', borderRadius: 2, transform: 'translateX(-1.5px)' }}/>
                <div style={{ position: 'absolute', left: `${scores.localScore}%`, top: -22, transform: 'translateX(-50%)', fontSize: 10, fontWeight: 700, color: 'var(--ink)', whiteSpace: 'nowrap' }}>YOU · {scores.localScore}</div>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: 'var(--ink-4)', marginTop: 6, fontFamily: 'var(--ff-mono)' }}>
                <span>Bottom · 42</span>
                <span style={{ color: 'var(--ink-3)' }}>Median · 71</span>
                <span>Top · 96</span>
              </div>
            </div>
          )}
        </div>

        {/* Right: 4 sub-scores in a 2x2 grid */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, paddingLeft: 24, borderLeft: '1px solid var(--cream-3)' }}>
          {breakdown.map(([l, v, sub]) => {
            const tone = v >= 85 ? 'var(--sage)' : v >= 70 ? 'var(--marigold)' : 'var(--terra)';
            return (
              <div key={l} style={{ padding: '10px 12px', background: 'var(--cream)', borderRadius: 8, border: '1px solid var(--cream-3)' }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 2 }}>
                  <div style={{ fontSize: 22, fontFamily: 'var(--ff-display)', fontWeight: 600, color: 'var(--ink)', letterSpacing: '-0.02em', fontVariantNumeric: 'tabular-nums lining-nums', lineHeight: 1 }}>{v}</div>
                  <div style={{ width: 6, height: 6, borderRadius: '50%', background: tone }}/>
                </div>
                <div style={{ fontSize: 11, fontWeight: 600, color: 'var(--ink-2)', marginTop: 4, letterSpacing: '-0.005em' }}>{l}</div>
                <div style={{ fontSize: 10.5, color: 'var(--ink-4)', marginTop: 1 }}>{sub}</div>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

function LennyHeroCard({ insights }) {
  const [i, setI] = useStateHome(0);
  const ins = insights[i];
  const moodColor = { happy: 'var(--ok)', alert: 'var(--terra)', thinking: 'var(--sky)' }[ins.mood];

  return (
    <div className="lenny-card" style={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
      <div>
        <div className="lenny-hdr">
          <div className="avatar">
            <LennyLlama size={52} mood={ins.mood} bg="circle"/>
          </div>
          <div>
            <div className="name">Lenny. <span style={{ fontSize: 11, color: 'var(--ink-3)', fontWeight: 400, fontFamily: 'var(--ff-ui)', fontStyle: 'normal', marginLeft: 4 }}>AI marketing coach</span></div>
            <div className="role"><span className="status-dot"/>Watching {insights.length} things for you today</div>
          </div>
        </div>
        <div style={{ fontFamily: 'var(--ff-display)', fontSize: 17, lineHeight: 1.35, color: 'var(--ink)', letterSpacing: '-0.01em', marginBottom: 8, position: 'relative' }}>
          <span style={{ color: moodColor, marginRight: 4 }}>●</span>{ins.title}
        </div>
        <div style={{ fontSize: 13, color: 'var(--ink-3)', lineHeight: 1.55, position: 'relative' }}>{ins.detail}</div>
        <div style={{ display: 'flex', gap: 6, marginTop: 14, flexWrap: 'wrap', position: 'relative' }}>
          {ins.ctas.map((c, idx) => (
            <button key={idx} className={`btn btn-sm ${c.type === 'terra' ? 'btn-terra' : 'btn-ghost'}`}>{c.label}</button>
          ))}
        </div>
      </div>
      <div style={{ display: 'flex', gap: 6, marginTop: 18, alignItems: 'center', position: 'relative' }}>
        {insights.map((_, idx) => (
          <button key={idx} onClick={() => setI(idx)}
                  style={{ width: idx === i ? 24 : 8, height: 8, borderRadius: 4,
                           background: idx === i ? 'var(--ink)' : 'var(--cream-3)',
                           transition: 'all .2s' }}/>
        ))}
        <div style={{ flex: 1 }}/>
        <button className="btn btn-quiet btn-xs" onClick={() => window.dispatchEvent(new CustomEvent('open-lenny'))}>Chat with Lenny →</button>
      </div>
    </div>
  );
}

function KpiCard({ label, value, delta, invert, trend, color, dotColor }) {
  const hasDelta = typeof delta === 'number';
  const up = (delta > 0 && !invert) || (delta < 0 && invert);
  const cls = delta === 0 ? 'delta-flat' : up ? 'delta-up' : 'delta-down';
  const arrow = delta === 0 ? '→' : up ? '↑' : '↓';
  return (
    <div className="kpi-card">
      <div className="kpi-label"><span className="dot" style={{ background: dotColor }}/>{label}</div>
      <div className="kpi-val">{value}</div>
      {hasDelta && <div className={`kpi-delta ${cls}`}>{arrow} {Math.abs(delta)}% vs last mo</div>}
      {Array.isArray(trend) && trend.length > 0 && (
        <div className="spark">
          <Sparkline data={trend} color={color} w={90} h={28}/>
        </div>
      )}
    </div>
  );
}
window.KpiCard = KpiCard;

function ChannelMixCard({ channels }) {
  const total = channels.reduce((s, c) => s + c.leads, 0);
  return (
    <div className="card card-pad">
      <div className="card-header">
        <div>
          <div className="card-title">Where your leads came from</div>
          <div className="card-sub">{total} leads this month · $26.70 CPL across all sources</div>
        </div>
        <button className="btn btn-quiet btn-xs">Month to date ⌄</button>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
        {channels.map(c => {
          const pct = (c.leads / total) * 100;
          return (
            <div key={c.key}>
              <div style={{ display: 'flex', alignItems: 'center', marginBottom: 6 }}>
                <span style={{ width: 8, height: 8, borderRadius: '50%', background: c.color, marginRight: 10 }}/>
                <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--ink)' }}>{c.name}</span>
                <span style={{ flex: 1, fontSize: 11.5, color: 'var(--ink-4)', marginLeft: 10 }}>${c.spend} spend · ${c.cpl} CPL · {c.roas}x ROAS</span>
                <span style={{ fontFamily: 'var(--ff-display)', fontSize: 20, fontWeight: 500, color: 'var(--ink)' }}>{c.leads}</span>
                <span style={{ fontSize: 11, color: 'var(--ink-4)', marginLeft: 4 }}>leads</span>
              </div>
              <div style={{ height: 6, background: 'var(--cream-2)', borderRadius: 3, overflow: 'hidden' }}>
                <div style={{ width: pct + '%', height: '100%', background: c.color, borderRadius: 3 }}/>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function ActivityCard({ activity }) {
  return (
    <div className="card card-pad">
      <div className="card-header">
        <div>
          <div className="card-title">Recent activity</div>
          <div className="card-sub">Leads, reviews, Lenny's fixes</div>
        </div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        {activity.map((a, i) => {
          const bg = { ok: 'var(--sage-soft)', marigold: 'var(--marigold-soft)', sage: 'var(--sage-soft)', sky: 'var(--sky-soft)', terra: 'var(--terra-soft)' }[a.color];
          const fg = { ok: 'var(--ok)', marigold: 'var(--marigold)', sage: 'var(--sage)', sky: 'var(--sky)', terra: 'var(--terra)' }[a.color];
          return (
            <div key={i} style={{ display: 'flex', gap: 10, padding: '10px 0', borderBottom: i === activity.length - 1 ? 'none' : '1px dashed var(--cream-3)', alignItems: 'flex-start' }}>
              <div style={{ width: 28, height: 28, borderRadius: '50%', background: bg, color: fg, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <span style={{ width: 14, height: 14 }}>{Icon[a.icon]}</span>
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 12.5, fontWeight: 600, color: 'var(--ink)' }}>{a.title}</div>
                <div style={{ fontSize: 11.5, color: 'var(--ink-3)', marginTop: 2, lineHeight: 1.4 }}>{a.meta}</div>
              </div>
              <div style={{ fontSize: 10.5, color: 'var(--ink-4)', fontFamily: 'var(--ff-mono)', flexShrink: 0 }}>{a.time}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

function ListingsPreview({ onNav }) {
  return (
    <div className="card card-pad">
      <div className="card-header">
        <div>
          <div className="card-title">Listings health</div>
          <div className="card-sub">42 directories · NAP 98% accurate</div>
        </div>
        <button className="btn btn-quiet btn-xs" onClick={() => onNav('listings')}>Open listings →</button>
      </div>
      <div style={{ display: 'flex', gap: 20, alignItems: 'center' }}>
        <ScoreRing value={82} size={100} color="var(--sage)" track="var(--cream-2)" label="LISTING"/>
        <div style={{ flex: 1 }}>
          <div style={{ display: 'flex', gap: 12, marginBottom: 12, flexWrap: 'wrap' }}>
            <Stat n="40" l="Live" c="var(--ok)"/>
            <Stat n="2" l="Issues" c="var(--warn)"/>
            <Stat n="72" l="AI Score" c="var(--sky)"/>
            <Stat n="4.8★" l="Rating" c="var(--marigold)"/>
          </div>
          <div style={{ fontSize: 12, padding: '10px 12px', background: 'var(--marigold-soft)', borderRadius: 10, color: '#725900', lineHeight: 1.45 }}>
            <strong>2 quick fixes</strong>, Yelp hours drift (auto-syncing) and missing GBP URL.
          </div>
        </div>
      </div>
    </div>
  );
}

function ReviewsPreview({ onNav, reviews }) {
  return (
    <div className="card card-pad">
      <div className="card-header">
        <div>
          <div className="card-title">Review pulse</div>
          <div className="card-sub">4.8★ avg · 2 new · response time 2.4h</div>
        </div>
        <button className="btn btn-quiet btn-xs" onClick={() => onNav('reviews')}>All reviews →</button>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {reviews.slice(0, 2).map((r, i) => (
          <div key={i} style={{ padding: '10px 0', borderBottom: i === 0 ? '1px dashed var(--cream-3)' : 'none' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
              <div style={{ width: 28, height: 28, borderRadius: '50%', background: 'var(--cream-2)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 700, color: 'var(--ink-2)' }}>{r.author[0]}</div>
              <div style={{ fontSize: 12.5, fontWeight: 600 }}>{r.author}</div>
              <span className="badge badge-neutral" style={{ fontSize: 10 }}>{r.platform}</span>
              <span style={{ color: 'var(--marigold)', fontSize: 11.5 }}>{'★'.repeat(r.stars)}</span>
              <span style={{ flex: 1 }}/>
              <span className="mono" style={{ fontSize: 10.5, color: 'var(--ink-4)' }}>{r.time}</span>
            </div>
            <div style={{ fontSize: 12.5, color: 'var(--ink-2)', lineHeight: 1.5 }}>"{r.text}"</div>
            {!r.replied && <button className="btn btn-xs btn-ghost" style={{ marginTop: 6 }}>Draft a reply with Lenny</button>}
          </div>
        ))}
      </div>
    </div>
  );
}

function Stat({ n, l, c }) {
  return (
    <div>
      <div style={{ fontFamily: 'var(--ff-display)', fontSize: 22, fontWeight: 500, color: c, lineHeight: 1 }}>{n}</div>
      <div style={{ fontSize: 10, color: 'var(--ink-4)', letterSpacing: '.08em', textTransform: 'uppercase', marginTop: 2 }}>{l}</div>
    </div>
  );
}
window.Stat = Stat;

// ====================================================================
// BARE-MINIMUM LOCATION: OPPORTUNITY-LED HOME
// Frames the $20K/mo left on the table. This is the "wow the user with
// potential" view, everything reinforces: you're running 1/6 channels,
// here's what the other 5 are worth, here's how to turn them on.
// ====================================================================
function BareOpportunityHome({ data, onNav }) {
  const { scores, kpis, channels, dormantChannels, opportunity, insights, activity, reviews } = data;
  const [range, setRange] = useStateHome(null);
  return (
    <div className="page active">
      <div className="page-header">
        <div>
          <div className="page-title">Morning, Danny.</div>
          <div className="page-sub">
            Plano Legacy · Tuesday, April 14 · You're running <strong>1 of 6</strong> channels. Here's what the other 5 could do.
          </div>
        </div>
        <div className="page-actions">
          <DateRangePicker value={range} onChange={setRange} align="right"/>
          <button className="btn btn-terra btn-sm" onClick={() => window.dispatchEvent(new CustomEvent('open-lenny'))}>
            Review plan with Lenny {Icon.arrow}
          </button>
        </div>
      </div>

      {/* ========== THE HEADLINE ========== */}
      <OpportunityHero opportunity={opportunity} onNav={onNav}/>

      {/* ========== WHERE YOU STAND vs. POTENTIAL ========== */}
      <div className="grid grid-2" style={{ marginBottom: 16, marginTop: 16 }}>
        <CurrentStateCard kpis={kpis} channels={channels} scores={scores}/>
        <PotentialCard opportunity={opportunity}/>
      </div>

      {/* ========== THE DORMANT CHANNEL CATALOG ========== */}
      <DormantChannelsCard dormantChannels={dormantChannels} currentChannel={channels[0]} opportunity={opportunity}/>

      {/* ========== 90-DAY RAMP PLAN ========== */}
      <RampPlanCard opportunity={opportunity} dormantChannels={dormantChannels}/>

      {/* ========== WHY NOW / LOCAL CONTEXT ========== */}
      <div className="grid grid-2" style={{ marginBottom: 16 }}>
        <CompetitiveContextCard/>
        <QuickWinsCard reviews={reviews}/>
      </div>
    </div>
  );
}

// ----- Currency / number helpers -----
function fmt$(n) { return '$' + n.toLocaleString(); }
function fmt$K(n) { return '$' + (n/1000).toFixed(n >= 10000 ? 0 : 1) + 'K'; }

// ====================================================================
// HERO, the single most important number on the screen
// ====================================================================
function OpportunityHero({ opportunity, onNav }) {
  const o = opportunity;
  const leadMult = (o.projectedLeads / o.currentLeads).toFixed(1);
  return (
    <div className="opp-hero">
      <div className="opp-hero-bg"/>
      <div className="opp-hero-grid">
        {/* LEFT, the headline number */}
        <div className="opp-hero-left">
          <div className="opp-hero-eyebrow">
            <span className="opp-dot"/>
            Monthly revenue opportunity · modeled by Lenny
          </div>
          <div className="opp-hero-big">
            <span className="opp-hero-prefix">+</span>
            <span className="opp-hero-money">{fmt$K(o.additionalRevenue)}</span>
            <span className="opp-hero-unit">/mo</span>
          </div>
          <div className="opp-hero-sub">
            You're earning <strong>{fmt$K(o.currentRev)}</strong>/mo from <strong>${o.currentSpend}</strong> in Google Search.
            Layering the rest of your marketing plan is modeled at <strong>{fmt$K(o.projectedRev)}</strong>/mo &mdash; roughly {leadMult}× your leads for an extra <strong>${o.additionalInvest}</strong> in service fees.
          </div>
          <div className="opp-hero-ctas">
            <button className="btn btn-terra" onClick={() => onNav('services')}>
              Turn on the full marketing plan {Icon.arrow}
            </button>
            <button className="btn btn-ghost" onClick={() => window.dispatchEvent(new CustomEvent('open-lenny'))}>
              Show me the math
            </button>
          </div>
        </div>

        {/* RIGHT, the before/after bar */}
        <div className="opp-hero-right">
          <div className="opp-bar-label">
            <span>Today</span>
            <span>With the full plan</span>
          </div>
          <div className="opp-bar-row">
            <div className="opp-bar today">
              <div className="opp-bar-val">{o.currentLeads}</div>
              <div className="opp-bar-cap">leads/mo</div>
            </div>
            <svg className="opp-arrow" viewBox="0 0 40 80" fill="none">
              <path d="M5 40 L32 40 M25 32 L32 40 L25 48" stroke="var(--terra)" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
            <div className="opp-bar projected">
              <div className="opp-bar-val">{o.projectedLeads}</div>
              <div className="opp-bar-cap">leads/mo</div>
              <div className="opp-bar-delta">+{o.projectedLeads - o.currentLeads}</div>
            </div>
          </div>
          <div className="opp-hero-meta">
            <div className="opp-meta-item">
              <div className="opp-meta-lbl">Payback</div>
              <div className="opp-meta-val">{o.paybackDays} days</div>
            </div>
            <div className="opp-meta-item">
              <div className="opp-meta-lbl">Net/mo</div>
              <div className="opp-meta-val">{fmt$K(o.netGain)}</div>
            </div>
            <div className="opp-meta-item">
              <div className="opp-meta-lbl">Full ramp</div>
              <div className="opp-meta-val">{o.timeToFullRamp}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ====================================================================
// CURRENT STATE, honest snapshot of bare-minimum performance
// ====================================================================
function CurrentStateCard({ kpis, channels, scores }) {
  const c = channels[0];
  return (
    <div className="card card-pad" style={{ position: 'relative' }}>
      <div className="card-header" style={{ marginBottom: 14 }}>
        <div>
          <div className="card-title">Where you are today</div>
          <div className="card-sub">One channel · flat performance · below brand median</div>
        </div>
        <span className="badge badge-warn">Underperforming</span>
      </div>
      <div className="cs-grid">
        <div className="cs-kpi">
          <div className="cs-kpi-val">{kpis.leads.val}</div>
          <div className="cs-kpi-lbl">Leads / mo</div>
          <div className="cs-kpi-ctx">Brand median <strong>64</strong></div>
        </div>
        <div className="cs-kpi">
          <div className="cs-kpi-val">${kpis.cpl.val}</div>
          <div className="cs-kpi-lbl">Cost per lead</div>
          <div className="cs-kpi-ctx cs-bad">2.9× brand median</div>
        </div>
        <div className="cs-kpi">
          <div className="cs-kpi-val">{kpis.roas.val}x</div>
          <div className="cs-kpi-lbl">Blended ROAS</div>
          <div className="cs-kpi-ctx cs-bad">Break-even zone</div>
        </div>
        <div className="cs-kpi">
          <div className="cs-kpi-val">{scores.localScore}</div>
          <div className="cs-kpi-lbl">LocalScore</div>
          <div className="cs-kpi-ctx cs-bad">Bottom 14% of FreshNest</div>
        </div>
      </div>
      <div className="cs-channel">
        <div className="cs-channel-hdr">
          <span className="cs-channel-swatch" style={{ background: c.color }}/>
          <strong>{c.name}</strong>
          <span className="cs-channel-meta">${c.spend}/mo · ${c.cpl} CPL · {c.roas}x ROAS</span>
          <span className="badge badge-info" style={{ marginLeft: 'auto' }}>Active</span>
        </div>
        <div className="cs-empties">
          {['Local Services Ads','Local SEO','Listings','Social','Content / AI'].map(n => (
            <div key={n} className="cs-empty">
              <span className="cs-empty-x">–</span> {n}
              <span className="cs-empty-tag">not enrolled</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ====================================================================
// POTENTIAL, visualized side-by-side to the current state
// ====================================================================
function PotentialCard({ opportunity }) {
  const o = opportunity;
  return (
    <div className="card card-pad pot-card">
      <div className="pot-glow"/>
      <div className="card-header" style={{ marginBottom: 14, position: 'relative' }}>
        <div>
          <div className="card-title">What's modeled for you</div>
          <div className="card-sub">Based on 142 FreshNest locations + 3,400 peer home-services businesses</div>
        </div>
        <span className="badge badge-terra">Projection</span>
      </div>
      <div className="pot-grid">
        <div className="pot-kpi">
          <div className="pot-kpi-val">{o.projectedLeads}</div>
          <div className="pot-kpi-lbl">Leads / mo</div>
          <div className="pot-kpi-delta">+{o.projectedLeads - o.currentLeads} new</div>
        </div>
        <div className="pot-kpi">
          <div className="pot-kpi-val">$38</div>
          <div className="pot-kpi-lbl">Cost per lead</div>
          <div className="pot-kpi-delta">−77% vs today</div>
        </div>
        <div className="pot-kpi">
          <div className="pot-kpi-val">5.2x</div>
          <div className="pot-kpi-lbl">Blended ROAS</div>
          <div className="pot-kpi-delta">+2.9× vs today</div>
        </div>
        <div className="pot-kpi">
          <div className="pot-kpi-val">76</div>
          <div className="pot-kpi-lbl">LocalScore</div>
          <div className="pot-kpi-delta">+38 pts</div>
        </div>
      </div>
      <div className="pot-money">
        <div className="pot-money-row">
          <div>
            <div className="pot-money-lbl">Additional investment</div>
            <div className="pot-money-val" style={{ color: 'var(--ink-2)' }}>${o.additionalInvest}<span className="u">/mo</span></div>
          </div>
          <div className="pot-money-plus">→</div>
          <div>
            <div className="pot-money-lbl">Modeled net gain</div>
            <div className="pot-money-val" style={{ color: 'var(--ok)' }}>{fmt$K(o.netGain)}<span className="u">/mo</span></div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ====================================================================
// DORMANT CHANNELS, the opportunity inventory
// ====================================================================
function DormantChannelsCard({ dormantChannels, currentChannel, opportunity }) {
  const [selected, setSelected] = useStateHome(dormantChannels.map(c => c.key)); // all selected by default
  const toggle = (k) => setSelected(s => s.includes(k) ? s.filter(x => x !== k) : [...s, k]);

  const selectedChannels = dormantChannels.filter(c => selected.includes(c.key));
  const addlInvest = selectedChannels.reduce((s, c) => s + c.minInvest, 0);
  const revBand = selectedChannels.reduce((acc, c) => {
    const match = (c.projRevenue || '').match(/\+\$([\d.]+)K/);
    return acc + (match ? parseFloat(match[1]) * 1000 : 0);
  }, 0);

  return (
    <div className="card" style={{ padding: 0, marginBottom: 16, overflow: 'hidden' }}>
      <div className="card-header" style={{ padding: '20px 24px 14px', marginBottom: 0 }}>
        <div>
          <div className="card-title">The five channels you're not running</div>
          <div className="card-sub">Toggle on / off to see the running totals · drag-and-drop enrollment</div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
          <div className="dc-running">
            <div className="dc-running-lbl">Selected</div>
            <div className="dc-running-val">
              <span style={{ color: 'var(--ink-2)' }}>+${addlInvest}</span>
              <span className="dc-running-arrow">→</span>
              <span style={{ color: 'var(--ok)' }}>+{fmt$K(revBand)}</span>
            </div>
          </div>
          <button className="btn btn-terra btn-sm">Enroll {selected.length} services</button>
        </div>
      </div>
      <div className="dc-grid">
        {dormantChannels.map(c => {
          const on = selected.includes(c.key);
          return (
            <div key={c.key} className={`dc-card ${on ? 'on' : ''}`} onClick={() => toggle(c.key)}>
              <div className="dc-card-top">
                <div className="dc-swatch" style={{ background: c.color }}>{Icon[c.icon]}</div>
                <div className="dc-card-title">{c.name}</div>
                <div className={`dc-toggle ${on ? 'on' : ''}`}><span/></div>
              </div>
              <div className="dc-why">{c.why}</div>
              <div className="dc-proj">
                <div className="dc-proj-item">
                  <div className="dc-proj-lbl">Fee / mo</div>
                  <div className="dc-proj-val">{c.minInvest === 0 ? 'Pay-per-lead' : '$' + c.minInvest}</div>
                </div>
                <div className="dc-proj-item">
                  <div className="dc-proj-lbl">Leads</div>
                  <div className="dc-proj-val">{c.projLeads}</div>
                </div>
                <div className="dc-proj-item">
                  <div className="dc-proj-lbl">CPL</div>
                  <div className="dc-proj-val">{c.projCpl}</div>
                </div>
                <div className="dc-proj-item revenue">
                  <div className="dc-proj-lbl">Revenue</div>
                  <div className="dc-proj-val" style={{ color: 'var(--ok)' }}>{c.projRevenue}</div>
                </div>
              </div>
              <div className="dc-confidence">
                <span className={`dc-conf-dot dc-conf-${c.confidence.toLowerCase().replace(' ','-')}`}/>
                {c.confidence} confidence · {c.confidence === 'Very High' ? 'near certain' : c.confidence === 'High' ? 'strong peer signal' : 'directional'}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ====================================================================
// 90-DAY RAMP PLAN, shows HOW to get from here to there
// ====================================================================
function RampPlanCard({ opportunity, dormantChannels }) {
  const phases = [
    {
      label: 'Month 1, Fix the basics',
      days: '0–30',
      color: 'var(--coral)',
      items: [
        { s: 'Enable Listings Management', fee: '$79', lift: 'NAP 41% → 96%' },
        { s: 'Turn on LSA (pay-per-lead)', fee: '$0 mgmt', lift: '~12 new leads' },
        { s: 'Review response automation', fee: 'included', lift: '+4 pts LocalScore' },
      ],
      expected: '+18 leads · +$4.6K rev',
    },
    {
      label: 'Month 2, Compound',
      days: '30–60',
      color: 'var(--marigold)',
      items: [
        { s: 'Launch Local SEO', fee: '$449', lift: 'First-page by wk 6' },
        { s: 'Raise PPC daily cap to $20', fee: '$300 → $600', lift: '+8 leads' },
        { s: 'Add Meta Ads, recurring cleans', fee: '$375', lift: '+12 leads' },
      ],
      expected: '+32 leads · +$9.4K rev',
    },
    {
      label: 'Month 3, Full plan running',
      days: '60–90',
      color: 'var(--sage)',
      items: [
        { s: 'Content + AI visibility', fee: 'included', lift: '+4 leads from AI' },
        { s: 'Optimize full portfolio', fee: '–', lift: 'CPL $167 → $38' },
        { s: 'Seasonal campaign cadence', fee: 'included', lift: '+6 leads' },
      ],
      expected: '+56 leads · +$20.6K rev',
    },
  ];
  return (
    <div className="card card-pad" style={{ marginBottom: 16 }}>
      <div className="card-header" style={{ marginBottom: 18 }}>
        <div>
          <div className="card-title">Your 90-day ramp to the full marketing plan</div>
          <div className="card-sub">Sequenced so each phase pays for the next · you can pause any time</div>
        </div>
        <span className="badge badge-info">Lenny-generated plan</span>
      </div>
      <div className="ramp-grid">
        {phases.map((p, i) => (
          <div key={i} className="ramp-phase">
            <div className="ramp-phase-hdr">
              <div className="ramp-phase-num" style={{ background: p.color }}>{i + 1}</div>
              <div>
                <div className="ramp-phase-label">{p.label}</div>
                <div className="ramp-phase-days">Days {p.days}</div>
              </div>
            </div>
            <div className="ramp-items">
              {p.items.map((it, j) => (
                <div key={j} className="ramp-item">
                  <div className="ramp-item-top">
                    <span className="ramp-check" style={{ borderColor: p.color }}/>
                    <span className="ramp-s">{it.s}</span>
                    <span className="ramp-fee">{it.fee}</span>
                  </div>
                  <div className="ramp-lift">↳ {it.lift}</div>
                </div>
              ))}
            </div>
            <div className="ramp-expected" style={{ borderTopColor: p.color }}>
              <span>Expected by end of phase</span>
              <strong style={{ color: p.color }}>{p.expected}</strong>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ====================================================================
// COMPETITIVE CONTEXT, why this opportunity exists RIGHT NOW
// ====================================================================
function CompetitiveContextCard() {
  return (
    <div className="card card-pad">
      <div className="card-header" style={{ marginBottom: 14 }}>
        <div>
          <div className="card-title">What's happening in Plano right now</div>
          <div className="card-sub">Competitor & demand signals Lenny's watching</div>
        </div>
      </div>
      <div className="comp-stack">
        <div className="comp-row">
          <div className="comp-dot" style={{ background: 'var(--berry)' }}/>
          <div style={{ flex: 1 }}>
            <div className="comp-t">8 competitors running LSA in your ZIP</div>
            <div className="comp-m">Molly Maid Plano, Two Maids (3 locations), Merry Maids, all show above your paid listing on mobile.</div>
          </div>
        </div>
        <div className="comp-row">
          <div className="comp-dot" style={{ background: 'var(--marigold)' }}/>
          <div style={{ flex: 1 }}>
            <div className="comp-t">"house cleaning" searches up <strong>+42%</strong> this quarter</div>
            <div className="comp-m">Spring + moving season. Peer Frisco location added 21 recurring-clean leads last April, you captured 2.</div>
          </div>
        </div>
        <div className="comp-row">
          <div className="comp-dot" style={{ background: 'var(--sky)' }}/>
          <div style={{ flex: 1 }}>
            <div className="comp-t">You rank <strong>#11</strong> for "house cleaning plano"</div>
            <div className="comp-m">Organic clicks stop at position 5. With Local SEO, peers move to #2–4 in ~60 days.</div>
          </div>
        </div>
        <div className="comp-row">
          <div className="comp-dot" style={{ background: 'var(--violet)' }}/>
          <div style={{ flex: 1 }}>
            <div className="comp-t">ChatGPT doesn't know you exist</div>
            <div className="comp-m">Asked "best house cleaning near Plano Legacy", 0 mentions. Peer Frisco: 3 citations. AI search now drives ~8% of new leads for home services.</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ====================================================================
// QUICK WINS, zero-cost things to do this week
// ====================================================================
function QuickWinsCard({ reviews }) {
  const wins = [
    { t: 'Reply to 3 unanswered reviews', m: 'Last reply was 47 days ago · +2 LocalScore pts', cost: 'Free · 8 min', cta: 'Draft with Lenny' },
    { t: 'Fix Sunday hours on Google Business Profile', m: 'Currently showing "closed", costing ~4 leads/week', cost: 'Free · 2 min', cta: 'Fix now' },
    { t: 'Upload 8 store photos', m: 'GBP completeness 61% → 94% · boosts map pack ranking', cost: 'Free · 10 min', cta: 'Start upload' },
    { t: 'Raise PPC daily cap from $10 to $15', m: 'Hitting cap by 11 AM · losing afternoon searches', cost: '+$150/mo', cta: 'Adjust cap' },
  ];
  return (
    <div className="card card-pad">
      <div className="card-header" style={{ marginBottom: 14 }}>
        <div>
          <div className="card-title">Free quick wins this week</div>
          <div className="card-sub">Zero-to-low cost · do these before you enroll anything</div>
        </div>
        <span className="badge badge-ok">4 available</span>
      </div>
      <div className="qw-stack">
        {wins.map((w, i) => (
          <div key={i} className="qw-row">
            <div className="qw-num">{i + 1}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div className="qw-t">{w.t}</div>
              <div className="qw-m">{w.m}</div>
            </div>
            <div className="qw-cost">{w.cost}</div>
            <button className="btn btn-xs btn-ghost">{w.cta}</button>
          </div>
        ))}
      </div>
    </div>
  );
}

window.BareOpportunityHome = BareOpportunityHome;

// ====================================================================
// TODAYS FOCUS STRIP, 3 most-pressing items at the very top
// ====================================================================
function TodaysFocusStrip({ onNav }) {
  const items = [
    {
      icon: '!', tone: 'terra',
      label: 'LEADS NEED YOU',
      title: '2 leads unanswered · ~$700 in pipeline',
      meta: 'Derek T. (form, 6h) and Ryan S. (Meta DM), Lenny drafted replies',
      cta: 'Open leads', go: 'leads',
    },
    {
      icon: '◐', tone: 'terra',
      label: 'PACING ALERT',
      title: 'PPC budget at 68% with 16 days left',
      meta: 'Trending under by ~$80 · cap to $13/day or let Lenny rebalance',
      cta: 'Open Budget', go: 'budget',
    },
    {
      icon: '★', tone: 'marigold',
      label: 'REVIEW WAITING',
      title: '2 unanswered reviews · last reply 4h ago',
      meta: 'Sarah K. (5★ Google) · Mike D. (4★ Yelp), Lenny has drafts ready',
      cta: 'Review & send', go: 'reviews',
    },
  ];
  const tones = {
    terra:    { bg: 'var(--terra-soft)',    fg: 'var(--terra)',    border: 'var(--terra)' },
    marigold: { bg: 'var(--marigold-soft)', fg: '#917200',         border: 'var(--marigold)' },
    sage:     { bg: 'var(--sage-soft)',     fg: '#085050',         border: 'var(--sage)' },
  };
  return (
    <div style={{ marginBottom: 20 }}>
      <div style={{ fontSize: 11, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 700, marginBottom: 10, display: 'flex', alignItems: 'center', gap: 10 }}>
        <span>Today's focus</span>
        <span style={{ flex: 1, height: 1, background: 'var(--cream-3)' }}/>
        <span style={{ color: 'var(--ink-3)', fontWeight: 500, textTransform: 'none', letterSpacing: 0, fontSize: 11.5 }}>3 things Lenny thinks need you</span>
      </div>
      <div className="grid grid-3" style={{ gap: 12 }}>
        {items.map((it, i) => {
          const t = tones[it.tone];
          return (
            <button key={i} className="card" onClick={() => onNav(it.go)}
                    style={{ padding: '14px 16px', textAlign: 'left', cursor: 'pointer', position: 'relative', overflow: 'hidden',
                             border: '1px solid var(--line)', background: 'var(--paper)', display: 'flex', flexDirection: 'column', gap: 4 }}>
              <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 3, background: t.border }}/>
              <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 2 }}>
                <span style={{ width: 22, height: 22, borderRadius: '50%', background: t.bg, color: t.fg, fontSize: 11, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontWeight: 700 }}>{it.icon}</span>
                <span style={{ fontSize: 10, fontWeight: 700, color: t.fg, letterSpacing: '0.08em' }}>{it.label}</span>
                <span style={{ flex: 1 }}/>
                <span style={{ fontSize: 11, color: 'var(--ink-3)', fontWeight: 500 }}>{it.cta} →</span>
              </div>
              <div style={{ fontSize: 13.5, fontWeight: 600, color: 'var(--ink)', lineHeight: 1.3, letterSpacing: '-0.005em' }}>{it.title}</div>
              <div style={{ fontSize: 11.5, color: 'var(--ink-3)', lineHeight: 1.4 }}>{it.meta}</div>
            </button>
          );
        })}
      </div>
    </div>
  );
}

// ====================================================================
// PACING MINI CARD, April spend at a glance, lifted from Budget tab
// ====================================================================
function PacingMiniCard({ onNav }) {
  const spent = 544, total = 800, elapsed = 47, spentPct = 68;
  return (
    <div className="card card-pad" style={{ background: 'linear-gradient(135deg, var(--cream-2), var(--cream))' }}>
      <div className="card-header" style={{ marginBottom: 12 }}>
        <div>
          <div className="card-title">April pacing</div>
          <div className="card-sub">Day 14 of 30 · paid media</div>
        </div>
        <span className="badge badge-warn">● Under by 21%</span>
      </div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 10 }}>
        <div style={{ fontFamily: 'var(--ff-display)', fontSize: 30, fontWeight: 500, color: 'var(--ink)', letterSpacing: '-0.025em', lineHeight: 1 }}>${spent}</div>
        <div style={{ fontSize: 12, color: 'var(--ink-3)' }}>of ${total}</div>
      </div>
      <div style={{ position: 'relative', height: 8, background: 'var(--paper)', borderRadius: 4, overflow: 'hidden', marginBottom: 6, border: '1px solid var(--cream-3)' }}>
        <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: spentPct + '%', background: 'linear-gradient(90deg, var(--terra), var(--marigold))', borderRadius: 4 }}/>
        <div style={{ position: 'absolute', left: elapsed + '%', top: -2, bottom: -2, width: 2, background: 'var(--ink-3)', transform: 'translateX(-1px)' }}/>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10.5, color: 'var(--ink-4)', fontFamily: 'var(--ff-mono)', marginBottom: 12 }}>
        <span>{spentPct}% spent</span><span>{elapsed}% elapsed</span>
      </div>
      <div style={{ paddingTop: 10, borderTop: '1px dashed var(--cream-3)', display: 'flex', justifyContent: 'flex-end' }}>
        <button className="btn btn-quiet btn-xs" onClick={() => onNav('budget')}>Adjust budget →</button>
      </div>
    </div>
  );
}

// ====================================================================
// PLAYBOOK ADHERENCE CARD, how close you are to FreshNest recommendations
// ====================================================================
function PlaybookAdherenceCard({ onNav }) {
  const items = [
    { ch: 'Google Search', target: 1500, you: 1200, color: 'var(--terra)' },
    { ch: 'Local Services Ads', target: 600, you: 600, color: 'var(--sky)' },
    { ch: 'Meta Ads', target: 800, you: 800, color: 'var(--berry)' },
  ];
  const onTarget = items.filter(i => i.you >= i.target).length;
  return (
    <div className="card card-pad">
      <div className="card-header" style={{ marginBottom: 12 }}>
        <div>
          <div className="card-title">Plan Progress</div>
          <div className="card-sub">Your spend vs the playbook target</div>
        </div>
        <span style={{ fontSize: 11, fontWeight: 700, padding: '3px 8px', borderRadius: 999, background: 'var(--violet-soft, rgba(77,105,137,0.12))', color: 'var(--violet)', letterSpacing: '0.04em' }}>{onTarget}/{items.length} ON TARGET</span>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
        {items.map(it => {
          const pct = Math.min(100, (it.you / it.target) * 100);
          const onTgt = it.you >= it.target;
          return (
            <div key={it.ch}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 4, fontSize: 11.5 }}>
                <span style={{ color: 'var(--ink-2)', fontWeight: 500 }}>{it.ch}</span>
                <span style={{ fontFamily: 'var(--ff-mono)', color: 'var(--ink-3)' }}>
                  ${it.you} <span style={{ color: 'var(--ink-4)' }}>/ ${it.target}</span>
                </span>
              </div>
              <div style={{ position: 'relative', height: 5, background: 'var(--cream-2)', borderRadius: 3, overflow: 'hidden' }}>
                <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: pct + '%', background: onTgt ? 'var(--sage)' : 'var(--marigold)', borderRadius: 3 }}/>
                <div style={{ position: 'absolute', left: '100%', top: -1, bottom: -1, width: 2, background: 'var(--violet)', transform: 'translateX(-2px)' }}/>
              </div>
            </div>
          );
        })}
      </div>
      <div style={{ marginTop: 14, paddingTop: 10, borderTop: '1px dashed var(--cream-3)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 11.5, color: 'var(--ink-3)' }}>
        <span>1 below target · est. <strong style={{ color: 'var(--ink-2)' }}>+8 leads</strong> if matched</span>
        <button className="btn btn-quiet btn-xs" onClick={() => onNav('benchmarks')}>Playbook →</button>
      </div>
    </div>
  );
}

// ====================================================================
// ACTIVE PROMO CARD, what's live + what's coming
// ====================================================================
function ActivePromoCard({ onNav }) {
  return (
    <div className="card card-pad" style={{ background: 'linear-gradient(135deg, #f8f3e0, var(--marigold-soft))', border: '1px solid var(--marigold)', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: -30, right: -30, width: 120, height: 120, background: 'radial-gradient(circle, rgba(206,158,7,.25), transparent 70%)' }}/>
      <div style={{ position: 'relative', zIndex: 1 }}>
        <div className="card-header" style={{ marginBottom: 10 }}>
          <div>
            <div className="card-title" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--terra)', display: 'inline-block', animation: 'pulse 1.6s infinite' }}/>
              Fall Refresh promo
            </div>
            <div className="card-sub">Enrolling now · runs Sep 1–21</div>
          </div>
        </div>
        <div style={{ marginBottom: 10 }}>
          <div style={{ fontSize: 10, color: '#725900', textTransform: 'uppercase', letterSpacing: '0.06em', fontWeight: 700 }}>Modeled revenue</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
            <div style={{ fontFamily: 'var(--ff-display)', fontSize: 30, fontWeight: 600, color: 'var(--ok)', lineHeight: 1, letterSpacing: '-0.02em' }}>+$1.8K</div>
            <div style={{ fontSize: 11, color: '#725900' }}>over 3 weeks</div>
          </div>
          <div style={{ fontSize: 11, color: '#725900', marginTop: 6 }}>
            <strong style={{ fontWeight: 600 }}>$600 corp</strong> + <strong style={{ fontWeight: 600 }}>$400 your match</strong> · creative pre-built
          </div>
        </div>
        <div style={{ fontSize: 11.5, color: '#725900', marginBottom: 12, lineHeight: 1.4 }}>
          61% of FreshNest peers enrolled
        </div>
        <button className="btn btn-terra btn-sm" style={{ width: '100%', justifyContent: 'center' }} onClick={() => onNav('services')}>Enroll in promo →</button>
      </div>
    </div>
  );
}

window.TodaysFocusStrip = TodaysFocusStrip;
window.PacingMiniCard = PacingMiniCard;
window.PlaybookAdherenceCard = PlaybookAdherenceCard;
window.ActivePromoCard = ActivePromoCard;

// ====================================================================
// LENNY RECOMMEND CARD, the one clear next move on Home
// ====================================================================
function LennyRecommendCard({ onNav }) {
  return (
    <div
      className="card"
      style={{
        background: 'linear-gradient(135deg, #f4f7fe 0%, var(--cream) 60%)',
        border: '1px solid var(--violet-soft)',
        padding: '28px 32px',
        position: 'relative',
        overflow: 'hidden',
        boxShadow: '0 4px 20px rgba(120, 92, 168, 0.08)',
      }}
    >
      {/* Lenny mark in the corner */}
      <div
        aria-hidden
        style={{
          position: 'absolute',
          top: -32,
          right: -32,
          width: 200,
          height: 200,
          borderRadius: '50%',
          background: 'radial-gradient(circle, rgba(120, 92, 168, 0.12), transparent 70%)',
        }}
      />
      <div style={{ display: 'flex', gap: 22, alignItems: 'flex-start', position: 'relative' }}>
        {/* Lenny avatar */}
        <div
          style={{
            width: 56,
            height: 56,
            borderRadius: '50%',
            background: 'var(--paper)',
            border: '2px solid var(--cream-3)',
            overflow: 'hidden',
            flexShrink: 0,
            boxShadow: '0 2px 10px rgba(120, 92, 168, 0.20)',
          }}
        >
          <LennyLlama size={56} mood="happy" bg="circle"/>
        </div>

        <div style={{ flex: 1, minWidth: 0 }}>
          <div
            style={{
              fontSize: 11,
              color: 'var(--violet)',
              textTransform: 'uppercase',
              letterSpacing: '0.08em',
              fontWeight: 700,
              marginBottom: 6,
            }}
          >
            Lenny recommends · today's top move
          </div>
          <div
            style={{
              fontFamily: 'var(--ff-display)',
              fontSize: 30,
              fontWeight: 500,
              color: 'var(--ink)',
              letterSpacing: '-0.022em',
              lineHeight: 1.15,
              marginBottom: 16,
              textWrap: 'pretty',
            }}
          >
            Search demand is outpacing your daily budget — a $200/mo bump could add an estimated 3–6 qualified leads.
          </div>

          <div
            style={{
              display: 'grid',
              gridTemplateColumns: '1fr 1fr',
              gap: 18,
              marginBottom: 18,
              paddingTop: 14,
              borderTop: '1px dashed var(--cream-3)',
            }}
          >
            <div>
              <div
                style={{
                  fontSize: 10.5,
                  color: 'var(--ink-3)',
                  textTransform: 'uppercase',
                  letterSpacing: '0.08em',
                  fontWeight: 700,
                  marginBottom: 5,
                }}
              >
                What Lenny found
              </div>
              <div style={{ fontSize: 13.5, color: 'var(--ink-2)', lineHeight: 1.5 }}>
                Your impression share is <strong style={{ color: 'var(--ink)' }}>74%</strong>, below
                the 84% top-quartile FreshNest locations reach. When your $1,850/mo budget caps out,
                your ad stops showing to people actively searching for home cleaning.
              </div>
            </div>
            <div>
              <div
                style={{
                  fontSize: 10.5,
                  color: 'var(--ink-3)',
                  textTransform: 'uppercase',
                  letterSpacing: '0.08em',
                  fontWeight: 700,
                  marginBottom: 5,
                }}
              >
                Expected range
              </div>
              <div style={{ fontSize: 13.5, color: 'var(--ink-2)', lineHeight: 1.5 }}>
                Raising spend to <strong style={{ color: 'var(--ink)' }}>~$2,050/mo</strong> projects
                an estimated <strong style={{ color: 'var(--sage)' }}>3–6 additional qualified leads/mo</strong>,
                based on the last 60 days of FreshNest peer-location performance.
              </div>
            </div>
          </div>

          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <button className="btn btn-primary btn-sm" style={{ padding: '8px 16px' }} onClick={() => onNav('budget')}>
              Review &amp; approve →
            </button>
            <button className="btn btn-ghost btn-sm" onClick={() => onNav('budget')}>
              Run projection
            </button>
            <span
              style={{
                display: 'inline-flex', alignItems: 'center', gap: 5,
                fontSize: 10.5, fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase',
                color: 'var(--ink-3)', background: 'var(--cream-2, #f3ede2)',
                padding: '4px 9px', borderRadius: 999, marginLeft: 'auto',
              }}
            >
              Affects spend
            </span>
            <span
              style={{
                display: 'inline-flex', alignItems: 'center', gap: 5,
                fontSize: 10.5, fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase',
                color: 'var(--violet)', background: 'rgba(120, 92, 168, 0.10)',
                padding: '4px 9px', borderRadius: 999,
              }}
            >
              Needs your approval
            </span>
          </div>
        </div>
      </div>
    </div>
  );
}

window.LennyRecommendCard = LennyRecommendCard;