// ============================================================
// EXPERIENCE — Day/Night modes with model images
// ============================================================

function Experience() {
  const [mode, setMode] = useState("night");
  const ref = useReveal();

  const data = {
    day: {
      img: IMG.modelE,
      tag: "Daytime · 14:00–20:00",
      caption: <>After noon<span className="kr">낮 시간 프라이빗 미팅</span></>,
      title: <>데이 타임<span className="en">Private Meeting</span></>,
      lede: "조용한 낮 시간대 비즈니스 미팅, 소규모 모임. 전담 스탭과 케이터링 서비스 제공.",
      features: [
        { num: "01", t: "풀케이터링", d: "음료 · 스낵 · 식사 풀서비스" },
        { num: "02", t: "전담 스탭", d: "룸 전담 1명 배치" },
        { num: "03", t: "비즈니스 세팅", d: "모니터 · HDMI · 화이트보드" },
        { num: "04", t: "완전 프라이빗", d: "타 손님 동선 완전 분리" },
      ],
      cta: "낮 시간 문의",
    },
    night: {
      img: IMG.modelA,
      tag: "Night · 20:00–",
      caption: <>After dark<span className="kr">최상급 나이트 경험</span></>,
      title: <>나이트 모드<span className="en">The Night Experience</span></>,
      lede: "전담 MD, 보틀 직발주, 프라이빗 룸. 강남에서 가장 퀄리티 높은 밤을 보장합니다.",
      features: [
        { num: "01", t: "전담 MD", d: "1:1 전담 매니저 배치" },
        { num: "02", t: "보틀 서비스", d: "위스키 · 샴페인 직발주" },
        { num: "03", t: "사운드 시스템", d: "하이엔드 오디오 풀세팅" },
        { num: "04", t: "포토 존", d: "전문 조명 + 포토그래퍼 옵션" },
      ],
      cta: "오늘 밤 예약",
    },
  };
  const d = data[mode];

  return (
    <section className="section experience reveal" ref={ref} id="experience" data-screen-label="02 Experience">
      <div className="container">
        <div className="section-head">
          <span className="num">— 01</span>
          <h2 className="title">이용 안내 <span className="en">How It Works</span></h2>
          <span className="tail">Day & Night</span>
        </div>

        <div className="exp-toggle" role="tablist">
          <button className={mode === "night" ? "on" : ""} onClick={() => setMode("night")}>
            <I.Music className="ic" />나이트 모드
          </button>
          <button className={mode === "day" ? "on" : ""} onClick={() => setMode("day")}>
            <I.Briefcase className="ic" />데이 타임
          </button>
        </div>

        <div className="exp-layout">
          <div className="exp-stage">
            {["day", "night"].map((k) => (
              <div key={k} className={"img-layer " + (mode === k ? "on" : "")}>
                <img src={data[k].img} alt="" />
              </div>
            ))}
            <div className="exp-stage-overlay">
              <span className="exp-stage-tag">{d.tag}</span>
              <div className="exp-stage-caption">{d.caption}</div>
            </div>
          </div>

          <div className="exp-body">
            <div>
              <h3>{d.title}</h3>
              <p className="exp-lede">{d.lede}</p>
            </div>
            <div className="exp-features">
              {d.features.map((f) => (
                <div className="exp-feat" key={f.num}>
                  <div className="num">{f.num}</div>
                  <div className="t">{f.t}</div>
                  <div className="d">{f.d}</div>
                </div>
              ))}
            </div>
            <div className="exp-cta-row">
              <button className="btn btn-primary" data-magnetic>{d.cta} <I.Arrow /></button>
              <span className="exp-avail"><span className="dot"></span>실시간 상담 가능</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Experience = Experience;