// Pricing page
const { useState: useStateP } = React;

const WARM_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%)";

// ── PricingAnchorNav ─────────────────────────────────────────────────
function PricingAnchorNav() {
  const [active, setActive] = React.useState('abonnementer');
  const pills = [
    { label: 'Abonnementer',     href: 'abonnementer' },
    { label: 'Engangsprodukter',   href: 'engangsprodukter' },
    { label: 'Synlighedsniveauer',  href: 'synlighedsniveauer' },
    { label: 'Synligheds-løft',    href: 'synligheds-loft' },
    { label: 'Inklusion',        href: 'inklusion' },
    { label: 'Sammenligning',    href: 'sammenligning' },
    { label: 'FAQ',              href: 'faq' },
  ];

  React.useEffect(() => {
    const targets = pills.map(p => document.getElementById(p.href)).filter(Boolean);
    const obs = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) setActive(entry.target.id);
        });
      },
      { rootMargin: '-160px 0px -40% 0px', threshold: 0 }
    );
    targets.forEach(t => obs.observe(t));
    return () => obs.disconnect();
  }, []);

  const handleClick = (e, href) => {
    e.preventDefault();
    const el = document.getElementById(href);
    if (el) el.scrollIntoView({ behavior: 'smooth' });
  };

  return (
    <div style={{
      position: 'sticky', top: 68, zIndex: 40,
      background: 'rgba(246,245,240,0.85)',
      backdropFilter: 'blur(6px)',
      WebkitBackdropFilter: 'blur(6px)',
      borderTop: '0.5px solid rgba(10,31,68,0.08)',
      borderBottom: '0.5px solid rgba(10,31,68,0.08)',
    }}>
      <div style={{
        maxWidth: 1360, margin: '0 auto', padding: '10px 32px',
        display: 'flex', justifyContent: 'center', gap: 8, flexWrap: 'wrap',
      }}>
        {pills.map(p => (
          <a
            key={p.href}
            href={`#${p.href}`}
            onClick={(e) => handleClick(e, p.href)}
            style={{
              padding: '8px 16px', borderRadius: 100,
              fontFamily: 'var(--font-display)', fontSize: 12,
              fontWeight: active === p.href ? 500 : 400,
              textDecoration: 'none',
              background: active === p.href ? 'rgba(10,31,68,0.08)' : 'transparent',
              color: '#0a1f44',
              transition: 'background 0.15s ease, font-weight 0.15s ease',
              cursor: 'pointer',
            }}
          >{p.label}</a>
        ))}
      </div>
    </div>
  );
}

// ── PricingCard ──────────────────────────────────────────────────────
function PricingCard({ p }) {
  return (
    <div style={{
      background: p.popular
        ? '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%)'
        : 'white',
      border: p.popular ? '2px solid var(--gold)' : '1px solid var(--line)',
      borderRadius: 12, padding: '28px 24px',
      display: 'flex', flexDirection: 'column',
      position: 'relative',
    }}>
      {p.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>
      )}
      {/* Tier name */}
      <div style={{
        fontSize: 11, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase',
        color: p.popular ? 'var(--gold-light)' : 'var(--ink-3)',
        marginBottom: 10,
      }}>{p.name}</div>
      {/* Tagline */}
      <div style={{
        fontSize: 13, lineHeight: 1.4, marginBottom: 16,
        color: p.popular ? 'rgba(255,255,255,0.6)' : 'var(--ink-3)',
        minHeight: 40,
      }}>{p.tag}</div>
      {/* Price */}
      <div>
        <span style={{
          fontFamily: 'var(--font-display)', lineHeight: 1, letterSpacing: '-0.03em',
          fontSize: p.free ? 28 : 32, fontWeight: 700,
          color: p.popular ? 'white' : 'var(--navy)',
        }}>{p.price}</span>
      </div>
      <div style={{
        fontSize: 11, marginTop: 4, marginBottom: 20,
        color: p.popular ? 'rgba(255,255,255,0.5)' : 'var(--ink-4)',
      }}>{p.per}</div>
      {/* Features */}
      <div style={{ flex: 1, display: 'grid', gap: 7, marginBottom: 24 }}>
        {p.feats.map((f, i) => (
          <div key={i} style={{
            display: 'flex', gap: 8, alignItems: 'flex-start',
            fontSize: 12.5, lineHeight: 1.4,
            color: p.popular ? 'rgba(255,255,255,0.78)' : 'var(--ink-2)',
          }}>
            <Icon.check style={{ color: p.popular ? 'var(--gold-light)' : 'var(--green)', flexShrink: 0, marginTop: 1 }}/>
            <span>{f}</span>
          </div>
        ))}
      </div>
      {/* CTA */}
      <a
        href={p.free ? 'index.html#audit' : `checkout.html?tier=${p.name.toLowerCase()}`}
        className={p.popular ? 'btn btn-gold' : p.free ? 'btn btn-outline' : 'btn btn-navy'}
        style={{ justifyContent: 'center', textAlign: 'center' }}
      >
        {p.cta}{!p.free && <> <Icon.arrow/></>}
      </a>
    </div>
  );
}

