/* global React */
const { useState, useEffect, useRef } = React;

const EVENT_DATE = new Date("2026-06-18T17:00:00+02:00");

const FOOD = [
  { name: "Tol", desc: "Klassieker van de Volendammer Vishandel" },
  { name: "Hollandse Nieuwe haring", desc: "Vers aangeleverd op de dag zelf" },
  { name: "Gerookte zalm & paling", desc: "Ambachtelijk gerookt" },
  { name: "Kibbeling & oesters", desc: "Knapperig of romig — kies zelf" },
  { name: "Verse frieten & streetfood", desc: "Voor de stevige trek" },
  { name: "Onbeperkt drank", desc: "De hele avond inclusief" },
  { name: "Stijlvolle cocktailbar", desc: "Voor de liefhebber" },
];

const PHOTOS = [
  { year: "2024", label: "Officiële opening", src: "assets/photos/2024-speech.jpg", size: "size-lg" },
  { year: "2024", label: "Cornet borrel", src: "assets/photos/2024-borrel-1.jpg", size: "size-md" },
  { year: "2024", label: "Volle terrassen", src: "assets/photos/2024-borrel-2.jpg", size: "size-wide" },
  { year: "2024", label: "Foodtruck proost", src: "assets/photos/2024-foodtruck.jpg", size: "size-tall" },
  { year: "2024", label: "Avond­programma", src: "assets/photos/2024-podium.jpg", size: "size-md" },
  { year: "2024", label: "Onder de Cornet tent", src: "assets/photos/2024-cornet.jpg", size: "size-wide" },
  { year: "2024", label: "Overzicht festival­terrein", src: "assets/photos/2024-overzicht.jpg", size: "size-md" },
  { year: "2024", label: "Borrelen op het terras", src: "assets/photos/2024-terras.jpg", size: "size-md" },
];

const TIERS = [
  { key: "sponsor", className: "goud", name: "Sponsor", badge: "Hoofdsponsor", price: "€2.500", featured: true,
    perks: ["6 entreetickets t.w.v. €585", "Naamsvermelding op de site", "Logo prominent op website en programma", "Vermelding in alle nieuwsbrieven", "Exclusief sponsor-speldje", "Factuur via stichting (0% BTW)"], cta: "Word sponsor" },
];

const AMBASSADEUR = {
  price: "€250",
  perks: ["1 entreeticket t.w.v. €97,50", "Uniek collector's speldje", "Naamsvermelding op de site", "10% korting op max. 4 extra tickets"],
};

const SPONSORS = [];

const FAQ = [
  { q: "Waar vindt de Haringparty plaats?", a: "In de sfeervolle tuin van Café Dokus, Sonsenweg 14 in Best." },
  { q: "Wat is er bij het ticket inbegrepen?", a: "Je ticket van €97,50 geeft toegang tot het hele evenement (17:00–22:00) inclusief onbeperkt eten en drinken van Volendammer Vishandel: tol, Hollandse nieuwe haring, gerookte zalm en paling, kibbeling en oesters, verse frieten en streetfood. De hele avond onbeperkt dranken én een stijlvolle cocktailbar voor de liefhebber." },
  { q: "Tot welke leeftijd is het evenement toegankelijk?", a: "De Haringparty is een 18+ evenement. Bij de entree wordt om legitimatie gevraagd." },
  { q: "Kan ik mijn ticket overdragen?", a: "Ja, tickets zijn op naam maar overdraagbaar. Stuur uiterlijk 24 uur voor het evenement een mailtje met de nieuwe naam naar tickets@bestscheharingparty.nl." },
  { q: "Is er parkeer­gelegenheid?", a: "Ja, er is parkeren op loopafstand. We raden van harte aan om met de fiets te komen of een taxi te nemen." },
  { q: "Hoe word ik ambassadeur of sponsor?", a: "Ambassadeur word je voor €250 (incl. 1 ticket, speldje, naamsvermelding en 10% korting op max. 4 extra tickets). Sponsor word je voor €2.500 (6 tickets, logo + naamsvermelding, speldje). Sponsoring loopt via een factuur van de stichting." },
];

// Lineup as poster tiers (Intents-style)
const LINEUP = {
  headliners: ["Danny de Munck"],
  tier2: ["Maxime Froger", "Ali Damen"],
  tier3: ["Draaiorgel Victory on Tour"],
  tier4: ["Presentatie · Kapitein Iglo"],
};

