/* Bubble House website — sections: Events, Lineup, Concept, Footer */

function EventCard({ ev, onOpen }) {
  return (
    <article className="ecard" onClick={() => onOpen(ev)}>
      <div className="ecard-img">
        {ev.img ? (
          <img src={ev.img} alt={ev.title} />
        ) : (
          <div style={{ width: "100%", height: "100%", background:
            "radial-gradient(circle at 30% 30%, #F5D5EA, transparent 55%), radial-gradient(circle at 75% 70%, #AFC4D6, transparent 55%), #F8F7F5",
            display: "flex", alignItems: "center", justifyContent: "center" }}>
            <img src={asset("/doodle-pair-dance.png")} alt="" style={{ height: 120, opacity: .9 }} />
          </div>
        )}
        <span className="tape ecard-date">{ev.date}</span>
        <span className="tape tape--pink ecard-status">{ev.status}</span>
      </div>
      <div className="ecard-bd">
        <span className="eyebrow" style={{ fontSize: 11 }}><span className="dot" />{ev.tag}</span>
        <h3 className="ecard-title">{ev.title}</h3>
        <div className="ecard-meta">{ev.venue} · {ev.time}</div>
        <a className="btn btn--sm btn--ghost" href={ev.raUrl} target="_blank" rel="noopener noreferrer"
          style={{ marginTop: 16 }} onClick={e => e.stopPropagation()}>View on RA →</a>
      </div>
    </article>
  );
}

function EventsSection({ onOpen }) {
  return (
    <section className="section" id="events">
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 16, flexWrap: "wrap", marginBottom: 34 }}>
        <div>
          <span className="eyebrow"><span className="dot" />Verified event archive</span>
          <h2 className="bh-display" style={{ marginTop: 14 }}>Resident Advisor listings</h2>
        </div>
        <div style={{ maxWidth: 390 }}>
          <p className="bh-body" style={{ margin: 0 }}>
            No future Bubble House event is currently listed on Resident Advisor. Below are the latest verified editions.
          </p>
          <a href={RA_PROMOTER_URL} target="_blank" rel="noopener noreferrer" className="bh-label"
            style={{ display: "inline-block", marginTop: 12, color: "var(--poster-red)" }}>Checked 21 August 2026 · Open RA →</a>
        </div>
      </div>
      <div className="events-grid">
        {EVENTS.map(ev => <EventCard key={ev.id} ev={ev} onOpen={onOpen} />)}
      </div>
    </section>
  );
}

function LineupSection({ featuredId, onSelect }) {
  const ev = EVENTS.find(e => e.id === featuredId) || EVENTS[0];
  return (
    <section className="lineup" id="lineup">
      <div className="section">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 16, flexWrap: "wrap", marginBottom: 26 }}>
          <div>
            <span className="eyebrow"><span className="dot" />Line-up on Resident Advisor</span>
            <h2 className="bh-display" style={{ marginTop: 14, color: "var(--paper-white)" }}>{ev.title}</h2>
            <div style={{ fontWeight: 700, fontSize: 13, textTransform: "uppercase", letterSpacing: ".1em", color: "rgba(248,247,245,.6)", marginTop: 8 }}>
              {ev.dateLong} · {ev.venue}
            </div>
          </div>
          <div style={{ display: "flex", gap: 8, flexWrap: "wrap", maxWidth: 360 }}>
            {EVENTS.map(e => (
              <button key={e.id} onClick={() => onSelect(e.id)}
                className="lineup-tag"
                style={{
                  cursor: "pointer",
                  background: e.id === ev.id ? "var(--dopamine-yellow)" : "transparent",
                  color: e.id === ev.id ? "var(--ink)" : "var(--dopamine-yellow)",
                }}>{e.tab}</button>
            ))}
          </div>
        </div>

        <div>
          {ev.lineup.map((a, i) => (
            <div className="lineup-row" key={i}>
              <span className="lineup-time">{a.time}</span>
              <span className="lineup-name">{a.name}</span>
              {a.b2b && <span className="lineup-tag">B2B</span>}
            </div>
          ))}
        </div>

        <div style={{ marginTop: 30, display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
          <a className="btn btn--yellow btn--lg" href={ev.raUrl} target="_blank" rel="noopener noreferrer">
            View event on Resident Advisor →
          </a>
          <span style={{ fontWeight: 600, fontSize: 13, color: "rgba(248,247,245,.55)" }}>
            Doors {ev.time.split(" — ")[0]} · {ev.city}
          </span>
        </div>
      </div>
    </section>
  );
}

const PRESSURES = [
  ["Generations apart", "Gen Z verbindt online, niet op de vloer — losgekoppeld van house-erfgoed en de mensen die het dragen.", true],
  ["Rising costs", "Stijgende kosten maken onafhankelijke avonden steeds moeilijker rond te krijgen.", false],
  ["Commercialisation", "Programmering richt zich op grote namen, niet op community en uitwisseling.", false],
  ["Urban pressure", "Stadsontwikkeling verdringt juist de community-gerichte dansruimtes.", false],
];

