// tl-reserve.jsx — Reservation / contact view (links out to Naver, no in-site booking)
function Reserve({ go }) {
  const channels = [
    { icon: "cal",   k: "네이버 예약", v: "날짜·시간 선택 후 바로 예약", cta: "네이버로 예약하기", href: CONTACT.naver, ext: true, primary: true },
    { icon: "phone", k: CONTACT.telLabel, v: CONTACT.tel, cta: "전화 걸기", href: `tel:${CONTACT.tel}`, ext: false },
    { icon: "mail",  k: "이메일 문의", v: CONTACT.email, cta: "메일 보내기", href: `mailto:${CONTACT.email}`, ext: false },
  ];
  return (
    <main className="tl-wrap" style={{ paddingTop: 52, paddingBottom: 90 }}>
      <div style={{ maxWidth: 600 }}>
        <Kicker>RESERVE · 예약·문의</Kicker>
        <h1 style={{ fontFamily: "var(--display)", fontWeight: 800, fontSize: "clamp(32px,4.6vw,54px)", letterSpacing: "-0.035em", lineHeight: 1.12, marginTop: 18, color: "var(--ink)" }}>
          원데이클래스 예약
        </h1>
        <p style={{ fontSize: "clamp(16px,1.5vw,18.5px)", lineHeight: 1.75, color: "var(--muted)", marginTop: 16 }}>
          예약제로 운영됩니다. 네이버 예약에서 원하시는 날짜와 시간을 선택해 주세요. 문의는 전화·이메일로도 편하게 주세요.
        </p>
      </div>

      {/* PRIMARY NAVER CTA */}
      <a href={CONTACT.naver} target="_blank" rel="noreferrer" className="tl-naver-cta">
        <div className="tl-naver-glow"></div>
        <div style={{ position: "relative", display: "flex", flexDirection: "column", gap: 6 }}>
          <span style={{ fontFamily: "var(--mono)", fontSize: 12, letterSpacing: "0.16em", textTransform: "uppercase", color: "color-mix(in oklab,#fff 80%,transparent)" }}>NAVER BOOKING</span>
          <span style={{ fontFamily: "var(--display)", fontWeight: 800, fontSize: "clamp(24px,3vw,34px)", letterSpacing: "-0.03em", color: "#fff", lineHeight: 1.15 }}>네이버 예약으로 신청하기</span>
          <span style={{ fontSize: 15, color: "color-mix(in oklab,#fff 78%,transparent)" }}>날짜·시간 선택 후 1분이면 예약 완료</span>
        </div>
        <span className="tl-naver-arrow"><Icon name="arrow" size={26} /></span>
      </a>

      {/* CHANNELS */}
      <div className="tl-reserve-grid">
        {channels.map((c) => (
          <a key={c.k} href={c.href} target={c.ext ? "_blank" : undefined} rel={c.ext ? "noreferrer" : undefined} className="tl-channel">
            <span className="tl-channel-ic" style={c.primary ? { background: "var(--accent)", color: "#fff", borderColor: "transparent" } : {}}><Icon name={c.icon} size={22} /></span>
            <span style={{ flex: 1, minWidth: 0 }}>
              <span style={{ display: "block", fontSize: 13, color: "var(--muted)" }}>{c.k}</span>
              <span style={{ display: "block", fontSize: 17, fontWeight: 700, color: "var(--ink)", letterSpacing: "-0.02em", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{c.v}</span>
            </span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 14, fontWeight: 700, color: "var(--accent-ink)", whiteSpace: "nowrap" }} className="tl-channel-cta">{c.cta}<Icon name="arrow" size={16} /></span>
          </a>
        ))}

        {/* SIDE INFO */}
        <aside className="tl-info-card tl-reserve-info">
          <h3 style={{ fontSize: 16, fontWeight: 700, color: "var(--ink)" }}>클래스 안내</h3>
          <ul style={{ listStyle: "none", padding: 0, margin: "12px 0 0", display: "grid", gap: 10 }}>
            {[`비용 ${CLASS.priceLabel} · ${CLASS.meal}`, `${CLASS.day} ${CLASS.time}`, `${CLASS.capacity} (소수정예)`, CLASS.place].map((t) => (
              <li key={t} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 14.5, lineHeight: 1.55, color: "var(--ink)" }}>
                <span style={{ color: "var(--accent-ink)", marginTop: 1 }}><Icon name="check" size={16} /></span>{t}
              </li>
            ))}
          </ul>
        </aside>
      </div>
    </main>
  );
}

Object.assign(window, { Reserve });