/* 깔끔한친구들은? — About 스토리 페이지 전용 섹션.
   Nav는 메인/상세와 동일한 디자인(현재 위치만 '깔끔한친구들은?'으로 표시).
   Footer·MobileBar·QuickMenu는 sections.jsx/quickmenu.jsx에서 재사용. */

const HOME = "/";

/* ---------- 상단 네비 (메인과 동일, 현재 위치 = 깔끔한친구들은?) ---------- */
function AboutNav() {
  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="#top" style={{ color: scrolled ? "var(--mint-600)" : "var(--mint-400)", fontWeight: 700 }}>깔끔한친구들은?</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="/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="#top" onClick={closeMenu} style={{ color: "var(--mint-600)", fontWeight: 700 }}>깔끔한친구들은?</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="/reviews" onClick={closeMenu}>고객 후기</a>
        <a href="/blog" onClick={closeMenu}>작업사례 &amp; 관리팁</a>
        
      </div>
    </header>);
}

/* ---------- 장면 1 — 오프닝 ---------- */
function SceneOpen() {
  return (
    <section className="scene scene--dark scene--intro" id="top" data-screen-label="장면1-오프닝">
      <div className="scene-bg">
        <video className="scene-video" autoPlay muted loop playsInline poster="assets/about-hero-poster.jpg">
          <source src="assets/about-hero-bg.mp4" type="video/mp4" />
        </video>
      </div>
      <div className="scene-scrim"></div>
      <div className="scene-inner wrap">
        <div className="scene-copy">
          <span className="scene-no reveal">01</span>
          <h2 className="scene-head">
            <span className="reveal" data-d="1" style={{ display: "block" }}>우리는,</span>
            <span className="reveal" data-d="2" style={{ display: "block" }}>보이지 않는 곳을 더 <span className="hi">신경 쓰는</span> 사람들이에요.</span>
          </h2>
        </div>
      </div>
      <div className="scene-scroll">
        <span>SCROLL</span>
        <span className="line"></span>
      </div>
    </section>);
}

/* ---------- 장면 2 — 사실 청소는, 보이지 않는 곳에서 갈립니다 (밝은 분할) ---------- */
function SceneHidden() {
  return (
    <section className="scene scene--light scene--split" data-screen-label="장면2-보이지않는곳">
      <div className="scene-inner wrap">
        <div className="scene-copy">
          <span className="scene-no reveal">02</span>
          <h2 className="scene-head reveal" data-d="1">사실 청소는,<br />보이지 않는 곳에서 갈립니다.</h2>
          <div className="scene-body">
            <p className="line reveal" data-d="2">에어컨도 세탁기도, 겉은 금방 깨끗해 보여요.</p>
            <p className="line reveal" data-d="3">하지만 정작 냄새와 곰팡이는 분해하지 않으면 닿지 않는 <span className="hi">안쪽 깊은 곳</span>에 숨어 있어요.</p>
            <p className="line reveal" data-d="4">그곳까지 닿지 않은 청소는, 사실 청소가 아니라고 생각해요.</p>
          </div>
        </div>
        <div className="scene-figure reveal" data-d="2">
          <image-slot id="about-2" shape="rect" fit="cover"
            placeholder="분해한 부품 안쪽에 숨어 있던 곰팡이·오염 클로즈업(겉과 속의 대비)"></image-slot>
        </div>
      </div>
    </section>);
}

/* ---------- 장면 3 — 그냥 지나칠 수가 없었어요 (어두운) ---------- */
function SceneCouldnt() {
  return (
    <section className="scene scene--dark scene--vid3" data-screen-label="장면3-그냥지나칠수없었어요">
      <div className="scene-bg">
        <video className="scene-video" autoPlay muted loop playsInline poster="assets/about-scene3-poster.jpg">
          <source src="assets/about-scene3-bg.mp4" type="video/mp4" />
        </video>
      </div>
      <div className="scene-scrim"></div>
      <div className="scene-inner wrap">
        <div className="scene-copy">
          <span className="scene-no reveal">03</span>
          <h2 className="scene-head reveal" data-d="1">그냥 지나칠 수가<br />없었어요.</h2>
          <div className="scene-body">
            <p className="line reveal" data-d="2">번거롭다는 이유로, 시간이 걸린다는 이유로 분해를 덜 하고 마무리하는 경우를 많이 봤어요.</p>
            <p className="line reveal" data-d="3">겉만 닦고 "다 됐습니다" 하는 청소를요.</p>
            <p className="line reveal" data-d="4">저희 성격에, 그건 도저히 못 넘기겠더라고요.<br /><span className="hi">할 거면 제대로 하자</span> — 그 단순한 마음이 깔끔한친구들의 시작이었어요.</p>
          </div>
        </div>
      </div>
    </section>);
}

