/* 고객 후기 — 페이지 전용 섹션.
   Nav는 메인/상세와 동일(현재 위치만 '고객 후기'). Footer·MobileBar·QuickMenu는 재사용.
   별점 데이터·후기 텍스트는 예시(자리표시자) — 만족도 조사 데이터로 교체 예정. */

const HOME = "/";

/* 실데이터 로더(useReviewData)·reveal 표시(useRevealLiveContent)는 공용 hooks.jsx로 이동.
   모든 페이지(메인·상세·후기)가 같은 API 데이터를 공유합니다. */

/* ---------- 골드 별점 ---------- */
const STAR_PATH = "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z";
function Stars({ value = 5, size = 18, gap = 3, empty = "rgba(112,115,124,.22)", fill = "var(--gold)" }) {
  const pct = Math.max(0, Math.min(1, value / 5)) * 100;
  const one = (color, key) => (
    <svg key={key} width={size} height={size} viewBox="0 0 24 24" aria-hidden="true">
      <path d={STAR_PATH} fill={color} />
    </svg>);
  const row = (color) => Array.from({ length: 5 }, (_, i) => one(color, i));
  return (
    <span className="stars" style={{ width: 5 * size + 4 * gap, height: size }} role="img" aria-label={value + "점 / 5점"}>
      <span className="stars-bg" style={{ gap }}>{row(empty)}</span>
      <span className="stars-fg" style={{ gap, width: pct + "%" }}>{row(fill)}</span>
    </span>);
}

/* ---------- 상단 네비 (메인과 동일, 현재 위치 = 고객 후기) ---------- */
function ReviewsNav() {
  const { Icon } = window.WantedDesignSystem_954e41;
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const closeMenu = () => setMenuOpen(false);
  return (
    <header className={"nav" + (scrolled ? " scrolled" : "") + (menuOpen ? " menu-open" : "")}>
      <div className="wrap nav-inner">
        <a href={HOME} className="brand" style={{ textDecoration: "none" }}>
          <img src="assets/logo-kkf.png" alt="깔끔한친구들" className="brand-logo" />
        </a>
        <nav className="nav-links">
          <a href="/about">깔끔한친구들은?</a>
          <div className="nav-drop">
            <a href={HOME + "#services"} className="nav-drop-trigger">
              서비스 상품
              <Chevron />
            </a>
            <div className="nav-menu" role="menu">
              {window.SERVICE_LIST.map((s, i) =>
              <a key={i} href={window.SERVICE_URLS[s] || (HOME + "#services")} role="menuitem">{s}{!window.SERVICE_URLS[s] && <span className="soon">준비중</span>}</a>
              )}
            </div>
          </div>
          <a href="#top" style={{ color: scrolled ? "var(--mint-600)" : "var(--mint-400)", fontWeight: 700 }}>고객 후기</a>
          <a href="/blog">작업사례 &amp; 관리팁</a>
          
        </nav>
        <a href={window.TEL_HREF} className="nav-phone"
          style={{ color: scrolled ? "var(--mint-600)" : "#fff", textDecoration: "none", fontSize: 16 }}>
          {window.TEL}
        </a>
        <button className="nav-burger" aria-label={menuOpen ? "메뉴 닫기" : "메뉴 열기"}
          aria-expanded={menuOpen} onClick={() => setMenuOpen((v) => !v)}>
          <Icon name={menuOpen ? "close" : "menu"} size={26} />
        </button>
      </div>

      <div className={"nav-mobile" + (menuOpen ? " open" : "")}>
        <a href="/about" onClick={closeMenu}>깔끔한친구들은?</a>
        <div className="sub-label">서비스 상품</div>
        {window.SERVICE_LIST.map((s, i) =>
        <a key={i} href={window.SERVICE_URLS[s] || (HOME + "#services")} className="svc" onClick={closeMenu}>{s}{!window.SERVICE_URLS[s] && <span className="soon">준비중</span>}</a>
        )}
        <a href="#top" onClick={closeMenu} style={{ color: "var(--mint-600)", fontWeight: 700 }}>고객 후기</a>
        <a href="/blog" onClick={closeMenu}>작업사례 &amp; 관리팁</a>
        
      </div>
    </header>);
}

