// Main landing app for billigste a-kasse.dk
// Uses: window.Quiz, window.ThankYou, window.Wavy

const { useState, useEffect } = React;

const DEFAULT_TWEAKS = /*EDITMODE-BEGIN*/{
  "heroLayout": "centered",
  "heroHeadline": "find-billigste",
  "savingsAmount": 6000,
  "showSavingsCases": true,
  "stickyCTA": true
}/*EDITMODE-END*/;

const HEADLINES = {
  'find-billigste': {
    pre: 'Find Danmarks',
    accent: 'billigste',
    post: 'a-kasse',
    sub: 'Det tager under 30 sekunder. Vi finder den billigste a-kasse til dig, så du ikke skal.'
  },
  'spar-6000': {
    pre: 'Spar op til',
    accent: '6.000 kr.',
    post: 'om året',
    sub: 'Nye kunder sparer i snit 6.000 kr. ved at finde den billigste a-kasse. Tjek hvor meget DU kan spare.'
  },
  'nemt-tjek': {
    pre: 'Danmarks',
    accent: 'nemmeste',
    post: 'a-kasse tjek',
    sub: 'Svar på 2 hurtige spørgsmål. Vi finder den billigste a-kasse til dig, så du ikke skal.'
  },
};

const SAVINGS_CASES = [
  { name: 'Mette',   age: 34, role: 'Sygeplejerske',         saved: 1284 },
  { name: 'Jonas',   age: 28, role: 'Tømrer',                saved: 1092 },
  { name: 'Sara',    age: 41, role: 'HR-konsulent',          saved:  900 },
  { name: 'Anders',  age: 52, role: 'IT-arkitekt',           saved: 1716 },
  { name: 'Camilla', age: 31, role: 'Pædagog',               saved: 1560 },
  { name: 'Lars',    age: 45, role: 'Lagermedarbejder',      saved: 1248 },
  { name: 'Sofie',   age: 26, role: 'Marketingkoordinator',  saved:  840 },
  { name: 'Mikkel',  age: 38, role: 'Sælger',                saved: 1380 },
  { name: 'Pernille', age: 49, role: 'Folkeskolelærer',      saved: 1452 },
  { name: 'Rasmus',  age: 33, role: 'Elektriker',            saved: 1116 },
  { name: 'Louise',  age: 29, role: 'Frisør',                saved:  696 },
  { name: 'Thomas',  age: 56, role: 'Mekaniker',             saved: 1620 },
];

const A_KASSER_TABLE = []; // removed — we don't name a-kasser publicly

const FAQ = [
  {
    q: 'Er det virkelig gratis?',
    a: 'Ja, helt. Det koster dig ingenting at få sammenlignet din a-kasse hos os. Vi får et lille honorar fra den a-kasse du eventuelt skifter til. Du betaler altid samme pris, uanset om du går gennem os eller selv.'
  },
  {
    q: 'Hvordan finder I den billigste til mig?',
    a: 'Vi kigger på din nuværende a-kasse, din branche, din alder og hvilken dækning du har brug for. Så matcher vi dig med den a-kasse der koster mindst, og som stadig dækker det du har brug for.'
  },
  {
    q: 'Hvad sker der med mine oplysninger?',
    a: 'Dine oplysninger bruges udelukkende til at give dig dit pristjek. Vi indsamler ikke CPR-nummer på hjemmesiden. Du bliver kontaktet én gang af en rådgiver, og dine data slettes når sagen lukkes. Vi følger naturligvis GDPR.'
  },
  {
    q: 'Hvor lang tid tager det at skifte?',
    a: 'Selve sammenligningen tager 30 sekunder. Hvis du beslutter dig for at skifte, klarer vi papirarbejdet for dig. Typisk er du i din nye a-kasse inden for 1-2 uger.'
  },
  {
    q: 'Mister jeg min anciennitet ved at skifte?',
    a: 'Nej. Din anciennitet i dagpengesystemet følger dig på tværs af a-kasser. Du beholder dine rettigheder og din optjente tid.'
  },
  {
    q: 'Kan jeg fortryde mit skift?',
    a: 'Ja. Du har 14 dages fortrydelsesret, og du kan altid skifte tilbage senere. Der er ingen binding hos os eller hos a-kasserne.'
  },
];

const MOOD_IMAGES = {
  workspace: 'https://images.unsplash.com/photo-1556761175-5973dc0f32e7?w=900&q=80&auto=format&fit=crop',
  smile: 'https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=900&q=80&auto=format&fit=crop',
  couple: 'https://images.unsplash.com/photo-1521737852567-6949f3f9f2b5?w=900&q=80&auto=format&fit=crop',
  laptop: 'https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=900&q=80&auto=format&fit=crop',
  coffee: 'https://images.unsplash.com/photo-1521737711867-e3b97375f902?w=900&q=80&auto=format&fit=crop',
};

