/* global React */
const { useState: useStateHero, useEffect: useEffectHero, useRef: useRefHero } = React;

const HERO_SLIDES = [
  { tag: "인기 차종 즉시 출고",   title: "내가 타고 싶던 차,\n가격이 궁금하다면?", lede: "인기 모델 월 리스료를 1분 안에 확인하세요. 견적 신청 후 30분 내 전담 컨설턴트가 연락드립니다." },
  { tag: "이달의 특가 · 최대 12% 할인", title: "이달의 특가 모델\n월 29만원부터 시작", lede: "SUV·세단·전기차 전 차급에서 특가 혜택이 준비됐습니다. 지금 신청하면 출고 보증금 면제." },
  { tag: "무심사 장기렌트",       title: "신용에 상관없이,\n내 명의로 바로 출고", lede: "프리랜서·사업자·신불자도 OK. 재직증명 없이 간편 서류만으로 원하는 차량 이용이 가능합니다." },
];

function QuoteForm() {
  const [form, setForm] = useStateHero({ name: "", phone: "", model: "" });
  const [err, setErr] = useStateHero({});
  const [agree, setAgree] = useStateHero([true, true, true, false]);
  const [toast, setToast] = useStateHero(false);

  const toggle = (i) => setAgree(prev => prev.map((v, idx) => idx === i ? !v : v));
  const allOn = agree[0] && agree[1] && agree[2];
  const toggleAll = () => {
    const next = !allOn;
    setAgree(prev => prev.map((_, i) => i === 3 ? prev[3] : next));
  };

  const onPhone = (v) => {
    const d = v.replace(/\D/g, '').slice(0, 11);
    let out = d;
    if (d.length > 3 && d.length <= 7) out = `${d.slice(0,3)}-${d.slice(3)}`;
    else if (d.length > 7) out = `${d.slice(0,3)}-${d.slice(3,7)}-${d.slice(7)}`;
    setForm(f => ({ ...f, phone: out }));
  };

  const submit = (e) => {
    e.preventDefault();
    const next = {};
    if (!form.name.trim() || form.name.trim().length < 2) next.name = "이름을 2글자 이상 입력해 주세요";
    const digits = form.phone.replace(/\D/g, '');
    if (digits.length < 10 || !digits.startsWith('01')) next.phone = "올바른 휴대폰 번호를 입력해 주세요";
    if (!allOn) next.agree = "필수 약관에 모두 동의해 주세요";
    setErr(next);
    if (Object.keys(next).length === 0) {
      setToast(true);
      setTimeout(() => setToast(false), 2800);
      setForm({ name: "", phone: "", model: "" });
    }
  };

  return (
    <>
      <form className="quote" onSubmit={submit} noValidate>
        <h2 className="quote__title">내가 타고싶던 차,<br/>가격이 궁금하다면?</h2>

        <div className="quote__fields">
          <div className={"field " + (err.name ? "is-error" : "")}>
            <label>이름 <span className="req">*</span></label>
            <input
              value={form.name}
              onChange={e => setForm(f => ({ ...f, name: e.target.value }))}
              placeholder="성함 또는 회사명을 입력해 주세요."
              autoComplete="name"
            />
            {err.name && <div className="field__err">{err.name}</div>}
          </div>

          <div className={"field " + (err.phone ? "is-error" : "")}>
            <label>전화번호 <span className="req">*</span></label>
            <input
              value={form.phone}
              onChange={e => onPhone(e.target.value)}
              placeholder='연락처를 "-" 없이 입력해 주세요.'
              inputMode="numeric"
            />
            {err.phone && <div className="field__err">{err.phone}</div>}
          </div>

          <div className="field">
            <label>차종</label>
            <input
              value={form.model}
              onChange={e => setForm(f => ({ ...f, model: e.target.value }))}
              placeholder="희망하는 차종을 입력해 주세요."
            />
          </div>
        </div>

        <div className="agree">
          <div className="agree__top">
            <button type="button" className={"check " + (allOn ? "is-on" : "")} onClick={toggleAll} aria-label="전체 동의">
              <Icon.check />
            </button>
            <span>약관을 모두 동의합니다</span>
            <small>(필수 및 선택 항목 모두 포함)</small>
          </div>
          <div className="agree__list">
            {[
              ["[필수] 개인정보 수집 및 이용동의", 0],
              ["[필수] 개인정보 제3자 제공 동의", 1],
              ["[필수] 마케팅 활용 및 서비스 운영 정보 수신 동의", 2],
              ["[선택] 마케팅 활용 및 서비스 운영 정보 수신 동의", 3],
            ].map(([label, i]) => (
              <div className="agree__row" key={i}>
                <button type="button" className={"check " + (agree[i] ? "is-on" : "")} onClick={() => toggle(i)} aria-label={label}>
                  <Icon.check />
                </button>
                <span className="tag">{label}</span>
                <span className="chev"><Icon.chevRight /></span>
              </div>
            ))}
          </div>
          {err.agree && <div className="field__err" style={{ marginTop: 8 }}>{err.agree}</div>}
        </div>

        <button className="quote__submit" type="submit">최저가 견적 신청하기</button>
        <div className="quote__note">신청 후 30분 내 무료 상담 전화 도착</div>
      </form>

      <div className={"toast " + (toast ? "is-on" : "")} role="status" aria-live="polite">
        <span className="toast__ico"><Icon.check /></span>
        견적 신청이 접수되었습니다!
      </div>
    </>
  );
}

