/* global React, Polaroid, Countdown, Marquee, AudioBar */
const { useState: useStateS } = React;

const IMG = (name) => `https://call-me-on-my-landline.vercel.app/${name}`;

// ============================================
// HERO
// ============================================
function Hero() {
  // Saturday, August 15, 2026 — 6:30 PM local
  const target = new Date(2026, 7, 15, 18, 30, 0).getTime();

  return (
    <section
      style={{
        position: "relative",
        padding: "56px 0 80px",
        overflow: "hidden",
      }}
    >
      <div className="wrap">
        {/* Top eyebrow */}
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            marginBottom: 40,
            flexWrap: "wrap",
            gap: 12,
          }}
        >
          <span className="label-eyebrow">
            ST. DAVID HS // CLASS OF '90s (& any other years)
          </span>
          <span className="mono" style={{ opacity: 0.55 }}>
            KITCHENER, ON
          </span>
        </div>

        <div
          style={{
            display: "grid",
            gridTemplateColumns: "1.15fr 1fr",
            gap: 56,
            alignItems: "center",
          }}
          className="hero-grid"
        >
          {/* Left */}
          <div>
            <h1
              className="display"
              style={{
                fontSize: "clamp(3.4rem, 9vw, 7.5rem)",
                margin: 0,
              }}
            >
              <span style={{ display: "block", color: "var(--cream)" }}>
                THE 90s
              </span>
              <span
                className="glow-pink"
                style={{ display: "block" }}
              >
                REUNION
              </span>
              <span
                className="subdisplay"
                style={{
                  display: "block",
                  fontSize: "clamp(1.2rem, 2.4vw, 1.8rem)",
                  marginTop: 18,
                  color: "var(--cream)",
                  opacity: 0.8,
                  letterSpacing: "0.12em",
                }}
              >
                One Night. <span className="glow-blue">All</span> The Memories.
              </span>
            </h1>

            {/* Event facts row */}
            <div
              style={{
                display: "flex",
                gap: 28,
                marginTop: 36,
                flexWrap: "wrap",
              }}
            >
              <Fact label="Date" value="Sat · Aug 15" sub="2026" />
              <Fact label="Doors" value="6:30 PM" sub="19+ only" />
              <Fact label="Venue" value="THEMUSEUM" sub="Kitchener · all 3 floors" />
            </div>

            {/* Countdown */}
            <div style={{ marginTop: 36 }}>
              <div
                className="label-eyebrow"
                style={{ marginBottom: 14, color: "var(--lime)" }}
              >
                TIME TIL DOORS
              </div>
              <Countdown target={target} />
            </div>

            {/* CTAs */}
            <div
              style={{
                display: "flex",
                gap: 14,
                marginTop: 36,
                flexWrap: "wrap",
              }}
            >
              <a href="#rsvp" className="btn btn-pink btn-xl">
                RSVP Now →
              </a>
              <a href="#night" className="btn btn-ghost btn-xl">
                See The Night
              </a>
            </div>
            <div
              className="mono"
              style={{ marginTop: 18, opacity: 0.55 }}
            >
              Tickets on sale soon · RSVP locks your spot in line
            </div>
          </div>

          {/* Right — Polaroid cluster */}
          <div
            style={{
              position: "relative",
              minHeight: 520,
            }}
            className="hero-polaroids"
          >
            <div style={{ position: "absolute", top: 0, left: "12%" }}>
              <Polaroid
                src={IMG("scho.png")}
                caption="WE MADE IT '98"
                rotate={-7}
                width={230}
                photoH={220}
                tape="lime"
              />
            </div>
            <div style={{ position: "absolute", top: 40, right: 0 }}>
              <Polaroid
                src={IMG("football.png")}
                caption="GO CELTICS!"
                rotate={6}
                width={240}
                photoH={230}
                tape="pink"
              />
            </div>
            <div style={{ position: "absolute", top: 260, left: 0 }}>
              <Polaroid
                src={IMG("mix.png")}
                caption="MIXTAPE 4 U"
                rotate={-4}
                width={210}
                photoH={200}
                tape="blue"
              />
            </div>
            <div style={{ position: "absolute", top: 300, right: "8%" }}>
              <Polaroid
                src={IMG("bigd.png")}
                caption="ST. DAVID 4EVA"
                rotate={9}
                width={220}
                photoH={210}
                tape="lime"
              />
            </div>
            {/* Floating sticker */}
            <div
              style={{
                position: "absolute",
                top: 180,
                left: "38%",
                transform: "rotate(-12deg)",
                background: "var(--lime)",
                color: "var(--ink)",
                padding: "14px 18px",
                borderRadius: "50%",
                fontFamily: "Anton, sans-serif",
                fontSize: 18,
                textTransform: "uppercase",
                lineHeight: 0.9,
                textAlign: "center",
                width: 110,
                height: 110,
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                boxShadow: "var(--shadow-lime)",
                border: "2px dashed rgba(26,9,53,0.4)",
              }}
            >
              ALL
              <br />
              NIGHT
              <br />
              LONG
            </div>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          .hero-grid {
            grid-template-columns: 1fr !important;
            gap: 48px !important;
          }
          .hero-polaroids {
            min-height: 460px !important;
          }
        }
        @media (max-width: 520px) {
          .hero-polaroids > div {
            transform: scale(0.78);
            transform-origin: top left;
          }
        }
      `}</style>
    </section>
  );
}

function Fact({ label, value, sub }) {
  return (
    <div>
      <div className="mono" style={{ opacity: 0.6, marginBottom: 4 }}>
        {label}
      </div>
      <div
        className="subdisplay"
        style={{ fontSize: "1.7rem", color: "var(--cream)" }}
      >
        {value}
      </div>
      <div className="mono" style={{ opacity: 0.55, fontSize: "0.65rem" }}>
        {sub}
      </div>
    </div>
  );
}

// ============================================
// THE NIGHT (venue / food / music)
// ============================================
function TheNight() {
  return (
    <section className="section" id="night">
      <div className="wrap">
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "end",
            gap: 24,
            flexWrap: "wrap",
            marginBottom: 8,
          }}
        >
          <div>
            <div className="label-eyebrow" style={{ color: "var(--blue)" }}>
              The Night
            </div>
            <h2
              className="display"
              style={{
                fontSize: "clamp(2.8rem, 6vw, 5rem)",
                margin: "14px 0 0",
                maxWidth: 880,
              }}
            >
              Three floors. <span className="glow-blue">One vibe.</span>{" "}
              Zero homework.
            </h2>
          </div>
          <div
            className="mono"
            style={{ opacity: 0.55, maxWidth: 280, textAlign: "right" }}
          >
            01 · Venue · 02 · Food · 03 · Music
          </div>
        </div>

        <div className="card-grid">
          <FeatureCard
            n="01"
            eyebrow="Venue"
            title="THEMUSEUM"
            body="All three floors taken over. Interactive art activations open all night. Free coat check. Indoor parking with direct venue access. Bars are cashless."
            tag="ALL 3 FLOORS"
            polaroid={{
              src: IMG("museum2.png"),
              caption: "THE VENUE",
              rotate: -4,
              tape: "blue",
            }}
          />
          <FeatureCard
            n="02"
            eyebrow="Food"
            title="Stone Crock Eatery"
            body="Gourmet food stations serving all night by the award-winning St. Jacobs eatery. Options for everyone — yes, even the vegetarians."
            tag="ALL NIGHT"
            polaroid={{
              src: IMG("stoned.png"),
              caption: "DINNER IS SERVED",
              rotate: 5,
              tape: "lime",
            }}
          />
          <FeatureCard
            n="03"
            eyebrow="Music"
            title="DJ Deaftone"
            body="Spinning the soundtrack of our youth — and present. 90s grunge, 00s pop, modern hits, party classics. Beats level up at 11pm. Bring your dancing shoes."
            tag="BEATS @ 11PM"
            polaroid={{
              src: IMG("def.png"),
              caption: "DJ DEAFTONE",
              rotate: -3,
              tape: "pink",
            }}
            accent="pink"
          />
        </div>
      </div>
    </section>
  );
}

function FeatureCard({ n, eyebrow, title, body, tag, polaroid, accent = "lime" }) {
  return (
    <div className="feature">
      <div
        style={{
          width: "100%",
          aspectRatio: "1 / 1",
          background: "rgba(255,255,255,0.02)",
          border: "1px solid rgba(245,239,227,0.08)",
          borderRadius: 12,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          padding: 24,
          position: "relative",
          overflow: "hidden",
        }}
      >
        <div
          style={{
            position: "absolute",
            top: 14,
            left: 16,
            fontFamily: "JetBrains Mono, monospace",
            fontSize: 11,
            letterSpacing: "0.2em",
            opacity: 0.5,
          }}
        >
          /{n}
        </div>
        <Polaroid {...polaroid} width={260} photoH={260} />
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
        <div className="feature-eyebrow">{eyebrow}</div>
        <div className="feature-title">{title}</div>
        <div className="feature-body">{body}</div>
        <span
          className="feature-tag"
          style={{
            background:
              accent === "pink"
                ? "var(--pink)"
                : accent === "blue"
                ? "var(--blue)"
                : "var(--lime)",
            color: accent === "pink" ? "#fff" : "var(--ink)",
          }}
        >
          {tag}
        </span>
      </div>
    </div>
  );
}

// ============================================
// EXTRAS
// ============================================
function Extras() {
  return (
    <section className="section">
      <div className="wrap">
        <div className="label-eyebrow" style={{ color: "var(--pink)" }}>
          And There's More
        </div>
        <h2
          className="display"
          style={{
            fontSize: "clamp(2.4rem, 5vw, 4rem)",
            margin: "14px 0 0",
            maxWidth: 900,
          }}
        >
          The extras. <span className="glow-lime">The chaos.</span>{" "}
          The takeaways.
        </h2>

        <div className="extras">
          <div className="extra extra-pink span-7">
            <div className="extra-eyebrow">Live Photo Flashback</div>
            <div className="extra-title" style={{ fontSize: "2.4rem" }}>
              Polaroid capture all night,<br />
              <span className="glow-pink">projected huge.</span>
            </div>
            <div className="extra-body" style={{ maxWidth: 460 }}>
              New polaroids of you and your old crew, mixed with vintage St.
              David photographs and projected across THEMUSEUM. The night
              archives itself.
            </div>
            <div style={{ flex: 1 }}></div>
            <div
              style={{
                display: "flex",
                gap: -10,
                marginTop: "auto",
                marginLeft: 0,
              }}
            >
              <div style={{ marginRight: -28 }}>
                <Polaroid
                  src={IMG("90s.png")}
                  caption="CLASS '98"
                  rotate={-8}
                  width={130}
                  photoH={130}
                  tape="lime"
                />
              </div>
              <div style={{ marginRight: -28, marginTop: 14 }}>
                <Polaroid
                  src={IMG("cedric2.png")}
                  caption="HELLO??"
                  rotate={5}
                  width={130}
                  photoH={130}
                  tape="pink"
                />
              </div>
              <div style={{ marginTop: -6 }}>
                <Polaroid
                  src={IMG("camera.png")}
                  caption="SAY CHEESE"
                  rotate={-3}
                  width={130}
                  photoH={130}
                  tape="blue"
                />
              </div>
            </div>
          </div>

          <div className="extra extra-lime span-5">
            <div className="extra-eyebrow">50/50 Draw</div>
            <div className="extra-title">
              Win cash.<br />
              <span className="glow-lime">Do good.</span>
            </div>
            <div className="extra-body">
              Proceeds go to a local Waterloo charity. Tickets available at the
              event — cashless, of course.
            </div>
            <div
              style={{
                marginTop: "auto",
                fontFamily: "Anton, sans-serif",
                fontSize: 80,
                lineHeight: 0.9,
                color: "var(--lime)",
                textShadow: "var(--shadow-lime)",
                letterSpacing: "-0.02em",
              }}
            >
              50/50
            </div>
          </div>

          <div className="extra extra-blue span-5">
            <div className="extra-eyebrow">Hourly Giveaways</div>
            <div className="extra-title">
              Cool retro<br />
              <span className="glow-blue">takeaways</span> every hour.
            </div>
            <div className="extra-body">
              Lots of prizes drawn through the night. Stick around or stick a
              friend with the bill.
            </div>
            <div
              style={{
                marginTop: "auto",
                display: "flex",
                gap: 8,
                flexWrap: "wrap",
              }}
            >
              {["VHS PACK", "TICKET", "VINYL", "TEE", "STICKERS"].map((t) => (
                <span
                  key={t}
                  className="mono"
                  style={{
                    padding: "5px 9px",
                    border: "1px solid rgba(31,214,255,0.4)",
                    borderRadius: 4,
                    color: "var(--blue)",
                  }}
                >
                  {t}
                </span>
              ))}
            </div>
          </div>

          <div className="extra span-7">
            <div className="extra-eyebrow">Retro + Branded Swag</div>
            <div
              style={{
                display: "grid",
                gridTemplateColumns: "1fr 1fr",
                gap: 24,
                alignItems: "center",
              }}
            >
              <div>
                <div className="extra-title">
                  Show up.<br />
                  Take a piece of the<br />
                  <span className="glow-pink">night home.</span>
                </div>
                <div className="extra-body" style={{ marginTop: 14 }}>
                  Retro and branded items available at the event. Limited runs —
                  when they're gone, they're gone.
                </div>
                <div
                  style={{
                    display: "flex",
                    gap: 8,
                    marginTop: 16,
                    flexWrap: "wrap",
                  }}
                >
                  <span
                    className="mono"
                    style={{
                      padding: "5px 9px",
                      background: "var(--pink)",
                      color: "#fff",
                      borderRadius: 4,
                    }}
                  >
                    NEW DROP
                  </span>
                  <span
                    className="mono"
                    style={{
                      padding: "5px 9px",
                      border: "1px solid rgba(245,239,227,0.2)",
                      borderRadius: 4,
                    }}
                  >
                    EVENT ONLY
                  </span>
                </div>
              </div>
              <div
                style={{
                  display: "flex",
                  justifyContent: "center",
                  transform: "rotate(-3deg)",
                }}
              >
                <Polaroid
                  src={IMG("swag.png")}
                  caption="THE MERCH"
                  rotate={0}
                  width={220}
                  photoH={220}
                  tape="pink"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============================================
// RSVP
// ============================================
function RSVP() {
  const [name, setName] = useStateS("");
  const [email, setEmail] = useStateS("");
  const [plusOne, setPlusOne] = useStateS(null);
  const [song, setSong] = useStateS("");
  const [submitted, setSubmitted] = useStateS(false);

  return (
    <section className="section" id="rsvp">
      <div className="wrap">
        <div className="rsvp-shell">
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "start",
              gap: 24,
              flexWrap: "wrap",
            }}
          >
            <div style={{ maxWidth: 640 }}>
              <div
                className="label-eyebrow"
                style={{ color: "var(--lime)" }}
              >
                RSVP / Spread The Word
              </div>
              <h2
                className="display"
                style={{
                  fontSize: "clamp(2.4rem, 5.5vw, 4.4rem)",
                  margin: "14px 0 18px",
                }}
              >
                Tickets coming{" "}
                <span className="glow-pink">soon.</span>
                <br />
                Lock your spot now.
              </h2>
              <p
                style={{
                  color: "rgba(245,239,227,0.78)",
                  margin: 0,
                  maxWidth: 560,
                  fontSize: "1.05rem",
                }}
              >
                RSVP and we'll text/email you the second tickets drop. Tell
                someone from your Class in the 90s — the more, the louder.
              </p>
            </div>
            <div
              className="mono"
              style={{
                opacity: 0.6,
                border: "1px dashed rgba(245,239,227,0.25)",
                padding: "10px 14px",
                borderRadius: 8,
              }}
            >
              FORM // V1.0 — 19+
            </div>
          </div>

          {submitted ? (
            <div
              style={{
                marginTop: 40,
                padding: 36,
                border: "1.5px solid var(--lime)",
                borderRadius: 14,
                background: "rgba(61,255,122,0.06)",
                textAlign: "center",
              }}
            >
              <div
                className="display"
                style={{
                  fontSize: "2.6rem",
                  color: "var(--lime)",
                  textShadow: "var(--shadow-lime)",
                  marginBottom: 10,
                }}
              >
                You're on the list.
              </div>
              <div
                className="mono"
                style={{ opacity: 0.8 }}
              >
                We'll be in touch · check your email when tickets drop
              </div>
            </div>
          ) : (
            <form
              action="https://formspree.io/f/mkoyqbkb"
              method="POST"
              className="rsvp-grid"
            >
              <input type="hidden" name="_next" value="thankyou.html" />
              <div className="field">
                <label>Your Name</label>
                <input
                  name="name"
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  placeholder="Cedric Diggory"
                  required
                />
              </div>
              <div className="field">
                <label>Email</label>
                <input
                  type="email"
                  name="email"
                  value={email}
                  onChange={(e) => setEmail(e.target.value)}
                  placeholder="you@9-to-5.com"
                  required
                />
              </div>
              <input type="hidden" name="plusone" value={plusOne || ""} />
              <div className="field field-full">
                <label>Are you RSVPing for someone else too?</label>
                <div className="radio-row">
                  {[
                    { v: "solo", l: "No — just me, myself, and I" },
                    { v: "plus", l: "Yes — me + 1" },
                  ].map((o) => (
                    <div
                      key={o.v}
                      className={`radio-pill ${plusOne === o.v ? "active" : ""}`}
                      onClick={() => setPlusOne(o.v)}
                    >
                      <span className="dot"></span>
                      {o.l}
                    </div>
                  ))}
                </div>
              </div>
              <div className="field field-full">
                <label>Favourite song from the 90s? (loud, please)</label>
                <input
                  name="song"
                  value={song}
                  onChange={(e) => setSong(e.target.value)}
                  placeholder="So DJ Deaftone has the queue ready..."
                />
              </div>
              <div className="field field-full">
                <button type="submit" className="btn btn-pink btn-xl" style={{ width: "100%" }}>
                  RSVP & Send The Signal →
                </button>
              </div>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

// ============================================
// FINE PRINT
// ============================================
function FinePrint() {
  return (
    <footer className="fineprint">
      <div className="wrap">
        <div className="fineprint-inner">
          <div>
            <div
              className="mono"
              style={{ opacity: 0.6, marginBottom: 14 }}
            >
              // READ DAT FINE PRINT
            </div>
            <h3 className="fineprint-title">
              Fully licensed 19+ event.
              <br />
              Cashless bars. Dress code in effect.
            </h3>
            <div
              className="mono"
              style={{ marginTop: 16, opacity: 0.7 }}
            >
              NO FLIP FLOPS · NO SHORTS · YES POLAROIDS
            </div>
          </div>
          <div>
            <div
              style={{
                fontFamily: "Anton, sans-serif",
                fontSize: "3rem",
                lineHeight: 0.9,
                textTransform: "uppercase",
              }}
            >
              Aug 15<br />
              <span style={{ color: "var(--pink)" }}>2026</span>
            </div>
            <div className="mono" style={{ marginTop: 10, opacity: 0.65 }}>
              THEMUSEUM · Kitchener, ON
            </div>
          </div>
        </div>
        <div className="fineprint-row">
          <span>© 2026 St. David HS Reunion Committee</span>
          <span>Made w/ love, neon & nostalgia</span>
          <span>questions? rsvp@stdavidreunion.ca</span>
        </div>
      </div>
    </footer>
  );
}

// ============================================
// APP
// ============================================
function Nav() {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <div className="nav-brand">
          <div className="nav-brand-dot"></div>
          <div className="nav-brand-text">
            ST. DAVID HS <span>// 90s REUNION</span>
          </div>
        </div>
        <div className="nav-links">
          <a href="#night">The Night</a>
          <a href="#extras">Extras</a>
          <a href="#rsvp" className="btn btn-pink" style={{ padding: "8px 16px", fontSize: "0.85rem" }}>
            RSVP
          </a>
        </div>
      </div>
    </nav>
  );
}

function App() {
  return (
    <>
      <Nav />
      <Hero />
      <Marquee
        items={[
          "SAT · AUG 15 · 2026",
          "DOORS 6:30 PM",
          "BEATS LEVEL UP @ 11PM",
          "THEMUSEUM · KITCHENER",
          "19+ · CASHLESS BAR",
          "FREE COAT CHECK",
        ]}
      />
      <TheNight />
      <div className="rule"></div>
      <div id="extras">
        <Extras />
      </div>
      <Marquee
        variant="marquee-pink"
        items={[
          "ONE NIGHT ONLY",
          "ALL THE MEMORIES",
          "RSVP NOW",
          "TICKETS SOON",
          "CLASS OF '90s (& FRIENDS)",
          "BRING YOUR DANCING SHOES",
        ]}
      />
      <RSVP />
      <FinePrint />
      <AudioBar src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" />
    </>
  );
}

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