/* ---------- Logo ---------- */
function Logo({ height = 36, variant = 'dark' }) {
  return (
    <img
      src="assets/logo-full.svg"
      alt="billigste a-kasse.dk"
      style={{ height, width: 'auto', display: 'block' }}
      className={variant === 'light' ? 'logo-img logo-img--light' : 'logo-img'}
    />
  );
}

function MarkOnly({ size = 28, mintBg = false }) {
  return (
    <svg viewBox="0 0 120 120" width={size} height={size}>
      <circle cx="60" cy="60" r="50" fill={mintBg ? '#00E5B8' : '#1F1057'}/>
      <path d="M 8 78 C 28 78, 36 50, 60 50 C 84 50, 92 78, 112 78" stroke={mintBg ? '#1F1057' : '#00E5B8'} strokeWidth="18" strokeLinecap="round" fill="none"/>
    </svg>
  );
}

/* ---------- Header ---------- */
function Header({ scrollToQuiz }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <header className={`site-header${scrolled ? ' is-scrolled' : ''}`}>
      <div className="site-header__inner">
        <a href="#" className="site-header__logo"><Logo height={36} /></a>
        <nav className="site-header__nav">
          <a href="#saadan">Sådan virker det</a>
          <a href="#faq">Spørgsmål & svar</a>
        </nav>
        <button className="site-header__cta" onClick={scrollToQuiz}>
          Tjek gratis her
          <svg width="16" height="16" viewBox="0 0 24 24"><path d="M 5 12 H 19 M 13 6 L 19 12 L 13 18" stroke="currentColor" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </button>
      </div>
    </header>
  );
}

/* ---------- Hero ---------- */
function Hero({ tweaks, quiz, onComplete }) {
  const h = HEADLINES[tweaks.heroHeadline] || HEADLINES['find-billigste'];
  const layout = tweaks.heroLayout;

  const heroBody = (
    <div className="hero-text">
      <h1 className="hero-headline">
        {h.pre}<br/>
        <span className="hero-headline__accent">
          <Wavy>{h.accent}</Wavy>
        </span>
        {' '}{h.post}
      </h1>
      <p className="hero-sub">{h.sub}</p>
    </div>
  );

  return (
    <section className={`hero hero--${layout}`}>
      <div className="hero-bg">
        <BackgroundWaves />
      </div>
      <div className={`hero-grid hero-grid--${layout}`}>
        {heroBody}
        <div className="hero-quiz" id="quiz">
          <LiveTicker />
          {quiz}
        </div>
      </div>
    </section>
  );
}