function useCountdown(target) {
  const [now, setNow] = useState(Date.now());
  useEffect(() => { const id = setInterval(() => setNow(Date.now()), 1000); return () => clearInterval(id); }, []);
  let diff = Math.max(0, target.getTime() - now);
  const d = Math.floor(diff / 86400000); diff -= d * 86400000;
  const h = Math.floor(diff / 3600000); diff -= h * 3600000;
  const m = Math.floor(diff / 60000); diff -= m * 60000;
  const s = Math.floor(diff / 1000);
  return { d, h, m, s };
}

function Particles({ count = 30 }) {
  const items = [];
  for (let i = 0; i < count; i++) {
    const left = (Math.sin(i * 12.9898) * 43758.5453) % 1;
    const dur = 8 + Math.abs(Math.sin(i * 7.3)) * 14;
    const delay = -Math.abs(Math.sin(i * 3.7)) * dur;
    const size = 2 + Math.abs(Math.sin(i * 5.1)) * 4;
    items.push(
      <div key={i} className="particle" style={{
        left: `${Math.abs(left * 100)}%`,
        animationDuration: `${dur}s`,
        animationDelay: `${delay}s`,
        width: `${size}px`, height: `${size}px`,
      }} />
    );
  }
  return <>{items}</>;
}

function Nav() {
  const [scrolled, setScrolled] = useState(false);
  const [active, setActive] = useState("home");
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const sections = ["home", "evenement", "lineup", "food", "fotos", "sponsors", "faq", "contact"];
    const onScroll = () => {
      setScrolled(window.scrollY > 60);
      let cur = "home";
      for (const id of sections) {
        const el = document.getElementById(id);
        if (el && el.getBoundingClientRect().top < 140) cur = id;
      }
      setActive(cur);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  useEffect(() => {
    document.body.classList.toggle("no-scroll", menuOpen);
    return () => document.body.classList.remove("no-scroll");
  }, [menuOpen]);
  const links = [["evenement", "Info"], ["lineup", "Line-up"], ["food", "Food"], ["fotos", "Foto's"], ["sponsors", "Partners"], ["faq", "FAQ"], ["contact", "Contact"]];
  const close = () => setMenuOpen(false);
  return (
    <>
      <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
        <div className="container nav-inner">
          <a href="#home" className="nav-logo" onClick={close}>
            <img src="assets/logo.png" alt="" />
            <div className="nav-logo-text">Haringparty<small>Best · 2026</small></div>
          </a>
          <div className="nav-links">
            {links.map(([id, l]) => <a key={id} href={`#${id}`} className={active === id ? "active" : ""}>{l}</a>)}
            <a href="checkout.html" className="btn btn--sm">Tickets €97,50</a>
          </div>
          <button
            className={`nav-burger ${menuOpen ? "open" : ""}`}
            aria-label={menuOpen ? "Sluit menu" : "Open menu"}
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen((v) => !v)}
          >
            <span />
          </button>
        </div>
      </nav>
      <div className={`mobile-drawer ${menuOpen ? "open" : ""}`} onClick={close}>
        {links.map(([id, l]) => (
          <a key={id} href={`#${id}`} onClick={close}>{l}</a>
        ))}
        <a href="checkout.html" className="cta" onClick={close}>Tickets €97,50 →</a>
      </div>
    </>
  );
}

function Hero() {
  return (
    <section className="hero" id="home">
      <div className="hero-glow" />
      <div className="hero-rays" />
      <div className="hero-godrays" />
      <div className="hero-particles"><Particles count={36} /></div>
      <div className="hero-content">
        <div className="hero-logo"><img src="assets/logo.png" alt="Ode aan de Haring · Best" /></div>
        <div className="hero-kicker"><span className="live-dot" />Editie 2026 · Donderdag 18 Juni · Best</div>
        <h1 className="hero-title">
          <span className="l1">Ode aan</span>
          <span className="l2">de Haring</span>
          <span className="l3">★ BEST 2026 ★</span>
        </h1>
        <p className="hero-sub">
          Vijf uur lang het mooiste festival van Brabant — in de sfeervolle tuin van Café Dokus.
          Onbeperkt vis &amp; streetfood van Volendammer Vishandel, een stijlvolle cocktailbar
          en live optredens van Danny de Munck, Maxime Froger en Ali Damen.
        </p>
        <div className="hero-cta">
          <a href="checkout.html" className="btn">Koop je ticket — €97,50 →</a>
          <a href="#lineup" className="btn btn--ghost">Bekijk line-up</a>
        </div>
        <div className="hero-meta">
          <div className="hero-meta-item"><div className="l">Datum</div><div className="v">Do. 18 Juni '26</div></div>
          <div className="hero-meta-item"><div className="l">Tijd</div><div className="v">17:00 — 22:00</div></div>
          <div className="hero-meta-item"><div className="l">Locatie</div><div className="v">Café Dokus, Best</div></div>
          <div className="hero-meta-item"><div className="l">Ticket</div><div className="v">€97,50 all-in</div></div>
        </div>
      </div>
      <div className="scroll-cue">Scroll</div>
    </section>
  );
}

