/* global React */

/* ===========================================================
   PRESS PAGE — Gypsy Reverie
   ===========================================================
   Minimal press kit page. Brand atmosphere, dark + cinematic.
   Sections in scroll order:
     PressHero        — eyebrow + title + tagline over photo
     PressKitCTA      — single primary action: download zip
     PressBio         — ~100 word press bio (3rd person)
     PressQuotes      — pull quotes
     PressPhotos      — 6–8 photo gallery
     PressVenues      — notable past venues & festivals
     PressBooking     — direct booking contact (mailto)
   =========================================================== */

/* -----------------------------------------------------------
   PRESS KIT ZIP
   -----------------------------------------------------------
   Drop a built press kit at `assets/press-kit.zip` and the
   download buttons will pick it up automatically. Until then
   they 404 silently. A README inside the zip should bundle:
     - bio.txt              (the short bio below, verbatim)
     - photos/              (the 6–8 hi-res photos used here)
     - logo/                (logo-mark-gold.png + variants)
   ----------------------------------------------------------- */
const PRESS_KIT_URL = "../../assets/press-kit.zip";

/* -----------------------------------------------------------
   PRESS PHOTOS — point at any image in /assets. The gallery
   below renders them as a 3- or 4-up grid.
   ----------------------------------------------------------- */
const PRESS_PHOTOS = [
  { src: "../../assets/photo-band-hero.png",          alt: "Gypsy Reverie quartet, candlelit performance",   credit: "Photo · Asheville" },
  { src: "../../assets/photo-about-joseph.jpg",       alt: "Joseph Arnold on violin",                         credit: "Photo · Joseph Arnold portrait" },
  { src: "../../assets/photo-hands-guitars.jpg",      alt: "Two acoustic guitars mid-strum",                  credit: "Photo · Hands on guitars" },
  { src: "../../assets/photo-strings-bookshelf.jpg",  alt: "Quartet performing in front of a bookshelf",      credit: "Photo · Live · bookshelf" },
  { src: "../../assets/photo-weddings-band.jpg",      alt: "Quartet in formal attire, intimate room",          credit: "Photo · Private event" },
  { src: "../../assets/photo-hook-loft.png",          alt: "Audience watching Gypsy Reverie at The Loft",     credit: "Photo · The Loft, Asheville" },
  { src: "../../assets/9I1A8881.jpg",                 alt: "Joseph Arnold in fedora, red-lit close-up with guitar in foreground", credit: "Photo · Live · Asheville" },
  { src: "../../assets/9I1A8891.jpg",                 alt: "Motion-blurred quartet with bass and guitar, red light, bookshelf behind", credit: "Photo · Live · in motion" },
];

/* -----------------------------------------------------------
   PRESS QUOTES — curated subset of homepage testimonials.
   ----------------------------------------------------------- */
const PRESS_QUOTES = [
  {
    q: "Gypsy Reverie's musicianship was unparalleled. We received just as many compliments on the band as we did on the art in our festival.",
    by: "Suzy Moore",
    role: "Artistic Director, Avalon Theater",
  },
  {
    q: "Their enchanting live sounds creating a relaxed yet spirited atmosphere to match the art on display.",
    by: "Talbot Spy",
    role: "Plein Air Festival",
  },
  {
    q: "The excitement was palpable. The musicians flowed from tune to tune with obvious camaraderie. I can't wait until the next concert!",
    by: "Cecilia D.",
    role: "Audience, Philadelphia",
  },
];

/* -----------------------------------------------------------
   PAST VENUES — notable performance history.
   ----------------------------------------------------------- */
const PAST_VENUES = [
  { name: "City Winery",            city: "Philadelphia, PA", note: "Sold out" },
  { name: "Avalon Theater",         city: "Easton, MD",       note: "" },
  { name: "The Grey Eagle",         city: "Asheville, NC",    note: "" },
  { name: "Isis Music Hall",        city: "Asheville, NC",    note: "" },
  { name: "Salvage Station",        city: "Asheville, NC",    note: "" },
  { name: "Plein Air Festival",     city: "Easton, MD",       note: "" },
];

/* =========================================================== */

function PressHero() {
  return (
    <section className="gr-press-hero">
      <div className="gr-press-hero__photo" aria-hidden="true" />
      <div className="gr-press-hero__scrim" aria-hidden="true" />
      <div className="gr-press-hero__inner">
        <div className="gr-eyebrow gr-press-hero__eyebrow">Press &amp; Booking</div>
        <h1 className="gr-press-hero__title">
          <span>Everything you need,</span>
          <span className="italic">in one place.</span>
        </h1>
        <p className="gr-press-hero__sub">
          Bio, photos, logo, press quotes — for booking agents, journalists, and festival organizers.
        </p>
      </div>
    </section>
  );
}

/* =========================================================== */

function PressKitCTA() {
  return (
    <section className="gr-press-kit">
      <div className="gr-press-kit__inner">
        <div className="gr-eyebrow">One-click download</div>
        <h2 className="gr-press-kit__head">Full press kit</h2>
        <p className="gr-press-kit__sub">
          Bio, hi-res photos, and brand assets in a single zip — about 18 MB.
        </p>
        <a
          className="gr-btn gr-btn--gold-solid gr-press-kit__btn"
          href={PRESS_KIT_URL}
          download
        >
          Download press kit (ZIP)
        </a>
        <p className="gr-press-kit__fine">
          Prefer individual files? Right-click any photo below to save it.
        </p>
      </div>
    </section>
  );
}

