/* global React */
const { useState: useStateSec, useEffect: useEffectSec, useRef: useRefSec } = React;

/* ===== Reveal on scroll ===== */
function Reveal({ children, as: As = "div", className = "", ...rest }) {
  const ref = useRefSec(null);
  const [inView, setInView] = useStateSec(false);
  useEffectSec(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(
      (entries) => entries.forEach(e => { if (e.isIntersecting) { setInView(true); io.disconnect(); } }),
      { threshold: 0.12 }
    );
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return <As ref={ref} className={"reveal " + (inView ? "is-in " : "") + className} {...rest}>{children}</As>;
}

/* ===== Trust bar (logos) ===== */
function TrustBar() {
  const logos = ["현대캐피탈", "KB캐피탈", "우리금융", "롯데렌탈", "SK렌터카", "AJ렌터카"];
  return (
    <div className="trustbar">
      <div className="wrap trustbar__row">
        <div className="trustbar__label">공식 제휴 캐피탈 · 렌터카사</div>
        <div className="trustbar__logos">
          {logos.map(l => <span key={l} className="trustbar__logo">{l}</span>)}
        </div>
      </div>
    </div>
  );
}

/* ===== Cars ===== */
const CARS = [
  { brand: "Hyundai",  name: "그랜저 하이브리드", type: "세단", year: "2026", fuel: "하이브리드", price: "49만원대", badge: "BEST",
    img: "https://images.unsplash.com/photo-1549399542-7e3f8b79c341?auto=format&fit=crop&w=1200&q=70" },
  { brand: "Kia",      name: "카니발 하이리무진",  type: "RV",  year: "2026", fuel: "가솔린",     price: "59만원대", badge: "HOT",  hot: true,
    img: "https://images.unsplash.com/photo-1494976388531-d1058494cdd8?auto=format&fit=crop&w=1200&q=70" },
  { brand: "Genesis",  name: "G80 프리미엄",       type: "세단", year: "2026", fuel: "가솔린",     price: "79만원대", badge: "NEW",
    img: "https://images.unsplash.com/photo-1503376780353-7e6692767b70?auto=format&fit=crop&w=1200&q=70" },
  { brand: "Tesla",    name: "Model Y Long Range", type: "전기차", year: "2026", fuel: "전기",     price: "66만원대", badge: "EV",
    img: "https://images.unsplash.com/photo-1617788138017-80ad40651399?auto=format&fit=crop&w=1200&q=70" },
  { brand: "BMW",      name: "520i M Sport",       type: "세단", year: "2026", fuel: "가솔린",     price: "89만원대", badge: "PREMIUM",
    img: "https://images.unsplash.com/photo-1555215695-3004980ad54e?auto=format&fit=crop&w=1200&q=70" },
  { brand: "Hyundai",  name: "아이오닉 5",         type: "전기차", year: "2026", fuel: "전기",     price: "45만원대", badge: "EV",
    img: "https://images.unsplash.com/photo-1669215420018-098506e2a2f4?auto=format&fit=crop&w=1200&q=70" },
];
const CAR_FILTERS = ["전체", "세단", "RV", "전기차", "수입차", "경차"];

function Cars() {
  const [filter, setFilter] = useStateSec("전체");
  const list = filter === "전체" ? CARS
    : filter === "수입차" ? CARS.filter(c => ["BMW","Tesla","Mercedes","Audi"].includes(c.brand))
    : CARS.filter(c => c.type === filter);
  return (
    <section className="section">
      <div className="wrap">
        <Reveal>
          <div className="eyebrow">인기 차종</div>
          <h2 className="h-title">지금 가장 많이 계약된<br/>모델을 만나보세요</h2>
          <p className="h-sub">실제 출고 기준 인기 차종을 실시간으로 보여드립니다. 모델 선택 후 30초 안에 즉시 견적이 가능해요.</p>
        </Reveal>

        <div className="cars__filter">
          {CAR_FILTERS.map(f => (
            <button key={f} className={"chip " + (filter === f ? "is-on" : "")} onClick={() => setFilter(f)}>
              {f}
            </button>
          ))}
        </div>

        <div className="cars__grid">
          {list.map((c) => (
            <Reveal as="article" key={c.name} className="car">
              <div className="car__media">
                <span className={"car__badge " + (c.hot ? "car__badge--hot" : "")}>{c.badge}</span>
                <img src={c.img} alt={c.name} loading="lazy" onError={(e)=>{ e.target.style.display='none'; e.target.parentElement.style.background='linear-gradient(135deg, oklch(0.92 0.03 155), oklch(0.82 0.05 155))'; }}/>
              </div>
              <div className="car__body">
                <div className="car__brand">{c.brand}</div>
                <div className="car__name">{c.name}</div>
                <div className="car__meta">
                  <span>{c.year}년형</span><span>{c.type}</span><span>{c.fuel}</span>
                </div>
                <div className="car__price">
                  <span className="label">월 리스료</span>
                  <span className="amt">{c.price}</span>
                  <span className="unit">부터</span>
                </div>
                <div className="car__foot">
                  <span>보증금 0원 · 선수금 선택</span>
                  <span className="arrow">상세 <Icon.chevRight /></span>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Features ===== */
function Features() {
  const feats = [
    { ico: <Icon.bolt />,   title: "3일이면 출고", body: "서류 접수부터 차량 인도까지 평균 3영업일. 급한 출고도 당일 문의 가능합니다.", kpi: "평균 출고 3.2일" },
    { ico: <Icon.shield />, title: "무심사 장기렌트", body: "프리랜서·개인사업자·신용 회복 중에도 내 명의로 원하는 차량을 이용할 수 있어요.", kpi: "승인율 96.4%" },
    { ico: <Icon.wallet />, title: "보증금 0원", body: "출고 보증금 없이 계약이 가능하고, 선수금 비중은 월 납입액에 맞춰 자유롭게 조정됩니다.", kpi: "최대 12% 할인" },
  ];
  return (
    <section className="section" style={{ background: "white" }}>
      <div className="wrap">
        <Reveal>
          <div className="eyebrow">왜 드리브렌트일까요?</div>
          <h2 className="h-title">복잡한 자동차 계약,<br/>3단계로 끝내드립니다</h2>
        </Reveal>
        <div className="features__grid">
          {feats.map((f, i) => (
            <Reveal as="article" key={i} className="feat">
              <span className="feat__ico">{f.ico}</span>
              <h3>{f.title}</h3>
              <p>{f.body}</p>
              <div className="feat__kpi">↑ {f.kpi}</div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Process ===== */
function Process() {
  const steps = [
    { n: "01", title: "견적 신청",     body: "원하는 차종과 이름·연락처만 남기면 견적 신청이 완료됩니다.", t: "소요", tv: "30초" },
    { n: "02", title: "맞춤 상담",     body: "전담 매니저가 월 납입 조건과 보험·정비 옵션을 함께 안내합니다.", t: "상담", tv: "평균 15분" },
    { n: "03", title: "출고 & 인도",   body: "계약 체결 후 원하는 장소로 차량이 무료 탁송됩니다. 전국 어디든 OK.", t: "출고", tv: "3~5 영업일" },
  ];
  return (
    <section className="section process">
      <div className="wrap">
        <Reveal>
          <div className="eyebrow">이용 프로세스</div>
          <h2 className="h-title">신청부터 출고까지<br/>가장 쉬운 장기렌트</h2>
        </Reveal>
        <div className="process__grid">
          {steps.map((s, i) => (
            <Reveal as="div" key={s.n} className="step">
              <span className="step__num">{s.n}</span>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
              <div className="step__t">{s.t} · <b>{s.tv}</b></div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Plans ===== */
function Plans() {
  const plans = [
    { tag: "기본", name: "스탠다드", lede: "합리적인 월 납입으로 부담없이 시작", price: "29", list: [
      "24~36개월 계약 기간", "종합 보험 기본 포함", "정기 점검 2회/년", "사고 시 대차 서비스"
    ], hot: false },
    { tag: "가장 인기", name: "프리미엄", lede: "무제한 정비 + 보험 Full 커버", price: "49", list: [
      "12~60개월 자유 선택", "대인 · 대물 무제한 보험", "무제한 정기 점검", "타이어/배터리 교체 무상", "사고 수리 자기 부담금 0원"
    ], hot: true },
    { tag: "비즈니스", name: "비즈니스", lede: "법인 고객 전용 최적가 플랜", price: "39", list: [
      "법인세 100% 손비 처리", "다수 차량 통합 관리", "전담 매니저 배정", "정비 비용 전액 지원"
    ], hot: false },
  ];
  return (
    <section className="section plans" style={{ background: "white" }}>
      <div className="wrap">
        <Reveal>
          <div className="eyebrow">요금 & 플랜</div>
          <h2 className="h-title">월 납입액, 내 상황에 맞춰<br/>자유롭게 선택하세요</h2>
          <p className="h-sub">모든 플랜은 차종·계약기간에 따라 월 납입액이 조정됩니다. 아래는 준중형 기준 예시 가격이에요.</p>
        </Reveal>
        <div className="plans__grid">
          {plans.map((p) => (
            <Reveal as="article" key={p.name} className={"plan " + (p.hot ? "is-hot" : "")}>
              <span className="plan__tag">{p.tag}</span>
              <h3>{p.name}</h3>
              <p className="plan__lede">{p.lede}</p>
              <div className="plan__price">
                <span>월</span><b>{p.price}</b><span>만원~</span>
              </div>
              <ul className="plan__list">
                {p.list.map((l) => (
                  <li key={l}><Icon.checkSm /><span>{l}</span></li>
                ))}
              </ul>
              <a className="plan__cta" href="#quote">이 플랜으로 상담</a>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Reviews ===== */
function Reviews() {
  const data = [
    { name: "김수진", where: "서울 · 그랜저", body: "견적 신청하고 정말 30분 만에 전화가 왔어요. 복잡한 절차 없이 필요한 것만 딱 체크해 주셔서 계약이 편했습니다." },
    { name: "박지훈", where: "부산 · 카니발", body: "가족 차량이라 깐깐하게 비교했는데, 보증금 없이 출고 가능한 곳은 여기뿐이었어요. 매니저 응대도 친절했습니다." },
    { name: "이현주", where: "인천 · 아이오닉 5", body: "전기차 장기렌트는 처음이었는데, 충전 카드랑 보험까지 패키지로 알려주셔서 고민이 많이 줄었어요." },
  ];
  return (
    <section className="section reviews">
      <div className="wrap">
        <Reveal>
          <div className="eyebrow">고객 후기</div>
          <h2 className="h-title">12,480명의 계약자가<br/>선택한 이유</h2>
        </Reveal>
        <div className="reviews__grid">
          {data.map((r) => (
            <Reveal as="article" key={r.name} className="review">
              <div className="review__stars">
                {Array.from({ length: 5 }).map((_, i) => <Icon.star key={i} />)}
              </div>
              <p className="review__quote">“{r.body}”</p>
              <div className="review__who">
                <span className="review__avatar">{r.name[0]}</span>
                <b>{r.name}</b><span>{r.where}</span>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Event banner ===== */
function EventBanner() {
  return (
    <section style={{ padding: "72px 0", background: "var(--ink-50)" }}>
      <div className="wrap">
        <Reveal as="div" className="banner">
          <div>
            <span className="banner__tag"><Icon.gift /> 4월 한정 프로모션</span>
            <h2>지금 신청하면<br/>출고 보증금 100% 면제</h2>
            <p>4월 30일까지, 인기 차종 20종 한정. 선수금 비중을 0%로 세팅해도 동일 혜택이 적용됩니다.</p>
            <div className="banner__actions">
              <a href="#quote" className="btn btn--primary">특가 견적 받기</a>
              <a href="#" className="btn btn--ghost" style={{ color: "white", borderColor: "rgba(255,255,255,0.3)", background: "transparent" }}>이벤트 자세히</a>
            </div>
          </div>
          <div className="banner__side">
            <ul>
              <li><b>출고 보증금</b><span>100% 면제</span></li>
              <li><b>첫 달 납입금</b><span>최대 50% 할인</span></li>
              <li><b>정비 패키지</b><span>6개월 무상</span></li>
              <li><b>종합 보험</b><span>Full 커버</span></li>
            </ul>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ===== FAQ ===== */
function FAQ() {
  const data = [
    { q: "무심사 장기렌트는 누구나 가능한가요?", a: "장기렌트는 차량 등록이 렌터카사 명의이기 때문에 신용 조회 없이도 계약이 가능합니다. 프리랜서·개인사업자·신용 회복 중인 분들도 내 명의처럼 이용하실 수 있어요." },
    { q: "계약 기간 중 해지할 수 있나요?", a: "가능합니다. 다만 계약 기간에 따라 중도 해지 수수료가 발생할 수 있으며, 상담 시 상세 조건을 안내드립니다. 12개월 이내 해지 시에는 위약금이 최소화되는 옵션도 선택 가능합니다." },
    { q: "보험 처리는 어떻게 되나요?", a: "종합보험이 월 렌트료에 포함되어 있어 추가 비용이 없습니다. 사고 발생 시 전담 보험 담당자가 직접 처리해 드리며, 프리미엄 플랜의 경우 자기 부담금도 0원입니다." },
    { q: "차량은 어디서 받을 수 있나요?", a: "전국 어디든 원하시는 장소로 무료 탁송이 가능합니다. 출고일에 맞춰 자택·사무실로 차량이 배송되며, 간단한 인수 설명 후 바로 사용하실 수 있어요." },
    { q: "차량 사고가 났을 때 대차는 어떻게 되나요?", a: "모든 플랜에 사고 대차 서비스가 포함됩니다. 스탠다드는 5일, 프리미엄은 최대 15일까지 동급 차량을 무상 제공해 드립니다." },
    { q: "계약 종료 후 인수할 수 있나요?", a: "네, 계약 만료 시점에 잔존 가치 기준으로 차량을 인수하실 수 있습니다. 인수 없이 반납하거나 새 차량으로 재계약하는 옵션도 선택 가능해요." },
  ];
  const [open, setOpen] = useStateSec(0);
  return (
    <section className="section" style={{ background: "white" }}>
      <div className="wrap">
        <Reveal>
          <div className="eyebrow">자주 묻는 질문</div>
          <h2 className="h-title">궁금한 점, 먼저 정리했어요</h2>
        </Reveal>
        <div className="faq__list">
          {data.map((item, i) => (
            <Reveal as="div" key={i} className={"q " + (open === i ? "is-open" : "")}>
              <button className="q__head" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                <span className="qmark">Q</span>
                <span>{item.q}</span>
                <span className="chev"><Icon.chev /></span>
              </button>
              <div className="q__body" style={{ maxHeight: open === i ? 400 : 0 }}>
                <div className="q__body-inner">{item.a}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Trust / certs ===== */
function Trust() {
  const data = [
    { ico: <Icon.award />, b: "고객 만족 1위", s: "2025 한국소비자평가" },
    { ico: <Icon.lock />,  b: "개인정보 보호", s: "ISMS 인증 보유" },
    { ico: <Icon.cert />,  b: "공정 계약 인증", s: "공정거래위원회" },
    { ico: <Icon.support/>,b: "24시간 상담",   s: "연중무휴 긴급 출동" },
  ];
  return (
    <section className="section trust">
      <div className="wrap">
        <Reveal>
          <div className="eyebrow">신뢰할 수 있는 파트너</div>
          <h2 className="h-title">안전한 계약,<br/>검증된 렌터카 서비스</h2>
        </Reveal>
        <div className="trust__grid">
          {data.map((c, i) => (
            <Reveal as="div" key={i} className="cert">
              <div className="cert__ico">{c.ico}</div>
              <b>{c.b}</b><span>{c.s}</span>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ===== Footer ===== */
function Footer() {
  return (
    <footer className="footer">
      <div className="wrap footer__top">
        <div className="footer__brand">
          <a className="logo" href="#"><span className="logo__mark">D</span><span style={{ color: "white" }}>드리브렌트</span></a>
          <p className="footer__about">장기렌트와 리스, 무심사 출고까지. 자동차 금융의 복잡함을 걷어내는 가장 쉬운 방법.</p>
        </div>
        <div className="footer__col">
          <h4>서비스</h4>
          <ul>
            <li><a href="#">장기렌트</a></li>
            <li><a href="#">리스</a></li>
            <li><a href="#">법인/비즈니스</a></li>
            <li><a href="#">이벤트 특가</a></li>
          </ul>
        </div>
        <div className="footer__col">
          <h4>고객지원</h4>
          <ul>
            <li><a href="#">자주 묻는 질문</a></li>
            <li><a href="#">계약 절차 안내</a></li>
            <li><a href="#">제휴 캐피탈사</a></li>
            <li><a href="#">1:1 문의</a></li>
          </ul>
        </div>
        <div className="footer__col">
          <h4>연락처</h4>
          <ul>
            <li style={{ color: "white", fontSize: 18, fontWeight: 700, letterSpacing: "-0.02em" }}>1588-0000</li>
            <li>평일 09:00 – 19:00</li>
            <li>토요일 10:00 – 15:00</li>
            <li>help@driverent.example</li>
          </ul>
        </div>
      </div>
      <div className="wrap footer__bottom">
        <div>© 2026 DriveRent Inc. 드리브렌트는 가상의 브랜드 예시입니다.</div>
        <div className="footer__legal">
          <a href="#">이용약관</a>
          <a href="#">개인정보처리방침</a>
          <a href="#">사업자정보</a>
        </div>
      </div>
    </footer>
  );
}

window.Reveal = Reveal;
window.TrustBar = TrustBar;
window.Cars = Cars;
window.Features = Features;
window.Process = Process;
window.Plans = Plans;
window.Reviews = Reviews;
window.EventBanner = EventBanner;
window.FAQ = FAQ;
window.Trust = Trust;
window.Footer = Footer;