// Lanceringskunder landing page components.
// Mirrors the design language of priser.html / om.html — DM Sans + Inter,
// navy + gold + cream, hairline borders, gold underline accents.
//
// Operator-locked content (do not paraphrase). The Pro Stripe link is
// resolved at click time via the global GEOKLAR_PAYMENT_LINKS map so any
// future Payment-Link rotation only requires a single edit in
// js/stripe-payment-links.js — not here.

// ⚠ TEMP: this currently resolves to the STANDARD Pro Payment Link
// (12.995 kr/md) — wrong for Lanceringskunder which should charge
// 7.795 kr/md. Operator is creating a dedicated 'GeoKlar Pro —
// Lanceringskunde' Stripe product + Payment Link. When that lands,
// either:
//   (a) replace this constant with the new buy.stripe.com URL, or
//   (b) add a `lanceringskunde` key to GEOKLAR_PAYMENT_LINKS in
//       js/stripe-payment-links.js and read from there (preferred —
//       same rotation pattern as the other tiers).
const FOUNDING_PRO_MONTHLY_HREF = (
  (window.GEOKLAR_PAYMENT_LINKS && window.GEOKLAR_PAYMENT_LINKS.lanceringskunde) ||
  (window.GEOKLAR_PAYMENT_LINKS && window.GEOKLAR_PAYMENT_LINKS.pro &&
   window.GEOKLAR_PAYMENT_LINKS.pro.monthly) ||
  "checkout.html?tier=pro&billing=monthly"
);

const FOUNDING_DEADLINE_DA = "fredag den 15. maj";
const FOUNDING_SEATS_TOTAL = 5;
const FOUNDING_SEATS_LEFT = 3;
const FOUNDING_PRICE_DA = "7.795 kr/md";
const FOUNDING_LIST_PRICE_DA = "12.995 kr/md";
const FOUNDING_DISCOUNT_LABEL = "40% rabat";
const FOUNDING_TOTAL_SAVINGS_DA = "15.600 kr";

// ── Hero ─────────────────────────────────────────────────────────────
function FoundingHero() {
  return (
    <section style={{
      background: 'var(--bg-warm)',
      padding: '88px 0 64px',
      textAlign: 'center',
      position: 'relative',
      overflow: 'hidden',
    }}>
      <div className="wrap-narrow" style={{ position: 'relative', zIndex: 1 }}>
        <span className="eyebrow" style={{
          marginBottom: 18, display: 'inline-block', color: 'var(--gold-dark)',
        }}>Lanceringskunder · {FOUNDING_SEATS_LEFT} pladser tilbage</span>
        <h1 className="h1" style={{
          maxWidth: 880, margin: '0 auto 22px',
          fontFamily: 'var(--font-display)',
          fontSize: 'clamp(34px, 5.2vw, 56px)',
          letterSpacing: '-0.02em',
          lineHeight: 1.1,
        }}>
          Lanceringskunder — <span style={{ color: 'var(--gold-dark)' }}>5 pladser. 3 måneder. {FOUNDING_DISCOUNT_LABEL}.</span>
        </h1>
        <p style={{
          fontSize: 18, color: 'var(--ink-2)', lineHeight: 1.6,
          maxWidth: '54ch', margin: '0 auto 36px',
        }}>
          De første 5 danske revisionsfirmaer får hele <b>Pro-pakken</b> til
          {' '}{FOUNDING_PRICE_DA} — i stedet for {FOUNDING_LIST_PRICE_DA} —
          de første 3 måneder. En besparelse på {FOUNDING_TOTAL_SAVINGS_DA}.
        </p>
        <div style={{
          display: 'inline-flex', flexWrap: 'wrap', gap: 12,
          justifyContent: 'center', alignItems: 'center',
        }}>
          <a href={FOUNDING_PRO_MONTHLY_HREF}
             target="_blank" rel="noopener noreferrer"
             className="btn btn-gold btn-lg">
            Tag en plads <Icon.arrow/>
          </a>
          <a href="#hvorfor" className="btn btn-outline btn-lg">
            Læs mere
          </a>
        </div>
        <div style={{ marginTop: 22, fontSize: 13, color: 'var(--ink-3)' }}>
          Programmet lukker {FOUNDING_DEADLINE_DA}.
        </div>
      </div>
    </section>
  );
}

