// Populated dashboard — used by eksempel-dashboard.html as a product tour
const { useState: useStateDP } = React;

const BRAND = 'Eksempel Revision';
const BRAND_FULL = 'Eksempel Revision ApS';
const BRAND_INITIALS = 'ER';
const BRAND_DOMAIN = 'eksempelrevision.dk';
const TIPS = {
  score: '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.',
  mention: 'Antal prompts hvor AI nævner dig uden at blive spurgt om ved navn. Viser hvor ofte du bringes op af sig selv, når kunder spørger om en kategori.',
  trend: 'Udvikling i din synligheds-score over tid sammenlignet med branche-gennemsnit. Bruges til at se om indsatser rykker tallet i den rigtige retning.',
  competitor: "De firmaer AI nævner oftest i din kategori, og hvor langt du er fra dem. Gap'et er det rum, du kan lukke.",
  goal: 'Dit målsatte score-niveau for kvartalet. Den mørke bar er fremskridt fra 0; den gyldne markør er målet.',
  prompts: 'De prompts hvor du scorer højest lige nu — dvs. de emner og spørgsmål du allerede dominerer.',
  sources: 'De hjemmesider AI oftest trækker fra, når de beskriver din branche. Det er her du skal placeres eller citeres for at flytte din synlighed.',
  recs: 'Konkrete opgaver prioriteret efter effekt og indsats. Opdateres hver uge baseret på nye målinger og huller i din synlighed.',
  feed: 'De konkrete AI-svar fra de sidste 7 dage hvor du nævnes. Viser motor, prompt, uddrag og din placering i svaret.',
};

function DashHeader() {
  const nav = ['Oversigt', 'Prompts', 'Konkurrenter', 'Indhold', 'Rapporter', 'Integrationer'];
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 40,
      background: 'rgba(255,255,255,0.92)',
      backdropFilter: 'saturate(1.4) blur(12px)',
      borderBottom: '1px solid var(--line)',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', padding: '0 32px', height: 60, gap: 28 }}>
        <a href="index.html" className="logo"><span className="logo-mark"/><span>GEOKlar</span></a>
        <nav style={{ display: 'flex', gap: 2, marginLeft: 16 }}>
          {nav.map((n, i) => (
            <a key={n} style={{
              padding: '8px 14px', fontSize: 13, borderRadius: 6,
              color: i === 0 ? 'var(--navy)' : 'var(--ink-3)',
              background: i === 0 ? 'rgba(10,31,68,0.06)' : 'transparent',
              fontWeight: i === 0 ? 600 : 500, cursor: 'pointer',
            }}>{n}</a>
          ))}
        </nav>
        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '7px 12px', background: 'var(--bg-alt)', border: '1px solid var(--line)', borderRadius: 8, color: 'var(--ink-3)', fontSize: 13, width: 200 }}>
            <Icon.search/> <span>Søg…</span>
            <span className="mono" style={{ marginLeft: 'auto', fontSize: 11, padding: '2px 6px', background: 'white', borderRadius: 3, color: 'var(--ink-4)' }}>⌘K</span>
          </div>
          <button style={{ position: 'relative', color: 'var(--ink-3)' }}>
            <Icon.bell/>
            <span style={{ position: 'absolute', top: -4, right: -4, width: 16, height: 16, fontSize: 10, fontWeight: 600, background: 'var(--gold)', color: 'white', borderRadius: 50, display: 'grid', placeItems: 'center' }}>3</span>
          </button>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '4px 12px 4px 4px', border: '1px solid var(--line)', borderRadius: 100, cursor: 'pointer' }}>
            <div style={{ width: 28, height: 28, borderRadius: 50, background: 'var(--gold-soft)', color: 'var(--gold-dark)', display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 600 }}>{BRAND_INITIALS}</div>
            <span style={{ fontSize: 13, fontWeight: 500, color: 'var(--navy)' }}>{BRAND_FULL}</span>
            <svg width="10" height="10" viewBox="0 0 10 10"><path d="M2 4L5 7L8 4" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round"/></svg>
          </div>
        </div>
      </div>
    </header>
  );
}

