/* ============================================================
   TRYONME Landing — Hero section
   ============================================================ */

function Hero() {
  const [mouse, setMouse] = useState({ x: 0.5, y: 0.5 });
  const heroRef = useRef(null);

  const onMove = (e) => {
    if (!heroRef.current) return;
    const r = heroRef.current.getBoundingClientRect();
    setMouse({ x: (e.clientX - r.left) / r.width, y: (e.clientY - r.top) / r.height });
  };

  return (
    <section className="hero" ref={heroRef} onMouseMove={onMove}>
      <header className="hero__nav">
        <div className="hero__nav-left">
          <Misreg text="TRYONME" className="hero__mark" />
          <span className="chip chip--blue" style={{ marginLeft: 14 }}>BETA · 2026</span>
        </div>
        <nav className="hero__nav-links">
          <a href="#how">How it works</a>
          <a href="#demo">Demo</a>
          <a href="#extension">Extension</a>
          <a href="#faq">FAQ</a>
          <a href="#download" className="btn btn--ghost" style={{ padding: "10px 16px", fontSize: 13 }}>
            GET THE APP
          </a>
        </nav>
      </header>

      <div
        className="hero__blob"
        style={{
          left: `calc(${mouse.x * 100}% - 280px)`,
          top: `calc(${mouse.y * 100}% - 280px)`,
        }}
      />

      <div className="hero__inner">
        <div className="hero__copy">
          <div className="hero__eyebrow">
            <span className="chip chip--filled">VIRTUAL TRY-ON</span>
            <span className="chip">SCREENSHOT → OUTFIT</span>
          </div>

          <h1 className="hero__headline">
            <span className="hero__headline-row stagger" style={{ "--i": 0 }}>
              <Misreg text="SEE IT." />
            </span>
            <span className="hero__headline-row stagger" style={{ "--i": 1 }}>
              <Misreg text="SNAP IT." color="pink" />
            </span>
            <span className="hero__headline-row stagger" style={{ "--i": 2 }}>
              <Misreg text="WEAR IT." />
            </span>
          </h1>

          <p className="hero__lede">
            See any outfit on <em>you</em> before you swipe. Screenshot a fit from the feed,
            triple-tap your phone, and TryOnMe drops it onto your photo in seconds.
          </p>

          <div className="hero__cta">
            <a href="#download" className="btn">
              <svg className="icon" viewBox="0 0 24 24" fill="currentColor"><path d="M16.5 1c.7 1.6.5 3.2-.5 4.4-1 1.2-2.6 1.9-4 1.7-.2-1.5.5-3 1.4-4.1A5.6 5.6 0 0 1 16.5 1zm4 17.6c-.5 1.2-1.1 2.3-1.9 3.4-1 1.5-2.5 3.4-4.4 3.4-1.6 0-2-.9-4.1-.9-2 0-2.6.9-4 .9-1.9 0-3.4-1.7-4.4-3.2-2.7-4-3-8.7-1.3-11.2 1.2-1.7 3-2.7 4.9-2.7 1.7 0 2.7.8 4 .8 1.3 0 2.1-.9 4.1-.9 1.6 0 3.2.8 4.4 2.2-3.8 2-3.2 7.4 1.7 8.2z"/></svg>
              DOWNLOAD FOR iOS
            </a>
            <a href="#extension" className="btn btn--blue">
              <svg className="icon" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 4a6 6 0 0 1 5.2 3H10a3 3 0 0 0-2.5 4.7L5.4 9.7A6 6 0 0 1 12 6zm-7.8 8.2 3.4 5.8a3 3 0 0 0 2.6 1.5l3.4-5.9a3 3 0 0 1-2.6 1.4 3 3 0 0 1-2.8-2zM18 13a6 6 0 0 1-7.6 5.7l3-5.2a3 3 0 0 0 .6-1.7 3 3 0 0 0-.7-2H18z"/></svg>
              ADD TO CHROME
            </a>
          </div>

          <div className="hero__stats">
            <div className="hero__stat">
              <div className="hero__stat-num">5</div>
              <div className="hero__stat-lbl">FREE TRIES<br/>ON SIGN UP</div>
            </div>
            <div className="hero__stat-divider" />
            <div className="hero__stat">
              <div className="hero__stat-num">3s</div>
              <div className="hero__stat-lbl">PER<br/>TRY-ON</div>
            </div>
            <div className="hero__stat-divider" />
            <div className="hero__stat">
              <div className="hero__stat-num">∞</div>
              <div className="hero__stat-lbl">FITS FROM<br/>ANY SITE</div>
            </div>
          </div>
        </div>

        <div className="hero__phone-wrap">
          <PhoneFrame mouse={mouse} />
          <div className="hero__sticker hero__sticker--1">
            <span className="hand">no green-screen,<br/>no studio. just you.</span>
            <svg viewBox="0 0 80 40" width="80" height="40" style={{ marginTop: 4 }}>
              <path d="M5 8 C 30 38, 50 38, 70 18" stroke="var(--blue)" strokeWidth="2" fill="none" strokeLinecap="round"/>
              <path d="M70 18 L 64 22 M 70 18 L 66 12" stroke="var(--blue)" strokeWidth="2" fill="none" strokeLinecap="round"/>
            </svg>
          </div>
          <div className="hero__sticker hero__sticker--2 chip chip--yellow">
            ★ AS SEEN ON FYP
          </div>
        </div>
      </div>
    </section>
  );
}

function PhoneFrame({ mouse }) {
  const tilt = `rotate(${(mouse.x - 0.5) * 4}deg)`;
  return (
    <div className="phone" style={{ transform: tilt }}>
      <div className="phone__frame">
        <div className="phone__notch" />
        <div className="phone__screen">
          <div className="phone__statusbar">
            <span>9:41</span>
            <span>● ● ●</span>
          </div>
          <div className="phone__yellow">
            <div className="phone__person">
              <HalftonePortrait w={220} h={300} highlight="var(--pink)" shadow="var(--blue)" />
            </div>
            <div className="phone__outfit">
              <div className="phone__outfit-thumb">
                <svg viewBox="0 0 60 80" width="40" height="56">
                  <path d="M10 18 L20 8 H40 L50 18 V40 L42 38 V70 H18 V38 L10 40 Z" fill="var(--pink)" stroke="var(--blue)" strokeWidth="2" strokeLinejoin="round"/>
                  <circle cx="30" cy="20" r="2" fill="var(--blue)"/>
                </svg>
              </div>
              <div>
                <div className="label" style={{ fontSize: 10, color: "var(--pink)" }}>FROM SCREENSHOT</div>
                <div className="display" style={{ fontSize: 18, color: "var(--blue)", lineHeight: 1 }}>VINTAGE TEE</div>
              </div>
            </div>
            <div className="phone__scan" />
          </div>
        </div>
      </div>
    </div>
  );
}

window.Hero = Hero;
window.PhoneFrame = PhoneFrame;