// Hero: literal headline, no fake stats, clear primary CTA

function Hero() {
  const ref = React.useRef(null);
  const y = useScrollY();
  const p = Math.min(1, y / (window.innerHeight || 900));

  const tMega = `translate3d(${-p*200}px, ${-p*60}px, 0) scale(${1 - p*0.06})`;
  const tTiles = `translate3d(0, ${-p*140}px, 0)`;
  const tHead = `translate3d(0, ${-p*40}px, 0)`;
  const heroOpacity = 1 - p*0.9;

  return (
    <section ref={ref} id="top" className="relative min-h-screen overflow-hidden" data-screen-label="Hero">
      <div className="absolute inset-0 aurora-bg"></div>

      {/* Mobile tile cluster — 4 tiles, one in each corner */}
      <div className="absolute inset-0 pointer-events-none md:hidden" style={{ transform: tTiles }}>
        {[
          { src: "assets/hero/content-house.jpg", right: "-8%",  top: "6%",    w: 125, h: 165, rot: 8 },
          { src: "assets/hero/car-pov.jpg",       left: "-6%",   top: "30%",   w: 95,  h: 130, rot: -10 },
          { src: "assets/hero/reel-bts.jpg",      left: "-6%",   bottom: "8%", w: 115, h: 155, rot: -5 },
          { src: "assets/hero/editorial.jpg",     right: "-4%",  bottom: "26%", w: 95,  h: 130, rot: 7 },
        ].map((t, i) => (
          <div key={i} className="absolute overflow-hidden" style={{
            left: t.left, right: t.right, top: t.top, bottom: t.bottom,
            width: t.w, height: t.h,
            transform: `rotate(${t.rot}deg)`,
            borderRadius: 8,
            boxShadow: "0 16px 40px rgba(0,0,0,0.6)",
          }}>
            <img src={t.src} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", opacity: 0.5 }} />
            <div className="absolute inset-0" style={{ background: "rgba(6,6,6,0.55)", mixBlendMode: "multiply", pointerEvents: "none" }}></div>
          </div>
        ))}
      </div>

      <div className="absolute inset-0 pointer-events-none hidden md:block" style={{ transform: tTiles }}>
        {[
          { src: "assets/hero/creator-shoot.jpg", left: "4%",  top: "22%", w: 180, h: 240, rot: -8 },
          { src: "assets/hero/content-house.jpg", right: "6%", top: "18%", w: 220, h: 300, rot: 6 },
          { src: "assets/hero/reel-bts.jpg",      left: "12%", bottom: "12%", w: 200, h: 260, rot: 4 },
          { src: "assets/hero/editorial.jpg",     right: "10%", bottom: "18%", w: 160, h: 210, rot: -4 },
          { src: "assets/hero/car-pov.jpg",       left: "30%",  top: "6%",   w: 140, h: 185, rot: 11 },
          { src: "assets/hero/gym-mirror.jpg",    right: "32%", bottom: "8%", w: 145, h: 190, rot: -9 },
        ].map((t, i) => (
          <div key={i} className="absolute overflow-hidden" style={{
            left: t.left, right: t.right, top: t.top, bottom: t.bottom,
            width: t.w, height: t.h,
            transform: `rotate(${t.rot}deg)`,
            borderRadius: 8,
            boxShadow: "0 20px 60px rgba(0,0,0,0.6)",
          }}>
            <img src={t.src} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", opacity: 0.55 }} />
            {/* dark overlay so tiles recede behind the headline */}
            <div className="absolute inset-0" style={{ background: "rgba(6,6,6,0.55)", mixBlendMode: "multiply", pointerEvents: "none" }}></div>
          </div>
        ))}
      </div>

      <div className="relative z-10 max-w-[1600px] mx-auto px-6 md:px-10 pt-40">
        <div className="flex justify-between items-end gap-8 mb-24" style={{ opacity: heroOpacity }}>
          <div className="flex flex-col gap-2">
            <span className="text-[10px] tracking-[0.4em] uppercase text-[rgba(232,160,160,0.6)]">— Full-Service Creator Management</span>
            <span className="text-[10px] tracking-[0.4em] uppercase text-white/25">Palm Beach · Los Angeles</span>
          </div>
          <div className="text-right hidden md:flex flex-col gap-1">
            <span className="text-[10px] tracking-[0.4em] uppercase text-white/25">Now Booking</span>
            <a href="#cta" className="text-[10px] tracking-[0.4em] uppercase text-[#E8A0A0] hover:underline">Book A Call →</a>
          </div>
        </div>

        <div className="relative" style={{ transform: tHead, opacity: heroOpacity }}>
          <h1 className="font-display font-semibold text-[#f0ece8] leading-[0.92] tracking-[-0.03em]" style={{ fontSize: "clamp(40px, 8.2vw, 148px)" }}>
            <span className="block">
              <WordReveal text="Creator management," />
            </span>
            <span className="block">
              <span className="italic font-light text-[#7a7a7a]">
                <WordReveal text="done properly." delayStep={60} />
              </span>
              <span className="inline-block w-[0.4em]"></span>
              <span className="inline-block align-middle w-[240px] h-[2px] bg-gradient-to-r from-transparent via-[#E8A0A0] to-transparent"></span>
            </span>
          </h1>

          <div className="mt-14 flex flex-col md:flex-row md:items-end justify-between gap-10 reveal d3">
            <p className="text-[#f0ece8]/80 font-light leading-relaxed max-w-xl text-[17px]">
              Full-service management and marketing for OnlyFans creators. <span className="text-[#f0ece8]">Chat, social, content, growth</span> — handled by a real team, built on advanced technology no other agency has.
            </p>
            <div className="flex items-center gap-4">
              <BtnArrow href="#cta">Book a Call</BtnArrow>
              <BtnArrow variant="ghost" href="#services">What you get</BtnArrow>
            </div>
          </div>
        </div>
      </div>

      {/* Scroll hint */}
      <div className="absolute left-1/2 -translate-x-1/2 bottom-24 flex flex-col items-center gap-3" style={{ opacity: heroOpacity }}>
        <span className="text-[9px] tracking-[0.4em] uppercase text-white/30">Scroll</span>
        <div className="w-px h-12 bg-white/10 relative overflow-hidden">
          <span className="absolute left-0 right-0 top-0 h-4 bg-[#E8A0A0] scroll-hint-dot"></span>
        </div>
      </div>
    </section>
  );
}

window.Hero = Hero;