/* 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>
  );
}

/* Three expressive feel-knobs:
   · composure — geometry register: calm/editorial → flyer → pasted-on-a-wall chaos
   · accent    — the recolorable highlight ink (tape, markers, nav, line-up)
   · doodles   — how much hand-drawn life (figures + bubbles) scatters the page  */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "composure": "flyer",
  "accent": "#F4F000",
  "doodles": 70
}/*EDITMODE-END*/;

const ACCENTS = ["#F4F000", "#D9F36B", "#F5D5EA", "#AFC4D6", "#A6B06A"];

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  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]);

  const rootStyle = {
    "--dopamine-yellow": t.accent,
    "--marker-yellow": t.accent,
    "--doodle-op": t.doodles === 0 ? 0 : (0.5 + 0.5 * t.doodles / 100),
  };

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

      <TweaksPanel title="Tweaks">
        <TweakSection label="Composition" />
        <TweakRadio label="Composure" value={t.composure}
          options={[{ value: "calm", label: "Calm" }, { value: "flyer", label: "Flyer" }, { value: "chaos", label: "Chaos" }]}
          onChange={(v) => setTweak("composure", v)} />
        <TweakSection label="Ink" />
        <TweakColor label="Accent" value={t.accent} options={ACCENTS}
          onChange={(v) => setTweak("accent", v)} />
        <TweakSection label="Hand-drawn life" />
        <TweakSlider label="Doodles" value={t.doodles} min={0} max={100} step={5} unit="%"
          onChange={(v) => setTweak("doodles", v)} />
      </TweaksPanel>
    </div>
  );
}

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