/* parts/sections-top.jsx — Nav, Hero, Marquee, Features, Products */

function Nav({ scrolled, cartCount, onCartOpen, onContact }) {
  const links = [['Vorteile', '#features'], ['Eiswürfel', '#ice'], ['Sortiment', '#products'], ['Partner', '#partners'], ['FAQ', '#faq'], ['Kontakt', '#contact']];
  const [open, setOpen] = React.useState(false);

  React.useEffect(() => {
    if (open) {
      const onKey = (e) => { if (e.key === 'Escape') setOpen(false); };
      window.addEventListener('keydown', onKey);
      return () => window.removeEventListener('keydown', onKey);
    }
  }, [open]);

  const go = (e, h) => { setOpen(false); };

  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "") + (open ? " menu-open" : "")}>
      <div className="nav-inner">
        <a className="brand" href="#top" onClick={() => setOpen(false)}><img className="brand-logo" src={resolveAsset('assets/logo.png')} alt="Ice Cup" style={{ height: "44px" }} /></a>
        <div className="nav-links">
          {links.map(([l, h]) => <a key={h} href={h}>{l}</a>)}
        </div>
        <div className="nav-cta">
          <button className="cart-btn" onClick={onContact}>
            <span>Partner werden</span> <IcArrow s={16} />
          </button>
          <button className={"nav-burger" + (open ? " on" : "")} onClick={() => setOpen(o => !o)} aria-label="Menü" aria-expanded={open}>
            <span></span><span></span><span></span>
          </button>
        </div>
      </div>

      <div className={"mobile-scrim" + (open ? " show" : "")} onClick={() => setOpen(false)}
        style={{ opacity: open ? 1 : 0, pointerEvents: open ? 'auto' : 'none' }}></div>
      <div className={"mobile-menu" + (open ? " open" : "")} role="dialog" aria-modal="true"
        style={{ opacity: open ? 1 : 0, transform: open ? 'none' : 'translateY(-16px) scale(0.97)', pointerEvents: open ? 'auto' : 'none' }}>
        <div className="mobile-menu-links">
          {links.map(([l, h], i) => (
            <a key={h} href={h} onClick={(e) => go(e, h)}>
              <span>{l}</span><IcArrow s={18} />
            </a>
          ))}
        </div>
        <button className="mobile-menu-cta" onClick={() => { setOpen(false); onContact(); }}>
          Partner werden <IcArrow s={17} />
        </button>
      </div>
    </nav>);

}

function Hero({ heroStyle, onShop, onLearn }) {
  return (
    <header className="hero" data-hero={heroStyle} id="top">
      <div className="wrap">
        <div className="hero-grid">
          <div className="hero-copy">
            <span className="hero-badge reveal in"><span className="dot"></span> Swiss Made · B2B Eishandel</span>
            <h1 className="reveal in">
              Eis für<br /><span className="grad">Profis.</span>
            </h1>
            <p className="hero-sub reveal in" data-d="1">Ice Cup beliefert Gastronomie, Detailhandel und Events mit verkaufsfertigem Würfeleis – Swiss Made, regalfertig, ohne Aufwand.</p>
            <div className="hero-cta reveal in" data-d="2">
              <button className="btn btn-lg btn-primary" onClick={onShop}>Partner werden <IcArrow /></button>
              <button className="btn btn-lg btn-ghost" onClick={onLearn}>Sortiment ansehen</button>
            </div>
            <div className="hero-stats reveal in" data-d="3">
              <div className="s"><b>150+</b><span>Partner schweizweit</span></div>
              <div className="s"><b>3 cm</b><span>Volleiswürfel</span></div>
              <div className="s"><b>100%</b><span>Swiss Made</span></div>
            </div>
          </div>
          <div className="hero-stage" aria-hidden="true">
            <div className="stage-glow"></div>
            <div className="hero-ring r1"></div>
            <div className="hero-ring r2"></div>
            <IceCup />
          </div>
        </div>
      </div>
    </header>);

}

function Marquee() {
  const items = ['Gastronomie', 'Hotellerie', 'Detailhandel', 'Tankstellen', 'Events', 'Bars', 'Catering', 'Festivals'];
  const row = [...items, ...items];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {row.map((x, i) => <span key={i}>{x}</span>)}
      </div>
    </div>);

}

function Features() {
  const map = { FiBolt: FiBolt, FiSnow: FiSnow, FiRoute: FiRoute, FiShield: FiShield };
  return (
    <section className="section" id="features">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">Warum Ice Cup</span>
          <h2 className="section-title">Eis, das<br />sich verkauft.</h2>
          <p className="lead">Kein Aufwand, keine Tiefkühl-Logistik im eigenen Betrieb. Nur verkaufsfertiges Würfeleis – geliefert, wann immer du es brauchst.</p>
        </div>
        <div className="feat-grid">
          {FEATURES.map((f, i) => {
            const Icon = map[f.ic];
            return (
              <div key={f.t} className="feat-card reveal" data-d={i % 4}>
                <span className="feat-num">{f.n}</span>
                <div className="feat-ic"><Icon /></div>
                <h3>{f.t}</h3>
                <p>{f.d}</p>
              </div>);

          })}
        </div>
      </div>
    </section>);

}

