/* All page sections below the hero. */

/* ---------- Nav ---------- */
function Nav() {
  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="#top" 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="#services" className="nav-drop-trigger">
              서비스 상품
              <Chevron />
            </a>
            <div className="nav-menu" role="menu">
              {window.SERVICE_LIST.map((s, i) => {
                const u = window.SERVICE_URLS[s];
                return (
                  <a key={i} href={u || "#services"} role="menuitem">
                    {s}{!u && <span className="soon">준비중</span>}
                  </a>
                );
              })}
            </div>
          </div>
          <a href="/reviews">고객 후기</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) => {
          const u = window.SERVICE_URLS[s];
          return (
            <a key={i} href={u || "#services"} className="svc" onClick={closeMenu}>
              {s}{!u && <span className="soon">준비중</span>}
            </a>
          );
        })}
        <a href="/reviews" onClick={closeMenu}>고객 후기</a>
        <a href="/blog" onClick={closeMenu}>작업사례 &amp; 관리팁</a>
        <a href={window.TEL_HREF} onClick={closeMenu} style={{ color: "var(--mint-600)", fontWeight: 700 }}>전화 상담 {window.TEL}</a>
      </div>
    </header>);

}

/* ---------- Trust bar ---------- */
function TrustBar() {
  const data = useReviewData();
  const overall = (data && data.stats && data.stats.overall) ? data.stats.overall : 4.87;
  const items = [
    { render: () => <><CountUp end={12000} /><span className="u">건+</span></>, label: "누적 시공" },
    { render: () => <><CountUp end={overall} decimals={2} /><span className="u">점</span></>, label: "고객 만족도" },
    { render: () => <><CountUp end={78} /><span className="u">%</span></>, label: "재구매율" },
    { render: () => <><CountUp end={8} /><span className="u">개</span></>, label: "서울·경기 지점" },
    { render: () => <><CountUp end={3} /><span className="u">개월</span></>, label: "무상 A/S" }];
  return (
    <section className="trust snap">
      <div className="wrap">
        <div className="trust-grid">
          {items.map((t, i) =>
          <div className="trust-item reveal" data-d={i} key={i}>
              <div className="trust-num">{t.render()}</div>
              <div className="trust-label">{t.label}</div>
            </div>
          )}
        </div>
      </div>
    </section>);
}

/* ---------- Differentiators ---------- */
const DIFFS = [
{ ic: "company-check", t: "외주 없는 본사 직영", d: "100% 본사 소속 직원이 직접 방문합니다. 하청·외주는 없습니다." },
{ ic: "tune", t: "부품까지 완전 분해", d: "보여주기식이 아닌, 작은 부품 하나까지 분해해 씻어내는 진짜 분해청소." },
{ ic: "tag", t: "추가요금 없는 가격 정찰제", d: "당일 추가금 0원. 안내드린 견적 그대로 결제합니다." },
{ ic: "umbrella", t: "전 직원 영업배상책임보험 가입", d: "만일의 상황까지 책임지는, 안심할 수 있는 시공." },
{ ic: "graduation", t: "자체 교육장·연구소 운영", d: "검증된 기술로 무장한 전문 인력이 방문합니다." },
{ ic: "sparkle-fill", t: "친환경 세척 + 피톤치드 살균", d: "웰존 인증 세척제를 기본으로 사용해 가족 모두 안심." }];

