/* 주방후드 클리닝 & 교체/설치 상세페이지 — 전용 섹션.
   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() {
  const { Button } = window.WantedDesignSystem_954e41;
  return (
    <section className="phero" id="top" data-screen-label="후드-히어로">
      <div className="phero-bg">
        <video className="phero-video" autoPlay muted loop playsInline
          poster="assets/hood-hero-poster.jpg">
          <source src="assets/hood-hero-bg.mp4" type="video/mp4" />
        </video>
        <image-slot id="hood-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 className="phero-cta reveal" data-d="3"></div>
        </div>
      </div>
    </section>);

}

/* ---------- 2. 왜 필요할까요 (문제 제기) ---------- */
const PROBLEMS = [
{ ic: "tune", t: "내부 기름 축적", d: "수증기와 찌든 기름때가 후드 안쪽에 겹겹이 쌓입니다." },
{ ic: "chevron-down", t: "흡입력 저하", d: "쌓인 기름이 팬을 방해해 연기·냄새 배출력이 떨어집니다." },
{ ic: "triangle-exclamation-fill", t: "식중독 유발", d: "기름때 위 세균이 번식해 조리 환경을 위협합니다." },
{ ic: "circle-close", t: "악취 발생", d: "묵은 기름이 산패하며 주방 전체에 냄새가 배어듭니다." }];


