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

function EventCard({ ev, onOpen }) {
  return (
    <article className="ecard">
      <div className="ecard-img" onClick={(e) => e.stopPropagation()}>
        <image-slot
          id={"bh-ev-" + ev.id}
          shape="rect"
          fit="contain"
          src={ev.img || undefined}
          placeholder="Drop the flyer — portrait works great"
          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", display: "block" }}
        ></image-slot>
        <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" onClick={() => onOpen(ev)} role="button" tabIndex={0}>
        <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: 340, margin: 0 }}>
          Every edition lands somewhere new in Amsterdam. Drop your own flyer on any
          card — portrait or landscape, it shows in full. Tap the details for the 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>
              <a className="lineup-name" href="https://followthedopamineagency.com/artists" target="_blank" rel="noopener">{a.name}</a>
              {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 VALUES = [
  ["01", "Connection", "Different generations, styles and backgrounds meet through house."],
  ["02", "Discovery", "Established artists and emerging talent share equal space."],
  ["03", "Freedom", "Creative freedom over trends, hype and gatekeeping."],
  ["04", "Community", "People participate in Bubble House — they don't just consume it."],
  ["05", "Playfulness", "Never overly serious. Never institutional."],
  ["06", "Energy", "Collective euphoria. Shared movement on the dancefloor."],
];

function ConceptSection({ doodles = 70 }) {
  return (
    <section className="section concept" id="concept">
      <Bubbles count={Math.round((doodles / 100) * 5)} />
      <div style={{ position: "relative", zIndex: 2, display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 30, alignItems: "center" }}>
        <div>
          <span className="eyebrow"><span className="dot" />The concept</span>
          <h2 className="bh-display" style={{ marginTop: 14 }}>
            Burst the bubble
          </h2>
          <p className="bh-body" style={{ maxWidth: 460, marginTop: 16 }}>
            Bubble House brings generations, styles and communities together through long
            back-to-back sets. Musical dialogue, real connection, and the bursting of bubbles —
            the dancefloor as the place where different worlds collide.
          </p>
        </div>
        <img src={asset("/logo-green-lime.png")} alt="Bubble House" style={{ width: "100%", maxWidth: 230, justifySelf: "center", animation: "float 6s ease-in-out infinite" }} />
      </div>

      <div className="values">
        {VALUES.map(([n, h, p]) => (
          <div className="value" key={n}>
            <div className="value-num">{n}</div>
            <div>
              <div className="value-h">{h}</div>
              <div className="value-p">{p}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

const GALLERY = [
  { id: "floor-1", cap: "Yellow House", tone: "yellow", rot: "-1.5deg", img: "/photo-1.jpg" },
  { id: "floor-2", cap: "Back-to-back", tone: "pink", rot: "1.2deg", img: "/photo-2.jpg" },
  { id: "floor-3", cap: "On the water", tone: "blue", rot: "-1deg", img: "/photo-3.jpg" },
  { id: "floor-4", cap: "First track", tone: "green", rot: "1.6deg", img: "/photo-4.jpg" },
  { id: "floor-5", cap: "Twee zalen", tone: "blue", rot: "-1.2deg", img: "/photo-5.jpg" },
  { id: "floor-6", cap: "Onder Hans", tone: "yellow", rot: "1.3deg", img: "/photo-6.jpg" },
  { id: "floor-7", cap: "Funktion-One", tone: "pink", rot: "-1.4deg", img: "/photo-7.jpg" },
  { id: "floor-8", cap: "06:00 light", tone: "green", rot: "1.1deg", img: "/photo-8.jpg" },
  { id: "floor-9", cap: "Hands up", tone: "blue", rot: "-1.6deg", img: "/photo-9.jpg" },
  { id: "floor-10", cap: "Last dance", tone: "green", rot: "1.4deg", img: "/photo-10.jpg" },
];

function GallerySection({ doodles = 70 }) {
  return (
    <section className="section gallery" id="gallery">
      <Bubbles count={Math.round((doodles / 100) * 4)} />
      <div style={{ position: "relative", zIndex: 2 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 16, flexWrap: "wrap", marginBottom: 30 }}>
          <div>
            <span className="eyebrow"><span className="dot" />The community</span>
            <h2 className="bh-display" style={{ marginTop: 14 }}>From the floor</h2>
          </div>
          <p className="bh-body" style={{ maxWidth: 340, margin: 0 }}>
            Real nights, real people. Drag your own snapshot over any frame to swap it in — every slot saves to the page.
          </p>
        </div>
        <div className="gallery-grid">
          {GALLERY.map((g, i) => (
            <figure className={"gphoto gphoto--" + g.tone} key={g.id} style={{ "--rot": g.rot }}>
              <image-slot
                id={"bh-" + g.id}
                shape="rect"
                fit="cover"
                src={asset(g.img)}
                placeholder="Drop a photo"
                style={{ width: "100%", height: "100%", display: "block" }}
              ></image-slot>
              <figcaption className="tape gphoto-cap">{g.cap}</figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

function SignupSection() {
  return (
    <section className="section signup" id="signup">
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", gap: 16, flexWrap: "wrap", marginBottom: 26 }}>
        <div>
          <span className="eyebrow"><span className="dot" />Play with us</span>
          <h2 className="bh-display" style={{ marginTop: 14 }}>Want to play?</h2>
          <p className="bh-body" style={{ maxWidth: 480, marginTop: 14 }}>
            We build every line-up around dialogue, not hype — OGs and newcomers on the floor
            together. If that's you, send us your music. We listen to everything.
          </p>
        </div>
        <a className="btn btn--pink btn--lg" href="https://forms.gle/FVH1DDMbMYFSbmd37" target="_blank" rel="noopener">
          Open in a new tab ↗
        </a>
      </div>
      <div className="signup-frame">
        <p className="bh-body" style={{ maxWidth: 520, fontWeight: 600 }}>
          The application lives in a quick Google form — your name, your links and what you play.
          We read every submission.
        </p>
        <a className="btn btn--pink btn--lg" href="https://docs.google.com/forms/d/e/1FAIpQLSfA7EqdgK0iWt3jP-IH-euyyDyK4vUjB757mIyZymH3N34rTw/viewform" target="_blank" rel="noopener" style={{ marginTop: 20 }}>
          Open the application form ↗
        </a>
      </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: 360 }}>
            <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. An Amsterdam house-music community,
              powered by the Follow the Dopamine agency.
            </p>
            <a className="footer-powered" href="index.html">
              <span>Powered by</span>
              <img src="assets/wordmark-pink.svg" alt="Follow the Dopamine" />
            </a>
            <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 className="footer-cross">
            <div className="bh-label" style={{ color: "var(--paper-white)", marginBottom: 14 }}>The Agency</div>
            <a href="index.html">Follow the Dopamine</a>
            <a href="artists.html">Artists &amp; roster</a>
            <a href="blog.html">Journal</a>
            <a href="contact.html">Book us</a>
          </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>Powered by Follow the Dopamine · Amsterdam</span>
          <span>Bursting bubbles on the dancefloor</span>
        </div>
      </div>
    </footer>
  );
}

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