/* 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 RA_PROMOTER_URL = "https://ra.co/promoters/170389";

// Source: Resident Advisor promoter and event pages. Checked 16 August 2026.
// Keep newest first and do not add an event until its RA listing is public.
const EVENTS = [
  {
    id: "ra-2475823", tab: "02 JUL", title: "Munay // Bubble House at Brinker Bar",
    tag: "Brinker Bar · Resident Advisor", date: "THU 02.07.26", dateLong: "Thursday 2 July 2026",
    time: "21:00 — 01:00", venue: "Onder Hans", city: "Amsterdam", status: "Past · RA",
    img: asset("/flyer-brinker-bar.jpg"), raUrl: "https://ra.co/events/2475823",
    blurb: "Free Bubble House edition at Onder Hans, verified on Resident Advisor.",
    lineup: [{ time: "", name: "Munay", b2b: false }]
  },
  {
    id: "ra-2458591", tab: "25 JUN", title: "Bubble House at Brinker Bar",
    tag: "Brinker Bar · Resident Advisor", date: "THU 25.06.26", dateLong: "Thursday 25 June 2026",
    time: "21:00 — 03:00", venue: "Onder Hans", city: "Amsterdam", status: "Past · RA",
    img: asset("/flyer-brinker-bar.jpg"), raUrl: "https://ra.co/events/2458591",
    blurb: "Free Bubble House edition at Onder Hans, verified on Resident Advisor.",
    lineup: [{ time: "", name: "Boothstrapped", b2b: false }]
  },
  {
    id: "ra-2458585", tab: "18 JUN", title: "Bubble House at Brinker Bar",
    tag: "Brinker Bar · Resident Advisor", date: "THU 18.06.26", dateLong: "Thursday 18 June 2026",
    time: "23:00 — 03:00", venue: "Onder Hans", city: "Amsterdam", status: "Past · RA",
    img: asset("/flyer-brinker-bar.jpg"), raUrl: "https://ra.co/events/2458585",
    blurb: "Free Bubble House edition at Onder Hans, verified on Resident Advisor.",
    lineup: [{ time: "", name: "David Maters", b2b: false }]
  },
  {
    id: "ra-2458582", tab: "11 JUN", title: "Bubble House at Brinker Bar",
    tag: "Brinker Bar · Resident Advisor", date: "THU 11.06.26", dateLong: "Thursday 11 June 2026",
    time: "23:00 — 03:00", venue: "Onder Hans", city: "Amsterdam", status: "Past · RA",
    img: asset("/flyer-brinker-bar.jpg"), raUrl: "https://ra.co/events/2458582",
    blurb: "Free Bubble House edition at Onder Hans, verified on Resident Advisor.",
    lineup: [{ time: "", name: "WLC (BE)", b2b: false }]
  },
  {
    id: "ra-2458547", tab: "04 JUN", title: "Bubble House at Brinker Bar",
    tag: "Brinker Bar · Resident Advisor", date: "THU 04.06.26", dateLong: "Thursday 4 June 2026",
    time: "21:00 — 01:00", venue: "Onder Hans", city: "Amsterdam", status: "Past · RA",
    img: asset("/flyer-brinker-bar.jpg"), raUrl: "https://ra.co/events/2458547",
    blurb: "Free Bubble House edition at Onder Hans, verified on Resident Advisor.",
    lineup: [{ time: "", name: "MOR.LOV", b2b: false }]
  },
  {
    id: "ra-2424222", tab: "22 MAY", title: "Bubble House @ Yellow House",
    tag: "Yellow House · Resident Advisor", date: "FRI 22.05.26", dateLong: "Friday 22 May 2026",
    time: "21:00 — 03:00", venue: "Yellow House", city: "Amsterdam", status: "Past · RA",
    img: asset("/flyer-yellow-house.jpg"), raUrl: "https://ra.co/events/2424222",
    blurb: "Bubble House at Yellow House, verified on Resident Advisor.",
    lineup: ["Lam B", "MOR.LOV", "Munay", "TRICK"].map(name => ({ time: "", name, b2b: false }))
  },
  {
    id: "ra-2443855", tab: "21 MAY", title: "Bubble House at Brinker Bar",
    tag: "Brinker Bar · Resident Advisor", date: "THU 21.05.26", dateLong: "Thursday 21 May 2026",
    time: "21:00 — 01:00", venue: "Onder Hans", city: "Amsterdam", status: "Past · RA",
    img: asset("/flyer-brinker-bar.jpg"), raUrl: "https://ra.co/events/2443855",
    blurb: "Free Bubble House edition at Onder Hans, verified on Resident Advisor.",
    lineup: [{ time: "", name: "Pete Beluga", b2b: false }]
  },
  {
    id: "ra-2443845", tab: "14 MAY", title: "Bubble House at Brinker Bar",
    tag: "Brinker Bar · Resident Advisor", date: "THU 14.05.26", dateLong: "Thursday 14 May 2026",
    time: "21:00 — 01:00", venue: "Onder Hans", city: "Amsterdam", status: "Past · RA",
    img: asset("/flyer-brinker-bar.jpg"), raUrl: "https://ra.co/events/2443845",
    blurb: "Free Bubble House edition at Onder Hans, verified on Resident Advisor.",
    lineup: [{ time: "", name: "MOR.LOV", b2b: false }]
  },
  {
    id: "ra-2443848", tab: "07 MAY", title: "Bubble House at Brinker Bar",
    tag: "Brinker Bar · Resident Advisor", date: "THU 07.05.26", dateLong: "Thursday 7 May 2026",
    time: "21:00 — 01:00", venue: "Onder Hans", city: "Amsterdam", status: "Past · RA",
    img: asset("/flyer-brinker-bar.jpg"), raUrl: "https://ra.co/events/2443848",
    blurb: "Free Bubble House edition at Onder Hans, verified on Resident Advisor.",
    lineup: [{ time: "", name: "Munay", b2b: false }]
  },
  {
    id: "ra-2393190", tab: "02 APR", title: "Bubble House",
    tag: "Onder Hans · Resident Advisor", date: "THU 02.04.26", dateLong: "Thursday 2 April 2026",
    time: "20:00 — 04:00", venue: "Onder Hans", city: "Amsterdam", status: "Past · RA",
    img: null, raUrl: "https://ra.co/events/2393190",
    blurb: "Bubble House at Onder Hans, verified on Resident Advisor.",
    lineup: [
      { time: "20:00", name: "Max Joosten b2b STORM", b2b: true },
      { time: "22:00", name: "Morlov b2b Munay", b2b: true },
      { time: "00:00", name: "Fieldhouse b2b TRICK", b2b: true },
      { time: "02:00", name: "Julien Simmons b2b Skettemblau", b2b: true }
    ]
  },
  {
    id: "ra-2353997", tab: "05 MAR", title: "Bubble House",
    tag: "Onder Hans · Resident Advisor", date: "THU 05.03.26", dateLong: "Thursday 5 March 2026",
    time: "18:00 — 03:00", venue: "Onder Hans", city: "Amsterdam", status: "Past · RA",
    img: null, raUrl: "https://ra.co/events/2353997",
    blurb: "Bubble House at Onder Hans, verified on Resident Advisor.",
    lineup: ["almostDan", "Izak Jules", "Julien Simmons", "Kreutziger", "Munay", "Pete Beluga", "Skettemblau", "Tensen", "TRICK"].map(name => ({ time: "", name, b2b: false }))
  },
  {
    id: "ra-2262672", tab: "ADE 25", title: "Bubble House ADE at Veronicaschip",
    tag: "ADE · Resident Advisor", date: "SUN 26.10.25", dateLong: "Sunday 26 October 2025",
    time: "16:00 — 23:59", venue: "Veronica Schip", city: "Amsterdam", status: "Past · RA",
    img: asset("/flyer-sunday-sesh.jpg"), raUrl: "https://ra.co/events/2262672",
    blurb: "Bubble House ADE at the Veronica Schip, verified on Resident Advisor.",
    lineup: [
      { time: "", name: "San Proper b2b David Maters", b2b: true },
      { time: "", name: "Fieldhouse b2b Munay", b2b: true },
      { time: "", name: "Skettemblau b2b almostDan", b2b: true },
      { time: "", name: "Horsemen", b2b: false },
      { time: "", name: "Boris Werner b2b Boj Tieman", b2b: true },
      { time: "", name: "Aron Friedman b2b 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() {
  const links = ["Events", "Lineup", "Concept", "Pictures", "Apply"];
  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>)}
        <a className="btn btn--sm" href={RA_PROMOTER_URL} target="_blank" rel="noopener noreferrer">Resident Advisor →</a>
      </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() {
  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: "8%", right: "5%" }} />
      <Doodle src={asset("/doodle-runner.png")} h={108} style={{ bottom: "34%", right: "13%" }} />
      <Doodle src={asset("/doodle-star.png")} h={74} style={{ top: "40%", right: "26%" }} />
      <Doodle src={asset("/doodle-pair-dance.png")} h={130} style={{ bottom: "12%", right: "6%" }} />
      <Doodle src={asset("/doodle-eyes.png")} h={48} style={{ top: "13%", right: "22%" }} />

      <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" }}>
          <a className="btn btn--lg" href={RA_PROMOTER_URL} target="_blank" rel="noopener noreferrer">Resident Advisor →</a>
          <a className="btn btn--lg btn--ghost" href="#events">See events</a>
        </div>
      </div>
    </header>);

}

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