// ============================================================
// HERO — direct, dark, VIP lounge energy
// ============================================================

function Hero({ onReserve }) {
  const heroRef = useRef(null);

  useEffect(() => {
    const el = heroRef.current;
    if (!el) return;
    setTimeout(() => el.classList.add("loaded"), 80);
    el.classList.add("in");
  }, []);

  useEffect(() => {
    const onScroll = () => {
      const el = heroRef.current?.querySelector(".hero-bg img");
      if (!el) return;
      el.classList.add("scrolled");
      const y = Math.min(window.scrollY, 800);
      el.style.transform = `scale(1.06) translateY(${y * 0.14}px)`;
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <section className="hero reveal" ref={heroRef} id="hero" data-screen-label="01 Hero">
      <div className="hero-bg">
        <img src={IMG.hero} alt="" />
      </div>

      <div className="container hero-inner">
        <div className="hero-top">
          <span className="hero-chip gold"><span className="live"></span>오늘 영업 중 · 강남구 청담</span>
          <span className="hero-chip">룸 잔여 <strong style={{color:'var(--gold-100)', marginLeft:6, fontFamily:'var(--font-display)', fontStyle:'italic'}}>6</strong></span>
          <span className="hero-chip">전담 MD · 보틀 직발주</span>
        </div>

        <h1 className="hero-title">
          <span style={{display:'block'}}>서울 <span className="accent">최상급</span></span>
          <span style={{display:'block'}}>프라이빗 라운지<span className="dot-end">.</span></span>
        </h1>

        <div className="hero-grid">
          <p className="hero-lede">
            블랙 마블, 전담 MD, 프라이빗 룸 6개. 지인 소개로만 입장 가능한 강남 최고 하이엔드 룸.
            오늘 밤 특별한 자리가 필요하다면 — <em>여기가 답입니다.</em>
          </p>
          <div className="hero-meta">
            <div className="m">
              <div className="k">오늘</div>
              <div className="v">6 rooms<small>AVAILABLE</small></div>
            </div>
            <div className="m">
              <div className="k">위치</div>
              <div className="v">청담<small>GANGNAM · SEOUL</small></div>
            </div>
            <div className="m">
              <div className="k">입장</div>
              <div className="v">소개제<small>BY REFERRAL</small></div>
            </div>
          </div>
        </div>

        <div className="hero-cta-row">
          <button className="btn btn-primary" onClick={onReserve} data-magnetic>지금 문의 <I.Arrow /></button>
          <button className="btn btn-ghost" data-magnetic>룸 보기</button>
        </div>
      </div>

      <div className="hero-scroll-hint">
        <span>Scroll</span>
        <span className="line"></span>
      </div>
    </section>
  );
}
window.Hero = Hero;