// Marketing site — media section (future showreel video + photo gallery slots).
const { Badge } = window.TheGangsaDesignSystem_223a82;

function Media() {
  return (
    <section id="showreel" style={{ maxWidth: 1280, margin: "0 auto", padding: "clamp(40px,6vw,90px) clamp(18px,4vw,44px)" }}>
      <Reveal>
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 16, flexWrap: "wrap", marginBottom: 24 }}>
          <div>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 12, fontWeight: 600, letterSpacing: "0.14em", textTransform: "uppercase", color: "var(--green-bright)" }}>Showreel</span>
            <h2 style={{ margin: "14px 0 0", fontSize: "clamp(30px,4.4vw,56px)", fontWeight: 800, letterSpacing: "-0.03em", lineHeight: 1.05, color: "var(--text-primary)", wordBreak: "keep-all" }}>매장이 달라지는 순간</h2>
          </div>
          <p style={{ margin: 0, maxWidth: 320, fontSize: 14, lineHeight: 1.6, color: "var(--text-muted)" }}>소개 영상과 매장 사진을 이 영역에 게시하세요. 슬롯을 클릭하거나 이미지를 끌어다 놓으면 됩니다.</p>
        </div>
      </Reveal>

      {/* Showreel — 16:9 video/cover slot */}
      <Reveal delay={100}>
        <div style={{ position: "relative", borderRadius: "var(--r-xl)", overflow: "hidden", border: "1px solid var(--line)", boxShadow: "var(--shadow-card)" }}>
          <image-slot id="tg-showreel" shape="rect" placeholder="소개 영상 썸네일 / 커버 이미지 — 끌어다 놓기" style={{ display: "block", width: "100%", aspectRatio: "16 / 9" }}></image-slot>
          <div style={{ position: "absolute", left: 20, bottom: 18, display: "inline-flex", alignItems: "center", gap: 10, padding: "9px 16px", borderRadius: 999, background: "rgba(20,18,16,0.62)", color: "#fff", backdropFilter: "blur(6px)", pointerEvents: "none", fontSize: 13.5, fontWeight: 700 }}>
            <Icon name="play" size={16} /> 소개 영상 자리 (차후 게시)
          </div>
        </div>
      </Reveal>

      {/* Photo gallery — fillable slots */}
      <Reveal delay={180}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: 16, marginTop: 16 }}>
          {[
            { id: "tg-shot-1", cap: "매장 전경" },
            { id: "tg-shot-2", cap: "시술/제품" },
            { id: "tg-shot-3", cap: "리뷰·성과" },
          ].map((s) => (
            <div key={s.id}>
              <image-slot id={s.id} shape="rounded" radius="12" placeholder={s.cap + " 사진"} style={{ display: "block", width: "100%", aspectRatio: "4 / 5", border: "1px solid var(--line)" }}></image-slot>
              <div style={{ marginTop: 8, fontSize: 12.5, color: "var(--text-muted)", fontFamily: "var(--font-mono)" }}>{s.cap}</div>
            </div>
          ))}
        </div>
      </Reveal>
    </section>
  );
}

window.Media = Media;