const { useState, useEffect, useRef } = React;

function Nav({ onReserve, dark }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <nav
      style={{
        position: "fixed",
        top: 0, left: 0, right: 0,
        zIndex: 50,
        padding: scrolled ? "14px 32px" : "24px 32px",
        background: scrolled
          ? (dark ? "rgba(10,10,10,0.85)" : "rgba(244,242,237,0.85)")
          : "transparent",
        backdropFilter: scrolled ? "blur(12px)" : "none",
        borderBottom: scrolled ? "1px solid rgba(255,255,255,0.1)" : "1px solid transparent",
        transition: "all 260ms ease",
        color: dark ? "#F4F2ED" : "#0A0A0A",
        display: "grid",
        gridTemplateColumns: "1fr auto 1fr",
        alignItems: "center",
        gap: 16,
      }}
    >
      <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
        <a href="#top" style={{ display: "flex", alignItems: "baseline", gap: 8, textDecoration: "none", color: "inherit" }}>
          <span className="display" style={{ fontSize: 28, fontStyle: "italic" }}>N</span>
          <span className="mono" style={{ fontSize: 10, letterSpacing: "0.2em" }}>NOIR/CLUB</span>
        </a>
        <span className="meta" style={{ opacity: 0.6, color: "inherit" }}>— EST. MMXXV · SEOUL</span>
      </div>

      <div style={{ display: "flex", gap: 28, justifyContent: "center" }}>
        {[
          ["01", "ROOMS", "#rooms"],
          ["02", "SELECT", "#select"],
          ["03", "GALLERY", "#gallery"],
          ["04", "VISIT", "#visit"],
        ].map(([n, label, href]) => (
          <a key={label} href={href} className="mono" style={{
            fontSize: 10,
            letterSpacing: "0.18em",
            textDecoration: "none",
            color: "inherit",
            display: "flex",
            alignItems: "baseline",
            gap: 6,
          }}>
            <span style={{ opacity: 0.45 }}>{n}</span>
            <span>{label}</span>
          </a>
        ))}
      </div>

      <div style={{ display: "flex", justifyContent: "flex-end", alignItems: "center", gap: 14 }}>
        <span className="mono" style={{ fontSize: 10, letterSpacing: "0.18em", opacity: 0.55 }}>KR · EN</span>
        <button onClick={onReserve} className="btn primary" style={{
          padding: "12px 18px",
          background: "#F4F2ED",
          color: "#0A0A0A",
          borderColor: "#F4F2ED",
        }}>
          RESERVE <span style={{ fontSize: 14 }}>→</span>
        </button>
      </div>
    </nav>
  );
}

