/* global React */

/* ===== PHOTO BREAK — full-bleed cinematic interlude ===== */
/* A photo that fills the viewport with a single line of overlaid copy.
   Use this between content sections to break the obsidian wall and
   inject ferocity. */
function PhotoBreak({ src, kicker, line, italic, position = "center", height = "tall", align = "left" }) {
  return (
    <section
      className={`gr-photobreak gr-photobreak--${height} gr-photobreak--${align}`}
      style={{ backgroundImage: `url(${src})`, backgroundPosition: position }}
    >
      <div className="gr-photobreak__scrim" />
      <div className="gr-photobreak__inner">
        {kicker && <div className="gr-eyebrow">{kicker}</div>}
        <h2 className="gr-photobreak__line">
          {line}
          {italic && <span className="italic"> {italic}</span>}
        </h2>
      </div>
    </section>
  );
}

/* ===== BRAND MARQUEE — ferocious. elegant. alive. ===== */
/* Closing statement, oversized. Sits between FAQ and FinalCTA so the
   visitor has the brand promise burned into them before the last CTA. */
function BrandMarquee() {
  return (
    <section className="gr-marquee">
      <div className="gr-marquee__inner">
        <div className="gr-marquee__line">
          <span>Ferocious.</span>
          <span className="dot" />
          <span className="italic">Elegant.</span>
          <span className="dot" />
          <span>Alive.</span>
        </div>
      </div>
    </section>
  );
}

/* ===== WHAT THIS IS ===== */
function WhatThisIs() {
  return (
    <section className="gr-what">
      <div className="gr-what__grid">
        <div className="gr-what__copy">
          <h2 className="gr-h-display">The night out you stopped expecting to find.</h2>
          <p className="gr-body-serif">
            Not background music. Not a cover band running through songs you already know. Not a DJ set dressed up as an evening.
          </p>
          <p className="gr-body-serif">
            Gypsy Reverie plays acoustic gypsy jazz—the ferocious, elegant tradition of Django Reinhardt—in rooms small enough that every note lands. Close enough to watch the fingers move. Loud enough to feel in your chest, quiet enough to actually listen.
          </p>
          <p className="gr-body-serif emphatic">
            You'll see it happen and still not quite believe it.
          </p>
        </div>
        <div className="gr-what__art">
          <div className="gr-what__photo" style={{backgroundImage: "url(../../assets/photo-hands-guitars.jpg)"}}></div>
          <blockquote className="gr-pullquote">
            <span className="mark">“</span>
            <p>Gypsy Reverie's performance was spirited and enchanting!</p>
            <cite>Talbot Spy · Plein Air Festival</cite>
          </blockquote>
        </div>
      </div>
    </section>
  );
}