function AccountStrip() {
  return (
    <div style={{ background: 'linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px) 0 0 / 20px 20px, linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px) 0 0 / 20px 20px, radial-gradient(circle at center, #0a1f44 0%, #050f22 100%)', color: 'white', borderBottom: '1px solid var(--navy-800)', position: 'relative', overflow: 'hidden' }}>
      <div style={{ padding: '10px 32px', display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 13 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
          <span style={{ fontWeight: 600 }}>{BRAND_FULL}</span>
          <span style={{ opacity: 0.3 }}>·</span>
          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            <span style={{ padding: '2px 8px', background: 'rgba(184,148,74,0.2)', color: 'var(--gold-light)', borderRadius: 100, fontSize: 11, fontWeight: 600 }}>GROWTH</span>
            plan
          </span>
          <span style={{ opacity: 0.3 }}>·</span>
          <span style={{ opacity: 0.7 }}>Næste analyse: Mandag kl. 09:00</span>
        </div>
        <a style={{ color: 'var(--gold-light)', fontSize: 13, fontWeight: 500, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
          Opgrader til Pro <Icon.arrow/>
        </a>
      </div>
    </div>
  );
}

// Individual dashboard cards ------------------
function CardShell({ children, style = {}, pad = 24, feature = false }) {
  return (
    <div style={{
      background: feature ? 'var(--bg-warm)' : 'white',
      border: '1px solid var(--line)',
      borderRadius: 8,
      padding: pad,
      ...style,
    }}>{children}</div>
  );
}
function CardTitle({ title, sub, right, tip }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: sub ? 4 : 16 }}>
      <div>
        <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--navy)', display: 'flex', alignItems: 'center' }}>{title}{tip && <InfoTip text={tip}/>}</div>
        {sub && <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2 }}>{sub}</div>}
      </div>
      {right}
    </div>
  );
}

function ScoreHeroCard() {
  return (
    <CardShell feature pad={24}>
      <div style={{ fontSize: 11, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 12, fontWeight: 600, display: 'flex', alignItems: 'center' }}>Synligheds-score<InfoTip text={TIPS.score}/></div>
      <div style={{ display: 'flex', alignItems: 'flex-end', gap: 16, marginBottom: 8 }}>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 60, fontWeight: 600, color: 'var(--navy)', letterSpacing: '-0.02em', lineHeight: 0.9 }}>42</div>
        <div style={{ fontSize: 16, color: 'var(--ink-4)', paddingBottom: 10 }}>/ 100</div>
      </div>
      <div style={{ fontSize: 12, color: 'var(--green)', fontWeight: 500, display: 'flex', alignItems: 'center', gap: 4, marginBottom: 16 }}>
        <Icon.arrowUp/> +8 point siden sidste uge
      </div>
      <Sparkline data={[18,21,24,22,26,29,31,34,36,38,40,42]} w={260} h={44}/>
      <div className="mono" style={{ fontSize: 10, color: 'var(--ink-4)', marginTop: 4 }}>Sidste 12 uger</div>
    </CardShell>
  );
}
function MentionCard() {
  return (
    <CardShell>
      <div style={{ fontSize: 11, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 12, fontWeight: 600, display: 'flex', alignItems: 'center' }}>Spontan omtale<InfoTip text={TIPS.mention}/></div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 4 }}>
        <span style={{ fontFamily: 'var(--font-display)', fontSize: 44, fontWeight: 600, color: 'var(--navy)', letterSpacing: '-0.02em', lineHeight: 0.9 }}>127</span>
        <span style={{ fontSize: 15, color: 'var(--ink-4)' }}>/ 300</span>
      </div>
      <div style={{ fontSize: 12, color: 'var(--ink-3)', marginBottom: 16 }}>Prompts hvor du nævnes</div>
      <Bar value={127} max={300} h={8}/>
      <div style={{ fontSize: 12, color: 'var(--green)', fontWeight: 500, marginTop: 10, display: 'flex', alignItems: 'center', gap: 4 }}>
        <Icon.arrowUp/> +23 siden sidste uge
      </div>
    </CardShell>
  );
}
function CompetitorCard() {
  return (
    <CardShell>
      <div style={{ fontSize: 11, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 12, fontWeight: 600, display: 'flex', alignItems: 'center' }}>Top konkurrent<InfoTip text={TIPS.competitor}/></div>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 36, fontWeight: 600, color: 'var(--navy)', letterSpacing: '-0.02em', lineHeight: 1, marginBottom: 8 }}>Azets</div>
      <div style={{ fontSize: 13, color: 'var(--ink-2)', marginBottom: 16 }}>Nævnt i 68% af prompts</div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '10px 12px', background: 'var(--bg-alt)', borderRadius: 6, fontSize: 12 }}>
        <span style={{ color: 'var(--ink-3)' }}>Dig: <b style={{ color: 'var(--navy)' }}>42%</b></span>
        <span style={{ padding: '2px 8px', background: 'rgba(184,74,74,0.1)', color: 'var(--red)', borderRadius: 100, fontWeight: 600, fontSize: 11 }}>Gap: −26</span>
      </div>
    </CardShell>
  );
}
function GoalCard() {
  return (
    <CardShell>
      <div style={{ fontSize: 11, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 12, fontWeight: 600, display: 'flex', alignItems: 'center' }}>Næste mål<InfoTip text={TIPS.goal}/></div>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 4 }}>
        <span style={{ fontFamily: 'var(--font-display)', fontSize: 44, fontWeight: 600, color: 'var(--navy)', letterSpacing: '-0.02em', lineHeight: 0.9 }}>70</span>
        <span style={{ fontSize: 15, color: 'var(--ink-4)' }}>/ 100</span>
      </div>
      <div style={{ fontSize: 12, color: 'var(--ink-3)', marginBottom: 16 }}>Mål for Q2 · 28 point væk</div>
      <div style={{ height: 8, background: 'rgba(10,31,68,0.06)', borderRadius: 100, overflow: 'hidden', position: 'relative' }}>
        <div style={{ height: '100%', width: '60%', background: 'var(--navy)', borderRadius: 100 }}/>
        <div style={{ position: 'absolute', left: '60%', top: -2, bottom: -2, width: 2, background: 'var(--gold)' }}/>
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: 'var(--ink-4)', marginTop: 6 }} className="mono">
        <span>0</span><span>42 nu</span><span>70 mål</span>
      </div>
    </CardShell>
  );
}