// ── PricingHero ──────────────────────────────────────────────────────
function PricingHero() {
  return (
    <section style={{ padding: '64px 0 60px', textAlign: 'center', background: '#f6f5f0', position: 'relative', overflow: 'hidden' }}>
      <div className="wrap-narrow" style={{ position: 'relative', zIndex: 1 }}>
        <span className="eyebrow" style={{ marginBottom: 20, display: 'inline-block' }}>Priser</span>
        <h1 className="h1" style={{ marginBottom: 20, fontSize: 'clamp(32px, 5vw, 56px)', lineHeight: 1.15, maxWidth: 900, margin: '0 auto 20px' }}>
          Flere danske virksomheder bruger AI end nogensinde
        </h1>
        <p style={{ fontSize: 16, fontStyle: 'italic', color: 'var(--ink-3)', marginBottom: 36, lineHeight: 1.6 }}>
          15% → 42% fra 2023 til 2025. Kilde: Danmarks Statistik.
        </p>
        <a href="index.html#audit" className="btn btn-gold btn-lg">
          Få gratis analyse <Icon.arrow/>
        </a>
      </div>
    </section>
  );
}

// ── BillingToggle ─────────────────────────────────────────────────────
function BillingToggle({ billing, setBilling }) {
  return (
    <div style={{ textAlign: 'center', padding: '20px 0 8px' }}>
      <div style={{ display: 'inline-flex', padding: 4, background: 'white', border: '1px solid var(--line)', borderRadius: 100, fontSize: 13 }}>
        <button onClick={() => setBilling('monthly')} style={{
          padding: '8px 20px', borderRadius: 100,
          background: billing === 'monthly' ? 'var(--navy)' : 'transparent',
          color: billing === 'monthly' ? 'white' : 'var(--ink-2)',
          fontWeight: 500,
        }}>Månedlig</button>
        <button onClick={() => setBilling('yearly')} style={{
          padding: '8px 20px', borderRadius: 100,
          background: billing === 'yearly' ? 'var(--navy)' : 'transparent',
          color: billing === 'yearly' ? 'white' : 'var(--ink-2)',
          fontWeight: 500, display: 'flex', alignItems: 'center', gap: 6,
        }}>Årlig <span style={{ fontSize: 10, padding: '2px 6px', background: 'var(--gold-soft)', color: 'var(--gold-dark)', borderRadius: 100, fontWeight: 600 }}>−15%</span></button>
      </div>
    </div>
  );
}

