/* =====================================================================
 * Afflix Landing v3.2 — React App (전면 재설계)
 * 정본: uploads/0517_감사최종취합_랜딩리뉴얼_디팀전달본.md + CMO 쏘왓 ×5 + 가격 확정안
 *   · Hero 슬라이드 BG 5장 6초 사이클 (구 사이트 패턴)
 *   · 누적 발행 카운터 count-up 애니메이션 (12,480건 · 운영 라인 집계)
 *   · Light/Dark 토글 (localStorage 영속)
 *   · "작동원리 보기" 버튼 제거
 *   · 문제 인식: 글쓰기 → 수익 페인 (CMO 쏘왓 정정)
 *   · 4가지 메커니즘: split-left 이미지
 *   · 7 파이프라인: 큰 이모지 노드
 *   · 운영 예시: BG 이미지 + 라벨
 *   · 가치 vs 가격: BG 이미지 카드
 *   · 가격: Basic/Standard/Premium · 서버 1/3/5대 · 블로그 ~50/150/250 · "우선 기술 지원" 통일
 * ===================================================================== */

const { useState: uLP, useEffect: eLP, useRef: rLP } = React;

/* ========== Unsplash 이미지 (테마별 매칭) ========== */
const IMG = {
  // Hero 슬라이드 5장 — Gemini AI 생성 이미지 (Afflix 테마 직접 매칭)
  //   1) 매트릭스 코드 + 대시보드 / 2) 우주 컨베이어 누적 수익 / 3) 콘트롤룸 KPI 패널
  //   4) 콘텐츠 카드 + 수익 ₩7,890,450 / 5) 실시간 수익 대시보드 + ₩3,456,789
  hero: [
    'landing/img/hero-1.jpg',
    'landing/img/hero-2.jpg',
    'landing/img/hero-3.jpg',
    'landing/img/hero-4.jpg',
    'landing/img/hero-5.jpg',
  ],
  // 배포용 자산 경로 (운영 환경)
  hero_deploy: [
    '/hero-bg.png','/hero-bg2.png','/hero-bg3.png','/hero-bg4.png','/hero-bg5.png',
  ],
  // 문제 인식 3
  prob: [
    'https://images.unsplash.com/photo-1499951360447-b19be8fe80f5?w=900&q=70&auto=format&fit=crop',   // tired work
    'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=900&q=70&auto=format&fit=crop',   // growth chart
    'https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?w=900&q=70&auto=format&fit=crop',   // shopping
  ],
  // 4 메커니즘
  mech: [
    'https://images.unsplash.com/photo-1620712943543-bcc4688e7485?w=1100&q=70&auto=format&fit=crop',  // AI brain
    'https://images.unsplash.com/photo-1611224923853-80b023f02d71?w=1100&q=70&auto=format&fit=crop',  // template/design
    'https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=1100&q=70&auto=format&fit=crop',     // server room
    'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=1100&q=70&auto=format&fit=crop',     // analytics dashboard
  ],
  // 운영 예시 3
  trust: [
    'https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d?w=900&q=70&auto=format&fit=crop',   // solo work
    'https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=900&q=70&auto=format&fit=crop',   // dashboard growth
    'https://images.unsplash.com/photo-1521737711867-e3b97375f902?w=900&q=70&auto=format&fit=crop',   // team operation
  ],
  // 가치 vs 가격 3
  value: [
    'https://images.unsplash.com/photo-1501139083538-0139583c060f?w=900&q=70&auto=format&fit=crop',   // clock time
    'https://images.unsplash.com/photo-1543286386-713bdd548da4?w=900&q=70&auto=format&fit=crop',      // growing seeds
    'https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=900&q=70&auto=format&fit=crop',      // balance/finance
  ],
};

/* ========== Theme hook (localStorage 영속) ========== */
function useTheme(){
  const [theme, setTheme] = uLP(() => {
    if (typeof window === 'undefined') return 'dark';
    return localStorage.getItem('afflix-landing-theme') || 'dark';
  });
  eLP(()=>{
    document.documentElement.setAttribute('data-theme', theme);
    localStorage.setItem('afflix-landing-theme', theme);
  },[theme]);
  return [theme, setTheme];
}