function Marquee() {
  const items = ["Ode aan de Haring", "Do. 18 Juni 2026", "All-inclusive €97,50", "Café Dokus · Best", "Volendammer Vishandel"];
  const all = [...items, ...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {all.map((t, i) => <span key={i}>{t}<span className="star" /></span>)}
      </div>
    </div>
  );
}

function Countdown() {
  const cd = useCountdown(EVENT_DATE);
  return (
    <section className="countdown-section">
      <div className="container cd-text">
        <span className="eyebrow">Aftellen tot het festival</span>
        <h2 className="section-title">De <em>klok tikt</em></h2>
        <div className="cd-grid">
          {[["d","Dagen",cd.d],["h","Uren",cd.h],["m","Minuten",cd.m],["s","Seconden",cd.s]].map(([k,l,v]) => (
            <div key={k} className="cd-cell">
              <div className="num">{String(v).padStart(2, "0")}</div>
              <div className="lbl">{l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function EventInfo() {
  return (
    <section className="dark-section glow-bg" id="evenement">
      <div className="container">
        <span className="eyebrow">Het festival</span>
        <h2 className="section-title">Wat <em>kun je</em> verwachten?</h2>
        <div className="event-grid">
          <div className="event-card"><div className="icon"><svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="16" rx="1"/><path d="M3 9h18M8 3v4M16 3v4"/></svg></div><div className="label">Datum</div><div className="value">Do. 18 Juni</div><div className="sub">2026 · noteer 'm in de agenda</div></div>
          <div className="event-card"><div className="icon"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg></div><div className="label">Tijd</div><div className="value">17:00 — 22:00</div><div className="sub">Vijf uur feest, eten &amp; muziek</div></div>
          <div className="event-card"><div className="icon"><svg viewBox="0 0 24 24"><path d="M12 2c4 0 7 3 7 7 0 5-7 13-7 13S5 14 5 9c0-4 3-7 7-7z"/><circle cx="12" cy="9" r="2.5"/></svg></div><div className="label">Locatie</div><div className="value">Café Dokus</div><div className="sub">Sonsenweg 14, Best</div></div>
          <div className="event-card"><div className="icon"><svg viewBox="0 0 24 24"><path d="M3 8h18l-2 11H5L3 8z"/><path d="M8 8V5a4 4 0 018 0v3"/></svg></div><div className="label">Ticket</div><div className="value">€97,50 p.p.</div><div className="sub">All-inclusive · 18+</div></div>
        </div>
        <div className="included-strip" id="tickets">
          <h3>Inbegrepen <em>bij je ticket</em></h3>
          <ul className="included-list">
            <li>Onbeperkt verse Hollandse Nieuwe haring</li>
            <li>Tol, gerookte zalm &amp; paling</li>
            <li>Kibbeling, oesters &amp; verse frieten</li>
            <li>Onbeperkt drank de hele avond</li>
            <li>Stijlvolle cocktailbar</li>
            <li>Live line-up &amp; presentatie door Kapitein Iglo</li>
          </ul>
        </div>
      </div>
    </section>
  );
}

function Lineup() {
  return (
    <section className="lineup-section" id="lineup">
      <div className="container">
        <div style={{ textAlign: "center" }}>
          <span className="eyebrow">Line-up 2026</span>
          <h2 className="section-title">De <em>artiesten</em></h2>
        </div>
        <div className="lineup-poster">
          <div className="poster-row tier1">
            {LINEUP.headliners.map((n, i) => (
              <React.Fragment key={n}>
                {i > 0 && <span className="dot">★</span>}
                <span>{n}</span>
              </React.Fragment>
            ))}
          </div>
          <div className="poster-row tier2">
            {LINEUP.tier2.map((n, i) => (
              <React.Fragment key={n}>
                {i > 0 && <span className="dot">●</span>}
                <span>{n}</span>
              </React.Fragment>
            ))}
          </div>
          <div className="poster-row tier3">
            {LINEUP.tier3.map((n, i) => (
              <React.Fragment key={n}>
                {i > 0 && <span className="dot">●</span>}
                <span>{n}</span>
              </React.Fragment>
            ))}
          </div>
          <div className="poster-row tier4">
            {LINEUP.tier4.map((n, i) => (
              <React.Fragment key={n}>
                {i > 0 && <span className="dot">·</span>}
                <span>{n}</span>
              </React.Fragment>
            ))}
          </div>
        </div>
        <div className="poster-foot">
          <span>★ Programma onder voorbehoud ★</span>
          <span>★ Meer namen volgen ★</span>
        </div>
      </div>
    </section>
  );
}

function Food() {
  return (
    <section className="dark-section glow-bg" id="food">
      <div className="container">
        <span className="eyebrow">Eten &amp; drinken</span>
        <h2 className="section-title">Volendammer <em>Vishandel</em></h2>
        <p style={{ maxWidth: 720, marginTop: "1rem", color: "rgba(255,244,214,0.75)", fontSize: "1.05rem", lineHeight: 1.6 }}>
          De hele avond onbeperkt genieten van het beste uit de zee, gecombineerd met streetfood
          en een stijlvolle cocktailbar voor de liefhebber.
        </p>
        <div className="event-grid" style={{ marginTop: "2rem" }}>
          {FOOD.map((f) => (
            <div key={f.name} className="event-card">
              <div className="label">★ Inbegrepen</div>
              <div className="value">{f.name}</div>
              <div className="sub">{f.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Photos() {
  const [idx, setIdx] = useState(null);
  const open = idx !== null;
  useEffect(() => {
    if (!open) return;
    const onKey = (e) => {
      if (e.key === "Escape") setIdx(null);
      if (e.key === "ArrowRight") setIdx((i) => (i + 1) % PHOTOS.length);
      if (e.key === "ArrowLeft") setIdx((i) => (i - 1 + PHOTOS.length) % PHOTOS.length);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open]);
  const cur = open ? PHOTOS[idx] : null;
  return (
    <section className="photos-section" id="fotos">
      <div className="container">
        <span className="eyebrow">Voorgaande edities</span>
        <h2 className="section-title">Sfeer van <em>vorige jaren</em></h2>
        <div className="photo-grid">
          {PHOTOS.map((p, i) => (
            <div key={i} className={`photo-tile ${p.size}`} onClick={() => setIdx(i)}
              style={{ backgroundImage: `url(${p.src})`, backgroundSize: "cover", backgroundPosition: "center" }}>
              <div className="year">{p.year}</div>
              <div className="label">{p.label}</div>
            </div>
          ))}
        </div>
      </div>
      {open && cur && (
        <div className="lightbox" onClick={() => setIdx(null)}>
          <div className="lightbox-frame" onClick={(e) => e.stopPropagation()}
            style={{ backgroundImage: `url(${cur.src})`, backgroundSize: "cover", backgroundPosition: "center" }}>
            <div className="lightbox-counter">{idx + 1} / {PHOTOS.length}</div>
            <div className="label">{cur.year} · {cur.label}</div>
            <button className="lightbox-close" onClick={() => setIdx(null)}>×</button>
            <button className="lightbox-arrow prev" onClick={() => setIdx((i) => (i - 1 + PHOTOS.length) % PHOTOS.length)}>←</button>
            <button className="lightbox-arrow next" onClick={() => setIdx((i) => (i + 1) % PHOTOS.length)}>→</button>
          </div>
        </div>
      )}
    </section>
  );
}

function Sponsors() {
  const sponsorTier = TIERS[0];
  return (
    <section className="sponsors-section" id="sponsors">
      <div className="container">
        <span className="eyebrow">Steun de Haringparty</span>
        <h2 className="section-title">Word <em>ambassadeur</em> of sponsor</h2>
        <p style={{ maxWidth: 680, fontSize: "1.05rem", lineHeight: 1.6, marginTop: "1rem", color: "rgba(255,244,214,0.75)" }}>
          De Haringparty Best is hét lokale netwerkmoment van het jaar. Steun het festival,
          krijg een uniek collector's speldje en zet je naam op de site.
        </p>
        <div className="tier-grid">
          <div className="tier zilver">
            <div className="tier-head">
              <span className="badge">Vriend van</span>
              <h3>Ambassadeur</h3>
              <div className="price">{AMBASSADEUR.price}</div>
            </div>
            <div className="tier-body">
              <ul>{AMBASSADEUR.perks.map((p, i) => <li key={i}>{p}</li>)}</ul>
              <a href="sponsoren.html#ambassadeur" className="btn btn--ghost">Word ambassadeur →</a>
            </div>
          </div>
          <div className={`tier ${sponsorTier.className} featured`}>
            <div className="tier-flag">★ Hoofdsponsor</div>
            <div className="tier-head">
              <span className="badge">{sponsorTier.badge}</span>
              <h3>{sponsorTier.name}</h3>
              <div className="price">{sponsorTier.price}</div>
            </div>
            <div className="tier-body">
              <ul>{sponsorTier.perks.map((p, i) => <li key={i}>{p}</li>)}</ul>
              <a href="sponsoren.html" className="btn">{sponsorTier.cta} →</a>
            </div>
          </div>
        </div>
        <div className="sponsor-carousel">
          <div className="sponsor-carousel-head">
            <span>★ Onze sponsors 2026</span>
            <span>{SPONSORS.length === 0 ? "Wordt binnenkort onthuld" : `${SPONSORS.length} partners`}</span>
          </div>
          {SPONSORS.length > 0 && (
            <div className="sponsor-track-wrap">
              <div className="sponsor-track">
                {[...SPONSORS, ...SPONSORS].map((s, i) => (
                  <div key={i} className={`sponsor-tile ${s.platina ? "platina" : ""}`}>
                    {s.name}<small>{s.tier}</small>
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

function FAQAccordion() {
  const [open, setOpen] = useState(0);
  return (
    <section className="faq-section" id="faq">
      <div className="container">
        <div className="faq-grid">
          <div>
            <span className="eyebrow">Veelgestelde vragen</span>
            <h2 className="section-title">Nog <em>vragen?</em><br/>We hebben de <span className="stroke">antwoorden</span>.</h2>
            <p style={{ marginTop: "1.4rem", fontSize: "1rem", lineHeight: 1.6, color: "rgba(255,244,214,0.7)" }}>
              Staat je vraag er niet bij? Stuur ons een bericht via het contact­formulier — we reageren binnen één werkdag.
            </p>
            <a href="#contact" className="btn" style={{ marginTop: "1.5rem" }}>Stel je vraag →</a>
          </div>
          <div className="faq-list">
            {FAQ.map((item, i) => (
              <div key={i} className={`faq-item ${open === i ? "open" : ""}`}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                  {item.q}<span className="faq-toggle">+</span>
                </button>
                <div className="faq-a">{item.a}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function Contact() {
  return (
    <section className="contact-section" id="contact">
      <div className="container">
        <div className="contact-grid">
          <div className="contact-brand">
            <img src="assets/logo.png" alt="Logo" />
            <h3>Ode aan de<br/><em>Haring · Best</em></h3>
            <p>De jaarlijkse haringparty van Best. Zes uur lang feest, eten en het mooiste netwerk van de regio.</p>
            <div style={{ display: "flex", gap: "0.6rem", marginTop: "1.2rem" }}>
              <a href="#" className="btn btn--ghost btn--sm">Instagram</a>
              <a href="#" className="btn btn--ghost btn--sm">LinkedIn</a>
            </div>
          </div>
          <div className="contact-col">
            <h4>Contact</h4>
            <ul>
              <li><a href="mailto:hallo@bestscheharingparty.nl">hallo@bestscheharingparty.nl</a></li>
              <li><a href="mailto:tickets@bestscheharingparty.nl">tickets@bestscheharingparty.nl</a></li>
              <li><a href="mailto:sponsors@bestscheharingparty.nl">sponsors@bestscheharingparty.nl</a></li>
              <li>Donderdag 18 juni 2026</li>
              <li>17:00 — 22:00 uur</li>
              <li>Café Dokus · Sonsenweg 14, Best</li>
            </ul>
          </div>
          <div className="contact-col">
            <h4>Stuur een bericht</h4>
            <form className="contact-form" onSubmit={(e) => { e.preventDefault(); alert("Bedankt! We nemen snel contact op."); }}>
              <input placeholder="Je naam" required />
              <input type="email" placeholder="E-mailadres" required />
              <select defaultValue=""><option value="" disabled>Onderwerp...</option><option>Tickets</option><option>Sponsoring</option><option>Pers &amp; media</option><option>Anders</option></select>
              <textarea placeholder="Je bericht" />
              <button className="btn" type="submit">Verstuur →</button>
            </form>
          </div>
        </div>
        <div className="footer-bar">
          <span>© 2026 Haringparty Best — Ode aan de Haring</span>
          <span>★ Donderdag 18 juni · 17:00 — 22:00 · €97,50 ★</span>
        </div>
      </div>
    </section>
  );
}

function App() {
  return (
    <>
      <div className="grain" />
      <div className="scanlight" />
      <Nav />
      <Hero />
      <Marquee />
      <Countdown />
      <EventInfo />
      <Lineup />
      <Food />
      <Photos />
      <Sponsors />
      <FAQAccordion />
      <Contact />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);