const { useState: useStateSelect } = React;

const SELECT_DATA = {
  WHISKY: [
    { name: "Macallan 25 Sherry Oak", kr: "맥캘란 25년", origin: "SCOTLAND · SPEYSIDE", price: 2800, year: "NAS" },
    { name: "Yamazaki 18", kr: "야마자키 18년", origin: "JAPAN · OSAKA", price: 1900, year: "NAS" },
    { name: "Hibiki 21", kr: "히비키 21년", origin: "JAPAN · BLEND", price: 2400, year: "NAS" },
    { name: "Bowmore 30", kr: "보모어 30년", origin: "SCOTLAND · ISLAY", price: 4200, year: "NAS" },
    { name: "Ardbeg Uigeadail", kr: "아드벡 우가달", origin: "SCOTLAND · ISLAY", price: 420, year: "NAS" },
  ],
  CHAMPAGNE: [
    { name: "Dom Pérignon P2 2004", kr: "돔 페리뇽 P2", origin: "FRANCE · ÉPERNAY", price: 1800, year: "2004" },
    { name: "Krug Grande Cuvée", kr: "크룩 그랑 퀴베", origin: "FRANCE · REIMS", price: 980, year: "170ÈME" },
    { name: "Louis Roederer Cristal", kr: "크리스탈", origin: "FRANCE · REIMS", price: 1450, year: "2015" },
    { name: "Salon Blanc de Blancs", kr: "살롱", origin: "FRANCE · LE MESNIL", price: 3200, year: "2012" },
  ],
  WINE: [
    { name: "Château Margaux", kr: "샤또 마고", origin: "FRANCE · BORDEAUX", price: 2100, year: "2015" },
    { name: "Opus One", kr: "오퍼스 원", origin: "USA · NAPA", price: 860, year: "2019" },
    { name: "Sassicaia", kr: "사시카이아", origin: "ITALY · TUSCANY", price: 720, year: "2018" },
  ],
  SAKE: [
    { name: "Juyondai Ryusen", kr: "쥬욘다이 류센", origin: "JAPAN · YAMAGATA", price: 890, year: "—" },
    { name: "Dassai Beyond", kr: "닷사이 비욘드", origin: "JAPAN · YAMAGUCHI", price: 1200, year: "—" },
    { name: "Hiroki Junmai Daiginjo", kr: "히로키 준마이 다이긴죠", origin: "JAPAN · FUKUSHIMA", price: 420, year: "—" },
  ],
};

function SelectSection() {
  const cats = Object.keys(SELECT_DATA);
  const [cat, setCat] = useStateSelect(cats[0]);
  const items = SELECT_DATA[cat];

  return (
    <section id="select" data-screen-label="03 Select" style={{
      background: "#0A0A0A",
      color: "#F4F2ED",
      padding: "120px 0 80px",
      position: "relative",
    }}>
      {/* header */}
      <div style={{ padding: "0 32px", marginBottom: 60 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 32 }}>
          <span className="meta">CHAPTER III · SELECT</span>
          <span className="meta">CELLAR · VOL. 01</span>
        </div>
        <div style={{ height: 1, background: "currentColor", opacity: 0.2 }} />

        <div style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 40, alignItems: "end", marginTop: 40 }}>
          <h2 className="display sr-clip" style={{ fontSize: "clamp(80px, 12vw, 200px)", lineHeight: 0.85, letterSpacing: "-0.05em" }}>
            The <span className="display-italic" style={{ fontStyle: "italic" }}>Select.</span>
          </h2>
          <p className="kr-display sr-skew d200" style={{ fontSize: 22, lineHeight: 1.3, paddingBottom: 24 }}>
            셀렉트 주류.<br/>
            소믈리에가 고른 한정 셀러.
          </p>
        </div>
      </div>

      {/* category tabs */}
      <div style={{ padding: "0 32px", marginBottom: 32, display: "flex", gap: 0, borderTop: "1px solid rgba(255,255,255,0.2)", borderBottom: "1px solid rgba(255,255,255,0.2)" }}>
        {cats.map((c, i) => (
          <button
            key={c}
            onClick={() => setCat(c)}
            style={{
              flex: 1,
              padding: "24px 16px",
              background: cat === c ? "#2F4BFF" : "transparent",
              color: cat === c ? "#F4F2ED" : "#F4F2ED",
              border: "none",
              borderLeft: i === 0 ? "none" : "1px solid rgba(255,255,255,0.15)",
              cursor: "pointer",
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 11,
              letterSpacing: "0.2em",
              textAlign: "left",
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
              transition: "all 180ms ease",
            }}
          >
            <span>
              <span style={{ opacity: 0.5, marginRight: 12 }}>{String(i + 1).padStart(2, "0")}</span>
              {c}
            </span>
            <span style={{ opacity: 0.6 }}>{SELECT_DATA[c].length} ITEMS</span>
          </button>
        ))}
      </div>

      {/* items list */}
      <div style={{ padding: "0 32px" }} data-stagger-parent>
        {items.map((it, i) => (
          <div key={it.name} data-stagger style={{ transitionDelay: `${i * 60}ms`,
            display: "grid",
            gridTemplateColumns: "60px 2fr 1.5fr 120px 120px",
            gap: 24,
            padding: "28px 0",
            borderBottom: "1px solid rgba(255,255,255,0.15)",
            alignItems: "baseline",
          }}
          >
            <span className="mono" style={{ fontSize: 10, letterSpacing: "0.14em", opacity: 0.4 }}>
              {String(i + 1).padStart(3, "0")}
            </span>
            <div>
              <div className="display" style={{ fontSize: 32, letterSpacing: "-0.03em", lineHeight: 1 }}>
                {it.name}
              </div>
              <div className="kr-sans" style={{ fontSize: 12, marginTop: 4, opacity: 0.6 }}>
                {it.kr}
              </div>
            </div>
            <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", opacity: 0.7 }}>
              {it.origin}
            </div>
            <div className="mono" style={{ fontSize: 11, letterSpacing: "0.14em", opacity: 0.7 }}>
              VTG · {it.year}
            </div>
            <div className="display tnum" style={{ fontSize: 28, letterSpacing: "-0.03em", textAlign: "right" }}>
              ₩{it.price}<span className="mono" style={{ fontSize: 10, marginLeft: 2, verticalAlign: "super", opacity: 0.6 }}>K</span>
            </div>
          </div>
        ))}

        <div style={{ marginTop: 40, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <p className="kr-sans" style={{ fontSize: 12, opacity: 0.5, maxWidth: 480 }}>
            * 가격은 1병 기준이며, 시즌에 따라 달라질 수 있습니다. 소믈리에 페어링은 방 예약 시 별도 문의.
          </p>
          <button className="btn" style={{ color: "#F4F2ED", borderColor: "#F4F2ED" }}>
            FULL CELLAR (PDF) <span style={{ fontSize: 14 }}>→</span>
          </button>
        </div>
      </div>
    </section>
  );
}

window.SelectSection = SelectSection;