// Dashboard mockup — reused on landing hero, preview section, and is the basis for the full dashboard page
const { useState: useStateD } = React;

// Score gauge (semicircle)
function ScoreGauge({ value = 42, max = 100, size = 180 }) {
  const r = size / 2 - 12;
  const cx = size / 2;
  const cy = size / 2 + 8;
  const circ = Math.PI * r;
  const pct = value / max;
  return (
    <svg width={size} height={size / 1.6} viewBox={`0 0 ${size} ${size / 1.6}`}>
      <path d={`M ${cx - r} ${cy} A ${r} ${r} 0 0 1 ${cx + r} ${cy}`}
        stroke="#e8e4d8" strokeWidth="10" fill="none" strokeLinecap="round"/>
      <path d={`M ${cx - r} ${cy} A ${r} ${r} 0 0 1 ${cx + r} ${cy}`}
        stroke="url(#gauge-g)" strokeWidth="10" fill="none" strokeLinecap="round"
        strokeDasharray={`${circ * pct} ${circ}`}/>
      <defs>
        <linearGradient id="gauge-g" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stopColor="#b8944a"/>
          <stop offset="100%" stopColor="#d4b778"/>
        </linearGradient>
      </defs>
    </svg>
  );
}

// Sparkline
function Sparkline({ data = [], w = 220, h = 44, color = '#b8944a', fill = true }) {
  if (!data.length) return null;
  const max = Math.max(...data);
  const min = Math.min(...data);
  const range = max - min || 1;
  const step = w / (data.length - 1);
  const pts = data.map((d, i) => [i * step, h - ((d - min) / range) * (h - 4) - 2]);
  const path = pts.map((p, i) => `${i === 0 ? 'M' : 'L'} ${p[0]} ${p[1]}`).join(' ');
  const area = `${path} L ${w} ${h} L 0 ${h} Z`;
  return (
    <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`} style={{ display: 'block' }}>
      {fill && <path d={area} fill={color} opacity="0.12"/>}
      <path d={path} stroke={color} strokeWidth="1.8" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

// Weekly trend line chart (two lines)
function TrendChart({ w = 760, h = 240 }) {
  const weeks = ['U14','U15','U16','U17','U18','U19','U20','U21','U22','U23','U24','U25'];
  const you = [30, 34, 38, 41, 44, 48, 52, 55, 58, 61, 64, 67];
  const avg = [28, 28, 29, 29, 30, 30, 31, 31, 32, 32, 33, 34];
  const padL = 40, padR = 20, padT = 20, padB = 32;
  const plotW = w - padL - padR;
  const plotH = h - padT - padB;
  const maxY = 60;
  const x = i => padL + (i / (weeks.length - 1)) * plotW;
  const y = v => padT + plotH - (v / maxY) * plotH;
  const path = (arr) => arr.map((v, i) => `${i === 0 ? 'M' : 'L'} ${x(i)} ${y(v)}`).join(' ');
  const area = `${path(you)} L ${x(you.length - 1)} ${padT + plotH} L ${x(0)} ${padT + plotH} Z`;
  return (
    <svg width="100%" viewBox={`0 0 ${w} ${h}`} style={{ display: 'block' }}>
      {/* gridlines */}
      {[0, 20, 40, 60].map(v => (
        <g key={v}>
          <line x1={padL} x2={w - padR} y1={y(v)} y2={y(v)} stroke="#e8e4d8" strokeWidth="1"/>
          <text x={padL - 8} y={y(v) + 4} fontSize="11" fill="#9ca6bd" textAnchor="end" fontFamily="Inter">{v}</text>
        </g>
      ))}
      {weeks.map((wk, i) => (
        <text key={wk} x={x(i)} y={h - 10} fontSize="10.5" fill="#9ca6bd" textAnchor="middle" fontFamily="Inter">{wk}</text>
      ))}
      <path d={area} fill="#b8944a" opacity="0.08"/>
      <path d={path(avg)} stroke="#9ca6bd" strokeWidth="1.5" strokeDasharray="4 4" fill="none"/>
      <path d={path(you)} stroke="#b8944a" strokeWidth="2.2" fill="none" strokeLinecap="round"/>
      {you.map((v, i) => (
        <circle key={i} cx={x(i)} cy={y(v)} r={i === you.length - 1 ? 4 : 2.5} fill="#b8944a" stroke="white" strokeWidth={i === you.length - 1 ? 2 : 1}/>
      ))}
    </svg>
  );
}

// Small bar
function Bar({ value, max = 100, color = '#b8944a', h = 6 }) {
  return (
    <div style={{ height: h, background: 'rgba(10,31,68,0.06)', borderRadius: 100, overflow: 'hidden' }}>
      <div style={{ height: '100%', width: `${(value / max) * 100}%`, background: color, borderRadius: 100 }}/>
    </div>
  );
}

// ———————————————————————————— Compact dashboard (for hero)
function DashboardMini() {
  return (
    <div style={{
      background: 'white',
      borderRadius: 12,
      boxShadow: '0 32px 80px rgba(10,31,68,0.26), 0 12px 28px rgba(10,31,68,0.12)',
      border: '1px solid rgba(10,31,68,0.08)',
      overflow: 'hidden',
      fontSize: 13,
    }}>
      {/* browser chrome */}
      <div style={{ padding: '10px 14px', borderBottom: '1px solid #eee', display: 'flex', alignItems: 'center', gap: 6, background: '#fafaf7' }}>
        <div style={{ width: 10, height: 10, borderRadius: 50, background: '#e8e4d8' }}/>
        <div style={{ width: 10, height: 10, borderRadius: 50, background: '#e8e4d8' }}/>
        <div style={{ width: 10, height: 10, borderRadius: 50, background: '#e8e4d8' }}/>
        <div style={{ margin: '0 auto', fontSize: 11, color: 'var(--ink-4)' }} className="mono">app.GEOKlar.dk / dashboard</div>
      </div>
      <div style={{ padding: 20 }}>
        {/* header row */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 16 }}>
          <div>
            <div style={{ fontSize: 11, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 4, display: 'flex', alignItems: 'center' }}>Synligheds-score<InfoTip stopNav text="Samlet mål for hvor ofte og hvor fremtrædende du nævnes i AI-svar på tværs af alle testede prompts og modeller. 0–100 — højere er bedre."/></div>
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 36, fontWeight: 600, color: 'var(--navy)', lineHeight: 1, letterSpacing: '-0.02em' }}>72<span style={{ fontSize: 18, color: 'var(--ink-4)' }}>/100</span></div>
            <div style={{ fontSize: 11, color: 'var(--green)', marginTop: 4, display: 'flex', alignItems: 'center', gap: 4 }}>
              <Icon.arrowUp/> +18 point siden start
            </div>
          </div>
          <ScoreGauge value={72} size={110}/>
        </div>

        {/* category bars */}
        <div style={{ display: 'grid', gap: 10, marginBottom: 16 }}>
          {[
            { l: 'Direkte brand', v: 58 },
            { l: 'Kategori', v: 34 },
            { l: 'Sammenligning', v: 28 },
            { l: 'Lokalt', v: 48 },
          ].map(c => (
            <div key={c.l} style={{ display: 'grid', gridTemplateColumns: '110px 1fr 36px', alignItems: 'center', gap: 12 }}>
              <span style={{ fontSize: 12, color: 'var(--ink-2)' }}>{c.l}</span>
              <Bar value={c.v}/>
              <span style={{ fontSize: 11, color: 'var(--ink-3)', textAlign: 'right' }} className="mono">{c.v}</span>
            </div>
          ))}
        </div>

        {/* competitor */}
        <div style={{ borderTop: '1px solid var(--line)', paddingTop: 14 }}>
          <div style={{ fontSize: 11, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 10, display: 'flex', alignItems: 'center' }}>Konkurrenter<InfoTip stopNav text="De firmaer AI nævner oftest i din kategori, og hvor langt du er fra dem. Gap'et er det rum, du kan lukke."/></div>
          {[
            { n: 'Azets', v: 68, you: false },
            { n: 'Beierholm', v: 63, you: false },
            { n: 'Dig', v: 61, you: true },
            { n: 'BDO', v: 49, you: false },
            { n: 'Deloitte', v: 41, you: false },
          ].map(c => (
            <div key={c.n} style={{ display: 'grid', gridTemplateColumns: '80px 1fr 36px', alignItems: 'center', gap: 10, marginBottom: 6 }}>
              <span style={{ fontSize: 12, fontWeight: c.you ? 600 : 400, color: c.you ? 'var(--gold-dark)' : 'var(--ink-2)' }}>{c.n}</span>
              <Bar value={c.v} color={c.you ? 'var(--gold)' : 'var(--navy)'}/>
              <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', textAlign: 'right' }}>{c.v}%</span>
            </div>
          ))}
        </div>

        {/* citation */}
        <div style={{ marginTop: 14, padding: 12, background: 'var(--bg-warm)', borderRadius: 6, borderLeft: '2px solid var(--gold)' }}>
          <div style={{ fontSize: 10, color: 'var(--gold-dark)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 4, display: 'flex', alignItems: 'center' }}>ChatGPT · 2t siden<InfoTip stopNav text="De konkrete AI-svar fra de sidste 7 dage hvor du nævnes. Viser motor, prompt, uddrag og din placering i svaret."/></div>
          <div style={{ fontSize: 12, color: 'var(--ink-2)', lineHeight: 1.45 }}>
            "…Du kan også overveje <b style={{ color: 'var(--navy)' }}>Eksempel Revision</b>, som specialiserer sig i e-handel…"
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ScoreGauge, Sparkline, TrendChart, Bar, DashboardMini });