// ── Hvorfor ──────────────────────────────────────────────────────────
function FoundingWhy() {
  return (
    <section id="hvorfor" className="section" style={{
      paddingTop: 72, paddingBottom: 48, scrollMarginTop: 85,
    }}>
      <div className="wrap-narrow center">
        <span className="eyebrow" style={{ marginBottom: 14, display: 'inline-block' }}>
          Hvorfor
        </span>
        <h2 className="h2" style={{ marginBottom: 18 }}>
          Vi søger 5 danske revisionsfirmaer der vil forme GeoKlar fra starten.
        </h2>
        <p style={{
          fontSize: 17, color: 'var(--ink-2)', lineHeight: 1.7,
          maxWidth: '54ch', margin: '0 auto',
        }}>
          GeoKlar er nyt. Vi har bygget produktet på vores egen erfaring og
          research, men de næste 3 måneder af udvikling skal styres af reelle
          revisionsfirmaer — ikke antagelser. Som Lanceringskunde får du
          rabat på Pro mod at hjælpe os med at gøre det rigtige bedre. Vi
          arbejder tæt sammen, du får direkte indflydelse på roadmap, og du
          står først i køen til alle nye features.
        </p>
      </div>
    </section>
  );
}

// ── Du får ───────────────────────────────────────────────────────────
function FoundingYouGet() {
  const items = [
    {
      eyebrow: '40% rabat',
      h: `Pro-pakke til ${FOUNDING_PRICE_DA} i 3 måneder`,
      d: `Hele Pro-tier — 120 prompts dagligt, alle 4 AI-platforme, FAQ-pakke + månedlig gap-analyse, top 5 konkurrent-bench. Listepris er ${FOUNDING_LIST_PRICE_DA}; I betaler ${FOUNDING_PRICE_DA}. Efter 3 måneder skifter prisen til listeprisen, eller I kan opsige uden binding.`,
    },
    {
      eyebrow: 'Direkte linje',
      h: 'Direkte kontakt til stifter',
      d: 'Slack-kanal eller e-mail direkte til Victor — ingen support-tickets, ingen first-line. Spørgsmål besvares samme arbejdsdag.',
    },
    {
      eyebrow: '1:1',
      h: 'Månedlig 1:1 strategi-session',
      d: '30 minutter hver måned hvor vi går jeres dashboard igennem sammen — hvad rykker, hvilke konkurrenter dukker op, og hvor I bør prioritere indsatsen næste måned.',
    },
    {
      eyebrow: 'Først i køen',
      h: 'Førsteret til alle nye features',
      d: 'Nye dashboards, nye AI-platforme, nye konkurrent-værktøjer — Lanceringskunder får adgang før alle andre. I kan også vælge at sige nej hvis det ikke passer jeres workflow.',
    },
  ];
  return (
    <section className="section" style={{
      paddingTop: 64, paddingBottom: 64, background: 'var(--bg-alt)',
    }}>
      <div className="wrap-wide">
        <div className="section-head">
          <span className="eyebrow">Du får</span>
          <h2 className="h2">4 ting der ikke står på pris-siden</h2>
        </div>
        <div className="grid-2" style={{ gap: 20, marginTop: 40 }}>
          {items.map((it, i) => (
            <div key={i} style={{
              background: 'white',
              border: '1px solid var(--line)',
              borderRadius: 12,
              padding: '28px 28px',
              display: 'flex', flexDirection: 'column',
            }}>
              <span style={{
                fontSize: 11, fontWeight: 600, letterSpacing: '0.08em',
                textTransform: 'uppercase', color: 'var(--gold-dark)',
                marginBottom: 12,
              }}>{it.eyebrow}</span>
              <h3 style={{
                fontFamily: 'var(--font-display)', fontSize: 19,
                fontWeight: 600, color: 'var(--navy)',
                letterSpacing: '-0.01em', marginBottom: 10, lineHeight: 1.3,
              }}>{it.h}</h3>
              <p style={{
                fontSize: 14.5, color: 'var(--ink-2)', lineHeight: 1.65,
                margin: 0,
              }}>{it.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Til gengæld ──────────────────────────────────────────────────────
function FoundingInReturn() {
  const items = [
    {
      h: 'Ærlig løbende feedback',
      d: 'Når noget virker — sig det. Når noget ikke virker — sig det også. Vi laver kort ringerunde 2 gange i løbet af de 3 måneder for at indsamle struktureret feedback. 20-30 minutter hver gang.',
    },
    {
      h: 'Logo-tilladelse på vores hjemmeside',
      d: 'Vi viser jeres logo som Lanceringskunde på geoklar.dk. I kan kræve det taget ned når som helst, og I bestemmer hvilken kontaktperson eventuelt linkes.',
    },
    {
      h: 'Kort anmeldelse efter 3 måneder hvis I er tilfredse',
      d: '2-3 sætninger I selv skriver. Hvis I ikke er tilfredse efter 3 måneder, beder vi jer ikke om en anmeldelse — og I kan opsige uden konsekvenser.',
    },
  ];
  return (
    <section className="section" style={{ paddingTop: 64, paddingBottom: 64 }}>
      <div className="wrap-narrow">
        <div className="section-head">
          <span className="eyebrow">Til gengæld</span>
          <h2 className="h2">Hvad vi beder om</h2>
        </div>
        <div style={{ marginTop: 32 }}>
          {items.map((it, i) => (
            <div key={i} style={{
              padding: '22px 0',
              borderBottom: i < items.length - 1 ? '1px solid var(--line)' : 'none',
              display: 'flex', gap: 18, alignItems: 'flex-start',
            }}>
              <div style={{
                flexShrink: 0,
                width: 30, height: 30, borderRadius: '50%',
                background: 'var(--gold-soft)',
                color: 'var(--gold-dark)',
                display: 'grid', placeItems: 'center',
                fontFamily: 'var(--font-display)', fontWeight: 600,
                fontSize: 14, marginTop: 1,
              }}>{i + 1}</div>
              <div>
                <h3 style={{
                  fontFamily: 'var(--font-display)', fontSize: 17,
                  fontWeight: 600, color: 'var(--navy)',
                  letterSpacing: '-0.01em', marginBottom: 6,
                }}>{it.h}</h3>
                <p style={{
                  fontSize: 14.5, color: 'var(--ink-2)', lineHeight: 1.65,
                  margin: 0,
                }}>{it.d}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Sådan kommer du i gang ───────────────────────────────────────────
function FoundingHow() {
  const steps = [
    {
      n: '01',
      label: 'I dag',
      h: 'Sign up',
      d: 'Tag en af de 3 ledige pladser. Stripe checkout, Pro-tier til Lanceringskunde-prisen.',
    },
    {
      n: '02',
      label: 'Inden for 1 hverdag',
      h: '20 min onboarding',
      d: 'Vi kobler op via opkald — gennemgår jeres branche, jeres top-konkurrenter, og hvilke 10 prompts I særligt vil følge.',
    },
    {
      n: '03',
      label: 'Inden for 14 dage',
      h: 'Første resultater',
      d: 'Schema + llms.txt er installeret, første ugentlige rapport er sendt, dashboardet er live, og vi har første 1:1-session i kalenderen.',
    },
  ];
  return (
    <section className="section" style={{
      paddingTop: 64, paddingBottom: 64, background: 'var(--bg-warm)',
    }}>
      <div className="wrap-wide">
        <div className="section-head">
          <span className="eyebrow">Sådan kommer du i gang</span>
          <h2 className="h2">Fra sign-up til første resultat på 14 dage</h2>
        </div>
        <div className="grid-3" style={{ gap: 20, marginTop: 40 }}>
          {steps.map((s, i) => (
            <div key={i} style={{
              background: 'white',
              border: '1px solid var(--line)',
              borderRadius: 12,
              padding: '28px 24px',
              display: 'flex', flexDirection: 'column',
            }}>
              <div style={{
                fontFamily: 'var(--font-display)',
                fontSize: 28, fontWeight: 600,
                color: 'var(--gold)', letterSpacing: '-0.02em',
                marginBottom: 8, lineHeight: 1,
              }}>{s.n}</div>
              <span style={{
                fontSize: 11, fontWeight: 600, letterSpacing: '0.08em',
                textTransform: 'uppercase', color: 'var(--ink-3)',
                marginBottom: 10,
              }}>{s.label}</span>
              <h3 style={{
                fontFamily: 'var(--font-display)', fontSize: 18,
                fontWeight: 600, color: 'var(--navy)',
                letterSpacing: '-0.01em', marginBottom: 8,
              }}>{s.h}</h3>
              <p style={{
                fontSize: 14, color: 'var(--ink-2)', lineHeight: 1.6,
                margin: 0,
              }}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── CTA ──────────────────────────────────────────────────────────────
function FoundingCTA() {
  return (
    <section className="bg-navy" style={{ padding: '96px 0', textAlign: 'center' }}>
      <div className="wrap center">
        <div style={{
          display: 'inline-block',
          padding: '6px 14px',
          borderRadius: 100,
          background: 'rgba(184,148,74,0.18)',
          color: 'var(--gold-light)',
          fontSize: 12, fontWeight: 600, letterSpacing: '0.06em',
          textTransform: 'uppercase', marginBottom: 20,
        }}>
          {FOUNDING_SEATS_TOTAL} pladser. {FOUNDING_SEATS_LEFT} tilbage.
        </div>
        <h2 className="h2" style={{ color: 'white', marginBottom: 18 }}>
          Tag en plads inden {FOUNDING_DEADLINE_DA}
        </h2>
        <p style={{
          color: 'rgba(255,255,255,0.78)', fontSize: 17, lineHeight: 1.6,
          maxWidth: '54ch', margin: '0 auto 36px',
        }}>
          Pro til {FOUNDING_PRICE_DA} de første 3 måneder. Spar
          {' '}{FOUNDING_TOTAL_SAVINGS_DA}. Ingen binding udover de 3 måneder.
        </p>
        <a href={FOUNDING_PRO_MONTHLY_HREF}
           target="_blank" rel="noopener noreferrer"
           className="btn btn-gold btn-lg">
          Tag en plads nu <Icon.arrow/>
        </a>
        {/* Pricing transparency: signal that this isn't a 3-month contract,
            it's 3 months at the discounted rate that auto-rolls to listprice. */}
        <div style={{
          marginTop: 18, fontSize: 13.5,
          color: 'rgba(255,255,255,0.78)', lineHeight: 1.55,
          maxWidth: '52ch', margin: '18px auto 0',
        }}>
          Faktureres månedligt i 3 måneder. Derefter ruller prisen til
          standard {FOUNDING_LIST_PRICE_DA}. Opsig når som helst.
        </div>
        <div style={{ marginTop: 14, fontSize: 12.5, color: 'rgba(255,255,255,0.5)' }}>
          Stripe håndterer betaling. Faktura sendes via VP Insights, CVR 43262114.
        </div>
      </div>
    </section>
  );
}

// ── Logo wall — placeholder until first lanceringskunder onboard ─────
// Single subtle placeholder card. Replaces the previous 5-numbered-box
// version which was confusing alongside the "3 pladser tilbage" banner
// (5 empty boxes vs. only 2 sold seats read as inconsistent).
//
// When the program is full and the first logos are ready to publish,
// replace this whole component body with a real logo grid: pull
// logos from a `LANCERINGSKUNDE_LOGOS` array of {firma, logo_url}.
function FoundingLogoWall() {
  return (
    <section className="section" style={{
      paddingTop: 64, paddingBottom: 64, background: 'var(--bg-alt)',
    }}>
      <div className="wrap-narrow center">
        <span className="eyebrow" style={{ marginBottom: 14, display: 'inline-block' }}>
          De udvalgte få
        </span>
        <h2 className="h2" style={{ marginBottom: 14 }}>
          Logoer kommer her
        </h2>
        <p style={{
          fontSize: 15, color: 'var(--ink-3)', lineHeight: 1.65,
          maxWidth: '54ch', margin: '0 auto 32px',
        }}>
          Vi viser vores lanceringskunders logoer her efter onboarding er
          færdig — typisk 2–4 uger efter signup, og kun med firmaets
          eksplicitte samtykke.
        </p>
        <div style={{
          maxWidth: 480, margin: '0 auto',
          background: 'white',
          border: '1.5px dashed var(--line-2)',
          borderRadius: 12,
          padding: '32px 24px',
          fontSize: 14, color: 'var(--ink-4)',
          fontStyle: 'italic',
          letterSpacing: '0.01em',
        }}>
          Lanceringskunderne offentliggøres når programmet er fuldt
        </div>
      </div>
    </section>
  );
}

// ── FAQ ──────────────────────────────────────────────────────────────
function FoundingFAQ() {
  const items = [
    {
      q: 'Hvad er GEO?',
      a: "Generative Engine Optimization. SEO handler om at vises i Googles søgeresultater — GEO handler om at blive nævnt og anbefalet i selve svaret, når brugere spørger ChatGPT, Claude, Perplexity eller Gemini. Det kræver andre signaler (struktureret data, llms.txt, AI-venligt indhold) og andre KPI'er (mention rate, citation share, response inclusion). For revisorer er det forskellen på, om en lokal kunde får jer anbefalet — eller får en af de fire store.",
    },
    {
      q: 'Hvor lang tid tager opsætning?',
      a: 'Omkring 14 dage fra sign-up til første målbare data. Dag 1: kort kickoff-opkald (20 min) hvor vi gennemgår jeres branche, top-konkurrenter og hvilke prompts I vil følge. Dag 1–7: vi installerer schema + llms.txt, opsætter dashboardet, og kører første scan. Dag 7–14: første ugentlige rapport leveres, og vi booker første 1:1-session.',
    },
    {
      q: 'Hvad sker der efter 3 måneder?',
      a: `Prisen skifter til listeprisen (${FOUNDING_LIST_PRICE_DA}) automatisk. I kan vælge at fortsætte, downgrade til Growth, eller opsige helt — der er ingen binding udover de første 3 måneder. Vi sender en mail 14 dage før prisskiftet med en kort opsummering af hvad I har fået ud af programmet.`,
    },
    {
      q: 'Kan jeg opsige når som helst?',
      a: 'Ja, efter de første 3 måneder. De 3 måneder er bindingen — det er den periode hvor I har rabatprisen, og den periode hvor vi henter feedback fra jer. Efter de 3 måneder er det helt almindeligt månedligt abonnement med 30 dages opsigelse.',
    },
    {
      q: 'Hvad hvis jeg ikke ser resultater?',
      a: 'Vi sender ugentlige rapporter, så I ved hvad vi laver. Hvis I efter 6 uger ikke ser bevægelse i jeres synlighed på de prompts vi tracker, sætter vi os ned med jer og finder ud af hvorfor — typisk er det enten et indekserings-issue (cralwerne har ikke set ændringerne endnu) eller et indholds-issue (jeres hjemmeside mangler det indhold AI behøver). Vi løser begge dele uden ekstra omkostning så længe I er Lanceringskunde.',
    },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="section" style={{ paddingTop: 64, paddingBottom: 80 }}>
      <div className="wrap-narrow">
        <div className="section-head">
          <span className="eyebrow">FAQ</span>
          <h2 className="h2">5 spørgsmål inden du booker</h2>
        </div>
        <div style={{ borderTop: '1px solid var(--line)', marginTop: 32 }}>
          {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: '22px 0', textAlign: 'left',
                background: 'none', border: 'none', cursor: 'pointer',
              }}>
                <span style={{
                  fontFamily: 'var(--font-display)', fontSize: 18,
                  fontWeight: 600, color: 'var(--navy)',
                  letterSpacing: '-0.01em',
                }}>{it.q}</span>
                <span style={{
                  color: 'var(--ink-3)', fontSize: 22, lineHeight: 1,
                  marginLeft: 16,
                }}>{open === i ? '−' : '+'}</span>
              </button>
              {open === i && (
                <div style={{
                  paddingBottom: 22, color: 'var(--ink-2)',
                  fontSize: 15, lineHeight: 1.65, maxWidth: '64ch',
                }}>{it.a}</div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  FoundingHero, FoundingWhy, FoundingYouGet, FoundingInReturn,
  FoundingHow, FoundingCTA, FoundingLogoWall, FoundingFAQ,
});