/* 냉장고 분해청소 상세페이지 — 전용 섹션.
   Nav/Footer/QuickMenu/Reviews/FAQ는 메인·다른 상세페이지와 동일하게 재사용.
   구조·톤·CSS(wash.css)는 에어컨 페이지와 동일, 내용만 냉장고용. */

const HOME = "/";
const THIS_SVC = "냉장고 클리닝";

/* ---------- Detail Nav (메인과 동일, 현재 서비스만 냉장고로 표시) ---------- */
function DetailNav() {
  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">
              <a href="#top" role="menuitem" style={{ background: "var(--mint-soft)", color: "var(--mint-600)" }}>{THIS_SVC}</a>
              {window.SERVICE_LIST.filter((s) => s !== THIS_SVC).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="/reviews">고객 후기</a>
          <a href="/blog">작업사례 & 관리팁</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>
        <a href="#top" className="svc cur" onClick={closeMenu}>{THIS_SVC}</a>
        {window.SERVICE_LIST.filter((s) => s !== THIS_SVC).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="/reviews" onClick={closeMenu}>고객 후기</a>
        <a href="/blog" onClick={closeMenu}>작업사례 & 관리팁</a>
        
      </div>
    </header>);

}

/* ---------- 1. Page hero ---------- */
function PageHero() {
  return (
    <section className="phero" id="top" data-screen-label="냉장고-히어로">
      <div className="phero-bg">
        <video className="phero-video" autoPlay muted loop playsInline
          poster="assets/fridge-hero-poster.jpg">
          <source src="assets/fridge-hero-bg.mp4" type="video/mp4" />
        </video>
        <image-slot id="fridge-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>
            <a href={HOME + "#services"}>서비스 상품</a>
            <span className="sep">›</span>
            <span className="cur">냉장고 클리닝</span>
          </div>
          <div className="reveal" data-d="1">
            <span className="phero-badge">냉장고 분해청소</span>
          </div>
          <h1 className="reveal" data-d="2">냉장고 클리닝</h1>
          <p className="phero-sub reveal" data-d="3">
            냉장고 속 각종 세균 제거, 화재 예방은 덤!
          </p>
        </div>
      </div>
    </section>);

}

/* ---------- 2. 왜 필요할까요 (문제 제기 5개) ---------- */
const PROBLEMS = [
{ ic: "circle-close", t: "저온성 세균 번식", d: "저온에서도 자라는 세균이 음식물 부패의 원인이 됩니다." },
{ ic: "triangle-exclamation-fill", t: "고무패킹 곰팡이", d: "패킹 속 곰팡이와 각종 세균이 우리 가족 건강을 위협합니다." },
{ ic: "circle-close-fill", t: "냉장고 악취", d: "밴 냄새가 냉장 보관 품질을 저하시킵니다." },
{ ic: "sparkle", t: "성에 축적", d: "성에로 세균 번식과 과도한 전기료가 발생할 수 있습니다." },
{ ic: "fire", t: "팬 모터 먼지", d: "팬 모터 내부 먼지를 제거해 화재를 예방합니다." }];


function ProblemWhy() {
  const { Icon } = window.WantedDesignSystem_954e41;
  return (
    <section className="section" id="why-fridge" data-screen-label="냉장고-문제제기">
      <div className="wrap">
        <div className="intro reveal">
          <span className="eyebrow">왜 필요할까요</span>
          <h2 className="edu-q">
            매일 여는 냉장고 안쪽,<br />
            <span className="mk">세균과 성에가 쌓입니다</span>
          </h2>
          <p className="section-lead">
            냉장고 내부에는 각종 세균과 성에로 식중독 위험이 있습니다.
            또한 팬 모터 내부 먼지로 화재와 과도한 전기료가 발생할 위험이 있습니다.
          </p>
        </div>
        <div className="prob-grid prob-5">
          {PROBLEMS.map((p, i) =>
          <div className="prob-card reveal" data-d={i % 3} key={i}>
              <span className="prob-ic"><Icon name={p.ic} size={26} /></span>
              <h3>{p.t}</h3>
              <p>{p.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- 3. 작업 사진 & Before/After 갤러리 ---------- */
const WORK_PHOTOS = [
{ id: "fridge-work-1", cap: "서랍·선반 탈거" },
{ id: "fridge-work-2", cap: "내부 세척" },
{ id: "fridge-work-3", cap: "선반,서랍 세척" },
{ id: "fridge-work-4", cap: "상단 먼지 제거" }];


function Gallery() {
  const { Icon } = window.WantedDesignSystem_954e41;
  const [pos, setPos] = React.useState(50);
  const ref = React.useRef(null);
  const drag = React.useRef(false);

  const move = React.useCallback((clientX) => {
    const el = ref.current;
    if (!el) return;
    const r = el.getBoundingClientRect();
    const p = Math.max(0, Math.min(100, (clientX - r.left) / r.width * 100));
    setPos(p);
  }, []);

  const onDown = (e) => {
    drag.current = true;
    if (e.pointerType === "mouse") {
      if (ref.current && ref.current.setPointerCapture) {
        try { ref.current.setPointerCapture(e.pointerId); } catch (err) {}
      }
      move(e.clientX);
    }
  };
  const onMove = (e) => { if (drag.current) move(e.clientX); };
  const onUp = () => { drag.current = false; };

  return (
    <section className="section" style={{ background: "var(--mint-tint)" }} data-screen-label="냉장고-갤러리">
      <div className="wrap">
        <div className="intro reveal">
          <span className="eyebrow">작업 사례</span>
          <h2 className="section-title">눈으로 확인하는<br />분해청소의 결과</h2>
          <p className="section-lead">부품별로 탈거해 안쪽 깊은 곳까지 세척·살균합니다. 실제 작업 사진으로 확인하세요.</p>
        </div>

        {/* 작업 사진 4장 */}
        <div className="case-rowlbl reveal"><span className="ic"><Icon name="image" size={17} /></span>작업 사진</div>
        <div className="work-row reveal" data-d="1">
          {WORK_PHOTOS.map((w) =>
          <div className="work-tile" key={w.id}>
              <image-slot id={w.id} shape="rect" fit="cover" placeholder={w.cap + " 사진"}></image-slot>
              <span className="work-cap">{w.cap}</span>
            </div>
          )}
        </div>

        {/* 인용구 */}
        <div className="case-quote reveal">
          <span className="q-mark">“</span>
          <p>보이지 않는 곳까지 깨끗해야,<br />진짜 청소니까요.</p>
        </div>

        {/* 청소 전후 슬라이더 */}
        <div className="case-rowlbl reveal"><span className="ic"><Icon name="tune" size={17} /></span>청소 전 · 후 비교</div>
        <div className="ba-wrap reveal" data-d="1">
          <div className="ba-slider" ref={ref}
            onPointerDown={onDown} onPointerMove={onMove}
            onPointerUp={onUp} onPointerCancel={onUp} onPointerLeave={onUp}>
            <div className="ba-layer">
              <image-slot id="fridge-ba-after" shape="rect" fit="cover" placeholder="청소 후 사진 (After)"></image-slot>
            </div>
            <div className="ba-clip" style={{ width: pos + "%" }}>
              <div className="ba-layer" style={{ width: ref.current ? ref.current.getBoundingClientRect().width : "100vw" }}>
                <image-slot id="fridge-ba-before" shape="rect" fit="cover" placeholder="청소 전 사진 (Before)"></image-slot>
              </div>
            </div>
            <span className="ba-pill before">BEFORE</span>
            <span className="ba-pill after">AFTER</span>
            <div className="ba-handle" style={{ left: pos + "%" }}>
              <div className="ba-knob"><Icon name="chevron-left" size={16} /><Icon name="chevron-right" size={16} /></div>
            </div>
          </div>
          <p className="ba-cap">← 손잡이를 끌어 비교하세요 →</p>
        </div>
      </div>
    </section>);

}

/* ---------- 4. 차별점 6가지 ---------- */
const FRIDGE_DIFFS = [
{ ic: "refresh", t: "3개월 무상 A/S 보장", d: "서비스 불만족·기기 오작동 등 3개월간 책임지고 무상 A/S로 대응합니다." },
{ ic: "company-check", t: "외주 없는 본사 운영", d: "하청 없이 100% 본사 직원이 직접 방문, 언제나 동일한 최상의 서비스를 약속합니다." },
{ ic: "sparkle-fill", t: "친환경 인증 세척제 사용", d: "웰존사 친환경 인증 전용 세척제만 사용, 유해 성분 걱정 없이 안심할 수 있습니다." },
{ ic: "umbrella", t: "전 인원 1억 책임보험 가입", d: "작업 중 가전 손상·예기치 못한 사고까지, 전 직원이 영업배상 1억 원 책임보험에 가입해 끝까지 책임집니다." },
{ ic: "tag", t: "추가요금 없는 가격 정찰제", d: "당일 갑자기 붙는 금액 없음. 명시된 금액 외 추가 비용은 일체 없습니다." },
{ ic: "eye", t: "세척 전·후 고객 확인 서비스", d: "세척 전후 상태를 직접 확인시켜 드리고, 만족하실 때까지 세척합니다." }];


function FridgeDifferentiators() {
  const { Card, Icon } = window.WantedDesignSystem_954e41;
  return (
    <section className="section" data-screen-label="냉장고-차별점">
      <div className="wrap">
        <div className="intro reveal">
          <span className="eyebrow">깔끔한친구들의 약속</span>
          <h2 className="section-title">믿고 맡길 수 있는<br />6가지 이유</h2>
        </div>
        <div className="diff-grid">
          {FRIDGE_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>);

}

/* ---------- 5. 클리닝 프로세스 (8단계) ---------- */
const PROCESS = [
{ ic: "write", t: "작업 신청", d: "온라인·전화로 간편하게 접수합니다." },
{ ic: "calendar", t: "1일 전·당일 알림 톡 발송", d: "예약 날짜와 시간을 다시 안내해 드립니다." },
{ ic: "person-fill", t: "엔지니어 방문", d: "본사 소속 전문 엔지니어가 직접 방문합니다." },
{ ic: "eye", t: "외관 및 정상 작동 점검", d: "작업 전 제품 상태와 작동 여부를 확인합니다." },
{ ic: "tune", t: "서랍/선반 탈거", d: "탈거 가능한 서랍·선반을 모두 분리합니다." },
{ ic: "sparkle-fill", t: "세척 및 살균", d: "내부·패킹·서랍을 개별 세척하고 항균 살균합니다." },
{ ic: "circle-check", t: "작동 상태 확인", d: "재조립 후 정상 작동 여부를 함께 확인합니다." },
{ ic: "check", t: "주변 정리정돈", d: "작업 주변까지 깨끗하게 정리하고 마무리합니다." }];


function Process() {
  const { Icon } = window.WantedDesignSystem_954e41;
  return (
    <section className="section" data-screen-label="냉장고-프로세스" style={{ paddingBottom: 56 }}>
      <div className="wrap">
        <div className="intro reveal">
          <span className="eyebrow">클리닝 프로세스</span>
          <h2 className="section-title">신청부터 마무리까지,<br />8단계로 꼼꼼하게</h2>
          <p className="section-lead">정해진 순서대로 빠짐없이 진행합니다. 어느 단계 하나 대충 넘기지 않습니다.</p>
        </div>
        <div className="tl">
          {PROCESS.map((s, i) =>
          <div className={"tl-step reveal" + (i === 4 || i === 5 ? " key" : "")} data-d={i % 3} key={i}>
              <div className="hd">
                <div className="tl-no">{String(i + 1).padStart(2, "0")}</div>
                <span className="tl-ic"><Icon name={s.ic} size={22} /></span>
              </div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- 6. 주문 전 필독 사항 ---------- */
const NOTICE = [
<>냉장고 뒤쪽 <b>팬룸 먼지 제거 시 작업 공간이 현저히 좁은 경우</b>, 팬룸 청소는 생략될 수 있습니다.</>];


function NoticeBox() {
  const { Icon } = window.WantedDesignSystem_954e41;
  return (
    <section className="section-sm" data-screen-label="냉장고-필독" style={{ paddingTop: 40, paddingBottom: 24 }}>
      <div className="wrap">
        <div className="notice reveal">
          <div className="notice-hd">
            <span className="ic"><Icon name="triangle-exclamation-fill" size={22} /></span>
            <h3>이런 경우 서비스가 제한될 수 있습니다</h3>
          </div>
          <div className="notice-body">
            {NOTICE.map((t, i) =>
            <div className="notice-item" key={i}>
                <span className="n">{i + 1}</span>
                <p>{t}</p>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- 7. 유의사항 ---------- */
const CAUTIONS = [
{ ic: "camera", t: <>주문하신 가전 확인과 작업환경 사전 체크를 위해 <b>사진 전송을 요청</b>할 수 있습니다.</> },
{ ic: "calendar", t: <>일정 확정 후 <b>예약일 기준 1일 전, 당일 취소·변경 시</b> 예약금이 청구됩니다. 이후 서비스 일정은 다소 지연될 수 있습니다.</> },
{ ic: "location", t: <>서비스 당일 <b>유료주차가 불가피한 경우</b> 주차 요금을 부담해 주셔야 합니다.</> }];


function Cautions() {
  const { Icon } = window.WantedDesignSystem_954e41;
  return (
    <section className="section-sm" data-screen-label="냉장고-유의사항" style={{ paddingTop: 24, paddingBottom: 56 }}>
      <div className="wrap">
        <div className="intro reveal">
          <span className="eyebrow">유의사항</span>
          <h2 className="section-title" style={{ fontSize: "clamp(24px,3.4vw,34px)" }}>예약 전 확인해 주세요</h2>
        </div>
        <div className="caution-grid">
          {CAUTIONS.map((c, i) =>
          <div className="caution-card reveal" data-d={i} key={i}>
              <span className="ic"><Icon name={c.ic} size={22} /></span>
              <p>{c.t}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- 8. 예약 안내 (가격 + CTA) ---------- */
const PRICES = [
{
  kind: "일반 냉장고 단문형", desc: "냉동·냉장 단문 도어", amount: "120,000", won: "원", feat: false, ic: "refresh",
  items: ["서랍·선반 완전 분해 세척", "고무패킹 곰팡이 살균", "3개월 무상 A/S"]
},
{
  kind: "일반 냉장고 양문형", desc: "양문형·프렌치 도어", amount: "140,000", won: "원", feat: true, ic: "tune",
  items: ["서랍·선반 완전 분해 세척", "고무패킹 곰팡이 살균", "3개월 무상 A/S"]
},
{
  kind: "김치냉장고 일반형", desc: "뚜껑형 김치냉장고", amount: "80,000", won: "원", feat: false, ic: "sparkle-fill",
  items: ["내부·패킹 개별 세척·살균", "청소 전후 확인 서비스", "3개월 무상 A/S"]
},
{
  kind: "김치냉장고 스탠드형", desc: "스탠드형 김치냉장고", amount: "120,000", won: "원", feat: false, ic: "tag",
  items: ["서랍·선반 완전 분해 세척", "청소 전후 확인 서비스", "3개월 무상 A/S"]
}];


function Pricing() {
  const { Button, Icon } = window.WantedDesignSystem_954e41;
  return (
    <section className="section price" id="reserve" data-screen-label="냉장고-예약안내">
      <div className="wrap">
        <div className="intro center reveal">
          <span className="eyebrow" style={{ justifyContent: "center" }}>예약 안내</span>
          <h2 className="section-title">냉장고 클리닝 가격</h2>
          <p className="section-lead" style={{ margin: "18px auto 0" }}>가격 정찰제로 운영합니다. 안내드린 금액 외 당일 추가금은 없습니다.</p>
        </div>
        <div className="price-grid">
          {PRICES.map((p, i) =>
          <div className={"price-card reveal" + (p.feat ? " feat" : "")} data-d={i % 2} key={i}>
              <div className="price-kind">{p.kind}</div>
              <div className="price-desc">{p.desc}</div>
              <div className="price-amt">
                <span className="num">{p.amount}</span>
                <span className="won">{p.won}</span>
              </div>
              <div className="price-note">부가세 포함 · 서울·경기 출장비 무료</div>
              <ul className="price-list">
                {p.items.map((it, j) =>
              <li key={j}><span className="ck"><Icon name="circle-check-fill" size={18} /></span>{it}</li>
              )}
              </ul>
              <div className="actions">
                <Button size="large" fullWidth leadingIcon="clock" onClick={() => window.location.assign(window.BOOK_URL)}
              style={{ background: p.feat ? "var(--mint-500)" : "var(--navy-800)", color: "#fff", height: 54, fontSize: 16, borderRadius: 12 }}>
                  온라인 예약하기
                </Button>
                <Button size="large" variant="outlined" onClick={() => {window.callPhone();}}
              style={{ height: 54, fontSize: 16, borderRadius: 12, flex: "0 0 auto", padding: "0 20px", color: "var(--navy-700)", boxShadow: "inset 0 0 0 1px var(--line-normal-strong)" }}
              leadingIcon="phone">
                  전화
                </Button>
              </div>
            </div>
          )}
        </div>
        <p className="price-foot">일부 대형·업소용·특수 모델은 추가금이 있으며, 예약 시 안내드립니다.</p>
        <p className="price-foot" style={{ marginTop: 6 }}>온라인 예약은 24시간 · 전화 상담 {window.TEL} (연중무휴)</p>
      </div>
    </section>);

}

Object.assign(window, {
  DetailNav, PageHero, ProblemWhy, Gallery,
  FridgeDifferentiators, Process, NoticeBox, Cautions, Pricing
});