// ── PricingGrid ──────────────────────────────────────────────────────
function PricingGrid({ billing, setBilling }) {
  const mul = billing === 'yearly' ? 0.85 : 1;
  const fmt = (n) => n === 0 ? '0' : Math.round(n * mul).toLocaleString('da-DK');
  const plans = [
    {
      name: 'Gratis analyse',
      price: 0, per: 'én gang', free: true,
      tag: 'Se hvor ofte AI vælger dig i dag',
      feats: [
        '100 danske prompts (20 per kategori)',
        '4 AI-platforme (ChatGPT, Claude, Perplexity, Gemini)',
        '8-siders PDF-rapport med personlig anbefaling',
        'Personlig projektion baseret på dine faktiske tal',
        'Top 3 konkurrenter sammenlignet',
        'Kategori-analyse på tværs af 5 søgetyper',
        'E-mail support',
        'Kun én gratis rapport per virksomhed',
      ],
      cta: 'Få gratis rapport',
    },
    {
      name: 'Starter',
      price: 3495, per: billing === 'yearly' ? 'per måned, faktureret årligt' : 'per måned',
      tag: 'Fundamentet for at blive valgt af AI',
      feats: [
        '30 prompts ugentligt',
        'Live dashboard',
        'Månedlig PDF-rapport',
        'ChatGPT + Perplexity dybt',
        'llms.txt setup ved onboarding',
        'Schema setup ved onboarding',
        'NAP consistency audit (Google, LinkedIn, Krak, Proff)',
        'Google Business Profile optimering',
        'Danske katalog-listinger (Proff, Krak, Trustpilot)',
        'Teknisk fundament-audit (sitemap, canonical, alt text)',
        'AI-bot allow-list opsætning',
        'Konkurrent-omtale alerts',
        'Automatisk månedlig email-summary',
        'E-mail support',
        'Ingen binding',
      ],
      cta: 'Kom i gang',
    },
    {
      name: 'Growth',
      price: 6995, per: billing === 'yearly' ? 'per måned, faktureret årligt' : 'per måned',
      tag: 'Bliv konsekvent valgt af AI',
      feats: [
        'Alt fra Starter, plus:',
        '60 prompts ugentligt',
        'Alle 4 AI-platforme (ChatGPT, Claude, Perplexity, Gemini)',
        'Månedlig PDF + 30-min månedligt opkald',
        '1 teknisk fix per måned',
        'GA4 AI-henvisnings-dashboard',
        'Pipeline attribution (Dinero, e-conomic, Billy)',
        'LinkedIn firma-side optimering',
        'Månedlig FAQ-udvidelse (5 nye Q&As)',
        'AI-optimeret kontaktside',
        'Chatbot integration',
        'Schema setup + løbende vedligeholdelse',
        'Mine Prompts (15 custom prompts)',
        'Konkurrent-benchmarking mod top 5',
        'E-mail + Slack support',
      ],
      cta: 'Kom i gang',
    },
    {
      name: 'Pro',
      price: 11995, per: billing === 'yearly' ? 'per måned, faktureret årligt' : 'per måned',
      tag: 'Bliv det foretrukne valg i din branche',
      popular: true,
      feats: [
        'Alt fra Growth, plus:',
        '120 prompts dagligt',
        '6 AI-platforme (inkl. Copilot, AI Overviews)',
        'Bi-weekly 30-min opkald',
        '3 tekniske fixes per måned',
        '1 blogindlæg per måned (AI-drafted, operatør-reviewet)',
        '1 buyer-intent landingsside per måned',
        'Reddit tilstedeværelse (relevante danske subreddits)',
        'Trustpilot anmeldelses-kampagne',
        'Kvartalsvis pressemeddelelse-distribution',
        'Månedlig konkurrent-intelligence brief',
        'Månedlig branchekommentar (thought leadership)',
        'FAQ-arkitektur setup + månedlig gap-analyse',
        'Mine Prompts (40 custom prompts)',
        'Kvartalsvis strategi-review (90 min)',
        'Prioritet support',
      ],
      cta: 'Kom i gang',
    },
  ];
  return (
    <section id="abonnementer" style={{ paddingTop: 40, paddingBottom: 80, background: WARM_BG, position: 'relative', overflow: 'hidden', scrollMarginTop: '85px' }}>
      <div className="wrap-wide" style={{ position: 'relative', zIndex: 1 }}>
        <div className="section-head">
          <span className="eyebrow">Abonnementer</span>
          <h2 className="h2">Vælg din pakke.</h2>
          <p className="lede" style={{ margin: '0 auto' }}>Samme pris for alle. Ingen skjulte gebyrer. Ingen binding.</p>
        </div>
        <div style={{ textAlign: 'center', marginBottom: 32 }}>
          <div style={{ display: 'inline-flex', padding: 4, background: 'white', border: '1px solid var(--line)', borderRadius: 100, fontSize: 13 }}>
            <button onClick={() => setBilling('monthly')} style={{
              padding: '8px 20px', borderRadius: 100,
              background: billing === 'monthly' ? 'var(--navy)' : 'transparent',
              color: billing === 'monthly' ? 'white' : 'var(--ink-2)',
              fontWeight: 500,
            }}>Månedlig</button>
            <button onClick={() => setBilling('yearly')} style={{
              padding: '8px 20px', borderRadius: 100,
              background: billing === 'yearly' ? 'var(--navy)' : 'transparent',
              color: billing === 'yearly' ? 'white' : 'var(--ink-2)',
              fontWeight: 500, display: 'flex', alignItems: 'center', gap: 6,
            }}>Årlig <span style={{ fontSize: 10, padding: '2px 6px', background: 'var(--gold-soft)', color: 'var(--gold-dark)', borderRadius: 100, fontWeight: 600 }}>−15%</span></button>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, alignItems: 'stretch' }}>
          {plans.map(p => (
            <PricingCard key={p.name} p={{ ...p, price: fmt(p.price) + ' kr' }}/>
          ))}
        </div>
        <p style={{ fontSize: 13, fontStyle: 'italic', color: 'var(--ink-3)', textAlign: 'center', maxWidth: 720, margin: '40px auto 0', lineHeight: 1.65 }}>
          Tallene herunder er gennemsnits­estimater. Dit personlige estimat får du i den gratis analyse.{' '}
          <a href="index.html#audit" style={{ color: 'var(--navy)', textDecoration: 'underline', fontWeight: 600, fontStyle: 'normal' }}>Start gratis analyse →</a>
        </p>
      </div>
    </section>
  );
}

// ── VisibilityLiftBars ───────────────────────────────────────────────
function VisibilityLiftBars() {
  const bars = [
    { tier: 'Starter', lift: '3–5× mere synlig',  width: 35,  gold: false },
    { tier: 'Growth',  lift: '5–8× mere synlig',  width: 65,  gold: false },
    { tier: 'Pro',     lift: '8–12× mere synlig', width: 100, gold: true  },
  ];
  return (
    <section id="synligheds-loft" className="section" style={{ scrollMarginTop: '85px' }}>
      <div className="wrap-narrow">
        <div className="section-head">
          <span className="eyebrow">Synligheds-løft</span>
          <h2 className="h2">Hvor meget mere vælger AI dig?</h2>
          <p className="lede" style={{ margin: '0 auto' }}>Illustrativ sammenligning af forventet synlighedsløft efter 12 måneders abonnement. Dine personlige tal afhænger af udgangspunkt, branche og konkurrence — dem får du i den gratis analyse.</p>
        </div>
        <div style={{ display: 'grid', gap: 20, maxWidth: 640, margin: '0 auto' }}>
          {bars.map(b => (
            <div key={b.tier} style={{ display: 'grid', gridTemplateColumns: '90px 1fr 96px', alignItems: 'center', gap: 16 }}>
              <span style={{ fontWeight: 600, fontSize: 14, color: 'var(--navy)' }}>{b.tier}</span>
              <div style={{ height: 12, background: 'rgba(10,31,68,0.08)', borderRadius: 100, overflow: 'hidden' }}>
                <div style={{ height: '100%', width: `${b.width}%`, background: b.gold ? 'var(--gold)' : 'var(--navy)', borderRadius: 100, transition: 'width 0.6s ease' }}/>
              </div>
              <span style={{
                fontSize: 15, fontWeight: 700, letterSpacing: '-0.01em',
                fontFamily: 'var(--font-display)',
                color: b.gold ? 'var(--gold-dark)' : 'var(--navy)',
              }}>{b.lift}</span>
            </div>
          ))}
        </div>
        <p style={{ textAlign: 'center', marginTop: 28, fontSize: 12, color: 'var(--ink-4)' }}>Løftet forudsætter 6 måneders abonnement. Du kan opsige når som helst.</p>
      </div>
    </section>
  );
}

