/* ============================================================
   sections-a.jsx — Nav, Hero, About, Products
   ============================================================ */

const NAV_LINKS = [
  ['#om', 'Om butikken'],
  ['#udvalg', 'Is & udvalg'],
  ['#event', 'Event-fryser'],
  ['#galleri', 'Galleri'],
  ['#job', 'Job'],
  ['#kontakt', 'Kontakt'],
];

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  useEffect(() => { document.body.style.overflow = open ? 'hidden' : ''; }, [open]);

  return (
    <React.Fragment>
      <nav className={'nav' + (scrolled ? ' scrolled' : '')}>
        <div className="wrap nav-inner">
          <a href="#top" className="nav-logo" aria-label="Det søde Hjørne">
            <img src="assets/logo.png" alt="Det søde Hjørne" />
          </a>
          <div className="nav-links">
            {NAV_LINKS.map(([h, t]) => <a key={h} href={h}>{t}</a>)}
          </div>
          <div className="nav-cta">
            <a href="tel:+4529717186" className="btn btn-ghost btn-sm"><I d={Ico.phone} size={15} /> 29 71 71 86</a>
            <a href="#event" className="btn btn-primary btn-sm">Lej event-fryser</a>
            <button className="nav-burger" aria-label="Menu" onClick={() => setOpen(true)}>
              <svg width="22" height="22" viewBox="0 0 22 22" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M3 6h16M3 11h16M3 16h16"/></svg>
            </button>
          </div>
        </div>
      </nav>

      <div className={'scrim' + (open ? ' show' : '')} onClick={() => setOpen(false)} />
      <aside className={'mobile-menu' + (open ? ' open' : '')}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
          <span className="nl-text" style={{ fontFamily: 'Parisienne, cursive', fontSize: 26, color: 'var(--gold-deep)' }}>Det søde Hjørne</span>
          <button className="nav-burger" style={{ display: 'inline-flex' }} aria-label="Luk" onClick={() => setOpen(false)}>
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M5 5l10 10M15 5L5 15"/></svg>
          </button>
        </div>
        {NAV_LINKS.map(([h, t]) => <a key={h} href={h} onClick={() => setOpen(false)}>{t}</a>)}
        <a href="#event" onClick={() => setOpen(false)} className="btn btn-primary" style={{ marginTop: 16 }}>Lej event-fryser</a>
      </aside>
    </React.Fragment>
  );
}

/* ---------------- HERO ---------------- */
function HeroActions() {
  return (
    <div className="hero-actions">
      <a href="#udvalg" className="btn btn-primary">Se vores udvalg <I d={Ico.arrow} size={16} /></a>
      <a href="#event" className="btn btn-ghost">Lej event-fryser</a>
    </div>
  );
}

function Hero({ variant }) {
  const blobs = (
    <React.Fragment>
      <span className="hero-blob" style={{ width: 320, height: 320, background: 'var(--rose-soft)', top: -60, left: -80 }} />
      <span className="hero-blob" style={{ width: 260, height: 260, background: 'color-mix(in oklab, var(--gold-soft) 70%, transparent)', bottom: -40, right: -60 }} />
      <span className="hero-blob" style={{ width: 180, height: 180, background: 'color-mix(in oklab, var(--mint) 60%, transparent)', top: '40%', right: '12%' }} />
    </React.Fragment>
  );

  if (variant === 'split') {
    return (
      <header id="top" className="hero section">
        {blobs}
        <div className="wrap hero-split">
          <div className="reveal in">
            <img className="hero-logo" src="assets/logo.png" alt="Det søde Hjørne" />
            <div className="eyebrow">Velkommen til</div>
            <h1 className="h-display">Det søde Hjørne<br/>i Rudkøbing</h1>
            <p className="lead" style={{ marginTop: 18 }}>Gourmet-is, kaffe og søde øjeblikke i hjertet af byen — lavet med kærlighed og serveret med et smil.</p>
            <HeroActions />
            <div className="hero-pills">
              <span className="pill"><I d={Ico.heart} size={14} fill style={{ color: 'var(--rose)' }} /> Lokal isbutik</span>
              <span className="pill"><I d={Ico.star} size={14} fill style={{ color: 'var(--gold)' }} /> Gourmet-is</span>
              <span className="pill"><I d={Ico.clock} size={14} style={{ color: 'var(--gold-deep)' }} /> Ny i byen</span>
            </div>
          </div>
          <div className="hero-media reveal in">
            <image-slot id="hero-split" shape="rounded" radius="32"
              src="assets/photos/storefront.jpg"
              placeholder="Foto: butik / softice / hyggelig stemning"></image-slot>
            <div className="hero-badge float"><b>Ny</b><span>i Rudkøbing</span></div>
          </div>
        </div>
      </header>
    );
  }

  if (variant === 'fuldt') {
    return (
      <header id="top" className="hero section" style={{ paddingTop: 110 }}>
        <div className="wrap hero-full">
          <div className="hero-stage">
            <image-slot id="hero-full" shape="rect"
              src="assets/photos/storefront.jpg"
              placeholder="Stort stemningsfoto — butik, softice eller gourmet-is"></image-slot>
            <div className="hero-overlay">
              <div className="hero-card reveal in">
                <img className="hero-logo" src="assets/logo.png" alt="Det søde Hjørne" />
                <h1 className="h-display">Søde øjeblikke i hjertet af byen</h1>
                <p className="lead" style={{ marginTop: 16, color: '#fff7ea' }}>Gourmet-is, kaffe og søde fristelser — velkommen til Det søde Hjørne i Rudkøbing.</p>
                <div className="hero-actions" style={{ justifyContent: 'flex-start' }}>
                  <a href="#udvalg" className="btn btn-on-dark">Se vores udvalg <I d={Ico.arrow} size={16} /></a>
                  <a href="#event" className="btn btn-rose">Lej event-fryser</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </header>
    );
  }

  // default: centreret
  return (
    <header id="top" className="hero section">
      {blobs}
      <Sprinkle top="22%" left="14%" c="var(--rose)" s={18} />
      <Sprinkle top="30%" right="16%" c="var(--gold)" s={15} delay={1.2} />
      <Sprinkle top="62%" left="20%" c="var(--peach)" s={13} delay={.6} />
      <div className="wrap hero-center reveal in">
        <img className="hero-logo float" src="assets/logo.png" alt="Det søde Hjørne" />
        <div className="eyebrow">Velkommen til</div>
        <h1 className="h-display" style={{ maxWidth: 14 + 'ch', margin: '6px auto 0' }}>Det søde Hjørne i Rudkøbing</h1>
        <p className="lead" style={{ margin: '20px auto 0' }}>Gourmet-is, kaffe og søde øjeblikke i hjertet af byen.</p>
        <HeroActions />
        <div className="hero-pills">
          <span className="pill"><Scoop size={20} /> Gourmet-is</span>
          <span className="pill"><I d={Ico.heart} size={14} fill style={{ color: 'var(--rose)' }} /> Lokal & familievenlig</span>
          <span className="pill"><I d={Ico.star} size={14} fill style={{ color: 'var(--gold)' }} /> Kaffe & desserter</span>
        </div>
      </div>
    </header>
  );
}

