// Dashboard — score radar, sub-scores, authority, checklist, issues preview

(function () {

// ── Score ring ────────────────────────────────────────────────
function ScoreRing({ score, size = 88, stroke = 7 }) {
  const r = (size - stroke) / 2;
  const circ = 2 * Math.PI * r;
  const fill = (score / 100) * circ;
  const color = score >= 70 ? 'var(--good)' : score >= 50 ? 'var(--warn)' : 'var(--bad)';
  return (
    <svg width={size} height={size} style={{ flexShrink:0 }}>
      <circle cx={size/2} cy={size/2} r={r} fill="none" stroke="var(--border)" strokeWidth={stroke}/>
      <circle cx={size/2} cy={size/2} r={r} fill="none" stroke={color} strokeWidth={stroke}
        strokeDasharray={`${fill} ${circ}`} strokeLinecap="round"
        transform={`rotate(-90 ${size/2} ${size/2})`} style={{ transition:'stroke-dasharray .6s ease' }}/>
      <text x={size/2} y={size/2+1} textAnchor="middle" dominantBaseline="middle"
        fontSize="18" fontWeight="700" fill={color} fontFamily="inherit">{score}</text>
    </svg>
  );
}

// ── Mini progress bar ─────────────────────────────────────────
function MiniBar({ pct, color }) {
  return (
    <div style={{ height:5, borderRadius:99, background:'var(--surface-3)', overflow:'hidden', flex:1 }}>
      <div style={{ width:`${Math.min(pct,100)}%`, height:'100%', background:color, borderRadius:99 }}/>
    </div>
  );
}

// ── Sparkline ────────────────────────────────────────────────
function Sparkline({ data }) {
  if (!data || data.length < 2) return null;
  const vals = data.map(d => d.traffic);
  const min = Math.min(...vals), max = Math.max(...vals);
  const range = max - min || 1;
  const w = 100, h = 32;
  const pts = vals.map((v, i) => `${(i/(vals.length-1))*w},${h-((v-min)/range)*h}`).join(' ');
  const last = vals[vals.length-1];
  const lx = w, ly = h - ((last-min)/range)*h;
  return (
    <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`} style={{ overflow:'visible' }}>
      <polyline points={pts} fill="none" stroke="var(--accent)" strokeWidth="2"
        strokeLinecap="round" strokeLinejoin="round"/>
      <circle cx={lx} cy={ly} r="3" fill="var(--accent)"/>
    </svg>
  );
}

// ── Radar / Spider chart ──────────────────────────────────────
function RadarChart({ scores }) {
  const dims = [
    { key:'technical', label:'Technical' },
    { key:'content',   label:'Content'   },
    { key:'speed',     label:'Speed'     },
    { key:'backlinks', label:'Backlinks' },
    { key:'local',     label:'Local'     },
    { key:'aiSearch',  label:'AI Ready'  },
  ];
  const S = 220, cx = S/2, cy = S/2, R = 72;
  const n = dims.length;
  const ang = i => (Math.PI * 2 * i / n) - Math.PI / 2;

  const poly = ratio => dims.map((_, i) => {
    const a = ang(i);
    return `${cx + R * ratio * Math.cos(a)},${cy + R * ratio * Math.sin(a)}`;
  }).join(' ');

  const dataPts = dims.map((d, i) => {
    const v = (scores[d.key] || 0) / 100;
    const a = ang(i);
    return [cx + R * v * Math.cos(a), cy + R * v * Math.sin(a)];
  });
  const dataPolygon = dataPts.map(p => p.join(',')).join(' ');

  return (
    <svg viewBox={`0 0 ${S} ${S}`} width={S} height={S} style={{ display:'block' }}>
      {/* grid */}
      {[0.25, 0.5, 0.75, 1].map(r => (
        <polygon key={r} points={poly(r)} fill="none"
          stroke="var(--border)" strokeWidth={r===1?1.5:0.75} strokeDasharray={r<1?'3 3':undefined}/>
      ))}
      {/* axes */}
      {dims.map((_, i) => {
        const a = ang(i);
        return <line key={i} x1={cx} y1={cy}
          x2={cx + R * Math.cos(a)} y2={cy + R * Math.sin(a)}
          stroke="var(--border)" strokeWidth="0.75"/>;
      })}
      {/* data fill */}
      <polygon points={dataPolygon}
        fill="rgba(62,207,142,0.13)" stroke="var(--accent)" strokeWidth="2" strokeLinejoin="round"/>
      {/* dots */}
      {dataPts.map(([x, y], i) => (
        <circle key={i} cx={x} cy={y} r="3.5" fill="var(--accent)" stroke="var(--surface)" strokeWidth="1.5"/>
      ))}
      {/* labels */}
      {dims.map((d, i) => {
        const a = ang(i);
        const lr = R + 22;
        const x = cx + lr * Math.cos(a);
        const y = cy + lr * Math.sin(a);
        const s = scores[d.key] || 0;
        const c = s>=70?'var(--good)':s>=50?'var(--warn)':'var(--bad)';
        return (
          <g key={i}>
            <text x={x} y={y-4} textAnchor="middle" dominantBaseline="middle"
              fontSize="9.5" fontWeight="600" fill="var(--ink-2)">{d.label}</text>
            <text x={x} y={y+8} textAnchor="middle" dominantBaseline="middle"
              fontSize="9" fontWeight="700" fill={c}>{s}</text>
          </g>
        );
      })}
    </svg>
  );
}

// ── Industry benchmark bar ────────────────────────────────────
// Shows client score vs industry average for local service businesses
const INDUSTRY_AVG = { technical:61, content:67, speed:55, backlinks:48, local:72, aiSearch:44 };

function BenchmarkBar({ label, score, avg, color }) {
  return (
    <div style={{ marginBottom:10 }}>
      <div style={{ display:'flex', justifyContent:'space-between', marginBottom:5 }}>
        <span style={{ fontSize:12, color:'var(--ink-2)', fontWeight:500 }}>{label}</span>
        <span style={{ fontSize:11, color:'var(--ink-3)' }}>
          <span style={{ color, fontWeight:700 }}>{score}</span>
          <span style={{ margin:'0 4px' }}>vs</span>
          <span>{avg} avg</span>
        </span>
      </div>
      <div style={{ position:'relative', height:6, background:'var(--surface-3)', borderRadius:99, overflow:'visible' }}>
        {/* avg marker */}
        <div style={{ position:'absolute', top:-2, bottom:-2, width:2, borderRadius:1,
          left:`${avg}%`, background:'var(--ink-4)', zIndex:1 }}/>
        {/* score bar */}
        <div style={{ width:`${Math.min(score,100)}%`, height:'100%',
          background:color, borderRadius:99, transition:'width .5s ease' }}/>
      </div>
    </div>
  );
}

// ── Action plan checklist ─────────────────────────────────────
const DIY_TASKS = [
  { done:false, text:'Reply to all your recent Google reviews'      },
  { done:false, text:'Add holiday hours to Google Business Profile' },
  { done:false, text:'Ask 5 happy customers for a Google review'    },
  { done:false, text:'Upload 10+ photos to your GBP listing'        },
  { done:true,  text:'Claim & verify your Google Business Profile'  },
  { done:false, text:'Fill in all GBP attributes (Wi-Fi, parking…)' },
];

const HIKIT_TASKS = [
  { done:true,  locked:false, text:'Full SEO Technical Audit'                 },
  { done:false, locked:true,  text:'Fix page speed (LCP 6.2s → target 2.5s)' },
  { done:false, locked:true,  text:'Add LocalBusiness schema markup'          },
  { done:false, locked:true,  text:'Build 5 local citation listings'          },
  { done:false, locked:true,  text:'Backlink outreach campaign'               },
  { done:false, locked:true,  text:'Monthly SEO rank tracking reports'        },
];

function CheckItem({ done, locked, text }) {
  return (
    <div style={{ display:'flex', alignItems:'center', gap:10, padding:'7px 0',
      borderBottom:'1px solid var(--border)', opacity: locked ? 0.55 : 1 }}>
      {locked ? (
        <span style={{ fontSize:13, flexShrink:0 }}>🔒</span>
      ) : (
        <span style={{
          width:18, height:18, borderRadius:'50%', flexShrink:0,
          border:`2px solid ${done?'var(--good)':'var(--border)'}`,
          background: done?'var(--good)':'transparent',
          display:'flex', alignItems:'center', justifyContent:'center',
        }}>
          {done && <Icon name="check" size={9} style={{ color:'#fff' }}/>}
        </span>
      )}
      <span style={{ fontSize:13, color: done&&!locked ? 'var(--ink-3)' : 'var(--ink-2)',
        textDecoration: done&&!locked ? 'line-through' : 'none', flex:1, lineHeight:1.4 }}>
        {text}
      </span>
    </div>
  );
}

// ── Main page ─────────────────────────────────────────────────
function OverviewPage({ go }) {
  const c      = window.CP_CLIENT || {};
  const scores = c.scores || {};
  const auth   = c.authority || {};

  const allIssues = [
    ...(c.technical?.issues || []),
    ...(c.content?.issues   || []),
    ...(c.speed?.issues     || []),
    ...(c.local?.issues     || []),
    ...(c.backlinks?.issues || [])
  ];
  const critical = allIssues.filter(i => i.sev === 'critical');
  const major    = allIssues.filter(i => i.sev === 'major');
  const overall  = scores.overall ?? c.audit?.overallScore ?? 0;

  const subScores = [
    { key:'technical', label:'Technical SEO',    icon:'dev',     nav:'audit'     },
    { key:'content',   label:'Content & On-Page', icon:'content', nav:'audit'     },
    { key:'speed',     label:'Page Speed (CWV)',  icon:'zap',     nav:'audit'     },
    { key:'backlinks', label:'Backlink Profile',  icon:'link',    nav:'backlinks' },
    { key:'local',     label:'Local SEO',         icon:'pin',     nav:'local'     },
    { key:'aiSearch',  label:'AI Search Ready',   icon:'ai',      nav:'audit'     }
  ];

  return (
    <div>
      {/* ── Hero ──────────────────────────────────────────────── */}
      <div style={{ display:'flex', alignItems:'center', gap:20, marginBottom:24, flexWrap:'wrap' }}>
        <ScoreRing score={overall} size={96} stroke={8}/>
        <div style={{ flex:1, minWidth:180 }}>
          <div style={{ display:'flex', alignItems:'center', gap:10, flexWrap:'wrap', marginBottom:5 }}>
            <h1 className="hk-h2" style={{ margin:0 }}>{c.name}</h1>
            <span style={{
              fontSize:12, fontWeight:700, padding:'3px 10px', borderRadius:100,
              color: overall>=70?'var(--good)':overall>=50?'var(--warn)':'var(--bad)',
              background: overall>=70?'var(--good-soft)':overall>=50?'var(--warn-soft)':'var(--bad-soft)'
            }}>{overall>=70?'Good':overall>=50?'Needs Work':'Critical'}</span>
          </div>
          <div className="hk-small" style={{ color:'var(--ink-3)', marginBottom:6 }}>
            <a href={`https://${c.domain}`} target="_blank" rel="noopener"
              style={{ color:'var(--accent)', textDecoration:'none', fontWeight:500 }}>{c.domain}</a>
            {c.industry && <> · {c.industry}</>}
            {c.location && <> · {c.location}</>}
          </div>
          <div className="hk-tiny" style={{ color:'var(--ink-3)' }}>
            Audit: <b style={{ color:'var(--ink-2)' }}>{c.auditDate}</b>
            {' · '}By: <b style={{ color:'var(--ink-2)' }}>{c.managedBy}</b>
          </div>
        </div>
        <a href={c.bookingUrl} target="_blank" rel="noopener"
          style={{ display:'inline-flex', alignItems:'center', gap:6, padding:'9px 18px',
            background:'var(--accent)', color:'#fff', borderRadius:'var(--r-3)',
            textDecoration:'none', fontSize:13.5, fontWeight:600, flexShrink:0 }}>
          <Icon name="calendar" size={14}/> Book a Call
        </a>
      </div>

      {/* ── Radar + Benchmark ─────────────────────────────────── */}
      <div style={{ display:'grid', gridTemplateColumns:'auto 1fr', gap:16, marginBottom:24, alignItems:'start' }}>
        {/* Radar */}
        <div style={{ background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'var(--r-3)', padding:'14px 16px', display:'flex', flexDirection:'column', alignItems:'center' }}>
          <div style={{ display:'flex', alignItems:'center', gap:6, marginBottom:4, alignSelf:'flex-start' }}>
            <span className="hk-h4">SEO Health Radar</span>
            <Hint text="Each axis is one SEO dimension scored 0–100. A perfect score fills the whole hexagon. Gaps show where you're losing traffic." width={210}/>
          </div>
          <RadarChart scores={scores}/>
        </div>

        {/* Benchmark bars */}
        <div style={{ background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'var(--r-3)', padding:'18px 20px' }}>
          <div style={{ display:'flex', alignItems:'center', gap:6, marginBottom:4 }}>
            <span className="hk-h4">vs. Industry Average</span>
            <Hint text="Industry average is for local food & beverage businesses. The vertical line shows where your competitors typically score." width={220}/>
          </div>
          <p className="hk-tiny" style={{ color:'var(--ink-3)', marginBottom:16 }}>Local Food & Beverage · Chicago market</p>
          {subScores.map(({ key, label }) => {
            const s = scores[key] || 0;
            const avg = INDUSTRY_AVG[key] || 60;
            const color = s>=70?'var(--good)':s>=50?'var(--warn)':'var(--bad)';
            return <BenchmarkBar key={key} label={label} score={s} avg={avg} color={color}/>;
          })}
        </div>
      </div>

      {/* ── Sub-score cards ───────────────────────────────────── */}
      <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(180px,1fr))', gap:10, marginBottom:24 }}>
        {subScores.map(({ key, label, icon, nav }) => {
          const s = scores[key] ?? 0;
          const color = s>=70?'var(--good)':s>=50?'var(--warn)':'var(--bad)';
          const avg   = INDUSTRY_AVG[key] || 60;
          const delta = s - avg;
          return (
            <div key={key} onClick={() => go(nav)}
              style={{ background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'var(--r-3)',
                padding:'14px 16px', cursor:'pointer', transition:'box-shadow .15s, transform .15s' }}
              onMouseEnter={e => { e.currentTarget.style.boxShadow='var(--shadow-2)'; e.currentTarget.style.transform='translateY(-1px)'; }}
              onMouseLeave={e => { e.currentTarget.style.boxShadow=''; e.currentTarget.style.transform=''; }}>
              <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:8 }}>
                <span style={{ display:'flex', alignItems:'center', gap:5, fontSize:12, color:'var(--ink-3)', fontWeight:500 }}>
                  <Icon name={icon} size={13}/>{label}
                </span>
                <span style={{ fontSize:18, fontWeight:700, color, fontFamily:'var(--font-display)' }}>{s}</span>
              </div>
              <MiniBar pct={s} color={color}/>
              <div style={{ marginTop:6, fontSize:11, color: delta>=0?'var(--good)':'var(--bad)', fontWeight:600 }}>
                {delta>=0?'▲':'▼'} {Math.abs(delta)} vs avg
              </div>
            </div>
          );
        })}
      </div>

      {/* ── Authority snapshot ────────────────────────────────── */}
      <div style={{ background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'var(--r-3)', padding:'18px 20px', marginBottom:24 }}>
        <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:16, flexWrap:'wrap', gap:8 }}>
          <div style={{ display:'flex', alignItems:'center', gap:7 }}>
            <span className="hk-h4">Domain Authority</span>
            <Hint text="Domain Authority (DR) measures how strong your website's backlink profile is, scored 0–100. Higher = more trust from Google." width={210}/>
            <span className="hk-tiny" style={{ color:'var(--ink-3)' }}>Via Ahrefs · {auth.updatedAt || c.auditDate}</span>
          </div>
          <button onClick={() => go('authority')}
            style={{ display:'inline-flex', alignItems:'center', gap:4, padding:'6px 12px', background:'var(--surface-3)', border:'1px solid var(--border)', borderRadius:'var(--r-2)', fontSize:12.5, color:'var(--ink-2)', cursor:'pointer', fontFamily:'inherit' }}>
            Full report <Icon name="chevR" size={12}/>
          </button>
        </div>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(120px,1fr))', gap:16, alignItems:'end' }}>
          {[
            { label:'Domain Rating', value:`${auth.domainRating ?? '—'}`, sub:'/100', color:'var(--accent)',
              hint:'DR (Domain Rating) — how strong your backlink profile is. Scale 0–100. Most local businesses score 10–30.' },
            { label:'Monthly Traffic', value:auth.organicTraffic?.toLocaleString() ?? '—', color:'var(--ink)',
              hint:'Estimated monthly organic (free) visitors from Google search. Does not include paid ads or direct traffic.' },
            { label:'Organic Keywords', value:auth.organicKeywords?.toLocaleString() ?? '—', color:'var(--ink)',
              hint:'The number of unique search terms your site ranks for on Google (positions 1–100).' },
            { label:'Referring Domains', value:auth.referringDomains?.toLocaleString() ?? '—', color:'var(--ink)',
              hint:'How many unique websites link to you. More diverse referring domains = stronger trust signal for Google.' }
          ].map(m => (
            <div key={m.label}>
              <div style={{ display:'flex', alignItems:'center', gap:5, marginBottom:3 }}>
                <div style={{ fontSize:24, fontWeight:700, color:m.color, lineHeight:1 }}>
                  {m.value}<span style={{ fontSize:13, color:'var(--ink-3)', fontWeight:400 }}>{m.sub||''}</span>
                </div>
                {m.hint && <Hint text={m.hint} width={200}/>}
              </div>
              <div className="hk-tiny" style={{ color:'var(--ink-3)' }}>{m.label}</div>
            </div>
          ))}
          {auth.trafficTrend && (
            <div style={{ display:'flex', flexDirection:'column', gap:4 }}>
              <Sparkline data={auth.trafficTrend}/>
              <div className="hk-tiny" style={{ color:'var(--ink-3)' }}>6-month trend ↑</div>
            </div>
          )}
        </div>
      </div>

      {/* ── Issue counts ──────────────────────────────────────── */}
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:10, marginBottom:24 }}>
        <div onClick={() => go('audit')} style={{ background:'var(--bad-soft)', border:'1px solid color-mix(in srgb, var(--bad) 30%, transparent)', borderRadius:'var(--r-3)', padding:'14px 16px', cursor:'pointer' }}>
          <div style={{ fontSize:28, fontWeight:700, color:'var(--bad)', lineHeight:1 }}>{critical.length}</div>
          <div style={{ fontSize:12.5, fontWeight:600, color:'var(--bad)', marginTop:2 }}>Critical issues</div>
          <div className="hk-tiny" style={{ color:'var(--ink-3)', marginTop:3 }}>Blocking traffic now</div>
        </div>
        <div onClick={() => go('audit')} style={{ background:'var(--warn-soft)', border:'1px solid color-mix(in srgb, var(--warn) 30%, transparent)', borderRadius:'var(--r-3)', padding:'14px 16px', cursor:'pointer' }}>
          <div style={{ fontSize:28, fontWeight:700, color:'var(--warn)', lineHeight:1 }}>{major.length}</div>
          <div style={{ fontSize:12.5, fontWeight:600, color:'var(--warn)', marginTop:2 }}>Major issues</div>
          <div className="hk-tiny" style={{ color:'var(--ink-3)', marginTop:3 }}>Fix within 30 days</div>
        </div>
      </div>

      {/* ── Critical issues — titles visible, fixes locked ────── */}
      {critical.length > 0 && (
        <div style={{ background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'var(--r-3)', padding:'18px 20px', marginBottom:24 }}>
          <div className="hk-h4" style={{ marginBottom:4, display:'flex', alignItems:'center', gap:7 }}>
            <span style={{ width:7, height:7, borderRadius:'50%', background:'var(--bad)', display:'inline-block', flexShrink:0 }}/>
            Fix these first
          </div>
          <p className="hk-tiny" style={{ color:'var(--ink-3)', marginBottom:14 }}>We found {critical.length} critical issues. Here's what's broken — book a call to get the step-by-step fix guide.</p>

          {/* Show titles — no fixes */}
          <div style={{ display:'flex', flexDirection:'column', gap:8, marginBottom:14 }}>
            {critical.slice(0, 3).map((issue, i) => (
              <div key={i} style={{ display:'flex', gap:12, padding:'11px 14px',
                background:'var(--surface-3)', borderRadius:'var(--r-2)', borderLeft:'3px solid var(--bad)' }}>
                <div>
                  <div style={{ fontSize:13.5, fontWeight:600, color:'var(--ink)', marginBottom:3 }}>{issue.title}</div>
                  <div className="hk-tiny" style={{ color:'var(--ink-3)', lineHeight:1.5 }}>{issue.detail}</div>
                </div>
              </div>
            ))}
          </div>

          {/* Locked CTA for fixes */}
          <LockedSection
            label="How to fix these issues"
            sub="Get step-by-step implementation guides, copy-paste code snippets, and a prioritized fix roadmap."
            ctaLabel="Get My Fix Guide →"
          >
            <div style={{ padding:'12px 14px', background:'var(--surface-3)', borderRadius:'var(--r-2)', borderLeft:'3px solid var(--accent)' }}>
              <div className="hk-tiny" style={{ fontWeight:600, marginBottom:3, textTransform:'uppercase', letterSpacing:'0.06em', color:'var(--ink-3)' }}>Fix</div>
              <div className="hk-small">Add canonical tags, fix redirect chains, compress images, implement schema markup...</div>
            </div>
          </LockedSection>
        </div>
      )}

      {/* ── Action Plan: DIY vs HiKit ─────────────────────────── */}
      <div style={{ background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'var(--r-3)', padding:'18px 20px', marginBottom:24 }}>
        <div className="hk-h4" style={{ marginBottom:4 }}>Your Action Plan</div>
        <p className="hk-tiny" style={{ color:'var(--ink-3)', marginBottom:16 }}>
          Some things you can do yourself this week. Others need our expertise — that's what we're here for.
        </p>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:20 }}>
          {/* DIY column */}
          <div>
            <div style={{ display:'flex', alignItems:'center', gap:7, marginBottom:10 }}>
              <div style={{ width:24, height:24, borderRadius:6, background:'var(--good-soft)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:13 }}>✋</div>
              <span style={{ fontSize:13, fontWeight:700, color:'var(--ink)' }}>You can do this week</span>
            </div>
            {DIY_TASKS.map((t, i) => <CheckItem key={i} {...t}/>)}
          </div>

          {/* HiKit column */}
          <div>
            <div style={{ display:'flex', alignItems:'center', gap:7, marginBottom:10 }}>
              <div style={{ width:24, height:24, borderRadius:6, background:'var(--accent-soft)', display:'flex', alignItems:'center', justifyContent:'center', fontSize:13 }}>🏢</div>
              <span style={{ fontSize:13, fontWeight:700, color:'var(--ink)' }}>HiKit handles for you</span>
            </div>
            {HIKIT_TASKS.map((t, i) => <CheckItem key={i} {...t}/>)}
            <a href={c.bookingUrl} target="_blank" rel="noopener"
              style={{ display:'inline-flex', alignItems:'center', gap:6, marginTop:14,
                padding:'8px 16px', background:'var(--accent)', color:'#fff',
                borderRadius:'var(--r-2)', fontSize:13, fontWeight:600, textDecoration:'none' }}>
              <Icon name="calendar" size={13}/> Start a project
            </a>
          </div>
        </div>
      </div>

      {/* ── What's next ───────────────────────────────────────── */}
      <div style={{ background:'var(--surface)', border:'1px solid var(--border)', borderRadius:'var(--r-3)', padding:'18px 20px' }}>
        <div className="hk-h4" style={{ marginBottom:4 }}>Next steps</div>
        <p className="hk-small" style={{ color:'var(--ink-3)', marginBottom:16 }}>Recommended actions based on your audit</p>
        <div style={{ display:'grid', gridTemplateColumns:'repeat(auto-fill,minmax(210px,1fr))', gap:10 }}>
          {[
            { n:'1', icon:'report',   title:'Review your full audit', sub:'Go through each section. Technical issues are costing you traffic right now.',     action:() => go('audit')                          },
            { n:'2', icon:'calendar', title:'Book a strategy call',   sub:'Free 30-min call. We walk through findings and build a fix roadmap together.',     action:() => window.open(c.bookingUrl,'_blank')    },
            { n:'3', icon:'rocket',   title:'Start fixing',           sub:'We implement everything or guide your team — your choice, your budget.',           action:() => window.open(c.bookingUrl,'_blank')    }
          ].map(card => (
            <div key={card.n} onClick={card.action}
              style={{ display:'flex', gap:12, padding:'13px 14px', background:'var(--surface-3)', borderRadius:'var(--r-2)', cursor:'pointer', transition:'background .12s' }}
              onMouseEnter={e => e.currentTarget.style.background='var(--border)'}
              onMouseLeave={e => e.currentTarget.style.background='var(--surface-3)'}>
              <div style={{ width:26, height:26, borderRadius:'var(--r-1)', background:'var(--accent)', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', fontSize:12, fontWeight:700, flexShrink:0 }}>{card.n}</div>
              <div>
                <div style={{ fontSize:13.5, fontWeight:600, color:'var(--ink)', marginBottom:3 }}>{card.title}</div>
                <div className="hk-tiny" style={{ color:'var(--ink-3)', lineHeight:1.5 }}>{card.sub}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

CP_PAGES.overview = { title: 'Dashboard', component: OverviewPage };

})();