function ProductCard({ p }) {
  return (
    <div className="prod-card reveal">
      <div className="prod-media">
        <div className="ph-stripes"></div>
        <span className={"prod-tag" + (p.tagAlt ? " alt" : "")}>{p.tag}</span>
        <img className="prod-img" src={resolveAsset(p.img)} alt={p.name} loading="lazy" />
      </div>
      <div className="prod-info">
        <h3>{p.name}</h3>
        <p>{p.desc}</p>
        {p.pack && <span className="straw-pack">{p.pack}</span>}
      </div>
    </div>);

}

function Products() {
  return (
    <section className="section" id="products">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">Sortiment</span>
          <h2 className="section-title">Unser Sortiment.</h2>
          <p className="lead">Der verkaufsfertige Becher in zwei Grössen, die Bags in 2, 5 und 10 kg und plastikfreie Papierstrohhalme – das passende Format für jeden Betrieb. Konditionen auf Anfrage.</p>
        </div>
        <div className="prod-grid reveal">
          {PRODUCTS.map((p) => <ProductCard key={p.id} p={p} />)}
        </div>
      </div>
    </section>);

}

function Freezers() {
  const items = [
  { img: 'assets/freezer-s.jpeg', name: 'Display-Tiefkühler S', dim: '550 × 520 × 760 mm', use: 'Kompakt für kleine Theken, Kioske und Tankstellen.' },
  { img: 'assets/freezer-m.jpeg', name: 'Display-Tiefkühler M', dim: '1000 × 675 × 850 mm', use: 'Der Allrounder für Shop, Bar und Gastronomie.' },
  { img: 'assets/freezer-l.jpeg', name: 'Display-Tiefkühler L', dim: '2000 × 675 × 850 mm', use: 'Maximale Fläche für Grossbetriebe und Events.' }];

  return (
    <section className="section freezers" id="freezers">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">Für Partner · Point of Sale</span>
          <h2 className="section-title">Gebrandete<br />Display-Tiefkühler.</h2>
          <p className="lead">Als Partner erhältst du unsere gebrandeten Truhen-Tiefkühler – verkaufsfertig, rollbar und in drei Grössen für jeden Standort.</p>
        </div>
        <div className="freezer-grid">
          {items.map((f) =>
          <div key={f.name} className="freezer-card reveal">
              <div className="freezer-media"><img src={resolveAsset(f.img)} alt={f.name} loading="lazy" /></div>
              <div className="freezer-info">
                <h3>{f.name}</h3>
                <span className="freezer-dim">{f.dim}</span>
                <p>{f.use}</p>
              </div>
            </div>
          )}
        </div>

        <div className="freezer-rent reveal">
          <div className="rent-glow"></div>
          <div className="rent-text">
            <span className="rent-eyebrow">Mietservice · Tagesmietung</span>
            <h3>Tiefkühler mieten für deinen Anlass.</h3>
            <p>Home-Party, Hochzeit, Firmenfest oder Geburtstag? Wir vermieten unsere Tiefkühler auch tageweise. Du bekommst die Truhe randvoll einsatzbereit – wir <b>liefern sie direkt zu dir und holen sie danach wieder ab</b>. Kein Schleppen, kein Aufwand.</p>
          </div>
          <div className="rent-points">
            <div className="rent-point"><b>Tagesmiete</b><span>Flexibel für 1 Tag oder länger</span></div>
            <div className="rent-point"><b>Lieferung & Abholung</b><span>Wir bringen und holen die Truhe</span></div>
            <div className="rent-point"><b>Für jeden Anlass</b><span>Partys, Hochzeiten, Events</span></div>
          </div>
        </div>
      </div>
    </section>);

}

function Straws_REMOVED() {
  return (
    <section className="section straws" id="straws">
      <div className="wrap">
        <div className="sec-head reveal">
          <span className="eyebrow">Nachhaltigkeit · Plastikfrei</span>
          <h2 className="section-title">Papierstrohhalme.</h2>
          <p className="lead">Schluss mit Plastik: unsere Strohhalme sind aus Papier, voll abbaubar und in zwei Durchmessern erhältlich. Jede Packung enthält 50 Stück.</p>
        </div>
        <div className="straw-grid">
          {STRAWS.map((s) =>
          <div key={s.id} className="prod-card reveal">
              <div className="prod-media">
                <div className="ph-stripes"></div>
                <span className="prod-tag">{s.tag}</span>
                <img className="straw-img" src={resolveAsset(s.img)} alt={s.name} loading="lazy" />
              </div>
              <div className="prod-info">
                <h3>{s.name}</h3>
                <p>{s.desc}</p>
                <span className="straw-pack">{s.pack}</span>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

Object.assign(window, { Nav, Hero, Marquee, Features, Products, Freezers });