function TrendCard() {
  const [range, setRange] = useStateDP('12u');
  return (
    <CardShell>
      <CardTitle
        title="Synligheds-score over tid"
        sub="Din score vs. branche-gennemsnit"
        tip={TIPS.trend}
        right={
          <div style={{ display: 'flex', gap: 2, padding: 3, background: 'var(--bg-alt)', borderRadius: 6, fontSize: 11 }}>
            {['4u', '12u', '6m', '1å'].map(r => (
              <button key={r} onClick={() => setRange(r)} style={{
                padding: '5px 10px', borderRadius: 4,
                background: range === r ? 'white' : 'transparent',
                color: range === r ? 'var(--navy)' : 'var(--ink-3)',
                fontWeight: range === r ? 600 : 500,
                boxShadow: range === r ? '0 1px 2px rgba(10,31,68,0.08)' : 'none',
              }}>{r}</button>
            ))}
          </div>
        }
      />
      <TrendChart w={900} h={240}/>
      <div style={{ display: 'flex', gap: 24, fontSize: 12, color: 'var(--ink-3)', marginTop: 8, paddingTop: 12, borderTop: '1px solid var(--line)' }}>
        <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{ width: 16, height: 2.5, background: 'var(--gold)', borderRadius: 2 }}/>
          Dig <b style={{ color: 'var(--navy)' }}>42</b>
        </span>
        <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
          <span style={{ width: 16, height: 2, backgroundImage: 'linear-gradient(90deg, #9ca6bd 50%, transparent 50%)', backgroundSize: '6px 2px' }}/>
          Branche-gennemsnit <b style={{ color: 'var(--navy)' }}>34</b>
        </span>
        <span style={{ marginLeft: 'auto', color: 'var(--green)', fontWeight: 500 }}>↑ +24 point over perioden</span>
      </div>
    </CardShell>
  );
}

