/* Bubble House website — TicketModal + App */

function TicketModal({ ev, onClose }) {
  const [qty, setQty] = useState(2);
  const [done, setDone] = useState(false);
  const free = ev.price === "Free";
  const unit = free ? 0 : parseFloat(ev.price.replace("€", "").replace(",", "."));
  const fee = free ? 0 : 1.5;
  const total = (unit * qty + (free ? 0 : fee)).toFixed(2).replace(".", ",");

  useEffect(() => { if (window.lucide) window.lucide.createIcons(); });

  return (
    <div className="scrim" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal-head">
          <span className="eyebrow" style={{ fontSize: 11 }}><span className="dot" />{ev.date} · {ev.city}</span>
          <h3 className="bh-h2" style={{ fontFamily: "var(--font-display)", marginTop: 10, lineHeight: .95 }}>{ev.title}</h3>
          <button className="modal-close" onClick={onClose} aria-label="Close"><i data-lucide="x"></i></button>
        </div>

        {!done ? (
          <div className="modal-bd">
            <p className="bh-body-sm" style={{ marginBottom: 18 }}>{ev.blurb}</p>

            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "12px 0", borderTop: "1.5px solid var(--ink)", borderBottom: "1.5px solid var(--ink)" }}>
              <div>
                <div className="bh-label">Entry</div>
                <div style={{ fontWeight: 600, fontSize: 13, color: "var(--ink-mute)", marginTop: 3 }}>{free ? "Free entry · donation at door" : ev.price + " + €1,50 fee"}</div>
              </div>
              <div className="stepper">
                <button className="step-btn" onClick={() => setQty(q => Math.max(1, q - 1))}>−</button>
                <span className="qty">{qty}</span>
                <button className="step-btn" onClick={() => setQty(q => Math.min(8, q + 1))}>+</button>
              </div>
            </div>

            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", margin: "20px 0 18px" }}>
              <span className="bh-label">Total</span>
              <span style={{ fontFamily: "var(--font-display)", fontSize: 30 }}>{free ? "Free" : "€" + total}</span>
            </div>

            <button className="btn btn--lg" style={{ width: "100%", justifyContent: "center" }} onClick={() => setDone(true)}>
              {free ? "Reserve spot →" : "Pay €" + total + " →"}
            </button>
            <p style={{ textAlign: "center", fontWeight: 600, fontSize: 11.5, color: "var(--ink-mute)", marginTop: 12, textTransform: "uppercase", letterSpacing: ".08em" }}>
              Demo checkout · no real payment
            </p>
          </div>
        ) : (
          <div className="modal-bd" style={{ textAlign: "center" }}>
            <img src={asset("/doodle-star.png")} alt="" style={{ height: 90, margin: "6px auto 0", animation: "wobble 4s ease-in-out infinite" }} />
            <h3 className="bh-h2" style={{ fontFamily: "var(--font-display)", margin: "10px 0 6px" }}>You're in!</h3>
            <p className="bh-body-sm" style={{ marginBottom: 20 }}>
              {qty} {qty > 1 ? "tickets" : "ticket"} for <b>{ev.title}</b> on {ev.dateLong}.
              Check your inbox — see you on the floor.
            </p>
            <button className="btn btn--pink btn--lg" style={{ width: "100%", justifyContent: "center" }} onClick={onClose}>Close</button>
          </div>
        )}
      </div>
    </div>
  );
}

function App() {
  const [modalEv, setModalEv] = useState(null);
  const [featured, setFeatured] = useState(EVENTS[0].id);

  useEffect(() => { if (window.lucide) window.lucide.createIcons(); }, [modalEv]);

  const openTickets = (ev) => setModalEv(ev || EVENTS.find(e => e.id === featured) || EVENTS[0]);

  return (
    <div className="bh-grain">
      <Nav onTickets={() => openTickets()} />
      <Hero onTickets={() => openTickets()} />
      <Marquee />
      <EventsSection onOpen={(ev) => { setFeatured(ev.id); setModalEv(ev); }} />
      <LineupSection featuredId={featured} onSelect={setFeatured} onTickets={openTickets} />
      <ConceptSection />
      <GallerySection />
      <Footer />
      {modalEv && <TicketModal ev={modalEv} onClose={() => setModalEv(null)} />}
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);