// FAQ page for GEOKlar — faq-parts.jsx

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

const FAQ_CATEGORIES = [
  {
    key: 'how',
    title: 'Sådan virker det',
    subtitle: 'Processen, dashboardet og hvad der sker efter du er i gang.',
    icon: 'bolt',
    items: [
      {
        q: 'Hvad sker der, når jeg tilmelder mig?',
        a: 'Straks efter tilmelding opretter vi din virksomhed i systemet og starter de første prompts inden for 24 timer. Inden for 72 timer har dit dashboard de første data. Du modtager en velkomst-e-mail med login-link og en kort guide til hvad du ser.',
      },
      {
        q: 'Hvad indeholder den gratis analyse?',
        a: 'Den gratis analyse kører 100 danske prompts på tværs af ChatGPT, Claude, Perplexity og Gemini — 20 pr. kategori (direkte brand, kategori, sammenligning, problemløsning, lokalt). Du får en 8-siders PDF med din synligheds-score, de tre mest kritiske fund, en konkurrent-sammenligning og tre konkrete anbefalinger. Ingen kreditkort, ingen binding — kun én gratis rapport per virksomhed.',
      },
      {
        q: 'Hvad er en prompt, og hvordan bruges de?',
        a: 'En prompt er et spørgsmål eller søgeformulering vi sender til AI-modellerne — fx "Hvad er den bedste revisor i Aarhus?" eller "Hvad koster et årsregnskab for et ApS?" Vi registrerer om og hvordan din virksomhed nævnes i svaret. Jo flere prompts, jo mere præcist billede af din reelle synlighed på tværs af de spørgsmål dine kunder faktisk stiller.',
      },
      {
        q: 'Kan jeg se hvad AI\'en konkret siger om mig?',
        a: 'Ja. Under "Seneste AI-omtale" i dashboardet ser du de faktiske AI-svar der nævner dig — med angivelse af platform, prompt og tidspunkt. Du kan filtrere pr. platform og kategori for at se præcise citateksempler og vurdere beskrivelseskvaliteten.',
      },
      {
        q: 'Hvad gør jeg med resultaterne?',
        a: 'Rapporten og dashboardet indeholder prioriterede anbefalinger du kan handle på med det samme. Hvis du er på et abonnement, tager vi os af implementeringen — du godkender og følger tallene. Starter du med den gratis analyse, viser rapporten præcis hvad der skal til, så du kan handle selv eller starte et abonnement.',
      },
      {
        q: 'Hvor lang tid tager det at se resultater?',
        a: 'Første målbare løft ses typisk efter 3–4 uger, når tekniske fixes (schema, llms.txt) indekseres af AI-crawlere. Signifikant synligheds-løft kommer efter 60–90 dage med konsistent indsats. Dominant position i din branche tager 4–6 måneder afhængigt af konkurrencefelt og udgangspunkt.',
      },
      {
        q: 'Hvilke AI-platforme dækker I?',
        a: 'Gratis analyse: ChatGPT (GPT-4o mini), Claude (Haiku), Perplexity (Sonar) og Gemini (2.5 Flash). Starter: ChatGPT og Perplexity. Growth: alle fire. Pro: alle fire plus Microsoft Copilot og Google AI Overviews.',
      },
      {
        q: 'Kræver det teknisk viden fra min side?',
        a: 'Nej. Du behøver ikke forstå AI, schema markup eller llms.txt for at bruge GEOKlar. Vi håndterer alle tekniske implementeringer. Dashboardet er designet til at give dig klare svar — ikke teknisk støj.',
      },
    ],
  },
  {
    key: 'pricing',
    title: 'Priser & pakker',
    subtitle: 'Hvad koster det, hvad er inkluderet, og hvad sker der med fakturaen.',
    icon: 'price',
    items: [
      {
        q: 'Hvad koster det?',
        a: 'Starter: 3.495 kr/mdr, Growth: 5.995 kr/mdr, Pro: 9.495 kr/mdr — alle ekskl. moms. Den gratis analyse koster ingenting. Se den fulde prisliste på priser.html for detaljeret sammenligning af hvad der er inkluderet i hver pakke.',
      },
      {
        q: 'Hvad er forskellen på Starter, Growth og Pro?',
        a: 'Starter er for solo-revisorer og kleine teams: 30 prompts ugentligt, 2 platforme, live dashboard og månedlig rapport. Growth tilføjer alle 4 platforme, 60 ugentlige prompts og et månedligt strategi-opkald. Pro er for ambitiøse firmaer der vil dominere: 120 daglige prompts, 6 platforme, digital PR-placeringer og dedikeret customer success manager.',
      },
      {
        q: 'Er den gratis analyse virkelig gratis?',
        a: 'Ja, 100%. Ingen kreditkort, ingen automatisk oprettelse af abonnement, ingen skjulte betingelser. Rapporten er din at beholde, uanset om du efterfølgende tilmelder dig. Vi tilbyder én gratis analyse per CVR-nummer.',
      },
      {
        q: 'Kan jeg skifte pakke?',
        a: 'Ja, du kan opgradere eller nedgradere når som helst direkte fra dashboardet. Den nye pris træder i kraft ved næste faktureringsperiode. Ingen proration, ingen straffe, ingen promo-koder der skal huskes.',
      },
      {
        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 til udgangen af den allerede betalte periode.',
      },
      {
        q: 'Hvornår starter mit abonnement?',
        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 dit CVR-nummer. Vi understøtter e-faktura via NemHandel.',
      },
      {
        q: 'Tilbyder I rabat til koncerner eller ved flere firmaer?',
        a: 'Ja. Ved 3+ enheder under samme CVR tilbyder vi 15% koncernrabat. Ved 5+ enheder medfølger desuden en dedikeret customer success manager. Kontakt os for et tilpasset tilbud.',
      },
      {
        q: 'Hvad indeholder engangsproduktene?',
        a: 'Schema markup (3.995 kr): komplet implementering af JSON-LD Organization, LocalBusiness og FAQ-schema på din hjemmeside. FAQ-arkitektur (4.995 kr): 20 AI-optimerede spørgsmål og svar, skrevet og publiceret på din side. Begge leveres inden for 2 uger og kan bestilles uafhængigt af et abonnement.',
      },
    ],
  },
  {
    key: 'geo',
    title: 'GEO & AI-synlighed',
    subtitle: 'Hvad GEO er, hvordan AI-modeller vælger hvem de nævner, og hvorfor det adskiller sig fra SEO.',
    icon: 'search',
    items: [
      {
        q: 'Hvad er GEO?',
        a: 'Generativ Engine Optimization (GEO) er optimering af dit digitale fodaftryk så 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 — og dermed indgå i den beslutning kunden træffer uden nogensinde at klikke videre.',
      },
      {
        q: 'Hvad er forskellen på GEO og SEO?',
        a: 'SEO handler om at vises i Googles resultatside — brugeren klikker sig videre til din hjemmeside. GEO handler om at indgå i selve det svar AI-modellen genererer. Brugeren behøver måske aldrig besøge din hjemmeside — men de handler på baggrund af hvad AI\'en sagde. Det kræver andre teknikker (llms.txt, schema, AI-venligt indhold) og andre KPI\'er (mention rate, citation share, response inclusion). De to discipliner supplerer hinanden, men er ikke det samme.',
      },
      {
        q: 'Virker det faktisk?',
        a: 'GEO virker ved at gøre dit firma mere synligt for de AI-modeller dine kunder bruger til at finde leverandører. Vi måler din nuværende synlighed, identificerer hullerne og implementerer tekniske og indholdsmæssige ændringer der reelt flytter tallet. Du kan følge udviklingen dagligt i dashboardet. Resultater afhænger af udgangspunkt, branche og konkurrencefelt — vi lover indsats og transparens, ikke specifikke tal inden vi har målt dit baseline.',
      },
      {
        q: 'Hvad er en synligheds-score?',
        a: 'Synligheds-scoren (0–100) er vores sammenvejede mål for hvor hyppigt og fremtrædende din virksomhed nævnes i AI-svar på tværs af alle testede prompts og platforme. En score under 30 er reel usynlighed. 30–65 er synlighed. Over 65 er dominans i branchen. Scoren opdateres dagligt på Growth og Pro, ugentligt på Starter.',
      },
      {
        q: 'Hvad er llms.txt?',
        a: 'llms.txt er en tekstfil du placerer i roden af din hjemmeside (fx ditfirma.dk/llms.txt). Den giver AI-crawlere en struktureret, autoriseret beskrivelse af hvad din virksomhed laver, hvem du hjælper og hvad det koster — ligesom robots.txt giver instruktioner til Google-crawlere. Vores analyse tjekker automatisk om du har filen og om den er korrekt formateret.',
      },
      {
        q: 'Hvad er schema markup?',
        a: 'Schema markup er strukturerede data i JSON-LD-format der tilføjes til din hjemmesides kode. Det fortæller AI-modeller præcis hvem du er, hvad du laver og hvor du holder til — i et format designet til maskinfortolkning. Organization, LocalBusiness og FAQ schema er de tre vigtigste typer for et revisionsfirma. Det er en af de hurtigste og mest effektive tekniske fixes.',
      },
      {
        q: 'Hvilke faktorer bestemmer om AI nævner mig?',
        a: 'De vigtigste faktorer er: (1) Struktureret, faktabaseret indhold der besvarer de spørgsmål potentielle kunder stiller. (2) Schema markup der fortæller AI\'en hvem og hvad du er. (3) Konsistente beskrivelser på tværs af hjemmeside, Google Business, LinkedIn og brancheportaler. (4) llms.txt med autoriserede virksomhedsoplysninger. (5) Omtale i troværdige online-kilder som branchemedier og anmeldelsesplatforme.',
      },
      {
        q: 'Hvad er "mention rate" og "citation share"?',
        a: 'Mention rate er procentdelen af de testede prompts, hvor din virksomhed nævnes i AI-svaret. Citation share er din andel af alle nævnelser i din kategori sammenlignet med konkurrenterne. Begge KPI\'er vises i dit dashboard og opdateres løbende.',
      },
    ],
  },
  {
    key: 'legal',
    title: 'Juridisk & data',
    subtitle: 'GDPR, databehandling, underbehandlere og hvad der sker med dine data.',
    icon: 'info',
    items: [
      {
        q: 'Er GEOKlar GDPR-compliant?',
        a: 'Ja. GEOKlar er etableret og driftet i Danmark og er fuldt underlagt dansk og EU\'s databeskyttelseslovgivning (GDPR). Vi behandler kun de personoplysninger der er nødvendige for levering af vores ydelser. En databehandleraftale (DPA) stilles til rådighed for alle kunder.',
      },
      {
        q: 'Hvem ejer de data, I indsamler?',
        a: 'Du ejer dine data. GEOKlar er databehandler — du er dataansvarlig. Analysedata, dashboard-data og rapportdata tilhører dig og din virksomhed. Vi bruger ikke dine data til at træne AI-modeller eller til kommercielle formål ud over levering af vores ydelse.',
      },
      {
        q: 'Hvad er jeres underbehandlere (subprocessors)?',
        a: 'Vi anvender et begrænset antal underbehandlere til drift af platformen: EU-baseret hosting, betalingsbehandling og e-mail-levering. En opdateret liste over underbehandlere fremgår af vores privatlivspolitik. Vi notificerer dig altid ved ændringer i underbehandlerlisten.',
      },
      {
        q: 'Sender I persondata uden for EU/EØS?',
        a: 'Vores primære databehandling sker inden for EU/EØS. De AI-platforme vi forespørger (OpenAI, Anthropic, Perplexity, Google) har etablerede overførselsmekanismer i overensstemmelse med GDPR, herunder Standard Contractual Clauses (SCC\'er) hvor det er relevant. Prompterne vi sender til disse platforme indeholder firmanavn og branche — ingen personhenførbare oplysninger.',
      },
      {
        q: 'Hvad sker der med mine data, hvis jeg opsiger?',
        a: 'Du kan til enhver tid bede om sletning af dine data. Efter opsigelse opbevares dine data i 30 dage — så du kan eksportere eller fortryde — hvorefter de slettes permanent. Fakturaer og regnskabsdata opbevares i 5 år i henhold til bogføringsloven.',
      },
      {
        q: 'Har jeg ret til indsigt i mine data?',
        a: 'Ja. Du kan til enhver tid anmode om indsigt i de oplysninger vi behandler om dig og din virksomhed. Du har ligeledes ret til berigtigelse, sletning og dataportabilitet. Kontakt os via privatlivspolitikken eller direkte på e-mail.',
      },
      {
        q: 'Er I underlagt dansk lovgivning?',
        a: 'Ja. GEOKlar drives som dansk ApS (CVR 43 12 88 77) og er underlagt dansk ret. Eventuelle tvister afgøres ved dansk domstol med dansk ret som gældende lov.',
      },
    ],
  },
  {
    key: 'about',
    title: 'Om GEOKlar',
    subtitle: 'Hvem vi er, hvorfor vi kun arbejder med revisorer, og hvad der gør os anderledes.',
    icon: 'target',
    items: [
      {
        q: 'Hvem står bag GEOKlar?',
        a: 'GEOKlar er et dansk tech-selskab etableret i København. Vi er specialiserede i generativ søgemaskineoptimering for professionelle servicevirksomheder med fokus på revisionsbranchen. Vores team kombinerer baggrunde inden for AI, digital marketing og regnskabsbranchen.',
      },
      {
        q: 'Hvorfor kun revisorer?',
        a: 'Vi tror på specialisering. Revisionsbranchen er en af de brancher der rammes hårdest af AI-søgning — kunder bruger i stigende grad AI til at finde og sammenligne revisorer. Ved at fokusere 100% her kan vi levere bedre resultater end en generalist: branchespecifikke prompts, præbyggede konkurrentlister og benchmarks mod andre danske revisionsfirmaer. I takt med at vi vokser, udvider vi til tilgrænsende brancher.',
      },
      {
        q: 'Er I specialiseret i den danske revisionsbranches spørgsmål?',
        a: 'Ja. Vores promptlister er bygget specifikt til den danske revisionsbranches spørgsmålslandskab. Vi har præbygget konkurrentlister (Azets, Beierholm, BDO + lokale), 100 prompts der afspejler hvad danske iværksættere og SMV\'er faktisk spørger AI\'en om, og løbende benchmarks mod andre revisionsfirmaer i systemet.',
      },
      {
        q: 'Hvad gør GEOKlar anderledes end SEO-bureauer?',
        a: 'Et traditionelt SEO-bureau optimerer til Google-rangering. Vi optimerer til AI-citering — et fundamentalt different mål med fundamentalt different teknikker. Vi måler ikke siderangering og organisk trafik; vi måler mention rate, citation share og beskrivelseskvalitet i AI-genererede svar. De to discipliner supplerer hinanden, men de er ikke det samme — og bureauer der ikke forstår AI-modellers rangeringslogik kan ikke flytte din AI-synlighed effektivt.',
      },
      {
        q: 'Kan I hjælpe os med at implementere ændringerne?',
        a: 'Ja. På Growth og Pro tager vi os af al implementering: schema markup, llms.txt, FAQ-indhold og digital PR. Vi har de tekniske rettigheder og den faglige viden der skal til for at flytte din score, og vi eksekverer det. Du godkender og følger tallene i dashboardet. Starter: du implementerer selv baseret på vores anbefalinger.',
      },
      {
        q: 'Hvad hvis vi allerede har en SEO-strategi?',
        a: 'Perfekt — GEO og SEO supplerer hinanden. Stærkt indhold og domæneautoritet fra SEO understøtter GEO-synlighed. Vi arbejder typisk parallelt med eksisterende SEO-indsatser og tager os af det AI-specifikke lag oven på det I allerede har. Ingen konkurrenceforhold — det er additivt.',
      },
      {
        q: 'Hvad sker der, hvis en AI-platform ændrer sin algoritme?',
        a: 'Vi overvåger løbende ændringer i AI-modellernes rankingadfærd og justerer vores promptlister og anbefalinger tilsvarende. Netop derfor logger vi modelversionerne i hver analyse — så vi kan skelne mellem en reel ændring i din synlighed og en modelopdatering. Det er en af grundene til at et løbende abonnement giver mere værdi end en engangsoptimering.',
      },
    ],
  },
];

