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

const A = "bh/assets"; // asset root (integrated into FtD site)
// 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 — seed a fixed max pool once, then render `count` of
   them so the Doodles density slider can add/remove bubbles live (and reach 0) */
function Bubbles({ count = 7, zone = "hero" }) {
  const pool = useRef(
    Array.from({ length: 10 }).map(() => ({
      size: 18 + Math.random() * 78,
      left: Math.random() * 100,
      dur: 7 + Math.random() * 8,
      delay: -Math.random() * 10,
      pink: Math.random() > 0.55
    }))
  ).current;
  const seeds = pool.slice(0, Math.max(0, count));
  return (
    <>
      {seeds.map((b, i) =>
      <span key={i} className="hero-bubble" style={{
        width: b.size, height: b.size, left: b.left + "%",
        borderColor: b.pink ? "#d99cc4" : "#111",
        background: b.pink ? "rgba(245,213,234,.4)" : "rgba(255,255,255,.25)",
        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
    }} />);

}

/* Thin top ribbon making the FtD ↔ Bubble House relationship explicit.
   Clicking it crosses back into the dark FtD agency world. */
function PoweredRibbon() {
  return (
    <a className="bh-ribbon" href="index.html" aria-label="Back to Follow the Dopamine">
      <span className="bh-ribbon-back">← Agency</span>
      <span className="bh-ribbon-mid">
        <img className="bh-ribbon-bh" src={asset("/logo-wordmark-black.png")} alt="Bubble House" />
        <span className="bh-ribbon-by">Powered by</span>
        <img src="assets/wordmark-pink.svg" alt="Follow the Dopamine" />
      </span>
      <span className="bh-ribbon-x" aria-hidden="true">↗</span>
    </a>);

}

function Nav({ accent, onTickets }) {
  const links = ["Events", "Lineup", "Concept", "Community"];
  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="nav-link bh-nav-cross" href="index.html" aria-label="FtD Agency">
          <img className="bh-nav-cross-logo" src="assets/wordmark-black.svg" alt="Follow the Dopamine" />
        </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, doodles = 70 }) {
  // doodle density (0–100) → how many scattered figures + drifting bubbles appear
  const HERO_DOODLES = [
  { src: "/doodle-pair-dance.png", h: 122, style: { bottom: "9%", right: "2%" } },
  { src: "/doodle-pair-hold.png", h: 104, style: { top: "7%", right: "1%" } },
  { src: "/doodle-runner.png", h: 92, style: { bottom: "5%", left: "0.5%" } },
  { src: "/doodle-star.png", h: 64, style: { top: "18%", right: "41%" } },
  { src: "/doodle-eyes.png", h: 44, style: { top: "10%", left: "43%" } }];

  const shown = Math.round(doodles / 100 * HERO_DOODLES.length);
  const bubbleCount = Math.round(doodles / 100 * 9);
  return (
    <header className="hero" id="top">
      <div className="hero-spray" />
      <Bubbles count={bubbleCount} />

      <div className="hero-stage">
        <image-slot
          id="bh-hero"
          shape="rect"
          fit="cover"
          src={asset("/photo-hero.jpg")}
          placeholder="Drop a hero photo — the floor, the crowd, the night"
          class="hero-img"
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", display: "block" }}>
        </image-slot>

        {HERO_DOODLES.slice(0, shown).map((d, i) =>
        <Doodle key={i} src={asset(d.src)} h={d.h} style={d.style} />
        )}

        <div className="hero-overlay">
          <a className="tape tape--pink hero-powered" href="index.html">
            ✦ A Follow the Dopamine night
          </a>
          <div className="hero-overlay-bottom">
            <img className="hero-word" src={asset("/logo-wordmark-black.png")} alt="Bubble House" />
            <p className="bh-lead hero-lead">
              An Amsterdam house-music community bursting musical & social bubbles —
              OGs and newcomers on the floor <em>together</em>, back-to-back.
            </p>
            <div className="hero-actions">
              <button className="btn btn--yellow btn--lg" onClick={onTickets}>Get tickets →</button>
              <a className="btn btn--lg btn--ghost hero-ghost" href="#events">See events</a>
            </div>
          </div>
        </div>
      </div>
    </header>);

}

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