function PromptsCard() {
  const prompts = [
    { q: 'Hvem er den bedste revisor i København?', hit: 3, tot: 30 },
    { q: 'Billig revisor til ApS', hit: 8, tot: 30 },
    { q: 'Revisor der forstår e-handel', hit: 15, tot: 30 },
    { q: 'Regnskabsbureau med brancheerfaring', hit: 12, tot: 30 },
    { q: 'Hvilken revisor for startups?', hit: 2, tot: 30 },
    { q: 'Revisor Aarhus anbefaling', hit: 6, tot: 30 },
    { q: 'Bedste revisor til webshop i DK', hit: 11, tot: 30 },
    { q: 'Revisor specialiseret i moms og e-handel', hit: 14, tot: 30 },
  ];
  return (
    <CardShell>
      <CardTitle title="Top prompts denne uge" sub="Hvor ofte du nævnes når AI svarer på disse spørgsmål" tip={TIPS.prompts}/>
      <div style={{ display: 'grid', gap: 0 }}>
        {prompts.map((p, i) => {
          const pct = Math.round((p.hit / p.tot) * 100);
          return (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr 120px 70px', alignItems: 'center', gap: 16, padding: '14px 0', borderTop: i > 0 ? '1px solid var(--line)' : 'none' }}>
              <div style={{ fontSize: 13, color: 'var(--ink)', lineHeight: 1.4 }}>"{p.q}"</div>
              <Bar value={pct} h={6}/>
              <div style={{ textAlign: 'right', fontSize: 12, color: 'var(--ink-3)' }} className="mono">{p.hit}/{p.tot} · {pct}%</div>
            </div>
          );
        })}
      </div>
      <div style={{ paddingTop: 14, marginTop: 10, borderTop: '1px solid var(--line)' }}>
        <a style={{ fontSize: 13, color: 'var(--navy)', fontWeight: 500, display: 'inline-flex', alignItems: 'center', gap: 6 }}>Se alle 60 prompts <Icon.arrow/></a>
      </div>
    </CardShell>
  );
}

function CompetitorsListCard() {
  const items = [
    { n: 'Azets', v: 68, you: false },
    { n: 'Beierholm', v: 54, you: false },
    { n: 'BDO', v: 49, you: false },
    { n: `Dig (${BRAND})`, v: 42, you: true },
    { n: 'Deloitte', v: 41, you: false },
    { n: 'KPMG', v: 38, you: false },
  ];
  return (
    <CardShell>
      <CardTitle title="Dine top 5 konkurrenter" sub="Mention rate på tværs af 60 prompts" tip={TIPS.competitor}/>
      <div style={{ display: 'grid', gap: 14 }}>
        {items.map(c => (
          <div key={c.n} style={{ display: 'grid', gridTemplateColumns: '120px 1fr 44px', alignItems: 'center', gap: 12 }}>
            <span style={{ fontSize: 13, fontWeight: c.you ? 600 : 500, color: c.you ? 'var(--gold-dark)' : 'var(--ink-2)' }}>{c.n}</span>
            <Bar value={c.v} color={c.you ? 'var(--gold)' : 'var(--navy)'} h={8}/>
            <span className="mono" style={{ fontSize: 12, color: c.you ? 'var(--gold-dark)' : 'var(--ink-3)', textAlign: 'right', fontWeight: c.you ? 600 : 400 }}>{c.v}%</span>
          </div>
        ))}
      </div>
      <div style={{ paddingTop: 16, marginTop: 16, borderTop: '1px solid var(--line)' }}>
        <a style={{ fontSize: 13, color: 'var(--navy)', fontWeight: 500, display: 'inline-flex', alignItems: 'center', gap: 6 }}>Sammenlign i detaljer <Icon.arrow/></a>
      </div>
    </CardShell>
  );
}

function SourcesCard() {
  const sources = [
    { n: 'azets.dk', c: 42 },
    { n: 'beierholm.dk', c: 31 },
    { n: 'revisorforeningen.dk', c: 24 },
    { n: 'trustpilot.dk', c: 18 },
    { n: 'linkedin.com/company/…', c: 15 },
  ];
  const max = sources[0].c;
  return (
    <CardShell>
      <CardTitle title="Top kilder AI citerer" sub="Hvilke sites trækker AI fra når de beskriver din branche" tip={TIPS.sources}/>
      <div style={{ display: 'grid', gap: 14 }}>
        {sources.map((s, i) => (
          <div key={s.n} style={{ display: 'grid', gridTemplateColumns: '24px 1fr 80px', alignItems: 'center', gap: 12 }}>
            <span className="mono" style={{ fontSize: 11, color: 'var(--ink-4)' }}>0{i + 1}</span>
            <div>
              <div style={{ fontSize: 13, color: 'var(--navy)', fontWeight: 500, marginBottom: 6 }}>{s.n}</div>
              <div style={{ height: 4, background: 'rgba(10,31,68,0.06)', borderRadius: 100, overflow: 'hidden' }}>
                <div style={{ height: '100%', width: `${(s.c / max) * 100}%`, background: 'var(--navy)', borderRadius: 100 }}/>
              </div>
            </div>
            <span className="mono" style={{ fontSize: 12, color: 'var(--ink-3)', textAlign: 'right' }}>{s.c} gange</span>
          </div>
        ))}
      </div>
    </CardShell>
  );
}