function ProblemWhy() {
  const { Icon } = window.WantedDesignSystem_954e41;
  return (
    <section className="section" id="why-hood" 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">
          {PROBLEMS.map((p, i) =>
          <div className="prob-card reveal" data-d={i} 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 CLEAN_SETS = [
{ id: "hood-clean-1", cap: "필터·커버" },
{ id: "hood-clean-2", cap: "팬 내부" },
{ id: "hood-clean-3", cap: "후드 하부" }];

const INSTALL_STEPS = [
{ id: "hood-inst-before", cap: "교체 전", tag: "before" },
{ id: "hood-inst-during", cap: "설치 중", tag: "mid" },
{ id: "hood-inst-after", cap: "교체 후", tag: "after" }];


function BeforeAfter() {
  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">Before &amp; After</span>
          <h2 className="section-title">눈으로 확인하는<br />청소와 교체의 결과</h2>
          <p className="section-lead">가운데 손잡이를 좌우로 끌어 분해청소 전과 후를 직접 비교해보세요.</p>
        </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="hood-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="hood-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 className="case-rowlbl reveal"><span className="ic"><Icon name="image" size={17} /></span>분해청소 부위별 전·후</div>
        <div className="ba-thumbs reveal" data-d="1">
          {CLEAN_SETS.map((c) =>
          <div className="ba-thumb" key={c.id}>
              <div className="ba-thumb-hd">{c.cap}</div>
              <div className="ba-pair">
                <div className="ba-cell">
                  <image-slot id={c.id + "-before"} shape="rect" fit="cover" placeholder={c.cap + " 청소 전"}></image-slot>
                  <span className="ba-tag before">전</span>
                </div>
                <div className="ba-cell">
                  <image-slot id={c.id + "-after"} shape="rect" fit="cover" placeholder={c.cap + " 청소 후"}></image-slot>
                  <span className="ba-tag after">후</span>
                </div>
              </div>
            </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="inst-row reveal" data-d="1">
          {INSTALL_STEPS.map((s, i) =>
          <div className="inst-tile" key={s.id}>
              <div className="inst-media">
                <image-slot id={s.id} shape="rect" fit="cover" placeholder={s.cap + " 사진"}></image-slot>
                <span className={"inst-badge " + s.tag}>{s.cap}</span>
              </div>
              {i < INSTALL_STEPS.length - 1 && <span className="inst-arrow"><Icon name="chevron-right" size={22} /></span>}
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- 4. 차별점 6가지 ---------- */
const HOOD_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 HoodDifferentiators() {
  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">
          {HOOD_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. 서비스 진행 과정 (두 갈래) ---------- */
const CLEAN_PROC = [
{ ic: "eye", t: "작동 테스트", d: "제품 작동·상태를 먼저 확인합니다." },
{ ic: "tune", t: "분해", d: "필터·커버·팬을 분리합니다." },
{ ic: "sparkle-fill", t: "벽면·제품 세척", d: "기름때·오염을 말끔히 제거합니다." },
{ ic: "sparkle", t: "건조", d: "모든 부품을 완전히 건조합니다." },
{ ic: "refresh", t: "조립", d: "깨끗한 부품을 재조립합니다." },
{ ic: "circle-check", t: "테스트", d: "정상 작동 여부를 함께 확인합니다." }];

const INSTALL_PROC = [
{ ic: "download", t: "제품 배송", d: "안전하게 제품을 배송합니다." },
{ ic: "circle-check", t: "제품 수령", d: "고객님 제품을 확인합니다." },
{ ic: "person-fill", t: "설치기사 방문", d: "전문 설치기사가 방문합니다." },
{ ic: "tune", t: "철거", d: "기존 제품을 안전하게 철거합니다." },
{ ic: "write", t: "설치", d: "새 제품을 정밀하게 설치합니다." },
{ ic: "circle-check", t: "테스트", d: "설치 후 작동을 점검합니다." }];


function ProcBranch({ label, tag, steps, screen }) {
  const { Icon } = window.WantedDesignSystem_954e41;
  return (
    <div className={"proc-branch " + tag}>
      <div className="proc-head reveal">
        <span className="proc-chip"><Icon name={tag === "clean" ? "sparkle-fill" : "tune"} size={16} />{label}</span>
      </div>
      <div className="tl">
        {steps.map((s, i) =>
        <div className="tl-step reveal" 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>);

}

function Process() {
  return (
    <section className="section" style={{ background: "var(--mint-tint)", paddingBottom: 56 }} 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>
        <ProcBranch label="분해청소 과정" tag="clean" steps={CLEAN_PROC} />
        <ProcBranch label="교체 / 설치 과정" tag="install" steps={INSTALL_PROC} />
      </div>
    </section>);

}

/* ---------- 6. 서비스 & 가격 (종류별 카드 + 예시 이미지 자리) ---------- */
const PRICE_GROUPS = [
{
  svc: "슬림형", id: "hood-price-slim",
  bars: [{ label: "슬림형 교체/설치", price: "5만원", extra: "+@" }]
},
{
  svc: "통후드", id: "hood-price-round",
  bars: [
  { label: "통후드 분해 청소", price: "11만원", extra: "" },
  { label: "통후드 교체/설치", price: "6만원", extra: "+@" }]

},
{
  svc: "침니후드", id: "hood-price-chimney",
  bars: [
  { label: "침니후드 분해 청소", price: "13만원", extra: "" },
  { label: "침니후드 교체/설치", price: "7만원", extra: "+@" }]

}];


function Pricing() {
  const { Button } = 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" }}>Service Price</span>
          <h2 className="section-title">깔끔한친구들 <span style={{ color: "var(--mint-500)" }}>서비스 가격</span></h2>
          <p className="section-lead" style={{ margin: "18px auto 0" }}>가격 정찰제로 운영합니다. 교체/설치는 제품비용이 별도이며, 인터넷 최저가 기준으로 안내드립니다.</p>
        </div>

        <div className="hprice-grid">
          {PRICE_GROUPS.map((g, i) =>
          <div className="hprice-card reveal" data-d={i} key={g.id}>
              <div className="hprice-media">
                <image-slot id={g.id} shape="rect" fit="contain" placeholder={g.svc + " 후드 예시 이미지 자리"}></image-slot>
              </div>
              <div className="hprice-bars">
                {g.bars.map((b, j) =>
              <div className="hprice-bar" key={j}>
                    <span className="hp-label">{b.label}</span>
                    <span className="hp-price">{b.price}{b.extra && <em>{b.extra}</em>}</span>
                  </div>
              )}
              </div>
            </div>
          )}
        </div>

        <p className="price-foot" style={{ marginTop: 20 }}><b>@비용</b> · 소화기 이전설치 30,000원, 환경에 따른 외장제 컷팅 비용 30,000원</p>
        <p className="price-foot" style={{ marginTop: 4 }}>제품비용은 인터넷 최저가 기준 · 슬림후드 5~6만원 · 통후드 11~22만원 · 침니후드 22~50만원 선입니다.</p>

        <div className="price-actions reveal" data-d="1">
          <Button size="large" leadingIcon="clock" onClick={() => window.location.assign(window.BOOK_URL)}
            style={{ background: "var(--mint-500)", color: "#fff", height: 56, fontSize: 17, padding: "0 32px", borderRadius: 14 }}>
            온라인 예약하기
          </Button>
          <Button size="large" variant="outlined" leadingIcon="phone"
            onClick={() => { window.callPhone(); }}
            style={{ height: 56, fontSize: 17, padding: "0 28px", borderRadius: 14, color: "var(--navy-700)", boxShadow: "inset 0 0 0 1px var(--line-normal-strong)" }}>
            전화 상담
          </Button>
        </div>
      </div>
    </section>);

}

/* ---------- 7. 주문 전 필독 사항 ---------- */
const NOTICE = [
<>설치 환경·설치비 불만 등으로 <b>설치가 불가할 경우 출장비 20,000원</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>);

}

/* ---------- 8. 유의사항 ---------- */
const CAUTIONS = [
{ ic: "camera", t: <>주문하신 가전 확인과 작업환경 사전 체크를 위해 <b>사진 전송을 요청</b>할 수 있습니다.</> },
{ ic: "calendar", t: <>일정 확정 후 <b>예약일 기준 1일 전, 당일 취소·변경 시</b> 예약금이 청구됩니다. 이후 서비스 일정은 다소 지연될 수 있습니다.</> },
{ ic: "download", t: <>교체/설치 시 <b>단순 변심으로 인한 취소</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 caution-4">
          {CAUTIONS.map((c, i) =>
          <div className="caution-card reveal" data-d={i % 3} key={i}>
              <span className="ic"><Icon name={c.ic} size={22} /></span>
              <p>{c.t}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

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