// Landing page sections for GEOKlar
const { useState: useStateL } = React;

const H1_TEXT = 'Bliv valgt af AI.';
const HERO_BG = "linear-gradient(to right, rgba(10,31,68,0.03) 1px, transparent 1px) 0 0 / 20px 20px, linear-gradient(to bottom, rgba(10,31,68,0.03) 1px, transparent 1px) 0 0 / 20px 20px, radial-gradient(ellipse at center, #f6f5f0 0%, #ebe7da 100%)";

// ── BranchLeaderboard ────────────────────────────────────────────────
function BranchLeaderboard() {
  const competitors = [
    { rank: 1, label: 'KONKURRENT #1', value: '847', barW: '100%', rankBg: '#1a3a7a' },
    { rank: 2, label: 'KONKURRENT #2', value: '612', barW: '72%',  rankBg: '#1a3a7a' },
    { rank: 3, label: 'KONKURRENT #3', value: '498', barW: '59%',  rankBg: '#1a3a7a' },
  ];
  return (
    <div style={{
      background: 'linear-gradient(180deg, #ffffff 0%, #fafaf7 100%)',
      border: '0.5px solid rgba(10,31,68,0.12)',
      borderRadius: 14,
      padding: 34,
      boxShadow: '0 10px 30px rgba(10,31,68,0.08), 0 2px 6px rgba(10,31,68,0.04)',
    }}>
      {/* Header row */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 28 }}>
        <div>
          <div style={{ fontSize: 14, color: '#8a6f2d', fontWeight: 500, letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 3 }}>Din branche på AI</div>
          <div style={{ fontSize: 15, color: '#666' }}>Synlighed sidste 30 dage · 4 AI-modeller</div>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 5, background: 'rgba(16,163,127,0.1)', borderRadius: 100, padding: '4px 8px' }}>
          <div style={{ width: 6, height: 6, borderRadius: '50%', background: '#10a37f', flexShrink: 0 }}/>
          <span style={{ fontSize: 10, color: '#0a7d5f', fontWeight: 500, letterSpacing: '0.04em', textTransform: 'uppercase' }}>Live</span>
        </div>
      </div>

      {/* Competitor rows */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
        {competitors.map(c => (
          <div key={c.rank}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 5 }}>
              <div style={{ width: 28, height: 28, borderRadius: '50%', background: c.rankBg, color: 'white', fontSize: 13, fontWeight: 500, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, fontVariantNumeric: 'tabular-nums' }}>{c.rank}</div>
              <span style={{ flex: 1, fontSize: 15, color: '#5f5e5a', fontWeight: 500, letterSpacing: '0.04em' }}>{c.label}</span>
              <span style={{ fontSize: 16, color: '#0a1f44', fontWeight: 500, fontVariantNumeric: 'tabular-nums' }}>{c.value}</span>
            </div>
            <div style={{ height: 10, background: '#f0ede2', borderRadius: 100, overflow: 'hidden' }}>
              <div style={{ height: '100%', width: c.barW, background: '#1a3a7a', borderRadius: 100 }}/>
            </div>
          </div>
        ))}

        {/* Divider */}
        <div style={{ height: 0.5, background: 'rgba(10,31,68,0.1)', margin: '12px 0' }}/>

        {/* You row */}
        <div style={{ padding: '18px 20px', background: 'rgba(184,148,74,0.08)', border: '1px solid rgba(184,148,74,0.3)', borderRadius: 10, margin: '0 -6px' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 9, marginBottom: 5 }}>
            <div style={{ width: 30, height: 30, borderRadius: '50%', background: '#b8944a', color: 'white', fontSize: 14, fontWeight: 500, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>?</div>
            <span style={{ flex: 1, fontSize: 16, color: '#8a6f2d', fontWeight: 500 }}>Dit firma</span>
            <span style={{ fontSize: 17, color: '#8a6f2d', fontWeight: 500, fontVariantNumeric: 'tabular-nums' }}>23</span>
          </div>
          <div style={{ height: 10, background: '#f0ede2', borderRadius: 100, overflow: 'hidden' }}>
            <div style={{ height: '100%', width: '3%', background: '#b8944a', borderRadius: 100 }}/>
          </div>
        </div>
      </div>

      {/* Footer */}
      <div style={{ marginTop: 26, display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{ width: 18, height: 18, borderRadius: '50%', background: 'rgba(184,148,74,0.2)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
          <span style={{ fontSize: 12, color: '#8a6f2d', fontWeight: 500, lineHeight: 1 }}>↑</span>
        </div>
        <span style={{ fontSize: 15, color: '#0a1f44', fontWeight: 500, lineHeight: 1.4 }}>Vi rykker dig op ad listen. Gratis analyse. 100 prompts. 4 AI-modeller.</span>
      </div>
    </div>
  );
}

function Hero() {
  const [tilt, setTilt] = React.useState({ x: 0, y: 0, hovering: false });
  const [typed, setTyped] = React.useState('');
  const [showCursor, setShowCursor] = React.useState(true);
  const canHover = window.matchMedia('(hover: hover)').matches;

  React.useEffect(() => {
    let i = 0;
    const id = setInterval(() => {
      i += 1;
      setTyped(H1_TEXT.slice(0, i));
      if (i >= H1_TEXT.length) {
        clearInterval(id);
      }
    }, 50);
    return () => clearInterval(id);
  }, []);

  const handleMouseMove = (e) => {
    if (!canHover) return;
    const rect = e.currentTarget.getBoundingClientRect();
    const px = (e.clientX - rect.left) / rect.width;
    const py = (e.clientY - rect.top) / rect.height;
    setTilt({ x: (py - 0.5) * -16, y: (px - 0.5) * 16, hovering: true });
  };

  const handleMouseLeave = () => {
    setTilt({ x: 0, y: 0, hovering: false });
  };

  const dashTransform = `rotateY(${-8 + tilt.y}deg) rotateX(${4 + tilt.x}deg) rotate(1.5deg)${tilt.hovering ? ' translateY(-4px)' : ''}`;

  return (
    <>
    <style>{`@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} } `}</style>
    <section
      style={{
        padding: '80px 0 96px',
        minHeight: 640,
        background: HERO_BG,
        position: 'relative',
        overflow: 'hidden',
      }}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleMouseLeave}
    >
      <div className="wrap-wide" style={{ position: 'relative', zIndex: 1 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 64, alignItems: 'flex-start' }}>
          <div>
            <div className="badge badge-dot" style={{ marginBottom: 34 }}>
              <span>Ny · Generativ søgemaskine­optimering</span>
            </div>
            <h1 className="h1" style={{
              marginBottom: 34,
              fontFamily: "'Inter', -apple-system, sans-serif",
              fontWeight: 600,
              fontSize: 'clamp(42px, 5.2vw, 60px)',
              letterSpacing: '-0.035em',
              lineHeight: 1.05,
              paddingBottom: '0.1em',
              background: 'linear-gradient(to bottom, #1e3a6d, #0a1f44)',
              WebkitBackgroundClip: 'text',
              WebkitTextFillColor: 'transparent',
              backgroundClip: 'text',
            }}>
              {typed}{showCursor && <span style={{
                display: 'inline-block',
                width: '3px',
                height: '0.8em',
                background: '#0a1f44',
                marginLeft: '2px',
                verticalAlign: 'baseline',
                WebkitTextFillColor: '#0a1f44',
                animation: 'blink 1s step-end infinite',
              }}/>}
            </h1>
            <p className="lede" style={{ marginBottom: 44 }}>
              Din næste kunde spørger ChatGPT — ikke Google.<br/>Vi sørger for, at AI vælger dig.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a href="#audit" className="btn btn-gold btn-lg">Få din gratis GEO-analyse <Icon.arrow/></a>
              <a href="eksempel-dashboard.html" className="btn btn-outline btn-lg" style={{ background: '#ffffff', color: '#0a1f44', borderColor: '#0a1f44' }}>Se eksempel-dashboard</a>
            </div>
            <div style={{ marginTop: 53, display: 'flex', alignItems: 'center', gap: 24, fontSize: 13, color: 'var(--ink-3)' }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><Icon.check style={{ color: 'var(--green)' }}/> 5 min til rapport</span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><Icon.check style={{ color: 'var(--green)' }}/> Ingen kreditkort</span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><Icon.check style={{ color: 'var(--green)' }}/> Ingen binding</span>
            </div>
          </div>
          <div style={{ perspective: 2000, marginTop: -40, transform: 'scale(0.93)', transformOrigin: 'center center' }}>
            <a
              href="eksempel-dashboard.html"
              aria-label="Se eksempel-dashboard"
              style={{
                display: 'block',
                transform: dashTransform,
                transition: 'transform 0.15s ease-out',
                transformStyle: 'preserve-3d',
                cursor: 'pointer',
                textDecoration: 'none',
              }}
            >
              <BranchLeaderboard/>
            </a>
          </div>
        </div>
      </div>
    </section>
    </>
  );
}

function SocialProof() {
  const items = ['Nyligt lanceret', 'Baseret i Danmark', 'GDPR-compliant'];
  return (
    <section style={{ padding: '36px 0', background: 'var(--bg)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="wrap">
        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gap: 32, flexWrap: 'wrap' }}>
          {items.map((t, i) => (
            <React.Fragment key={t}>
              <span style={{ fontSize: 13, color: 'var(--ink-3)', letterSpacing: '0.04em', display: 'inline-flex', alignItems: 'center', gap: 10, fontWeight: 500 }}>
                <Icon.check style={{ color: 'var(--green)' }}/> {t}
              </span>
              {i < items.length - 1 && <span style={{ color: 'var(--ink-4)', opacity: 0.4 }}>·</span>}
            </React.Fragment>
          ))}
        </div>
      </div>
    </section>
  );
}

function Problem() {
  const stats = [
    { n: '800M', l: 'ugentlige brugere på ChatGPT i 2026', s: 'Kilde: OpenAI, 2026' },
    { n: '73%', l: 'af iværksættere bruger AI til at finde leverandører', s: 'Kilde: Gartner, 2025' },
  ];
  return (
    <section className="section" style={{ background: 'var(--bg-warm)' }}>
      <div className="wrap-wide">
        <div className="section-head" style={{ maxWidth: 'none' }}>
          <span className="eyebrow">Problemet</span>
          <h2 className="h2" style={{ textWrap: 'unset' }}>Dine kunder spørger ikke længere Google.<br/>De spørger ChatGPT.</h2>
          <p className="lede" style={{ margin: '0 auto' }}>AI-søgning overtager discovery-fasen. Hvis du ikke nævnes, eksisterer du ikke.</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24, maxWidth: 840, margin: '0 auto' }}>
          {stats.map(s => (
            <div key={s.n} className="card" style={{ padding: 40, background: 'white', borderColor: 'var(--line)' }}>
              <div style={{
                fontFamily: 'var(--font-display)',
                fontSize: 52, fontWeight: 600,
                color: 'var(--navy)', letterSpacing: '-0.02em',
                lineHeight: 1, marginBottom: 16,
              }}>{s.n}</div>
              <div style={{ fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.45, marginBottom: 16 }}>{s.l}</div>
              <div className="mono" style={{ color: 'var(--ink-4)', fontSize: 11 }}>{s.s}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function StepVis01() {
  return (
    <div style={{ background: 'var(--bg-alt)', border: '1px solid var(--line)', borderRadius: 10, padding: 14, marginTop: 20 }}>
      {['ChatGPT', 'Claude', 'Perplexity'].map((p, i) => (
        <div key={p} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          padding: '6px 0', borderBottom: i < 2 ? '1px solid var(--line)' : 'none' }}>
          <span style={{ fontSize: 12, color: 'var(--ink-2)', fontWeight: 500 }}>{p}</span>
          <span style={{ fontSize: 10, color: 'var(--green)', background: 'rgba(45,122,79,0.1)',
            padding: '2px 8px', borderRadius: 100, fontWeight: 600 }}>Analyseret ✓</span>
        </div>
      ))}
      <div style={{ marginTop: 10, display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <span style={{ fontSize: 11, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.06em' }}>Din score</span>
        <span style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 600, color: 'var(--navy)' }}>38<span style={{ fontSize: 12, color: 'var(--ink-4)', fontWeight: 400 }}>/100</span></span>
      </div>
    </div>
  );
}
function StepVis02() {
  const rows = [
    { badge: 'KRITISK', label: 'Ingen llms.txt fil',     bg: 'rgba(184,74,74,0.07)',  color: 'var(--red)' },
    { badge: 'HØJ',     label: 'Schema markup mangler',  bg: 'rgba(184,148,74,0.09)', color: 'var(--gold-dark)' },
    { badge: 'MEDIUM',  label: 'FAQ ikke AI-optimeret',  bg: 'rgba(10,31,68,0.05)',   color: 'var(--navy-400)' },
  ];
  return (
    <div style={{ display: 'grid', gap: 6, marginTop: 20 }}>
      {rows.map(r => (
        <div key={r.badge} style={{ background: r.bg, borderRadius: 8, padding: '7px 12px', display: 'flex', alignItems: 'center', gap: 8 }}>
          <span style={{ fontSize: 10, fontWeight: 700, color: r.color, letterSpacing: '0.05em', flexShrink: 0, minWidth: 52 }}>{r.badge}</span>
          <span style={{ fontSize: 12, color: 'var(--ink-2)' }}>{r.label}</span>
        </div>
      ))}
    </div>
  );
}
function StepVis03() {
  return (
    <div style={{ background: 'var(--bg-alt)', border: '1px solid var(--line)', borderRadius: 10,
      padding: '12px 16px', marginTop: 20, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
      <div style={{ textAlign: 'center' }}>
        <div style={{ fontSize: 10, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 2 }}>Før</div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 600, color: 'var(--ink-3)' }}>22</div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 2 }}>
        <Icon.arrow style={{ color: 'var(--gold)', width: 18, height: 18 }}/>
        <span style={{ fontSize: 11, color: 'var(--green)', fontWeight: 700 }}>+43</span>
      </div>
      <div style={{ textAlign: 'center' }}>
        <div style={{ fontSize: 10, color: 'var(--ink-4)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 2 }}>Efter</div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 26, fontWeight: 600, color: 'var(--navy)' }}>65</div>
      </div>
    </div>
  );
}

function HowItWorks() {
  const steps = [
    {
      n: '01',
      t: 'Vi analyserer din synlighed',
      d: '30–120 danske prompts køres ugentligt på tværs af ChatGPT, Claude, Perplexity og Gemini. Vi måler hvor ofte du nævnes vs. dine konkurrenter.',
      vis: <StepVis01/>,
    },
    {
      n: '02',
      t: 'Vi lokaliserer huller og muligheder',
      d: 'Du får en detaljeret rapport over hvor du halter, hvad konkurrenterne gør anderledes, og hvor de hurtige gevinster ligger.',
      vis: <StepVis02/>,
    },
    {
      n: '03',
      t: 'Vi lukker gabet',
      d: 'Tekniske fixes (schema, llms.txt, FAQ), strategisk indhold, og digital PR-placeringer der rent faktisk flytter din synlighed.',
      vis: <StepVis03/>,
    },
  ];
  return (
    <section id="how" className="section" style={{ background: HERO_BG, position: 'relative', overflow: 'hidden' }}>
      <div className="wrap" style={{ position: 'relative', zIndex: 1 }}>
        <div className="section-head">
          <span className="eyebrow">Sådan virker det</span>
          <h2 className="h2">Fra analyse til målbar synligheds­løft på 90 dage</h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {steps.map(s => (
            <div key={s.n} className="card" style={{ padding: 36, position: 'relative', overflow: 'hidden' }}>
              <div style={{
                width: 44, height: 44, borderRadius: 50,
                background: 'var(--navy)', color: 'white',
                display: 'grid', placeItems: 'center',
                fontFamily: 'var(--font-display)', fontSize: 15, fontWeight: 700,
                letterSpacing: '0.02em', marginBottom: 20,
              }}>{s.n}</div>
              <h3 className="h3" style={{ marginBottom: 12, fontSize: 20 }}>{s.t}</h3>
              <p style={{ color: 'var(--ink-2)', fontSize: 15 }}>{s.d}</p>
              {s.vis}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Full dashboard preview (larger mock)
function DashboardFull() {
  return (
    <div style={{ background: 'white', borderRadius: 12, overflow: 'hidden', border: '1px solid rgba(10,31,68,0.08)', boxShadow: '0 24px 64px rgba(0,0,0,0.24)' }}>
      {/* chrome */}
      <div style={{ padding: '12px 16px', borderBottom: '1px solid #eee', display: 'flex', alignItems: 'center', gap: 6, background: '#fafaf7' }}>
        <div style={{ width: 11, height: 11, borderRadius: 50, background: '#e8e4d8' }}/>
        <div style={{ width: 11, height: 11, borderRadius: 50, background: '#e8e4d8' }}/>
        <div style={{ width: 11, height: 11, borderRadius: 50, background: '#e8e4d8' }}/>
        <div style={{ margin: '0 auto', fontSize: 12, color: 'var(--ink-4)' }} className="mono">app.GEOKlar.dk/dashboard</div>
      </div>
      {/* top nav */}
      <div style={{ display: 'flex', alignItems: 'center', padding: '14px 24px', borderBottom: '1px solid var(--line)', gap: 28 }}>
        <Logo/>
        <nav style={{ display: 'flex', gap: 4, marginLeft: 16 }}>
          {['Oversigt', 'Prompts', 'Konkurrenter', 'Indhold', 'Rapporter'].map((n, i) => (
            <a key={n} style={{
              padding: '6px 12px', 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 : 400,
            }}>{n}</a>
          ))}
        </nav>
        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 10, color: 'var(--ink-3)' }}>
          <Icon.search/><Icon.bell/>
          <div style={{ width: 28, height: 28, borderRadius: 50, background: 'var(--gold-soft)', color: 'var(--gold-dark)', display: 'grid', placeItems: 'center', fontSize: 11, fontWeight: 600 }}>ER</div>
        </div>
      </div>
      <div style={{ padding: 24, display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 20 }}>
        {/* Left column */}
        <div style={{ display: 'grid', gap: 16 }}>
          {/* score row */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            <div style={{ background: 'var(--bg-warm)', borderRadius: 10, padding: 20, border: '1px solid var(--line)' }}>
              <div style={{ fontSize: 11, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 8, display: 'flex', alignItems: 'center' }}>Synligheds-score<InfoTip 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={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 40, fontWeight: 600, color: 'var(--navy)', letterSpacing: '-0.02em', lineHeight: 1 }}>67</div>
                <div style={{ fontSize: 14, color: 'var(--ink-4)' }}>/100</div>
              </div>
              <div style={{ marginTop: 8, fontSize: 11, color: 'var(--green)', display: 'flex', alignItems: 'center', gap: 4 }}>
                <Icon.arrowUp/> +15 siden sidste uge
              </div>
              <div style={{ marginTop: 12 }}>
                <Sparkline data={[30,34,38,41,44,48,52,55,58,61,64,67]} w={260} h={40}/>
              </div>
            </div>
            <div style={{ background: 'white', borderRadius: 10, padding: 20, border: '1px solid var(--line)' }}>
              <div style={{ fontSize: 11, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.08em', marginBottom: 8, display: 'flex', alignItems: 'center' }}>Spontan omtale<InfoTip text="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."/></div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 30, fontWeight: 600, color: 'var(--navy)', letterSpacing: '-0.02em' }}>189 <span style={{ color: 'var(--ink-4)', fontSize: 18 }}>/ 300</span></div>
              <div style={{ fontSize: 12, color: 'var(--ink-3)', marginBottom: 12 }}>Prompts hvor du nævnes</div>
              <Bar value={189} max={300}/>
              <div style={{ marginTop: 10, fontSize: 11, color: 'var(--green)' }}>↑ +31 siden sidste uge</div>
            </div>
          </div>
          {/* trend */}
          <div style={{ background: 'white', borderRadius: 10, padding: 20, border: '1px solid var(--line)' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
              <div>
                <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--navy)', display: 'flex', alignItems: 'center' }}>Synligheds-score over tid<InfoTip text="Udvikling i din synligheds-score over tid sammenlignet med branche-gennemsnit. Bruges til at se om indsatser rykker tallet i den rigtige retning."/></div>
                <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>Sidste 12 uger</div>
              </div>
              <div style={{ display: 'flex', gap: 4, fontSize: 11 }}>
                {['4u', '12u', '6m', '1å'].map((p, i) => (
                  <span key={p} style={{ padding: '4px 10px', borderRadius: 4, background: i === 1 ? 'var(--navy)' : 'transparent', color: i === 1 ? 'white' : 'var(--ink-3)' }}>{p}</span>
                ))}
              </div>
            </div>
            <TrendChart w={520} h={180}/>
            <div style={{ display: 'flex', gap: 16, fontSize: 11, color: 'var(--ink-3)', marginTop: 4 }}>
              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><span style={{ width: 12, height: 2, background: 'var(--gold)' }}/> Dig</span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 6 }}><span style={{ width: 12, height: 2, background: '#9ca6bd', backgroundImage: 'repeating-linear-gradient(90deg, #9ca6bd 0 3px, transparent 3px 5px)' }}/> Branche-gennemsnit</span>
            </div>
          </div>
        </div>
        {/* right column */}
        <div style={{ background: 'white', borderRadius: 10, padding: 20, border: '1px solid var(--line)' }}>
          <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--navy)', marginBottom: 4, display: 'flex', alignItems: 'center' }}>Top konkurrenter<InfoTip 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>
          <div style={{ fontSize: 11, color: 'var(--ink-3)', marginBottom: 16 }}>Nævnt i % af prompts</div>
          <div style={{ display: 'grid', gap: 12 }}>
            {[
              { n: 'Azets', v: 68, you: false },
              { n: 'Beierholm', v: 63, you: false },
              { n: 'Dig (Eksempel Revision)', v: 61, you: true },
              { n: 'BDO', v: 49, you: false },
              { n: 'Deloitte', v: 41, you: false },
              { n: 'KPMG', v: 38, you: false },
            ].map(c => (
              <div key={c.n} style={{ display: 'grid', gridTemplateColumns: '100px 1fr 36px', alignItems: 'center', gap: 10 }}>
                <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)'} h={7}/>
                <span className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', textAlign: 'right' }}>{c.v}%</span>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 20, paddingTop: 16, borderTop: '1px solid var(--line)' }}>
            <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--navy)', marginBottom: 10, display: 'flex', alignItems: 'center' }}>Seneste AI-omtale<InfoTip 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={{ 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 }}>ChatGPT · 12 min siden</div>
              <div style={{ fontSize: 12, color: 'var(--ink-2)', lineHeight: 1.45 }}>
                "…Jeg vil anbefale <b style={{ color: 'var(--navy)' }}>Eksempel Revision</b>, som har stor erfaring med e-handel og ApS…"
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function DashboardPreview() {
  const feats = [
    { t: 'Live scoring', d: 'Din synligheds-score opdateres dagligt' },
    { t: 'Prompt-tracking', d: 'Se præcis hvilke spørgsmål AI-modeller stiller om din branche' },
    { t: 'Konkurrent-sammenligning', d: 'Mål dig mod Azets, Beierholm, BDO og lokale konkurrenter' },
    { t: 'Kilde-sporing', d: 'Find ud af hvilke hjemmesider AI bruger til at svare' },
  ];
  return (
    <section className="section bg-navy" style={{ paddingTop: 112, paddingBottom: 112 }}>
      <div className="wrap-wide">
        <div className="section-head" style={{ marginBottom: 48 }}>
          <span className="eyebrow" style={{ color: 'var(--gold-light)' }}>Dashboard</span>
          <h2 className="h2">Sådan ser dit dashboard ud.</h2>
          <p className="lede">Fuld transparens. Dine egne tal når din første analyse er klar.</p>
        </div>
        <DashboardFull/>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32, marginTop: 64 }}>
          {feats.map(f => (
            <div key={f.t}>
              <div style={{ width: 36, height: 36, borderRadius: 8, background: 'rgba(184,148,74,0.14)', color: 'var(--gold-light)', display: 'grid', placeItems: 'center', marginBottom: 16 }}>
                <Icon.sparkle/>
              </div>
              <div style={{ fontWeight: 600, color: 'white', fontSize: 15, marginBottom: 6 }}>{f.t}</div>
              <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.75)', lineHeight: 1.5 }}>{f.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PricingPreview() {
  const plans = [
    { name: 'Gratis analyse', price: '0 kr', per: 'én gang', free: true, cta: 'Få gratis rapport',
      tag: 'Den hurtigste måde at se din AI-synlighed',
      feats: ['25 prompts', '3 AI-platforme', '8-siders PDF'] },
    { name: 'Starter', price: 3495, per: 'per måned', cta: 'Kom i gang',
      tag: 'For små revisionsfirmaer og solo-revisorer',
      feats: ['30 prompts ugentligt', 'Live dashboard', 'Månedlig rapport'] },
    { name: 'Growth', price: 5995, per: 'per måned', cta: 'Kom i gang',
      tag: 'For voksende revisionsfirmaer der vil i gang',
      feats: ['60 prompts ugentligt', 'Alle 4 AI-platforme', 'Månedligt opkald'] },
    { name: 'Pro', price: 9495, per: 'per måned', popular: true, cta: 'Kom i gang',
      tag: 'For ambitiøse revisionsfirmaer der vil dominere',
      feats: ['120 prompts dagligt', '6 AI-platforme', 'Digital PR'] },
  ];
  return (
    <section className="section" style={{ background: HERO_BG, position: 'relative', overflow: 'hidden' }}>
      <div className="wrap-wide" style={{ position: 'relative', zIndex: 1 }}>
        <div className="section-head">
          <span className="eyebrow">Priser</span>
          <h2 className="h2">Gennemsigtig prisliste.</h2>
          <p className="lede">Fire niveauer. Samme dag opstart. Ingen binding.</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, alignItems: 'stretch' }}>
          {plans.map(p => (<PricingCard key={p.name} p={p}/>))}
        </div>
        <div style={{ textAlign: 'center', marginTop: 32 }}>
          <a href="priser.html" className="btn btn-outline">Se fuld prisliste <Icon.arrow/></a>
        </div>
      </div>
    </section>
  );
}

function OneOffPreview() {
  const items = [
    { key: 'schema', name: 'Schema markup',           price: 3995, d: 'Struktureret data så AI forstår din forretning bedre.',    detail: 'produkter/schema.html' },
    { key: 'faq',    name: 'FAQ-arkitektur',          price: 4995, d: '20 spørgsmål og svar bygget specifikt til AI-udtræk.', popular: true, detail: 'produkter/faq-arkitektur.html' },
  ];
  return (
    <section className="section bg-alt" style={{ paddingTop: 64, paddingBottom: 64 }}>
      <div className="wrap">
        <div className="section-head" style={{ marginBottom: 40 }}>
          <span className="eyebrow">Engangsprodukter</span>
          <h2 className="h2">Kom i gang uden binding.</h2>
          <p className="lede" style={{ margin: '0 auto' }}>Ikke klar til et abonnement? Køb enkeltstående services — så ofte du har brug for dem.</p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
          {items.map(i => (
            <div key={i.key} style={{
              background: i.popular ? 'var(--bg-warm)' : 'white',
              border: i.popular ? '1.5px solid var(--gold)' : '1px solid var(--line)',
              borderRadius: 12,
              padding: 24,
              position: 'relative',
              display: 'flex',
              flexDirection: 'column',
            }}>
              {i.popular && (
                <div style={{
                  position: 'absolute', top: -11, right: 20,
                  background: 'var(--gold)', color: 'white',
                  padding: '4px 10px', borderRadius: 100,
                  fontSize: 11, fontWeight: 600, letterSpacing: '0.02em',
                }}>Mest populær</div>
              )}
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 17, fontWeight: 600, color: 'var(--navy)', marginBottom: 6, letterSpacing: '-0.01em' }}>{i.name}</div>
              <div style={{ fontSize: 11, fontWeight: 500, color: 'var(--ink-4)', marginBottom: 10, textTransform: 'uppercase', letterSpacing: '0.08em' }}>Engangsbetaling</div>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 600, color: 'var(--navy)', letterSpacing: '-0.02em', lineHeight: 1, marginBottom: 12 }}>{i.price.toLocaleString('da-DK')} kr</div>
              <div style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.5, marginBottom: 10, flex: 1 }}>{i.d}</div>
              <a href={i.detail} style={{ fontSize: 13, color: 'var(--navy)', textDecoration: 'underline', marginBottom: 14, display: 'inline-block' }}>Se detaljer →</a>
              <a href={`checkout.html?tier=${i.key}`} className={i.popular ? 'btn btn-gold' : 'btn btn-outline'} style={{ justifyContent: 'center' }}>Bestil</a>
            </div>
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: 32 }}>
          <a href="priser.html#engangsprodukter" className="btn btn-outline">Se alle engangsprodukter <Icon.arrow/></a>
        </div>
      </div>
    </section>
  );
}

/* Cases() archived — restore to /cases or landing once real case studies exist. */

function InlineAudit() {
  const [url, setUrl] = useStateL('');
  const [email, setEmail] = useStateL('');
  const [submitted, setSubmitted] = useStateL(false);
  return (
    <section id="audit" className="section-sm">
      <div className="wrap">
        <div style={{
          background: 'white',
          border: '1.5px solid var(--gold)',
          borderRadius: 16,
          padding: '56px 64px',
          display: 'grid',
          gridTemplateColumns: '1fr 1.1fr',
          gap: 48,
          alignItems: 'center',
          boxShadow: '0 8px 24px rgba(184,148,74,0.08)',
        }}>
          <div>
            <span className="eyebrow">Gratis analyse</span>
            <h2 className="h2" style={{ marginTop: 12, marginBottom: 16, fontSize: 34 }}>Klar til at se din egen synlighed?</h2>
            <p style={{ color: 'var(--ink-2)', fontSize: 16 }}>Gratis analyse. Inden for 1 arbejdsdag. Ingen kreditkort.</p>
          </div>
          <div>
            {!submitted ? (
              <form onSubmit={e => { e.preventDefault(); window.location.href = 'tak.html'; }} style={{ display: 'grid', gap: 12 }}>
                <label style={{ fontSize: 12, color: 'var(--ink-3)', fontWeight: 500 }}>
                  Din hjemmeside
                  <input required value={url} onChange={e => setUrl(e.target.value)} placeholder="www.ditrevisionsfirma.dk" style={inputStyle}/>
                </label>
                <label style={{ fontSize: 12, color: 'var(--ink-3)', fontWeight: 500 }}>
                  E-mail
                  <input required type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="navn@firma.dk" style={inputStyle}/>
                </label>
                <button type="submit" className="btn btn-gold btn-lg" style={{ justifyContent: 'center', marginTop: 4 }}>Få min rapport <Icon.arrow/></button>
                <div style={{ fontSize: 12, color: 'var(--ink-3)', textAlign: 'center', marginTop: 4 }}>Vi sender rapporten inden for 1 arbejdsdag. Ingen forpligtelse.</div>
              </form>
            ) : (
              <div style={{ padding: 24, background: 'var(--bg-warm)', borderRadius: 10, textAlign: 'center' }}>
                <div style={{ width: 48, height: 48, borderRadius: 50, background: 'var(--green)', color: 'white', display: 'grid', placeItems: 'center', margin: '0 auto 12px' }}>
                  <Icon.check style={{ width: 24, height: 24 }}/>
                </div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, color: 'var(--navy)', fontWeight: 600 }}>Rapport på vej!</div>
                <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 6 }}>Vi sender den til {email} inden for 1 arbejdsdag.</div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}
const inputStyle = {
  display: 'block', width: '100%', marginTop: 6,
  padding: '14px 16px', fontSize: 15, color: 'var(--ink)',
  border: '1px solid var(--line-2)', borderRadius: 8, outline: 'none',
  background: 'white', fontFamily: 'inherit',
};

function FAQ() {
  const items = [
    { q: 'Hvad er GEO?', a: 'Generativ Engine Optimization (GEO) er optimering af dit digitale fodaftryk, så generative AI-modeller som ChatGPT, Claude, Perplexity og Gemini nævner dig, når brugere stiller relevante spørgsmål. Hvor SEO handler om at rangere højt i Google, handler GEO om at blive citeret direkte i AI-svaret.' },
    { q: 'Hvordan er det anderledes fra SEO?', a: 'SEO handler om at vises i Googles resultatside — brugeren klikker sig videre. GEO handler om at indgå i selve svaret, brugeren aldrig klikker videre fra. Det kræver anden teknik (llms.txt, schema, AI-venligt indhold) og andre KPI\'er (mention rate, citation share, response inclusion).' },
    { q: 'Virker det faktisk?', a: 'GEO virker ved at gøre dit firma mere synligt for de AI-modeller, som dine kunder bruger til at finde leverandører. Vi måler din nuværende synlighed, identificerer hullerne, og eksekverer tekniske og indholdsmæssige ændringer der flytter dig op i AI-svarene. Du ser måltallene i dit dashboard hver dag. Resultater afhænger af startpunkt, branche og konkurrence — vi lover indsats og transparens, ikke specifikke tal før vi har målt dit baseline.' },
    { q: 'Hvor lang tid tager det at se resultater?', a: 'Første målbare løft ses typisk efter 3–4 uger (tekniske fixes indekseres). Signifikant synligheds-løft efter 60–90 dage. Dominant position tager 4–6 måneder afhængigt af konkurrencefelt.' },
    { q: 'Hvilke AI-platforme dækker I?', a: 'Vi dækker ChatGPT, Claude, Perplexity og Gemini på alle abonnementer. Pro tilføjer Microsoft Copilot og Google AI Overviews.' },
    { q: 'Er I specialiseret i revisionsbranchen?', a: 'Ja. Vi arbejder udelukkende med revisorer. Vores prompts, konkurrentlister og benchmarks er bygget specifikt til revisionsbranchen.' },
    { q: 'Hvad koster det?', a: 'Fra 3.495 kr/mdr for Starter, 6.995 kr/mdr for Growth, 11.995 kr/mdr for Pro (mest populær). Gratis analyse før du beslutter. Se priser for fuld oversigt.' },
  ];
  const [open, setOpen] = useStateL(0);
  return (
    <section id="faq" className="section">
      <div className="wrap-narrow">
        <div className="section-head">
          <span className="eyebrow">FAQ</span>
          <h2 className="h2">Ofte stillede spørgsmål.</h2>
        </div>
        <div style={{ borderTop: '1px solid var(--line)' }}>
          {items.map((it, i) => (
            <div key={i} style={{ borderBottom: '1px solid var(--line)' }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{ width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '24px 0', textAlign: 'left' }}>
                <span style={{ fontFamily: 'var(--font-display)', fontSize: 19, fontWeight: 600, color: 'var(--navy)', letterSpacing: '-0.01em' }}>{it.q}</span>
                <span style={{ color: 'var(--ink-3)' }}>{open === i ? <Icon.minus/> : <Icon.plus/>}</span>
              </button>
              {open === i && (
                <div style={{ paddingBottom: 24, color: 'var(--ink-2)', fontSize: 15, lineHeight: 1.6, maxWidth: '64ch' }}>{it.a}</div>
              )}
            </div>
          ))}
        </div>
        <div style={{ textAlign: 'center', marginTop: 32 }}>
          <a href="faq.html" className="btn btn-outline">Se alle spørgsmål <Icon.arrow/></a>
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  return (
    <section className="bg-navy" style={{ padding: '112px 0' }}>
      <div className="wrap center">
        <h2 className="h2" style={{ marginBottom: 20, fontSize: 52 }}>Klar til at blive synlig i AI?</h2>
        <p className="lede" style={{ margin: '0 auto 36px' }}>1 arbejdsdag til din første rapport. Ingen kreditkort.</p>
        <div style={{ display: 'inline-flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center' }}>
          <a href="#audit" className="btn btn-gold btn-lg">Få gratis analyse <Icon.arrow/></a>
          <a href="priser.html" className="btn btn-outline-light btn-lg">Se priser</a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, SocialProof, Problem, HowItWorks, DashboardPreview, PricingPreview, OneOffPreview, InlineAudit, FAQ, FinalCTA });