// ── FAQAccordion — single expandable item ────────────────────────────────────
function FAQAccordion({ item, isOpen, onToggle }) {
  return (
    <div style={{ borderBottom: '1px solid var(--line)' }}>
      <button
        onClick={onToggle}
        style={{
          width: '100%', display: 'flex', justifyContent: 'space-between',
          alignItems: 'center', padding: '22px 0', textAlign: 'left',
          background: 'none', border: 'none', cursor: 'pointer', fontFamily: 'inherit',
        }}
      >
        <span style={{
          fontFamily: 'var(--font-display)', fontSize: 17, fontWeight: 600,
          color: 'var(--navy)', letterSpacing: '-0.01em', lineHeight: 1.3,
          paddingRight: 24, textAlign: 'left',
        }}>{item.q}</span>
        <span style={{
          color: isOpen ? 'var(--gold-dark)' : 'var(--ink-3)',
          flexShrink: 0, transition: 'color .15s ease',
        }}>
          {isOpen ? <Icon.minus/> : <Icon.plus/>}
        </span>
      </button>
      {isOpen && (
        <div style={{
          paddingBottom: 22, color: 'var(--ink-2)', fontSize: 15,
          lineHeight: 1.65, maxWidth: '66ch',
        }}>{item.a}</div>
      )}
    </div>
  );
}

