/* ============================================================
   sections-c.jsx — Vores issmage, Vælg dine kugler ved disken, FAQ
   Nye SEO- og salgsorienterede sektioner
   ============================================================ */

/* ---------------- VORES ISSMAGE ---------------- */
const FLAVOR_CATS = [
  { id: 'alle',     label: 'Alle smage' },
  { id: 'klassisk', label: 'Klassiske smage' },
  { id: 'frugt',    label: 'Frugt & sorbet' },
  { id: 'noedder',  label: 'Chokolade & nødder' },
  { id: 'boern',    label: 'Børnefavoritter' },
  { id: 'saeson',   label: 'Sæsonens smage' },
  { id: 'ny',       label: 'Nye i disken' },
];

// Placeholder-smage — ejeren kan nemt rette navne, farver og badges herunder.
const FLAVORS = [
  { n: 'Vanilje',       c: '#F1E2B6', cat: 'klassisk', boern: true },
  { n: 'Chokolade',     c: '#5A3A26', cat: 'klassisk', boern: true },
  { n: 'Stracciatella', c: '#ECE2CE', speck: '#4A3120', cat: 'klassisk' },
  { n: 'Cookies',       c: '#D7C098', speck: '#5A3A26', cat: 'klassisk', boern: true },
  { n: 'Saltkaramel',   c: '#CB9A55', cat: 'noedder', pop: true },
  { n: 'Skildpadde',    c: '#8A5A30', sub: 'karamel & chokolade', cat: 'noedder', ny: true },
  { n: 'Pistacie',      c: '#A6C57F', cat: 'noedder' },
  { n: 'Hasselnød',     c: '#B98A5E', cat: 'noedder' },
  { n: 'Jordbær',       c: '#E78AA0', cat: 'frugt', boern: true },
  { n: 'Mango sorbet',  c: '#F2A93E', cat: 'frugt', vegansk: true },
  { n: 'Citron sorbet', c: '#EEDC66', cat: 'frugt', vegansk: true },
  { n: 'Lakrids',       c: '#2C2C2C', cat: 'klassisk', sub: 'salt eller sød' },
  { n: 'Sæsonsmag',     c: '#E0A0B0', sub: 'skiftende — spørg ved disken', cat: 'saeson', ny: true },
];

function matchCat(fl, id) {
  if (id === 'alle') return true;
  if (id === 'boern') return !!fl.boern;
  if (id === 'ny') return !!fl.ny;
  return fl.cat === id;
}

function FlavorBadges({ fl }) {
  const badges = [];
  if (fl.ny) badges.push(['Ny', 'b-ny']);
  if (fl.pop) badges.push(['Populær', 'b-pop']);
  if (fl.vegansk) badges.push(['Vegansk', 'b-veg']);
  if (fl.boern) badges.push(['Børnefavorit', 'b-boern']);
  if (!badges.length) return null;
  return (
    <div className="flavor-badges">
      {badges.map(([t, c]) => <span key={t} className={'fb ' + c}>{t}</span>)}
    </div>
  );
}

function Scoopy({ c, speck }) {
  return (
    <span className="scoop-ball" style={{ '--sc': c }} aria-hidden="true">
      {speck && (
        <React.Fragment>
          <i className="spk" style={{ background: speck, top: '32%', left: '30%' }} />
          <i className="spk" style={{ background: speck, top: '52%', left: '58%' }} />
          <i className="spk" style={{ background: speck, top: '64%', left: '34%' }} />
          <i className="spk" style={{ background: speck, top: '40%', left: '64%' }} />
        </React.Fragment>
      )}
    </span>
  );
}