/* =========================================================== */

function PressBio() {
  return (
    <section className="gr-press-bio">
      <header className="gr-press-bio__head">
        <div className="gr-eyebrow">Band bio</div>
        <span className="gr-press-bio__count">~95 words</span>
      </header>
      <div className="gr-press-bio__copy">
        <p>
          <strong>Gypsy Reverie</strong> is an Asheville-based gypsy jazz quartet performing the Django Reinhardt tradition live — acoustic guitars, violin, and bass playing the full Hot Club de France range, from slow drags to flat-out swing. Led by conservatory-trained violinist <strong>Joseph Arnold</strong> (fifteen years with the Hot Club of Philadelphia, toured nationally, recorded on dozens of albums), the band plays intimate venues, festivals, weddings, and private events.
        </p>
        <p>
          Original compositions, Django standards, custom arrangements, and the occasional Fado detour — the kind of phrasing that sounds like a violin laughing one second and grieving the next.
        </p>
      </div>
    </section>
  );
}

/* =========================================================== */

function PressQuotes() {
  return (
    <section className="gr-press-quotes">
      <header className="gr-press-quotes__head">
        <div className="gr-eyebrow">Press &amp; reviews</div>
      </header>
      <ul className="gr-press-quotes__list">
        {PRESS_QUOTES.map((q, i) => (
          <li key={i} className="gr-press-quote">
            <span className="gr-press-quote__mark" aria-hidden="true">"</span>
            <blockquote>{q.q}</blockquote>
            <cite>
              <span className="name">{q.by}</span>
              <span className="role">{q.role}</span>
            </cite>
          </li>
        ))}
      </ul>
    </section>
  );
}

/* =========================================================== */

function PressPhotos() {
  return (
    <section id="photos" className="gr-press-photos">
      <header className="gr-press-photos__head">
        <div className="gr-eyebrow">Press photos</div>
        <span className="gr-press-photos__count">{PRESS_PHOTOS.length} hi-res images</span>
      </header>
      <ul className="gr-press-photos__grid">
        {PRESS_PHOTOS.map((p, i) => (
          <li key={i} className="gr-press-photo">
            <img src={p.src} alt={p.alt} loading="lazy" />
            <span className="gr-press-photo__credit">{p.credit}</span>
          </li>
        ))}
      </ul>
      <p className="gr-press-photos__credit">
        Photos by <em>Kate Kelleher</em>, taken at <em>Battery Park Book Exchange</em> in Asheville, NC.
      </p>
      <p className="gr-press-photos__note">
        Photo credit appreciated. For high-resolution masters or alternate crops, request via the booking contact below.
      </p>
    </section>
  );
}

/* =========================================================== */

function PressVenues() {
  return (
    <section className="gr-press-venues">
      <header className="gr-press-venues__head">
        <div className="gr-eyebrow">Select performance history</div>
      </header>
      <ul className="gr-press-venues__list">
        {PAST_VENUES.map((v, i) => (
          <li key={i}>
            <span className="venue">{v.name}</span>
            <span className="sep" aria-hidden="true">·</span>
            <span className="city">{v.city}</span>
            {v.note && <span className="note">{v.note}</span>}
          </li>
        ))}
      </ul>
    </section>
  );
}

/* =========================================================== */

function PressBooking() {
  return (
    <section id="booking" className="gr-press-booking">
      <div className="gr-press-booking__inner">
        <div className="gr-eyebrow">Booking &amp; press contact</div>
        <h2 className="gr-press-booking__head">
          <span>Joseph Arnold</span>
          <span className="italic">Bandleader</span>
        </h2>
        <a className="gr-press-booking__mail" href="mailto:gypsyreveriemusic@gmail.com?subject=Press%20%2F%20Booking%20Inquiry">
          gypsyreveriemusic@gmail.com
        </a>
        <p className="gr-press-booking__line">Replies within 24 hours, usually faster.</p>

        <div className="gr-press-booking__ctas">
          <a className="gr-btn gr-btn--gold-solid" href="mailto:gypsyreveriemusic@gmail.com?subject=Booking%20Inquiry">
            Email for booking
          </a>
          <a className="gr-btn gr-btn--gold" href={PRESS_KIT_URL} download>
            Download press kit
          </a>
        </div>
      </div>
    </section>
  );
}

/* =========================================================== */

function PressPage() {
  return (
    <React.Fragment>
      <Nav current="press" />
      <main className="gr-press-page">
        <PressHero />
        <PressKitCTA />
        <PressBio />
        <PressQuotes />
        <PressPhotos />
        <PressVenues />
        <PressBooking />
      </main>
      <Footer current="press" />
    </React.Fragment>
  );
}

window.PressPage     = PressPage;
window.PressHero     = PressHero;
window.PressKitCTA   = PressKitCTA;
window.PressBio      = PressBio;
window.PressQuotes   = PressQuotes;
window.PressPhotos   = PressPhotos;
window.PressVenues   = PressVenues;
window.PressBooking  = PressBooking;