function CheckIcon() {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="12" r="11" fill="#00E5B8"/>
      <path d="M 7 12.5 L 10.5 16 L 17 9" stroke="#1F1057" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

function BackgroundWaves() {
  // Decorative S-curve ribbons that echo the logo
  return (
    <svg className="hero-waves" viewBox="0 0 1440 900" preserveAspectRatio="none">
      <defs>
        <linearGradient id="rib1" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" stopColor="#3B2A85" stopOpacity="0"/>
          <stop offset="0.5" stopColor="#3B2A85" stopOpacity="0.02"/>
          <stop offset="1" stopColor="#3B2A85" stopOpacity="0"/>
        </linearGradient>
        <linearGradient id="rib2" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" stopColor="#00E5B8" stopOpacity="0"/>
          <stop offset="0.5" stopColor="#00E5B8" stopOpacity="0.04"/>
          <stop offset="1" stopColor="#00E5B8" stopOpacity="0"/>
        </linearGradient>
      </defs>
      <path d="M -100 820 C 250 820, 400 620, 720 620 C 1040 620, 1200 820, 1540 820" stroke="url(#rib1)" strokeWidth="110" fill="none" strokeLinecap="round" />
      <path d="M -100 880 C 250 880, 400 700, 720 700 C 1040 700, 1200 880, 1540 880" stroke="url(#rib2)" strokeWidth="70" fill="none" strokeLinecap="round" />
    </svg>
  );
}

/* ---------- Savings cases ---------- */
function CaseCard({ name, age, role, saved }) {
  return (
    <article className="case-card">
      <div className="case-card__person">
        <span className="case-card__name">{name}, {age}</span>
        <span className="case-card__dot">·</span>
        <span className="case-card__role">{role}</span>
      </div>
      <div className="case-card__saved">
        <span className="case-card__saved-num">{saved.toLocaleString('da-DK')} kr.</span>
        <span className="case-card__saved-label">sparet/år</span>
      </div>
    </article>
  );
}

function SavingsCases() {
  const half = Math.ceil(SAVINGS_CASES.length / 2);
  const row1 = SAVINGS_CASES.slice(0, half);
  const row2 = SAVINGS_CASES.slice(half);
  return (
    <section className="section section--cases" id="cases">
      <div className="section-inner">
        <div className="section-head section-head--center">
          <div className="section-eyebrow">Sådan har andre sparet</div>
          <h2 className="section-title">10.000+ danskere har <Wavy>allerede skiftet</Wavy>.</h2>
        </div>
      </div>

      <div className="cases-marquee" aria-hidden="true">
        <div className="cases-marquee__row cases-marquee__row--left">
          {[...row1, ...row1, ...row1].map((c, i) => <CaseCard key={i} {...c} />)}
        </div>
        <div className="cases-marquee__row cases-marquee__row--right">
          {[...row2, ...row2, ...row2].map((c, i) => <CaseCard key={i} {...c} />)}
        </div>
      </div>
    </section>
  );
}

/* ---------- Count-up on scroll into view ---------- */
function CountUp({ to, duration = 1400, className }) {
  const [value, setValue] = useState(0);
  const ref = React.useRef(null);
  const started = React.useRef(false);

  useEffect(() => {
    const start = () => {
      if (started.current) return;
      started.current = true;
      const t0 = performance.now();
      const tick = (now) => {
        const p = Math.min(1, (now - t0) / duration);
        const eased = 1 - Math.pow(1 - p, 3);
        setValue(Math.round(to * eased));
        if (p < 1) requestAnimationFrame(tick);
      };
      requestAnimationFrame(tick);
    };

    const el = ref.current;
    if (!el || typeof IntersectionObserver === 'undefined') {
      start();
      return;
    }
    const obs = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) start();
    }, { threshold: 0.05, rootMargin: '0px 0px -10% 0px' });
    obs.observe(el);
    return () => obs.disconnect();
  }, [to, duration]);

  return <span ref={ref} className={className}>{value}</span>;
}

/* ---------- How it works ---------- */
function HowItWorks({ scrollToQuiz }) {
  return (
    <section className="section section--hiw" id="saadan">
      <div className="section-inner">
        <div className="section-head section-head--center">
          <div className="section-eyebrow">Sådan virker det</div>
          <h2 className="section-title">Fra pristjek til <Wavy>færdigt skift</Wavy>, uden besvær.</h2>
        </div>

        <div className="hiw-row">
          <div className="hiw-counter">
            <div className="hiw-counter__ring">
              <svg viewBox="0 0 220 220" className="hiw-counter__svg">
                <circle cx="110" cy="110" r="100" stroke="rgba(255,255,255,0.08)" strokeWidth="6" fill="none"/>
                <circle cx="110" cy="110" r="100" stroke="#00E5B8" strokeWidth="6" fill="none"
                  strokeDasharray="628" strokeDashoffset="0"
                  strokeLinecap="round"
                  transform="rotate(-90 110 110)"
                  className="hiw-counter__progress"
                />
              </svg>
              <div className="hiw-counter__inner">
                <div className="hiw-counter__num">
                  <CountUp to={30}/><span className="hiw-counter__unit">s</span>
                </div>
                <div className="hiw-counter__caption">så er du færdig</div>
              </div>
            </div>
          </div>

          <ol className="hiw-steps-row">
            <li>
              <div className="hiw-num">01</div>
              <h3>Tag pristjekket</h3>
              <p>Svar på 2 hurtige spørgsmål.</p>
            </li>
            <li>
              <div className="hiw-num">02</div>
              <h3>Få dit tilbud</h3>
              <p>En rådgiver ringer inden for 24 timer.</p>
            </li>
            <li>
              <div className="hiw-num">03</div>
              <h3>Vi skifter for dig</h3>
              <p>Din anciennitet følger med.</p>
            </li>
          </ol>
        </div>

        <div className="hiw-cta">
          <button className="btn-primary btn-primary--lg" onClick={scrollToQuiz}>
            Start mit pristjek nu
            <svg width="22" height="22" viewBox="0 0 24 24"><path d="M 5 12 H 19 M 13 6 L 19 12 L 13 18" stroke="currentColor" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </button>
        </div>
      </div>
    </section>
  );
}

