// 모원렌탈 랜딩 — 섹션 컴포넌트 (hooks.jsx, icons.jsx 선행 로드)
// Expects: window.I, window.ProductArt, window.HeroVisual, window.cardDesigns,
//          window.useCountUp, window.useInView

const { useState, useEffect, useRef } = React;

const LOGO_SRC = 'logo.png';

/* ---------- Product image (원격/로컬 URL + 로드 실패 시 SVG) ---------- */
function ProductThumb({ variant, image, name }) {
  const [broken, setBroken] = useState(false);
  return (
    <div className="product__thumb-layer">
      {broken || !image ? (
        <ProductArt variant={variant} />
      ) : (
        <img
          className="product__photo"
          src={image}
          alt={name}
          loading="lazy"
          decoding="async"
          onError={() => setBroken(true)}
        />
      )}
    </div>
  );
}

const GIFT_IMG_BASE = 'images/사은품/';

/* ---------- 사은품 이미지 (폴더명 = images/사은품/하위 디렉터리) ---------- */
function GiftThumb({ folder, label, icon }) {
  const [broken, setBroken] = useState(false);
  const src = GIFT_IMG_BASE + folder + '/1.png';
  if (broken) {
    return <div className="gift__icon-fallback">{icon}</div>;
  }
  return (
    <img
      className="gift__photo"
      src={src}
      alt={label}
      loading="lazy"
      decoding="async"
      onError={() => setBroken(true)}
    />
  );
}

