// CinemaHero — full-viewport cinematic streaming hero, exactly per spec.

const { useState: useStateCH } = React;

function LIcon({ name, size = 18, fill }) {
  const sw = 1.6;
  const c = { width: size, height: size, viewBox: "0 0 24 24", fill: fill || "none", stroke: "currentColor", strokeWidth: sw, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case 'search':
      return <svg {...c}><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.3-4.3"/></svg>;
    case 'user':
      return <svg {...c}><circle cx="12" cy="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg>;
    case 'menu':
      return <svg {...c}><path d="M3 6h18M3 12h18M3 18h18"/></svg>;
    case 'x':
      return <svg {...c}><path d="M18 6L6 18M6 6l12 12"/></svg>;
    case 'star':
      return <svg width={size} height={size} viewBox="0 0 24 24" fill="white" stroke="white" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>;
    case 'clock':
      return <svg {...c}><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>;
    case 'calendar':
      return <svg {...c}><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>;
    case 'play':
      return <svg width={size} height={size} viewBox="0 0 24 24" fill="black" stroke="black" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>;
    case 'chevL':
      return <svg {...c}><polyline points="15 18 9 12 15 6"/></svg>;
    case 'chevR':
      return <svg {...c}><polyline points="9 18 15 12 9 6"/></svg>;
    default:
      return null;
  }
}

function CinemaHero() {
  const [menuOpen, setMenuOpen] = useStateCH(false);

  const navItems = ['Movies', 'TV Series', "Editor's Pick", 'Interviews', 'User Reviews'];
  const fadeStyle = (delay) => ({ animationDelay: `${delay}ms` });
  const slideStyle = (delay, open) => ({
    transitionDelay: `${delay}ms`,
  });

  return (
    <section className="cinema-hero">
      {/* Background video */}
      <video className="ch-video" autoPlay muted loop playsInline>
        <source src="https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260406_094145_4a271a6c-3869-4f1c-8aa7-aeb0cb227994.mp4" type="video/mp4"/>
      </video>

      {/* Bottom-only blur overlay */}
      <div className="ch-blur"></div>

      {/* Navbar */}
      <nav className="ch-nav">
        <a href="#top" className="ch-logo animate-blur-fade-up" style={fadeStyle(0)}>
          <img src="assets/logo.png" alt="Midsummer Festival" className="nav-logo-img" />
        </a>

        <div className="ch-nav-links">
          {navItems.map((item, i) => (
            <a key={item} href="#" className="animate-blur-fade-up" style={fadeStyle(100 + i * 50)}>{item}</a>
          ))}
        </div>

        <div className="ch-nav-right">
          <button className="ch-search-pill liquid-glass animate-blur-fade-up" style={fadeStyle(350)}>
            <span>Search</span>
            <LIcon name="search" size={18}/>
          </button>
          <button className="ch-icon-btn liquid-glass animate-blur-fade-up" style={fadeStyle(400)}>
            <LIcon name="user" size={18}/>
          </button>
          <button
            className={"ch-hamburger liquid-glass animate-blur-fade-up " + (menuOpen ? "open" : "")}
            style={fadeStyle(350)}
            onClick={() => setMenuOpen(o => !o)}
            aria-label="Menu"
          >
            <span className="icon-stack">
              <LIcon name="menu" size={18}/>
              <span className="x-icon"><LIcon name="x" size={18}/></span>
            </span>
          </button>
        </div>
      </nav>

      {/* Mobile menu */}
      <div className={"ch-mobile-menu " + (menuOpen ? "open" : "")}>
        {navItems.map((item, i) => (
          <a key={item} href="#" style={{ transitionDelay: `${i * 50}ms` }}>{item}</a>
        ))}
        <div className="ch-mobile-bottom">
          <button className="ch-search-pill liquid-glass">
            <span>Search</span>
            <LIcon name="search" size={18}/>
          </button>
          <button className="ch-icon-btn liquid-glass">
            <LIcon name="user" size={18}/>
          </button>
        </div>
      </div>

      {/* Hero content */}
      <div className="ch-content">
        <div className="ch-content-row">
          <div className="ch-content-left">
            <div className="ch-meta-row animate-blur-fade-up" style={fadeStyle(300)}>
              <span className="ch-meta ch-rating">
                <LIcon name="star" size={16}/>
                <span>8.7/10 IMDB</span>
              </span>
              <span className="ch-meta">
                <LIcon name="clock" size={16}/>
                <span>132 min</span>
              </span>
              <span className="ch-meta">
                <LIcon name="calendar" size={16}/>
                <span>April, 2025</span>
              </span>
            </div>

            <h1 className="ch-title animate-blur-fade-up" style={fadeStyle(400)}>
              Step Through. Work Smarter.
            </h1>

            <p className="ch-desc animate-blur-fade-up" style={fadeStyle(500)}>
              A voyage through forgotten realms, where past and future intertwine.
            </p>

            <div className="ch-cta-row">
              <a href="#" className="ch-watch animate-blur-fade-up" style={fadeStyle(600)}>
                <LIcon name="play" size={18}/>
                <span>Watch Now</span>
              </a>
              <a href="#" className="ch-learn liquid-glass animate-blur-fade-up" style={fadeStyle(700)}>
                Learn More
              </a>
            </div>
          </div>

          <div className="ch-arrows">
            <button className="ch-arrow-btn liquid-glass animate-blur-fade-up" style={fadeStyle(800)}>
              <LIcon name="chevL" size={18}/>
              <span>Previous</span>
            </button>
            <button className="ch-arrow-btn liquid-glass animate-blur-fade-up" style={fadeStyle(900)}>
              <span>Next</span>
              <LIcon name="chevR" size={18}/>
            </button>
          </div>
        </div>
      </div>
    </section>
  );
}

window.CinemaHero = CinemaHero;