/* global React, Star, StarField, Icon */

const STAFF = [
{
  id: "brittany",
  name: "Brittany Freeth",
  role: "Director & Choreographer",
  img: "assets/headshot-brittany.jpg",
  since: "FTW for 10+ years",
  sag: true,
  credits: ["Grey's Anatomy · ABC", "NCIS:Origins · CBS", "911: Lone Star · FOX (recurring)", "The Prom · Netflix", "Monsters · Netflix", "Countdown · Amazon Prime", "General Hospital · ABC", "West Side Story", "West Coast Regional Premiere · In the Heights", "Diavolo Dance Theatre", "Vox Lumiere"],
  bio: "Brittany trained professionally across all areas of dance — ballet/pointe, tap, jazz, modern, and hip-hop — at Encore Dance Centre and LA County High School for the Arts, where she was trained by members of Alvin Ailey Company and Harlem Ballet. She holds a Bachelor's degree in Theatre Arts and a Master of Arts in Management from Azusa Pacific University. Major production credits include Diavolo Dance Theatre, Performance Riverside, and Vox Lumiere. A proud SAG-AFTRA member represented by The Happen Agency and SK Management, she has been one of FTW's resident directors and choreographers for over ten years, and works alongside her husband Matthew in their production company, WolfDog Creative.",
  featured: true
},
{
  id: "tory",
  name: "Tory Freeth",
  role: "Director & Choreographer",
  img: "assets/headshot-tory.jpg",
  since: "FTW for 7 years",
  sag: true,
  credits: ["St. Denis Medical · NBC", "Crime 101 · MGM", "UnPrisoned · Hulu", "The Goldbergs · ABC", "Dog · MGM", "Disney 365 (recurring host)"],
  bio: "Tory holds a Bachelor of Fine Arts in Acting for the Stage and Screen from Azusa Pacific University and graduated from LA County High School for the Arts as a dance major. She trained at Encore Dance Centre for 15 years across ballet, tap, jazz, modern, and hip-hop. A proud SAG-AFTRA member represented by Brady, Brannon & Rich and McGowan Rodriguez Management, she brings 7 years of FTW experience and a genuine love for watching students grow as storytellers.",
  featured: false
},
{
  id: "matthew",
  name: "Matthew Gilmore",
  role: "Director & Technical Director",
  img: "assets/headshot-matthew.jpg",
  since: "FTW since 2013",
  sag: true,
  credits: ["Grey's Anatomy", "Happy's Place · NBC", "Shrinking · Apple TV+", "Your Honor · Showtime", "The Goldbergs · ABC", "New Girl · FOX", "Monster · Netflix"],
  bio: "Matthew holds a Bachelor's degree in Theater Arts from Azusa Pacific University and has served as Director and Technical Director of Foothill Theatre Workshop since 2013. Passionate about mentoring students and helping them grow into their full potential, he brings a rare blend of on-screen experience and behind-the-camera artistry to every production. Off stage, Matthew is a full-time graphic designer, photographer, and videographer, and is the founder of WolfDog Creative. He is represented by The Happen Agency and SK Management, and is a proud SAG-AFTRA member.",
  featured: false
},
{
  id: "jordan",
  name: "Jordan Arana",
  role: "Creative Team",
  img: "assets/headshot-jordan.jpg",
  since: "FTW alumnus",
  sag: false,
  credits: ["Neleus — Mary Poppins", "Water of Life Christian School"],
  bio: "Jordan is a proud alumnus of Foothill Theatre Workshop — he grew up in the program before joining the creative team. A Middle School Science teacher by day, Jordan brings a teacher's instinct and a performer's heart to everything he does. He is passionate about encouraging students to grow in themselves and their talents, and considers it a blessing to work alongside such incredible people each summer.",
  featured: false
}];


function CreditsRow({ credits }) {
  if (!credits.length) return null;
  return (
    <div className="row" style={{ flexWrap: "wrap", gap: 6, marginTop: 12 }}>
      {credits.map((c) =>
      <span key={c} className="tag" style={{ fontSize: 12, padding: "4px 10px", background: "var(--paper-2)" }}>{c}</span>
      )}
    </div>);

}