function Flavors() {
  const [cat, setCat] = useState('alle');
  const shown = FLAVORS.filter(f => matchCat(f, cat));
  return (
    <section id="issmage" className="section">
      <div className="wrap">
        <div style={{ textAlign: 'center', maxWidth: 660, margin: '0 auto 14px' }} className="reveal">
          <div className="eyebrow">Vores issmage</div>
          <h2 className="h-section">Smagene i disken</h2>
          <p className="lead" style={{ margin: '14px auto 0' }}>
            Et udvalg af vores gourmet-is og sorbet i Rudkøbing — fra klassiske favoritter til
            sæsonens nyheder. Smagene skifter, så der er altid noget nyt at opdage ved disken.
          </p>
        </div>

        <div className="flavor-filters reveal" role="tablist" aria-label="Filtrér issmage">
          {FLAVOR_CATS.map(fc => (
            <button
              key={fc.id}
              role="tab"
              aria-selected={cat === fc.id}
              className={'fchip' + (cat === fc.id ? ' active' : '')}
              onClick={() => setCat(fc.id)}
            >{fc.label}</button>
          ))}
        </div>

        <div className="flavor-grid reveal">
          {shown.map(fl => (
            <article key={fl.n} className="flavor-card">
              <Scoopy c={fl.c} speck={fl.speck} />
              <div className="flavor-name">{fl.n}</div>
              {fl.sub && <div className="flavor-sub">{fl.sub}</div>}
              <FlavorBadges fl={fl} />
            </article>
          ))}
        </div>

        <p className="flavor-note">
          <I d={Ico.star} size={15} fill style={{ color: 'var(--gold)', verticalAlign: '-2px' }} />{' '}
          Smagene herover er eksempler — det aktuelle udvalg står altid ved disken i butikken.
          Vil du være sikker på en bestemt smag? Ring og hør, hvad vi har i dag.
        </p>
      </div>
    </section>
  );
}

/* ---------------- VÆLG DINE KUGLER VED DISKEN ---------------- */
const COUNTER_TRAYS = [
  { n: 'Vanilje',     c: '#F1E2B6' },
  { n: 'Jordbær',     c: '#E78AA0' },
  { n: 'Chokolade',   c: '#5A3A26' },
  { n: 'Pistacie',    c: '#A6C57F' },
  { n: 'Saltkaramel', c: '#CB9A55' },
  { n: 'Mango',       c: '#F2A93E' },
];

const COUNTER_STEPS = [
  { ico: 'pin',   t: 'Kig ned i disken', d: 'Kom indenfor og se hele udvalget af gourmet-is og sorbet i isbakkerne ved disken.' },
  { ico: 'heart', t: 'Vælg dine kugler', d: 'Peg på dine favoritsmage — bland gerne flere kugler, eller spørg os om dagens anbefaling.' },
  { ico: 'star',  t: 'Bæger eller vaffel', d: 'Vi kugler op i bæger eller sprød vaffel og pynter med toppings, hvis du har lyst.' },
];

function Counter() {
  return (
    <section id="disken" className="section" style={{ background: 'var(--bg-warm)' }}>
      <div className="wrap">
        <div style={{ textAlign: 'center', maxWidth: 660, margin: '0 auto 44px' }} className="reveal">
          <div className="eyebrow">Sådan køber du is</div>
          <h2 className="h-section">Vælg dine kugler ved disken</h2>
          <p className="lead" style={{ margin: '14px auto 0' }}>
            Hos Det søde Hjørne i Rudkøbing handler is om oplevelsen. Du står foran disken,
            ser de friske smage i isbakkerne og vælger lige præcis dine favoritter.
          </p>
        </div>

        {/* Isdisk-illustration */}
        <div className="freezer reveal" role="img" aria-label="Isdisk med isbakker og smage: vanilje, jordbær, chokolade, pistacie, saltkaramel og mango">
          <div className="freezer-trays">
            {COUNTER_TRAYS.map(tr => (
              <div key={tr.n} className="tray">
                <div className="tray-tub">
                  <span className="tray-ice" style={{ '--sc': tr.c }} />
                </div>
                <div className="tray-label">{tr.n}</div>
              </div>
            ))}
          </div>
          <div className="freezer-glass" aria-hidden="true" />
        </div>

        <div className="counter-steps reveal">
          {COUNTER_STEPS.map((s, i) => (
            <article key={s.t} className="cstep">
              <span className="cstep-num">{i + 1}</span>
              <span className="cstep-ico"><I d={Ico[s.ico]} size={22} fill={s.ico === 'heart' || s.ico === 'star'} /></span>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </article>
          ))}
        </div>

        <div className="counter-extra reveal">
          <div className="ce-pill"><Scoop size={34} /> <span><b>Softice</b> med drys & dip</span></div>
          <div className="ce-pill"><I d={Ico.star} size={18} fill style={{ color: 'var(--gold)' }} /> <span><b>Toppings</b> efter eget valg</span></div>
          <div className="ce-pill"><I d={Ico.heart} size={18} fill style={{ color: 'var(--rose)' }} /> <span><b>Sæsonens</b> udvalg</span></div>
        </div>

        <div className="counter-cta reveal">
          <a href="#issmage" className="btn btn-primary">Se dagens smage <I d={Ico.arrow} size={16} /></a>
          <a href="#kontakt" className="btn btn-ghost"><I d={Ico.pin} size={15} /> Besøg os i Rudkøbing</a>
          <a href="#event" className="btn btn-rose">Forespørg på event-fryser</a>
        </div>
      </div>
    </section>
  );
}

