// Hero — two women riders converging from sides, middle text "FOR THE GIRLS"
// Uses SVG silhouettes (since we don't have real imagery) with a dramatic
// convergence animation. Headlight glare, motion-blur streaks, chromatic nav.

// useMobile is provided by Wordmark.jsx (window.useMobile).
// SOCIAL is provided by PageChrome.jsx (loaded before this file).

const Hero = () => {
  const [mode, setMode] = React.useState("default"); // default | type | photo
  const [menuOpen, setMenuOpen] = React.useState(false);
  const isMobile = window.useMobile(640);
  const isNarrow = window.useMobile(767); // Hide nav links and show center socials at < 767px

  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);

  return (
    <section className="mm-hero" data-mode={mode}>
      {/* Top nav */}
      <nav className="mm-nav">
        <a href="/" className="mm-logo mm-logo--link" aria-label="Motomelli — home">
          <span className="mm-logo__word mm-logo__word--svg">
            <MotomelliWordmark height={22} />
          </span>
        </a>
        
        {/* Desktop: nav links (hide at narrow widths) */}
        {!isNarrow && (
          <ul className="mm-nav__links">
            <li><a href="/hoodies">Hoodies</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/contact">Contact</a></li>
          </ul>
        )}

        <div className="mm-nav__right">
          {!isNarrow && (
            <a href="/compare" className="mm-nav__cta">
              <span className="mm-nav__cta-label">Compare now</span>
              <span className="mm-nav__cta-caret" aria-hidden>▸</span>
            </a>
          )}
          <button
            className={`mm-nav__burger${menuOpen ? " is-open" : ""}`}
            onClick={() => setMenuOpen(o => !o)}
            aria-label={menuOpen ? "Close menu" : "Open menu"}
            aria-expanded={menuOpen}
          >
            <span /><span /><span />
          </button>
        </div>
      </nav>

      {/* Mobile drawer — fixed overlay, slides in from right */}
      <div className={`mm-nav__drawer${menuOpen ? " is-open" : ""}`} aria-hidden={!menuOpen}>
        <div className="mm-nav__drawer-overlay" onClick={() => setMenuOpen(false)} />
        <nav className="mm-nav__drawer-panel">
          <div className="mm-nav__drawer-head">
            <a href="/" className="mm-logo mm-logo--link" onClick={() => setMenuOpen(false)}>
              <span className="mm-logo__word mm-logo__word--svg"><MotomelliWordmark height={14} /></span>
            </a>
            <button className="mm-nav__drawer-close" onClick={() => setMenuOpen(false)} aria-label="Close menu">✕</button>
          </div>
          <a href="/hoodies" className="mm-nav__drawer-link" onClick={() => setMenuOpen(false)}>
            <span>Hoodies</span>
            <span className="mm-nav__drawer-arrow">→</span>
          </a>
          <a href="/about" className="mm-nav__drawer-link" onClick={() => setMenuOpen(false)}>
            <span>About</span>
            <span className="mm-nav__drawer-arrow">→</span>
          </a>
          <a href="/contact" className="mm-nav__drawer-link" onClick={() => setMenuOpen(false)}>
            <span>Contact</span>
            <span className="mm-nav__drawer-arrow">→</span>
          </a>
          <div className="mm-nav__drawer-socials">
            <a href={SOCIAL.instagram} target="_blank" rel="noopener noreferrer" aria-label="Instagram" className="mm-nav__social">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                <rect x="3" y="3" width="18" height="18" rx="5"/>
                <circle cx="12" cy="12" r="4"/>
                <circle cx="17.5" cy="6.5" r="0.8" fill="currentColor" stroke="none"/>
              </svg>
            </a>
            <a href={SOCIAL.facebook} target="_blank" rel="noopener noreferrer" aria-label="Facebook" className="mm-nav__social">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor">
                <path d="M13.5 21v-7.5h2.5l.4-3h-2.9V8.6c0-.87.27-1.46 1.5-1.46H16.5V4.4c-.3-.04-1.3-.13-2.46-.13-2.44 0-4.04 1.49-4.04 4.21v2.02H7.5v3H10V21h3.5z"/>
              </svg>
            </a>
            <a href={SOCIAL.tiktok} target="_blank" rel="noopener noreferrer" aria-label="TikTok" className="mm-nav__social">
              <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor">
                <path d="M16.5 3h-2.7v12.1c0 1.5-1.2 2.7-2.7 2.7s-2.7-1.2-2.7-2.7 1.2-2.7 2.7-2.7c.3 0 .58.05.85.13v-2.78a5.5 5.5 0 0 0-.85-.07A5.43 5.43 0 0 0 5.7 15.1 5.43 5.43 0 0 0 11.1 20.5a5.43 5.43 0 0 0 5.4-5.4V8.83a7.4 7.4 0 0 0 4.3 1.37V7.43c-2.36 0-4.3-1.94-4.3-4.43z"/>
              </svg>
            </a>
          </div>
        </nav>
      </div>

      {/* Animated stage */}
      <div className="mm-hero__stage">
        {/* Horizon glow */}
        <div className="mm-hero__horizon" />
        <div className="mm-hero__grid" />

        {/* Centre text — bikers are inside on mobile flex flow; absolute on desktop */}
        <div className="mm-hero__text">
          <div className="mm-hero__info-wrap">
            <div className="mm-hero__eyebrow">
              <span className="mm-tick" />
              <span className="mm-mono">COMPARED AND REVIEWED</span>
              <span className="mm-tick" />
            </div>
            <h1 className="mm-hero__title">
              <span className="mm-hero__line">GEAR</span>
              <span className="mm-hero__line">for</span>
              <span className="mm-hero__line mm-hero__line--accent">GIRLS</span>
            </h1>
            <div className="mm-hero__sub">
              Real women's reviews, sizing intel & brand comparisons.<br />
              Never buy the wrong gear online again.
            </div>
          </div>

          <div className="mm-hero__riders-row">
            <div className="mm-rider mm-rider--left">
              <div className="mm-rider__streaks">
                {Array.from({ length: 7 }).map((_, i) => <span key={i} style={{ "--d": i }} />)}
              </div>
              <img src="assets/left-bike.webp" className="mm-rider__img" alt="Left rider" fetchpriority="high" />
            </div>
            <div className="mm-rider mm-rider--right">
              <div className="mm-rider__streaks">
                {Array.from({ length: 7 }).map((_, i) => <span key={i} style={{ "--d": i }} />)}
              </div>
              <img src="assets/right-bike.webp" className="mm-rider__img" alt="Right rider" fetchpriority="high" />
            </div>
          </div>

          {isMobile && (
            <div className="mm-hero__cta">
              <a href="/compare" className="mm-btn mm-btn--primary">
                <span>Compare Gear</span>
              </a>
              <a href="/#mm-sizecmp" className="mm-btn mm-btn--ghost">Compare Sizing</a>
            </div>
          )}
        </div>

        {/* Corner meta — intentionally minimal */}
      </div>

      {/* Marquee ticker */}
      <div className="mm-ticker" aria-hidden>
        <div className="mm-ticker__track">
          {[...Array(3)].map((_, i) =>
          <span key={i}>
              <em>◆</em> CE-AAA VERIFIED
              <em>◆</em> SIZE 6 TO 26
              <em>◆</em> WOMEN-LED REVIEWS
              <em>◆</em> COMPARISONS ◆ PANDO MOTO
              <em>◆</em> BOWTEX
              <em>◆</em> KNOX
              <em>◆</em> MOTOGIRL
              <em>◆</em> MOTOMELLI ORIGINALS
            </span>
          )}
        </div>
      </div>
    </section>);

};

window.Hero = Hero;