/* global React, Star, StarField, Icon, Photo, ColorDots */
const { useState: useStateH } = React;

const SHOWS = [
  { id: "frozen", title: "Disney's Frozen", short: "Frozen", tag: "Ages 7–20 · Mainstage", accent: "var(--sky-deep)", tint: "var(--sky-tint)", img: "assets/frozen.jpg",
    blurb: "Our big summer mainstage. An icy adventure of sisterhood and courage — full company, soaring ensemble numbers, and the songs everyone already loves.", dates: "Performs Jul 24–26, 2026" },
  { id: "butterknife", title: "The Legend of the Butter Knife", short: "Butter Knife", tag: "Ages 5–12 · Original Jr.", accent: "var(--violet)", tint: "var(--violet-tint)", img: "assets/butterknife.jpg",
    blurb: "New songs. New stories. New friends. An original Jr. musical built for our youngest adventurers — the perfect first time on stage.", dates: "Performs Jul 24–26, 2026" },
];

function Hero({ navigate, tweaks = {} }) {
  const announce = tweaks.announce || "Now enrolling · Summer 2026";
  const words = (tweaks.headline || "Where kids find their spotlight").trim().split(/\s+/);
  const last = words.pop();
  return (
    <section style={{ position: "relative", overflow: "hidden" }}>
      <StarField stars={[
        { x: "6%", y: "18%", size: 30, rot: -12, delay: 0, fill: "var(--gold)" },
        { x: "44%", y: "8%", size: 18, rot: 8, fill: "var(--gold)", delay: 1.2 },
        { x: "90%", y: "62%", size: 26, rot: 14, delay: .6 },
        { x: "70%", y: "12%", size: 14, rot: 0, fill: "var(--coral)", delay: 1.8, op: .9 },
      ]} />
      <div className="wrap" style={{ paddingTop: "clamp(36px,6vw,70px)", paddingBottom: "clamp(40px,7vw,84px)" }}>
        <div className="hero-grid" style={{ display: "grid", gridTemplateColumns: "1.05fr .95fr", gap: 56, alignItems: "center" }}>
          <div className="pop">
            <span className="tag tag--gold" style={{ marginBottom: 22 }}>
              <Star size={14} fill="var(--gold-deep)" /> {announce}
            </span>
            <h1 style={{ fontSize: "clamp(46px,6.6vw,82px)", lineHeight: .96 }}>
              {words.join(" ")} <span className="squiggle" style={{ color: "var(--gold-deep)" }}>{last}</span>
            </h1>
            <p style={{ fontSize: "clamp(17px,2.1vw,21px)", color: "var(--ink-soft)", maxWidth: 480, marginTop: 22 }}>
              A joyful, no-experience-needed musical theatre summer for ages 5–20.
              Six weeks of rehearsal, real friendships, and a standing-ovation finale on a real stage.
            </p>
            <div className="row gap-12" style={{ marginTop: 30, flexWrap: "wrap" }}>
              <button className="btn btn--gold btn--lg" onClick={() => navigate("register")}>
                Register your student <Icon name="arrow" size={18} stroke={2.6} />
              </button>
              <button className="btn btn--lg" onClick={() => navigate("tickets")}>
                <Icon name="ticket" size={18} /> Get show tickets
              </button>
            </div>
            <div className="row gap-24" style={{ marginTop: 30, flexWrap: "wrap" }}>
              {[["20+", "years on stage"], ["2", "summer shows"], ["5–20", "ages welcome"]].map(([n, l]) => (
                <div key={l}>
                  <div style={{ fontFamily: "var(--display)", fontWeight: 600, fontSize: 30, lineHeight: 1 }}>{n}</div>
                  <div className="muted" style={{ fontSize: 13.5 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Poster collage */}
          <div className="hero-art pop" style={{ position: "relative", animationDelay: ".1s" }}>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18, alignItems: "start" }}>
              <div className="card" style={{ padding: 8, transform: "rotate(-3deg)", overflow: "hidden" }}>
                <img src="assets/frozen.jpg" alt="Disney's Frozen — Summer 2026"
                  style={{ width: "100%", aspectRatio: "4 / 5", objectFit: "cover", borderRadius: "var(--r-sm)" }} />
              </div>
              <div className="card" style={{ padding: 8, transform: "rotate(3deg) translateY(26px)", overflow: "hidden" }}>
                <img src="assets/butterknife.jpg" alt="The Legend of the Butter Knife — Summer 2026"
                  style={{ width: "100%", aspectRatio: "4 / 5", objectFit: "cover", borderRadius: "var(--r-sm)" }} />
              </div>
            </div>
            <div className="card" style={{ position: "absolute", right: -8, bottom: -14, background: "var(--white)",
              padding: "12px 16px", display: "flex", alignItems: "center", gap: 10, transform: "rotate(-2deg)" }}>
              <div style={{ width: 38, height: 38, borderRadius: "50%", background: "var(--mint)", border: "var(--bd-ink)",
                display: "grid", placeItems: "center" }}><Icon name="check" size={20} color="var(--ink)" stroke={3} /></div>
              <div>
                <div style={{ fontFamily: "var(--display)", fontWeight: 600, fontSize: 15 }}>No experience needed</div>

              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function PhotoStrip() {
  const photos = [
    { src: "assets/photo-1-boy.jpg",      alt: "Student taking a bow on stage" },
    { src: "assets/photo-2-costumes.jpg",  alt: "Students in Pinocchio costumes" },
    { src: "assets/photo-3-girl.jpg",      alt: "Young student performing on stage" },
    { src: "assets/photo-4-ensemble.jpg",  alt: "Shrek ensemble cast" },
  ];
  const tilts = ["-2deg", "1.5deg", "-1deg", "2deg"];
  return (
    <section className="section--tight" style={{ background: "var(--ink)", color: "var(--paper)" }}>
      <div className="wrap">
        <div className="center" style={{ marginBottom: 28 }}>
          <span className="kicker" style={{ color: "var(--gold)" }}>
            <Star size={13} fill="var(--gold)" /> From our stage
          </span>
          <h2 style={{ fontSize: "clamp(26px,3.8vw,42px)", marginTop: 10, color: "var(--paper)" }}>
            Real students. Real roles. Real magic.
          </h2>
        </div>
        <div className="photo-strip" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 18 }}>
          {photos.map((p, i) => (
            <div key={i} className="card"
              style={{ padding: 8, overflow: "hidden",
                transform: `rotate(${tilts[i]})`,
                transition: "transform .2s ease",
                background: "var(--white)" }}
              onMouseEnter={e => e.currentTarget.style.transform = "rotate(0deg) scale(1.03)"}
              onMouseLeave={e => e.currentTarget.style.transform = `rotate(${tilts[i]})`}>
              <img src={p.src} alt={p.alt}
                style={{ width: "100%", aspectRatio: "3 / 4", objectFit: "cover",
                  objectPosition: "top", borderRadius: 6, display: "block" }} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function TrustStrip() {
  const items = [
    { icon: "shield", t: "501(c)(3) non-profit" },
    { icon: "user", t: "Taught by working film & TV pros" },
    { icon: "pin", t: "At The School of Arts + Enterprise" },
    { icon: "heart", t: "20+ years in the San Gabriel Valley" },
  ];
  return (
    <div style={{ background: "var(--ink)", color: "var(--paper)" }}>
      <div className="wrap" style={{ display: "flex", gap: 28, flexWrap: "wrap", justifyContent: "space-between",
        paddingBlock: 18 }}>
        {items.map(i => (
          <div key={i.t} className="row gap-8" style={{ fontFamily: "var(--display)", fontWeight: 500, fontSize: 15.5 }}>
            <Icon name={i.icon} size={19} color="var(--gold)" /> {i.t}
          </div>
        ))}
      </div>
    </div>
  );
}

function HowItWorks({ navigate }) {
  const steps = [
    { n: "01", icon: "user", t: "Register & audition", d: "Fill out one short form. Auditions are friendly, low-pressure, and just help us place your student.", c: "var(--gold)" },
    { n: "02", icon: "music", t: "Rehearse together", d: "Six weeks of singing, dancing, and acting with instructors whose credits include Grey's Anatomy, St. Denis Medical, Shrinking, NCIS: Origins, In the Heights, Happy's Place, and more.", c: "var(--teal)" },
    { n: "03", icon: "bell", t: "Perform with live music", d: "One of the few youth programs with a live orchestra in the pit — your student performs with real musicians, just like Broadway.", c: "var(--mint)" },
    { n: "04", icon: "mask", t: "Take the stage", d: "A full production with sets, lights, costumes, and a standing ovation — performed for family and friends.", c: "var(--coral)" },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div className="center" style={{ maxWidth: 640, margin: "0 auto 48px" }}>
          <span className="kicker"><Star size={13} fill="var(--gold-deep)" /> How a summer works</span>
          <h2 style={{ fontSize: "clamp(32px,4.5vw,52px)", marginTop: 12 }}>From nervous first day to curtain call</h2>
        </div>
        <div className="how-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 22 }}>
          {steps.map(s => (
            <div key={s.n} className="card" style={{ padding: 28 }}>
              <div className="row between" style={{ marginBottom: 18 }}>
                <div style={{ width: 52, height: 52, borderRadius: 16, background: s.c, border: "var(--bd-ink)",
                  display: "grid", placeItems: "center", boxShadow: "var(--shadow-sm)" }}>
                  <Icon name={s.icon} size={26} color="var(--ink)" />
                </div>
                <span style={{ fontFamily: "var(--display)", fontWeight: 600, fontSize: 34, color: "var(--paper-2)",
                  WebkitTextStroke: "1.5px var(--ink)" }}>{s.n}</span>
              </div>
              <h3 style={{ fontSize: 23 }}>{s.t}</h3>
              <p className="muted" style={{ marginTop: 8, fontSize: 15.5 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ShowsSection({ navigate }) {
  return (
    <section className="section" style={{ background: "var(--paper-2)", borderTop: "var(--bd-ink)", borderBottom: "var(--bd-ink)" }}>
      <div className="wrap">
        <div className="row between" style={{ flexWrap: "wrap", gap: 16, marginBottom: 32, alignItems: "flex-end" }}>
          <div>
            <span className="kicker"><Star size={13} fill="var(--gold-deep)" /> This summer's productions</span>
            <h2 style={{ fontSize: "clamp(32px,4.5vw,52px)", marginTop: 12 }}>Two shows. One unforgettable summer.</h2>
          </div>
          <button className="btn" onClick={() => navigate("tickets")}><Icon name="ticket" size={18} /> Get tickets</button>
        </div>
        <div style={{ display: "grid", gap: 24 }}>
          {SHOWS.map((s, i) => (
            <div key={s.id} className="card show-card" style={{ overflow: "hidden", display: "grid",
              gridTemplateColumns: "300px 1fr", alignItems: "stretch" }}>
              <img src={s.img} alt={s.title + " poster"}
                style={{ width: "100%", height: "100%", objectFit: "cover", borderRight: "var(--bd-ink)",
                  minHeight: 300 }} className="show-poster" />
              <div style={{ padding: "clamp(22px,3vw,38px)", display: "flex", flexDirection: "column", justifyContent: "center" }}>
                <div className="row gap-8" style={{ marginBottom: 14, flexWrap: "wrap" }}>
                  <span className="tag" style={{ background: s.tint, borderColor: "var(--ink)" }}>{s.tag}</span>
                  <span className="tag"><Icon name="calendar" size={13} stroke={2.4} /> {s.dates}</span>
                </div>
                <h3 style={{ fontSize: "clamp(26px,3.4vw,40px)" }}>{s.title}</h3>
                <p className="muted" style={{ marginTop: 10, fontSize: 16.5, maxWidth: 460 }}>{s.blurb}</p>
                <div className="row gap-12" style={{ marginTop: 22, flexWrap: "wrap" }}>
                  <button className="btn" style={{ background: s.accent, color: "var(--white)" }}
                    onClick={() => navigate("register")}>Audition for {s.short} <Icon name="arrow" size={16} stroke={2.6} /></button>
                  <button className="btn btn--ghost" onClick={() => navigate("tickets")}><Icon name="ticket" size={17} /> Buy tickets</button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonial() {
  return (
    <section className="section">
      <div className="wrap">
        <div className="testi-grid" style={{ display: "grid", gridTemplateColumns: "1.3fr 1fr", gap: 40, alignItems: "center" }}>
          <div>
            <Star size={34} fill="var(--gold)" stroke="var(--ink)" />
            <p style={{ fontFamily: "var(--display)", fontWeight: 500, fontSize: "clamp(24px,3vw,34px)",
              lineHeight: 1.25, marginTop: 18 }}>
              "My daughter came in painfully shy and walked out belting a solo. FTW is the highlight
              of our whole summer — and we drive 40 minutes for it."
            </p>
            <div className="row gap-12" style={{ marginTop: 24 }}>
              <div style={{ width: 46, height: 46, borderRadius: "50%", background: "var(--gold-tint)", border: "var(--bd-ink)" }} />
              <div>
                <div style={{ fontFamily: "var(--display)", fontWeight: 600 }}>Maria T.</div>
                <div className="muted" style={{ fontSize: 14 }}>FTW parent · 4 summers</div>
              </div>
            </div>
          </div>
          <div className="card" style={{ padding: 28, background: "var(--gold-tint)" }}>
            <h3 style={{ fontSize: 22 }}>What's included</h3>
            <div style={{ display: "grid", gap: 12, marginTop: 16 }}>
              {["6-week program — dance, music, acting & theater production",
                "Taught by working film, TV & theater professionals",
                "A real role in a full large-scale performance",
                "Professional photos & video recording of the show",
                "Your own show t-shirt to keep",
                "*Students may be asked to provide basic shoes & pants"].map(t => (
                <div key={t} className="row gap-8" style={{ fontSize: 15.5 }}>
                  <Icon name="check" size={18} color="var(--mint)" stroke={3} /> {t}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function PartnerStrip() {
  return (
    <section className="section--tight">
      <div className="wrap">
        <div className="card partner-card" style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 28,
          alignItems: "center", padding: "clamp(22px,3.5vw,34px)", background: "var(--teal-tint)" }}>
          <div>
            <span className="kicker" style={{ color: "var(--teal-deep)" }}><Star size={13} fill="var(--teal-deep)" /> Proudly in partnership with</span>
            <img src="assets/sae-logo.png" alt="The School of Arts + Enterprise"
              style={{ height: 30, marginTop: 14, marginBottom: 12 }} />
            <p className="muted" style={{ fontSize: 15.5, maxWidth: 520 }}>
              Current School of Arts + Enterprise students have their tuition <b style={{ color: "var(--ink)" }}>fully sponsored by the school</b> — ask us how.
            </p>
          </div>
          <div className="floaty" style={{ "--rot": "-6deg" }}>
            <Star size={64} fill="var(--teal)" stroke="var(--ink)" />
          </div>
        </div>
      </div>
    </section>
  );
}

function FinalCTA({ navigate }) {
  return (
    <section className="section--tight" style={{ paddingBottom: "clamp(48px,8vw,90px)" }}>
      <div className="wrap">
        <div className="card cta-card" style={{ position: "relative", overflow: "hidden", background: "var(--gold)",
          padding: "clamp(34px,6vw,64px)", textAlign: "center" }}>
          <StarField stars={[
            { x: "8%", y: "20%", size: 26, rot: -10 }, { x: "88%", y: "26%", size: 20, rot: 12 },
            { x: "16%", y: "70%", size: 16, rot: 6 }, { x: "80%", y: "68%", size: 28, rot: -8 },
          ]} />
          <div style={{ position: "relative" }}>
            <h2 style={{ fontSize: "clamp(30px,5vw,56px)" }}>Curtain rises on Summer 2026</h2>
            <p style={{ fontSize: 18, maxWidth: 560, margin: "16px auto 0", color: "var(--ink)" }}>
              Auditions are <b>May 3</b> at The School of Arts + Enterprise in Pomona, 2–6pm. Register now to claim your spot — it takes about five minutes.
            </p>
            <div className="row gap-12" style={{ justifyContent: "center", marginTop: 28, flexWrap: "wrap" }}>
              <button className="btn btn--ink btn--lg" onClick={() => navigate("register")}>
                Start registration <Icon name="arrow" size={18} stroke={2.6} />
              </button>
              <button className="btn btn--lg" onClick={() => navigate("payment")}>Make a tuition payment</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomePage({ navigate, tweaks }) {
  return (
    <div>
      <Hero navigate={navigate} tweaks={tweaks} />
      <TrustStrip />
      <PhotoStrip />
      <ColorDots />
      <HowItWorks navigate={navigate} />
      <ColorDots />
      <ShowsSection navigate={navigate} />
      <ColorDots />
      <Testimonial />
      <PartnerStrip />
      <ColorDots />
      <FinalCTA navigate={navigate} />
    </div>
  );
}

Object.assign(window, { HomePage, SHOWS });