// Landing page sections
const { useState, useEffect, useRef } = React;

// ─── Shared primitives ──────────────────────────
// Reveal, Nav, Footer 는 chrome.jsx 로 이동

function Section({ children, className='', id, label }) {
  return (
    <section id={id} data-screen-label={label} className={`py-24 md:py-32 px-6 ${className}`}>
      <div className="max-w-6xl mx-auto">{children}</div>
    </section>
  );
}

function Pill({ children, tone='cyan' }) {
  const tones = {
    cyan: 'bg-cyan-500/10 border-cyan-500/30 text-cyan-300',
    purple: 'bg-purple-500/10 border-purple-500/30 text-purple-300',
    orange: 'bg-orange-500/10 border-orange-500/30 text-orange-300',
    neutral: 'bg-white/5 border-white/15 text-neutral-300'
  };
  return <span className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full border text-[11px] font-medium tracking-wide ${tones[tone]}`}>{children}</span>;
}

// ─── Nav ──────────────────────────────────────

// ─── 1. Hero ──────────────────────────────────

const heroCopyVariants = [
  {
    k: 'v1',
    label: '광고 카피형 (3줄)',
    head: <>머릿속 이야기를<br/>진짜 소설로 만드는,<br/><span style={{color: 'var(--accent)'}}>가장 빠른 길.</span></>,
    sub: '웹소설 작가를 위한 AI 창작 워크스페이스.'
  },
  {
    k: 'v2',
    label: 'Linear 스타일 (한 문장)',
    head: <>웹소설 작가를 위한<br/><span style={{color: 'var(--accent)'}}>AI 창작 워크스페이스.</span></>,
    sub: '쓰고, 기억하고, 내보내는 모든 흐름을 한 곳에서.'
  },
  {
    k: 'v3',
    label: '수익 집중형',
    head: <>감이 아니라<br/><span style={{color: 'var(--accent)'}}>데이터로 연재합니다.</span></>,
    sub: '장면·복선·캐릭터를 전부 기억하는 어시스턴트와, 연독률을 읽어주는 분석까지. 완결을 향한 가장 빠른 길.'
  }
];

const trustVariants = [
  { k:'a', node: <><span style={{color:'var(--accent)', fontWeight:600}}>텀블벅 펀딩 860% 달성</span><span className="mx-3 text-neutral-700">·</span>290명의 웹소설 작가와 함께 시작합니다</> },
  { k:'b', node: <><span style={{color:'var(--accent)', fontWeight:600}}>텀블벅 펀딩 성공</span><span className="mx-3 text-neutral-700">·</span>현직 작가들이 매일 쓰는 워크스페이스</> },
  { k:'c', node: <><span style={{color:'var(--accent)', fontWeight:600}}>매일 쓰는 작가</span>를 위해, <span style={{color:'var(--accent)', fontWeight:600}}>매일 쓰는 작가</span>가 만들었습니다</> },
];

function Hero({ accent, heroVariant, density }) {
  const variant = heroCopyVariants.find(v => v.k === heroVariant) || heroCopyVariants[0];
  return (
    <section id="top" data-screen-label="01 Hero" className={`relative px-6 overflow-hidden ${density==='tight'?'pt-10 pb-16 md:pt-20 md:pb-24':'pt-16 md:pt-32 pb-24 md:pb-36'}`}>
      <div className="absolute inset-0 pointer-events-none" style={{background: `radial-gradient(ellipse at top, ${accent}1f, transparent 60%)`}}/>
      <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[min(1200px,100%)] h-px" style={{background:`linear-gradient(to right, transparent, ${accent}55, transparent)`}}/>
      <div className="relative max-w-6xl mx-auto">
        <div className="text-center max-w-4xl mx-auto">
          <Reveal>
            <div className="inline-flex items-center gap-2 mb-10 md:mb-12 px-3 py-1 rounded-full border border-white/10 bg-white/[0.02] text-[11px] text-neutral-300">
              <span className="w-1.5 h-1.5 rounded-full animate-pulse" style={{background: accent}}/>
              정식 출시 · v1.0
            </div>
          </Reveal>
          <Reveal delay={50}>
            <h1 className="text-[44px] sm:text-6xl md:text-[76px] font-bold tracking-[-0.03em] leading-[1.18] md:leading-[1.22]" style={{textWrap:'balance'}}>
              {variant.head}
            </h1>
          </Reveal>
          <Reveal delay={150}>
            <p className="text-lg md:text-xl text-neutral-400 mt-10 md:mt-12 mb-12 leading-[1.7] max-w-2xl mx-auto" style={{textWrap:'pretty'}}>
              {variant.sub}
            </p>
          </Reveal>
          <Reveal delay={250}>
            <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
              <a href="#download" className="inline-flex items-center gap-2 px-6 py-3.5 rounded-lg text-black font-semibold transition hover:brightness-110" style={{background: accent}}>
                <I.Download size={18}/> 무료 다운로드
              </a>
            </div>
            <div className="mt-6 flex items-center justify-center gap-3 text-[11px] text-neutral-500">
              <span className="flex items-center gap-1"><I.Apple size={12}/> macOS</span>
              <span className="text-neutral-700">·</span>
              <span className="flex items-center gap-1"><I.Windows size={12}/> Windows</span>
            </div>
          </Reveal>
        </div>

        <Reveal delay={350}>
          <div className="mt-20 md:mt-24 relative">
            <div className="absolute inset-x-0 -top-10 h-40 blur-3xl pointer-events-none" style={{background: `linear-gradient(to bottom, ${accent}22, transparent)`}}/>
            <div style={{perspective:'2200px'}}>
              <div className="hero-tilt transition-transform duration-700 hover:scale-[1.01]">
                <HeroAppComposite accent={accent}/>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ─── 2. Trust Bar ─────────────────────────────

function TrustBar({ trustVariant, accent }) {
  const v = trustVariants.find(v => v.k === trustVariant) || trustVariants[0];
  // stat strip in lieu of 3rd-party logo marquee
  const stats = [
    { n: '860%',  l: '텀블벅 펀딩 달성률' },
    { n: '290+',  l: '함께 시작하는 작가' },
    { n: '100%',  l: '로컬 저장 · 내 컴퓨터' },
    { n: '1회',   l: '영구 라이선스 · 평생 사용' },
  ];
  return (
    <div className="border-y border-white/5 bg-white/[0.01]">
      <div className="max-w-6xl mx-auto px-6 py-7 text-center">
        <p className="text-sm text-neutral-400">{v.node}</p>
      </div>
      <div className="border-t border-white/5">
        <div className="max-w-6xl mx-auto grid grid-cols-2 md:grid-cols-4 divide-x divide-white/5">
          {stats.map((s,i) => (
            <div key={i} className={`px-6 py-6 text-center ${i>=2?'border-t md:border-t-0 border-white/5':''}`}>
              <div className="text-2xl md:text-3xl font-bold tabular-nums tracking-tight" style={{color: i===0 ? accent : '#fff'}}>{s.n}</div>
              <div className="text-[11px] text-neutral-500 mt-1 tracking-wide">{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── 3. Problem ───────────────────────────────

function Problem({ accent }) {
  const lines = [
    '캐릭터 설정이 어디 있는지 못 찾고,',
    '2화 복선을 20화에서 까먹고,',
    '투고 자료 만드는 데 반나절이 가고,',
    '연재 성적은 그래프 없이 감으로만.',
  ];
  return (
    <Section id="problem" label="03 Problem">
      <div className="max-w-3xl">
        <Reveal>
          <h2 className="text-3xl md:text-5xl font-bold leading-[1.2] md:leading-[1.15] mb-10 tracking-tight">
            <span className="block mb-2 md:mb-3">쓰는 것보다 관리가 더 힘든 적,</span>
            <span>있으셨나요?</span>
          </h2>
        </Reveal>
        <div className="space-y-4 text-lg md:text-xl text-neutral-400 leading-relaxed">
          {lines.map((l,i) => (
            <Reveal key={i} delay={80 + i*80}><p>{l}</p></Reveal>
          ))}
        </div>
        <Reveal delay={400}>
          <p className="text-xl md:text-2xl text-white mt-12 font-semibold leading-snug">
            범용 워드 프로세서는<br/>
            <span className="border-b-2 pb-0.5" style={{borderColor: accent}}>웹소설 작가를 위해 만들어지지 않았습니다.</span>
          </p>
        </Reveal>
      </div>
    </Section>
  );
}

// ─── 4. Solution Framing (3 pillars) ──────────

function Solution({ accent }) {
  const pillars = [
    { icon: I.Pen, title:'쓰는 도구', body:'플로터·팬서 모드, 장면 관리, 설정 자동 연결.', tone:'cyan' },
    { icon: I.Zap, title:'기억하는 어시스턴트', body:'작품 전체를 이해한 채 대화하는 AI.', tone:'purple' },
    { icon: I.Chart, title:'보내는 도구', body:'투고 자료, 연재 스케줄, 성적 분석까지 한 번에.', tone:'neutral' },
  ];
  const toneText = { cyan:'text-cyan-400', purple:'text-purple-300', neutral:'text-neutral-300' };
  const toneStyle = { cyan:{color: accent}, purple:{color:'#c084fc'}, neutral:{color:'#cbd5e1'} };
  return (
    <Section className="bg-white/[0.01] border-y border-white/5" id="solution" label="04 Solution">
      <Reveal>
        <div className="text-center mb-16 max-w-2xl mx-auto">
          <Pill tone="neutral">핵심 철학</Pill>
          <h2 className="text-3xl md:text-5xl font-bold tracking-tight mt-4">
            상태창은 셋을 한 곳에 둡니다.
          </h2>
        </div>
      </Reveal>
      <div className="grid md:grid-cols-3 gap-6">
        {pillars.map(({icon:Icon, title, body, tone}, i) => (
          <Reveal key={title} delay={i*100}>
            <div className="p-8 rounded-2xl border border-white/10 bg-white/[0.02] hover:border-white/20 hover:bg-white/[0.04] transition h-full group">
              <div className="w-10 h-10 rounded-lg flex items-center justify-center mb-5 transition-transform group-hover:-translate-y-0.5"
                style={{background: tone==='cyan'?`${accent}22`: tone==='purple'?'rgba(192,132,252,0.15)':'rgba(255,255,255,0.05)'}}>
                <Icon size={20} style={toneStyle[tone]} stroke={1.8}/>
              </div>
              <h3 className="text-xl font-bold mb-2 tracking-tight">{title}</h3>
              <p className="text-neutral-400 leading-relaxed">{body}</p>
              <div className="mt-5 flex items-center gap-1.5 text-[11px] text-neutral-500">
                <span>{String(i+1).padStart(2,'0')}</span>
                <span className="flex-1 h-px bg-white/10"/>
                <span className={toneText[tone]}>{tone==='cyan'?'Editor': tone==='purple'?'Assistant':'Distribution'}</span>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

// ─── 5. Feature A — 쓰는 도구 ────────────────

function FeatureRow({ badge, badgeTone='cyan', kicker, title, body, bullets=[], slot, reverse=false, accent }) {
  return (
    <div className="grid md:grid-cols-2 gap-12 md:gap-16 items-center">
      <Reveal className={reverse?'md:order-2':''}>
        {badge && <Pill tone={badgeTone}>{badge}</Pill>}
        {kicker && <div className="text-[11px] font-semibold tracking-wider uppercase mt-3" style={{color: badgeTone==='cyan'?accent: badgeTone==='purple'?'#c084fc':'#94a3b8'}}>{kicker}</div>}
        <h3 className="text-3xl md:text-4xl font-bold tracking-tight leading-tight mt-4 mb-5" style={{textWrap:'balance'}}>
          {title}
        </h3>
        <p className="text-lg text-neutral-400 leading-relaxed mb-6" style={{textWrap:'pretty'}}>{body}</p>
        {bullets.length > 0 && (
          <ul className="space-y-2.5">
            {bullets.map((b,i) => (
              <li key={i} className="flex gap-3 text-neutral-300">
                <I.Check size={18} className="shrink-0 mt-0.5" style={{color: accent}} stroke={2.5}/>
                <span>{b}</span>
              </li>
            ))}
          </ul>
        )}
      </Reveal>
      <Reveal delay={150} className={reverse?'md:order-1':''}>{slot}</Reveal>
    </div>
  );
}

function FeatureA({ accent }) {
  return (
    <Section id="feature-a" label="05 Feature Writing">
      <div className="space-y-28 md:space-y-36">
        <FeatureRow
          accent={accent}
          badge={<><I.Pen size={12}/> 에디터</>}
          kicker="Plotter · Pantser"
          title={<>당신의 방식대로<br/>쓰세요.</>}
          body="플로터든 팬서든, 상태창이 맞춰갑니다. 구조부터 잡는 사람도, 손끝에서 먼저 이야기가 흘러나오는 사람도."
          bullets={[
            '구조부터 잡는 플로터 모드',
            '자유롭게 쓰면서 정리하는 팬서 모드',
            '두 모드 간 자유로운 전환',
          ]}
          slot={<ModeToggleMockup/>}
        />
        <FeatureRow
          reverse
          accent={accent}
          badge={<><I.Pen size={12}/> 에디터</>}
          kicker="Settings"
          title={<>설정이 흩어지면<br/>이야기가 흔들립니다.</>}
          body="캐릭터, 배경, 자료 — 전부 한 곳에서 관리. 각 장면과 직접 연결해 설정의 일관성을 확보합니다."
          bullets={[
            '캐릭터 카드 · 태그 · 등장 장면 역추적',
            '자료와 장면의 양방향 연결',
            '설정 변경 시 관련 장면 자동 알림',
          ]}
          slot={<CharacterDashMockup/>}
        />
        <FeatureRow
          accent={accent}
          badge={<><I.Pen size={12}/> 에디터</>}
          kicker="Focus"
          title={<>쓰는 데만<br/>집중하세요.</>}
          body="나머지는 에디터가. 색 띠 하나로 장면 경계를 한눈에, 캐릭터·배경은 자동으로 연결, 스프린트 타이머로 집중 시간을 측정합니다."
          bullets={[
            '인덱스 테이프로 한눈에 장면 구분',
            '캐릭터·배경 자동 연결',
            '스프린트 타이머로 집중 시간 측정',
          ]}
          slot={<ManuscriptEditor accent={accent}/>}
        />
      </div>
    </Section>
  );
}

// ─── 6. Feature B — 작품을 입체적으로 ────────

function FeatureB({ accent }) {
  return (
    <Section className="bg-white/[0.01] border-y border-white/5" id="feature-b" label="06 Feature Visualize">
      <Reveal>
        <div className="max-w-3xl mb-16">
          <Pill tone="cyan"><I.Pen size={12}/> 에디터</Pill>
          <h2 className="text-4xl md:text-5xl font-bold tracking-tight leading-[1.2] md:leading-[1.15] mt-4" style={{textWrap:'balance'}}>
            <span className="block mb-2 md:mb-3">이야기가 커질수록,</span>
            <span>머릿속만으론 감당이 안 됩니다.</span>
          </h2>
        </div>
      </Reveal>

      {/* 인물관계도 */}
      <Reveal>
        <div className="mb-24">
          <CharacterMap accent={accent}/>
          <div className="mt-8 max-w-2xl">
            <div className="flex items-center gap-2 mb-3" style={{color: accent}}>
              <I.Network size={18}/>
              <span className="text-xs font-semibold tracking-wider uppercase">인물관계도</span>
            </div>
            <h3 className="text-2xl md:text-3xl font-bold leading-tight mb-3" style={{textWrap:'balance'}}>
              누가 누구와 어떻게 얽혀 있는지, 한눈에.
            </h3>
            <p className="text-neutral-400 leading-relaxed" style={{textWrap:'pretty'}}>
              줄거리를 쓴 다음 <strong className="text-white">버튼 하나로</strong> 관계도가 그려집니다.
              어시스턴트가 주연·조연을 파악하고, 그룹으로 묶어 배치합니다.
              드래그로 다듬고, 얼굴 사진을 입히고, PNG로 내보내 투고 자료에 그대로 넣으세요.
            </p>
          </div>
        </div>
      </Reveal>

      {/* 지도 + 타임라인 — 높이 정렬 */}
      <div className="grid md:grid-cols-2 gap-8 items-stretch">
        <Reveal className="flex flex-col">
          <div className="h-[420px] flex">
            <MapGenerator accent={accent}/>
          </div>
          <div className="mt-6">
            <div className="flex items-center gap-2 mb-2" style={{color: accent}}>
              <I.Map size={15}/>
              <span className="text-xs font-semibold tracking-wider uppercase">자동 지도 생성</span>
            </div>
            <h4 className="text-xl font-bold mb-2">작품 속 장소, 한 장으로</h4>
            <p className="text-neutral-400 text-sm leading-relaxed">
              등록된 배경 정보를 기반으로 작품의 지리를 자동 생성. 지역 간 이동, 주요 장소의 위상이 한눈에.
            </p>
          </div>
        </Reveal>
        <Reveal delay={100} className="flex flex-col">
          <div className="h-[420px] flex">
            <TimelineMockup accent={accent}/>
          </div>
          <div className="mt-6">
            <div className="flex items-center gap-2 mb-2" style={{color: accent}}>
              <I.Clock size={15}/>
              <span className="text-xs font-semibold tracking-wider uppercase">타임라인 · 설정 충돌 자동 감지</span>
            </div>
            <h4 className="text-xl font-bold mb-2">사건과 복선, 시간 흐름 한눈에.</h4>
            <p className="text-neutral-400 text-sm leading-relaxed">
              일반 연표처럼 읽히지만, 설정과 어긋나는 서술이 나오면 <strong className="text-rose-300">빨간 플래그</strong>로 알려줍니다. 나이·배경·관계의 불일치를 놓치지 않도록.
            </p>
          </div>
        </Reveal>
      </div>
    </Section>
  );
}

// ─── 7. Feature C — 어시스턴트 ───────────────

function FeatureC({ accent }) {
  const caps = [
    { icon: I.Book,     title:'노트 정리', body:'카톡하듯 얘기하면 어시스턴트가 정리해 자료로 만듭니다.' },
    { icon: I.Sparkles, title:'자동 추출', body:'장면에서 캐릭터·배경을 자동으로 뽑아 설정에 연결합니다.' },
    { icon: I.Image,    title:'이미지 생성', body:'캐릭터 외형, 배경 분위기, 공간 구조까지 그림으로.' },
    { icon: I.Check,    title:'검토',       body:'개연성·장면·맞춤법·연재 조언을 한 번에.' },
  ];
  return (
    <Section id="feature-c" label="07 Feature Assistant">
      <Reveal>
        <div className="max-w-3xl mb-12">
          <Pill tone="purple"><I.Zap size={12}/> 어시스턴트</Pill>
          <h2 className="text-4xl md:text-5xl font-bold tracking-tight leading-tight mt-4 mb-6" style={{textWrap:'balance'}}>
            매번 설명하지 마세요.<br/>
            <span className="text-purple-300">어시스턴트는 이미 알고 있습니다.</span>
          </h2>
          <p className="text-lg text-neutral-400 leading-relaxed" style={{textWrap:'pretty'}}>
            캐릭터 이름, 3화의 복선, 등록한 자료까지 — 당신의 작품 전체를 이해한 상태에서 대화합니다.
            범용 AI 챗봇과는 차원이 다릅니다.
          </p>
        </div>
      </Reveal>

      <Reveal>
        <div className="mb-20">
          <AssistantChat/>
        </div>
      </Reveal>

      <div>
        <Reveal>
          <h3 className="text-2xl font-bold mb-10 text-center text-purple-300 tracking-tight">
            어시스턴트가 대신합니다
          </h3>
        </Reveal>
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
          {caps.map(({icon:Icon, title, body}, i) => (
            <Reveal key={title} delay={i*80}>
              <div className="p-6 rounded-xl border border-purple-500/20 bg-purple-500/[0.03] hover:border-purple-500/40 hover:bg-purple-500/[0.05] transition h-full">
                <Icon size={22} className="text-purple-300 mb-3" stroke={1.8}/>
                <h4 className="text-base font-bold mb-1.5">{title}</h4>
                <p className="text-sm text-neutral-400 leading-relaxed">{body}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </Section>
  );
}

// ─── 8. Feature D — 쓴 다음 ──────────────────

function FeatureD({ accent }) {
  return (
    <Section className="bg-white/[0.01] border-y border-white/5" id="feature-d" label="08 Feature Distribution">
      <Reveal>
        <div className="max-w-3xl mb-16">
          <h2 className="text-4xl md:text-5xl font-bold tracking-tight leading-tight mb-6" style={{textWrap:'balance'}}>
            쓴 다음이 더 막막하죠.
          </h2>
          <p className="text-lg text-neutral-400 leading-relaxed">
            투고 자료부터 연재 성적 분석까지,
            상태창은 소설이 세상에 나가는 길까지 함께합니다.
          </p>
        </div>
      </Reveal>
      <div className="grid md:grid-cols-2 gap-8">
        <Reveal>
          <div className="p-8 rounded-2xl border border-white/10 bg-white/[0.02] h-full">
            <SubmissionMockup/>
            <h3 className="text-xl font-bold mb-2 mt-6">투고 자료 자동 생성</h3>
            <p className="text-neutral-400 text-sm leading-relaxed">
              시놉시스·등장인물·샘플 원고를 DOCX·HWPX로 한 번에. 출판사별 투고 요건까지 내장된 쿼리 트래커로, 반응 좋은 곳·평판 좋은 곳을 고르고 지원 현황을 관리하세요.
            </p>
          </div>
        </Reveal>
        <Reveal delay={100}>
          <div className="p-8 rounded-2xl border border-white/10 bg-white/[0.02] h-full">
            <AnalyticsMockup/>
            <h3 className="text-xl font-bold mb-2 mt-6">연재 성적 분석</h3>
            <p className="text-neutral-400 text-sm leading-relaxed">
              회차별 연독률, 유료화 시점, 데이터 기반 연재 조언까지. 감 대신 숫자로.
            </p>
          </div>
        </Reveal>
      </div>
    </Section>
  );
}

// ─── 9. Habit ───────────────────────────────

function Habit({ accent }) {
  return (
    <Section id="habit" label="09 Habit">
      <Reveal>
        <div className="max-w-3xl mb-12">
          <h2 className="text-4xl md:text-5xl font-bold tracking-tight leading-tight" style={{textWrap:'balance'}}>
            매일 쓰게 만드는 것도,<br/>
            <span style={{color: accent}}>상태창</span>의 일입니다.
          </h2>
        </div>
      </Reveal>
      <div className="grid md:grid-cols-2 gap-6">
        <Reveal>
          <div className="p-8 rounded-2xl border border-orange-500/20 bg-orange-500/[0.03] h-full">
            <div className="flex items-center gap-2 mb-4">
              <I.Flame size={18} className="text-orange-400"/>
              <span className="text-sm font-semibold text-orange-300 tracking-wider uppercase">15분, 매일</span>
            </div>
            <StreakCalendar/>
            <h3 className="text-xl font-bold mb-3 mt-6">집필을 습관으로.</h3>
            <p className="text-neutral-400 text-sm leading-relaxed mb-4">
              듀오링고가 언어를 습관으로 만든 것처럼, 상태창은 집필을 습관으로 만듭니다.
            </p>
            <ul className="space-y-1.5 text-sm text-neutral-400">
              <li>· 매일 출석 시 SP 보상</li>
              <li>· 7일·30일 연속 달성 보너스</li>
              <li>· 60분 이상 집필 시 추가 보너스</li>
            </ul>
          </div>
        </Reveal>
        <Reveal delay={100}>
          <div className="p-8 rounded-2xl border border-cyan-500/20 bg-cyan-500/[0.03] h-full">
            <div className="flex items-center gap-2 mb-4">
              <I.Users size={18} style={{color: accent}}/>
              <span className="text-sm font-semibold tracking-wider uppercase" style={{color: accent}}>함께쓰기</span>
            </div>
            <TogetherMockup accent={accent}/>
            <h3 className="text-xl font-bold mb-3 mt-6">혼자 쓰기 힘든 날을 위해.</h3>
            <p className="text-neutral-400 text-sm leading-relaxed">
              정해진 시간, 정해진 방에서 다른 작가들과 말 없이 글만 씁니다.
              도서관에서 공부가 잘 되는 그 감각 그대로.
            </p>
          </div>
        </Reveal>
      </div>
    </Section>
  );
}

// ─── 10. Built by publisher ─────────────────

// ─── 11. Pricing ────────────────────────────

function Pricing({ accent }) {
  return (
    <Section className="bg-white/[0.01] border-y border-white/5" id="pricing" label="11 Pricing">
      <Reveal>
        <div className="text-center mb-14">
          <h2 className="text-4xl md:text-5xl font-bold tracking-tight">가격은 단순합니다.</h2>
        </div>
      </Reveal>
      <div className="grid md:grid-cols-2 gap-6 max-w-3xl mx-auto">
        <Reveal>
          <div className="p-8 rounded-2xl border border-white/10 bg-white/[0.02] text-center h-full">
            <div className="text-xs text-neutral-500 uppercase tracking-wider mb-3">에디터</div>
            <div className="text-3xl font-bold mb-2">평생 라이선스</div>
            <p className="text-sm text-neutral-400 mb-6">1회 구매 · 평생 업데이트</p>
            <ul className="text-left space-y-2 text-sm text-neutral-300">
              <li className="flex gap-2"><I.Check size={16} style={{color: accent}}/>플로터·팬서 에디터</li>
              <li className="flex gap-2"><I.Check size={16} style={{color: accent}}/>인물관계도·지도·타임라인</li>
              <li className="flex gap-2"><I.Check size={16} style={{color: accent}}/>투고 자료 생성</li>
              <li className="flex gap-2"><I.Check size={16} style={{color: accent}}/>연재 실적 분석</li>
            </ul>
          </div>
        </Reveal>
        <Reveal delay={100}>
          <div className="p-8 rounded-2xl border border-purple-500/30 bg-purple-500/[0.03] text-center h-full relative overflow-hidden">
            <div className="absolute top-4 right-4 text-[10px] px-2 py-0.5 rounded-full bg-purple-500/20 text-purple-200 border border-purple-500/40">쓴 만큼만</div>
            <div className="text-xs text-purple-300 uppercase tracking-wider mb-3">어시스턴트</div>
            <div className="text-3xl font-bold mb-2">SP 충전</div>
            <p className="text-sm text-neutral-400 mb-6">구독 없음. 필요한 만큼만 충전.</p>
            <ul className="text-left space-y-2 text-sm text-neutral-300">
              <li className="flex gap-2"><I.Check size={16} className="text-purple-300"/>작품 전체 컨텍스트 AI 대화</li>
              <li className="flex gap-2"><I.Check size={16} className="text-purple-300"/>자동 캐릭터·배경 추출</li>
              <li className="flex gap-2"><I.Check size={16} className="text-purple-300"/>이미지 생성</li>
              <li className="flex gap-2"><I.Check size={16} className="text-purple-300"/>개연성·맞춤법 검토</li>
            </ul>
          </div>
        </Reveal>
      </div>
      <div className="text-center mt-10">
        <a href="pricing.html" className="inline-flex items-center gap-1.5 text-neutral-300 hover:text-white transition text-sm">
          가격 자세히 보기 <I.ArrowRight size={14}/>
        </a>
      </div>
    </Section>
  );
}

// ─── 12. Final CTA ──────────────────────────

function FinalCTA({ accent }) {
  return (
    <section className="relative px-6 py-32 md:py-40 overflow-hidden" id="download" data-screen-label="12 CTA">
      <div className="absolute inset-0 pointer-events-none" style={{background: `radial-gradient(ellipse at center, ${accent}26, transparent 60%)`}}/>
      <div className="relative max-w-3xl mx-auto text-center">
        <Reveal>
          <h2 className="text-4xl md:text-6xl font-bold tracking-tight leading-[1.15] md:leading-[1.1] mb-14 md:mb-16" style={{textWrap:'balance'}}>
            <span className="block mb-2 md:mb-3">오늘 쓰기 시작하면,</span>
            <span style={{color: accent}}>내일 완결이 가까워집니다.</span>
          </h2>
        </Reveal>
        <Reveal delay={150}>
          <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
            <a href="#download" className="inline-flex items-center gap-2 px-8 py-4 rounded-lg text-black font-bold text-lg transition hover:brightness-110" style={{background: accent}}>
              <I.Download size={18}/> 무료 다운로드
            </a>
          </div>
          <div className="flex items-center justify-center gap-6 mt-8 text-sm text-neutral-500">
            <a href="#pricing" className="hover:text-white transition">가격 보기</a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ─── Footer: chrome.jsx 로 이동 ─────────────

Object.assign(window, { Hero, TrustBar, Problem, Solution, FeatureA, FeatureB, FeatureC, FeatureD, Habit, Pricing, FinalCTA });