/* ---------- 실시간 방문자 느낌 (스크롤 후 표시) ---------- */
function LiveViewingBar({ hasStickyCta }) {
  const [visible, setVisible] = useState(false);
  const [count, setCount] = useState(() => 28 + Math.floor(Math.random() * 52));
  const [label, setLabel] = useState('인기 렌탈 제품');

  useEffect(() => {
    const onScroll = () => {
      if (window.scrollY > 140) setVisible(true);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  useEffect(() => {
    if (!visible) return;
    let t;
    const bump = () => {
      setCount((c) => {
        const delta = Math.floor(Math.random() * 9) - 3;
        return Math.min(198, Math.max(9, c + delta));
      });
      t = setTimeout(bump, 2200 + Math.floor(Math.random() * 4200));
    };
    bump();
    return () => clearTimeout(t);
  }, [visible]);

  useEffect(() => {
    if (!visible) return;
    const cat = window.PRODUCT_CATALOG;
    if (!cat || !cat.length) return;
    let t;
    const pick = () => {
      const p = cat[Math.floor(Math.random() * cat.length)];
      setLabel(p.name);
      t = setTimeout(pick, 4500 + Math.floor(Math.random() * 5500));
    };
    pick();
    return () => clearTimeout(t);
  }, [visible]);

  if (!visible) return null;

  return (
    <div
      className={'live-viewing' + (hasStickyCta ? ' live-viewing--above-sticky' : '')}
      role="status"
      aria-live="polite"
    >
      <span className="live-viewing__pulse" aria-hidden="true"/>
      <span className="live-viewing__text">
        <strong className="live-viewing__num">{count}</strong>
        명이 <span className="live-viewing__product">「{label}」</span> 상세를 보고 있어요
      </span>
    </div>
  );
}

/* ---------- Header ---------- */
function Header({ onApply }) {
  return (
    <header className="site-header">
      <div className="site-header__inner">
        <div className="brand-lockup">
          <img className="brand-lockup__logo" src={LOGO_SRC} alt="모원렌탈" width="160" height="48"/>
          <div>
            <div className="brand-lockup__name">모원렌탈</div>
            <div className="brand-lockup__sub">정수기 렌탈</div>
          </div>
        </div>
        <a href="#apply" className="hdr-cta" onClick={(e)=>{e.preventDefault(); onApply();}}>
          <I.Phone width="14" height="14"/>무료상담
        </a>
      </div>
    </header>
  );
}

/* ---------- Hero ---------- */
function Hero() {
  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="hero__inner">
        <div className="hero__ribbon">
          <span className="dot"></span>
          2026 공식 프로모션 진행중
        </div>
        <div className="hero__kicker">생활의 기준을 채우다</div>
        <h1 className="hero__title">
          <span className="gold">최대 지원금</span>부터<br/>
          <span className="block">사은품까지</span><br/>
          한번에 다 드립니다
        </h1>
        <p className="hero__subtitle">
          전국 최저가 모원렌탈에서 공식 프로모션을<br/>
          가장 합리적인 조건으로 만나보세요.
        </p>
        {/* 모원 정수기 아이콘/일러스트(HeroVisual) — 배경 사진만 쓸 때는 아래 블록을 주석으로 두세요. 다시 쓰려면 주석만 제거하면 됩니다. */}
        {/*
        <div className="hero__visual">
          <HeroVisual/>
        </div>
        */}
        <div className="hero__badges">
          <div className="hero__badge gold">3개월 렌탈료 면제</div>
          <div className="hero__badge">당일설치</div>
          <div className="hero__badge">사은품 증정</div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Status (실시간 신청 현황) ---------- */
function Status() {
  const ref = useRef(null);
  const inView = useInView(ref);
  const current = useCountUp(77, inView);
  const remaining = 100 - current;
  const pct = (current / 100) * 100;

  return (
    <section className="section section--subtle" ref={ref}>
      <div className="container">
        <div className="status-card">
          <div className="status-card__eyebrow">프로모션 신청현황</div>
          <h2 className="status-card__title">재고 소진 시 이벤트 종료!</h2>
          <p className="status-card__sub">선착순 100명 한정 특별 혜택</p>

          <div className="counter">
            <span className="counter__current">{current}</span>
            <span className="counter__suffix">명 신청중</span>
          </div>
          <p className="counter__total">
            선착순 <b>100명 한정</b> · 현재까지 {current}명 참여
          </p>
          <div className="progress">
            <div className="progress__bar" style={{ width: `${pct}%` }}></div>
          </div>

          <div className="status-stats">
            <div className="status-stat is-urgent">
              <div className="status-stat__num">{remaining}</div>
              <div className="status-stat__label">남은 자리</div>
            </div>
            <div className="status-stat">
              <div className="status-stat__num" style={{fontSize:22}}>⏰ 마감임박</div>
              <div className="status-stat__label">오늘 자정까지</div>
            </div>
          </div>

          <div className="status-notes">
            <ul>
              <li>전문상담원이 전화드립니다. 꼭 받아주세요!</li>
              <li>미성년자 및 신용불량자는 신청이 불가합니다.</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Inquiry Form ---------- */
function InquiryForm({ onSubmit }) {
  const products = [
    '스위치 무선 정수기','나노직수 미니 정수기','아이콘2 정수기','아이콘3 정수기',
    '아이콘 프로 정수기','미니 얼음정수기','스탠다드 얼음정수기','얼음정수기 RO(지하수)',
    '아이콘 스탠드 정수기','스스로케어 비데','더블케어 비데2','노블 제습공기청정기 10평형',
  ];
  const [name, setName] = useState('');
  const [phone, setPhone] = useState('');
  const [product, setProduct] = useState('');
  const [agree, setAgree] = useState(false);

  const formatPhone = (v) => {
    const d = v.replace(/\D/g,'').slice(0,11);
    if (d.length < 4) return d;
    if (d.length < 8) return `${d.slice(0,3)}-${d.slice(3)}`;
    return `${d.slice(0,3)}-${d.slice(3,7)}-${d.slice(7)}`;
  };

  const submit = (e) => {
    e.preventDefault();
    if (!name.trim()) { alert('성명을 입력해주세요'); return; }
    if (phone.replace(/\D/g,'').length < 10) { alert('연락처를 정확히 입력해주세요'); return; }
    if (!product) { alert('희망 제품을 선택해주세요'); return; }
    if (!agree) { alert('개인정보 수집 및 이용에 동의해주세요'); return; }
    onSubmit({ name, phone, product });
    setName(''); setPhone(''); setProduct(''); setAgree(false);
  };

  return (
    <section id="apply" className="section section--subtle">
      <div className="container">
        <div className="form-card">
          <div className="form-brand">
            <img className="form-brand__logo" src={LOGO_SRC} alt="모원렌탈" width="200" height="64"/>
            <div className="form-brand__tag">전문 상담사가 친절하게 안내해드립니다</div>
          </div>
          <h2 className="form-title">지금 <span style={{color:'var(--coway)'}}>무료 상담</span> 신청하기</h2>

          <form onSubmit={submit}>
            <div className="field">
              <label className="field__label">성명<span className="req">*</span></label>
              <input type="text" className="input" placeholder="이름을 입력해주세요"
                value={name} onChange={(e)=>setName(e.target.value)}/>
            </div>
            <div className="field">
              <label className="field__label">연락처<span className="req">*</span></label>
              <input type="tel" className="input" placeholder="010-0000-0000"
                value={phone} onChange={(e)=>setPhone(formatPhone(e.target.value))}/>
            </div>
            <div className="field">
              <label className="field__label">희망제품<span className="req">*</span></label>
              <select className="select" value={product} onChange={(e)=>setProduct(e.target.value)}>
                <option value="">제품을 선택해주세요</option>
                {products.map(p => <option key={p} value={p}>{p}</option>)}
              </select>
            </div>

            <div className="agree" onClick={()=>setAgree(!agree)}>
              <div className={`agree__checkbox ${agree?'is-checked':''}`}></div>
              <div className="agree__text">
                <b>개인정보수집 및 이용 동의 (필수)</b><br/>
                상담 목적으로만 사용되며, 상담 완료 후 개인정보는 안전하게 파기됩니다.
              </div>
            </div>

            <button type="submit" className="submit-btn">
              <I.Phone width="20" height="20"/>무료 상담 신청하기
            </button>
          </form>

          <div className="license-badge">
            <div className="license-badge__seal">
              <I.Seal/>공식 파트너 · 모원렌탈 정식 안내
            </div>
            <div className="license-badge__sub">사업자·통신판매 등 상세 정보는 상담 시 안내드립니다.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Benefits ---------- */
function Benefits() {
  const items = [
    { n:'01', icon:<I.Gift/>, label:'최대지원 + 사은품', title:<>당일 <span className="accent">설치지원</span></>, gold:true },
    { n:'02', icon:<I.Calendar/>, label:'전 모델 렌탈료', title:<>3개월 <span className="gold-pill">면제</span></> },
    { n:'03', icon:<I.Percent/>, label:'결합 할인 · 동시구매', title:<>동시구매<br/>최대 10% 할인</> },
    { n:'04', icon:<I.Shield/>, label:'타사 보상지원', title:<>위약금<br/>100% 보상</> },
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="section-kicker is-gold">SPECIAL BENEFITS</div>
        <h2 className="section-title">모원렌탈만의 <span className="mark-gold">특별한</span><br/>추가 혜택!</h2>
        <p className="section-sub">다른 곳에서는 받을 수 없는 모원렌탈 전용 혜택을 모두 모았습니다</p>
        <div className="benefits-grid">
          {items.map(it => (
            <div key={it.n} className="benefit">
              <div className="benefit__num">{it.n}</div>
              <div className={`benefit__icon ${it.gold?'is-gold':''}`}>{it.icon}</div>
              <div className="benefit__label">{it.label}</div>
              <div className="benefit__title">{it.title}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Products ---------- */
function Products() {
  const list = window.PRODUCT_CATALOG && window.PRODUCT_CATALOG.length
    ? window.PRODUCT_CATALOG
    : [
        { name:'스위치 무선 정수기', v:'purifier', price:'15,900', card:'월 0원~', tags:['정수','무선'], hot:true },
        { name:'나노직수 미니 정수기', v:'purifier', price:'15,900', card:'월 0원~', tags:['정수','나노직수'] },
        { name:'아이콘2 정수기', v:'purifier', price:'14,200', card:'월 3,400원~', tags:['냉수','온수','정수'] },
        { name:'아이콘3 정수기', v:'purifier', price:'14,450', card:'월 3,900원~', tags:['냉수','온수','정수'] },
        { name:'아이콘 프로 정수기', v:'purifier', price:'14,950', card:'월 4,900원~', tags:['냉수','온수','정수'], hot:true },
        { name:'미니 얼음정수기', v:'ice', price:'21,450', card:'월 17,900원~', tags:['얼음','냉수','온수'] },
        { name:'스탠다드 얼음정수기', v:'ice', price:'22,950', card:'월 20,900원~', tags:['얼음','냉수','온수'] },
        { name:'얼음정수기 RO(지하수)', v:'ice', price:'20,200', card:'월 15,400원~', tags:['얼음','RO','지하수'] },
        { name:'아이콘 스탠드 정수기', v:'purifier', price:'12,950', card:'월 900원~', tags:['냉수','온수','정수'] },
        { name:'스스로케어 비데', v:'bidet', price:'18,400', card:'월 7,900원~', tags:['99% 항균','살균'] },
        { name:'더블케어 비데2', v:'bidet', price:'24,400', card:'월 12,900원~', tags:['터치리모컨','IPX방수'] },
        { name:'노블 제습공기청정기', v:'air', price:'18,950', card:'월 12,900원~', tags:['21L제습','4단필터'] },
      ];
  return (
    <section className="section section--subtle" id="products">
      <div className="container">
        <div className="section-kicker">BEST RENTAL</div>
        <h2 className="section-title"><span className="mark">인기 렌탈</span> 제품</h2>
        <p className="section-sub">고객이 가장 많이 선택한 모원렌탈 베스트 라인업</p>
        <div className="product-grid">
          {list.map((p, i) => (
            <div key={p.slug || i} className="product">
              <div className="product__image">
                <ProductThumb variant={p.v} image={p.image} name={p.name}/>
                {p.hot && <div className="product__ribbon">HOT</div>}
                <div className="product__rating"><I.Star/>4.8</div>
              </div>
              <h3 className="product__name">{p.name}</h3>
              <div className="product__tags">
                {p.tags.map(t => <span key={t} className="product__tag">{t}</span>)}
              </div>
              <div className="product__price">
                <div className="product__price-label">월 렌탈료</div>
                <div className="product__price-main">
                  {p.price}<span className="won">원</span><span className="tilde">~</span>
                </div>
                <div className="product__price-sub">제휴카드 사용시 {p.card}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Gifts ---------- */
function Gifts() {
  const gifts = [
    { label: '삼성 TV', folder: '삼성 TV (HOT)', icon: <I.Tv/>, hot: true },
    { label: '커피머신', folder: '커피머신', icon: <I.Coffee/> },
    { label: '백화점 상품권', folder: '백화점 상품권 (HOT)', icon: <I.ShoppingBag/>, hot: true },
    { label: '청소기', folder: '청소기', icon: <I.Wind/> },
    { label: '프리미엄 사은품', folder: '프리미엄 사은품', icon: <I.Package/> },
    { label: '현금 캐시백', folder: '현금 캐시백 (HOT)', icon: <I.Coin/>, hot: true },
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="section-kicker is-gold">GIFT COLLECTION</div>
        <h2 className="section-title">모원 <span className="mark-gold">사은품</span> 컬렉션</h2>
        <p className="gifts-intro">상담 시 원하는 사은품을 직접 선택하세요.<br/>가전, 상품권, 현금 캐시백까지 다양하게 준비했습니다.</p>
        <div className="gifts-grid">
          {gifts.map((g, i) => (
            <div key={g.folder} className={`gift ${g.hot ? 'is-hot' : ''}`}>
              <div className="gift__media">
                <GiftThumb folder={g.folder} label={g.label} icon={g.icon}/>
              </div>
              <div className="gift__label">{g.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Trust ---------- */
function Trust() {
  const ref = useRef(null);
  const inView = useInView(ref);
  const stats = [
    { num:1200, suf:'만대', label:'누적 설치' },
    { num:97.2, suf:'%',   label:'고객 만족도', decimal:true },
    { num:6000, suf:'명',  label:'서비스망' },
    { num:1,    suf:'위',  label:'품질 만족지수' },
    { num:1,    suf:'위',  label:'업계 점유율' },
    { num:20,   suf:'년+', label:'브랜드 역사' },
  ];
  return (
    <section className="trust-hero" ref={ref} data-screen-label="07 Trust">
      <div className="container trust-hero__inner">
        <div className="trust-hero__kicker">WHY MOWON</div>
        <h2 className="trust-hero__title">
          왜 렌탈은<br/>
          <span className="gold">모원렌탈</span>과 함께할까요?
        </h2>
        <p className="trust-hero__sub">매일 마시는 물이니까, 더 믿을 수 있는 선택이 필요합니다.</p>

        <div className="trust-grid">
          {stats.map((s, i) => {
            const val = useCountUp(Math.floor(s.num), inView, 1800);
            const display = s.decimal ? (inView ? s.num.toFixed(1) : '0.0') : val.toLocaleString();
            return (
              <div key={i} className="trust-stat">
                <div className="trust-stat__num">{display}{s.suf}</div>
                <div className="trust-stat__label">{s.label}</div>
              </div>
            );
          })}
        </div>

        <div className="trust-footer">
          <div className="trust-footer__badge">믿고 쓰는 1등 브랜드</div>
          <div className="trust-footer__msg">당신의 첫 렌탈은<br/><span style={{color:'var(--gold-400)'}}>모원렌탈</span>과 함께하세요.</div>
        </div>
      </div>
    </section>
  );
}

/* ---------- Compare Table ---------- */
function Compare() {
  const rows = [
    { label:'편리함',   good:'간편한 이용',     bad:'반복 구매' },
    { label:'운반',     good:'설치만 하면 끝',  bad:'무거운 박스 운반' },
    { label:'주문',     good:'자동 공급',       bad:'지속적 재주문' },
    { label:'경제성',   good:'저렴한 비용',     bad:'장기 고비용' },
    { label:'위생',     good:'정기 관리 서비스', bad:'보관 공간 필요' },
    { label:'환경',     good:'친환경',          bad:'폐기물 증가' },
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="section-kicker">SMART CHOICE</div>
        <h2 className="section-title">매달 <span className="mark">생수</span> 사느라<br/>번거로우셨죠?</h2>
        <p className="section-sub">정수기와 생수, 직접 비교해보면 답이 나옵니다.<br/>더 위생적이고, 더 편리하고, 더 저렴해요.</p>

        <div className="compare">
          <div className="compare__row compare__head">
            <div className="compare__cell compare__cell--label">항목</div>
            <div className="compare__cell compare__cell--good">정수기</div>
            <div className="compare__cell">생수</div>
          </div>
          {rows.map(r => (
            <div key={r.label} className="compare__row">
              <div className="compare__cell compare__cell--label">{r.label}</div>
              <div className="compare__cell compare__cell--good">
                <span className="compare__mark good">○</span>
                <span>{r.good}</span>
              </div>
              <div className="compare__cell compare__cell--bad">
                <span className="compare__mark bad">✕</span>
                <span>{r.bad}</span>
              </div>
            </div>
          ))}
        </div>

        <div className="compare-outro">
          정수기로 바꾸는 순간부터<br/>매일이 더 가벼워집니다.
        </div>
      </div>
    </section>
  );
}

/* ---------- Cards (제휴카드 안내) ---------- */
function Cards() {
  const cards = [
    { name:'KB국민 모원렌탈 II 카드',    tiers:[['40만원 이상','15,000원'],['80만원 이상','20,000원']],                             max:'20,000원', d:0 },
    { name:'모원렌탈 우리카드 II',       tiers:[['30만원 이상','10,000원'],['70만원 이상','15,000원'],['120만원 이상','20,000원']],  max:'20,000원', d:1 },
    { name:'모원렌탈 삼성 카드',         tiers:[['30만원 이상','7,000원'], ['70만원 이상','10,000원'],['120만원 이상','13,000원']],  max:'13,000원', d:2 },
    { name:'마이 모원렌탈 하나 카드',    tiers:[['30만원 이상','13,000원'],['80만원 이상','18,000원'],['150만원 이상','25,000원']],  max:'25,000원', d:3 },
    { name:'모원렌탈 IBK 카드',          tiers:[['30만원 이상','13,000원'],['70만원 이상','17,000원'],['120만원 이상','23,000원']],  max:'23,000원', d:4 },
    { name:'모원렌탈 현대카드 M Ed.3',   tiers:[['50만원 이상','15,000원'],['100만원 이상','20,000원']],                             max:'20,000원', d:5 },
    { name:'모원렌탈 롯데카드',          tiers:[['30만원 이상','10,000원'],['60만원 이상','15,000원'],['100만원 이상','20,000원']],  max:'20,000원', d:6 },
    { name:'모원렌탈 신한카드',          tiers:[['30만원 이상','13,000원'],['70만원 이상','17,000원'],['150만원 이상','30,000원']],  max:'30,000원', d:7 },
  ];
  return (
    <section className="section section--subtle">
      <div className="container">
        <div className="section-kicker">PARTNER CARDS</div>
        <h2 className="section-title">스마트한 소비,<br/><span className="mark">실속있는</span> 혜택!</h2>
        <p className="section-sub">제휴카드를 활용하면 매달 렌탈료를 더 크게 절약할 수 있어요.</p>

        <div className="cards-rail">
          {cards.map((c, i) => {
            const design = cardDesigns[c.d] || cardDesigns[0];
            return (
              <div key={i} className="ccard">
                <div className="ccard__visual" style={{ background: design.gradient }}>
                  <div className="ccard__chip"></div>
                  <div className="ccard__brand">{design.brand}<br/>모원렌탈</div>
                </div>
                <h4 className="ccard__name">{c.name}</h4>
                {c.tiers.map(([a,b], j) => (
                  <div key={j} className="ccard__tier">
                    <span>{a}</span><b>{b}</b>
                  </div>
                ))}
                <div className="ccard__max">최대 <b>{c.max}</b></div>
              </div>
            );
          })}
        </div>
        <p className="cards-footnote">※ 자동이체 미등록시 소급 적용은 불가합니다.</p>
      </div>
    </section>
  );
}

/* ---------- Process ---------- */
function Process() {
  const steps = [
    { n:'01', title:'이벤트 신청',            desc:'쉽고 빠른 간편 상담 신청', icon:<I.User/> },
    { n:'02', title:'상담 및 신청서 작성',    desc:'상담 시 원하는 사은품 직접 선택', icon:<I.Gift/> },
    { n:'03', title:'설치 후 사은품 수령',    desc:'전국 어디든 당일 발송 시스템', icon:<I.Truck/> },
  ];
  return (
    <section className="section">
      <div className="container">
        <div className="section-kicker">EASY PROCESS</div>
        <h2 className="section-title">모원렌탈<br/><span className="mark">이벤트 절차</span></h2>
        <p className="section-sub">단 3단계로 끝나는 빠르고 간편한 상담</p>
        <div className="process">
          {steps.map(s => (
            <div key={s.n} className="step">
              <div className="step__num">{s.n}</div>
              <div className="step__body">
                <h4 className="step__title">{s.title}</h4>
                <div className="step__desc">{s.desc}</div>
              </div>
              <div className="step__icon">{s.icon}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- Final CTA ---------- */
function FinalCTA({ onApply }) {
  return (
    <section className="final-cta" data-screen-label="12 Final CTA">
      <div className="container">
        <div className="final-cta__badge">🔥 전국 최저가 프로모션</div>
        <h2 className="final-cta__title">재고 소진 시,<br/><span className="gold">이벤트 종료!</span></h2>
        <p className="final-cta__sub">지금 신청하면 최대 혜택을 모두 받으실 수 있습니다.</p>
        <div className="final-cta__counter">
          <span className="final-cta__counter-lbl">선착순 100명 중 현재</span>
          <span className="final-cta__counter-num">77명</span>
          <span className="final-cta__counter-lbl">참여</span>
        </div>
        <button className="final-cta__btn" onClick={onApply}>
          <I.Phone width="22" height="22"/>무료 상담 신청하기
          <I.ArrowRight width="20" height="20"/>
        </button>
      </div>
    </section>
  );
}

/* ---------- Sticky CTA ---------- */
function StickyCTA({ onApply }) {
  return (
    <div className="sticky-cta">
      <div className="sticky-cta__inner">
        <a href="tel:1588-0000" className="sticky-cta__call" aria-label="전화 걸기">
          <I.Phone width="22" height="22"/>
        </a>
        <button className="sticky-cta__main" onClick={onApply}>
          <I.Gift width="18" height="18"/>
          무료 상담 신청 · 혜택 받기
        </button>
      </div>
    </div>
  );
}

/* ---------- Footer ---------- */
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div><strong>모원렌탈</strong> · 공식 프로모션 안내</div>
        <div style={{marginTop:6}}>대표 1588-0000 · 평일 09:00–20:00 (주말/공휴일 상담가능)</div>
        <div style={{marginTop:6,opacity:0.6}}>© 2026 Mowon Rental. All rights reserved.</div>
      </div>
    </footer>
  );
}

/* ---------- Submitted Toast ---------- */
function Toast({ show, onDone }) {
  useEffect(() => {
    if (!show) return;
    const t = setTimeout(onDone, 2800);
    return () => clearTimeout(t);
  }, [show, onDone]);
  if (!show) return null;
  return (
    <div className="toast">
      <I.Check width="18" height="18"/>상담 신청이 접수되었습니다!
    </div>
  );
}

Object.assign(window, {
  Header, Hero, Status, InquiryForm, Benefits, Products, Gifts,
  Trust, Compare, Cards, Process, FinalCTA, StickyCTA, Footer, Toast,
  LiveViewingBar,
});