function Differentiators() {
  const { Card, Icon } = window.WantedDesignSystem_954e41;
  return (
    <section className="section snap" id="why">
      <div className="wrap">
        <div className="reveal" style={{ maxWidth: 720 }}>
          <span className="eyebrow">왜 깔끔한친구들인가</span>
          <h2 className="section-title">우리 가족이 쓰는 가전이라는 마음으로,<br />보이지 않는 곳까지 제대로 합니다.</h2>
          <p className="section-lead">그래서 저희는 다릅니다. 눈에 보이는 곳만 닦는 청소가 아니라, 완전히 분해해 씻어내는 프리미엄 케어를 약속합니다.</p>
        </div>
        <div className="diff-grid">
          {DIFFS.map((c, i) =>
          <Card key={i} className="diff-card reveal" data-d={i % 3} interactive radius={18}
          style={{ padding: "30px 28px 32px" }}>
              <div className="diff-ic"><Icon name={c.ic} size={26} /></div>
              <div className="diff-no">0{i + 1}</div>
              <h3 style={{ marginTop: 6 }}>{c.t}</h3>
              <p>{c.d}</p>
            </Card>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- Gallery ---------- */
function Gallery() {
  const cells = [
  { c: "g1", ph: "대표 작업 영상 / Before·After" },
  { c: "g2", ph: "에어컨 분해 전·후" },
  { c: "g3", ph: "세탁기 내부 세척" },
  { c: "g4", ph: "부품 세척 장면" },
  { c: "g5", ph: "작업 디테일" },
  { c: "g6", ph: "완료 후 현장" }];

  return (
    <section className="section gallery snap" id="gallery">
      <div className="wrap">
        <div className="reveal" style={{ maxWidth: 720 }}>
          <span className="eyebrow">실제 작업 기록</span>
          <h2 className="section-title">사진과 영상으로 확인하는<br />분해청소의 차이</h2>
        </div>
        <div className="gal-grid reveal">
          {cells.map((g) =>
          <image-slot key={g.c} id={"gal-" + g.c} class={g.c} shape="rounded" radius="16"
          fit="cover" placeholder={g.ph}></image-slot>
          )}
        </div>
        <div className="gal-quote reveal">
          <p>"보이지 않는 곳까지 깨끗해야,<br /><span className="mk">진짜 청소니까요.</span>"</p>
        </div>
      </div>
    </section>);

}

/* ---------- Services ---------- */
const SERVICES = [
{ tag: "세탁기", t: "세탁기 클리닝", d: "매일 입는 옷을 세탁하는 세탁기, 내부 곰팡이를 싹 제거해보세요." },
{ tag: "에어컨", t: "에어컨 클리닝", d: "에어컨 속 곰팡이·먼지는 기관지 질환을 유발합니다." },
{ tag: "방충망", t: "방충망 교체 시공", d: "더 촘촘하고 강한 고정력으로 작은 벌레 차단은 물론 안전성과 내구성까지." },
{ tag: "주방후드", t: "주방후드 클리닝 & 교체", d: "막힌 기름으로 인한 식중독, 흡입력 저하 말끔하게 해결하세요." },
{ tag: "냉장고", t: "냉장고 클리닝", d: "냉장고 속 각종 세균 제거, 화재 예방은 덤!" }];

/* 서비스명 → 상세페이지 URL (방충망은 준비 중 — 링크 없음). Nav·Services·각 상세페이지 DetailNav에서 공용. */
const SERVICE_URLS = {
  "세탁기 클리닝": "/washer",
  "에어컨 클리닝": "/aircon",
  "방충망 교체 시공": "/screen",
  "주방후드 클리닝 & 교체": "/hood",
  "냉장고 클리닝": "/fridge"
};

function Services() {
  const { Card, Button } = window.WantedDesignSystem_954e41;
  return (
    <section className="section snap" id="services">
      <div className="wrap">
        <div className="reveal" style={{ maxWidth: 720 }}>
          <span className="eyebrow">서비스 안내</span>
          <h2 className="section-title">우리 집 가전, 무엇이든<br />깔끔하게 맡겨주세요</h2>
          <p className="section-lead">품목별 전문 케어로 진행합니다. 정확한 견적은 예약·상담에서 안내드려요.</p>
        </div>
        <div className="svc-grid">
          {SERVICES.map((s, i) =>
          <Card key={i} className="svc-card reveal" data-d={i % 3} interactive radius={18} style={{ padding: 0 }}>
              <div className="svc-photo">
                <image-slot id={"svc-" + i} shape="rect" fit="cover" placeholder={s.t + " 사진"}></image-slot>
              </div>
              <div className="svc-body">
                <span className="svc-tag">{s.tag}</span>
                <h3>{s.t}</h3>
                <p>{s.d}</p>
                <div className="svc-actions">
                  <Button size="medium" variant="outlined" fullWidth
                onClick={() => { const u = window.SERVICE_URLS[s.t]; if (u) window.location.href = u; else window.location.assign(window.BOOK_URL); }}
                style={{ color: "var(--navy-700)", boxShadow: "inset 0 0 0 1px var(--line-normal-strong)" }}>
                    {window.SERVICE_URLS[s.t] ? "자세히 보기" : "준비 중"}
                  </Button>
                  <Button size="medium" fullWidth onClick={() => window.location.assign(window.BOOK_URL)}
                style={{ background: "var(--mint-500)", color: "#fff" }}>
                    예약
                  </Button>
                </div>
              </div>
            </Card>
          )}
          <div className="svc-card reveal" data-d={2} style={{
            display: "flex", flexDirection: "column", justifyContent: "center", gap: 16,
            padding: "34px 30px", borderRadius: 18, background: "var(--navy-800)", color: "#fff"
          }}>
            <div style={{ fontFamily: "var(--font-brand)", fontWeight: 800, fontSize: 24, letterSpacing: "-0.02em", lineHeight: 1.35 }}>
              찾는 서비스가<br />없으신가요?
            </div>
            <p style={{ margin: 0, color: "rgba(255,255,255,.75)", fontSize: 15, lineHeight: 1.6 }}>
              전화 한 통이면 전문 상담원이 우리 집에 맞는 케어를 안내해드립니다.
            </p>
            <Button size="large" onClick={() => {window.callPhone();}}
            style={{ background: "#fff", color: "var(--navy-800)", alignSelf: "flex-start", borderRadius: 12 }}
            leadingIcon="phone">
              {window.TEL}
            </Button>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- Reviews ---------- */
const REVIEWS = [
{ n: "김○○", s: "에어컨 클리닝", stars: 5, q: "분해하는 과정을 다 보여주셔서 믿음이 갔어요. 물이 새까맣게 나오는 걸 보고 진작 할 걸 싶었습니다." },
{ n: "이○○", s: "세탁기 클리닝", stars: 5, q: "예약부터 마무리까지 정말 꼼꼼하셨어요. 추가금 없이 안내받은 그대로라 마음이 편했습니다." },
{ n: "박○○", s: "주방후드 교체", stars: 5, q: "이 친구들 진짜 꼼꼼하게 잘하시네요. 작업 후 주변까지 깨끗하게 정리해주셔서 감동." }];

function Reviews() {
  const { Rating, Icon } = window.WantedDesignSystem_954e41;
  const data = useReviewData();
  const isLive = !!(data && data.stats);
  const overall = isLive && data.stats.overall ? data.stats.overall : 4.87;

  // 품목별 매칭: 이 페이지 품목(에어컨/세탁기 등) 실제 후기 우선, 없으면 전체 후기. 데이터 없으면 예시.
  let cards = REVIEWS;
  if (data && Array.isArray(data.reviews) && data.reviews.length) {
    const cat = currentReviewCategory();
    const matched = cat ? data.reviews.filter((r) => r.cat === cat) : [];
    const pick = (matched.length ? matched : data.reviews).slice(0, 3);
    cards = pick.map((r) => ({
      n: r.name || "고객",
      s: r.detail || (r.cat ? r.cat + " 클리닝" : "클리닝"),
      stars: r.overall || 5,
      q: r.q,
    }));
  }
  const liveCards = cards !== REVIEWS;
  useRevealLiveContent(liveCards);

  return (
    <section className="section reviews snap" id="reviews">
      <div className="wrap">
        <div className="rev-top">
          <div className="reveal">
            <span className="eyebrow" style={{ color: "var(--mint-400)" }}>고객 만족도</span>
            <div className="rev-score" style={{ marginTop: 14 }}>
              <span className="big"><CountUp end={overall} decimals={2} /></span>
              <span className="max">/ 5.0</span>
            </div>
            <div style={{ marginTop: 10 }}>
              <Rating value={5} readOnly size={22} />
            </div>
          </div>
          <div className="reveal" data-d="1">
            <h3 className="rev-title">시공을 마친 고객의 78%가<br />다시 깔끔한친구들을 찾습니다.</h3>
          </div>
        </div>
        <div className="rev-cards">
          {cards.map((r, i) =>
          <div className="rev-card reveal" data-d={i} key={i}>
              <Rating value={r.stars} readOnly size={18} />
              <p className="quote">"{r.q}"</p>
              <div className="rev-meta">
                <div className="rev-ava">{r.n[0]}</div>
                <div>
                  <div className="rev-name">{r.n}</div>
                  <div className="rev-svc">{r.s}</div>
                </div>
              </div>
            </div>
          )}
        </div>
        <p style={{ marginTop: 22, fontSize: 12.5, color: "rgba(255,255,255,.4)" }}>{liveCards
          ? "* 작업 다음날 자동 발송되는 만족도 조사로 수집된 실제 고객 후기입니다."
          : "* 실제 고객 후기를 바탕으로 한 예시입니다."}</p>
      </div>
    </section>);
}

/* ---------- FAQ ---------- */
const FAQS = [
{ q: "출장 가능 지역이 어떻게 되나요?", a: "서울, 경기도 출장 가능합니다. 그 외 지역이라도 유선으로 문의 주시면 상세히 안내해드리겠습니다." },
{ q: "대량건 및 야간 작업도 가능한가요?", a: "대량건 및 야간 작업은 유선으로 문의 주시면 상세히 안내해드리겠습니다." },
{ q: "출장비가 따로 있나요?", a: "서울·경기 출장 지역은 별도 출장비가 없습니다. 안내드린 견적 외 당일 추가금은 발생하지 않는 가격 정찰제로 운영합니다." },
{ q: "예약 변경·취소는 언제까지 가능한가요?", a: "방문 하루 전까지 전화 또는 온라인으로 자유롭게 변경·취소하실 수 있습니다. 일정 조율이 필요하시면 언제든 편하게 연락 주세요." },
{ q: "A/S는 어떻게 받나요?", a: "시공 후 3개월간 무상 A/S를 제공합니다. 동일 증상이 재발할 경우 대표전화로 접수해 주시면 빠르게 재방문해 드립니다." },
{ q: "주차는 어떻게 하나요?", a: "부득이하게 주차 공간이 부족해 유료 주차를 해야 하는 경우 주차비가 청구 됩니다." }];

function FAQ({ items }) {
  const { Accordion } = window.WantedDesignSystem_954e41;
  const list = items || FAQS;
  return (
    <section className="section snap" id="faq" style={{ background: "var(--mint-tint)" }}>
      <div className="wrap">
        <div className="faq-grid">
          <div className="reveal">
            <span className="eyebrow">자주 묻는 질문</span>
            <h2 className="section-title">궁금한 점,<br />먼저 알려드릴게요</h2>
            <p className="section-lead">더 궁금한 점이 있다면 언제든 편하게 전화 주세요. 연중무휴로 상담해 드립니다.</p>
            <a href={window.TEL_HREF} className="foot-phone" style={{ color: "var(--navy-800)", display: "inline-block", marginTop: 18, textDecoration: "none" }}>{window.TEL}</a>
          </div>
          <div className="reveal" data-d="1">
            <div className="faq-list">
              {list.map((f, i) =>
              <Accordion key={i} title={f.q} defaultOpen={i === 0}>
                  <span style={{ lineHeight: 1.7 }}>{f.a}</span>
                </Accordion>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- Final CTA ---------- */
function FinalCTA() {
  const { Button } = window.WantedDesignSystem_954e41;
  return (
    <section className="final snap">
      <div className="wrap final-inner">
        <div className="reveal">
          <span className="eyebrow">예약 안내</span>
          <h2>지금 30초면<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>);

}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="foot-grid">
          <div>
            <div className="foot-brand"><img src="assets/logo-kkf.png" alt="깔끔한친구들" className="foot-logo" /></div>
            <p className="foot-slo">깐깐하게, 꼼꼼하게.<br />우리 가족이 쓰는 가전이라는 마음으로 일합니다.</p>
            <div className="foot-biz">
              <div>대표 이종욱 · 박훈동</div>
              <div>사업자등록번호 336-04-02133</div>
              <div><a href="mailto:phd1022@gmail.com">phd1022@gmail.com</a></div>
            </div>
          </div>
          <div>
            <div className="foot-h">연락처</div>
            <a href={window.TEL_HREF} className="foot-phone">{window.TEL}</a>
            <div style={{ marginTop: 8, fontSize: 14, color: "rgba(255,255,255,.5)" }}>연중무휴 상담</div>
            <div style={{ marginTop: 14 }}>
              <a href={window.BOOK_URL} rel="noopener" style={{ fontWeight: 700, color: "var(--mint-400)" }}>온라인 예약 바로가기 →</a>
            </div>
          </div>
          <div>
            <div className="foot-h">출장 지역</div>
            <div style={{ fontSize: 15, lineHeight: 1.8, color: "rgba(255,255,255,.72)" }}>서울 전 지역<br />경기 전 지역<br /><span style={{ color: "rgba(255,255,255,.45)", fontSize: 13.5 }}>서울·경기 8개 지점 운영</span></div>
          </div>
        </div>
        <div className="foot-line">
          <span>© 2026 깔끔한친구들. All rights reserved.</span>
          <span>가전 분해청소 · 세탁기 · 에어컨 · 방충망 · 주방후드 · 냉장고</span>
        </div>
      </div>
    </footer>);

}

/* ---------- Mobile fixed action bar ---------- */
function MobileBar() {
  const { Icon } = window.WantedDesignSystem_954e41;
  return (
    <div className="mbar">
      <a className="call" href={window.TEL_HREF} aria-label="전화 상담">
        <Icon name="phone" size={22} color="#fff" />
      </a>
      <a className="kakao" href={window.KAKAO_URL} target="_blank" rel="noopener" aria-label="카카오톡 상담">
        <Icon name="bubble-fill" size={22} color="#3A1D1D" />
        <span>카톡상담</span>
      </a>
      <a className="book" href={window.BOOK_URL} rel="noopener">예약</a>
    </div>);

}
function PhoneGlyph() {
  const { Icon } = window.WantedDesignSystem_954e41;
  return <Icon name="phone" size={22} color="#fff" />;
}

function Chevron() {
  return (
    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" className="nav-chev" aria-hidden="true">
      <path d="M6 9l6 6 6-6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}
const SERVICE_LIST = SERVICES.map((s) => s.t);

Object.assign(window, { Nav, TrustBar, Differentiators, Gallery, Services, Reviews, FAQ, FinalCTA, Footer, MobileBar, Chevron, SERVICE_LIST, SERVICE_URLS });