const METHODS = [
  ["WhatsApp community", ""],
  ["Artist collaborations", "pink"],
  ["Community ambassadors", ""],
  ["Partner organisations", ""],
  ["Follow-up conversations", "lime"],
  ["Community-generated content", ""],
  ["Recurring rituals & traditions", "yellow"],
];

const VALUE_CHIPS = [
  ["House Culture", ""],
  ["Community", "pink"],
  ["Accessibility", ""],
  ["Inclusivity", ""],
  ["Creative Freedom", "lime"],
  ["Intergenerational Exchange", ""],
  ["Cultural Preservation", ""],
  ["Transparency", "yellow"],
  ["Playful Professionalism", "moss"],
];

const ROADMAP = [
  ["2026", "Consolidate", "red", ["Expand Bubble House events", "Strengthen community structure", "Launch cultural archive initiatives"]],
  ["2027", "Widen", "", ["Festival takeovers", "Educational programming", "Radio & podcast formats"]],
  ["2028+", "Movement", "yellow", ["International collaborations", "Travelling editions", "Permanent cultural platform"]],
];

function CxHead({ num, label }) {
  return (
    <div className="cx-ix">
      <span className="num">{num}</span>
      <span className="eyebrow">{label}</span>
    </div>
  );
}

function ConceptSection() {
  return (
    <section className="section cx" id="concept">
      <Bubbles count={3} />
      <div className="cx-inner">

        {/* ---- 01 · Mission ---- */}
        <div className="cx-block">
          <CxHead num="01" label="The concept" />
          <h2 className="bh-display cx-h">Use house as a<br />common language</h2>
          <p className="cx-lead">Bubble House connects generations, scenes and communities on one shared floor.</p>
          <div className="triad-row">
            <span>Connect generations</span>
            <span>Connect scenes</span>
            <span>Connect communities</span>
          </div>
          <image-slot id="cx-mission" className="cx-photo cx-photo--wide" shape="rounded" radius="6"
            src="/bh/assets/albums/veronicaschip-dancefloor.jpg" role="img"
            aria-label="Crowd dancing around the booth at Bubble House on the Veronicaschip"></image-slot>
        </div>

        {/* ---- 02 · The problem ---- */}
        <div className="cx-block">
          <CxHead num="02" label="Het probleem" />
          <div className="cx-two">
            <div>
              <h2 className="bh-display cx-h">Everyone's dancing —<br />in <span className="hl p">separate circles</span></h2>
              <ul className="prob-list">
                <li><span className="n">01</span>Generations grow apart</li>
                <li><span className="n">02</span>Rising costs</li>
                <li><span className="n">03</span>Commercialisation</li>
                <li><span className="n">04</span>Urban pressure</li>
              </ul>
            </div>
            <image-slot id="cx-problem" className="cx-photo" shape="rounded" radius="6"
              src="/bh/assets/albums/veronicaschip-crowd.jpg" role="img"
              aria-label="Bubble House crowd seen from behind the booth at the Veronicaschip"></image-slot>
          </div>
        </div>

        {/* ---- 03 · The mechanism ---- */}
        <div className="cx-block">
          <CxHead num="03" label="How we connect" />
          <h2 className="bh-display cx-h">The B2B is the bridge</h2>
          <div className="b2b">
            <div className="b2b-circle"><div className="h">Scene A</div><div className="s">artist & crowd</div></div>
            <span className="b2b-arrow">→</span>
            <div className="b2b-core"><div className="h">B2B</div><div className="s">two artists,<br />one booth</div></div>
            <span className="b2b-arrow">←</span>
            <div className="b2b-circle pinkline"><div className="h">Scene B</div><div className="s">artist & crowd</div></div>
          </div>
          <p className="b2b-close"><span className="hl y">Eén vloer. Communities die elkaar nooit tegenkomen.</span></p>
        </div>

        {/* ---- 04 · Communities ---- */}
        <div className="cx-block">
          <CxHead num="04" label="Community" />
          <div className="cx-two">
            <div>
              <h2 className="statement">We don't build audiences.<br /><span className="red">We build communities.</span></h2>
              <p className="statement-sub">Bubble House bouwt geen publiek — Bubble House bouwt community.</p>
            </div>
            <image-slot id="cx-community" className="cx-photo" shape="rounded" radius="6"
              src="/bh/assets/albums/yellow-house-community.jpg" role="img"
              aria-label="Two visitors sharing a moment at Bubble House in Yellow House"></image-slot>
          </div>
        </div>

        {/* ---- 05 · Core values ---- */}
        <div className="cx-block">
          <CxHead num="05" label="Kernwaarden" />
          <div className="chips">
            {VALUE_CHIPS.map(([h, c]) => <div className={"chip" + (c ? " " + c : "")} key={h}>{h}</div>)}
          </div>
        </div>

        {/* ---- 06 · Roadmap ---- */}
        <div className="cx-block">
          <CxHead num="06" label="The future" />
          <h2 className="bh-display cx-h">From roots to a movement</h2>
          <div className="road">
            {ROADMAP.map(([yr, ph, c, items]) => (
              <div className={"road-col" + (c ? " " + c : "")} key={yr}>
                <div className="yr">{yr}</div>
                <div className="ph">{ph}</div>
                <ul>{items.slice(0, 2).map(it => <li key={it}>{it}</li>)}</ul>
              </div>
            ))}
          </div>
        </div>

      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer" id="community">
      <div className="footer-inner">
        <div className="footer-top">
          <div style={{ maxWidth: 380 }}>
            <img className="footer-logo" src={asset("/logo-wordmark-black.png")} alt="Bubble House" style={{ filter: "invert(1)" }} />
            <p className="bh-body" style={{ color: "rgba(248,247,245,.7)", marginTop: 16 }}>
              Bursting bubbles on the dancefloor. Powered by Follow the Dopamine, Amsterdam.
            </p>
            <div className="socials">
              <a className="social" href="https://www.instagram.com/followthedopamine.agency/" target="_blank" rel="noopener noreferrer" aria-label="Follow the Dopamine on Instagram"><i data-lucide="camera"></i></a>
              <a className="social" href={RA_PROMOTER_URL} target="_blank" rel="noopener noreferrer" aria-label="Resident Advisor"><i data-lucide="radio"></i></a>
              <a className="social" href="mailto:dawn@followthedopamine.agency?subject=Bubble%20House" aria-label="Email Follow the Dopamine"><i data-lucide="mail"></i></a>
            </div>
          </div>
          <div>
            <div className="bh-label" style={{ color: "var(--paper-white)", marginBottom: 12 }}>Stay connected</div>
            <p className="bh-body-sm" style={{ color: "rgba(248,247,245,.6)", maxWidth: 280, marginBottom: 16 }}>
              Questions, collaborations or updates about the next edition? Get in touch with Follow the Dopamine.
            </p>
            <a className="btn btn--yellow" href="mailto:dawn@followthedopamine.agency?subject=Bubble%20House%20enquiry">Email us →</a>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 Bubble House</span>
          <span>Amsterdam · NL</span>
          <span>Bursting bubbles on the dancefloor</span>
        </div>
      </div>
    </footer>
  );
}

