// KASHA website — 테마 카테고리 페이지 (프로필·스냅·코스프레·연인친구·반려동물)
// 카테고리별 대표 색상(cat.color)으로 강조. 내용은 관리자(홈페이지 관리)에서 편집.
function CategoryScreen({ catKey, onNavigate }) {
  const { Button, Card, Badge, Icon } = window.DS;
  const list = window.CATEGORY_PAGES || [];
  const cat = list.filter((c) => c.key === catKey)[0] || list[0];
  if (!cat) return <div style={{ padding: "80px 24px", textAlign: "center", color: "var(--text-tertiary)" }}>카테고리를 찾을 수 없어요.</div>;
  const color = cat.color || "var(--blue-500)";
  const tint = color + "14";   // 8% 틴트 (hex + alpha)

  return (
    <div>
      {/* Hero — 카테고리 색상 강조 */}
      <section style={{ background: `linear-gradient(180deg, ${tint}, transparent)` }}>
        <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "64px 24px 40px", display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 48, alignItems: "center" }}>
          <div>
            <span style={{ display: "inline-block", padding: "6px 14px", borderRadius: "var(--radius-pill)", background: color, color: "#fff", fontSize: 13, fontWeight: 700, letterSpacing: "var(--tracking-body)" }}>{cat.label}</span>
            <h1 style={{ fontSize: "var(--text-display-1)", lineHeight: 1.08, letterSpacing: "var(--tracking-display)", color: "var(--text-strong)", marginTop: 20 }}>{cat.tagline}</h1>
            <p style={{ marginTop: 20, fontSize: "var(--text-body-lg)", color: "var(--text-secondary)", lineHeight: "var(--leading-relaxed)", maxWidth: 460 }}>{cat.intro}</p>
            <div style={{ display: "flex", gap: 12, marginTop: 30 }}>
              <Button variant="primary" size="lg" trailingIcon={<Icon name="arrowRight" size={20} />} onClick={() => onNavigate("booking")} style={{ background: color, borderColor: color }}>이 테마로 예약하기</Button>
              <Button variant="outline" size="lg" onClick={() => onNavigate("portfolio")}>포트폴리오 보기</Button>
            </div>
          </div>
          <div className="kasha-hover-zoom" style={{ position: "relative", height: 380, borderRadius: "var(--radius-2xl)", overflow: "hidden", boxShadow: "var(--shadow-lg)" }}>
            <img src={window.img(cat.heroSeed || "hero1", 720, 760)} alt={cat.label} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            <div style={{ position: "absolute", inset: 0, background: `linear-gradient(180deg, transparent 60%, ${color}33)` }} />
          </div>
        </div>
      </section>

      {/* 촬영 정보 */}
      <section style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "32px 24px 8px" }}>
        <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: "0.08em", color: color }}>SHOOTING INFO</div>
        <h2 style={{ fontSize: "var(--text-title-1)", letterSpacing: "var(--tracking-title)", marginTop: 10 }}>촬영 정보</h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 16, marginTop: 24 }}>
          {(cat.info || []).map((it, i) => (
            <Card key={i} style={{ borderTop: `3px solid ${color}` }}>
              <div style={{ fontSize: 13, color: "var(--text-tertiary)", fontWeight: 600 }}>{it.label}</div>
              <div style={{ fontSize: 20, fontWeight: 700, color: "var(--text-strong)", marginTop: 6, letterSpacing: "var(--tracking-title)" }}>{it.value}</div>
            </Card>
          ))}
        </div>
      </section>

      {/* 상세 섹션 */}
      <section style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "40px 24px 64px", display: "flex", flexDirection: "column", gap: 16 }}>
        {(cat.sections || []).map((s, i) => (
          <Card key={i} style={{ display: "flex", gap: 16, alignItems: "flex-start" }}>
            <span style={{ width: 40, height: 40, borderRadius: 12, background: tint, color: color, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0, fontWeight: 800 }}>{i + 1}</span>
            <div>
              <h3 style={{ fontSize: 18 }}>{s.title}</h3>
              <p style={{ fontSize: 15, color: "var(--text-secondary)", lineHeight: "var(--leading-relaxed)", marginTop: 6 }}>{s.body}</p>
            </div>
          </Card>
        ))}
      </section>

      {/* 다른 테마 */}
      <section style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "0 24px 48px" }}>
        <div style={{ fontSize: 13, color: "var(--text-tertiary)", marginBottom: 12 }}>다른 테마 둘러보기</div>
        <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
          {list.filter((c) => c.key !== cat.key).map((c) => (
            <button key={c.key} onClick={() => onNavigate("category", { catKey: c.key })}
              style={{ padding: "8px 16px", borderRadius: "var(--radius-pill)", border: "1.5px solid var(--border-default)", background: "#fff", cursor: "pointer", fontFamily: "var(--font-sans)", fontSize: 14, fontWeight: 600, color: "var(--text-secondary)", display: "flex", alignItems: "center", gap: 8 }}>
              <span style={{ width: 10, height: 10, borderRadius: "50%", background: c.color || "var(--gray-400)" }} />{c.label}
            </button>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section style={{ background: color }}>
        <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "56px 24px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, flexWrap: "wrap" }}>
          <h2 style={{ color: "#fff", fontSize: "var(--text-title-1)", letterSpacing: "var(--tracking-title)" }}>{cat.label} 촬영, 지금 예약하세요</h2>
          <Button variant="secondary" size="lg" trailingIcon={<Icon name="arrowRight" size={20} />} onClick={() => onNavigate("booking")}>예약 시작하기</Button>
        </div>
      </section>
    </div>
  );
}
window.CategoryScreen = CategoryScreen;