// KASHA website — shoot detail page (full package detail → book)
function ShootDetailScreen({ pkgId, from, onNavigate }) {
  const { Button, Card, Badge, Tag, Icon } = window.DS;
  const pkg = window.PACKAGES.find((p) => p.id === pkgId) || window.PACKAGES[0];
  const [hero, setHero] = React.useState(0);
  const won = (n) => n.toLocaleString("ko-KR");

  return (
    <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "32px 24px 96px" }}>
      <button onClick={() => onNavigate(from || "home")}
        style={{ border: "none", background: "transparent", display: "flex", alignItems: "center", gap: 6, color: "var(--text-secondary)", fontSize: 15, fontWeight: 600, cursor: "pointer", padding: 0, marginBottom: 24 }}>
        <Icon name="arrowLeft" size={18} /> 뒤로
      </button>

      <div style={{ display: "grid", gridTemplateColumns: "1.1fr 0.9fr", gap: 48, alignItems: "start" }}>
        {/* Gallery */}
        <div>
          <div style={{ borderRadius: "var(--radius-2xl)", overflow: "hidden", aspectRatio: "4/3", boxShadow: "var(--shadow-md)" }}>
            <img key={hero} src={window.pimg ? window.pimg(pkg.gallery[hero], 720, 540) : window.img(pkg.gallery[hero], 720, 540)} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          </div>
          <div style={{ display: "flex", gap: 10, marginTop: 12 }}>
            {pkg.gallery.map((g, i) => (
              <button key={g} onClick={() => setHero(i)}
                style={{ flex: 1, aspectRatio: "1", borderRadius: 12, overflow: "hidden", border: `2px solid ${i === hero ? "var(--ink)" : "transparent"}`, padding: 0, cursor: "pointer", background: "none" }}>
                <img src={window.img(g, 160, 160)} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />
              </button>
            ))}
          </div>
        </div>

        {/* Summary + sticky book */}
        <div style={{ position: "sticky", top: 92 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <Badge tone="accent">{pkg.name}</Badge>
            {pkg.popular && <Badge tone="neutral" variant="soft">인기</Badge>}
          </div>
          <h1 style={{ fontSize: "var(--text-title-1)", letterSpacing: "var(--tracking-title)", marginTop: 14 }}>{pkg.desc}</h1>
          <div style={{ display: "flex", alignItems: "center", gap: 6, marginTop: 12, color: "var(--text-secondary)", fontSize: 14 }}>
            <Icon name="star" size={16} color="var(--yellow-500)" />
            <strong style={{ color: "var(--text-strong)" }}>{window.STUDIO.rating}</strong>
            <span>· {window.STUDIO.area} 스튜디오 · {pkg.time}</span>
          </div>
          <p style={{ marginTop: 18, color: "var(--text-secondary)", fontSize: "var(--text-body-lg)", lineHeight: "var(--leading-relaxed)" }}>{pkg.long}</p>

          <Card elevation="none" style={{ background: "var(--gray-50)", border: "none", marginTop: 24 }}>
            <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between" }}>
              <span style={{ fontSize: 14, color: "var(--text-secondary)" }}>촬영 가격</span>
              <span style={{ fontSize: 28, fontWeight: 700, color: "var(--text-strong)", letterSpacing: "var(--tracking-title)" }}>{won(pkg.priceNum)}<span style={{ fontSize: 15, fontWeight: 500, color: "var(--text-tertiary)" }}>원</span></span>
            </div>
          </Card>

          <div style={{ display: "flex", gap: 12, marginTop: 18 }}>
            <Button variant="outline" size="lg" onClick={() => onNavigate("portfolio")}>포트폴리오</Button>
            <Button variant="primary" size="lg" style={{ flex: 1 }} trailingIcon={<Icon name="arrowRight" size={20} />} onClick={() => onNavigate("booking", { pkgId: pkg.id })}>
              이 촬영 예약하기
            </Button>
          </div>
        </div>
      </div>

      {/* Includes + addons */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24, marginTop: 64 }}>
        <div>
          <h2 style={{ fontSize: "var(--text-title-3)", letterSpacing: "var(--tracking-title)" }}>포함 사항</h2>
          <div style={{ marginTop: 18, display: "flex", flexDirection: "column", gap: 12 }}>
            {pkg.includes.map((it) => (
              <div key={it} style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 15, color: "var(--text-body)" }}>
                <span style={{ width: 24, height: 24, borderRadius: "50%", background: "var(--green-50)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
                  <Icon name="check" size={15} color="var(--green-500)" strokeWidth={2.5} />
                </span>
                {it}
              </div>
            ))}
          </div>
        </div>
        <div>
          <h2 style={{ fontSize: "var(--text-title-3)", letterSpacing: "var(--tracking-title)" }}>추가 옵션</h2>
          <div style={{ marginTop: 18, display: "flex", flexDirection: "column", gap: 12 }}>
            {pkg.addons.map((a) => (
              <Card key={a.id} style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "16px 18px" }}>
                <span style={{ fontSize: 15, fontWeight: 600, color: "var(--text-strong)" }}>{a.label}</span>
                <span style={{ fontSize: 15, fontWeight: 700, color: "var(--text-strong)" }}>+{won(a.price)}원</span>
              </Card>
            ))}
          </div>
          <div style={{ display: "flex", gap: 8, marginTop: 20, flexWrap: "wrap" }}>
            <Tag>자연광</Tag><Tag>실내외</Tag><Tag>당일 원본 제공</Tag><Tag>7일 내 보정</Tag>
          </div>
        </div>
      </div>
    </div>
  );
}
window.ShootDetailScreen = ShootDetailScreen;