/* Hero — full-screen photo/video placeholder, navy scrim, 3 auto-rotating copy slides. */

const BOOK_URL = "https://book.tidyclean.co.kr";
const TEL = "010-9468-4901";
const TEL_HREF = "tel:01094684901";

const HERO_SLIDES = [
  {
    lead: ["보여주기식 분해청소는", <br key="b" />, <span className="hi" key="h">저희가 거부합니다.</span>],
    sub: "시간이 걸려도, 번거로워도 안 보이는 곳까지 완벽하게 청소합니다.",
  },
  {
    lead: [<span className="hi" key="h">"이 친구들<br key="b1" />꼼꼼하게 잘하네"</span>, <br key="b2" />, "그 한마디를 위해."],
    sub: "늘 고민하고 연구합니다. 어제보다 더 나은 깔끔한친구들.",
  },
  {
    lead: ["우리 가족이", <br key="b" />, "쓰는 가전이라는 ", <span className="hi" key="h">마음으로.</span>],
    sub: "든든한 아들, 믿을 수 있는 친구가 되겠습니다.",
  },
];

function Hero() {
  const { Button } = window.WantedDesignSystem_954e41;
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setI((n) => (n + 1) % HERO_SLIDES.length), 5200);
    return () => clearInterval(id);
  }, []);

  return (
    <section className="hero snap" id="top">
      <div className="hero-bg">
        <video className="hero-video" autoPlay muted loop playsInline poster="assets/home-hero-poster.jpg">
          <source src="assets/home-hero-bg.mp4" type="video/mp4" />
        </video>
        <image-slot
          id="hero-bg"
          shape="rect"
          fit="cover"
          placeholder="배경 사진·영상 자리 — 따뜻한 실사(가족·아이·작업 장면)로 교체하세요"
        ></image-slot>
      </div>
      <div className="hero-scrim"></div>

      <div className="hero-inner">
        <div className="wrap">
          <div className="hero-badge">
            <span className="k">깐깐하게, 꼼꼼하게</span>
            <span className="sep">·</span>
            <span>프리미엄 가전 분해청소</span>
          </div>

          <div className="hero-slides">
            {HERO_SLIDES.map((s, idx) => (
              <div key={idx} className={"hero-slide" + (idx === i ? " active" : "")} aria-hidden={idx !== i}>
                <h1>{s.lead}</h1>
                <p className="hero-sub">{s.sub}</p>
              </div>
            ))}
          </div>

          <div className="hero-cta"></div>

          <div className="hero-dots" role="tablist" aria-label="히어로 메시지">
            {HERO_SLIDES.map((_, idx) => (
              <button key={idx} className={idx === i ? "active" : ""} aria-label={"메시지 " + (idx + 1)}
                aria-selected={idx === i} onClick={() => setI(idx)}></button>
            ))}
          </div>
        </div>
      </div>

      <div className="hero-scroll">
        <span>SCROLL</span>
        <span className="line"></span>
      </div>
    </section>
  );
}

Object.assign(window, { Hero, BOOK_URL, TEL, TEL_HREF });