/* 방충망 교체 시공 상세페이지 — 전용 섹션.
   Nav/Footer/QuickMenu는 메인·다른 상세페이지와 동일하게 재사용.
   청소가 아닌 '시공' 서비스 — 특허 기술·기능적 장점 중심. 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/mesh-hero-poster.jpg">
          <source src="assets/mesh-hero-bg.mp4" type="video/mp4" />
        </video>
        <image-slot id="mesh-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 OLD_POINTS = [
"고무링에 강력접착제(본드)를 붙여 고정하는 방식입니다.",
"교체 시 본드로 인해 망 조각이 남거나 고무링이 들러붙습니다.",
"결국 재시공이 어렵고 유지·보수가 사실상 불가능합니다."];

const LUNA_POINTS = [
"국내 특허를 가진 루나테크 이중구조 쫄대 방식입니다.",
"본드 없이 결합해 언제든 유지·보수·재시공이 가능합니다.",
"기존 방식보다 훨씬 견고하게 고정됩니다."];


function MethodDiff() {
  const { Icon } = window.WantedDesignSystem_954e41;
  return (
    <section className="section" id="method" data-screen-label="방충망-공법">
      <div className="wrap">
        <div className="intro reveal">
          <span className="eyebrow">깔끔한친구들의 공법 ①</span>
          <h2 className="edu-q">
            고무링에 <span className="mk">본드로 붙이는 방식</span>,<br />
            깔끔한친구들은 다릅니다
          </h2>
          <p className="section-lead">
            일반적인 고무링에 강력접착제를 붙여 고정하는 방식이 아닙니다.
            국내 특허 기술을 가진 루나테크의 이중구조 쫄대 방식으로,
            유지·보수가 가능하고 훨씬 견고한 고정이 가능합니다.
          </p>
        </div>

        {/* 기존 본드 시공 — 텍스트 카드 + 사진 나란히 */}
        <div className="method-old">
          <div className="con-card con-bad reveal" data-d="1">
            <span className="con-tag">기존 본드 시공</span>
            <h3>고무링 + 강력접착제<br />고정 방식</h3>
            <ul className="con-list">
              {OLD_POINTS.map((t, i) =>
              <li key={i}>
                  <span className="con-ic"><Icon name="circle-close-fill" size={20} /></span>
                  <span>{t}</span>
                </li>
              )}
            </ul>
          </div>
          <div className="mo-media reveal" data-d="2">
            <image-slot id="mesh-old-bond" shape="rect" fit="cover" placeholder="기존 본드 시공 사진"></image-slot>
            <span className="gif-badge"><span className="dot"><Icon name="image" size={9} color="var(--navy-900)" /></span>기존 본드 시공</span>
          </div>
        </div>

        {/* 본드 없는 특허 쫄대 — 카드 + 동영상 나란히 */}
        <div className="method-luna reveal" data-d="1">
          <div className="con-card con-good">
            <span className="con-tag">루나테크 이중구조 쫄대</span>
            <h3>본드 없는 특허<br />쫄대 고정 방식</h3>
            <ul className="con-list">
              {LUNA_POINTS.map((t, i) =>
              <li key={i}>
                  <span className="con-ic"><Icon name="circle-check-fill" size={20} /></span>
                  <span>{t}</span>
                </li>
              )}
            </ul>
          </div>
          <div className="mo-media">
            <video-slot id="mesh-grip-compare" src="assets/mesh-grip-compare.mp4" placeholder="루나테크 vs 본드 고정력 비교 영상"></video-slot>
            <span className="gif-badge"><span className="dot"><Icon name="square-play" size={9} color="var(--navy-900)" /></span>특허 시공법</span>
          </div>
        </div>

        {/* 루나테크 시공 자료 — 세로로 크게 */}
        <div className="case-rowlbl reveal"><span className="ic"><Icon name="image" size={17} /></span>특허 시공 자료</div>
        <div className="case-row mcmp-two reveal" data-d="1">
          <div className="case-tile">
            <image-slot id="mesh-jjolde-section" shape="rect" fit="contain" placeholder="쫄대 단면 사진"></image-slot>
            <span className="gif-badge"><span className="dot"><Icon name="image" size={9} color="var(--navy-900)" /></span>쫄대 단면</span>
          </div>
          <div className="case-tile">
            <video-slot id="mesh-install-video" src="assets/mesh-install-video.mp4" fit="contain" placeholder="시공 영상"></video-slot>
            <span className="gif-badge"><span className="dot"><Icon name="square-play" size={9} color="var(--navy-900)" /></span>고정력 비교</span>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- 3. 역밴딩 특허 기술 ② ---------- */
const RB_REASONS = [
"내부 밴딩으로 인한 망 헐렁거림 없이, 탱탱한 텐션을 유지합니다.",
"독성 본드 없이 미세망·방충망을 손쉽게 결합합니다.",
"큰 대창 방충망도 주름 없이 탱탱하게 시공합니다."];