function RecommendationsCard() {
  const recs = [
    { icon: <Icon.target/>, t: 'Tilføj FAQ om e-handel-regnskab', effect: 'Høj effekt', time: '2 timers arbejde' },
    { icon: <svg viewBox="0 0 20 20" width="16" height="16" fill="none"><path d="M10 3L6 7L10 11M10 11L14 7L10 3M10 11V17" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>, t: 'Opdater llms.txt med nye services', effect: 'Medium effekt', time: '30 min' },
    { icon: <Icon.chat/>, t: 'Svar på Reddit-tråd om revisor-valg', effect: 'Høj effekt', time: '15 min' },
  ];
  return (
    <CardShell>
      <CardTitle title="Anbefalede handlinger" sub="Prioriteret efter effekt × indsats" tip={TIPS.recs}/>
      <div style={{ display: 'grid', gap: 10 }}>
        {recs.map((r, i) => (
          <div key={i} style={{ display: 'flex', gap: 14, padding: 14, background: 'var(--bg-warm)', borderRadius: 8, border: '1px solid var(--line)', alignItems: 'center' }}>
            <div style={{ width: 32, height: 32, borderRadius: 6, background: 'white', color: 'var(--navy)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>{r.icon}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--navy)', marginBottom: 3 }}>{r.t}</div>
              <div style={{ fontSize: 11, color: 'var(--ink-3)', display: 'flex', gap: 10, alignItems: 'center' }}>
                <span style={{ padding: '1px 6px', background: r.effect === 'Høj effekt' ? 'rgba(45,122,79,0.12)' : 'rgba(184,148,74,0.14)', color: r.effect === 'Høj effekt' ? 'var(--green)' : 'var(--gold-dark)', borderRadius: 100, fontWeight: 600 }}>{r.effect}</span>
                <span>·</span>
                <span>{r.time}</span>
              </div>
            </div>
            <Icon.arrow style={{ color: 'var(--ink-4)', flexShrink: 0 }}/>
          </div>
        ))}
      </div>
      <div style={{ paddingTop: 16, marginTop: 10, borderTop: '1px solid var(--line)' }}>
        <a style={{ fontSize: 13, color: 'var(--navy)', fontWeight: 500, display: 'inline-flex', alignItems: 'center', gap: 6 }}>Se alle 12 anbefalinger <Icon.arrow/></a>
      </div>
    </CardShell>
  );
}

