// === Nav + Hero ===

function Nav({ active = "home" }) {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = [
    { id: "services", label: "Services", href: "services.html" },
    { id: "portfolio", label: "Portfolio", href: "portfolio.html" },
    { id: "process", label: "Process", href: "process.html" },
    { id: "about", label: "About", href: "about.html" },
    { id: "journal", label: "Journal", href: "journal.html" },
    { id: "faq", label: "FAQ", href: "faq.html" },
  ];
  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
      <a href="index.html" className="nav-logo">
        <img src="images/logo.png" alt="Wrap Station" className="nav-logo-img"/>
      </a>
      <div className="nav-links">
        {links.map((l) => (
          <a key={l.id} href={l.href} className={`nav-link ${active === l.id ? "active" : ""}`}>{l.label}</a>
        ))}
      </div>
      <a href="contact.html" className="btn btn-primary nav-cta nav-cta-desktop">
        Get a quote
        <Icon.Arrow size={14} />
      </a>
      <button className="nav-toggle" onClick={() => setOpen(!open)} aria-label="Menu">
        <span></span><span></span><span></span>
      </button>
      {open && (
        <div className="nav-mobile">
          {links.map((l) => (
            <a key={l.id} href={l.href} className="nav-mobile-link">{l.label}</a>
          ))}
          <a href="contact.html" className="btn btn-primary" style={{ marginTop: 16 }}>
            Get a quote <Icon.Arrow size={14}/>
          </a>
        </div>
      )}
    </nav>
  );
}

function Hero() {
  return (
    <section className="hero" id="top">
      <div className="hero-bg" />
      <div className="hero-grid" />
      <img src="images/aventador-white.jpg" alt="Lamborghini Aventador wrap" className="hero-photo" />
      <div className="hero-content">
        <Reveal>
          <div className="hero-meta">
            <span className="hero-meta-dot" />
            <span className="hero-meta-text">San Diego · Open · Booking 2 weeks out</span>
          </div>
        </Reveal>
        <Reveal delay={80}>
          <h1 className="h-display">
            Engineered<br/>
            for the cars<br/>
            you <span className="accent">obsess</span> over.
          </h1>
        </Reveal>
        <Reveal delay={160}>
          <p className="lede" style={{ marginTop: 28 }}>
            Premium vinyl wraps, paint protection, ceramic coating and window tint.
            Installed in a controlled environment by a team that treats your Tesla, BMW or Mercedes
            the way you do.
          </p>
        </Reveal>
        <Reveal delay={220}>
          <div className="hero-actions">
            <a href="contact.html" className="btn btn-primary">
              Build my quote
              <Icon.Arrow />
            </a>
            <a href="portfolio.html" className="btn btn-ghost">
              See recent work
            </a>
          </div>
        </Reveal>
        <Reveal delay={300}>
          <div className="hero-stats">
            <div>
              <div className="hero-stat-num">1,400+</div>
              <div className="hero-stat-label">Vehicles wrapped</div>
            </div>
            <div>
              <div className="hero-stat-num">12 yr</div>
              <div className="hero-stat-label">Warranty available</div>
            </div>
            <div>
              <div className="hero-stat-num">4.9★</div>
              <div className="hero-stat-label">Across 380 reviews</div>
            </div>
            <div>
              <div className="hero-stat-num">92121</div>
              <div className="hero-stat-label">Sorrento Valley, CA</div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function BrandStrip() {
  const brands = ["Tesla", "BMW", "Mercedes-Benz", "Porsche", "Audi", "Lucid", "Rivian", "Genesis", "Lexus", "Range Rover"];
  const loop = [...brands, ...brands];
  return (
    <div className="brands">
      <div className="brands-track">
        {loop.map((b, i) => (
          <span key={i} className="brand-item">{b}</span>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Nav, Hero, BrandStrip });