const GALLERY = [
  { id: "bh-g1", span: 5, h: 330, src: "/albums/veronicaschip-b2b.jpg", cap: "Veronicaschip · Back-to-back", alt: "Two artists playing back-to-back at Bubble House on the Veronicaschip" },
  { id: "bh-g2", span: 4, h: 330, src: "/albums/yellow-house-artist.jpg", cap: "Yellow House · Behind the booth", alt: "Artist performing at Bubble House in Yellow House" },
  { id: "bh-g3", span: 3, h: 330, src: "/albums/yellow-house-energy.jpg", cap: "Yellow House · Energy in the room", alt: "Visitor enjoying Bubble House in Yellow House" },
  { id: "bh-g4", span: 4, h: 300, src: "/albums/veronicaschip-bubbles.jpg", cap: "Veronicaschip · Bubbles in the booth", alt: "Bubbles floating through the Bubble House booth on the Veronicaschip" },
  { id: "bh-g5", span: 4, h: 300, src: "/albums/yellow-house-dancefloor.jpg", cap: "Yellow House · On the floor", alt: "Visitor dancing at Bubble House in Yellow House" },
  { id: "bh-g6", span: 4, h: 300, src: "/albums/yellow-house-sign.jpg", cap: "Yellow House · Follow the Dopamine", alt: "Follow the Dopamine neon sign at Bubble House in Yellow House" },
];

