// KASHA website — 촬영 상품 (전체 상품 카탈로그)
function ShopScreen({ onNavigate }) {
  const { Button, Card, Badge, Icon } = window.DS;
  const pkgs = window.PACKAGES;
  const won = (n) => Number(n || 0).toLocaleString("ko-KR");

  return (
    <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "56px 24px 80px" }}>
      <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: "0.08em", color: "var(--blue-500)" }}>SHOP</div>
      <h1 style={{ fontSize: "var(--text-title-1)", letterSpacing: "var(--tracking-title)", marginTop: 10 }}>촬영 상품</h1>
      <p style={{ marginTop: 10, color: "var(--text-secondary)", fontSize: "var(--text-body-lg)" }}>
        KASHA의 모든 촬영을 한눈에. 원하는 상품을 골라 바로 예약하세요.
      </p>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 20, marginTop: 36, alignItems: "start" }}>
        {pkgs.map((p) => (
          <Card key={p.id} padding="none" interactive onClick={() => onNavigate("detail", { pkgId: p.id, from: "shop" })}
            className="kasha-hover-lift" style={{ overflow: "hidden", border: p.popular ? "1.5px solid var(--ink)" : "1px solid var(--border-subtle)" }}>
            <div className="kasha-hover-zoom" style={{ position: "relative", aspectRatio: "4/3", overflow: "hidden" }}>
              <img src={window.pimg(p.gallery[0], 480, 360)} alt={p.name} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              {p.popular && <div style={{ position: "absolute", top: 12, left: 12 }}><Badge tone="accent" variant="solid">인기</Badge></div>}
              {p.video && <div style={{ position: "absolute", top: 12, right: 12 }}><Badge tone="neutral" variant="solid" style={{ background: "rgba(23,23,28,0.72)" }}>영상</Badge></div>}
            </div>
            <div style={{ padding: "18px 18px 20px" }}>
              <h3 style={{ fontSize: 19 }}>{p.name}</h3>
              <p style={{ fontSize: 13.5, color: "var(--text-secondary)", marginTop: 6, minHeight: 38, lineHeight: "var(--leading-relaxed)" }}>{p.desc}</p>
              <div style={{ display: "flex", alignItems: "baseline", gap: 4, marginTop: 6 }}>
                <span style={{ fontSize: 24, fontWeight: 700, color: "var(--text-strong)", letterSpacing: "var(--tracking-title)" }}>{p.price}</span>
                <span style={{ fontSize: 14, color: "var(--text-tertiary)" }}>원</span>
              </div>
              <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 14, paddingTop: 14, borderTop: "1px solid var(--border-subtle)" }}>
                <Row icon="clock" text={`${p.time} 촬영`} />
                <Row icon="image" text={p.cuts} />
              </div>
              <div style={{ display: "flex", gap: 8, marginTop: 16 }}>
                <Button variant="secondary" fullWidth onClick={(e) => { e.stopPropagation(); onNavigate("detail", { pkgId: p.id, from: "shop" }); }}>자세히</Button>
                <Button variant="primary" fullWidth onClick={(e) => { e.stopPropagation(); onNavigate("booking", { pkgId: p.id }); }}>예약</Button>
              </div>
            </div>
          </Card>
        ))}
      </div>

      {pkgs.length === 0 && (
        <Card elevation="none" style={{ background: "var(--gray-50)", border: "none", textAlign: "center", padding: "48px 24px", marginTop: 24 }}>
          <p style={{ color: "var(--text-secondary)" }}>준비된 촬영 상품이 없어요.</p>
        </Card>
      )}
    </div>
  );
}

function Row({ icon, text }) {
  const { Icon } = window.DS;
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13.5, color: "var(--text-body)" }}>
      <Icon name={icon} size={16} color="var(--gray-500)" />{text}
    </div>
  );
}
window.ShopScreen = ShopScreen;