function StaffCard({ s }) {
  return (
    <div className="card staff-card" style={{ overflow: "hidden", display: "flex",
      background: "var(--white)" }}>
      <img src={s.img} alt={s.name} className="staff-card__photo"
      style={{ width: 280, flexShrink: 0,
        objectFit: "cover", objectPosition: "top",
        borderRight: "var(--bd-ink)"
      }} />
      <div style={{ padding: "clamp(20px,3vw,30px)", display: "flex", flexDirection: "column" }}>
        <div className="row gap-8" style={{ flexWrap: "wrap", marginBottom: 10 }}>
          {s.since &&
          <span className="tag tag--gold" style={{ fontSize: 12, padding: "3px 10px" }}>
              <Star size={11} fill="var(--gold-deep)" /> {s.since}
            </span>
          }
          {s.sag &&
          <span className="tag" style={{ fontSize: 12, padding: "3px 10px", background: "var(--sky-tint)" }}>SAG-AFTRA</span>
          }
          {s.placeholder &&
          <span className="tag tag--coral" style={{ fontSize: 12, padding: "3px 10px" }}>Please update</span>
          }
        </div>
        <h3 style={{ fontSize: 28, lineHeight: 1 }}>{s.name}</h3>
        <div style={{ fontFamily: "var(--display)", fontWeight: 500, fontSize: 16, color: "var(--gold-deep)", marginTop: 4 }}>{s.role}</div>
        <p className="muted" style={{ fontSize: 15, lineHeight: 1.65, marginTop: 14, flex: 1 }}>{s.bio}</p>
        <CreditsRow credits={s.credits} />
      </div>
    </div>);

}

function AboutPage({ navigate }) {

  return (
    <div>
      {/* Hero */}
      <section style={{ background: "var(--ink)", color: "var(--paper)", position: "relative", overflow: "hidden" }}>
        <StarField stars={[
        { x: "5%", y: "25%", size: 28, fill: "var(--gold)", rot: -8, delay: 0 },
        { x: "90%", y: "20%", size: 20, fill: "var(--gold)", rot: 12, delay: .8 },
        { x: "50%", y: "10%", size: 16, fill: "rgba(244,166,35,.5)", rot: 0, delay: 1.4 },
        { x: "78%", y: "65%", size: 24, fill: "rgba(244,166,35,.3)", rot: -15, delay: .4 }]
        } />
        <div className="wrap" style={{ paddingBlock: "clamp(48px,8vw,96px)", position: "relative" }}>
          <span className="kicker" style={{ color: "var(--gold)" }}>
            <Star size={14} fill="var(--gold)" /> The people who make the magic
          </span>
          <h1 style={{ fontSize: "clamp(38px,6vw,72px)", marginTop: 16, maxWidth: 680 }}>
            Working actors. Real teachers.
          </h1>
          <p style={{ fontSize: "clamp(16px,2vw,20px)", color: "#D9CFBE", maxWidth: 560, marginTop: 18 }}>Our FTW instructors are active film and television professionals — they bring real industry experience into every rehearsal, and genuine care into every student interaction.


          </p>
          <p style={{ fontSize: 14, color: "#B7AD9C", maxWidth: 600, marginTop: 14, fontStyle: "italic", lineHeight: 1.7 }}>
            Collective credits include: Grey's Anatomy, St. Denis Medical, 9-1-1: Lone Star, Matlock,
            NCIS: Origins, Shrinking, The Prom, The Goldbergs, Happy's Place, the film Dog opposite
            Channing Tatum, West Coast Regional Premiere of In the Heights, and many more.
          </p>
          <div className="row gap-24" style={{ marginTop: 32, flexWrap: "wrap" }}>
            {[["2000", "founded"], ["25+", "summers of shows"]].map(([n, l]) =>
            <div key={l}>
                <div style={{ fontFamily: "var(--display)", fontWeight: 600, fontSize: 34, lineHeight: 1, color: "var(--gold)" }}>{n}</div>
                <div style={{ fontSize: 13.5, color: "#B7AD9C", marginTop: 2 }}>{l}</div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* Staff */}
      <section className="section">
        <div className="wrap" style={{ display: "grid", gap: 24 }}>
          {STAFF.map((s) => <StaffCard key={s.id} s={s} featured={true} />)}
        </div>
      </section>

      {/* Mission / footer CTA */}
      <section className="section--tight" style={{ paddingBottom: "clamp(48px,8vw,90px)" }}>
        <div className="wrap">
          <div className="card" style={{ background: "var(--gold)", padding: "clamp(28px,5vw,56px)", position: "relative", overflow: "hidden" }}>
            <StarField stars={[
            { x: "90%", y: "15%", size: 24, rot: 10, delay: 0 },
            { x: "6%", y: "72%", size: 18, rot: -6, delay: .7 }]
            } />
            <div style={{ position: "relative", maxWidth: 680 }}>
              <h2 style={{ fontSize: "clamp(26px,4vw,46px)" }}>Why we do this every summer</h2>
              <p style={{ fontSize: 17, marginTop: 16, lineHeight: 1.7 }}>
                Foothill Theatre Workshop exists because every child deserves a stage. We're a 501(c)(3)
                non-profit anchored in the San Gabriel Valley, in partnership with the School of Arts + Enterprise.
                For over 20 years, our goal has been simple: give students a real theatrical experience — not a
                school play, not a recital — a genuine, professional-quality production they'll remember forever.
              </p>
              <div className="row gap-12" style={{ marginTop: 26, flexWrap: "wrap" }}>
                <button className="btn btn--ink 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={17} /> Get show tickets
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>);

}

Object.assign(window, { AboutPage });