/* WHY NOT? POKER NIGHT × FONTAINEBLEAU LAS VEGAS — private registration */
const { useState, useEffect, useMemo, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroImage": "Poker Night",
  "accent": "#89764A",
  "eventDate": "Thursday, September 17, 2026",
  "eventTime": "6:00 PM",
  "venue": "Solo Lounge"
}/*EDITMODE-END*/;

const HERO_IMAGES = {
  "Poker Night": "fontainebleau/assets/hero-poker.jpg",
  "Penthouse": "fontainebleau/assets/hero-penthouse.jpg",
  "Lobby": "fontainebleau/assets/lobby.jpg",
  "Exterior": "fontainebleau/assets/exterior.jpg",
};

const TIERS = [
  {
    id: "salon", name: "Salon Seat", suit: "\u2660", price: 2500, unit: "per seat", perSeat: true,
    list: ["Private tournament entry & chip stack", "Champagne reception & seated dinner", "Bowtie welcome gift & commemorative chips"],
  },
  {
    id: "table", name: "Reserved Table", suit: "\u2666", price: 18000, unit: "table of eight", perSeat: false, seats: 8,
    list: ["Eight seats, premier salon placement", "Dedicated host & reserved bottle service", "Recognition on event signage", "Welcome gifts for the full table"],
  },
  {
    id: "patron", name: "Founding Patron", suit: "\u2663", price: 40000, unit: "presenting partner", perSeat: false, seats: 8,
    list: ["Branded table of eight, prime placement", "Private suite access for up to ten guests", "Logo on step-and-repeat & program", "Overnight suite at Fontainebleau Las Vegas"],
  },
];

const fmt = (n) => n.toLocaleString("en-US");