/* ---------------- FAQ ---------------- */
const FAQS = [
  {
    q: 'Kan man leje en event-fryser til private fester?',
    a: 'Ja. Du kan leje en event-fryser med gourmet-is hos Det søde Hjørne til konfirmation, barnedåb, bryllup, firmafest, fødselsdag og andre fester på Langeland og omegn. Ring eller send en forespørgsel, så finder vi den rette løsning til dit arrangement.',
  },
  {
    q: 'Hvilke smage kan man vælge?',
    a: 'Vi har et bredt udvalg af gourmet-is og sorbet — klassiske smage som vanilje, chokolade og jordbær, samt favoritter som pistacie, saltkaramel og mango sorbet. Udvalget skifter med sæsonen, og du kan altid se de aktuelle smage ved disken i butikken.',
  },
  {
    q: 'Hvor ligger Det søde Hjørne?',
    a: 'Du finder os midt i Rudkøbing på Langeland. Den præcise adresse og åbningstider står under Kontakt her på siden — kig forbi til en kugle gourmet-is, en kop kaffe eller en sød dessert.',
  },
  {
    q: 'Har I softice?',
    a: 'Ja, vi har blød, cremet softice med drys, dip og toppings efter eget valg — en klassiker, som både børn og voksne er vilde med.',
  },
  {
    q: 'Kan man se de aktuelle issmage online?',
    a: 'Du kan se et udvalg af vores smage under "Vores issmage" her på siden. Da udvalget skifter løbende, viser disken i butikken altid det fulde, aktuelle udvalg. Følg os gerne på Facebook for nyheder om sæsonens smage.',
  },
  {
    q: 'Søger I medarbejdere?',
    a: 'Vi søger løbende smilende, stabile og servicemindede medarbejdere fra 14 år og op til vores isbutik i Rudkøbing. Læs mere under Job, ring til Ronney, eller send dit CV — vi vil glæde os til at høre fra dig.',
  },
];

function FaqItem({ item, open, onToggle }) {
  return (
    <div className={'faq-item' + (open ? ' open' : '')}>
      <button className="faq-q" aria-expanded={open} onClick={onToggle}>
        <span>{item.q}</span>
        <span className="faq-plus" aria-hidden="true">
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M9 4v10M4 9h10" /></svg>
        </span>
      </button>
      <div className="faq-a"><p>{item.a}</p></div>
    </div>
  );
}

function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" className="section">
      <div className="wrap">
        <div className="faq-head reveal">
          <div>
            <div className="eyebrow">Ofte stillede spørgsmål</div>
            <h2 className="h-section">Godt at vide<br/>om isbutikken</h2>
          </div>
          <p className="lead">
            Svar på de spørgsmål, vi oftest får om gourmet-is, softice og event-fryser i Rudkøbing.
            Mangler du svar? Så ring endelig — vi hjælper gerne.
          </p>
        </div>

        <div className="faq-list reveal">
          {FAQS.map((item, i) => (
            <FaqItem key={i} item={item} open={open === i} onToggle={() => setOpen(open === i ? -1 : i)} />
          ))}
        </div>

        <div className="faq-cta reveal">
          <span>Stadig i tvivl om noget?</span>
          <a href="tel:+4529717186" className="btn btn-primary btn-sm"><I d={Ico.phone} size={15} /> Ring 29 71 71 86</a>
          <a href="#event" className="btn btn-ghost btn-sm">Forespørg på event-fryser</a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Flavors, Counter, FAQ });