/* ---------- 1. 페이지 히어로 ---------- */
function ReviewsHero() {
  return (
    <section className="phero" id="top" data-screen-label="후기-히어로">
      <div className="phero-bg">
        <image-slot id="rv-hero-bg" shape="rect" fit="cover"
          placeholder="후기 히어로 배경 — 밝고 깨끗해진 집, 만족스러운 고객의 일상 실사"></image-slot>
      </div>
      <div className="phero-scrim"></div>
      <div className="phero-inner">
        <div className="wrap">
          <div className="phero-crumb reveal">
            <a href={HOME}>홈</a>
            <span className="sep">›</span>
            <span className="cur">고객 후기</span>
          </div>
          <div className="reveal" data-d="1">
            <span className="phero-badge">REAL REVIEWS</span>
          </div>
          <h1 className="reveal" data-d="2">고객 후기</h1>
          <p className="phero-sub reveal" data-d="3">
            작업이 끝난 다음날, 고객님이 직접 남겨주신 진짜 후기예요.
          </p>
        </div>
      </div>
    </section>);
}

/* ---------- 2. 만족도 요약 ---------- */
const DIST = [
  { s: 5, w: 95 },
  { s: 4, w: 6 },
  { s: 3, w: 1.5 },
  { s: 2, w: 0.6 },
  { s: 1, w: 0.6 }];

function SummaryScore() {
  const data = useReviewData();
  const isLive = !!(data && data.stats);
  const overall = isLive && data.stats.overall ? data.stats.overall : 4.87;
  // 분포: 실데이터 있으면 카운트→퍼센트, 없으면 예시 DIST
  let dist = DIST;
  if (isLive && data.stats.dist) {
    const d = data.stats.dist;
    const total = [5, 4, 3, 2, 1].reduce((a, s) => a + (d[s] || 0), 0);
    if (total > 0) {
      dist = [5, 4, 3, 2, 1].map((s) => ({ s, w: Math.max(0.6, Math.round((d[s] || 0) / total * 1000) / 10) }));
    }
  }
  return (
    <section className="rv-summary" id="summary" data-screen-label="후기-만족도요약">
      <div className="wrap">
        <div className="rv-intro reveal">
          <span className="eyebrow">만족도 요약</span>
          <h2 className="section-title">숫자로도, 진심이 보여요</h2>
        </div>
        <div className="rv-sum-grid" style={{ marginTop: 44 }}>
          <div className="rv-score reveal">
            <div className="rv-score-row">
              <div className="rv-score-big"><CountUp end={overall} decimals={2} /><span className="of">/ 5.0</span></div>
            </div>
            <div className="rv-score-stars"><Stars value={overall} size={34} gap={6} /></div>
            <p className="rv-score-sub">작업 다음날 자동 발송되는 만족도 조사에서 집계된 종합 평점이에요.</p>
            <div className="rv-repeat">
              <span className="num"><CountUp end={78} suffix="%" /></span>
              <span className="lab">시공 후 다시 찾아주신<br />고객 재구매율</span>
            </div>
          </div>
          <div className="rv-dist reveal" data-d="1">
            {dist.map((d, i) =>
            <div className="rv-dist-row" key={i}>
              <span className="rv-dist-key">{d.s}<svg width="13" height="13" viewBox="0 0 24 24"><path d={STAR_PATH} fill="currentColor" /></svg></span>
              <div className={"rv-bar" + (d.s <= 3 ? " dim" : "")}><span style={{ "--w": d.w + "%" }}></span></div>
            </div>
            )}
            <p className="rv-note">{isLive
              ? "* 작업 다음날 자동 발송되는 만족도 조사에서 집계된 실제 데이터입니다."
              : "* 별점 분포는 시각적 예시이며, 실제 만족도 조사 데이터로 교체됩니다."}</p>
          </div>
        </div>
      </div>
    </section>);
}

/* ---------- 3. 항목별 평가 (7개) ---------- */
const ITEMS = [
  { ic: "clock", n: "약속 시간 준수", v: 4.90 },
  { ic: "umbrella", n: "작업 전 보양 상태", v: 4.88 },
  { ic: "sparkle-fill", n: "분해 청소 결과", v: 4.87 },
  { ic: "home", n: "작업 후 뒷정리", v: 4.90 },
  { ic: "circle-info", n: "유의사항 안내", v: 4.85 },
  { ic: "person", n: "작업자 복장·태도", v: 4.92 }];

