/* Bubble House website — core components: data, decor, Nav, Hero, Marquee */
const { useState, useEffect, useRef } = React;

const A = "../../assets"; // asset root
// Resolve assets from the inlined data-URI map when present (published single file),
// else fall back to on-disk paths (dev kit).
const asset = (p) => typeof window !== "undefined" && window.ASSET && window.ASSET[p] ? window.ASSET[p] : A + p;
window.asset = asset;

const EVENTS = [
{
  id: "yellowhouse",
  title: "Yellow House",
  tag: "Bubble House ×",
  date: "FRI 22.05.26",
  dateLong: "Friday 22 May 2026",
  time: "21:00 — 03:00",
  venue: "Danzigerbocht 45",
  city: "Amsterdam",
  price: "€10,00",
  status: "On sale",
  img: asset("/flyer-yellow-house.jpg"),
  blurb: "An evening between flowers and fog — long house sets where OGs and newcomers trade the floor back-to-back.",
  lineup: [
  { time: "21:00 — 23:00", name: "Lam B", b2b: false },
  { time: "23:00 — 01:00", name: "Mor.Lov", b2b: true },
  { time: "01:00 — 03:00", name: "Munay & Trick", b2b: true }]

},
{
  id: "sundaysesh",
  title: "The Sunday Sesh",
  tag: "ADE Special",
  date: "SUN 26.10.25",
  dateLong: "Sunday 26 October 2025",
  time: "16:00 — 01:00",
  venue: "Pier 1, NDSM",
  city: "Amsterdam",
  price: "€18,50",
  status: "Few left",
  img: asset("/flyer-sunday-sesh.jpg"),
  blurb: "Nine hours on the water for ADE. Three generations of Amsterdam house on one boat — the Veronica.",
  lineup: [
  { time: "16:00 — 18:00", name: "Aron Friedman", b2b: false },
  { time: "18:00 — 20:00", name: "Munay & Horsemen", b2b: true },
  { time: "20:00 — 22:00", name: "San Proper", b2b: false },
  { time: "22:00 — 01:00", name: "Boris Werner & Julien Simmons", b2b: true }]

},
{
  id: "brinker",
  title: "Brinker Bar Thursdays",
  tag: "Weekly · Free",
  date: "EVERY THU",
  dateLong: "Every Thursday",
  time: "21:00 — 01:00",
  venue: "Brinker Bar",
  city: "Amsterdam",
  price: "Free",
  status: "Free entry",
  img: asset("/flyer-brinker-bar.jpg"),
  blurb: "Free entry, warm lights, good music, and enough room to settle in. A place to land after hours, before elsewhere.",
  lineup: [
  { time: "21:00 — 23:00", name: "Residents", b2b: false },
  { time: "23:00 — 01:00", name: "Guest b2b", b2b: true }]

},
{
  id: "onderhans",
  title: "Onder Hans",
  tag: "Announced soon",
  date: "TBA 2026",
  dateLong: "Spring 2026",
  time: "18:00 — 03:00",
  venue: "Onder Hans · Kerkstraat",
  city: "Amsterdam",
  price: "€12,50",
  status: "Sign up",
  img: null,
  blurb: "Two rooms, nine hours, one Funktion-One. Bubble House goes underground in the Kerkstraat cellar.",
  lineup: [
  { time: "18:00 — 21:00", name: "Izak Jules", b2b: false },
  { time: "21:00 — 00:00", name: "Pete Beluga", b2b: false },
  { time: "00:00 — 03:00", name: "Julien Simmons", b2b: true }]

}];