function Hero({ onReserve }) {
  const [time, setTime] = useState("");
  useEffect(() => {
    const tick = () => {
      const d = new Date();
      const hh = String(d.getHours()).padStart(2, "0");
      const mm = String(d.getMinutes()).padStart(2, "0");
      const ss = String(d.getSeconds()).padStart(2, "0");
      setTime(`${hh}:${mm}:${ss}`);
    };
    tick();
    const iv = setInterval(tick, 1000);
    return () => clearInterval(iv);
  }, []);

  return (
    <section
      id="top"
      data-screen-label="01 Hero"
      style={{
        position: "relative",
        minHeight: "100vh",
        color: "#F4F2ED",
        overflow: "hidden",
        isolation: "isolate",
      }}
    >
      {/* full-bleed background image */}
      <img
        src="uploads/u1862462214_premium_VIP_noraebang_room_black_interior_marble__b04c313a-c21e-41d5-9691-531f59d82999_0.png"
        alt="NOIR/CLUB"
        style={{
          position: "absolute", inset: 0,
          width: "100%", height: "100%", objectFit: "cover",
          zIndex: -2,
          filter: "grayscale(0.3) contrast(1.08) brightness(0.72)",
        }}
      />
      {/* gradient scrim for readability */}
      <div style={{
        position: "absolute", inset: 0, zIndex: -1,
        background: "linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.25) 30%, rgba(10,10,10,0.3) 65%, rgba(10,10,10,0.9) 100%)",
      }} />
      {/* subtle grain noise */}
      <div className="noise" style={{ zIndex: -1, opacity: 0.08, mixBlendMode: "overlay" }} />

      {/* content */}
      <div style={{
        position: "relative",
        minHeight: "100vh",
        padding: "120px 32px 40px",
        display: "flex",
        flexDirection: "column",
      }}>
        {/* top meta strip */}
        <div style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          marginBottom: 32,
        }}>
          <span className="meta" style={{ color: "rgba(255,255,255,0.7)" }}>ISSUE 07 · SPRING SS26 · KARAOKE × HIGHPUBLIC</span>
          <span className="meta tnum" style={{ color: "rgba(255,255,255,0.7)" }}>{time} KST · 03° · SEOUL/GN</span>
          <span className="meta" style={{ color: "rgba(255,255,255,0.7)" }}>PRIVATE MEMBERS · STRICTLY 19+</span>
        </div>

        {/* welcome rule */}
        <div style={{ display: "flex", alignItems: "flex-start", gap: 40, marginBottom: "auto" }}>
          <span className="mono" style={{ fontSize: 11, letterSpacing: "0.2em", color: "rgba(255,255,255,0.6)" }}>
            001 / WELCOME
          </span>
          <div style={{ flex: 1, height: 1, background: "rgba(255,255,255,0.25)", marginTop: 8 }} />
          <span className="mono" style={{ fontSize: 11, letterSpacing: "0.2em", color: "rgba(255,255,255,0.6)" }}>
            A HIGH—FASHION NIGHTLIFE EDITORIAL
          </span>
        </div>

        {/* giant word mark — bottom left */}
        <div style={{ marginTop: 80 }}>
          <div className="mono" data-word-reveal style={{
            fontSize: 12, letterSpacing: "0.28em",
            color: "rgba(255,255,255,0.75)",
            marginBottom: 14,
          }}>
            KARAOKE <span style={{ color: "#2F4BFF" }}>×</span> HIGHPUBLIC <span style={{opacity:0.5}}>— 가라오케 · 하이퍼블릭</span>
          </div>
          <h1 className="display" style={{
            fontSize: "clamp(100px, 19vw, 320px)",
            lineHeight: 0.82,
            letterSpacing: "-0.05em",
            margin: 0,
            textShadow: "0 2px 30px rgba(0,0,0,0.4)",
          }}>
            <span data-word-reveal>NOIR</span><span data-word-reveal style={{ color: "#2F4BFF" }}>/</span>
            <span data-word-reveal className="display-italic" style={{ fontStyle: "italic", fontWeight: 300 }}>CLUB</span>
            <span data-word-reveal style={{ color: "#2F4BFF" }}>.</span>
          </h1>
        </div>

        {/* bottom row: tagline + chapters + cta */}
        <div style={{
          marginTop: 40,
          display: "grid",
          gridTemplateColumns: "repeat(12, 1fr)",
          gap: 24,
          alignItems: "end",
        }}>
          <div style={{ gridColumn: "1 / span 4" }}>
            <p className="kr-display" style={{ fontSize: 22, lineHeight: 1.3, marginBottom: 10, textShadow: "0 1px 8px rgba(0,0,0,0.4)" }}>
              밤의 가장 높은 해상도.<br/>
              <span style={{ fontStyle: "italic", color: "rgba(255,255,255,0.75)" }}>노래, 주류, 그리고 침묵 사이.</span>
            </p>
            <p className="sans-tight" style={{ fontSize: 12, lineHeight: 1.5, color: "rgba(255,255,255,0.65)", maxWidth: 340 }}>
              A members-only <em style={{fontStyle:"italic", color:"#F4F2ED"}}>KARAOKE · HIGHPUBLIC</em> lounge for collected spirits and private rooms. 가라오케 · 하이퍼블릭. Strictly curated, strictly nocturnal.
            </p>
          </div>

          <div style={{ gridColumn: "6 / span 4" }}>
            <div className="meta" style={{ marginBottom: 10, color: "rgba(255,255,255,0.6)" }}>CHAPTERS</div>
            <ol style={{ listStyle: "none", padding: 0 }}>
              {[
                ["I.", "ROOMS", "12 chambers"],
                ["II.", "SELECT", "Cellar · vol.01"],
                ["III.", "GALLERY", "Archive of nights"],
                ["IV.", "VISIT", "Gangnam · 22—06"],
              ].map(([i, t, sub]) => (
                <li key={t} style={{
                  display: "grid",
                  gridTemplateColumns: "28px 1fr auto",
                  gap: 8,
                  padding: "7px 0",
                  borderBottom: "1px solid rgba(255,255,255,0.18)",
                  alignItems: "baseline",
                }}>
                  <span className="mono" style={{ fontSize: 10, color: "rgba(255,255,255,0.55)" }}>{i}</span>
                  <span className="sans-tight" style={{ fontSize: 14, letterSpacing: "-0.01em" }}>{t}</span>
                  <span className="mono" style={{ fontSize: 10, color: "rgba(255,255,255,0.55)" }}>{sub}</span>
                </li>
              ))}
            </ol>
          </div>

          <div style={{ gridColumn: "11 / span 2", display: "flex", flexDirection: "column", gap: 12, alignItems: "flex-end" }}>
            <div style={{
              width: 72, height: 72,
              border: "1px solid rgba(255,255,255,0.5)",
              borderRadius: "50%",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              position: "relative",
            }}>
              <span className="mono" style={{ fontSize: 10, letterSpacing: "0.14em" }}>SS 26</span>
              <div style={{
                position: "absolute",
                inset: -4,
                border: "1px solid #2F4BFF",
                borderRadius: "50%",
                animation: "spin 12s linear infinite",
                borderTopColor: "transparent",
                borderRightColor: "transparent",
              }} />
            </div>
            <button onClick={onReserve} className="btn blue" style={{ width: "100%" }}>
              RESERVE →
            </button>
          </div>
        </div>

        {/* scroll hint */}
        <div style={{
          display: "flex",
          alignItems: "center",
          gap: 12,
          opacity: 0.65,
          marginTop: 32,
        }}>
          <span className="mono" style={{ fontSize: 10, letterSpacing: "0.2em" }}>SCROLL</span>
          <div style={{ width: 40, height: 1, background: "currentColor" }} />
          <span className="mono" style={{ fontSize: 10, letterSpacing: "0.2em" }}>CH I · ROOMS</span>
        </div>
      </div>

      <style>{`
        @keyframes spin { to { transform: rotate(360deg); } }
      `}</style>
    </section>
  );
}

window.Nav = Nav;
window.Hero = Hero;