/* global React */

/* ===== HOW IT WORKS ===== */
function HowItWorks() {
  const steps = [
    { n: "I", t: "Join the Inner Circle", b: "The Gypsy Reverie Society gets first access—48 hours before tickets go public. Shows sell out. This is how you make sure you're in the room.", cta: "Join the Society →" },
    { n: "II", t: "Find Your Seat", b: "150 seats. No bad ones. Arrive early, order a drink, and settle into a room already humming with anticipation." },
    { n: "III", t: "Leave Somewhere Else", b: "Two hours later you walk into the night air feeling lighter than when you arrived. The music stays with you. It always does." },
  ];
  return (
    <section className="gr-how">
      <h2 className="gr-h-display center">Getting here is easy. <em className="gold-italic">Leaving</em> is the hard part.</h2>
      <div className="gr-how__line"></div>
      <div className="gr-how__steps">
        {steps.map((s, i) => (
          <div key={i} className="gr-how-step">
            <span className="num">{s.n}</span>
            <div className="dot"></div>
            <div className="gr-eyebrow">{s.t}</div>
            <p>{s.b}</p>
            {s.cta && <a className="gr-link-arrow" href="#society-form">{s.cta}</a>}
          </div>
        ))}
      </div>
    </section>
  );
}

/* ===== STARTER KIT (lead magnet) ===== */
function StarterKit() {
  return (
    <section className="gr-starter">
      <div className="gr-starter__photo" style={{backgroundImage: "url(../../assets/photo-violin.png)"}}>
        <div className="placeholder-tag">Violin · candlelit · embers</div>
      </div>
      <div className="gr-starter__inner">
        <div className="gr-eyebrow">For the curious</div>
        <h2 className="gr-h-display">New to gypsy jazz? Start here.</h2>
        <p className="gr-sub-italic">The Django Starter Kit—free.</p>
        <p className="gr-body-serif">
          Three essential recordings. Four films that unlock the world. One paragraph on why this music sounds like nothing else ever recorded.
        </p>
        <p className="gr-body-serif">
          Most of our most devoted fans discovered Django by accident. This is the guided version of that accident.
        </p>
        <form className="gr-starter__form" onSubmit={(e) => e.preventDefault()}>
          <input className="gr-field" placeholder="First name" />
          <input className="gr-field" type="email" placeholder="Email" />
          <button className="gr-btn gr-btn--gold-solid" type="submit">Send Me the Starter Kit</button>
          <p className="gr-fine">No spam. Unsubscribe anytime. Takes 30 seconds.</p>
        </form>
      </div>
    </section>
  );
}

/* ===== THE SOCIETY ===== */

// Endpoint for your Email Octopus signup proxy.
// Set this to the deployed URL of the serverless function in /server/email-octopus-subscribe.js
// (Netlify, Cloudflare Worker, Vercel, etc.) For local dev you can point at /api/subscribe.
const SOCIETY_ENDPOINT = "/api/email-octopus-subscribe";

