const { useState: useStateRooms } = React;

const ROOMS = [
  {
    id: "R01",
    name: "SOLACE",
    kr: "솔라스",
    type: "INTIMATE",
    capacity: "2—4",
    price: 180,
    features: ["KARAOKE 4K", "PRIVATE BAR", "VELVET SEAT"],
    desc: "둘만의 시간을 위한 가장 작은 방. 벨벳과 낮은 조도.",
    accent: false,
  },
  {
    id: "R02",
    name: "ECHO",
    kr: "에코",
    type: "STANDARD",
    capacity: "4—6",
    price: 260,
    features: ["KARAOKE 4K", "WHISKY SHELF", "DJ CONSOLE"],
    desc: "셀렉트 위스키와 함께하는 중간 규모의 라운지.",
    accent: false,
  },
  {
    id: "R03",
    name: "VELVET",
    kr: "벨벳",
    type: "STANDARD",
    capacity: "4—6",
    price: 280,
    features: ["KARAOKE 4K", "MIRROR CEILING", "PRIVATE BAR"],
    desc: "거울 천장과 선형 조명. 에디토리얼한 실루엣.",
    accent: false,
  },
  {
    id: "R04",
    name: "OBSIDIAN",
    kr: "옵시디언",
    type: "SIGNATURE",
    capacity: "6—10",
    price: 480,
    features: ["DOLBY ATMOS", "SOMMELIER", "CHAMPAGNE TOWER", "DJ CONSOLE"],
    desc: "시그니처 라운지. 소믈리에 전담, 샴페인 타워 포함.",
    accent: true,
  },
  {
    id: "R05",
    name: "NEON",
    kr: "네온",
    type: "SIGNATURE",
    capacity: "6—10",
    price: 440,
    features: ["LED WALL", "DOLBY ATMOS", "SOMMELIER"],
    desc: "미디어 월 기반의 퍼포먼스 룸. DJ 셋팅 가능.",
    accent: false,
  },
  {
    id: "R06",
    name: "VOID",
    kr: "보이드",
    type: "PRESIDENTIAL",
    capacity: "10—18",
    price: 980,
    features: ["FULL CONCIERGE", "TERRACE", "DOLBY ATMOS", "CHEF TABLE"],
    desc: "프레지덴셜. 테라스와 셰프 테이블을 갖춘 최상위 룸.",
    accent: true,
  },
];

function RoomRow({ room, idx, onReserve }) {
  const [hover, setHover] = useStateRooms(false);
  return (
    <div
      data-stagger
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: "grid",
        gridTemplateColumns: "80px 1fr 1.3fr 140px 140px 180px",
        gap: 24,
        padding: "36px 32px",
        borderBottom: "1px solid rgba(0,0,0,0.12)",
        alignItems: "center",
        position: "relative",
        cursor: "pointer",
        background: hover ? "#0A0A0A" : "transparent",
        color: hover ? "#F4F2ED" : "#0A0A0A",
        transition: "background 240ms ease, color 240ms ease",
      }}
      onClick={() => onReserve(room)}
    >
      {/* num */}
      <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", opacity: hover ? 0.5 : 0.4 }}>
        {String(idx + 1).padStart(2, "0")} / {room.id}
      </div>

      {/* name */}
      <div>
        <div className="display" style={{ fontSize: 56, lineHeight: 0.9, letterSpacing: "-0.04em" }}>
          {hover ? <span className="display-italic" style={{fontStyle:"italic"}}>{room.name}</span> : room.name}
          {room.accent && <span style={{ color: "#2F4BFF", marginLeft: 8 }}>●</span>}
        </div>
        <div className="kr-sans" style={{ fontSize: 13, marginTop: 6, opacity: 0.55 }}>
          {room.kr} · {room.type}
        </div>
      </div>

      {/* desc + features */}
      <div>
        <p className="kr-sans" style={{ fontSize: 14, lineHeight: 1.4, marginBottom: 10, maxWidth: 360 }}>
          {room.desc}
        </p>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
          {room.features.map((f) => (
            <span key={f} className="mono" style={{
              fontSize: 9,
              letterSpacing: "0.16em",
              padding: "3px 8px",
              border: `1px solid ${hover ? "rgba(255,255,255,0.4)" : "rgba(0,0,0,0.3)"}`,
            }}>
              {f}
            </span>
          ))}
        </div>
      </div>

      {/* capacity */}
      <div>
        <div className="meta" style={{ marginBottom: 4 }}>GUESTS</div>
        <div className="display" style={{ fontSize: 32, letterSpacing: "-0.03em" }}>{room.capacity}</div>
      </div>

      {/* price */}
      <div>
        <div className="meta" style={{ marginBottom: 4 }}>FROM / 2HR</div>
        <div className="display tnum" style={{ fontSize: 32, letterSpacing: "-0.03em" }}>
          ₩{room.price}
          <span className="mono" style={{ fontSize: 10, marginLeft: 4, verticalAlign: "super", opacity: 0.6 }}>K</span>
        </div>
      </div>

      {/* cta */}
      <div style={{ display: "flex", justifyContent: "flex-end" }}>
        <span
          className="mono"
          style={{
            fontSize: 11,
            letterSpacing: "0.18em",
            padding: "12px 16px",
            border: "1px solid currentColor",
            background: hover ? "#2F4BFF" : "transparent",
            borderColor: hover ? "#2F4BFF" : "currentColor",
            color: hover ? "#F4F2ED" : "inherit",
            transition: "all 200ms ease",
            display: "inline-flex",
            alignItems: "center",
            gap: 10,
          }}
        >
          RESERVE <span style={{ fontSize: 14 }}>→</span>
        </span>
      </div>
    </div>
  );
}

