// KASHA website — home / landing (single-creator: KASHA shoots you directly)
function HomeScreen({ onNavigate }) {
  const { Button, Card, Badge, Icon } = window.DS;
  const S = window.STUDIO;
  const A = window.SITE_ASSETS;   // 홈페이지 CMS (관리자에서 편집)

  return (
    <div>
      {/* ───────── Hero ───────── */}
      <section style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "72px 24px 48px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.05fr 0.95fr", gap: 48, alignItems: "center" }}>
          <div>
            <Badge tone="accent" style={{ marginBottom: 20 }}>{S.area} · 인물 사진 스튜디오</Badge>
            <h1 style={{ fontSize: "var(--text-display-1)", lineHeight: 1.06, letterSpacing: "var(--tracking-display)", color: "var(--text-strong)", whiteSpace: "pre-line" }}>
              {A.heroTitle}
            </h1>
            <p style={{ marginTop: 22, fontSize: "var(--text-body-lg)", color: "var(--text-secondary)", lineHeight: "var(--leading-relaxed)", maxWidth: 440 }}>
              {A.heroSubtitle}
            </p>
            <div style={{ display: "flex", gap: 12, marginTop: 32 }}>
              <Button variant="primary" size="lg" trailingIcon={<Icon name="arrowRight" size={20} />} onClick={() => onNavigate("booking")}>
                촬영 예약하기
              </Button>
              <Button variant="outline" size="lg" onClick={() => onNavigate("portfolio")}>
                포트폴리오 보기
              </Button>
            </div>
            <div style={{ display: "flex", gap: 28, marginTop: 40 }}>
              <Stat value={S.rating} label="평균 만족도" />
              <Divider />
              <Stat value={S.shoots} label="누적 촬영" />
              <Divider />
              <Stat value={`${S.since}~`} label="스튜디오 운영" />
            </div>
          </div>
          <div style={{ position: "relative", height: 480 }}>
            <div className="kasha-hover-zoom" style={{ position: "absolute", top: 0, right: 0, width: "72%", height: 320, borderRadius: "var(--radius-2xl)", overflow: "hidden", boxShadow: "var(--shadow-lg)" }}>
              <img src={window.img(A.heroImage || "hero1", 640, 640)} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            </div>
            <div className="kasha-hover-zoom" style={{ position: "absolute", bottom: 0, left: 0, width: "56%", height: 240, borderRadius: "var(--radius-2xl)", overflow: "hidden", boxShadow: "var(--shadow-lg)", border: "5px solid #fff" }}>
              <img src={window.img("hero2", 480, 480)} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            </div>
            <div style={{ position: "absolute", left: "42%", top: "44%", background: "#fff", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-md)", padding: "12px 16px", display: "flex", alignItems: "center", gap: 10 }}>
              <span style={{ width: 36, height: 36, borderRadius: "50%", background: "var(--green-50)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--green-500)" }}>
                <Icon name="check" size={20} strokeWidth={2.5} />
              </span>
              <div>
                <div style={{ fontSize: 13, fontWeight: 700, color: "var(--text-strong)" }}>예약 확정</div>
                <div style={{ fontSize: 12, color: "var(--text-tertiary)" }}>7월 12일 · 성수 스튜디오</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ───────── Services ───────── */}
      <section style={{ background: "var(--gray-50)" }}>
        <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "80px 24px" }}>
          <SectionHead eyebrow="SERVICES" title="이런 촬영을 해요" sub="목적에 맞춰 컨셉부터 보정 톤까지 함께 맞춰드려요." />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 20, marginTop: 40 }}>
            {window.SERVICES.map((s) => (
              <Card key={s.title} style={{ display: "flex", flexDirection: "column" }}>
                <span style={{ width: 48, height: 48, borderRadius: 14, background: "var(--blue-50)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--blue-500)" }}>
                  <Icon name={s.icon} size={24} />
                </span>
                <h3 style={{ fontSize: 18, marginTop: 18 }}>{s.title}</h3>
                <p style={{ fontSize: 14, color: "var(--text-secondary)", lineHeight: "var(--leading-relaxed)", marginTop: 8 }}>{s.desc}</p>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* ───────── Portfolio teaser ───────── */}
      <section style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "80px 24px" }}>
        <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 28 }}>
          <SectionHead eyebrow="PORTFOLIO" title="최근 작업" sub="KASHA가 직접 촬영한 인물 사진이에요." align="left" />
          <Button variant="ghost" trailingIcon={<Icon name="chevronRight" size={18} />} onClick={() => onNavigate("portfolio")}>전체 보기</Button>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 16 }}>
          {window.WORKS.slice(0, 4).map((w) => (
            <div key={w.id} onClick={() => onNavigate("portfolio")} className="kasha-hover-zoom kasha-hover-lift"
              style={{ cursor: "pointer", borderRadius: "var(--radius-card)", overflow: "hidden", position: "relative", aspectRatio: "3/4", boxShadow: "var(--shadow-card)" }}>
              <img src={window.img(w.seed, 360, 480)} alt={w.title} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              <div style={{ position: "absolute", left: 0, right: 0, bottom: 0, padding: "28px 16px 14px", background: "linear-gradient(transparent, rgba(23,23,28,0.72))" }}>
                <div style={{ color: "#fff", fontSize: 14, fontWeight: 700 }}>{w.title}</div>
                <div style={{ color: "rgba(255,255,255,0.8)", fontSize: 12, marginTop: 2 }}>{w.cat}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ───────── Process ───────── */}
      <section style={{ background: "var(--gray-50)" }}>
        <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "80px 24px" }}>
          <SectionHead eyebrow="HOW IT WORKS" title="예약부터 사진까지 4단계" sub="처음이어도 어렵지 않아요. KASHA가 하나하나 안내해 드려요." />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 20, marginTop: 40 }}>
            {window.PROCESS.map((p, i) => (
              <div key={p.step} style={{ position: "relative" }}>
                <div style={{ fontSize: 32, fontWeight: 700, color: "var(--blue-500)", letterSpacing: "-0.02em" }}>{p.step}</div>
                <h3 style={{ fontSize: 18, marginTop: 10 }}>{p.title}</h3>
                <p style={{ fontSize: 14, color: "var(--text-secondary)", lineHeight: "var(--leading-relaxed)", marginTop: 8 }}>{p.desc}</p>
                {i < 3 && <div style={{ position: "absolute", top: 16, right: -10, color: "var(--gray-300)" }}><Icon name="chevronRight" size={20} /></div>}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ───────── Pricing ───────── */}
      <section style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "80px 24px" }}>
        <SectionHead eyebrow="PRICING" title="촬영 패키지" sub="모든 패키지에 원본 전체 + 셀렉 보정이 포함돼요." />
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 20, marginTop: 40, alignItems: "start" }}>
          {window.PACKAGES.map((p) => (
            <Card key={p.name} interactive onClick={() => onNavigate("detail", { pkgId: p.id })}
              style={{ border: p.popular ? "1.5px solid var(--ink)" : "1px solid var(--border-subtle)", boxShadow: p.popular ? "var(--shadow-md)" : "var(--shadow-card)" }}>
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <h3 style={{ fontSize: 20 }}>{p.name}</h3>
                {p.popular && <Badge tone="accent">인기</Badge>}
              </div>
              <p style={{ fontSize: 14, color: "var(--text-secondary)", marginTop: 8, minHeight: 40 }}>{p.desc}</p>
              <div style={{ display: "flex", alignItems: "baseline", gap: 4, marginTop: 8 }}>
                <span style={{ fontSize: 28, 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={{ borderTop: "1px solid var(--border-subtle)", margin: "18px 0", paddingTop: 16, display: "flex", flexDirection: "column", gap: 10 }}>
                <Feature text={p.time + " 촬영"} />
                <Feature text={p.cuts} />
                <Feature text="사전 컨셉 기획 포함" />
              </div>
              <Button variant={p.popular ? "primary" : "secondary"} fullWidth onClick={(e) => { e.stopPropagation(); onNavigate("detail", { pkgId: p.id }); }}>자세히 보기</Button>
            </Card>
          ))}
        </div>
      </section>

      {/* ───────── Reviews ───────── */}
      <section style={{ background: "var(--gray-50)" }}>
        <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "80px 24px" }}>
          <SectionHead eyebrow="REVIEWS" title="다녀가신 분들의 후기" sub={`평균 만족도 ${window.STUDIO.rating} · 누적 ${window.STUDIO.shoots} 촬영`} />
          <div style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 20, marginTop: 40 }}>
            {window.REVIEWS.map((r) => (
              <Card key={r.name}>
                <div style={{ display: "flex", gap: 3, marginBottom: 14 }}>
                  {[0,1,2,3,4].map((i) => <Icon key={i} name="star" size={16} color="var(--yellow-500)" />)}
                </div>
                <p style={{ fontSize: 15, color: "var(--text-body)", lineHeight: "var(--leading-relaxed)" }}>"{r.text}"</p>
                <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 18 }}>
                  <span style={{ width: 36, height: 36, flexShrink: 0, borderRadius: "50%", overflow: "hidden", background: "var(--gray-200)" }}>
                    <img src={window.img(r.seed, 80, 80)} alt="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
                  </span>
                  <div>
                    <div style={{ fontSize: 14, fontWeight: 700, color: "var(--text-strong)", whiteSpace: "nowrap" }}>{r.name}</div>
                    <div style={{ fontSize: 12, color: "var(--text-tertiary)", whiteSpace: "nowrap" }}>{r.tag}</div>
                  </div>
                </div>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* ───────── FAQ ───────── */}
      <section style={{ maxWidth: "var(--container-narrow)", margin: "0 auto", padding: "80px 24px" }}>
        <SectionHead eyebrow="FAQ" title="자주 묻는 질문" />
        <div style={{ marginTop: 32, display: "flex", flexDirection: "column", gap: 12 }}>
          {window.FAQ.map((f, i) => <FaqItem key={i} q={f.q} a={f.a} />)}
        </div>
      </section>

      {/* ───────── Location (오시는 길) ───────── */}
      {window.MapSection && <window.MapSection />}

      {/* ───────── CTA band ───────── */}
      <section style={{ background: "var(--ink)", color: "#fff" }}>
        <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "72px 24px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 32 }}>
          <div>
            <h2 style={{ color: "#fff", fontSize: "var(--text-title-1)", letterSpacing: "var(--tracking-title)" }}>가장 나다운 순간을 예약하세요</h2>
            {A.promoActive && <p style={{ marginTop: 12, color: "var(--gray-400)", fontSize: "var(--text-body-lg)" }}>{A.promoBanner}</p>}
          </div>
          <Button variant="accent" size="lg" trailingIcon={<Icon name="arrowRight" size={20} />} onClick={() => onNavigate("booking")}>
            예약 시작하기
          </Button>
        </div>
      </section>
    </div>
  );
}