function Hero() {
  const [slide, setSlide] = useStateHero(0);
  const timer = useRefHero(null);

  useEffectHero(() => {
    timer.current = setInterval(() => setSlide(s => (s + 1) % HERO_SLIDES.length), 6500);
    return () => clearInterval(timer.current);
  }, []);

  const s = HERO_SLIDES[slide];

  const go = (d) => {
    clearInterval(timer.current);
    setSlide((slide + d + HERO_SLIDES.length) % HERO_SLIDES.length);
    timer.current = setInterval(() => setSlide(s => (s + 1) % HERO_SLIDES.length), 6500);
  };

  return (
    <section className="hero">
      <HeroMark />
      <div className="hero__slider-ribbon">{s.tag}</div>

      <button className="hero__arrow hero__arrow--prev" onClick={() => go(-1)} aria-label="이전"><Icon.arrLeft /></button>
      <button className="hero__arrow hero__arrow--next" onClick={() => go(1)} aria-label="다음"><Icon.arrRight /></button>

      <div className="wrap hero__grid">
        <div>
          <div className="hero__pills">
            <span className="hero__pill"><span className="dot" /> 실시간 상담 가능</span>
            <span className="hero__pill">선수금 0원부터</span>
            <span className="hero__pill">최단 3일 출고</span>
          </div>
          <h1 className="hero__headline">
            {s.title.split('\n').map((line, i) => (
              <React.Fragment key={i}>{line}{i < s.title.split('\n').length - 1 && <br/>}</React.Fragment>
            ))}
          </h1>
          <p className="hero__lede">{s.lede}</p>
          <div className="hero__stats">
            <div className="hero__stat"><b>12,480+</b><span>누적 계약 대수</span></div>
            <div className="hero__stat"><b>4.92<span style={{fontSize:14,fontWeight:600}}>/5.0</span></b><span>고객 만족도</span></div>
            <div className="hero__stat"><b>30<span style={{fontSize:14,fontWeight:600}}>분</span></b><span>평균 상담 응답</span></div>
          </div>
        </div>
        <QuoteForm />
      </div>

      <div className="hero__dots">
        {HERO_SLIDES.map((_, i) => (
          <button
            key={i}
            className={"hero__dot " + (i === slide ? "is-on" : "")}
            onClick={() => { clearInterval(timer.current); setSlide(i); }}
            aria-label={`슬라이드 ${i + 1}`}
          />
        ))}
      </div>
    </section>
  );
}

window.Hero = Hero;