/* ---------------- OM BUTIKKEN ---------------- */
function About() {
  return (
    <section id="om" className="section">
      <div className="wrap about-grid">
        <div className="about-media reveal">
          <image-slot id="about-photo" shape="rounded" radius="28"
            src="assets/photos/interior.jpg"
            placeholder="Foto: butikken indefra / disken"></image-slot>
        </div>
        <div className="reveal">
          <div className="eyebrow">Om butikken</div>
          <h2 className="h-section">En sød ny nabo<br/>midt i Rudkøbing</h2>
          <p className="lead" style={{ marginTop: 18 }}>
            Det søde Hjørne er en ny lokal isbutik i Rudkøbing, hvor du kan nyde gourmet-is,
            friskbrygget kaffe og søde fristelser i en hyggelig og indbydende atmosfære.
          </p>
          <p style={{ marginTop: 14, color: 'var(--ink-soft)' }}>
            Vi tror på de små, søde øjeblikke — uanset om du kigger forbi til en kugle på vej
            gennem byen, en kop kaffe med en god ven eller en lille forkælelse til hele familien.
            Velkommen indenfor.
          </p>
          <div className="about-feats">
            <span className="pill"><I d={Ico.heart} size={14} fill style={{ color: 'var(--rose)' }} /> Hjemlig hygge</span>
            <span className="pill"><I d={Ico.star} size={14} fill style={{ color: 'var(--gold)' }} /> Gourmet-kvalitet</span>
            <span className="pill"><I d={Ico.pin} size={14} style={{ color: 'var(--gold-deep)' }} /> Midt i byen</span>
          </div>
          <div className="stat-row">
            <div className="stat"><b>100%</b><span>Lokal & hyggelig</span></div>
            <div className="stat"><b>For alle</b><span>Børn & voksne</span></div>
            <div className="stat"><b>Gourmet</b><span>Is fra Kastbergs</span></div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- IS & UDVALG ---------------- */
const PRODUCTS = [
  { t: 'Gourmet-is', icon: 'is', d: 'Lækker gourmet-is fra Kastbergs i mange skønne smage.', tag: 'Husets favorit' },
  { t: 'Softice', icon: 'soft', d: 'Blød, cremet softice med dine yndlingsdrys og dip.', tag: 'Klassiker' },
  { t: 'Is til børn & voksne', icon: 'familie', d: 'Noget for hele familien — store og små favoritter.', tag: 'For hele familien' },
  { t: 'Kaffe', icon: 'kaffe', d: 'Friskbrygget kaffe og varme drikke — perfekt til en sød pause.', tag: 'Til pausen' },
  { t: 'Brød & bagværk', icon: 'broed', d: 'Friskbagte smør-croissanter, chokolade og andet godt til kaffen.', tag: 'Nyhed' },
  { t: 'Søde desserter', icon: 'dessert', d: 'Søde fristelser og små desserter til den søde tand.', tag: 'Forkælelse' },
  { t: 'Sæsonens smage', icon: 'saeson', d: 'Skiftende smage efter årstiden — kig forbi og bliv overrasket.', tag: 'Skifter ofte' },
];

function Products() {
  return (
    <section id="udvalg" className="section" style={{ background: 'var(--bg-warm)' }}>
      <div className="wrap">
        <div style={{ textAlign: 'center', maxWidth: 640, margin: '0 auto 48px' }} className="reveal">
          <div className="eyebrow">Is & udvalg</div>
          <h2 className="h-section">Noget sødt til enhver smag</h2>
          <p className="lead" style={{ margin: '14px auto 0' }}>Fra cremet softice til gourmet-is, kaffe og søde desserter — her er lidt for alle.</p>
        </div>
        <div className="product-grid">
          {PRODUCTS.map((p, i) => (
            <article key={p.t} className="card product-card reveal">
              <ProdIcon name={p.icon} />
              <h3>{p.t}</h3>
              <p>{p.d}</p>
              <span className="tag">{p.tag}</span>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, About, Products });