function ReverseBanding() {
  const { Icon } = window.WantedDesignSystem_954e41;
  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">
            PVC·AL 방충망 틀에 망을 결합할 때, 텐션을 주려고 망을 당기면 틀이 안쪽으로 휘어지는
            '밴딩현상'이 생깁니다. 그로 인해 망의 헐렁거림·주름 같은 하자가 발생합니다.
            저희는 이 휘어짐까지 계산해 완벽한 시공을 지향합니다.
          </p>
        </div>

        <div className="rb-wrap">
          <div className="rb-media reveal" data-d="1">
            <image-slot id="mesh-reverse-banding" shape="rect" fit="cover" placeholder="역밴딩기 · 원리 이미지 자리"></image-slot>
          </div>
          <div className="rb-panel reveal" data-d="2">
            <div className="rb-panel-hd">역밴딩 특허 기술이 필요한 이유</div>
            <ul className="con-list">
              {RB_REASONS.map((t, i) =>
              <li key={i}>
                  <span className="con-ic" style={{ color: "var(--mint-400)" }}><Icon name="circle-check-fill" size={20} /></span>
                  <span>{t}</span>
                </li>
              )}
            </ul>
          </div>
        </div>
      </div>
    </section>);

}

/* ---------- 4. 미세촘촘 방충망 7가지 강점 ---------- */
const STRENGTHS = [
{ ic: "circle-close", t: "미세벌레 차단", d: "작은 날파리까지 모두 차단하는 미세방충망으로 날벌레 걱정 끝." },
{ ic: "eye", t: "뛰어난 가시성", d: "촘촘한 미세망이지만 가시성은 한층 업그레이드, 탁 트인 풍경." },
{ ic: "fire", t: "방염", d: "불이 번지지 않는 방염 소재로 화재 시에도 안전하게.", video: true },
{ ic: "diamond", t: "고강도 내구성", d: "강하게 누르거나 성인 남성이 올라가도 안 찢어질 정도로 튼튼.", video: true },
{ ic: "certificate", t: "부식·산화에 강함", d: "일반 방충망보다 부식·산화에 강해 시간이 지나도 내구성을 유지." },
{ ic: "lock", t: "어린이 추락 방지", d: "고무링 방식과 달리 견고한 고정 + 잠금장치로 아이·반려동물 추락까지 방지." },
{ ic: "sparkle-fill", t: "발수 미세 방충망", d: "자가 방수 코팅으로 빗물 유입을 막고, 물방울과 함께 먼지가 흘러내려 자가 세척.", video: true }];


function Strengths() {
  const { 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 />7가지 강점</h2>
        </div>
        <div className="str-grid">
          {STRENGTHS.map((s, i) =>
          <div className="str-card reveal" data-d={i % 3} key={i}>
              <div className="str-media">
                {s.video
                ? <video-slot id={"mesh-strength-" + (i + 1)} src={"assets/mesh-strength-" + (i + 1) + ".mp4"} placeholder={s.t + " 영상 자리"}></video-slot>
                : <image-slot id={"mesh-strength-" + (i + 1)} shape="rect" fit="cover" placeholder={s.t + " 이미지·영상 자리"}></image-slot>}
                <span className="str-no">{String(i + 1).padStart(2, "0")}</span>
              </div>
              <div className="str-body">
                <div className="str-ic"><Icon name={s.ic} size={22} /></div>
                <h3>{s.t}</h3>
                <p>{s.d}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- 5. 신뢰 요소 (시공에 맞는 항목) ---------- */
const TRUST_POINTS = [
{ ic: "company-check", t: "외주 없는 본사 직영", d: "하청 없이 100% 본사 직원이 직접 시공합니다." },
{ ic: "umbrella", t: "전 인원 1억 책임보험 가입", d: "작업 중 사고까지 전 직원이 영업배상 1억 원 책임보험으로 책임집니다." },
{ ic: "refresh", t: "3개월 무상 A/S 보장", d: "서비스 불만족·하자 발생 시 3개월간 책임지고 무상 A/S." },
{ ic: "tag", t: "추가요금 없는 가격 정찰제", d: "당일 갑자기 붙는 금액 없음. 안내드린 견적 그대로 결제합니다." }];


function TrustPoints() {
  const { Icon } = window.WantedDesignSystem_954e41;
  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">믿고 맡길 수 있는 이유</h2>
        </div>
        <div className="prob-grid prob-4">
          {TRUST_POINTS.map((c, i) =>
          <div className="prob-card reveal" data-d={i % 3} key={i}>
              <span className="prob-ic"><Icon name={c.ic} size={26} /></span>
              <h3>{c.t}</h3>
              <p>{c.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ---------- 6. 예약 안내 (가격 + CTA) ---------- */
const MESH_PRICES = [
{ kind: "대창", where: "베란다", amount: "60,000" },
{ kind: "중창", where: "각 방", amount: "50,000" },
{ kind: "소창", where: "주방", amount: "30,000" }];


function MeshPricing() {
  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="mprice-grid reveal" data-d="1">
          {MESH_PRICES.map((p, i) =>
          <div className="mprice-card" key={i}>
              <div className="mprice-kind">{p.kind}</div>
              <div className="mprice-where">{p.where}</div>
              <div className="mprice-amt"><span className="num">{p.amount}</span>원</div>
            </div>
          )}
        </div>

        <div className="mprice-etc reveal" data-d="1">
          <div className="mprice-etc-txt">
            <span className="ic"><Icon name="phone" size={20} /></span>
            <span>롤 방충망 · 현관 방충망 등 각종 방충망은 <b>전화로 문의</b>해 주세요.</span>
          </div>
          <Button size="medium" onClick={() => { window.callPhone(); }}
            style={{ background: "var(--navy-800)", color: "#fff", borderRadius: 11, flex: "0 0 auto" }} leadingIcon="phone">
            {window.TEL}
          </Button>
        </div>

        <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>);

}

Object.assign(window, {
  DetailNav, PageHero, MethodDiff, ReverseBanding, Strengths, TrustPoints, MeshPricing
});