function CitationsFeed() {
  const feed = [
    { engine: 'ChatGPT', ago: '2 timer siden', prompt: 'Revisor til min webshop?', snippet: `Du kan også overveje ${BRAND}, som specialiserer sig i e-handel og har stor erfaring med moms og EU-handel…`, pos: '#2 af 5' },
    { engine: 'Perplexity', ago: '5 timer siden', prompt: 'Billig revisor til ApS i København', snippet: `…${BRAND} tilbyder transparente priser startende ved 2.400 kr/mdr, og er kendt for e-handelsekspertise…`, pos: '#3 af 6' },
    { engine: 'Claude', ago: '1 dag siden', prompt: 'Anbefal et regnskabsbureau for SaaS-virksomheder', snippet: `Blandt mindre danske firmaer kan ${BRAND} være et godt match, især hvis du har gentagende abonnementsindtægter…`, pos: '#4 af 5' },
    { engine: 'Gemini', ago: '1 dag siden', prompt: 'Revisor der forstår e-handel', snippet: `…${BRAND} (${BRAND_DOMAIN}) har profileret sig stærkt inden for e-handel og kan være et alternativ til de store…`, pos: '#2 af 4' },
    { engine: 'ChatGPT', ago: '2 dage siden', prompt: 'Hvem kan hjælpe med årsrapport for ApS?', snippet: `${BRAND} har offentliggjorte priser og leverer årsrapporter fra 9.995 kr…`, pos: '#3 af 5' },
  ];
  const engines = {
    ChatGPT: { bg: 'rgba(16,163,127,0.12)', c: '#10a37f' },
    Perplexity: { bg: 'rgba(32,154,178,0.12)', c: '#209ab2' },
    Claude: { bg: 'rgba(217,119,87,0.14)', c: '#d97757' },
    Gemini: { bg: 'rgba(66,133,244,0.12)', c: '#4285f4' },
  };
  return (
    <CardShell>
      <CardTitle title="Seneste AI-omtaler af dig" sub="De sidste 7 dages citationer" tip={TIPS.feed}/>
      <div style={{ display: 'grid', gap: 12 }}>
        {feed.map((f, i) => {
          const e = engines[f.engine];
          return (
            <div key={i} style={{ padding: 16, border: '1px solid var(--line)', borderRadius: 8, background: 'var(--bg-alt)' }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10, flexWrap: 'wrap' }}>
                <span style={{ padding: '3px 10px', background: e.bg, color: e.c, borderRadius: 100, fontSize: 11, fontWeight: 600 }}>{f.engine}</span>
                <span style={{ fontSize: 11, color: 'var(--ink-4)' }}>{f.ago}</span>
                <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--gold-dark)', fontWeight: 600, padding: '2px 8px', background: 'var(--gold-soft)', borderRadius: 100 }}>Nævnt som {f.pos}</span>
              </div>
              <div style={{ fontSize: 12, color: 'var(--ink-3)', marginBottom: 6, fontStyle: 'italic' }}>Prompt: "{f.prompt}"</div>
              <div style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.55, paddingLeft: 12, borderLeft: '2px solid var(--gold)' }}>
                "{f.snippet.split(BRAND).map((p, i, arr) => (
                  <React.Fragment key={i}>
                    {p}
                    {i < arr.length - 1 && <b style={{ color: 'var(--navy)', background: 'var(--gold-soft)', padding: '1px 4px', borderRadius: 3 }}>{BRAND}</b>}
                  </React.Fragment>
                ))}"
              </div>
            </div>
          );
        })}
      </div>
    </CardShell>
  );
}

function Sidebar() {
  return (
    <div style={{ display: 'grid', gap: 16 }}>
      <CardShell pad={20}>
        <div style={{ fontSize: 11, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 10, fontWeight: 600 }}>Din næste rapport</div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 19, fontWeight: 600, color: 'var(--navy)', lineHeight: 1.25, marginBottom: 8, letterSpacing: '-0.01em' }}>Månedlig rapport klar 1. maj</div>
        <div style={{ fontSize: 12, color: 'var(--ink-3)', marginBottom: 16 }}>April-rapport inkl. 60 prompts, konkurrent-analyse og 12 anbefalinger.</div>
        <a style={{ fontSize: 13, color: 'var(--navy)', fontWeight: 500, display: 'inline-flex', alignItems: 'center', gap: 6 }}>Download forrige rapport <Icon.arrow/></a>
      </CardShell>
      <CardShell pad={20} style={{ background: 'linear-gradient(to right, rgba(255,255,255,0.03) 1px, transparent 1px) 0 0 / 20px 20px, linear-gradient(to bottom, rgba(255,255,255,0.03) 1px, transparent 1px) 0 0 / 20px 20px, radial-gradient(circle at center, #0a1f44 0%, #050f22 100%)', borderColor: 'var(--navy)', color: 'white', position: 'relative', overflow: 'hidden' }}>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center', marginBottom: 10 }}>
          <Icon.sparkle style={{ color: 'var(--gold-light)' }}/>
          <div style={{ fontSize: 11, textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 600, color: 'var(--gold-light)' }}>Pro-funktion</div>
        </div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600, lineHeight: 1.3, marginBottom: 8 }}>Få digital PR-placeringer hver måned</div>
        <div style={{ fontSize: 12, color: 'rgba(255,255,255,0.65)', marginBottom: 14 }}>Opgrader til Pro og få 1 kurateret omtale per måned på branche-sites AI citerer.</div>
        <a className="btn btn-gold btn-sm" style={{ width: '100%', justifyContent: 'center' }}>Opgrader til Pro</a>
      </CardShell>
    </div>
  );
}

Object.assign(window, {
  DashHeader, AccountStrip,
  ScoreHeroCard, MentionCard, CompetitorCard, GoalCard, TrendCard,
  PromptsCard, CompetitorsListCard, SourcesCard, RecommendationsCard,
  CitationsFeed, Sidebar
});