function Society() {
  const [state, setState] = React.useState({ status: "idle", error: "" });

  const onSubmit = async (e) => {
    e.preventDefault();
    if (state.status === "loading") return;
    const form = e.currentTarget;
    const data = {
      first_name: form.first_name.value.trim(),
      email: form.email.value.trim(),
    };
    setState({ status: "loading", error: "" });
    try {
      const res = await fetch(SOCIETY_ENDPOINT, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(data),
      });
      if (!res.ok) {
        let msg = "Something went wrong. Try again in a moment.";
        try {
          const j = await res.json();
          if (j && j.error) msg = j.error;
        } catch (_) {}
        setState({ status: "error", error: msg });
        return;
      }
      setState({ status: "submitted", error: "" });
    } catch (err) {
      setState({ status: "error", error: "Network error. Try again." });
    }
  };

  return (
    <section id="society" className="gr-society">
      <img className="gr-society__watermark" src="../../assets/logo-mark-gold.png" alt="" aria-hidden="true" />
      <div className="gr-society__frame">
        <div className="gr-eyebrow">Join the Gypsy Reverie Society</div>
        <h2 className="gr-h-display">Asheville's inner circle for people who take their Friday nights seriously.</h2>
        <p className="gr-body-serif">
          Society members get first access to tickets before public release, behind-the-scenes content from rehearsals and recordings, invitations to intimate pop-up performances, and a monthly dispatch from the world of gypsy jazz.
        </p>
        <p className="gr-body-serif emphatic">Most shows sell out to the list before they go public.</p>

        <aside id="society-form" className="gr-society__gift" aria-label="Welcome gift">
          <div className="gr-society__gift-tag">Welcome Gift</div>
          <h3 className="gr-society__gift-head">The Django Starter Kit — free for new members.</h3>
          <p>
            Three essential recordings, four films that unlock the world, one paragraph on why this music sounds like nothing else ever recorded.
          </p>
          <p className="gr-society__gift-line">
            Most of our devoted fans discovered Django by accident. This is the guided version of that accident.
          </p>
        </aside>

        {state.status === "submitted" ? (
          <div className="gr-society__thanks">
            <span className="gr-eyebrow">You're in.</span>
            <p>Watch for the next dispatch — and the Starter Kit, on its way to your inbox.</p>
          </div>
        ) : (
          <form className="gr-society__form" onSubmit={onSubmit} noValidate>
            <input className="gr-field" name="first_name" placeholder="First name" required autoComplete="given-name" />
            <input className="gr-field" name="email" type="email" placeholder="Email" required autoComplete="email" />
            <button className="gr-btn gr-btn--gold-solid" type="submit" disabled={state.status === "loading"}>
              {state.status === "loading" ? "Joining…" : "Join the Society"}
            </button>
            {state.status === "error" && (
              <p className="gr-society__error" role="alert">{state.error}</p>
            )}
          </form>
        )}
      </div>
    </section>
  );
}