function SectionHead({ eyebrow, title, sub, align = "center" }) {
  return (
    <div style={{ textAlign: align, maxWidth: align === "center" ? 560 : "none", margin: align === "center" ? "0 auto" : 0 }}>
      <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: "0.08em", color: "var(--blue-500)" }}>{eyebrow}</div>
      <h2 style={{ fontSize: "var(--text-title-1)", letterSpacing: "var(--tracking-title)", marginTop: 10 }}>{title}</h2>
      {sub && <p style={{ marginTop: 12, color: "var(--text-secondary)", fontSize: "var(--text-body-lg)" }}>{sub}</p>}
    </div>
  );
}

function Feature({ text }) {
  const { Icon } = window.DS;
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 14, color: "var(--text-body)" }}>
      <Icon name="check" size={17} color="var(--green-500)" strokeWidth={2.5} />{text}
    </div>
  );
}

function FaqItem({ q, a }) {
  const { Icon } = window.DS;
  const [open, setOpen] = React.useState(false);
  return (
    <div style={{ background: "#fff", border: "1px solid var(--border-subtle)", borderRadius: "var(--radius-md)", overflow: "hidden" }}>
      <button onClick={() => setOpen(!open)}
        style={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, padding: "20px 22px", background: "transparent", border: "none", cursor: "pointer", textAlign: "left", fontFamily: "var(--font-sans)" }}>
        <span style={{ fontSize: 16, fontWeight: 600, color: "var(--text-strong)" }}>{q}</span>
        <span style={{ flexShrink: 0, transform: open ? "rotate(180deg)" : "rotate(0)", transition: "transform var(--dur-base) var(--ease-ios)", color: "var(--gray-500)" }}>
          <Icon name="chevronDown" size={20} />
        </span>
      </button>
      <div style={{ maxHeight: open ? 200 : 0, overflow: "hidden", transition: "max-height var(--dur-base) var(--ease-ios)" }}>
        <p style={{ padding: "0 22px 20px", fontSize: 15, color: "var(--text-secondary)", lineHeight: "var(--leading-relaxed)" }}>{a}</p>
      </div>
    </div>
  );
}

function Stat({ value, label }) {
  return (
    <div>
      <div style={{ fontSize: 26, fontWeight: 700, color: "var(--text-strong)", letterSpacing: "var(--tracking-title)" }}>{value}</div>
      <div style={{ fontSize: 13, color: "var(--text-tertiary)", marginTop: 2 }}>{label}</div>
    </div>
  );
}
function Divider() {
  return <div style={{ width: 1, height: 36, background: "var(--border-subtle)", alignSelf: "center" }} />;
}
window.HomeScreen = HomeScreen;