function ItemScores() {
  const { Icon } = window.WantedDesignSystem_954e41;
  const data = useReviewData();
  const it = data && data.stats && data.stats.items;
  const isLive = !!(data && data.stats);
  // 실데이터 있으면 항목평균 반영, 없으면 예시(ITEMS의 v) 사용
  const items = [
    { ic: "clock", n: "약속 시간 준수", v: (it && it.punctual) || 4.90 },
    { ic: "umbrella", n: "작업 전 보양 상태", v: (it && it.protect) || 4.88 },
    { ic: "sparkle-fill", n: "분해 청소 결과", v: (it && it.clean) || 4.87 },
    { ic: "home", n: "작업 후 뒷정리", v: (it && it.cleanup) || 4.90 },
    { ic: "circle-info", n: "유의사항 안내", v: (it && it.guide) || 4.85 },
    { ic: "person", n: "작업자 복장·태도", v: (it && it.appearance) || 4.92 },
  ];
  const overall = isLive && data.stats.overall ? data.stats.overall : 4.87;
  return (
    <section className="section rv-items" id="items" data-screen-label="후기-항목별평가">
      <div className="wrap">
        <div className="rv-intro reveal">
          <span className="eyebrow">항목별 평가</span>
          <h2 className="section-title">고객님은 이런 항목들을<br />평가해주셨어요</h2>
          <p className="section-lead">한 번의 방문을 7가지 항목으로 꼼꼼히 되짚어요. 잘한 것도, 아쉬운 것도 그대로 받습니다.</p>
        </div>
        <div className="rv-item-grid">
          {items.map((it, i) =>
          <div className="rv-item reveal" data-d={i % 2} key={i}>
            <div className="rv-item-ic"><Icon name={it.ic} size={22} /></div>
            <div className="rv-item-main">
              <div className="rv-item-name">{it.n}</div>
              <div className="rv-item-stars"><Stars value={it.v} size={16} gap={2} /></div>
            </div>
            <div className="rv-item-score">{it.v.toFixed(2)}</div>
          </div>
          )}
          <div className="rv-item rv-item-wide reveal">
            <div className="rv-item-ic"><Icon name="heart-fill" size={22} /></div>
            <div className="rv-item-main">
              <div className="rv-item-name">종합 만족도 · 재이용 의향</div>
              <div className="rv-item-stars"><Stars value={overall} size={16} gap={2} /></div>
            </div>
            <div className="rv-item-score">{overall.toFixed(2)}</div>
          </div>
        </div>
        <p className="rv-note">{isLive
          ? "* 최근 만족도 조사에서 집계된 실제 항목별 평균입니다."
          : "* 항목별 수치는 예시이며, 실제 만족도 조사 데이터로 교체됩니다."}</p>
      </div>
    </section>);
}

/* ---------- 4. 후기 목록 (필터 + 카드) ---------- */
const REVIEW_LIST = [
  { cat: "에어컨", place: "성남시", detail: "스탠드 에어컨", date: "2026.06.28",
    q: "송풍팬까지 다 분해해서 눈앞에서 보여주시니 믿음이 갔어요. 시커먼 물 보고 깜짝 놀랐네요. 냄새가 확실히 사라졌습니다." },
  { cat: "세탁기", place: "용인시", detail: "드럼 세탁기", date: "2026.06.21",
    q: "드럼세탁기 쿰쿰한 냄새 때문에 불렀는데, 통 분리해서 안쪽까지 싹 닦아주셨어요. 뒷정리도 깔끔하고 시간도 잘 지켜주셨습니다." },
  { cat: "에어컨", place: "송파구", detail: "벽걸이 에어컨 2대", date: "2026.06.15",
    q: "예약이 온라인으로 30초면 끝나서 편했어요. 정찰제라 추가금 하나 없이 딱 그 금액만 냈습니다." },
  { cat: "냉장고", place: "수원시", detail: "양문형 냉장고", date: "2026.06.09",
    q: "냉장고 고무패킹 곰팡이랑 성에까지 깨끗하게. 전기료도 줄어든 느낌이에요." },
  { cat: "주방후드", place: "안양시", detail: "통후드 청소", date: "2026.05.30",
    q: "기름때로 꽉 막혔던 후드 흡입력이 확 살아났어요. 소음도 줄었고요." },
  { cat: "방충망", place: "하남시", detail: "방충망 교체", date: "2026.05.22",
    q: "본드 없이 시공해주셔서 나중에 교체도 쉽다고 하시더라고요. 미세망이라 작은 날벌레도 안 들어와요." }];

const CATS = ["전체", "에어컨", "세탁기", "냉장고", "주방후드", "방충망"];