// ── FAQCategorySection ───────────────────────────────────────────────────────
function FAQCategorySection({ cat, catIdx, openId, setOpenId, isLast }) {
  const iconEl = Icon[cat.icon]
    ? React.createElement(Icon[cat.icon], { style: { color: 'white' } })
    : null;

  return (
    <section
      id={`faq-${cat.key}`}
      style={{
        padding: '56px 0',
        borderBottom: isLast ? 'none' : '1px solid var(--line)',
        scrollMarginTop: 85,
      }}
    >
      <div className="wrap-narrow">
        <div style={{ display: 'flex', alignItems: 'flex-start', gap: 20, marginBottom: 36 }}>
          <div style={{
            width: 44, height: 44, borderRadius: 10,
            background: 'var(--navy)', display: 'grid', placeItems: 'center',
            flexShrink: 0, marginTop: 2,
          }}>
            {iconEl}
          </div>
          <div>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600,
              color: 'var(--navy)', letterSpacing: '-0.01em', marginBottom: 6,
            }}>{cat.title}</h2>
            <p style={{ fontSize: 14, color: 'var(--ink-3)', lineHeight: 1.5 }}>{cat.subtitle}</p>
          </div>
        </div>
        <div style={{ borderTop: '1px solid var(--line)' }}>
          {cat.items.map((item, itemIdx) => {
            const id = `${catIdx}-${itemIdx}`;
            return (
              <FAQAccordion
                key={id}
                item={item}
                isOpen={openId === id}
                onToggle={() => setOpenId(openId === id ? null : id)}
              />
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ── FAQPage — full page component ────────────────────────────────────────────
function FAQPage() {
  const [openId, setOpenId] = React.useState(null);

  const totalQ = FAQ_CATEGORIES.reduce((s, c) => s + c.items.length, 0);

  return (
    <>
      {/* Hero */}
      <section style={{
        padding: '72px 0 64px',
        background: FAQ_BG,
        borderBottom: '1px solid var(--line)',
      }}>
        <div className="wrap-narrow" style={{ textAlign: 'center' }}>
          <span className="eyebrow" style={{ marginBottom: 16, display: 'inline-block' }}>FAQ</span>
          <h1 className="h1" style={{ marginBottom: 20, fontSize: 'clamp(30px, 4.5vw, 52px)' }}>
            Ofte stillede spørgsmål
          </h1>
          <p className="lede" style={{ margin: '0 auto 36px', fontSize: 17 }}>
            {totalQ} spørgsmål og svar fordelt på {FAQ_CATEGORIES.length} emner.
          </p>
          {/* Category quick-links */}
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, justifyContent: 'center' }}>
            {FAQ_CATEGORIES.map(cat => (
              <a
                key={cat.key}
                href={`#faq-${cat.key}`}
                style={{
                  fontSize: 13, fontWeight: 500, color: 'var(--navy)',
                  background: 'white', border: '1px solid var(--line)',
                  borderRadius: 100, padding: '6px 16px', textDecoration: 'none',
                  transition: 'border-color .15s ease, box-shadow .15s ease',
                }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = 'var(--line-2)'; e.currentTarget.style.boxShadow = 'var(--sh)'; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = 'var(--line)'; e.currentTarget.style.boxShadow = 'none'; }}
              >{cat.title}</a>
            ))}
          </div>
        </div>
      </section>

      {/* Categories */}
      <div style={{ background: 'white' }}>
        {FAQ_CATEGORIES.map((cat, catIdx) => (
          <FAQCategorySection
            key={cat.key}
            cat={cat}
            catIdx={catIdx}
            openId={openId}
            setOpenId={setOpenId}
            isLast={catIdx === FAQ_CATEGORIES.length - 1}
          />
        ))}
      </div>

      {/* Bottom CTA */}
      <section style={{
        padding: '80px 0',
        background: 'var(--bg-warm)',
        borderTop: '1px solid var(--line)',
      }}>
        <div className="wrap-narrow" style={{ textAlign: 'center' }}>
          <span className="eyebrow" style={{ marginBottom: 16, display: 'inline-block' }}>Stadig spørgsmål?</span>
          <h2 className="h2" style={{ marginBottom: 16, fontSize: 'clamp(24px, 3vw, 36px)' }}>
            Den bedste måde at lære det at kende er en gratis analyse.
          </h2>
          <p style={{
            fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.6,
            maxWidth: '50ch', margin: '0 auto 32px',
          }}>
            5 minutter. 100 prompts. Et konkret billede af din AI-synlighed i dag.
          </p>
          <div style={{ display: 'inline-flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center' }}>
            <a href="index.html#audit" className="btn btn-gold btn-lg">
              Få gratis analyse <Icon.arrow/>
            </a>
            <a href="priser.html" className="btn btn-outline btn-lg">
              Se priser
            </a>
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, { FAQPage });