/* ========== Count-up hook ========== */
function useCountUp(target, duration = 1800){
  const [v, setV] = uLP(0);
  eLP(()=>{
    let raf, start;
    const tick = (t) => {
      if (!start) start = t;
      const p = Math.min((t - start) / duration, 1);
      // ease-out cubic
      const eased = 1 - Math.pow(1 - p, 3);
      setV(Math.floor(target * eased));
      if (p < 1) raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  },[target, duration]);
  return v;
}

/* ========== Hero slide cycler ========== */
function useHeroSlide(count, intervalMs = 6000){
  const [idx, setIdx] = uLP(0);
  eLP(()=>{
    const t = setInterval(()=>setIdx(i => (i + 1) % count), intervalMs);
    return () => clearInterval(t);
  },[count, intervalMs]);
  return idx;
}

/* ========== Top Nav ========== */
function LpNav({ theme, setTheme }){
  const [open, setOpen] = uLP(false);
  const links = [
    ['#problem','왜 Afflix인가?'],
    ['#how','자동 운영 흐름'],
    ['#trust','운영 예시'],
    ['#pricing','요금제'],
    ['#faq','FAQ'],
  ];
  return (
    <nav className={'lp-nav' + (open?' is-menu-open':'')}>
      <div className="lp-nav-inner">
        <a href="#top" className="lp-nav-brand">AFFLIX</a>
        <div className="lp-nav-links">
          {links.map(([h,l])=>(
            <a key={h} href={h} className="lp-nav-link" onClick={()=>setOpen(false)}>{l}</a>
          ))}
        </div>
        <div className="lp-nav-cta-group">
          <button className="lp-nav-theme" onClick={()=>setTheme(theme==='dark'?'light':'dark')}
            title={theme==='dark'?'라이트 모드':'다크 모드'} aria-label="테마 전환">
            {theme==='dark'?'☀':'☾'}
          </button>
          <a href="/login" className="lp-nav-login">로그인</a>
          <a href="/signup" className="lp-nav-start">무료로 시작</a>
        </div>
        <button className="lp-nav-burger" onClick={()=>setOpen(!open)} aria-label="메뉴">{open?'✕':'≡'}</button>
      </div>
    </nav>
  );
}

/* ========== 1. Hero ========== */
function LpHero(){
  const slideIdx = useHeroSlide(IMG.hero.length);
  const counter = useCountUp(12480);
  return (
    <section className="lp-hero" id="top">
      <div className="lp-hero-bg">
        {IMG.hero.map((src,i)=>(
          <div key={i} className={'lp-hero-slide'+(i===slideIdx?' is-active':'')}
            style={{backgroundImage:`url(${src})`}}/>
        ))}
      </div>
      <div className="lp-hero-inner">
        <div className="lp-hero-counter">{counter.toLocaleString()}<span style={{fontSize:'0.55em',fontWeight:700,marginLeft:8,color:'var(--text2)'}}>건</span></div>
        <div className="lp-hero-counter-disclaimer">
          <b>오늘도 자동 발행</b> · 누적 발행 기준 · 운영 라인 집계
        </div>
        <h1 className="lp-hero-h1">
          퇴근 후에도, 잠든 사이에도<br/>
          <em>AI가 쿠팡 수익 콘텐츠를 매일 쌓습니다</em>
        </h1>
        <p className="lp-hero-sub">
          상품 찾기·글쓰기·발행·수익 추적까지 —<br/>
          7단계를 <em>AI가 24시간 대신</em>합니다. 당신은 쿠팡파트너스 ID만 연결하면 됩니다.
        </p>
        <div className="lp-hero-stats">
          <div><div className="lp-hero-stat-num">매일</div><div className="lp-hero-stat-label">자동 발행<br/><span style={{color:'var(--text3)',fontSize:'12px'}}>(쉬는 날 없이)</span></div></div>
          <div><div className="lp-hero-stat-num">50개+</div><div className="lp-hero-stat-label">블로그 동시 운영</div></div>
          <div><div className="lp-hero-stat-num">100%</div><div className="lp-hero-stat-label">수익은 전부 내 계정으로</div></div>
        </div>
        <div className="lp-hero-cta">
          <a href="/signup" className="lp-btn lp-btn-primary lp-btn-lg">무료체험 시작하기</a>
        </div>
        <div className="lp-hero-note">카드 등록 없이 1개월 무료 시작 · 언제든 해지 가능</div>
      </div>
    </section>
  );
}

/* ========== 2. 문제 인식 — CMO 쏘왓 정정 ========== */
function LpProblem(){
  const probs = [
    { n:'01', img:IMG.prob[0],
      t:'혼자서는 매일 운영이 안 됩니다',
      b:'상품 찾고, 글 쓰고, 올리고, 점검까지 — 매일 반복하는 운영은 본업 있는 운영자에게 사실상 불가능합니다.' },
    { n:'02', img:IMG.prob[1],
      t:'수익은 한 번에 안 옵니다',
      b:'글이 쌓여야 검색에 잡히고, 검색에 잡혀야 클릭이 나옵니다. 누적 없이는 수익이 시작되지 않습니다.' },
    { n:'03', img:IMG.prob[2],
      t:'뭐가 돈이 되는지, 감으로는 못 맞춥니다',
      b:'어떤 상품이 팔리고 어떤 카테고리가 막히는지 — 매번 손으로 판단하면 일관성이 깨지고 수익도 같이 깨집니다.' },
  ];
  return (
    <div className="lp-section-bgwrap lp-section-bgwrap--bg">
      <section className="lp-section" id="problem">
        <div className="lp-section-head">
          <span className="lp-eyebrow">진짜 막히는 곳은 글이 아닙니다</span>
          <h2 className="lp-section-h2">진짜 어려움은 글쓰기가 아니라,<br/><em>수익이 날 때까지 멈추지 않는 것</em>입니다</h2>
          <p className="lp-section-sub">제휴 수익형 블로그는 <b>매일 발행 + 누적 색인 + 카테고리 정합</b> 세 가지가 동시에 살아 있어야 수익이 시작됩니다.</p>
        </div>
        <div className="lp-problem-grid">
          {probs.map(p=>(
            <div key={p.n} className="lp-prob-card">
              <div className="lp-prob-card-img" style={{backgroundImage:`url(${p.img})`}}/>
              <div className="lp-prob-card-overlay"/>
              <div className="lp-prob-card-content">
                <div className="lp-prob-num">{p.n}</div>
                <h3 className="lp-prob-title">{p.t}</h3>
                <p className="lp-prob-body">{p.b}</p>
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

/* ========== 3. 메커니즘 — split-left 이미지 ========== */
function LpMechanism(){
  const mech = [
    { n:'01', img:IMG.mech[0], mech:'CONTENT GENERATION',
      t:'AI가 매일 콘텐츠를 작성합니다',
      text:'카테고리·키워드·계절·과거 흐름을 기반으로 AI가 발행 형식을 자동 매칭하고, 글·썸네일·메타까지 한 호흡에 작성합니다.',
      effect:'발행 끊김 0' },
    { n:'02', img:IMG.mech[1], mech:'PROVEN TEMPLATES',
      t:'검증된 10가지 형식만 사용합니다',
      text:'가성비 비교·랭킹·계절 모음 등 카테고리별로 검증된 10가지. 형식 자체가 색인·전환에 유리한 구조로 잠겨 있습니다.',
      effect:'색인 적합도 +' },
    { n:'03', img:IMG.mech[2], mech:'DIRECT PUBLISH',
      t:'본인 인증 계정에 직접 발행됩니다',
      text:'AFFLIX 서버에 쌓이지 않고 본인 블로그로 직접 발행됩니다. 글·트래픽·수익은 100% 사용자에게 남습니다.',
      effect:'자산은 내 것' },
    { n:'04', img:IMG.mech[3], mech:'CATEGORY POLICY',
      t:'카테고리 정합은 자동으로 잠급니다',
      text:'어떤 상품군이 허용·금지인지 운영 정책으로 미리 잠그기 때문에 매번 손으로 판단할 필요가 없습니다.',
      effect:'정합성 안정' },
  ];
  return (
    <div className="lp-section-bgwrap">
      <section className="lp-section" id="how">
        <div className="lp-section-head">
          <span className="lp-eyebrow">왜 작동하는가</span>
          <h2 className="lp-section-h2">Afflix가 작동하는 <em>4가지 메커니즘</em></h2>
          <p className="lp-section-sub">기능 나열이 아니라, 자동화가 실제 수익 구조로 이어지는 이유를 보여드립니다.</p>
        </div>
        <div className="lp-mech-list">
          {mech.map(m=>(
            <div key={m.n} className="lp-mech-row">
              <div className="lp-mech-img" style={{backgroundImage:`url(${m.img})`}}/>
              <div className="lp-mech-body">
                <div className="lp-mech-num">MECHANISM {m.n}</div>
                <h3 className="lp-mech-title">
                  {m.t}
                  <span className="lp-mech-mech">{m.mech}</span>
                </h3>
                <p className="lp-mech-text">{m.text}</p>
                <span className="lp-mech-effect">→ {m.effect}</span>
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

/* ========== 4. 7 파이프라인 ========== */
function LpPipeline(){
  const steps = [
    { n:1, e:'🛒', t:'상품 수집', s:'쿠팡 카탈로그' },
    { n:2, e:'📂', t:'카테고리', s:'정합 검증' },
    { n:3, e:'🤖', t:'AI 글', s:'형식 매칭' },
    { n:4, e:'🎨', t:'HTML 생성', s:'슬롯 주입' },
    { n:5, e:'✅', t:'품질 검수', s:'6항목 자동' },
    { n:6, e:'📤', t:'자동 발행', s:'본인 계정' },
    { n:7, e:'💰', t:'수익 발생', s:'전액 사용자' },
  ];
  return (
    <div className="lp-section-bgwrap lp-section-bgwrap--bg">
      <section className="lp-section">
        <div className="lp-section-head">
          <span className="lp-eyebrow">작동 흐름</span>
          <h2 className="lp-section-h2">상품 수집부터 수익 발생까지<br/><em>7단계가 자동으로</em> 돌아갑니다</h2>
          <p className="lp-section-sub">사람이 손대는 단계는 0개 — AI가 7개 단계를 매일 흘립니다.</p>
        </div>
        <div className="lp-pipe-wrap">
          <div className="lp-pipe-rail"/>
          <div className="lp-pipe">
            {steps.map(s=>(
              <div key={s.n} className="lp-pipe-step">
                <div className="lp-pipe-emoji">
                  {s.e}
                  <span className="lp-pipe-num">{s.n}</span>
                </div>
                <div className="lp-pipe-title">{s.t}</div>
                <div className="lp-pipe-sub">{s.s}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

/* ========== 5. 운영 예시 ========== */
function LpTrust(){
  const cases = [
    { plan:'Basic', img:IMG.trust[0], cat:'가전 카테고리', title:'1인 시작 시나리오',
      m1:['30건','30일 발행'], m2:['18건','색인된 글'], m3:['형성','유입 흐름'],
      n:'카테고리 1개로 베이스라인 형성. 셋업 3개월 누적 후 안정 구간 진입을 가정한 운영 예시.' },
    { plan:'Standard', img:IMG.trust[1], cat:'뷰티 + 식품', title:'안정 운영 시나리오',
      m1:['60~80건','30일 발행'], m2:['35건+','색인된 글'], m3:['비교','카테고리 흐름'],
      n:'2~3 카테고리 운영 시 흐름 비교가 가능해지며 다음 발행 품질이 누적되는 가정.' },
    { plan:'Premium', img:IMG.trust[2], cat:'다 카테고리', title:'대규모 운영 시나리오',
      m1:['150건+','30일 발행'], m2:['70건+','색인된 글'], m3:['안정','운영 라인'],
      n:'대규모 운영에서 자산 누적 + 우선 지원으로 운영 라인이 안정되는 가정.' },
  ];
  return (
    <div className="lp-section-bgwrap">
      <section className="lp-section" id="trust">
        <div className="lp-section-head">
          <span className="lp-eyebrow">운영 예시</span>
          <h2 className="lp-section-h2">처음 시작하면 <em>이렇게 쌓입니다</em></h2>
          <p className="lp-section-sub">아래는 운영 가정 기반 <b>운영 예시</b>입니다. Beta 누적 후 실 케이스로 교체할 예정이며, 실제 결과는 카테고리·시점·운영 방식에 따라 다릅니다.</p>
        </div>
        <div className="lp-trust-grid">
          {cases.map(c=>(
            <div key={c.plan} className="lp-trust-card">
              <div className="lp-trust-img" style={{backgroundImage:`url(${c.img})`}}>
                <div className="lp-trust-img-label">
                  <span className="lp-trust-pill">● 운영 예시</span>
                </div>
              </div>
              <div className="lp-trust-body">
                <div className="lp-trust-cat">{c.plan} · {c.cat}</div>
                <h3 className="lp-trust-title">{c.title}</h3>
                <div className="lp-trust-metrics">
                  {[c.m1,c.m2,c.m3].map(([n,l],i)=>(
                    <div key={i}>
                      <div className="lp-trust-metric-num">{n}</div>
                      <div className="lp-trust-metric-lbl">{l}</div>
                    </div>
                  ))}
                </div>
                <p className="lp-trust-note">{c.n}</p>
              </div>
            </div>
          ))}
        </div>
        <div className="lp-trust-disclaimer">
          ※ 위 수치는 운영 가정 예시이며 <b>수익 보장이 아닙니다</b>. 실수익은 카테고리·시점·운영 방식에 따라 다릅니다.
        </div>
      </section>
    </div>
  );
}

/* ========== 6. 반론 해소 ========== */
function LpObjection(){
  const qa = [
    ['AI가 쓴 글은 색인이 되나요?',
     '검증된 10가지 형식이 색인 친화적으로 설계되어 있고, 발행은 본인 인증 계정에 직접 일어나기 때문에 본인 블로그의 도메인 권위와 연결됩니다. 색인은 글 자체보다 발행 누적 + 카테고리 정합 + 도메인 신뢰에서 만들어집니다.'],
    ['하루 한 편이 정말 필요한가요?',
     '한두 편 잘 쓰는 것보다 일정한 리듬이 SEO에 더 중요합니다. 검색 엔진은 발행 빈도·카테고리 정합·내부 링크 누적을 함께 보기 때문에 일정한 발행이 누적될수록 색인 안정성이 올라갑니다.'],
    ['수익이 정말 사용자에게 100% 가나요?',
     '발행은 본인 인증 계정에 직접 일어납니다. AFFLIX 서버에 트래픽이나 광고가 쌓이는 구조가 아니라 사용자 블로그 소유 트래픽이므로 광고 수익·제휴 수익은 전액 사용자에게 귀속됩니다.'],
    ['카드 등록 없이 시작 가능한가요?',
     '예. 가입 시 카드 등록은 받지 않습니다. 무료 1개월 종료 전 카드를 등록하지 않으면 발행만 일시 정지되며 자동 결제는 발생하지 않습니다.'],
    ['해지 후 발행한 글은 어떻게 되나요?',
     '이미 발행된 글·썸네일·메타 자산은 사용자 블로그에 그대로 남습니다. AFFLIX 측에서 회수하지 않으며 해지 후에도 사용자 자산입니다.'],
    ['금지 카테고리는 누가 판단하나요?',
     '운영 정책으로 미리 잠가 둡니다. 의료·금융·정치 등 가이드라인 위반 우려가 있는 카테고리는 자동 매칭에서 제외되며 사용자가 명시적으로 선택해도 발행 전에 차단됩니다.'],
  ];
  return (
    <div className="lp-section-bgwrap lp-section-bgwrap--obj">
      <section className="lp-section">
        <div className="lp-section-head">
          <span className="lp-eyebrow">의심해도 좋습니다</span>
          <h2 className="lp-section-h2">이런 질문이 <em>먼저 들 겁니다</em></h2>
          <p className="lp-section-sub">시작 전에 가장 많이 받는 6가지 — 디팀이 미리 답합니다.</p>
        </div>
        <div className="lp-obj-grid">
          {qa.map(([q,a],i)=>(
            <div key={i} className="lp-obj">
              <div className="lp-obj-q">{q}</div>
              <p className="lp-obj-a">{a}</p>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

/* ========== 7. 가치 vs 가격 ========== */
function LpValue(){
  const tiles = [
    { i:'⏱', img:IMG.value[0], h:'시간이 곧 비용입니다',
      b:'매일 1편 = 월 20~30시간. 본업이 있는 운영자에게 가장 비싼 자원은 시간입니다. AFFLIX는 시간을 사는 도구에 가깝습니다.' },
    { i:'📈', img:IMG.value[1], h:'자산은 누적됩니다',
      b:'발행한 글은 본인 블로그에 그대로 쌓이고, 색인된 글은 6개월·12개월 뒤에도 트래픽을 만듭니다. 일회성 비용이 아니라 누적 자산 구조입니다.' },
    { i:'⚖', img:IMG.value[2], h:'회수 시점이 명확합니다',
      b:'셋업 3개월 누적 후 첫 안정 수익 구간 진입을 가정합니다. 운영 예시 기준 — 회수 가능 시점과 누적 구조를 같은 시야에서 판단할 수 있습니다.' },
  ];
  return (
    <div className="lp-section-bgwrap">
      <section className="lp-section">
        <div className="lp-section-head">
          <span className="lp-eyebrow">왜 이 가격인가</span>
          <h2 className="lp-section-h2">가격보다 <em>회수 구조</em>를 봐주세요</h2>
          <p className="lp-section-sub">싸거나 비싼 도구가 아니라, 무엇을 사는지가 더 중요합니다.</p>
        </div>
        <div className="lp-value-row">
          {tiles.map((t,i)=>(
            <div key={i} className="lp-value-tile">
              <div className="lp-value-tile-img" style={{backgroundImage:`url(${t.img})`}}/>
              <div className="lp-value-tile-overlay"/>
              <div className="lp-value-tile-content">
                <div className="lp-value-tile-ico" aria-hidden="true">{t.i}</div>
                <h3 className="lp-value-tile-h">{t.h}</h3>
                <p className="lp-value-tile-body">{t.b}</p>
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
}

/* ========== 8. 가격표 — CMO 확정안 ========== */
function LpPricing(){
  const plans = [
    { name:'Basic', tier:'STARTER', price:'99,000',
      who:'혼자 시작하는 1인 운영자',
      scale:'기준 규모',
      feats:[
        ['전용 서버 ', <b key="b">1대</b>],
        ['동시 운영 블로그 ', <b key="b">~50개</b>],
        ['카테고리 ', <b key="b">1개</b>],
        ['매일 자동 발행 · 검증된 글 형식 10종'],
        ['이메일 알림 · 이메일 문의 지원'],
      ], cta:'Basic으로 시작' },
    { name:'Standard', tier:'GROW', price:'199,000', popular:true,
      who:'카테고리를 늘려 본격적으로 키우는 분',
      scale:'Basic의 약 3배 규모',
      feats:[
        ['전용 서버 ', <b key="b">3대</b>],
        ['동시 운영 블로그 ', <b key="b">~150개</b>],
        ['카테고리 ', <b key="b">2~3개</b>],
        ['매일 자동 발행 · 검증된 글 형식 10종'],
        ['이메일 + 슬랙 알림 · ', <b key="b">우선 문의 지원</b>],
      ], cta:'Standard로 시작' },
    { name:'Premium', tier:'PRO', price:'399,000',
      who:'전업으로 크게 운영하는 분',
      scale:'Basic의 약 5배 규모',
      feats:[
        ['전용 서버 ', <b key="b">5대</b>],
        ['동시 운영 블로그 ', <b key="b">~250개</b>],
        ['카테고리 ', <b key="b">제한 없음</b>],
        ['매일 자동 발행 · 검증된 글 형식 10종 + 신규 베타'],
        ['이메일 + 슬랙 + 카카오톡 알림'],
        [<b key="b">우선 문의 지원 (영업일 24시간 내 답변)</b>],
      ], cta:'Premium으로 시작' },
  ];
  return (
    <div className="lp-section-bgwrap lp-section-bgwrap--bg">
      <section className="lp-section" id="pricing">
        <div className="lp-section-head">
          <span className="lp-eyebrow">요금제</span>
          <h2 className="lp-section-h2"><em>운영 규모</em>를 선택하세요</h2>
          <p className="lp-section-sub">카드 등록 없이 1개월 무료. 셋업 3개월 30%↓ · 약정 1년 25%↓ · <b>같은 항목이 한눈에 커지는 구조</b>로 비교하세요.</p>
        </div>
        <div className="lp-pricing-grid">
          {plans.map(p=>(
            <div key={p.name} className={'lp-plan'+(p.popular?' is-popular':'')}>
              <div className="lp-plan-tier">{p.tier}</div>
              <div className="lp-plan-name">{p.name}</div>
              <p className="lp-plan-who">{p.who}</p>
              <div className="lp-plan-price">
                <span className="lp-plan-price-num">₩{p.price}</span>
                <span className="lp-plan-price-cycle">/ 월</span>
              </div>
              <span className="lp-plan-scale">⚡ {p.scale}</span>
              <ul className="lp-plan-feats">
                {p.feats.map((f,i)=> <li key={i}>{Array.isArray(f) ? f : f}</li>)}
              </ul>
              <a href="/pricing" className="lp-plan-cta-btn">{p.cta}</a>
            </div>
          ))}
        </div>
        <p className="lp-pricing-foot">
          세로로 읽으면 <b>한 플랜의 전부</b>가 보이고, 가로로 읽으면 같은 항목이 <b>1→3→5 / 50→150→250 / 1→2~3→무제한</b>으로 한눈에 커집니다.<br/>
          결제 시점은 무료 1개월 종료 직전 카드 등록 후 시작 · 언제든 1클릭 해지 · VAT 별도.
        </p>
      </section>
    </div>
  );
}

/* ========== 9. 마지막 마감 ========== */
function LpClose(){
  return (
    <section className="lp-close" id="signup">
      <div className="lp-close-inner">
        <h2 className="lp-close-h">오늘 카드 없이 시작,<br/><em>내일 첫 자동 발행</em></h2>
        <p className="lp-close-sub">본인 인증 계정 하나만 연결하시면 — 시간은 그대로, 자산은 매일 쌓입니다.</p>
        <a href="/signup" className="lp-btn lp-btn-primary lp-btn-lg">1개월 무료로 시작</a>
        <div className="lp-close-meta">
          <span><span className="lp-close-meta-dot"/>카드 등록 없이 시작</span>
          <span><span className="lp-close-meta-dot"/>1개월 무료</span>
          <span><span className="lp-close-meta-dot"/>언제든 1클릭 해지</span>
        </div>
      </div>
    </section>
  );
}

/* ========== 10. FAQ ========== */
function LpFaq(){
  const faq = [
    ['쿠팡파트너스 전용인가요? 다른 제휴도 되나요?',
     '현재는 쿠팡파트너스 자동화 중심으로 가동 중입니다. 네이버쇼핑·트립닷컴 등 다른 제휴 플랫폼은 정책·API 정합 검증 후 단계별로 확장 예정이며, 기존 구독자는 추가 비용 없이 이용할 수 있습니다.'],
    ['무료체험 기간에 무엇이 제공되나요?',
     '1개월 동안 가입한 플랜의 모든 기능을 동일하게 제공합니다. 카드 등록 없이 시작하시고, 체험 종료 직전 결제 수단 등록을 별도 안내드립니다. 등록 안 하시면 자동 결제는 발생하지 않습니다.'],
    ['쿠팡파트너스 ID는 누구 것인가요?',
     '사용자 본인의 쿠팡파트너스 ID로 연동됩니다. 발행되는 모든 제휴 링크는 사용자 ID로 트래킹되며 수익은 100% 사용자 계정에 적립됩니다.'],
    ['서버는 어디서 운영되나요?',
     '국내 클라우드(IDC)에 배치된 전용 서버에서 24시간 가동됩니다. 안정성은 자체 관제 로그와 발행 silent_gate 시스템으로 점검합니다.'],
    ['수익은 언제부터 발생하나요?',
     '발행 시작 직후부터 누적되기 시작하지만 색인·SEO 누적 3개월 구간을 지나야 안정 수익 구간 진입을 가정할 수 있습니다. 운영 예시 시나리오 섹션을 참고해주세요.'],
    ['해지는 자유롭게 가능한가요?',
     '로그인 후 결제·플랜 화면에서 1클릭으로 해지할 수 있습니다. 별도 전화·메일 절차 없으며 해지 즉시 다음 결제일부터 결제가 중단됩니다.'],
    ['AI가 쓴 글이 문제가 되지 않나요?',
     '검증된 10가지 콘텐츠 형식만 사용하기 때문에 가이드라인 위반·중복 콘텐츠 발생 가능성이 낮습니다. 6항목 자동 품질 검수를 통과한 글만 발행됩니다.'],
    ['정말 모든 것이 자동인가요? 제가 할 일은 없나요?',
     '핵심 작업(상품 선정/글/썸네일/발행)은 AI가 맡지만 카테고리 선택·발행 시간 변경·발행 정지 같은 운영 의사결정은 사용자 화면에서 조정합니다. 본인 명의의 쿠팡파트너스 가입·구글 계정·본인 인증 세 가지만 준비해주세요.'],
    ['블로그와 콘텐츠의 소유권은 누구에게 있나요?',
     '소유권은 사용자에게 있습니다. 발행은 본인 인증 계정으로 직접 일어나며 발행된 글·썸네일·메타 자산은 모두 사용자 블로그에 남습니다.'],
    ['해지하면 이미 발행된 글은 어떻게 되나요?',
     '그대로 사용자 블로그에 남습니다. AFFLIX 측에서 회수하지 않으며 검색엔진 노출도 유지됩니다. 해지 후에도 이미 쌓인 글들은 계속 일하며 수익을 만들어냅니다.'],
    ['시작할 때 카드를 등록해야 하나요?',
     '아니요. 가입 시 카드 등록은 받지 않습니다. 무료 1개월 종료 전 카드를 등록하지 않으면 발행만 일시 정지됩니다.'],
    ['3개월 써봤는데 수익이 없으면 어떻게 되나요?',
     '셋업 3개월은 색인·SEO 누적 구간이라 흐름이 약할 수 있습니다. 조건 충족 시 1개월 무료 연장을 제공합니다. Premium은 우선 문의 지원으로 영업일 24h 내 회신됩니다.'],
    ['무료체험 후 자동 결제되나요?',
     '카드 등록을 받지 않기 때문에 체험 종료 시점에 결제 수단을 등록하지 않으면 자동 결제는 발생하지 않습니다. 체험 종료 5일 전 안내 메시지를 보내드리며 계속 이용을 원하시면 그때 결제 수단을 등록해주시면 됩니다.'],
    ['약정 중간에 해지하면 환불은 어떻게 되나요?',
     '선결제 금액에서 사용 기간만큼 정상가로 차감 후 잔액을 환불해드립니다. 공식: 선결제액 - (정상가 × 사용 개월수) = 환불액. 약정 1년 플랜의 환불 조건은 결제 화면 하단 [환불 규정]에서 확인할 수 있습니다.'],
  ];
  return (
    <div className="lp-section-bgwrap lp-section-bgwrap--faq">
      <div className="lp-section-bg" style={{backgroundImage:`url(${IMG.faq||'https://images.unsplash.com/photo-1521737711867-e3b97375f902?auto=format&fit=crop&w=1920&q=70'})`}}/>
      <section className="lp-section" id="faq">
        <div className="lp-section-head">
          <span className="lp-eyebrow">FAQ</span>
          <h2 className="lp-section-h2">가입 전 <em>이것만 확인</em>하세요</h2>
        </div>
        <div className="lp-faq-list">
          {faq.map(([q,a],i)=>(
            <details key={i} className="lp-faq-item">
              <summary>{q}</summary>
              <div className="lp-faq-a">{a}</div>
            </details>
          ))}
        </div>
      </section>
    </div>
  );
}

/* ========== Footer ========== */
function LpFoot(){
  return (
    <footer className="lp-foot">
      <div className="lp-foot-inner">
        <div className="lp-foot-mark">AFFLIX</div>
        <div className="lp-foot-row">
          <span>주식회사 석세스아카</span>
          <span>대표 정진만</span>
          <span>사업자등록 <b>102-87-02756</b></span>
          <span>통신판매업신고 2025-부천원미-0319</span>
        </div>
        <div className="lp-foot-cs">
          경기도 부천시 중동로 254번길 78, 6층 · 개인정보처리책임자 정진만<br/>
          대표전화 <b>070-7760-1208</b> · woosamjung@gmail.com · 키움페이(다우데이타) 결제
        </div>
        <div className="lp-foot-cs">
          <a href="/terms">이용약관</a> · <a href="/privacy">개인정보처리방침</a> · <a href="/refund">환불 규정</a>
        </div>
        <div className="lp-foot-cs" style={{marginTop:8,opacity:0.5}}>© 2026 Afflix</div>
      </div>
    </footer>
  );
}

/* ========== Root ========== */
function LandingApp(){
  const [theme, setTheme] = useTheme();
  return (
    <React.Fragment>
      <LpNav theme={theme} setTheme={setTheme}/>
      <LpHero/>
      <LpProblem/>
      <LpMechanism/>
      <LpPipeline/>
      <LpTrust/>
      <LpObjection/>
      <LpValue/>
      <LpPricing/>
      <LpClose/>
      <LpFaq/>
      <LpFoot/>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<LandingApp/>);