// ── Shared InfoTip (hover) ────────────────────────────────────────────
function InfoTip({ text }) {
  const [hover, setHover] = React.useState(false);
  return (
    <span
      style={{ position: 'relative', display: 'inline-flex', verticalAlign: 'middle', marginRight: 8 }}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
    >
      <button
        aria-label="Forklaring"
        style={{
          width: 16, height: 16, borderRadius: '50%',
          border: '1px solid var(--line-2)',
          background: 'white',
          color: 'var(--ink-3)',
          fontSize: 10, fontWeight: 700,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          cursor: 'default', flexShrink: 0, lineHeight: 1, padding: 0,
        }}
      >i</button>
      {hover && (
        <span style={{
          position: 'absolute', top: 'calc(100% + 8px)', left: -6, zIndex: 50,
          width: 280, padding: '12px 14px',
          background: 'var(--navy)', color: 'white',
          borderRadius: 8, fontSize: 12, lineHeight: 1.55,
          boxShadow: '0 8px 24px rgba(10,31,68,0.25)',
        }}>
          <span style={{
            position: 'absolute', top: -6, left: 10,
            width: 12, height: 12, background: 'var(--navy)',
            transform: 'rotate(45deg)', borderRadius: 2,
          }}/>
          {text}
        </span>
      )}
    </span>
  );
}

