/* ============================================================
   Fitted Landing — Nav + Hero
   ============================================================ */

function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const on = () => setScrolled(window.scrollY > 8);
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  return (
    <header className={`nav${scrolled ? " scrolled" : ""}`}>
      <div className="wrap nav-inner">
        <a className="nav-brand" href="#" aria-label="Fitted">
          <img src="assets/logo_black.png" alt="Fitted" className="wordmark"/>
        </a>
        <nav className="nav-links" aria-label="Primary">
          <a href="#how">How it works</a>
          <a href="#stylist">AskFitted</a>
          <a href="#sell">Sell</a>
          <a href="#community">Community</a>
          <a href="#faq">FAQ</a>
        </nav>
        <div className="nav-cta">
          <a
            className="nav-login desktop-only"
            href="https://app.fittedcloset.com"
            data-analytics-event="open_web_app_click"
            data-analytics-cta="nav_login"
            data-analytics-target="web_app"
          >
            Log in
          </a>
          <a
            className="btn primary xs"
            href="https://app.fittedcloset.com"
            data-analytics-event="open_web_app_click"
            data-analytics-cta="nav_get_app"
            data-analytics-target="web_app"
          >
            Get the app
            <Icon name="arrow-right" size={14} stroke={2.2} className="arrow"/>
          </a>
        </div>
      </div>
    </header>
  );
}

function Hero({ heroCopy }) {
  const COPY = {
    digitized: {
      h1: <>Your closet, <em>digitized.</em></>,
      sub: "Snap your pieces, let AI catalog them, and turn your wardrobe into outfits, listings, and a value you can actually track. Join 750,000+ on Fitted.",
    },
    asset: {
      h1: <>Your wardrobe <em>is an asset.</em></>,
      sub: "Fitted scans every piece, tracks your closet's worth, and helps you style or sell with one tap. The smartest wardrobe app, in your pocket.",
    },
    feel: {
      h1: <>Get dressed <em>faster.</em></>,
      sub: "Build your digital closet in minutes. Then let AskFitted style you, FitPics inspire you, and the marketplace pay you back.",
    },
  };
  const C = COPY[heroCopy] || COPY.digitized;
  return (
    <section className="hero">
      <div className="wrap hero-grid">
        <div className="hero-text">
          <span className="hero-eyebrow">
            iOS · Android · Web <span className="dot"/>
          </span>
          <h1>{C.h1}</h1>
          <p className="hero-sub">{C.sub}</p>

          <div className="hero-cta">
            <StoreBadges analyticsCta="hero_download"/>
            <a
              className="btn ghost desktop-only"
              href="https://app.fittedcloset.com"
              data-analytics-event="open_web_app_click"
              data-analytics-cta="hero_open_web_app"
              data-analytics-target="web_app"
            >
              Open the web app
              <Icon name="arrow-right" size={16} className="arrow"/>
            </a>
          </div>

          <div className="hero-meta">
            <span className="hero-avatars" aria-hidden="true">
              <img src="assets/face1.jpg" alt=""/>
              <img src="assets/face2.jpg" alt=""/>
              <img src="assets/face3.jpg" alt=""/>
              <img src="assets/face4.jpg" alt=""/>
              <img src="assets/face5.jpg" alt=""/>
            </span>
            <span>750,000+ closets digitized</span>
            <span className="hero-stars">
              <span className="stars">★★★★★</span> 4.8
            </span>
          </div>
        </div>

        <HeroVisual/>
      </div>
    </section>
  );
}

function HeroVisual() {
  return (
    <div className="hero-visual" aria-hidden="true">
      <div className="hv-photo a">
        <img src="assets/fitpic_1.jpg" alt=""/>
      </div>
      <div className="hv-photo b">
        <img src="assets/fitpic_3.jpg" alt=""/>
      </div>

      <div className="hv-card top">
        <img className="thumb" src="assets/onb_supreme.png" alt=""/>
        <div className="meta">
          <span className="t1">Supreme Box Hoodie</span>
          <span className="t2">Cataloged in 1.2s</span>
        </div>
      </div>

      <div className="hv-card bot">
        <img className="thumb" src="assets/onb_loafers.png" alt=""/>
        <div className="meta">
          <span className="t1">Penny loafers</span>
          <span className="t2">Listed · 3 platforms</span>
        </div>
        <div className="price">$148</div>
      </div>

      <div className="hv-tag ai">
        <span className="gold-dot"/>
        AskFitted styled this
      </div>
    </div>
  );
}

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