/* drifting soap bubbles */
function Bubbles({ count = 7, zone = "hero" }) {
  const seeds = useRef(
    Array.from({ length: count }).map((_, i) => ({
      size: 18 + Math.random() * 78,
      left: Math.random() * 100,
      dur: 7 + Math.random() * 8,
      delay: -Math.random() * 10,
      pink: Math.random() > 0.55
    }))
  ).current;
  return (
    <>
      {seeds.map((b, i) =>
      <span key={i} className="hero-bubble" style={{
        width: b.size, height: b.size, left: b.left + "%",
        borderColor: b.pink ? "#F5D5EA" : "rgba(248,247,245,.6)",
        background: b.pink ? "rgba(245,213,234,.22)" : "rgba(255,255,255,.12)",
        animation: `drift ${b.dur}s linear ${b.delay}s infinite`
      }} />
      )}
    </>);

}

/* a scattered doodle image */
function Doodle({ src, style, h = 90, wobble = true }) {
  return (
    <img src={src} alt="" className={wobble ? "hero-doodle" : ""} style={{
      height: h, position: "absolute", zIndex: 2,
      animationDelay: Math.random() * -4 + "s", ...style
    }} />);

}

function Nav({ accent, onTickets }) {
  const links = ["Events", "Lineup", "Concept", "Pictures"];
  return (
    <nav className="nav">
      <a href="#top"><img className="nav-logo" src={asset("/logo-wordmark-black.png")} alt="Bubble House" /></a>
      <div className="nav-links">
        {links.map((l) => <a key={l} className="nav-link" href={"#" + l.toLowerCase()}>{l}</a>)}
        <button className="btn btn--sm" onClick={onTickets}>Tickets →</button>
      </div>
    </nav>);

}

function Marquee() {
  const words = ["BURSTING BUBBLES ON THE DANCEFLOOR", "BACK-TO-BACK", "AMSTERDAM", "HOUSE MUSIC", "COMMUNITY FIRST"];
  const run = [...words, ...words];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {run.map((w, i) =>
        <React.Fragment key={i}>
            <span className="marquee-word">{w}</span>
            <span className="marquee-word marquee-star">✺</span>
          </React.Fragment>
        )}
      </div>
    </div>);

}

function Hero({ onTickets }) {
  return (
    <header className="hero" id="top">
      <div className="hero-spray" />
      <Bubbles count={8} />
      {/* scattered doodles */}
      <Doodle src={asset("/doodle-pair-hold.png")} h={120} style={{ top: "16%", left: "6%" }} />
      <Doodle src={asset("/doodle-runner.png")} h={108} style={{ bottom: "12%", left: "10%" }} />
      <Doodle src={asset("/doodle-star.png")} h={74} style={{ top: "24%", right: "30%" }} />
      <Doodle src={asset("/doodle-pair-dance.png")} h={130} style={{ bottom: "14%", right: "7%" }} />
      <Doodle src={asset("/doodle-eyes.png")} h={48} style={{ top: "14%", right: "16%" }} />

      <div className="hero-inner">
        <img className="hero-word" src={asset("/logo-wordmark-black.png")} alt="Bubble House" />
        <div style={{ marginTop: 18 }}>
          <span style={{ fontFamily: "var(--font-display)", fontSize: "clamp(26px,3.6vw,48px)", lineHeight: 1.15 }}>
            <span className="hl y">Bursting bubbles on the dancefloor</span>
          </span>
        </div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: "clamp(18px,2vw,26px)", color: "var(--poster-red)", marginTop: 14 }}>
          House als gemeenschappelijke taal
        </div>
        <p className="bh-lead" style={{ maxWidth: 520, marginTop: 16, fontWeight: 600 }}>
          An Amsterdam house-music community breaking musical & social bubbles —
          OGs and newcomers on the floor <em>together</em>, back-to-back.
        </p>
        <div style={{ display: "flex", gap: 14, marginTop: 26, flexWrap: "wrap" }}>
          <button className="btn btn--lg" onClick={onTickets}>Get tickets →</button>
          <a className="btn btn--lg btn--ghost" href="#events">See events</a>
        </div>
      </div>
    </header>);

}

Object.assign(window, { EVENTS, A, Bubbles, Doodle, Nav, Marquee, Hero });