function ReviewList() {
  const { Icon } = window.WantedDesignSystem_954e41;
  const data = useReviewData();
  const live = data && Array.isArray(data.reviews) && data.reviews.length ? data.reviews : null;
  const LIST = live || REVIEW_LIST;
  const isLive = !!live;
  useRevealLiveContent(isLive); // 로드된 후기 카드가 숨김 상태로 남지 않게 표시 처리
  const [cat, setCat] = React.useState("전체");
  // 실제 후기에 존재하는 카테고리만 필터 탭에 노출(빈 탭 숨김). 예시일 땐 기존 CATS 유지.
  const cats = isLive
    ? ["전체", ...CATS.slice(1).filter((c) => LIST.some((r) => r.cat === c))]
    : CATS;
  const shown = cat === "전체" ? LIST : LIST.filter((r) => r.cat === cat);
  const count = (c) => c === "전체" ? LIST.length : LIST.filter((r) => r.cat === c).length;
  return (
    <section className="section" id="list" data-screen-label="후기-목록">
      <div className="wrap">
        <div className="rv-intro reveal">
          <span className="eyebrow">고객의 목소리</span>
          <h2 className="section-title">직접 남겨주신 후기</h2>
        </div>
        <div className="rv-filter reveal" data-d="1" role="tablist" aria-label="품목 필터">
          {cats.map((c) =>
          <button key={c} className={"rv-tab" + (cat === c ? " on" : "")} role="tab"
            aria-selected={cat === c} onClick={() => setCat(c)}>
            {c}<span className="cnt">{count(c)}</span>
          </button>
          )}
        </div>
        <div className="rv-grid">
          {shown.map((r, i) =>
          <article className="rv-card reveal" data-d={i % 3} key={(r.name || "") + r.place + r.date + i}>
            <div className="rv-card-top">
              <Stars value={r.overall || 5} size={18} gap={3} />
              <span className="rv-card-cat">{r.cat}</span>
            </div>
            <p className="rv-card-q">"{r.q}"</p>
            <div className="rv-card-meta">
              <span className="rv-card-loc"><Icon name="location-fill" size={18} /></span>
              <div>
                <div className="rv-card-place">{[r.name && (r.name + "님"), r.place, r.detail].filter(Boolean).join(" · ")}</div>
                <div className="rv-card-detail">작업일 {r.date}</div>
              </div>
            </div>
          </article>
          )}
        </div>
        <p className="rv-note">{isLive
          ? "* 최근 만족도 조사에서 수집된 실제 고객 후기입니다. (개인정보 보호를 위해 이름 가운데 글자는 가려 표시)"
          : "* 위 후기는 예시이며, 실제 만족도 조사에서 수집된 고객 후기로 교체됩니다."}</p>
      </div>
    </section>);
}

/* ---------- 5. 신뢰 문구 ---------- */
function TrustNote() {
  const { Icon } = window.WantedDesignSystem_954e41;
  return (
    <section className="section rv-trust" data-screen-label="후기-신뢰문구">
      <div className="wrap">
        <div className="rv-trust-ic reveal"><Icon name="verified-check" size={30} /></div>
        <h2 className="reveal" data-d="1">모든 후기는 작업 다음날 자동 발송되는<br />만족도 조사로 수집돼요.</h2>
        <p className="reveal" data-d="2"><span style={{ color: "#fff", fontWeight: 700 }}>조작 없는, 진짜 고객의 목소리</span>입니다.</p>
      </div>
    </section>);
}

/* ---------- 6. 마지막 예약 CTA ---------- */
function ReviewsCTA() {
  const { Button } = window.WantedDesignSystem_954e41;
  return (
    <section className="final" data-screen-label="후기-예약CTA">
      <div className="wrap final-inner">
        <div className="reveal">
          <span className="eyebrow">예약 안내</span>
          <h2>당신도 후기의<br />주인공이 되어보세요</h2>
          <p>깐깐하게, 꼼꼼하게. 다음 만족도 조사의 주인공은 회원님입니다.</p>
          <div className="final-cta">
            <Button size="large" onClick={() => window.location.assign(window.BOOK_URL)}
              style={{ background: "var(--mint-500)", color: "#fff", height: 58, fontSize: 18, padding: "0 34px", borderRadius: 14 }}
              leadingIcon="clock">
              30초 온라인 예약
            </Button>
            <Button size="large" variant="outlined" onClick={() => { window.callPhone(); }}
              style={{ height: 58, fontSize: 18, padding: "0 30px", borderRadius: 14, color: "#fff", boxShadow: "inset 0 0 0 1px rgba(255,255,255,.5)" }}
              leadingIcon="phone">
              전화 상담
            </Button>
          </div>
        </div>
      </div>
    </section>);
}

Object.assign(window, {
  Stars, ReviewsNav, ReviewsHero, SummaryScore, ItemScores, ReviewList, TrustNote, ReviewsCTA
});