function GallerySection() {
  return (
    <section className="section gallery" id="pictures">
      <Bubbles count={3} />
      <div style={{ position: "relative", zIndex: 2, maxWidth: 1100, margin: "0 auto" }}>
        <CxHead num="07" label="Op de vloer · On the floor" />
        <h2 className="bh-display cx-h">Snapshots from the floor</h2>
        <p className="cx-lead">A look back at Bubble House in Yellow House and on the Veronicaschip: shared floors, back-to-back sets and the people who made the room.</p>
        <div className="gw">
          {GALLERY.map(g => (
            <div className="gcell" style={{ gridColumn: "span " + g.span }} key={g.id}>
              <image-slot id={g.id} shape="rounded" radius="6" style={{ height: g.h + "px" }}
                src={"/bh/assets" + g.src} role="img" aria-label={g.alt}></image-slot>
              <span className="gcap">{g.cap}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- APPLY · artist application form ---------- */
const APPLY_SLOTS = ["Early start", "Peak time", "Closing", "B2B set"];
const APPLY_SOUNDS = ["House", "Deep / soulful", "Acid", "Techno", "Disco / edits", "Live set", "Other"];

function ApplySection() {
  const [slot, setSlot] = useState("B2B set");
  const [sound, setSound] = useState("House");
  const [sent, setSent] = useState(false);

  function openApplicationEmail(event) {
    event.preventDefault();
    const data = new FormData(event.currentTarget);
    const body = [
      "Hi Follow the Dopamine,",
      "",
      "I would like to play at Bubble House.",
      "",
      `Artist / act: ${data.get("artistName") || ""}`,
      `Email: ${data.get("email") || ""}`,
      `Music link: ${data.get("musicLink") || ""}`,
      `Home scene / city: ${data.get("city") || ""}`,
      `Sound: ${sound}`,
      `Preferred slot: ${slot}`,
      `Dream B2B partner: ${data.get("partner") || ""}`,
      "",
      "About:",
      data.get("about") || "",
    ].join("\n");
    window.location.href = `mailto:dawn@followthedopamine.agency?subject=${encodeURIComponent("Bubble House artist application")}&body=${encodeURIComponent(body)}`;
    setSent(true);
  }

  if (sent) {
    return (
      <section className="section apply" id="apply">
        <Bubbles count={3} />
        <div className="apply-inner">
          <div className="apply-done">
            <img src={asset("/doodle-star.png")} alt="" style={{ height: 96, animation: "wobble 4s ease-in-out infinite" }} />
            <h2 className="bh-display cx-h" style={{ marginTop: 10 }}>Your email is ready</h2>
            <p className="cx-lead" style={{ margin: "16px auto 0" }}>
              Your email app has opened with the application details. Review the message and press send there to complete your application.
            </p>
            <button className="btn btn--yellow btn--lg" style={{ marginTop: 26 }} onClick={() => setSent(false)}>
              Back to the form →
            </button>
          </div>
        </div>
      </section>
    );
  }

  return (
    <section className="section apply" id="apply">
      <Bubbles count={3} />
      <div className="apply-inner">
        <div className="apply-head">
          <CxHead num="08" label="Play with us" />
          <h2 className="bh-display cx-h">Want to play<br />Bubble House?</h2>
          <p className="cx-lead">
            We book on feeling, not follower count. OGs and newcomers, back-to-back.
            Stuur je muziek — we luisteren naar alles.
          </p>
        </div>

        <form className="apply-form" onSubmit={openApplicationEmail}>
          <div className="af-row">
            <label className="af-field">
              <span className="af-label">Artist / act name</span>
              <input type="text" name="artistName" required placeholder="What's on the flyer?" />
            </label>
            <label className="af-field">
              <span className="af-label">Email</span>
              <input type="email" name="email" required placeholder="you@email.com" />
            </label>
          </div>

          <div className="af-row">
            <label className="af-field">
              <span className="af-label">Music link</span>
              <input type="url" name="musicLink" required placeholder="SoundCloud · RA · Instagram" />
            </label>
            <label className="af-field">
              <span className="af-label">Home scene / city</span>
              <input type="text" name="city" placeholder="Amsterdam, Noord…" />
            </label>
          </div>

          <div className="af-field">
            <span className="af-label">Your sound</span>
            <div className="af-chips">
              {APPLY_SOUNDS.map(s => (
                <button type="button" key={s} className={"af-chip" + (sound === s ? " on" : "")} onClick={() => setSound(s)}>{s}</button>
              ))}
            </div>
          </div>

          <div className="af-field">
            <span className="af-label">Slot that fits you</span>
            <div className="af-chips">
              {APPLY_SLOTS.map(s => (
                <button type="button" key={s} className={"af-chip" + (slot === s ? " on" : "")} onClick={() => setSlot(s)}>{s}</button>
              ))}
            </div>
          </div>

          <label className="af-field">
            <span className="af-label">Dream B2B partner <span className="af-opt">(optional)</span></span>
            <input type="text" name="partner" placeholder="Who would you love to share the booth with?" />
          </label>

          <label className="af-field">
            <span className="af-label">Tell us about you</span>
            <textarea name="about" rows="4" placeholder="A few lines — where you've played, what you'd bring to the floor."></textarea>
          </label>

          <div className="af-foot">
            <button className="btn btn--yellow btn--lg" type="submit">Open email draft →</button>
            <span className="af-note">Your application is sent only after you confirm it in your email app.</span>
          </div>
        </form>
      </div>
    </section>
  );
}

Object.assign(window, { EventCard, EventsSection, LineupSection, ConceptSection, GallerySection, ApplySection, Footer });