/* ---------- 장면 4 — 그래서 조금 번거로운 길을 택했어요 (밝은 분할, 사진 우측) ---------- */
function SceneHarderWay() {
  return (
    <section className="scene scene--light scene--tint scene--split rev" data-screen-label="장면4-번거로운길">
      <div className="scene-inner wrap">
        <div className="scene-figure reveal" data-d="1">
          <image-slot id="about-4" shape="rect" fit="cover"
            placeholder="작은 부품 하나까지 분해해 세척·표백하는 손 — 정성스러운 작업 디테일"></image-slot>
        </div>
        <div className="scene-copy">
          <span className="scene-no reveal">04</span>
          <h2 className="scene-head reveal" data-d="1">그래서 조금 번거로운<br />길을 택했어요.</h2>
          <div className="scene-body">
            <p className="line reveal" data-d="2">작은 부품 하나까지 분해하고, 곰팡이로 변색된 부위는 표백까지.</p>
            <p className="line reveal" data-d="3">시간이 더 걸려도, 손이 더 가도 — 눈에 안 보이는 곳이라도 <span className="hi">제 집이라면 이렇게 했을 방식</span>으로 해요.</p>
            <p className="line reveal" data-d="4">잘하려고 공부도 많이 했고, 현장에서는 스스로에게 더 깐깐해지려 노력해요.</p>
          </div>
        </div>
      </div>
    </section>);
}

/* ---------- 장면 5 — 깐깐하게, 꼼꼼하게 (어두운, 두 단어) ---------- */
function SceneTwoWords() {
  return (
    <section className="scene scene--dark scene--vid5" data-screen-label="장면5-깐깐하게꼼꼼하게">
      <div className="scene-bg">
        <video className="scene-video" autoPlay muted loop playsInline poster="assets/about-scene5-poster.jpg">
          <source src="assets/about-scene5-bg.mp4" type="video/mp4" />
        </video>
      </div>
      <div className="scene-scrim"></div>
      <div className="scene-inner wrap">
        <div className="scene-copy" style={{ maxWidth: "46ch" }}>
          <span className="scene-no reveal">05</span>
          <p className="scene-duo">
            <span className="a reveal" data-d="1">깐깐하게,</span>
            <span className="b reveal" data-d="2">꼼꼼하게.</span>
          </p>
          <div className="scene-body">
            <p className="line reveal" data-d="3">깐깐하게는 우리 자신에게 엄격하다는 뜻이에요.</p>
            <p className="line reveal" data-d="4">꼼꼼하게는 보이지 않는 곳까지 놓치지 않는다는 뜻이고요.</p>
            <p className="line reveal" data-d="5">이 두 단어가, 저희가 일하는 방식의 전부예요.</p>
          </div>
        </div>
      </div>
    </section>);
}

/* ---------- 장면 6 — 우리 가족이 쓰는 가전이라는 마음으로 (밝은 분할) ---------- */
function SceneFamily() {
  return (
    <section className="scene scene--light scene--split" data-screen-label="장면6-우리가족">
      <div className="scene-inner wrap">
        <div className="scene-copy">
          <span className="scene-no reveal">06</span>
          <h2 className="scene-head reveal" data-d="1">우리 가족이 쓰는<br />가전이라는 마음으로.</h2>
          <div className="scene-body">
            <p className="line reveal" data-d="2">결국 저희가 닦는 건, 누군가의 집이고 누군가의 가족이 매일 쓰는 물건이에요.</p>
            <p className="line reveal" data-d="3">그래서 <span className="hi">우리 가족, 내 친구 집</span>이라는 마음으로 다가가요.</p>
            <p className="line reveal" data-d="4">든든한 아들처럼, 믿을 수 있는 친구처럼.</p>
          </div>
        </div>
        <div className="scene-figure reveal" data-d="2">
          <image-slot id="about-6" shape="rect" fit="cover"
            placeholder="깨끗해진 집에서 가족·아이가 편안히 지내는 따뜻한 일상 실사"></image-slot>
        </div>
      </div>
    </section>);
}

/* ---------- 장면 7 — 마무리 (어두운, 인용 · CTA 없음) ---------- */
function SceneClosing() {
  return (
    <section className="scene scene--dark scene--vid7" data-screen-label="장면7-마무리">
      <div className="scene-bg">
        <video className="scene-video" autoPlay muted loop playsInline poster="assets/about-scene7-poster.jpg">
          <source src="assets/about-scene7-bg.mp4" type="video/mp4" />
        </video>
      </div>
      <div className="scene-scrim"></div>
      <div className="scene-inner wrap">
        <div className="scene-copy" style={{ maxWidth: "42ch" }}>
          <span className="scene-no reveal">07</span>
          <p className="scene-quote reveal" data-d="1"><span className="qm">"</span>이 친구들, 꼼꼼하게 잘하네.<span className="qm">"</span></p>
          <div className="scene-body">
            <p className="line reveal" data-d="2">그 한마디를 들으려고 오늘도 고민하고 연구해요.</p>
            <p className="line reveal" data-d="3">어제보다 더 나은<br />깔끔한친구들이 되겠습니다.</p>
          </div>
        </div>
      </div>
    </section>);
}

Object.assign(window, {
  AboutNav, SceneOpen, SceneHidden, SceneCouldnt, SceneHarderWay, SceneTwoWords, SceneFamily, SceneClosing
});