/* ===== TESTIMONIALS (cream break) ===== */
function Testimonials() {
  const quotes = [
    { q: "The excitement was palpable. A lovely mix of originals and classics, danceable gypsy jazz and even Portuguese Fado. The musicians flowed from tune to tune with obvious camaraderie. I can't wait until the next concert!", a: "Cecilia D.", l: "Philadelphia" },
    { 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.", a: "Suzy Moore", l: "Avalon Theater" },
    { q: "Awesome musicians, great energy, and loads of fun. My favorite part was the solos—amazing. Definitely recommend!", a: "Alan S.", l: "Philadelphia" },
  ];
  return (
    <section className="gr-testimonials">
      <div className="gr-testimonials__inner">
        {quotes.map((q, i) => (
          <figure key={i} className="gr-testimonial">
            <span className="mark">"</span>
            <blockquote>{q.q}</blockquote>
            <figcaption>
              <span className="name">{q.a}</span>
              <span className="loc">{q.l}</span>
            </figcaption>
          </figure>
        ))}
      </div>
    </section>
  );
}

/* ===== EXPERIENCE ===== */
function Experience() {
  const cols = [
    { n: "1", t: "The Room", b: "150 seats. No bad ones. Intimate enough that the music reaches you before your brain decides how to feel about it." },
    { n: "2", t: "The Music", b: "Django standards, original compositions, the occasional Fado detour. A setlist that moves like conversation—joyful, dark, surprising, alive." },
    { n: "3", t: "The Feeling", b: "The sound of a Selmer guitar three feet away. A violin doing things that shouldn't be possible. You'll know it when you're in the room." },
  ];
  return (
    <section className="gr-experience">
      <header className="gr-experience__head">
        <h2 className="gr-h-display center">The room. The music. The reason people come back.</h2>
      </header>
      <div className="gr-experience__cols">
        {cols.map((c) => (
          <div key={c.n} className="gr-exp-col">
            <span className="bignum">{c.n}</span>
            <div className="text">
              <div className="gr-eyebrow">{c.t}</div>
              <p>{c.b}</p>
            </div>
          </div>
        ))}
      </div>
      <div className="gr-experience__cta">
        <p>Join the Gypsy Reverie Society — Be First to Know</p>
        <a className="gr-btn gr-btn--gold" href="#society-form">Join the Society</a>
      </div>
    </section>
  );
}

/* ===== VIDEOS — full-width carousel ===== */
function Videos() {
  const videoIds = [
    "hrNusZl0wIs",
    "su7ogMqG1Ro",
    "cDnlxHP9aFU",
    "3vnfWUDelVE",
    "n6WUXI_bQI0",
    "Kf0WdWPxG94",
    "OP5kk0LIF_g",
    "LhkwcSAb2Ug",
  ];
  const [titles, setTitles] = React.useState({});
  React.useEffect(() => {
    videoIds.forEach((id) => {
      fetch(`https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=${id}&format=json`)
        .then((r) => r.ok ? r.json() : null)
        .then((d) => { if (d && d.title) setTitles((prev) => ({ ...prev, [id]: d.title })); })
        .catch(() => {});
    });
  }, []);
  const videos = videoIds.map((id) => ({ id, title: titles[id] || "" }));
  const [active, setActive] = React.useState(0);
  const [playing, setPlaying] = React.useState(false);
  const total = videos.length;
  const go = (delta) => {
    setPlaying(false);
    setActive((a) => (a + delta + total) % total);
  };
  const cur = videos[active];

  return (
    <section className="gr-videos" aria-label="Live performance videos">
      <div className="gr-videos__inner">
        <div className="gr-eyebrow gr-videos__eyebrow">See for yourself</div>
        <h2 className="gr-videos__head">The music tells you everything words can't.</h2>

        <div className="gr-videos__stage">
          <button
            className="gr-videos__nav gr-videos__nav--prev"
            onClick={() => go(-1)}
            aria-label="Previous video"
          >
            <span className="gr-videos__nav-arrow" aria-hidden="true">‹</span>
          </button>

          <div className="gr-videos__player">
            <div className="gr-videos__player-frame" key={cur.id}>
              {playing ? (
                <iframe
                  src={`https://www.youtube-nocookie.com/embed/${cur.id}?autoplay=1&rel=0&modestbranding=1`}
                  title={cur.title}
                  loading="lazy"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                  allowFullScreen
                />
              ) : (
                <button
                  className="gr-videos__poster"
                  onClick={() => setPlaying(true)}
                  aria-label={cur.title ? `Play ${cur.title}` : "Play video"}
                  style={{backgroundImage: `url(https://i.ytimg.com/vi/${cur.id}/maxresdefault.jpg), url(https://i.ytimg.com/vi/${cur.id}/hqdefault.jpg)`}}
                >
                  <span className="gr-videos__play" aria-hidden="true">
                    <svg viewBox="0 0 64 64" width="64" height="64">
                      <circle cx="32" cy="32" r="30" fill="rgba(8,9,11,0.55)" stroke="currentColor" strokeWidth="1.5" />
                      <polygon points="26,20 26,44 46,32" fill="currentColor" />
                    </svg>
                  </span>
                </button>
              )}
            </div>
            {cur.title && (
              <figcaption className="gr-videos__caption">
                <span className="gr-videos__title">{cur.title}</span>
              </figcaption>
            )}
          </div>

          <button
            className="gr-videos__nav gr-videos__nav--next"
            onClick={() => go(1)}
            aria-label="Next video"
          >
            <span className="gr-videos__nav-arrow" aria-hidden="true">›</span>
          </button>
        </div>

        <div className="gr-videos__thumbs" role="tablist" aria-label="Video selection">
          {videos.map((v, i) => (
            <button
              key={v.id}
              role="tab"
              aria-selected={i === active}
              aria-label={v.title || "Live performance"}
              className={"gr-videos__thumb" + (i === active ? " is-active" : "")}
              onClick={() => { setPlaying(false); setActive(i); }}
              style={{backgroundImage: `url(https://i.ytimg.com/vi/${v.id}/hqdefault.jpg)`}}
            >
              {v.title && (
                <span className="gr-videos__thumb-meta">
                  <span className="gr-videos__thumb-title">{v.title}</span>
                </span>
              )}
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

window.WhatThisIs = WhatThisIs;
window.Testimonials = Testimonials;
window.Experience = Experience;
window.PhotoBreak = PhotoBreak;
window.BrandMarquee = BrandMarquee;
window.Videos = Videos;

/* ===== WEDDINGS & PRIVATE EVENTS ===== */
function Weddings() {
  const [playing, setPlaying] = React.useState(false);
  const videoId = "hrNusZl0wIs";
  const details = [
    {
      h: "Ceremony · Cocktail Hour · Dinner & Dancing",
      b: "Acoustic. Any size room. From string-quartet elegance to full-tilt swing.",
    },
    {
      h: "Dressed for the occasion",
      b: "Vintage or black-tie. Always camera-ready. Always on time.",
    },
    {
      h: "Custom arrangements",
      b: "Your first dance, reimagined in the gypsy jazz tradition.",
    },
  ];
  return (
    <section id="weddings" className="gr-weddings" aria-label="Weddings and private events">
      <div className="gr-weddings__bg" aria-hidden="true">
        <img src="../../assets/photo-weddings-band.jpg" alt="" />
      </div>
      <div className="gr-weddings__inner">
        <header className="gr-weddings__head">
          <div className="gr-eyebrow gr-weddings__eyebrow">Weddings · Corporate · Private</div>
          <h2 className="gr-weddings__title">Hire a real band.</h2>
          <p className="gr-weddings__sub">
            Your guests will remember the music long after they've forgotten everything else.
          </p>
        </header>

        <div className="gr-weddings__grid">
          <div className="gr-weddings__copy">
            <p className="gr-body-serif">
              A DJ plays songs. A cover band plays the songs everyone else plays. A gypsy jazz quartet — fully acoustic, virtuosic, rooted in the tradition <em>Django Reinhardt</em> invented in 1930s Paris — that's a different category of evening.
            </p>
            <p className="gr-body-serif">
              We've played weddings, gallery openings, festivals, and corporate events. We arrive early. We dress the part. We read the room and shift the energy from cocktail-hour murmur to dance-floor heat. You won't think about us once during your event — except to be grateful.
            </p>
          </div>

          <figure className="gr-weddings__featured">
            <span className="gr-weddings__featured-mark" aria-hidden="true">“</span>
            <blockquote>
              We received so many compliments on the band! The music was so much fun and the song selection from originals to covers were perfection for our wedding. I would highly recommend them for any occasion.
            </blockquote>
            <figcaption>
              <span className="name">Elizabeth Wright</span>
              <span className="loc">Bride</span>
            </figcaption>
          </figure>
        </div>

        <div className="gr-weddings__video">
          <div className="gr-weddings__video-frame">
            {playing ? (
              <iframe
                src={`https://www.youtube-nocookie.com/embed/${videoId}?rel=0&playsinline=1&modestbranding=1`}
                title="Wedding & event reel"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowFullScreen
              />
            ) : (
              <button
                type="button"
                className="gr-weddings__poster"
                onClick={() => setPlaying(true)}
                aria-label="Play wedding and event reel"
                style={{backgroundImage: `url(https://i.ytimg.com/vi/${videoId}/maxresdefault.jpg), url(https://i.ytimg.com/vi/${videoId}/hqdefault.jpg)`}}
              >
                <span className="gr-weddings__play" aria-hidden="true">
                  <svg viewBox="0 0 64 64" width="56" height="56">
                    <circle cx="32" cy="32" r="30" fill="rgba(8,9,11,0.55)" stroke="currentColor" strokeWidth="1.5" />
                    <path d="M26 21 L46 32 L26 43 Z" fill="currentColor" />
                  </svg>
                </span>
              </button>
            )}
          </div>
          <figcaption className="gr-weddings__video-caption">
            Hear the range — cocktail hour through dancing.
          </figcaption>
        </div>

        <div className="gr-weddings__details">
          {details.map((d, i) => (
            <div key={i} className="gr-weddings__detail">
              <div className="gr-weddings__detail-rule" aria-hidden="true"></div>
              <div className="gr-eyebrow">{d.h}</div>
              <p>{d.b}</p>
            </div>
          ))}
        </div>

        <div className="gr-weddings__cta">
          <a className="gr-btn gr-btn--gold-solid" href="mailto:gypsyreveriemusic@gmail.com?subject=Private%20Event%20Inquiry">
            Email us for availability
          </a>
        </div>
      </div>
    </section>
  );
}

window.Weddings = Weddings;

/* ===== SWING DANCE (obsidian + vermillion) ===== */
function SwingDance() {
  const [playing, setPlaying] = React.useState(false);
  const videoId = "cDnlxHP9aFU";
  const bullets = [
    "Available for swing dances, socials, and community events",
    "Full lindy hop range, balboa-friendly tempos",
    "Custom set lengths from 90 minutes to full night",
  ];
  return (
    <section id="swing-dance" className="gr-swing" aria-label="Swing dance bookings">
      <div className="gr-swing__bg" aria-hidden="true">
        <img src="../../assets/photo-swing-dancers.png" alt="" />
      </div>
      <div className="gr-swing__inner">
        <header className="gr-swing__head">
          <div className="gr-eyebrow gr-swing__eyebrow">For the Swing Dance Community</div>
          <h2 className="gr-swing__title">
            Real gypsy jazz. <span className="hot">Real tempos.</span>
          </h2>
        </header>

        <div className="gr-swing__grid">
          <div className="gr-swing__copy">
            <p className="gr-body-serif">
              Gypsy Reverie performs the Django Reinhardt tradition live — acoustic guitars, violin, and bass playing the full lindy hop range, from slow drags to flat-out swing.
            </p>
            <p className="gr-body-serif">
              Rooted in the <em>Hot Club de France</em> sound and drawing from Django standards, original compositions, and the occasional Fado detour, we play intimate venues where the stage is close enough to feel the <em>la pompe</em> rhythm in your chest.
            </p>
            <p className="gr-body-serif emphatic">
              If you've been waiting for live gypsy jazz in Asheville worth dancing to — this is it.
            </p>

            <ul className="gr-swing__bullets">
              {bullets.map((b, i) => (
                <li key={i}>
                  <span className="gr-swing__arrow" aria-hidden="true">→</span>
                  <span>{b}</span>
                </li>
              ))}
            </ul>

            <div className="gr-swing__cta">
              <a className="gr-btn gr-btn--gold-solid" href="mailto:gypsyreveriemusic@gmail.com?subject=Private%20Event%20Inquiry">
                Book us for your event <span aria-hidden="true" style={{marginLeft: "8px"}}>→</span>
              </a>
            </div>
          </div>

          <div className="gr-swing__video">
            <div className="gr-swing__video-frame">
              {playing ? (
                <iframe
                  src={`https://www.youtube-nocookie.com/embed/${videoId}?rel=0&playsinline=1&modestbranding=1`}
                  title="Tempo check — lindy hop range"
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                  allowFullScreen
                />
              ) : (
                <button
                  type="button"
                  className="gr-swing__poster"
                  onClick={() => setPlaying(true)}
                  aria-label="Play tempo check video"
                  style={{backgroundImage: `url(https://i.ytimg.com/vi/${videoId}/maxresdefault.jpg), url(https://i.ytimg.com/vi/${videoId}/hqdefault.jpg)`}}
                >
                  <span className="gr-swing__play" aria-hidden="true">
                    <svg viewBox="0 0 64 64" width="56" height="56">
                      <circle cx="32" cy="32" r="30" fill="rgba(8,9,11,0.55)" stroke="currentColor" strokeWidth="1.5" />
                      <path d="M26 21 L46 32 L26 43 Z" fill="currentColor" />
                    </svg>
                  </span>
                </button>
              )}
            </div>
            <figcaption className="gr-swing__video-caption">
              Tempo check — lindy hop range.
            </figcaption>
          </div>
        </div>
      </div>
    </section>
  );
}

window.SwingDance = SwingDance;

/* ===== ABOUT (Black Cherry, editorial portrait) ===== */
function About() {
  return (
    <section id="about" className="gr-about" aria-label="About Gypsy Reverie">
      <div className="gr-about__inner">
        <figure className="gr-about__photo">
          <img src="../../assets/photo-about-joseph.jpg" alt="Joseph Arnold playing violin, candlelit window light" />
          <figcaption>Joseph Arnold · violin</figcaption>
        </figure>
        <div className="gr-about__copy">
          <div className="gr-eyebrow gr-about__eyebrow">About Gypsy Reverie</div>
          <h2 className="gr-about__title">The bittersweet, the bluesy, the alive.</h2>
          <p className="gr-body-serif">
            Joseph Arnold first heard <em>Stéphane Grappelli</em> on a recording and recognized something he'd been listening for his whole life — elegant, soulful, free, the kind of phrasing that sounds like a violin laughing one second and grieving the next. The music spoke to the place in him that loves joy mixed with darkness. He's been chasing that sound for twenty years since.
          </p>
          <p className="gr-body-serif">
            Conservatory-trained. Fifteen years with the <em>Hot Club of Philadelphia</em>. Three albums recorded with the band. Now in Asheville with a quartet built from scratch for this city — lead guitarist Adam Rose, plus rhythm guitarist Albi Podrizki and Ryan Kijanka on bass.
          </p>
          <p className="gr-about__creed">
            All my favorite music has one thing in common: the bittersweet ache of the joy that comes after darkness.
          </p>
          <p className="gr-body-serif">
            We play Django standards, original compositions, custom arrangements, the occasional Fado detour — the music that stops a room and rewards the people who actually came to hear something.
          </p>
        </div>
      </div>
    </section>
  );
}

window.About = About;