/* ===== FAQ ===== */
function FAQ() {
  const items = [
    { q: "Do I need to know anything about gypsy jazz to enjoy this?", a: "Not a thing. Most of our audience discovered the genre at their first show. The music introduces itself. Give it thirty seconds and you'll find your toes tapping by themselves." },
    { q: "Is this a concert or background music?", a: "It depends on the show. Sometimes we play background music for special events. But our concerts feature focused listening, real solos, improvisation you can't predict. The room gets quiet when something extraordinary happens—and something extraordinary always happens." },
    { q: "What's the vibe / dress code?", a: "Somewhere between a nice dinner out and a jazz club. Most people dress up a little because the occasion seems to call for it. No rules." },
    { q: "How early do shows sell out?", a: "Society members typically claim 50–70% of seats before public release. If you're not on the list, buy early." },
    { q: "Can I dance?", a: "Yes! Gypsy jazz has a swing that makes staying still difficult. Find a space in front of the stage or in the aisles and get swinging!" },
    { q: "Do you play weddings and private events?", a: (<React.Fragment>Yes. See our <a className="gr-link" href="#weddings">Weddings &amp; Events page</a> →</React.Fragment>) },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section className="gr-faq">
      <h2 className="gr-h-display center">Things people wonder before their first show.</h2>
      <div className="gr-faq__list">
        {items.map((it, i) => (
          <div key={i} className={`gr-faq-item ${open === i ? "is-open" : ""}`} onClick={() => setOpen(open === i ? -1 : i)}>
            <div className="gr-faq-item__q">
              <span className="text">{it.q}</span>
              <span className="toggle">{open === i ? "—" : "+"}</span>
            </div>
            <div className="gr-faq-item__a"><p>{it.a}</p></div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ===== FINAL CTA ===== */
function FinalCTA() {
  return (
    <section className="gr-final">
      <div className="gr-final__photo" style={{backgroundImage: "url(../../assets/brand-pg1-b.png)"}} />
      <div className="gr-final__bg" />
      <div className="gr-final__overlay" />
      <div className="gr-final__inner">
        <h2 className="gr-final__head">
          <span>One night in Paris.</span>
          <span className="italic">Right here in Asheville.</span>
        </h2>
        <p className="gr-body-serif">
          Come hear the original outlaw music in an intimate venue near you. Gypsy Reverie Society members have had first access for 48 hours.
        </p>
        <p className="gr-body-serif emphatic">Seats that are left won't be for long.</p>
        <div className="gr-final__ctas">
          <a className="gr-btn gr-btn--gold-solid" href="/shows">See our upcoming shows</a>
          <a className="gr-link-arrow" href="#society-form">Get first access — join the Society <span className="arrow">→</span></a>
        </div>
      </div>
    </section>
  );
}

/* ===== FOOTER ===== */
function Footer({ current = "home" }) {
  // Hrefs from anywhere in the site. Anchors on the home page jump in-page;
  // from any other page (e.g. shows.html) they navigate back to index.html#.
  const isHome = current === "home";
  const a = (anchor) => (isHome ? `#${anchor}` : `/#${anchor}`);

  // External URLs — replace with the band's real profiles when ready.
  // (Leaving as # silently doesn't break anything; they just don't navigate.)
  const SOCIAL = {
    instagram:   "https://www.instagram.com/gypsyreveriemusic/",
    youtube:     "https://www.youtube.com/@gypsyreveriemusic",
    bandsintown: "#",                                  // e.g. "https://www.bandsintown.com/a/12345"
    spotify:     "#",                                  // e.g. "https://open.spotify.com/artist/…"
  };
  const BOOKING_MAIL = "mailto:gypsyreveriemusic@gmail.com?subject=Private%20Event%20Inquiry";
  const CONTACT_MAIL = "mailto:gypsyreveriemusic@gmail.com";

  const cols = [
    { h: "Listen", links: [
      { label: "Shows & Tickets",     href: "/shows" },
      { label: "Weddings & Events",   href: a("weddings") },
      { label: "Swing & Dance",       href: a("swing-dance") },
      { label: "The Society",         href: a("society-form") },
    ]},
    { h: "Inside", links: [
      { label: "About",               href: a("about") },
      { label: "Press",               href: "/press" },
      { label: "Contact",             href: CONTACT_MAIL },
      { label: "Book for Private Events", href: BOOKING_MAIL },
    ]},
    { h: "Follow", links: [
      { label: "Instagram",           href: SOCIAL.instagram,   ext: true },
      { label: "YouTube",             href: SOCIAL.youtube,     ext: true },
      { label: "Bandsintown",         href: SOCIAL.bandsintown, ext: true },
      { label: "Spotify",             href: SOCIAL.spotify,     ext: true },
    ]},
  ];
  return (
    <footer className="gr-footer">
      <div className="gr-footer__hero">
        <img className="gr-footer__mark" src="../../assets/logo-mark-gold.png" alt="" aria-hidden="true" />
        <a className="gr-footer__wordmark-link" href={isHome ? "#top" : "/"} aria-label="Home">
          <div className="gr-footer__wordmark">Gypsy Reverie</div>
        </a>
        <div className="gr-footer__tagline">Ferocious. Elegant. Alive.</div>
      </div>
      <div className="gr-footer__cols-row">
        {cols.map((c) => (
          <div key={c.h} className="col">
            <span className="gr-eyebrow">{c.h}</span>
            {c.links.map((l) => (
              <a
                key={l.label}
                href={l.href}
                {...(l.ext ? { target: "_blank", rel: "noopener noreferrer" } : {})}
              >{l.label}</a>
            ))}
          </div>
        ))}
      </div>
      <div className="gr-footer__rule"></div>
      <div className="gr-footer__fine">
        <span>© 2026 Gypsy Reverie</span>
        <span className="dot">·</span>
        <span>gypsyreveriemusic.com</span>
        <span className="dot">·</span>
        <span>Asheville, NC</span>
      </div>
    </footer>
  );
}

window.HowItWorks = HowItWorks;
window.StarterKit = StarterKit;
window.Society = Society;
window.FAQ = FAQ;
window.FinalCTA = FinalCTA;
window.Footer = Footer;