// Dasonda v2 — white + orange, high-impact ad copy

const LOGO_SRC = 'assets/logo.png';

function HeaderV2() {
  return (
    <header className="site-header">
      <div className="brand-lockup">
        <img src={LOGO_SRC} alt="다쏜다" className="brand-lockup__logo" />
      </div>
      <a href="tel:1800-0000" className="phone-pill">☎ 1800-0000</a>
    </header>
  );
}

function HeroV2({ onCta }) {
  return (
    <section className="hero">
      <div className="container hero-inner">
        <div className="hero-kicker">
          <span className="dot"></span>
          이번 달 한정 · 역대급 혜택 진행 중
        </div>
        <h1>
          인터넷 · TV · 정수기<br/>
          혜택, 다 <span className="stamp">쏜다!</span>
        </h1>
        <p className="hero-sub">
          SK · KT · LG · 코웨이 · SK매직까지<br/>
          <strong style={{color:'var(--brand-orange-700)'}}>최대 지원금 + 사은품</strong> 한 번에 비교!
        </p>
        <div className="hero-slam">
          <div className="big">💥 지원금 최대 <span style={{fontSize:22}}>50만원</span> + 사은품 증정</div>
          <div style={{fontSize:12.5, fontWeight:700, marginTop:4, color:'var(--brand-orange-600)'}}>이번 달 신청 고객 한정!</div>
        </div>
        <div className="hero-chips">
          <span className="chip">공식 제휴점</span>
          <span className="chip">상담 100% 무료</span>
          <span className="chip">당일 상담 OK</span>
        </div>
        <div className="hero-cta-row">
          <button className="btn btn--primary btn--xl btn--block" onClick={onCta}>
            무료로 혜택 받으러 가기 →
          </button>
        </div>
      </div>
    </section>
  );
}

