/* 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 ecard-status " + (ev.status === "Free entry" ? "tape--pink" : "")}>{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>
      </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" />What's on</span>
          <h2 className="bh-display" style={{ marginTop: 14 }}>Upcoming</h2>
        </div>
        <p className="bh-body" style={{ maxWidth: 320, margin: 0 }}>
          Every edition lands somewhere new in Amsterdam. Tap a poster for the full bill.
        </p>
      </div>
      <div className="events-grid">
        {EVENTS.map(ev => <EventCard key={ev.id} ev={ev} onOpen={onOpen} />)}
      </div>
    </section>
  );
}

function LineupSection({ featuredId, onSelect, onTickets }) {
  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</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.title.split(" ")[0]}</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" }}>
          <button className="btn btn--yellow btn--lg" onClick={() => onTickets(ev)}>
            Tickets · {ev.price} →
          </button>
          <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={asset("/flyer-yellow-house.jpg")} placeholder="Drop a dancefloor photo"></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={asset("/flyer-brinker-bar.jpg")} placeholder="Drop a crowd photo"></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={asset("/flyer-sunday-sesh.jpg")} placeholder="Drop a community photo"></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() {
  const [sent, setSent] = useState(false);
  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="#" aria-label="Instagram"><i data-lucide="camera"></i></a>
              <a className="social" href="#" aria-label="SoundCloud"><i data-lucide="disc-3"></i></a>
              <a className="social" href="#" aria-label="Resident Advisor"><i data-lucide="radio"></i></a>
              <a className="social" href="#" aria-label="Mail"><i data-lucide="mail"></i></a>
            </div>
          </div>
          <div>
            <div className="bh-label" style={{ color: "var(--paper-white)", marginBottom: 12 }}>Join the list</div>
            <p className="bh-body-sm" style={{ color: "rgba(248,247,245,.6)", maxWidth: 280, marginBottom: 6 }}>
              Early access to every edition. No spam, just bubbles.
            </p>
            <form className="news" onSubmit={e => { e.preventDefault(); setSent(true); }}>
              <input type="email" placeholder="your@email.com" required disabled={sent} />
              <button className="btn btn--yellow" type="submit">{sent ? "✓ In" : "Sign up"}</button>
            </form>
          </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: "/flyer-yellow-house.jpg", cap: "Yellow House" },
  { id: "bh-g2", span: 4, h: 330, cap: "On the floor" },
  { id: "bh-g3", span: 3, h: 330, cap: "The room" },
  { id: "bh-g4", span: 4, h: 300, cap: "B2B booth" },
  { id: "bh-g5", span: 4, h: 300, src: "/flyer-sunday-sesh.jpg", cap: "Sunday Sesh" },
  { id: "bh-g6", span: 4, h: 300, src: "/flyer-brinker-bar.jpg", cap: "Brinker Bar" },
];

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">Bubble nights, taped to the wall. Drag in your own dancefloor moments.</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" }}
                {...(g.src ? { src: asset(g.src) } : {})} placeholder="Drop a floor photo"></image-slot>
              <span className="gcap">{g.cap}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

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