/* ---------- Why us banner ---------- */
function WhyBanner() {
  return (
    <section className="section why-banner">
      <div className="section-inner">
        <div className="why-grid">
          <div className="why-image">
            <img src="assets/piggy.jpg" alt="Sparegris" />
            <div className="why-image__badge">
              <div className="why-image__badge-num">Spar op til</div>
              <div className="why-image__badge-txt">6.000 kr.</div>
            </div>
          </div>
          <div className="why-text">
            <div className="section-eyebrow">Hvorfor os</div>
            <h2 className="section-title">
              Penge er penge.<br/>
              Vi finder dem <Wavy>til dig.</Wavy>
            </h2>
            <p className="section-sub">
              De fleste betaler for meget for deres a-kasse, uden at vide det. Vi finder den billigste til dig og hjælper dig hele vejen igennem sammen med vores dygtige samarbejdspartnere.
            </p>
            <div className="why-chips">
              <span><CheckBadgeMint/> Op til 6.000 kr./år</span>
              <span><CheckBadgeMint/> Ingen CPR på siden</span>
              <span><CheckBadgeMint/> Anciennitet bevares</span>
              <span><CheckBadgeMint/> Gratis & uforpligtende</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CheckBadgeMint() {
  return (
    <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
      <circle cx="12" cy="12" r="11" fill="#00E5B8"/>
      <path d="M 7 12.5 L 10.5 16 L 17 9" stroke="#1F1057" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
}

/* ---------- FAQ ---------- */
function FAQAccordion() {
  const [open, setOpen] = useState(0);
  return (
    <section className="section section--tint" id="faq">
      <div className="section-inner section-inner--narrow">
        <div className="section-head section-head--center">
          <div className="section-eyebrow">Spørgsmål & svar</div>
          <h2 className="section-title">Det <Wavy>plejer folk</Wavy> at spørge om.</h2>
        </div>

        <div className="faq-list">
          {FAQ.map((item, i) => (
            <details key={i} className="faq-item" open={open === i} onToggle={(e) => { if (e.target.open) setOpen(i); }}>
              <summary>
                <span className="faq-q">{item.q}</span>
                <span className="faq-icon">
                  <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                    <circle cx="12" cy="12" r="11" fill="currentColor" opacity="0.15"/>
                    <path d="M 8 12 H 16 M 12 8 V 16" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"/>
                  </svg>
                </span>
              </summary>
              <p className="faq-a">{item.a}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Final CTA with quiz ---------- */
function FinalCTA({ quiz }) {
  return (
    <section className="section section--final" id="cta">
      <div className="final-bg"><BackgroundWaves/></div>
      <div className="section-inner">
        <div className="final-grid">
          <div className="final-text">
            <div className="section-eyebrow section-eyebrow--mint">Klar til at spare?</div>
            <h2 className="section-title section-title--light">
              Tag <Wavy>30 sekunder.</Wavy><br/>
              Find din besparelse.
            </h2>
            <p className="section-sub section-sub--light">
              Gratis og uforpligtende. Vi ringer dig op med et personligt tilbud inden for 24 timer.
            </p>
            <div className="final-trust">
              <span><CheckBadgeMint/> Gratis</span>
              <span><CheckBadgeMint/> Uforpligtende</span>
              <span><CheckBadgeMint/> GDPR-sikker</span>
              <span><CheckBadgeMint/> Du beholder anciennitet</span>
            </div>
          </div>
          <div className="final-quiz">
            <LiveTicker />
            {quiz}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Trust strip ---------- */
function TrustStrip() {
  return (
    <section className="trust-strip">
      <div className="trust-strip__inner">
        <div className="trust-item">
          <div className="trust-item__icon">
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none"><path d="M 12 2 L 4 6 V 12 C 4 17 8 21 12 22 C 16 21 20 17 20 12 V 6 Z" stroke="#1F1057" strokeWidth="2" fill="#A8F5E0"/><path d="M 8 12 L 11 15 L 16 9" stroke="#1F1057" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </div>
          <div>
            <strong>Gratis & uforpligtende</strong>
            <span>Du betaler ingenting for at sammenligne.</span>
          </div>
        </div>
        <div className="trust-item">
          <div className="trust-item__icon">
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none"><rect x="3" y="4" width="18" height="14" rx="2" stroke="#1F1057" strokeWidth="2" fill="#A8F5E0"/><path d="M 7 9 H 17 M 7 13 H 13" stroke="#1F1057" strokeWidth="2" strokeLinecap="round"/></svg>
          </div>
          <div>
            <strong>GDPR-sikker</strong>
            <span>Vi indsamler ikke CPR på hjemmesiden. Dine data slettes når sagen er lukket.</span>
          </div>
        </div>
        <div className="trust-item">
          <div className="trust-item__icon">
            <svg width="32" height="32" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="#1F1057" strokeWidth="2" fill="#A8F5E0"/><path d="M 12 7 V 13 L 16 15" stroke="#1F1057" strokeWidth="2" strokeLinecap="round"/></svg>
          </div>
          <div>
            <strong>10.000+ skiftet</strong>
            <span>Danskere der allerede har fundet en billigere a-kasse.</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer className="site-footer">
      <div className="site-footer__inner">
        <Logo height={42} variant="light"/>
        <div className="site-footer__copy">
          © 2026 billig-a-kasse.dk &nbsp;·&nbsp;
          <a href="handelsbetingelser.html" style={{opacity:.7, textDecoration:'none'}}>Handelsbetingelser & Persondatapolitik</a>
        </div>
      </div>
    </footer>
  );
}

/* ---------- Sticky bottom CTA ---------- */
function StickyCTA({ scrollToQuiz, visible }) {
  if (!visible) return null;
  return (
    <div className="sticky-cta">
      <div className="sticky-cta__inner">
        <div className="sticky-cta__txt">
          <strong>Spar op til 6.000 kr. om året</strong>
          <span>30 sekunder · gratis & uforpligtende</span>
        </div>
        <button className="btn-primary" onClick={scrollToQuiz}>Tjek gratis nu →</button>
      </div>
    </div>
  );
}

/* ---------- Tweaks ---------- */
function Tweaks({ tweaks, setTweak }) {
  return (
    <TweaksPanel>
      <TweakSection label="Hero layout">
        <TweakSelect
          value={tweaks.heroLayout}
          onChange={(v) => setTweak('heroLayout', v)}
          options={[
            { value: 'split',      label: 'Split · quiz til højre' },
            { value: 'centered',   label: 'Centreret · quiz nedenunder' },
            { value: 'card-on-purple', label: 'Mørk · quiz på indigo' },
          ]}
        />
      </TweakSection>

      <TweakSection label="Headline">
        <TweakSelect
          value={tweaks.heroHeadline}
          onChange={(v) => setTweak('heroHeadline', v)}
          options={[
            { value: 'find-billigste', label: 'Find Danmarks billigste a-kasse' },
            { value: 'spar-6000',      label: 'Spar op til 6.000 kr. om året' },
            { value: 'nemt-tjek',      label: 'Danmarks nemmeste a-kasse tjek' },
          ]}
        />
      </TweakSection>

      <TweakSection label="Besparelse i hero">
        <TweakSlider
          value={tweaks.savingsAmount}
          onChange={(v) => setTweak('savingsAmount', v)}
          min={2000} max={12000} step={500}
          unit=" kr."
        />
      </TweakSection>

      <TweakSection label="Sektioner">
        <TweakToggle label="Sådan har andre sparet" value={tweaks.showSavingsCases} onChange={(v) => setTweak('showSavingsCases', v)} />
        <TweakToggle label="Sticky bunde-CTA"        value={tweaks.stickyCTA}        onChange={(v) => setTweak('stickyCTA', v)} />
      </TweakSection>
    </TweaksPanel>
  );
}

/* ---------- App ---------- */
function App() {
  const [tweaks, setTweak] = useTweaks(DEFAULT_TWEAKS);
  const [result, setResult] = useState(null);

  const scrollToQuiz = () => {
    const el = document.getElementById('quiz');
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 80;
      window.scrollTo({ top, behavior: 'smooth' });
    }
  };

  if (result) {
    return (
      <div className="app">
        <Header scrollToQuiz={scrollToQuiz} />
        <ThankYou result={result} onReset={() => { setResult(null); setTimeout(() => window.scrollTo({ top: 0, behavior: 'smooth' }), 50); }} />
        <Footer />
      </div>
    );
  }

  const quizEl = <Quiz onComplete={setResult} savingsAmount={tweaks.savingsAmount} embedded />;
  const quizEl2 = <Quiz onComplete={setResult} savingsAmount={tweaks.savingsAmount} embedded />;

  return (
    <div className="app">
      <Header scrollToQuiz={scrollToQuiz} />
      <Hero tweaks={tweaks} quiz={quizEl} />
      {tweaks.showSavingsCases && <SavingsCases />}
      <HowItWorks scrollToQuiz={scrollToQuiz} />
      <WhyBanner />
      <FAQAccordion />
      <FinalCTA quiz={quizEl2} />
      <TrustStrip />
      <Footer />
      <StickyCTA visible={tweaks.stickyCTA} scrollToQuiz={scrollToQuiz} />
      <Tweaks tweaks={tweaks} setTweak={setTweak} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);