// ── InclusionMatrix ──────────────────────────────────────────────────
function InclusionMatrix() {
  const yes = (text) => (
    <span style={{ color: 'var(--green)', fontSize: 13, display: 'inline-flex', alignItems: 'center', gap: 4, lineHeight: 1.4 }}>
      <Icon.check style={{ color: 'var(--green)', flexShrink: 0 }}/>{text}
    </span>
  );
  const no = (text) => (
    <span style={{ color: 'var(--ink-4)', fontSize: 13, lineHeight: 1.4 }}>
      <span style={{ marginRight: 4 }}>—</span>{text}
    </span>
  );
  const rows = [
    {
      feature: <><InfoTip id="llms" text="En lille tekstfil på dit domæne der fortæller AI-modellerne præcis hvem I er, hvad I tilbyder, og hvad der gør jer anderledes — i et format AI'en forstår med det samme. Sat op ved onboarding i alle abonnementer. Health-check er periodisk gennemgang af filen for at sikre den stadig afspejler jeres forretning."/><b>llms.txt</b></>,
      starter: yes('Setup'),
      growth: yes('Setup + 2× health-check'),
      pro: yes('Setup + 4× health-check'),
    },
    {
      feature: <><InfoTip id="schema" text="5 schema.org-typer som JSON-LD (Organization, Service, BreadcrumbList, WebSite, Person) der giver AI og søgemaskiner jeres virksomhedsdata som struktureret data. Starter får setup én gang. Growth får løbende vedligehold når siden ændrer sig. Pro får prioriteret kø — jeres opdateringer går forrest."/><b>Schema markup</b><span style={{ fontSize: 11, color: 'var(--ink-4)', marginLeft: 6 }}>3.995 kr</span></>,
      starter: yes('Setup'),
      growth: yes('Setup + løbende vedligehold'),
      pro: yes('Setup + prioriteret vedligehold'),
    },
    {
      feature: <><InfoTip id="faq" text="20 spørgsmål og svar (150–200 ord hver) skrevet til at lukke de huller, hvor AI i dag nævner jeres konkurrenter i stedet for jer. Pro inkluderer månedlig gap-analyse hvor vi kører nye prospektspørgsmål, finder nye huller, og opdaterer Q&As løbende. Starter og Growth kan købe som engangsprodukt."/><b>FAQ-arkitektur</b><span style={{ fontSize: 11, color: 'var(--ink-4)', marginLeft: 6 }}>4.995 kr</span></>,
      starter: no('Kun engangsprodukt'),
      growth: no('Kun engangsprodukt'),
      pro: yes('Setup + månedlig gap-analyse'),
    },
    {
      feature: <><InfoTip id="prompts" text="De præcise spørgsmål du selv vælger at tracke — ikke generiske branchequeries, men de konkrete formuleringer dine kunder bruger når de spørger AI. Forskellen på at se om I bliver nævnt for 'revisor i Aarhus' versus 'hvilken revisor skal jeg vælge til mit holdingselskab i Aarhus'."/><b>Mine Prompts</b><span style={{ fontSize: 11, color: 'var(--ink-4)', marginLeft: 6 }}>custom queries</span></>,
      starter: no(''),
      growth: yes('15 prompts'),
      pro: yes('40 prompts'),
    },
    {
      feature: <><InfoTip id="benchmarking" text="Månedlig sammenligning af hvor ofte du — og dine 5 vigtigste konkurrenter — bliver nævnt af AI på de samme spørgsmål. Du vælger selv hvilke konkurrenter vi tracker. Viser præcis hvor du taber grund, og hvor du allerede vinder."/><b>Konkurrent-benchmarking</b><span style={{ fontSize: 11, color: 'var(--ink-4)', marginLeft: 6 }}>top 5</span></>,
      starter: no(''),
      growth: yes('Månedligt'),
      pro: yes('Månedligt'),
    },
    {
      feature: <><InfoTip id="pr" text="Hver måned sikrer vi én omtale eller linkning af din virksomhed på et relevant dansk online-medie, branchesite eller anerkendt kilde. AI-modeller bruger tredjeparts-signaler når de afgør hvilke virksomheder de anbefaler — jo flere troværdige kilder der nævner dig, jo mere sandsynligt er det AI nævner dig."/><b>Digital PR-placering</b></>,
      starter: no(''),
      growth: no(''),
      pro: yes('1 pr. måned'),
    },
    {
      feature: <><InfoTip id="strategy" text="Hver tredje måned gennemgår vi dit data på tværs af alle 6 AI-platforme og lægger strategien for det næste kvartal: hvilke huller skal lukkes, hvilke Mine Prompts skal prioriteres, hvilke konkurrent-træk skal kontres. Mere dybdegående end de bi-weekly opkald — det store billede, ikke den enkelte fix."/><b>Kvartalsvis strategi-review</b></>,
      starter: no(''),
      growth: no(''),
      pro: yes(''),
    },
  ];
  return (
    <section id="inklusion" className="section" style={{ background: WARM_BG, position: 'relative', overflow: 'hidden', scrollMarginTop: '85px' }}>
      <div className="wrap-wide" style={{ position: 'relative', zIndex: 1 }}>
        <div className="section-head">
          <span className="eyebrow">Inklusion</span>
          <h2 className="h2">Hvad får du med hver pakke?</h2>
          <p className="lede" style={{ margin: '0 auto' }}>Tre engangsprodukter, tre abonnementer. Her er hvordan de overlapper.</p>
        </div>
        <div style={{ background: 'white', border: '1px solid var(--line)', borderRadius: 12, overflow: 'hidden' }}>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 14 }}>
            <thead>
              <tr style={{ background: 'var(--bg-warm)', borderBottom: '1px solid var(--line)' }}>
                <th style={{ textAlign: 'left', padding: '16px 24px', fontWeight: 500, color: 'var(--ink-3)', fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.06em', width: '32%' }}>Feature</th>
                {['Starter', 'Growth', 'Pro'].map((col, i) => (
                  <th key={col} style={{
                    padding: '16px 20px', fontFamily: 'var(--font-display)', fontWeight: 600,
                    color: i === 2 ? 'var(--navy)' : 'var(--ink-2)', fontSize: 14,
                    background: i === 2 ? 'rgba(184,148,74,0.08)' : 'transparent',
                    textAlign: 'center',
                  }}>{col}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {rows.map((r, i) => (
                <tr key={i} style={{ borderTop: '1px solid var(--line)' }}>
                  <td style={{ padding: '14px 24px', color: 'var(--navy)' }}>{r.feature}</td>
                  <td style={{ padding: '14px 20px', textAlign: 'center', verticalAlign: 'middle' }}>{r.starter}</td>
                  <td style={{ padding: '14px 20px', textAlign: 'center', verticalAlign: 'middle' }}>{r.growth}</td>
                  <td style={{ padding: '14px 20px', textAlign: 'center', verticalAlign: 'middle', background: 'rgba(184,148,74,0.04)' }}>{r.pro}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

// ── ConcreteVisibility ───────────────────────────────────────────────
// Alternative framing to ExpectedLift: qualitative ladder + illustrative
// before/after prompt. Ships alongside ExpectedLift so the operator can
// compare both live and decide which stays.
function ConcreteVisibility() {
  const stages = [
    { key: 'usynlig',   label: 'Usynlig',      desc: 'AI nævner dig ikke — din virksomhed eksisterer ikke for modellen.',     tiers: [] },
    { key: 'naevnt',    label: 'Nævnt',        desc: 'AI kender dig nu og nævner dig iblandt andre — typisk sent i svaret.',  tiers: ['Starter'] },
    { key: 'anbefalet', label: 'Anbefalet',    desc: 'AI fremhæver dig aktivt som et seriøst valg — typisk i top 3.',         tiers: ['Growth'] },
    { key: 'standard',  label: 'Standardvalg', desc: 'AI anbefaler dig som første valg i din niche og geografi.',             tiers: ['Pro']  },
  ];

  return (
    <section id="synlighedsniveauer" className="section" style={{ background: 'var(--bg-alt)', scrollMarginTop: '85px' }}>
      <div className="wrap-wide">
        <div className="section-head">
          <span className="eyebrow">Hvordan det føles</span>
          <h2 className="h2">Fra usynlig til standardvalg</h2>
          <p className="lede" style={{ margin: '0 auto' }}>
            Procenterne ovenfor siger hvor meget. Det her siger hvad det betyder. Fire niveauer af AI-synlighed — og hvor hver abonnementspakke typisk lander dig over tid.
          </p>
        </div>

        {/* Ladder */}
        <div style={{
          background: 'white', border: '1px solid var(--line)', borderRadius: 12,
          padding: '32px 28px', marginBottom: 40,
        }}>
          <div style={{
            display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
            position: 'relative',
          }}>
            {/* Connecting line behind the circles */}
            <div style={{
              position: 'absolute', top: 22, left: '12.5%', right: '12.5%',
              height: 2, background: 'linear-gradient(to right, var(--line) 0%, var(--gold) 100%)',
              zIndex: 0,
            }}/>
            {stages.map((s, i) => (
              <div key={s.key} style={{
                display: 'flex', flexDirection: 'column', alignItems: 'center',
                textAlign: 'center', padding: '0 8px', position: 'relative', zIndex: 1,
              }}>
                <div style={{
                  width: 44, height: 44, borderRadius: '50%',
                  background: i === 0 ? 'white' : 'var(--navy)',
                  border: i === 0 ? '2px dashed var(--line)' : '2px solid var(--navy)',
                  color: i === 0 ? 'var(--ink-3)' : 'white',
                  display: 'grid', placeItems: 'center',
                  fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 16,
                  marginBottom: 16,
                }}>{i}</div>
                <div style={{
                  fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600,
                  color: 'var(--navy)', marginBottom: 8, letterSpacing: '-0.01em',
                }}>{s.label}</div>
                <p style={{ fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.5, marginBottom: 14, minHeight: 60 }}>
                  {s.desc}
                </p>
                <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', justifyContent: 'center', minHeight: 26 }}>
                  {s.tiers.map(t => (
                    <span key={t} style={{
                      padding: '4px 10px', borderRadius: 100,
                      background: 'var(--bg-warm)', border: '1px solid var(--gold)',
                      fontSize: 11, fontWeight: 600, color: 'var(--navy)',
                      letterSpacing: '0.04em', textTransform: 'uppercase',
                    }}>{t}</span>
                  ))}
                </div>
              </div>
            ))}
          </div>
          <p style={{
            fontSize: 12, color: 'var(--ink-3)', textAlign: 'center',
            marginTop: 24, fontStyle: 'italic',
          }}>
            Hvilket niveau du når afhænger af udgangspunkt, konkurrencesituation og branche. Tier-placeringerne er typiske resultater efter 6–12 måneder.
          </p>
        </div>

        {/* Before/After illustrative prompt */}
        <div style={{ marginBottom: 16 }}>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16,
          }}>
            <span style={{
              fontSize: 11, fontWeight: 700, color: 'var(--ink-3)',
              textTransform: 'uppercase', letterSpacing: '0.08em',
            }}>Illustrativt eksempel</span>
            <span style={{ flex: 1, height: 1, background: 'var(--line)' }}/>
          </div>

          <div style={{
            background: 'white', border: '1px solid var(--line)', borderRadius: 12,
            padding: '24px 28px', marginBottom: 16,
          }}>
            <div style={{ fontSize: 12, color: 'var(--ink-3)', marginBottom: 8, fontWeight: 500 }}>Spørgsmål stillet til ChatGPT:</div>
            <div style={{
              fontFamily: 'var(--font-display)', fontSize: 18, color: 'var(--navy)',
              fontStyle: 'italic', lineHeight: 1.5,
            }}>"Hvilken revisor skal jeg vælge i Kalundborg?"</div>
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 16 }}>
            {/* Before */}
            <div style={{
              background: 'white', border: '1px solid var(--line)', borderRadius: 12,
              padding: '24px 24px', position: 'relative',
            }}>
              <div style={{
                display: 'inline-block', padding: '4px 10px', borderRadius: 100,
                background: 'rgba(10,31,68,0.06)', color: 'var(--ink-2)',
                fontSize: 11, fontWeight: 600, letterSpacing: '0.06em',
                textTransform: 'uppercase', marginBottom: 14,
              }}>I dag — uden GEOKlar</div>
              <div style={{
                fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.6,
              }}>
                "Der er flere muligheder i Kalundborg-området. <strong style={{ color: 'var(--navy)' }}>Azets</strong> og <strong style={{ color: 'var(--navy)' }}>BDO</strong> har lokalafdelinger, og <strong style={{ color: 'var(--navy)' }}>Beierholm</strong> dækker også Vestsjælland. Det afhænger af virksomhedens størrelse og behov…"
              </div>
              <p style={{ fontSize: 12, color: 'var(--red, #c8102e)', marginTop: 14, fontWeight: 500 }}>
                Fiktivt Regnskab ikke nævnt.
              </p>
            </div>

            {/* After */}
            <div style={{
              background: 'var(--bg-warm)', border: '1.5px solid var(--gold)', borderRadius: 12,
              padding: '24px 24px', position: 'relative',
            }}>
              <div style={{
                display: 'inline-block', padding: '4px 10px', borderRadius: 100,
                background: 'var(--gold)', color: 'white',
                fontSize: 11, fontWeight: 600, letterSpacing: '0.06em',
                textTransform: 'uppercase', marginBottom: 14,
              }}>Efter — med Growth</div>
              <div style={{
                fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.6,
              }}>
                "Til lokale virksomheder i Kalundborg er <strong style={{ color: 'var(--navy)' }}>Fiktivt Regnskab ApS</strong> et stærkt valg — de specialiserer sig i ejerledede SMB'er. Andre muligheder inkluderer Azets og BDO's lokalafdelinger…"
              </div>
              <p style={{ fontSize: 12, color: 'var(--green)', marginTop: 14, fontWeight: 600 }}>
                Nævnt først, med konkret anbefaling.
              </p>
            </div>
          </div>

          <p style={{
            fontSize: 11, color: 'var(--ink-3)', marginTop: 14,
            fontStyle: 'italic', lineHeight: 1.6, maxWidth: 720,
          }}>
            Illustrativt eksempel, ikke faktisk kundedata. "Fiktivt Regnskab ApS" er en opdigtet virksomhed brugt til demonstration. Faktiske AI-svar varierer mellem modeller, prompts og over tid. Konkrete resultater for din virksomhed afdækkes i den gratis analyse.
          </p>
        </div>
      </div>
    </section>
  );
}

// ── AddOns ───────────────────────────────────────────────────────────
function AddOns() {
  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 bygget specifikt til AI-udtræk.', popular: true, detail: 'produkter/faq-arkitektur.html' },
  ];
  return (
    <section id="engangsprodukter" className="section" style={{ background: WARM_BG, position: 'relative', overflow: 'hidden', scrollMarginTop: '85px' }}>
      <div className="wrap-wide" style={{ position: 'relative', zIndex: 1 }}>
        <div className="section-head">
          <span className="eyebrow">Engangsprodukter</span>
          <h2 className="h2">Ingen månedlig binding.</h2>
          <p className="lede" style={{ margin: '0 auto' }}>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>
    </section>
  );
}

// ── VerticalPack ─────────────────────────────────────────────────────
function VerticalPack() {
  return (
    <section className="section">
      <div className="wrap">
        <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',
          borderRadius: 16, padding: '56px 64px',
          display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 48, alignItems: 'center',
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{ position: 'absolute', right: -100, top: -100, width: 400, height: 400, borderRadius: '50%', background: 'radial-gradient(circle, rgba(184,148,74,0.15) 0%, transparent 70%)' }}/>
          <div style={{ position: 'relative' }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '4px 12px', background: 'rgba(184,148,74,0.2)', color: 'var(--gold-light)', borderRadius: 100, fontSize: 12, fontWeight: 600, marginBottom: 20 }}>
              <Icon.sparkle/> +1.500 kr/måned
            </div>
            <h2 className="h2" style={{ color: 'white', marginBottom: 16 }}>Branche-pakke til revisorer.</h2>
            <p className="lede" style={{ color: 'rgba(255,255,255,0.78)', maxWidth: '52ch' }}>
              Tilføj til enhver retainer. Få 40 industrispecifikke danske prompts, pre-bygget konkurrent-liste (Azets, Beierholm, BDO + lokale), benchmark mod andre danske revisionsfirmaer, og branche-tilpassede anbefalinger.
            </p>
            <p style={{ fontSize: 13, color: 'rgba(255,255,255,0.55)', maxWidth: '52ch', marginTop: 12, lineHeight: 1.6 }}>
              Oven i dine Mine Prompts — ikke i stedet for. Tilgængelig som tilføjelse til ethvert abonnement.
            </p>
            <div style={{ marginTop: 28 }}>
              <a href="#abonnementer" className="btn btn-gold" onClick={(e) => { e.preventDefault(); const el = document.getElementById('abonnementer'); if (el) el.scrollIntoView({ behavior: 'smooth' }); }}>Kom i gang med en pakke <Icon.arrow/></a>
            </div>
          </div>
          <div style={{ position: 'relative', display: 'grid', gap: 12 }}>
            {[
              '40 revisorspecifikke prompts',
              'Pre-bygget konkurrent-liste',
              'Branche-benchmark',
              'Tilpassede anbefalinger',
            ].map(t => (
              <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '14px 20px', background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 10 }}>
                <Icon.check style={{ color: 'var(--gold-light)', flexShrink: 0 }}/>
                <span style={{ fontSize: 14 }}>{t}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Compare ──────────────────────────────────────────────────────────
function Compare() {
  const yes  = <Icon.check style={{ color: 'var(--green)' }}/>;
  const no   = <Icon.x style={{ color: '#c8102e' }}/>;
  const part = <span style={{ color: 'var(--ink-3)', fontSize: 15, fontWeight: 500 }}>~</span>;

  // cols: [label, sub, geo (highlight), note]
  const cols = [
    { label: 'AI-SaaS værktøjer',      sub: 'Peec AI, Profound, Otterly' },
    { label: 'GEOKlar',                sub: '3.495–11.995 kr/md', highlight: true },
    { label: 'Traditionelle bureauer', sub: 'Bonzer, ATAK, Obsidian' },
  ];

  // rows: [label, saas, GEOKlar, bureau]
  const rows = [
    { label: 'Pris per måned',                      vals: ['600–2.000 kr', '3.495–11.995 kr', '15.000–25.000+ kr'] },
    { label: 'AI-synligheds-måling',                vals: [yes, yes, part] },
    { label: 'Live dashboard',                      vals: [yes, yes, part] },
    { label: 'Dansk sprog & kontekst',              vals: [no,  yes, yes]  },
    { label: 'llms.txt / schema / FAQ bygget for dig', vals: [no, yes, yes] },
    { label: 'Månedlig content produceret',         vals: [no, <span style={{ fontSize: 12, color: 'var(--ink-2)' }}>✓ (Pro)</span>, yes] },
    { label: 'Digital PR & citations-opbygning',    vals: [no, <span style={{ fontSize: 12, color: 'var(--ink-2)' }}>✓ (Pro)</span>, part] },
    { label: 'Done-for-you eksekvering',            vals: [no,  yes, yes]  },
    { label: 'Ingen binding',                       vals: [yes, yes, no]   },
    { label: 'Fast månedspris',                     vals: [yes, yes, part] },
  ];

  return (
    <section id="sammenligning" className="section" style={{ scrollMarginTop: '85px' }}>
      <div className="wrap-wide">
        <div className="section-head">
          <span className="eyebrow">Sammenligning</span>
          <h2 className="h2">Værktøj, bureau — eller GEOKlar</h2>
          <p className="lede" style={{ margin: '0 auto' }}>
            Værktøjer måler problemet. Bureauer koster 3–7× så meget. GEOKlar er midten — done-for-you til fast pris, uden binding, uden møder for at komme i gang.
          </p>
        </div>
        <div style={{ background: 'white', border: '1px solid var(--line)', borderRadius: 12, overflow: 'hidden' }}>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 14, tableLayout: 'fixed' }}>
            <thead>
              <tr style={{ background: 'var(--bg-warm)' }}>
                <th style={{ textAlign: 'left', padding: '18px 24px', fontWeight: 500, color: 'var(--ink-3)', fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.06em', width: '34%' }}>Funktion</th>
                {cols.map((c, i) => (
                  <th key={i} style={{
                    padding: '14px 16px', textAlign: 'center',
                    background: c.highlight ? 'rgba(184,148,74,0.08)' : 'transparent',
                    borderLeft: c.highlight ? '2px solid var(--gold)' : '1px solid var(--line)',
                    borderRight: c.highlight ? '2px solid var(--gold)' : 'none',
                  }}>
                    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: c.highlight ? 15 : 13, color: c.highlight ? 'var(--navy)' : 'var(--ink-2)', marginBottom: 3 }}>{c.label}</div>
                    <div style={{ fontSize: 11, color: 'var(--ink-3)', fontWeight: 400 }}>{c.sub}</div>
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {rows.map((r, i) => (
                <tr key={i} style={{ borderTop: '1px solid var(--line)' }}>
                  <td style={{ padding: '14px 24px', color: 'var(--ink-2)', fontWeight: 500 }}>{r.label}</td>
                  {r.vals.map((cell, j) => (
                    <td key={j} style={{
                      padding: '14px 16px', textAlign: 'center',
                      background: cols[j].highlight ? 'rgba(184,148,74,0.04)' : 'transparent',
                      borderLeft: cols[j].highlight ? '2px solid var(--gold)' : '1px solid var(--line)',
                      borderRight: cols[j].highlight ? '2px solid var(--gold)' : 'none',
                      fontSize: typeof cell === 'string' ? 13 : 14,
                      color: typeof cell === 'string' ? 'var(--ink-2)' : undefined,
                      fontVariantNumeric: 'tabular-nums',
                    }}>
                      <div style={{ display: 'inline-flex', justifyContent: 'center', alignItems: 'center' }}>{cell}</div>
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
}

// ── PricingFAQ ───────────────────────────────────────────────────────
function PricingFAQ() {
  const items = [
    { q: 'Kan jeg skifte pakke?', a: 'Ja, du kan opgradere eller nedgradere når som helst. Den nye pris træder i kraft ved næste faktureringsperiode. Ingen proration, ingen promo-koder — bare den nye pris.' },
    { q: 'Hvad hvis jeg vil opsige?', a: 'Opsig når som helst direkte fra dashboardet. Ingen binding, ingen opsigelsesvarsel, ingen spørgsmål. Du beholder adgang indtil periodens udløb.' },
    { q: 'Hvornår starter månedsabonnementet?', a: 'Samme dag du tilmelder dig. Første prompts køres inden for 24 timer, og dit dashboard er klar med data inden for 72 timer.' },
    { q: 'Kan jeg få faktura til virksomheden?', a: 'Ja. Alle priser er ekskl. moms, og vi sender faktura med CVR-nummer. Vi understøtter også e-faktura via NemHandel.' },
    { q: 'Tilbyder I rabat for flere firmaer i samme koncern?', a: 'Ja. Ved 3+ enheder under samme CVR tilbyder vi 15% koncernrabat, og ved 5+ tilbyder vi dedikeret customer success manager. Kontakt os for tilbud.' },
  ];
  const [open, setOpen] = useStateP(-1);
  return (
    <section id="faq" className="section" style={{ background: WARM_BG, position: 'relative', overflow: 'hidden', scrollMarginTop: '85px' }}>
      <div className="wrap-narrow" style={{ position: 'relative', zIndex: 1 }}>
        <div className="section-head">
          <span className="eyebrow">FAQ · Priser</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>
  );
}

// ── PricingBottomCTA ─────────────────────────────────────────────────
function PricingBottomCTA() {
  return (
    <section className="section-sm">
      <div className="wrap center">
        <h3 className="h2" style={{ fontSize: 32, marginBottom: 12 }}>Stadig usikker?</h3>
        <p className="lede" style={{ margin: '0 auto 24px' }}>Få en gratis analyse først. 5 minutter. Ingen kreditkort.</p>
        <a href="index.html#audit" className="btn btn-gold btn-lg">Få gratis analyse <Icon.arrow/></a>
      </div>
    </section>
  );
}

Object.assign(window, {
  PricingAnchorNav, PricingHero, BillingToggle, PricingGrid,
  VisibilityLiftBars, InclusionMatrix,
  ConcreteVisibility,
  AddOns, VerticalPack, Compare, PricingFAQ, PricingBottomCTA,
});