function TrustBarV2() {
  const [nums, setNums] = React.useState([0, 0, 0, 0, 0]);
  const targets = [12480, 9320, 98, 7, 4];
  React.useEffect(() => {
    const start = performance.now();
    const dur = 1400;
    const tick = (t) => {
      const k = Math.min(1, (t - start) / dur);
      const e = 1 - Math.pow(1 - k, 3);
      setNums(targets.map(n => Math.floor(n * e)));
      if (k < 1) requestAnimationFrame(tick);
    };
    requestAnimationFrame(tick);
  }, []);
  const fmt = (n) => n.toLocaleString('ko-KR');
  const items = [
    { v: fmt(nums[0]), u: '+', l: '누적 상담 수' },
    { v: fmt(nums[1]), u: '건', l: '설치 완료' },
    { v: nums[2],      u: '%', l: '고객 만족도' },
    { v: nums[3],      u: '곳', l: '통신사 제휴' },
    { v: nums[4],      u: '년', l: '운영 경력' },
  ];
  return (
    <section className="trust-light">
      <div className="container-lg">
        <div className="trust-grid">
          {items.map((it, i) => (
            <div key={i}>
              <div className="num">{it.v}<span className="unit">{it.u}</span></div>
              <div className="label">{it.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

const LOGO = (n) => `assets/logos/${n}.svg`;

function TelecomSectionV2() {
  const telcos = [
    { logo: 'sk-broadband', name: 'SK브로드밴드', deal: '최대 40만원', recommend: false },
    { logo: 'sk-telecom',   name: 'SK텔레콤',     deal: '결합 혜택' },
    { logo: 'kt',           name: 'KT 기가',      deal: '인기 NO.1', recommend: true },
    { logo: 'lg-uplus',     name: 'LG U+',        deal: 'TV+넷 최저가' },
  ];
  return (
    <section>
      <div className="container-md">
        <div className="section-kicker">INTERNET · TV</div>
        <h2 className="section-title">전 통신사 <span className="hl">다 비교해서</span><br/>제일 싼 곳으로!</h2>
        <p className="section-sub">한 번만 상담 받으면 SK · KT · LG 혜택이 한눈에. 굳이 여러 군데 전화 돌릴 필요 없어요.</p>
        <div className="brand-grid four-col">
          {telcos.map(t => (
            <div className="brand-card" key={t.name}>
              {t.recommend && <span className="ribbon">★ 인기</span>}
              <div className="logo-slot"><img src={LOGO(t.logo)} alt={t.name} /></div>
              <div className="type">{t.name}</div>
              <div className="deal">{t.deal}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function PurifierSectionV2() {
  const brands = [
    { logo: 'coway',          name: '코웨이',       deal: '최저가 상담', recommend: true },
    { logo: 'sk-magic',       name: 'SK매직',       deal: '사은품 증정' },
    { logo: 'cuckoo',         name: '쿠쿠',         deal: '렌탈료 할인' },
    { logo: 'lg-purifier',    name: 'LG 퓨리케어',  deal: '프리미엄' },
    { logo: 'chungho',        name: '청호나이스',   deal: '얼음정수기' },
    { logo: 'hyundai-cuming', name: '현대큐밍',     deal: '가성비 추천' },
    { logo: 'wells',          name: '교원웰스',     deal: '설치비 0원' },
  ];
  return (
    <section className="bg-subtle">
      <div className="container-md">
        <div className="section-kicker">WATER PURIFIER</div>
        <h2 className="section-title">정수기 <span className="hl">7개 브랜드</span><br/>이 중에 제일 싼 걸로!</h2>
        <p className="section-sub">국내 모든 정수기 브랜드를 한자리에서 비교. 월 렌탈료 확실히 깎아드려요.</p>
        <div className="brand-grid">
          {brands.map(b => (
            <div className="brand-card" key={b.name}>
              {b.recommend && <span className="ribbon">★ 인기</span>}
              <div className="logo-slot"><img src={LOGO(b.logo)} alt={b.name} /></div>
              <div className="type">{b.name}</div>
              <div className="deal">{b.deal}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function BenefitsV2() {
  const items = [
    { ic: '💰', ttl: '최대 50만원 지원', desc: '통신사 현금 지원금, 다쏜다가 최대치로 받아드려요.', hot: true },
    { ic: '🎁', ttl: '사은품 다 쏜다',    desc: '가전 · 상품권 · 기프티콘 원하시는 걸로 쏴드려요.' },
    { ic: '🆓', ttl: '설치비 0원',        desc: '기본 설치비 완전 면제, 추가 할인까지 챙겨드립니다.' },
    { ic: '⚡', ttl: '당일 설치 가능',    desc: '오전 신청 시 당일 상담, 최단 1일 내 설치 완료.' },
    { ic: '🛡', ttl: '공식 제휴점',        desc: '정식 계약 제휴점이라 계약 조건이 안전합니다.' },
    { ic: '♻', ttl: '위약금도 지원',       desc: '기존 통신사 약정 남았어도 옮길 수 있게 도와드려요.' },
  ];
  return (
    <section>
      <div className="container-md">
        <div className="section-kicker">BENEFITS</div>
        <h2 className="section-title">다른 데선 절대 못 주는<br/><span className="hl">혜택 6가지</span></h2>
        <p className="section-sub">상담만 받아도 손해 0원. 진짜 다 쏴드립니다.</p>
        <div className="benefit-grid">
          {items.map(i => (
            <div className={`benefit-card ${i.hot ? 'hot' : ''}`} key={i.ttl}>
              <div className="icon">{i.ic}</div>
              <div className="ttl">{i.ttl}</div>
              <div className="desc">{i.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CompareTableV2() {
  const rows = [
    ['지원 혜택',   '기본 지원금만',         '최대 지원금 + 사은품'],
    ['비교 범위',   '단일 통신사/브랜드',    '전 통신사 · 7개 정수기 브랜드'],
    ['상담 방식',   '정해진 상품 강매',      '내 조건에 딱 맞는 상품 제안'],
    ['설치 속도',   '며칠씩 대기',           '최단 당일 설치 가능'],
    ['사후 관리',   '설치 끝나면 연락 뚝',   '요금제 · A/S까지 끝까지 케어'],
  ];
  return (
    <section className="bg-tint">
      <div className="container-md">
        <div className="section-kicker">WHY 다쏜다</div>
        <h2 className="section-title">다른 업체 vs <span className="hl">다쏜다</span><br/>보시면 답 나옵니다</h2>
        <p className="section-sub">같은 상품도 업체마다 조건이 천차만별. 다쏜다가 확실히 더 주는 이유를 비교해보세요.</p>
        <div className="compare-scroll">
        <table className="compare-table">
          <thead>
            <tr>
              <th style={{width:'28%'}}></th>
              <th>일반 업체</th>
              <th className="us">다쏜다<span className="sub">공식 제휴점</span></th>
            </tr>
          </thead>
          <tbody>
            {rows.map(r => (
              <tr key={r[0]}>
                <td className="row-label">{r[0]}</td>
                <td><span className="x">✕</span>{r[1]}</td>
                <td className="us-cell"><span className="o">✓</span>{r[2]}</td>
              </tr>
            ))}
          </tbody>
        </table>
        </div>
      </div>
    </section>
  );
}

function FAQSection() {
  const [open, setOpen] = React.useState(0);
  const items = [
    { q: '상담은 진짜 무료인가요?', a: '네, 상담 신청부터 상품 안내까지 100% 무료입니다. 상담받으셨다고 계약 의무 절대 없습니다.' },
    { q: '혜택 규모는 어떻게 정해져요?', a: '통신사·브랜드의 그 달 프로모션과 고객님 조건(기존 회선, 결합 여부 등)에 따라 달라집니다. 다쏜다는 최대 조건으로 맞춰드립니다.' },
    { q: '설치까지 얼마나 걸려요?', a: '인터넷·TV는 통상 1~3일, 정수기는 2~5일. 오전 신청 시 당일 상담 OK, 일정은 기사 방문 스케줄에 따라 조정됩니다.' },
    { q: '기존 통신사 위약금은요?', a: '약정 남았어도 위약금 지원 상품 있습니다. 상담 시 남은 약정 기간 알려주시면 해당 혜택 안내드려요.' },
    { q: '개인정보는 안전한가요?', a: '상담 목적 외 절대 사용되지 않으며, 상담 완료 후 법령에 따라 즉시 파기됩니다. 제3자 제공 없습니다.' },
  ];
  return (
    <section>
      <div className="container-md">
        <div className="section-kicker">FAQ</div>
        <h2 className="section-title">자주 묻는 <span className="hl">질문</span></h2>
        <p className="section-sub">상담 전에 가장 궁금해하시는 내용을 정리했습니다.</p>
        <div className="faq-list">
          {items.map((it, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <div className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="q-icon">+</span>
              </div>
              {open === i && <div className="faq-a">{it.a}</div>}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function LiveFeedV2() {
  const regions = ['서울 강남구', '서울 송파구', '경기 성남시', '경기 수원시', '부산 해운대구', '인천 연수구', '대구 수성구', '광주 북구', '대전 유성구', '울산 남구', '경기 용인시', '서울 마포구', '경기 고양시', '서울 영등포구', '세종시', '제주시'];
  const surnames = ['김', '이', '박', '최', '정', '강', '조', '윤', '장', '임', '한', '오', '서', '신', '권'];
  const products = [
    { text: 'SK 기가 인터넷', type: 'internet' },
    { text: 'KT 기가 인터넷+TV', type: 'internet' },
    { text: 'LG U+ 인터넷+TV', type: 'internet' },
    { text: 'SK 인터넷+TV 결합', type: 'internet' },
    { text: '코웨이 정수기 렌탈', type: 'purifier' },
    { text: 'SK매직 얼음정수기', type: 'purifier' },
    { text: '쿠쿠 냉온 정수기', type: 'purifier' },
    { text: 'LG 퓨리케어', type: 'purifier' },
    { text: '청호나이스 정수기', type: 'purifier' },
  ];
  const statuses = [
    { k: 'applied', label: '상담중' },
    { k: 'applied', label: '접수완료' },
    { k: 'done', label: '설치완료' },
  ];
  const rand = (a) => a[Math.floor(Math.random() * a.length)];
  const makeEntry = () => ({
    id: Math.random().toString(36).slice(2),
    region: rand(regions),
    surname: rand(surnames),
    product: rand(products),
    status: rand(statuses),
    minsAgo: Math.floor(Math.random() * 12) + 1,
  });

  const [entries, setEntries] = React.useState(() => Array.from({ length: 5 }, makeEntry));
  const [todayCount, setTodayCount] = React.useState(0);

  React.useEffect(() => {
    const target = 137;
    const start = performance.now();
    const tick = (t) => {
      const k = Math.min(1, (t - start) / 1400);
      setTodayCount(Math.floor(target * (1 - Math.pow(1 - k, 3))));
      if (k < 1) requestAnimationFrame(tick);
    };
    requestAnimationFrame(tick);
  }, []);

  React.useEffect(() => {
    const id = setInterval(() => {
      setEntries(prev => [makeEntry(), ...prev].slice(0, 5));
      setTodayCount(c => c + 1);
    }, 3500);
    return () => clearInterval(id);
  }, []);

  return (
    <section>
      <div className="container-md">
        <div className="section-kicker">LIVE</div>
        <h2 className="section-title"><span className="hl">실시간 상담 신청</span> 현황</h2>
        <p className="section-sub">지금 이 순간에도 많은 분들이 다쏜다에서 혜택 받고 계십니다.</p>
        <div className="live-feed">
          <div className="live-feed-header">
            <div className="left"><span className="live-dot"></span>LIVE · 실시간 신청 현황</div>
            <div className="count">오늘 {todayCount.toLocaleString('ko-KR')}건 신청</div>
          </div>
          <div className="live-feed-list">
            {entries.map(e => (
              <div className="live-row" key={e.id}>
                <div className="avatar">{e.surname}</div>
                <div className="body">
                  <div className="line1">
                    <strong>{e.region} {e.surname}**</strong> 님이 <span className="brand">{e.product.text}</span> 신청
                  </div>
                  <div className="line2">{e.minsAgo}분 전 · {e.product.type === 'internet' ? '인터넷/TV' : '정수기 렌탈'}</div>
                </div>
                <div className={`status ${e.status.k}`}>{e.status.label}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

const REVIEW_ITEMS = [
  { stars: '★★★★★', txt: '세 통신사 다 비교해주시고 사은품까지! 다른 데보다 혜택 확실히 많아요.', who: '김**', tag: 'SK 결합' },
  { stars: '★★★★★', txt: '상담 받고 당일 설치 끝. 기사님도 친절하시고 진짜 추천합니다.', who: '이**', tag: 'KT 기가' },
  { stars: '★★★★★', txt: '정수기랑 인터넷 동시에 상담. 둘 다 최저가 받아서 대만족입니다.', who: '박**', tag: '코웨이' },
  { stars: '★★★★★', txt: '위약금 지원까지 꼼꼼하게 안내받아서 편하게 옮겼어요.', who: '최**', tag: 'LG U+' },
  { stars: '★★★★★', txt: '월 렌탈료가 만원 가까이 내려갔어요. 브랜드 비교가 진짜 도움됐습니다.', who: '정**', tag: 'SK매직' },
  { stars: '★★★★★', txt: '과하게 영업 안 하고 필요한 것만 안내해주셔서 편했어요.', who: '한**', tag: '쿠쿠' },
];

function ReviewCard({ r }) {
  return (
    <div className="review">
      <div className="stars">{r.stars}</div>
      <div className="txt">"{r.txt}"</div>
      <div className="meta">
        <strong>{r.who}</strong> 고객<span className="tag">{r.tag}</span>
      </div>
    </div>
  );
}

function ReviewsV2() {
  const pages = React.useMemo(function () {
    var out = [];
    for (var i = 0; i < REVIEW_ITEMS.length; i += 3) {
      out.push(REVIEW_ITEMS.slice(i, i + 3));
    }
    return out;
  }, []);

  var [isDesktop, setIsDesktop] = React.useState(function () {
    return typeof window !== 'undefined' && window.matchMedia('(min-width: 720px)').matches;
  });
  var [reduceMotion, setReduceMotion] = React.useState(function () {
    return typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  });
  var [desktopPage, setDesktopPage] = React.useState(0);
  var [mobileIndex, setMobileIndex] = React.useState(0);

  React.useEffect(function () {
    var mq = window.matchMedia('(min-width: 720px)');
    var mqRm = window.matchMedia('(prefers-reduced-motion: reduce)');
    function onMq() {
      setIsDesktop(mq.matches);
    }
    function onRm() {
      setReduceMotion(mqRm.matches);
    }
    onMq();
    onRm();
    mq.addEventListener('change', onMq);
    mqRm.addEventListener('change', onRm);
    return function () {
      mq.removeEventListener('change', onMq);
      mqRm.removeEventListener('change', onRm);
    };
  }, []);

  React.useEffect(
    function () {
      if (!isDesktop || reduceMotion || pages.length <= 1) return undefined;
      var id = window.setInterval(function () {
        setDesktopPage(function (p) {
          return (p + 1) % pages.length;
        });
      }, 2000);
      return function () {
        window.clearInterval(id);
      };
    },
    [isDesktop, reduceMotion, pages.length]
  );

  React.useEffect(
    function () {
      if (isDesktop || reduceMotion || REVIEW_ITEMS.length <= 1) return undefined;
      var id = window.setInterval(function () {
        setMobileIndex(function (i) {
          return (i + 1) % REVIEW_ITEMS.length;
        });
      }, 1500);
      return function () {
        window.clearInterval(id);
      };
    },
    [isDesktop, reduceMotion]
  );

  var mobileItem = REVIEW_ITEMS[mobileIndex];

  return (
    <section className="bg-subtle">
      <div className="container-md">
        <div className="section-kicker">REVIEWS</div>
        <h2 className="section-title">
          다쏜다로 혜택 받은 <span className="hl">실제 후기</span>
        </h2>
        <p className="section-sub">다쏜다를 통해 상담받으신 분들의 실제 이야기입니다.</p>

        <div className="reviews-desktop-only">
          <div className="review-carousel" aria-roledescription="carousel">
            <div
              className="review-carousel-track"
              style={{
                transform: 'translateX(-' + desktopPage * 100 + '%)',
                transition: reduceMotion ? 'none' : 'transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)',
              }}
            >
              {pages.map(function (page, pi) {
                return (
                  <div className="review-carousel-page" key={pi}>
                    {page.map(function (r, ri) {
                      return <ReviewCard r={r} key={pi + '-' + ri} />;
                    })}
                  </div>
                );
              })}
            </div>
            <div className="review-carousel-dots" role="tablist" aria-label="후기 페이지">
              {pages.map(function (_, i) {
                return (
                  <button
                    type="button"
                    key={i}
                    role="tab"
                    aria-selected={i === desktopPage}
                    aria-label={'후기 ' + (i + 1) + '번째 묶음'}
                    className={'review-carousel-dot' + (i === desktopPage ? ' is-active' : '')}
                    onClick={function () {
                      setDesktopPage(i);
                    }}
                  />
                );
              })}
            </div>
          </div>
        </div>

        <div className="reviews-mobile-only">
          <div className="review-mobile-viewport">
            <div
              key={mobileIndex}
              className={'review review--slide-up' + (reduceMotion ? ' review--no-motion' : '')}
            >
              <div className="stars">{mobileItem.stars}</div>
              <div className="txt">"{mobileItem.txt}"</div>
              <div className="meta">
                <strong>{mobileItem.who}</strong> 고객<span className="tag">{mobileItem.tag}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ProcessV2() {
  const steps = [
    { ttl: '상담 신청',  desc: '이름 · 연락처만 1분. 끝!' },
    { ttl: '맞춤 상담',  desc: '전문 상담사가 조건 확인 후 최대 혜택 안내.' },
    { ttl: '상품 결정',  desc: '혜택 · 요금제 보시고 제일 좋은 걸로 결정.' },
    { ttl: '설치 완료',  desc: '기사 방문 · 설치 완료 · 혜택 받으면 끝!' },
  ];
  return (
    <section>
      <div className="container-md">
        <div className="section-kicker">PROCESS</div>
        <h2 className="section-title">신청부터 혜택까지 <span className="hl">단 4단계</span></h2>
        <p className="section-sub">복잡한 거 없습니다. 전화 한 통이면 다 끝납니다.</p>
        <div className="process-steps">
          {steps.map((s, i) => (
            <div className="step" key={i}>
              <div className="n">{String(i+1).padStart(2, '0')}</div>
              <div className="body">
                <div className="ttl">{s.ttl}</div>
                <div className="desc">{s.desc}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FooterCTAV2({ onCta }) {
  return (
    <section className="footer-cta">
      <div className="container footer-cta-inner">
        <div className="logo-disc"><img src={LOGO_SRC} alt="다쏜다" /></div>
        <div className="urgency-pill">🔥 오늘 신청 고객 혜택 지급</div>
        <h2>지금 안 받으면 <span className="hl">손해!</span><br/>최대 혜택 다쏜다가 <span className="hl">다 쏩니다</span></h2>
        <p className="lead">
          이번 달 한정 프로모션 진행 중.<br/>
          1분 투자로 최대 50만원 혜택, 놓치지 마세요.
        </p>
        <button className="btn btn--primary btn--xl btn--block" onClick={onCta}>
          지금 무료 상담 신청하기 →
        </button>
        <div className="footer-meta">
          (주)다쏜다 · 사업자등록번호 000-00-00000<br/>
          서울특별시 강남구 · 고객센터 1800-0000 (평일 09:00–18:00)
          <div className="footer-links">
            <a href="#">개인정보처리방침</a>
            <a href="#">이용약관</a>
            <a href="#">사업자정보</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function StickyCtaV2({ onCta }) {
  return (
    <div className="sticky-cta">
      <a href="tel:1800-0000" className="phone-btn" aria-label="전화 상담">☎</a>
      <button className="btn btn--primary" onClick={onCta}>무료로 혜택 받기 →</button>
    </div>
  );
}

function InquiryFormV2() {
  const [name, setName] = React.useState('');
  const [phone, setPhone] = React.useState('');
  const [product, setProduct] = React.useState(null);
  const [telco, setTelco] = React.useState(null);
  const [plan, setPlan] = React.useState(null);
  const [brand, setBrand] = React.useState(null);
  const [purifierType, setPurifierType] = React.useState(null);
  const [timeSlot, setTimeSlot] = React.useState(null);
  const [consent, setConsent] = React.useState(false);
  const [submitted, setSubmitted] = React.useState(false);

  const telcos = ['SK브로드밴드', 'SK텔레콤', 'KT', 'LG U+'];
  const plans = ['인터넷 단독', '인터넷 + TV'];
  const brands = ['코웨이', 'SK매직', '쿠쿠', 'LG', '청호나이스', '현대큐밍', '교원웰스'];
  const pTypes = ['얼음 정수기', '냉온 정수기', '상담 후 추천'];
  const slots = ['오전 (09–12)', '오후 (12–18)', '저녁 (18–21)'];

  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)}`;
    setPhone(out);
  };

  const valid = name.trim().length >= 2 && phone.replace(/\D/g,'').length >= 10 && product && consent;
  const submit = (e) => { e.preventDefault(); if (valid) setSubmitted(true); };

  if (submitted) {
    return (
      <div className="form-card" id="apply">
        <div className="form-success">
          🎉 상담 신청 접수 완료!<br/>
          <span style={{fontSize:13, fontWeight:500, color:'var(--fg-2)', marginTop:6, display:'block'}}>
            곧 연락드려요 · {name} 님, 최대 혜택으로 쏴드릴게요!
          </span>
        </div>
      </div>
    );
  }

  return (
    <form className="form-card" id="apply" onSubmit={submit}>
      <div className="form-badge">🔥 이번 달 한정 최대 혜택</div>
      <div className="form-header">
        <img src={LOGO_SRC} alt="" />
        <h3>1분 만에 혜택 받기</h3>
      </div>
      <p className="sub">이름 · 연락처만 남기면 상담사가 바로 연락드려요</p>

      <div className="form-row-2">
        <div className="field" style={{marginBottom:0}}>
          <label className="lbl">이름<span className="req">*</span></label>
          <input className="inp" placeholder="홍길동" value={name} onChange={e=>setName(e.target.value)} />
        </div>
        <div className="field" style={{marginBottom:0}}>
          <label className="lbl">연락처<span className="req">*</span></label>
          <input className="inp" placeholder="010-0000-0000" value={phone} onChange={e=>onPhone(e.target.value)} inputMode="numeric" />
        </div>
      </div>

      <div className="field" style={{marginTop:14}}>
        <label className="lbl">제품 선택<span className="req">*</span></label>
        <div className="pill-group">
          <button type="button" className={`pill ${product==='internet'?'on':''}`} onClick={()=>setProduct('internet')}>
            📶 인터넷 / TV
          </button>
          <button type="button" className={`pill ${product==='purifier'?'on':''}`} onClick={()=>setProduct('purifier')}>
            💧 정수기 렌탈
          </button>
        </div>
      </div>

      {product === 'internet' && (
        <div className="subform">
          <div className="field" style={{marginBottom:0}}>
            <label className="lbl">통신사 선택</label>
            <div className="pill-group cols-4">
              {telcos.map(t => (
                <button type="button" key={t} className={`pill ${telco===t?'on':''}`} onClick={()=>setTelco(t)} style={{fontSize:13, padding:'12px 6px'}}>
                  {t}
                </button>
              ))}
            </div>
          </div>
          <div className="field" style={{marginBottom:0}}>
            <label className="lbl">상품 구성</label>
            <div className="pill-group">
              {plans.map(p => (
                <button type="button" key={p} className={`pill ${plan===p?'on':''}`} onClick={()=>setPlan(p)}>{p}</button>
              ))}
            </div>
          </div>
        </div>
      )}

      {product === 'purifier' && (
        <div className="subform">
          <div className="field" style={{marginBottom:0}}>
            <label className="lbl">브랜드 선택</label>
            <div className="pill-group cols-4">
              {brands.map(b => (
                <button type="button" key={b} className={`pill ${brand===b?'on':''}`} onClick={()=>setBrand(b)} style={{fontSize:13, padding:'12px 4px'}}>
                  {b}
                </button>
              ))}
            </div>
          </div>
          <div className="field" style={{marginBottom:0}}>
            <label className="lbl">제품 종류</label>
            <div className="pill-group cols-3">
              {pTypes.map(p => (
                <button type="button" key={p} className={`pill ${purifierType===p?'on':''}`} onClick={()=>setPurifierType(p)} style={{fontSize:12.5, padding:'12px 4px'}}>
                  {p}
                </button>
              ))}
            </div>
          </div>
        </div>
      )}

      <div className="field" style={{marginTop:14}}>
        <label className="lbl">연락 가능 시간대 <span style={{color:'var(--fg-3)', fontWeight:500}}>(선택)</span></label>
        <div className="pill-group cols-3">
          {slots.map(s => (
            <button type="button" key={s} className={`pill ${timeSlot===s?'on':''}`} onClick={()=>setTimeSlot(s)} style={{fontSize:12.5, padding:'12px 4px'}}>
              {s}
            </button>
          ))}
        </div>
      </div>

      <label className="consent">
        <input type="checkbox" checked={consent} onChange={e=>setConsent(e.target.checked)} />
        <span>개인정보 수집·이용에 동의합니다 (상담 목적 한정, 상담 후 즉시 파기)</span>
      </label>

      <button type="submit" className="btn btn--primary btn--xl btn--block" style={{marginTop:18, opacity: valid?1:0.55}} disabled={!valid}>
        🔥 지금 혜택 받으러 가기 →
      </button>

      <div className="form-trust">
        <span>개인정보 안전</span>
        <span>상담 무료</span>
        <span>공식 제휴점</span>
      </div>
    </form>
  );
}

Object.assign(window, {
  HeaderV2, HeroV2, TrustBarV2, TelecomSectionV2, PurifierSectionV2,
  BenefitsV2, CompareTableV2, FAQSection, ReviewsV2, ProcessV2, LiveFeedV2,
  FooterCTAV2, StickyCtaV2, InquiryFormV2,
});