/* global React */
const { useState, useEffect, useRef } = React;

/* ===== NAV ===== */
function Nav({ current = "home" }) {
  const [scrolled, setScrolled] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 80);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Centralized link list. Each link knows its href + its "page key" so the
  // current page can render an active state. On the home page anchor links
  // jump to sections; on subpages they navigate back to index.html first.
  const isHome = current === "home";
  const homeAnchor = (anchor) => (isHome ? `#${anchor}` : `/#${anchor}`);
  const links = [
    { label: "Shows",    href: "/shows",                key: "shows"    },
    { label: "Weddings", href: homeAnchor("weddings"),  key: "weddings" },
    { label: "Swing",    href: homeAnchor("swing-dance"), key: "swing"  },
    { label: "About",    href: homeAnchor("about"),     key: "about"    },
  ];

  return (
    <React.Fragment>
      <nav className={`gr-nav ${scrolled ? "gr-nav--scrolled" : ""}`}>
        <a className="gr-nav__brand" href={isHome ? "#top" : "/"}>
          <img className="gr-nav__mark" src="../../assets/logo-mark-gold.png" alt="" aria-hidden="true" />
          <span className="wordmark">Gypsy Reverie</span>
        </a>
        <ul className="gr-nav__items">
          {links.map((it) => (
            <li key={it.key}>
              <a href={it.href} className={current === it.key ? "is-active" : ""}>{it.label}</a>
            </li>
          ))}
        </ul>
        <a className="gr-nav__cta" href={homeAnchor("society-form")}>Join the Society</a>
        <button className="gr-nav__burger" onClick={() => setMobileOpen(true)} aria-label="Menu">
          <span></span><span></span><span></span>
        </button>
      </nav>
      {mobileOpen && (
        <div className="gr-mobile-menu" onClick={() => setMobileOpen(false)}>
          <button className="gr-mobile-menu__close" aria-label="Close">×</button>
          <ul>
            {links.map((it) => (
              <li key={it.key}><a href={it.href}>{it.label}</a></li>
            ))}
            <li><a href="/press">Press</a></li>
            <li><a href="mailto:gypsyreveriemusic@gmail.com?subject=Hello">Contact</a></li>
            <li><a href={homeAnchor("society-form")} className="cta">Join the Society</a></li>
          </ul>
        </div>
      )}
    </React.Fragment>
  );
}

/* ===== HERO—Cinematic Marquee ===== */
function Hero() {
  return (
    <section id="top" className="gr-hero">
      {/* Layer 1: band photo, full-bleed */}
      <div className="gr-hero__photo" style={{backgroundImage: "url(../../assets/photo-band-hero.png)"}} />
      {/* Layer 2: fire glow, screen-blended around the band */}
      <div className="gr-hero__fire" style={{backgroundImage: "url(../../assets/photo-fire-small.png)"}} />
      {/* Layer 3: dark vignette + bottom gradient for type legibility */}
      <div className="gr-hero__scrim" />
      <div className="gr-hero__grain" />

      {/* Bottom-left type stack */}
      <div className="gr-hero__inner">
        <div className="gr-hero__eyebrow gr-anim" style={{animationDelay: "0.25s"}}>Asheville, NC · Gypsy Jazz Quartet</div>
        <h1 className="gr-hero__title gr-anim" style={{animationDelay: "0.4s"}}>
          <span>You came for a night out.</span>
          <span className="italic">You didn't plan on this.</span>
        </h1>
        <div className="gr-hero__bar gr-anim" style={{animationDelay: "0.6s"}}>
          <p className="gr-hero__sub">
            <span className="line-1">Close enough to watch the fingers move. Still impossible to believe.</span>
            <span className="line-2">Ferocious. Elegant. Alive.</span>
          </p>
          <a className="gr-btn gr-btn--gold-solid gr-hero__cta" href="#society-form">Join the Society</a>
        </div>
      </div>

    </section>
  );
}

/* ===== AUTHORITY BAR ===== */
function Authority() {
  return (
    <section className="gr-credbar" aria-label="Press & credentials">
      <div className="gr-credbar__inner">
        <span className="gr-credbar__item">
          <span className="gr-credbar__lede">Sold out</span>
          <span className="gr-credbar__sep">·</span>
          <span className="gr-credbar__detail">City Winery Philadelphia</span>
        </span>
        <span className="gr-credbar__dot" aria-hidden="true"></span>
        <span className="gr-credbar__item">
          <span className="gr-credbar__lede">150 seats</span>
          <span className="gr-credbar__sep">·</span>
          <span className="gr-credbar__detail">No bad ones</span>
        </span>
        <span className="gr-credbar__dot" aria-hidden="true"></span>
        <span className="gr-credbar__item">
          <span className="gr-credbar__lede">The Django Reinhardt tradition</span>
          <span className="gr-credbar__sep">·</span>
          <span className="gr-credbar__detail">Live</span>
        </span>
      </div>
    </section>
  );
}

/* ===== HOOK ===== */
function Hook() {
  return (
    <section className="gr-hook">
      <div className="gr-hook__grid">
        <figure className="gr-hook__photo">
          <div
            className="gr-hook__photo-frame"
            role="img"
            aria-label="Gypsy Reverie performing at The Loft"
            style={{backgroundImage: "url(../../assets/photo-hook-loft.png)"}}
          ></div>
          <figcaption>Gypsy Reverie at The Loft</figcaption>
        </figure>
        <div className="gr-hook__inner">
          <p>You know that feeling when a show actually <em>stops</em> you—</p>
          <p>when you forget to check your phone,</p>
          <p>forget you were tired,</p>
          <p>forget everything except what's happening right now?</p>
          <p className="break">That's a rare thing.</p>
          <p>Most nights out are <span className="gold">fine</span>.</p>
          <p className="emphatic">This isn't <span className="gold">fine</span>.</p>
        </div>
      </div>
    </section>
  );
}

window.Nav = Nav;
window.Hero = Hero;
window.Hook = Hook;
window.Authority = Authority;