/* ---------- scroll utilities ---------- */
function useReveal() {
  useEffect(() => {
    const els = [...document.querySelectorAll(".reveal")];
    const reveal = (el) => el.classList.add("in");
    const check = () => {
      const h = window.innerHeight || 800;
      els.forEach((el) => {
        if (el.classList.contains("in")) return;
        const r = el.getBoundingClientRect();
        if (r.top < h * 0.92 && r.bottom > 0) reveal(el);
      });
    };
    check();
    window.addEventListener("scroll", check, { passive: true });
    window.addEventListener("resize", check);
    let io;
    if ("IntersectionObserver" in window) {
      io = new IntersectionObserver(
        (entries) => entries.forEach((e) => { if (e.isIntersecting) reveal(e.target); }),
        { threshold: 0, rootMargin: "0px 0px -6% 0px" }
      );
      els.forEach((el) => io.observe(el));
    }
    const safety = setTimeout(() => els.forEach(reveal), 2600);
    return () => {
      window.removeEventListener("scroll", check);
      window.removeEventListener("resize", check);
      io && io.disconnect();
      clearTimeout(safety);
    };
  }, []);
}
function useScrolled() {
  const [s, setS] = useState(false);
  useEffect(() => {
    const onScroll = () => setS(window.scrollY > 60);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return s;
}
const scrollTo = (id) => document.getElementById(id)?.scrollIntoView({ behavior: "smooth", block: "start" });

const SuitRule = ({ className = "" }) => (
  <div className={"suit-rule " + className}>
    <span className="seg" />
    <span className="seg r" />
  </div>
);

/* ---------- NAV ---------- */
function Nav() {
  const scrolled = useScrolled();
  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")}>
      <img className="nav-logo" src="fontainebleau/assets/whynot-white.png" alt="Russell Westbrook Why Not? Foundation" />
      <div className="nav-mid">
        <a onClick={() => scrollTo("invite")}>The Evening</a>
        <a onClick={() => scrollTo("venue")}>The Venue</a>
        <a onClick={() => scrollTo("details")}>Details</a>
        <button className="nav-cta" onClick={() => scrollTo("register")}>Register</button>
      </div>
    </nav>
  );
}

/* ---------- HERO SLIDER (splash + venue gallery in one) ---------- */
const SLIDES = [
  { kind: "splash", img: "https://whynotfoundation.org/wp-content/uploads/2026/06/hero-westbrook-v3.jpg" },
  { kind: "venue", img: "fontainebleau/assets/exterior.jpg", title: "Fontainebleau Las Vegas", sub: "The Strip's most anticipated address." },
  { kind: "venue", img: "fontainebleau/assets/lobby.jpg", title: "The Grand Lobby", sub: "Brass, marble, and a thousand roses beneath the dome." },
  { kind: "venue", img: "fontainebleau/assets/bleaubar.jpg", title: "The Casino Floor", sub: "The social heart of the room, crowned in light." },
  { kind: "venue", img: "fontainebleau/assets/hero-penthouse.jpg", title: "The Penthouse Salon", sub: "Where our private evening of play unfolds, high above the city." },
];

function Hero({ t }) {
  const [i, setI] = useState(0);
  const timer = useRef(null);
  const auto = () => { clearInterval(timer.current); timer.current = setInterval(() => setI((p) => (p + 1) % SLIDES.length), 7000); };
  const go = (n) => { setI((n + SLIDES.length) % SLIDES.length); auto(); };
  useEffect(() => { auto(); return () => clearInterval(timer.current); }, []);
  return (
    <header className="hero hero-slider" id="top"
      onMouseEnter={() => clearInterval(timer.current)} onMouseLeave={auto}>
      {SLIDES.map((s, idx) => (
        <div key={idx} className={"hs-slide k" + (idx % 4) + (idx === i ? " active" : "")}>
          <img src={s.img} alt={s.title || "Why Not? Poker Night"} />
        </div>
      ))}
      <div className="hero-veil" />
      <div className="hero-inner hs-cap in">
        <div className="hero-collab">
          <img className="collab-mark" src="fontainebleau/assets/whynot-mark-white.png" alt="Russell Westbrook Why Not? Foundation" />
          <span className="collab-divider" />
          <img src="fontainebleau/assets/logo-white.png" alt="Fontainebleau Las Vegas" />
        </div>
        <h1><span className="h1-pre">The 6th Annual</span><strong>Why Not? Poker Night</strong></h1>
        <SuitRule className="hero-rule" />
        <div className="hero-meta">
          <span>{t.eventDate}</span>
          <span className="dot">&middot;</span>
          <span>{t.venue}</span>
        </div>
        <div className="hero-actions" style={{ marginTop: "36px" }}>
          <button className="btn btn-primary" onClick={() => scrollTo("register")}>
            Request Your Place <span className="arrow">&rarr;</span>
          </button>
          <button className="btn btn-ghost" onClick={() => scrollTo("invite")}>The Evening</button>
        </div>
      </div>
      <button className="garrow prev" aria-label="Previous" onClick={() => go(i - 1)}>&#8249;</button>
      <button className="garrow next" aria-label="Next" onClick={() => go(i + 1)}>&#8250;</button>
      <div className="gdots hero-dots">
        {SLIDES.map((_, idx) => (
          <button key={idx} className={"gdot" + (idx === i ? " active" : "")} aria-label={"Slide " + (idx + 1)} onClick={() => go(idx)} />
        ))}
      </div>
    <div className="hero-scroll-cue" aria-hidden="true"><span className="chev" /></div>
    </header>
  );
}

/* ---------- INVITATION / WELCOME ---------- */
function Invitation() {
  return (
    <section className="invite" id="invite">
      <img className="bg-bowtie" src="fontainebleau/assets/bowtie-gold.png" alt="" />
      <div className="invite-grid reveal wrap">
        <div className="invite-photo">
          <img src="fontainebleau/assets/FBLV_Solo%20Club_03%20Large.jpeg" alt="The Solo Club at Fontainebleau Las Vegas" />
        </div>
        <div className="invite-content">
          <h2>An Evening of Consequence,<br /><strong>Hosted in the Sky</strong></h2>
          <p>
            For one private evening, the Why Not? Foundation takes residence at Fontainebleau
            Las Vegas — the Strip's most anticipated address — for a night of cards, cause, and
            quiet glamour reserved for our closest friends and patrons.
          </p>
          <p>
            Every seat at the table directly funds the foundation's mission of creating pathways
            of empowerment for underserved populations in South Los Angeles. This registration is
            extended by invitation; your access code accompanies your invitation.
          </p>
        </div>
      </div>
    </section>
  );
}

/* ---------- THE VENUE ---------- */
function Venue() {
  return (
    <section className="invite venue-sec" id="venue">
      <div className="invite-grid venue-grid reveal wrap">
        <div className="invite-content">
          <div className="eyebrow">The Venue</div>
          <h2>Solo Lounge,<br /><strong>at Fontainebleau</strong></h2>
          <p>
            Tucked within Fontainebleau Las Vegas, Solo Lounge sets the stage for the evening —
            an intimate room of brass, marble, and candlelight, steps from the casino floor.
          </p>
          <p>
            Cocktails and conversation give way to the tables, where the night's play unfolds
            in quiet luxury, just for our guests.
          </p>
        </div>
        <div className="invite-photo">
          <img src="fontainebleau/assets/bleaubar.jpg" alt="The lounge at Fontainebleau Las Vegas" />
        </div>
      </div>
    </section>
  );
}

/* ---------- DETAILS ---------- */
function Details({ t }) {
  const cells = [
    { k: "Date", v: t.eventDate.split(",")[0], s: t.eventDate.split(",").slice(1).join(",").trim() },
    { k: "Venue", v: t.venue, s: "at Fontainebleau Las Vegas" },
    { k: "Attire", v: "Black Tie", s: "Cocktail optional" },
  ];
  return (
    <section className="details" id="details">
      <div className="wrap">
        <div className="details-head reveal">
          <div className="eyebrow">The Particulars</div>
          <SuitRule className="head-rule" />
          <h2>The Evening</h2>
        </div>
        <div className="details-grid reveal">
          {cells.map((c, i) => (
            <div className="dcell" key={i}>
              <div className="k">{c.k}</div>
              <div className="v">{c.v}</div>
              <div className="s">{c.s}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- REGISTER ---------- */
function Register({ t, onConfirm }) {
  const [tierId, setTierId] = useState("table");
  const [seats, setSeats] = useState(2);
  const [form, setForm] = useState({ code: "", name: "", email: "", phone: "", org: "", guests: "", diet: "", comments: "" });
  const [errors, setErrors] = useState({});

  const tier = TIERS.find((x) => x.id === tierId);
  const total = useMemo(() => (tier.perSeat ? tier.price * seats : tier.price), [tier, seats]);
  const set = (k, v) => setForm((f) => ({ ...f, [k]: v }));

  const validate = () => {
    const e = {};
    if (!form.code.trim()) e.code = "Your invitation code is required";
    if (!form.name.trim()) e.name = "Required";
    if (!/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email)) e.email = "Enter a valid email";
    if (!form.phone.trim()) e.phone = "Required";
    setErrors(e);
    return Object.keys(e).length === 0;
  };
  const submit = (ev) => {
    ev.preventDefault();
    if (!validate()) { document.querySelector(".field.err input")?.focus(); return; }
    onConfirm({
      name: form.name, email: form.email,
      tierName: tier.name, seats: tier.perSeat ? seats : tier.seats, total,
    });
  };

  return (
    <section className="register" id="register">
      <img className="bg-bowtie" src="fontainebleau/assets/bowtie-gold.png" alt="" />
      <div className="wrap">
        <div className="reg-head reveal">
          <div className="eyebrow">Reserve Your Place</div>
          <SuitRule className="head-rule" />
          <h2>Registration</h2>
          <p>Select your table and confirm your details below. Every reservation directly
            supports the foundation's work in South Los Angeles.</p>
        </div>

        <div className="tiers reveal">
          {TIERS.map((x) => (
            <button type="button" key={x.id}
              className={"tier" + (tierId === x.id ? " sel" : "")}
              onClick={() => setTierId(x.id)}>
              <div className="tier-name">{x.name}</div>
              <div className="tier-price"><span className="cur">$</span>{fmt(x.price)}</div>
              <div className="tier-unit">{x.unit}</div>
              <div className="tier-divider" />
              <ul className="tier-list">{x.list.map((l, i) => <li key={i}>{l}</li>)}</ul>
              <div className="tier-pick">
                <span className="tier-radio" />
                {tierId === x.id ? "Selected" : "Select"}
              </div>
            </button>
          ))}
        </div>

        <form className="reg-form reveal" onSubmit={submit} noValidate>
          <div className="form-row one" style={{ marginBottom: 34 }}>
            <div className={"field code" + (errors.code ? " err" : "")}>
              <label>Invitation Code <span className="req">*</span></label>
              <input value={form.code} placeholder="• • • • • •" maxLength={12}
                onChange={(e) => set("code", e.target.value.toUpperCase())} />
              <div className="msg center">{errors.code || ""}</div>
            </div>
          </div>

          {tier.perSeat ? (
            <div className="form-row" style={{ marginBottom: 30 }}>
              <div className="field">
                <label>Number of Seats</label>
                <div className="stepper">
                  <button type="button" disabled={seats <= 1} onClick={() => setSeats((s) => Math.max(1, s - 1))}>&minus;</button>
                  <span className="num">{seats}</span>
                  <button type="button" disabled={seats >= 7} onClick={() => setSeats((s) => Math.min(7, s + 1))}>+</button>
                </div>
              </div>
              <div className="field" style={{ justifyContent: "flex-end" }}>
                <label>Selected</label>
                <div style={{ fontFamily: "var(--display)", fontWeight: 300, fontSize: "1.4rem", letterSpacing: ".05em", textTransform: "uppercase", color: "var(--ivory)" }}>
                  {tier.name} &middot; {seats} {seats > 1 ? "Seats" : "Seat"}
                </div>
              </div>
            </div>
          ) : (
            <div className="form-row one" style={{ marginBottom: 30 }}>
              <div className="field">
                <label>Selected</label>
                <div style={{ fontFamily: "var(--display)", fontWeight: 300, fontSize: "1.4rem", letterSpacing: ".05em", textTransform: "uppercase", color: "var(--ivory)" }}>
                  {tier.name} &middot; {tier.unit}
                </div>
              </div>
            </div>
          )}

          <div className="form-row">
            <Field id="name" label="Full Name" req val={form.name} err={errors.name} onChange={set} placeholder="Jordan Carter" />
            <Field id="email" label="Email" req type="email" val={form.email} err={errors.email} onChange={set} placeholder="you@email.com" />
          </div>
          <div className="form-row">
            <Field id="phone" label="Phone" req val={form.phone} err={errors.phone} onChange={set} placeholder="(555) 010-1234" />
            <Field id="org" label="Company / Affiliation" val={form.org} onChange={set} placeholder="Optional" />
          </div>
          <div className="form-row one">
            <Field id="guests" label="Guest Names" textarea val={form.guests} onChange={set} placeholder="List any guests joining you at the table (optional)" />
          </div>
          <div className="form-row">
            <Field id="diet" label="Dietary Preferences" val={form.diet} onChange={set} placeholder="Optional" />
            <Field id="comments" label="Anything Else?" val={form.comments} onChange={set} placeholder="Optional" />
          </div>

          <div className="reg-foot">
            <div className="summary">
              <div className="sl">Total</div>
              <div className="st"><span className="cur">$</span>{fmt(total)}</div>
              <div className="sd">{tier.name} &middot; {tier.perSeat ? `${seats} ${seats > 1 ? "seats" : "seat"}` : tier.unit}</div>
            </div>
            <button className="btn btn-primary" type="submit" style={{ padding: "20px 44px" }}>
              Confirm Reservation <span className="arrow">&rarr;</span>
            </button>
          </div>
        </form>
      </div>
    </section>
  );
}

function Field({ id, label, req, type = "text", val, err, onChange, placeholder, textarea }) {
  return (
    <div className={"field" + (err ? " err" : "")}>
      <label>{label}{req && <span className="req"> *</span>}</label>
      {textarea
        ? <textarea value={val} placeholder={placeholder} onChange={(e) => onChange(id, e.target.value)} />
        : <input type={type} value={val} placeholder={placeholder} onChange={(e) => onChange(id, e.target.value)} />}
      <div className="msg">{err || ""}</div>
    </div>
  );
}

/* ---------- CONFIRMATION ---------- */
function Confirmation({ data, onClose }) {
  return (
    <div className={"confirm-overlay" + (data ? " show" : "")} onClick={onClose}>
      {data && (
        <div className="confirm-card" onClick={(e) => e.stopPropagation()}>
          <button className="confirm-x" onClick={onClose}>&#10005;</button>
          <img className="confirm-bowtie" src="fontainebleau/assets/bowtie-gold.png" alt="" />
          <div className="eyebrow" style={{ marginBottom: "16px" }}>You Are Confirmed</div>
          <h3>We Shall See You<br />at the Table</h3>
          <p>
            Thank you, <span className="em">{data.name.split(" ")[0]}</span>. Your <span className="em">{data.tierName}</span>
            {data.seats ? <> — {data.seats} {data.seats > 1 ? "seats" : "seat"}</> : null} is reserved for the
            private Why Not? Poker Night at Fontainebleau Las Vegas.
          </p>
          <p style={{ fontSize: ".9rem" }}>A confirmation, suite details, and arrival instructions are on their way to <span className="em">{data.email}</span>.</p>
          <button className="btn btn-primary confirm-close" onClick={onClose}>Done</button>
        </div>
      )}
    </div>
  );
}

/* ---------- FOOTER ---------- */
function Footer() {
  return (
    <footer className="footer">
      <div className="footer-lockup reveal">
        <a href="https://whynotfoundation.org" target="_blank" rel="noopener noreferrer"><img src="fontainebleau/assets/whynot-gold.png" alt="Russell Westbrook Why Not? Foundation" style={{ height: 50 }} /></a>
        <img src="fontainebleau/assets/logo-gold.png" alt="Fontainebleau Las Vegas" />
      </div>
      <p className="footer-mission">
        All proceeds raised support the foundation's mission in creating pathways of empowerment
        for underserved populations in South Los Angeles.
      </p>
      <div className="footer-meta">
        <div className="fm-left">
          <span>&copy; 2026 Russell Westbrook Why Not? Foundation</span>
          <span className="fm-sep">&middot;</span>
          <span>Site by <a href="https://pjinteractive.com" target="_blank" rel="noopener noreferrer" style={{ color: "inherit", textDecoration: "none" }}>PJ Interactive</a></span>
        </div>
        <a className="fm-top" onClick={() => scrollTo("top")}>
          Back to Top <span className="fm-arrow">&uarr;</span>
        </a>
      </div>
    </footer>
  );
}

/* ---------- APP ---------- */
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [confirm, setConfirm] = useState(null);
  useReveal();

  useEffect(() => {
    document.documentElement.style.setProperty("--gold", t.accent);
  }, [t.accent]);

  useEffect(() => {
    const el = document.getElementById("loader");
    if (!el) return;
    const t1 = setTimeout(() => el.classList.add("hide"), 1700);
    const t2 = setTimeout(() => { el.remove(); }, 2500);
    return () => { clearTimeout(t1); clearTimeout(t2); };
  }, []);

  return (
    <>
      <Nav />
      <Hero t={t} />
      <Invitation />
      <Venue />
      <Details t={t} />
      <Register t={t} onConfirm={setConfirm} />
      <Footer />
      <Confirmation data={confirm} onClose={() => setConfirm(null)} />

      <TweaksPanel>
        <TweakSection label="Hero" />
        <TweakRadio label="Hero image" value={t.heroImage} options={["Poker Night", "Penthouse", "Lobby", "Exterior"]}
          onChange={(v) => setTweak("heroImage", v)} />
        <TweakSection label="Brand" />
        <TweakColor label="Accent" value={t.accent}
          options={["#89764A", "#B6A06E", "#254580", "#0A203D"]}
          onChange={(v) => setTweak("accent", v)} />
        <TweakSection label="Event Details" />
        <TweakText label="Date" value={t.eventDate} onChange={(v) => setTweak("eventDate", v)} />
        <TweakText label="Time" value={t.eventTime} onChange={(v) => setTweak("eventTime", v)} />
        <TweakText label="Venue" value={t.venue} onChange={(v) => setTweak("venue", v)} />
      </TweaksPanel>
    </>
  );
}

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