function RoomsSection({ onReserve }) {
  const [filter, setFilter] = useStateRooms("ALL");
  const filters = ["ALL", "INTIMATE", "STANDARD", "SIGNATURE", "PRESIDENTIAL"];
  const rooms = filter === "ALL" ? ROOMS : ROOMS.filter((r) => r.type === filter);

  return (
    <section id="rooms" data-screen-label="02 Rooms" style={{ background: "#F4F2ED", color: "#0A0A0A", padding: "120px 0 80px" }}>
      {/* section header */}
      <div style={{ padding: "0 32px", marginBottom: 60 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 32 }}>
          <span className="meta">CHAPTER II · ROOMS</span>
          <span className="meta">12 CHAMBERS · 6 TYPOLOGIES</span>
        </div>
        <div style={{ height: 1, background: "currentColor", opacity: 0.2, marginBottom: 40 }} />

        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, alignItems: "end" }}>
          <h2 className="display sr-clip" style={{ fontSize: "clamp(80px, 12vw, 200px)", lineHeight: 0.85, letterSpacing: "-0.05em" }}>
            The<br/>
            <span className="display-italic" style={{ fontStyle: "italic" }}>Rooms.</span>
          </h2>
          <div style={{ paddingBottom: 24 }}>
            <p className="kr-display" style={{ fontSize: 22, lineHeight: 1.3, marginBottom: 16 }}>
              여섯 개의 방, 여섯 개의 무드.<br/>
              취향에 맞춰 공간을 고르세요.
            </p>
            <p className="sans-tight" style={{ fontSize: 13, lineHeight: 1.5, opacity: 0.65, maxWidth: 440 }}>
              Each room is a chapter in a longer night — from the most intimate booth to the presidential suite. Filter by typology below.
            </p>
          </div>
        </div>

        {/* filters */}
        <div style={{ display: "flex", gap: 8, marginTop: 48, flexWrap: "wrap" }}>
          {filters.map((f) => (
            <button
              key={f}
              onClick={() => setFilter(f)}
              className={`chip ${filter === f ? "active blue" : ""}`}
            >
              {f === "ALL" ? `ALL · ${ROOMS.length}` : `${f} · ${ROOMS.filter(r=>r.type===f).length}`}
            </button>
          ))}
        </div>
      </div>

      {/* row list */}
      <div data-stagger-parent style={{ borderTop: "1px solid rgba(0,0,0,0.2)" }}>
        {rooms.map((r, i) => (
          <RoomRow key={r.id} room={r} idx={i} onReserve={onReserve} />
        ))}
      </div>

      {rooms.length === 0 && (
        <div style={{ padding: 80, textAlign: "center", opacity: 0.5 }}>
          <span className="mono">NO RESULTS — TRY ANOTHER FILTER</span>
        </div>
      )}
    </section>
  );
}

window.RoomsSection = RoomsSection;
window.ROOMS = ROOMS;