// 랜딩 2.0 메인 — 중심 = ①폰 앱+음성 통화 ②해외 연재 (작가님 결재 2026-11-03 · 메인 레포 docs/plan-랜딩-2.0.md §B)
// Section · Pill · TrustBar · Habit · Pricing 은 sections.jsx, AssistantChat · CharacterMap 은 mockups.jsx,
// TestimonialSpotlight 는 testimonials.jsx, Nav · Footer · Reveal 은 chrome.jsx 전역을 쓴다.
// 문구 규칙: 「AI」 대신 「어시스턴트」 · 「무제한」·「공동집필」 금지 · 2.0 기능 문장은 plan §B-3 근거 표에 있는 것만.

// 🔴 공개 전(11/16~12/23) = true. 12/24 11:00 KST 2.0 공개 판 커밋에서 false 로 바꾼다(자동 전환 안 함 — plan §B-1).
const SOON = true;

const TUMBLBUG_URL = 'https://tumblbug.com/stats_mobile';
// 광고로 온 방문(주소의 utm_source)은 텀블벅 단추·띠를 그 광고 전용 추적 링크(tum.bg)로 바꿔 끼운다(funding-ops 11/3 ·
// 텀블벅 대시보드가 utm 이 아니라 자기 추적 링크로 유입을 셈). 표에 없는 출처는 바꾸지 않는다 — 주소는 작가님 OK 뒤 funding-ops 가 준다.
const AD_TUMBLBUG_URL = {
  meta: 'https://tum.bg/DwaZjt',    // 텀블벅 캠페인 「메타 홈페이지」 · 소스 페이스북 · 11/3 작가님 OK(funding-ops)
  chatgpt: 'https://tum.bg/TszzJi', // ChatGPT 광고 전용 · 11/4 작가님 OK(funding-ops)
  naver: 'https://tum.bg/iivAdO',   // 네이버 검색광고 전용(캠페인 「네이버 검색광고」 · 소스 기타 naver) · 11/4 작가님 OK(funding-ops)
};
// 펀딩 끝(2026-12-16 23:59:59 KST) 뒤에는 띠의 펀딩 링크만 숨긴다(plan §8 ② — 안전한 쪽으로만 자동).
const FUNDING_END = Date.parse('2026-12-16T23:59:59+09:00');
// 펀딩이 열려 있을 때만 텀블벅 단추를 보인다(띠 · 히어로 · 마지막 단추). 끝나면 14일 체험이 주 단추(plan §4 표 12/17~12/23).
const FUNDING_OPEN = Date.now() < FUNDING_END;

const TRIAL_NOTE = '지금 받는 체험판은 1.9 판입니다. 폰 앱 · 폰 통화 · 해외 출간 · 3D · 웹툰은 2.0에서 열립니다.';

function measure(name) {
  try { if (typeof window.wsMeasure === 'function') window.wsMeasure(name); } catch (e) {}
}

// 한 번 광고로 들어오면 그 탭(세션) 동안 유지(마지막으로 들어온 광고 기준). 저장소가 막혀 있어도 기본 주소로 동작한다.
// ws_from_meta = 11/3 판이 남긴 표시 — 그 판으로 열어 둔 탭도 메타 링크 그대로.
function adTumblbugUrl(src) {
  return src && Object.prototype.hasOwnProperty.call(AD_TUMBLBUG_URL, src) ? AD_TUMBLBUG_URL[src] : '';
}
function tumblbugHref() {
  try {
    const src = new URLSearchParams(location.search).get('utm_source');
    if (adTumblbugUrl(src)) sessionStorage.setItem('ws_ad_source', src);
    const saved = sessionStorage.getItem('ws_ad_source') || (sessionStorage.getItem('ws_from_meta') === '1' ? 'meta' : '');
    if (adTumblbugUrl(saved)) return adTumblbugUrl(saved);
  } catch (e) {}
  return TUMBLBUG_URL;
}

function TumblbugLink({ className, style, children }) {
  return (
    <a href={tumblbugHref()} target="_blank" rel="noopener noreferrer" className={className} style={style}
       onClick={() => measure('tumblbug_clicked')}>
      {children}
    </a>
  );
}

// 「12/24 · 2.0」 표식 = 1.9.9 에 없는 기능에만(1.9.9 설명서와 대조 · plan §B-3). 1.9 에서 되는 기능에는 달지 않는다(작가님 11/3).
const SoonTag = () => SOON
  ? <span className="inline-flex items-center px-2 py-0.5 rounded-full border border-amber-400/50 bg-amber-400/15 text-amber-200 text-[10px] font-semibold tracking-wide whitespace-nowrap">12/24 · 2.0</span>
  : null;

// 반복 영상(세 편 합계 약 2.3MB) · 자동 재생은 소리 없이 · 「움직임 줄이기」면 정지 그림만 · 화면 밖에서는 멈춤
// sound = 원본에 소리가 있는 영상만(모바일·해외 출간) — 「소리 켜기」를 누르면 소리를 켜고 처음부터 재생(작가님 11/3)
function LoopVideo({ name, ratio = '1/1', caption = '연출된 장면입니다', sound = false }) {
  const ref = React.useRef(null);
  const [unmuted, setUnmuted] = React.useState(false);
  const toggleSound = () => {
    const el = ref.current;
    if (!el) return;
    if (unmuted) { el.muted = true; setUnmuted(false); return; }
    el.muted = false;
    el.currentTime = 0;
    el.play().catch(() => {});
    setUnmuted(true);
  };
  const [reduce] = React.useState(() => typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches);
  React.useEffect(() => {
    const el = ref.current;
    if (!el || reduce || typeof IntersectionObserver !== 'function') return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { el.play().catch(() => {}); } else { el.pause(); }
    }, { threshold: 0.25 });
    io.observe(el);
    return () => io.disconnect();
  }, [reduce]);
  const base = `uploads/2.0/${name}`;
  return (
    <figure className="relative w-full rounded-2xl overflow-hidden border border-white/10 bg-black" style={{aspectRatio: ratio, maxWidth: '100%'}}>
      {reduce
        ? <img className="w-full h-full object-cover" src={`${base}-poster.jpg`} alt=""/>
        : (
          // MP4(H.264 + 소리 AAC) 하나만 — WebM 은 소리 트랙이 없고, 먼저 두면 해독에 실패한 브라우저가 MP4 로 넘어가지 않았다(11/3 로컬 실측 · 해독 오류 3)
          <video ref={ref} className="w-full h-full object-cover" autoPlay muted loop playsInline preload="metadata" poster={`${base}-poster.jpg`} src={`${base}.mp4`}/>
        )}
      {sound && !reduce && (
        <button type="button" onClick={toggleSound}
          className="absolute bottom-2 left-2 px-3 py-1.5 rounded-full bg-black/70 border border-white/20 text-[12px] text-white hover:bg-black/85 focus:outline-none focus-visible:ring-2 focus-visible:ring-cyan-300">
          {unmuted ? '🔇 소리 끄기' : '🔊 소리 켜기'}
        </button>
      )}
      {caption && <figcaption className="absolute bottom-2 right-3 text-[10px] text-white/60">{caption}</figcaption>}
    </figure>
  );
}

function FundingBand({ accent }) {
  if (!SOON) return null;
  const open = FUNDING_OPEN;
  return (
    <div className="relative z-40 border-b border-white/10" style={{background:`linear-gradient(90deg, ${accent}26, rgba(192,132,252,0.18))`}}>
      <div className="max-w-6xl mx-auto px-6 py-3 flex flex-col sm:flex-row items-center justify-center gap-x-4 gap-y-1.5 text-[14px] text-center">
        <span className="text-white"><strong>상태창 2.0 — 12월 24일 공개</strong></span>
        {open && (
          <TumblbugLink className="inline-flex items-center gap-1 px-3 py-1 rounded-full font-semibold text-black transition hover:brightness-110" style={{background: accent}}>
            지금 텀블벅에서 먼저 만나기 <I.ArrowRight size={13}/>
          </TumblbugLink>
        )}
      </div>
    </div>
  );
}

// ── 히어로 (광고 문구 「내 인물·설정·지난 화를 기억하는 소설 전용 어시스턴트」와 같은 뜻) ──
function HeroV2({ accent }) {
  return (
    <section id="top" data-screen-label="01 Hero" className="relative px-6 pt-14 md:pt-24 pb-16 md:pb-24 overflow-hidden">
      <div className="absolute inset-0 pointer-events-none" style={{background: `radial-gradient(ellipse at top, ${accent}1f, transparent 60%)`}}/>
      <div className="relative max-w-6xl mx-auto grid lg:grid-cols-[1.1fr_1fr] gap-12 items-center">
        <div className="text-center lg:text-left min-w-0">
          <Reveal>
            <div className="inline-flex items-center gap-2 mb-8 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 motion-safe:animate-pulse" style={{background: accent}}/>
              {SOON ? '상태창 2.0 · 12월 24일 공개' : '상태창 2.0'}
            </div>
          </Reveal>
          <Reveal delay={50}>
            <h1 className="text-[34px] sm:text-[44px] xl:text-[56px] font-bold tracking-[-0.03em] leading-[1.18]" style={{textWrap:'balance'}}>
              내 인물·설정·지난 화를<br/>
              <span style={{color: accent}}>기억하는 어시스턴트.</span>
            </h1>
          </Reveal>
          <Reveal delay={150}>
            <p className="text-lg text-neutral-400 mt-8 mb-10 leading-[1.75] max-w-xl mx-auto lg:mx-0" style={{textWrap:'pretty'}}>
              {SOON
                ? '책상에서는 같이 쓰고, 12월 24일 2.0부터는 산책길에서 전화로 설정 회의를 하고 한국어로 쓴 작품을 영어로 옮겨 해외에 연재합니다. 웹소설 작가를 위한 창작 워크스페이스, 상태창.'
                : '책상에서는 같이 쓰고, 산책길에서는 전화로 설정 회의를 합니다. 한국어로 쓴 작품은 영어로 옮겨 해외에 연재합니다. 웹소설 작가를 위한 창작 워크스페이스, 상태창.'}
            </p>
          </Reveal>
          <Reveal delay={250}>
            <div className="flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-3">
              {SOON && FUNDING_OPEN ? (
                <>
                  <TumblbugLink 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}}>
                    텀블벅에서 2.0 후원하기 <I.ArrowRight size={18}/>
                  </TumblbugLink>
                  <a href="download.html" className="inline-flex items-center gap-2 px-6 py-3.5 rounded-lg border border-white/15 bg-white/[0.03] text-white font-semibold transition hover:bg-white/[0.07]">
                    <I.Download size={18}/> 14일 무료로 써 보기
                  </a>
                </>
              ) : (
                <a href="download.html" 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}/> {SOON ? '14일 무료로 써 보기' : '무료 다운로드'}
                </a>
              )}
            </div>
            <div className="mt-5 text-[11px] text-neutral-500 leading-relaxed">
              macOS · Windows{SOON ? '' : ' · iPhone · Android (스토어 공개 예정)'}
              {SOON && <div className="mt-1">{TRIAL_NOTE}</div>}
            </div>
          </Reveal>
        </div>
        <Reveal delay={300}>
          <LoopVideo name="mobile-15s-720" sound/>
        </Reveal>
      </div>
    </section>
  );
}

// 폰 통화 화면 — 단추 이름은 2.0 설명서(모바일 통화 화면 절)의 실제 이름만 쓴다
function PhoneCallMock({ accent }) {
  return (
    <div className="w-[190px] h-[360px] sm:w-[230px] sm:h-[440px] rounded-[36px] border-4 border-neutral-700 bg-[#0d1117] flex flex-col items-center justify-between py-10 shadow-2xl">
      <div className="text-center">
        <div className="text-[11px] text-neutral-500">통화 중 · 12:08</div>
        <div className="text-lg font-bold mt-1">어시스턴트</div>
      </div>
      <div className="relative w-24 h-24 sm:w-32 sm:h-32">
        <span className="absolute inset-0 rounded-full motion-safe:animate-ping opacity-20" style={{background: accent}}/>
        <span className="absolute inset-3 rounded-full opacity-40" style={{background: accent}}/>
        <span className="absolute inset-7 rounded-full" style={{background: accent}}/>
      </div>
      <div className="text-[11px] text-neutral-400">원을 누르면 멈춥니다</div>
      <div className="flex gap-2 sm:gap-3 text-[10px] text-neutral-300">
        <span className="px-2.5 py-1.5 rounded-full bg-white/10">마이크 끄기</span>
        <span className="px-2.5 py-1.5 rounded-full bg-rose-500/80 text-white">통화 종료</span>
        <span className="px-2.5 py-1.5 rounded-full bg-white/10">말 멈추기</span>
      </div>
    </div>
  );
}

// ── 대표 기능 ① 폰 앱 + 음성 통화 ──
function PillarPhone({ accent }) {
  const steps = [
    { k:'걸으면서 · 누워서', t:'어시스턴트에게 전화합니다', d:'이어폰을 끼고 산책하면서, 침대에 누워서 설정 회의를 합니다. 통화는 화면이 켜져 있는 동안 이어집니다.' },
    // 작가님 정정(관제A 11/3): 작품에서 나눈 통화 기록은 작품 폴더에 PC 와 같은 형식으로 저장돼 Drive 로 PC 에 이어지고,
    //   PC 어시스턴트는 「지난 대화 찾기」로 물으면 찾아 쓴다 — 자동으로 기억하지는 않는다(「자동으로 기억」 금지).
    //   근거 = docs/reference-이미확인된것.md 「폰으로 작품 이야기를 통화하면 다음 날 PC 어시스턴트가 그 내용을 기억한다」 항목 · conversationLogSave.ts:334·339·365
    { k:'다음 날 아침', t:'PC에서 이어집니다', d:'작품에서 나눈 폰 통화도 기록으로 남아, 구글 드라이브로 PC에서 이어집니다. PC 어시스턴트에게 물으면 그 통화 내용을 찾아 이어서 이야기합니다.' },
    { k:'자기 전에 한 줄', t:'내일의 첫 문장', d:'폰에 한 줄을 남겨 두면, 다음에 PC를 켰을 때 홈에서 그 문장이 기다립니다.' },
  ];
  return (
    <Section id="phone" label="03 Phone" className="border-y border-white/5 bg-white/[0.01]">
      <Reveal>
        <div className="max-w-3xl mb-14">
          <div className="flex flex-wrap items-center gap-2"><Pill tone="cyan">2.0 대표 기능 ①</Pill><SoonTag/></div>
          <h2 className="text-4xl md:text-5xl font-bold tracking-tight leading-[1.2] mt-4" style={{textWrap:'balance'}}>
            책상을 떠나도<br/><span style={{color: accent}}>설정 회의는 계속됩니다.</span>
          </h2>
          <p className="text-lg text-neutral-400 mt-6 leading-relaxed" style={{textWrap:'pretty'}}>
            {SOON ? '12월 24일 2.0부터 ' : ''}상태창 폰 앱(iPhone · Android)으로 원고를 읽고 이어 쓰고, 어시스턴트와 목소리로 이야기합니다.
            같은 원고, 같은 설정, 같은 어시스턴트입니다.
          </p>
        </div>
      </Reveal>
      <div className="grid lg:grid-cols-[1fr_1.1fr] gap-10 items-start">
        <div className="space-y-4 min-w-0">
          {steps.map((s,i) => (
            <Reveal key={s.t} delay={i*80}>
              <div className="p-6 rounded-xl border border-white/10 bg-white/[0.02]">
                <div className="flex flex-wrap items-center gap-2"><span className="text-[11px] font-semibold tracking-wider" style={{color: accent}}>{String(i+1).padStart(2,'0')} · {s.k}</span><SoonTag/></div>
                <h3 className="text-xl font-bold mt-2 mb-2">{s.t}</h3>
                <p className="text-sm text-neutral-400 leading-relaxed">{s.d}</p>
              </div>
            </Reveal>
          ))}
          <Reveal delay={260}>
            <p className="text-xs text-neutral-500 leading-relaxed">
              구독에 음성 통화 시간이 매달 포함됩니다(Standard 60분 · Pro 150분 · Premium 200분).
              {SOON && ' 폰 앱은 12월 24일 2.0 공개와 함께 스토어에 나올 예정입니다.'}
            </p>
          </Reveal>
        </div>
        <Reveal delay={120}>
          <div className="flex justify-center py-6 rounded-2xl border border-white/10 bg-white/[0.02]">
            <PhoneCallMock accent={accent}/>
          </div>
        </Reveal>
      </div>
    </Section>
  );
}

// ── 대표 기능 ② 해외 연재 ──
function PillarOverseas({ accent }) {
  const flow = [
    { t:'번역', d:'회차마다 「번역하기」. 용어와 말투는 자동으로 관리됩니다.' },
    { t:'용어집', d:'인물·장소 이름을 영어로 무엇이라 쓸지 「번역어 설정」에서 정합니다. 한 번 정하면 다음 회차에도 같습니다.' },
    { t:'역번역 확인', d:'「무슨 내용인지 확인하기」로 영어 번역본을 다시 한국어로 옮겨, 뜻이 달라진 곳이 없는지 봅니다.' },
    { t:'작품 페이지', d:'한국어 소개글로 영어 제목과 작품 소개글을 만들고, 장르·태그 조합과 런칭 전략을 컨설팅 받습니다.' },
    { t:'연재 · 실적', d:'Royal Road 연재 일정표로 올릴 회차를 챙기고, 조회수 화면으로 독자 잔존율을 봅니다.' },
  ];
  return (
    <Section id="overseas" label="04 Overseas">
      <Reveal>
        <div className="max-w-3xl mb-14">
          <div className="flex flex-wrap items-center gap-2"><Pill tone="purple">2.0 대표 기능 ②</Pill><SoonTag/></div>
          <h2 className="text-4xl md:text-5xl font-bold tracking-tight leading-[1.2] mt-4" style={{textWrap:'balance'}}>
            한국어로 쓰고,<br/><span className="text-purple-300">영어로 연재합니다.</span>
          </h2>
          <p className="text-lg text-neutral-400 mt-6 leading-relaxed" style={{textWrap:'pretty'}}>
            {SOON ? '12월 24일 2.0부터 ' : ''}쓰던 원고를 영어로 옮겨 북미 웹연재 사이트 Royal Road 에 올리고, 일정과 실적을 관리합니다.
            반응이 좋으면 품스토리의 해외 출판 브랜드 도깨비 프레스에 투고할 수 있습니다.
          </p>
        </div>
      </Reveal>
      <div className="grid lg:grid-cols-[1.1fr_1fr] gap-10 items-start">
        <div className="space-y-5 min-w-0">
          <Reveal><LoopVideo name="global-15s-720" sound/></Reveal>
          <Reveal delay={80}>
            <img src="uploads/2.0/overseas-translate-to-post-app.jpg" alt="해외 출간 화면: 연재 스케줄에서 회차를 골라 번역하고, 영문 번역 결과를 확인한 뒤 올리러 갑니다" className="w-full rounded-2xl border border-white/10" loading="lazy" style={{maxWidth:'100%'}}/>
          </Reveal>
        </div>
        <div className="space-y-3 min-w-0">
          {flow.map((f,i) => (
            <Reveal key={f.t} delay={i*60}>
              <div className="flex gap-4 p-4 rounded-xl border border-purple-500/20 bg-purple-500/[0.03]">
                <span className="w-7 h-7 shrink-0 rounded-full flex items-center justify-center text-[11px] font-bold text-purple-200 border border-purple-400/40">{i+1}</span>
                <div className="min-w-0">
                  <h3 className="font-bold flex flex-wrap items-center gap-2">{f.t}<SoonTag/></h3>
                  <p className="text-sm text-neutral-400 leading-relaxed mt-1">{f.d}</p>
                </div>
              </div>
            </Reveal>
          ))}
          <Reveal delay={320}>
            <p className="text-xs text-neutral-500 leading-relaxed">번역 · 영어 페이지 만들기 · 컨설팅 · 실적 진단 같은 어시스턴트 작업에는 SP가 듭니다.</p>
          </Reveal>
        </div>
      </div>
    </Section>
  );
}

// ── 2.0 에서 그 밖에 새로 생긴 것 ──
function MoreNew({ accent }) {
  const items = [
    { t:'웹툰 콘티', d:'회차 원고를 컷 대본과 러프 밑그림으로 나눠, 장면이 어떻게 보일지 미리 봅니다.', img:'webtoon-episode-to-cuts.jpg', pos:'center 92%', alt:'회차 원고와 컷 대본·러프 밑그림 비교', v2:true },
    { t:'3D 배경', d:'배경 설정으로 공간 구조도와 지도를 만들고, 3D 도면으로 걸어 들어가 봅니다.', video:'3d-walk-15s-1280', v2:true },
    { t:'사용법 짚어 주기', d:'「이 화면 사용법 알려줘」라고 물으면 어시스턴트가 설명하고, 필요한 단추를 화면에서 짚어 줄 수 있습니다.', v2:true,
      img:'usage-pointer.jpg', pos:'center top', alt:'「집중 타이머 단추 위치 알려 줘」에 어시스턴트가 답하며 원고 화면 위쪽 타이머 단추를 반짝여 짚은 화면' },
    { t:'집필 트레이닝', d:'코치가 이끄는 코스로, 실제로 쓴 시간만큼 한 단계씩 나아갑니다. 2.0에서는 예시 작품 구경과 첫 주 루틴 코칭이 더해집니다.', img:'tutorial-30min.jpg', pos:'center 75%', alt:'예시 작품 구경 · 첫 30분 미션 · 첫 주 루틴 코칭', v2:true },
    { t:'작가 레벨 · 랭킹', d:'꾸준히 쓴 만큼 레벨과 칭호가 오르고, 주간·전체 랭킹에서 다른 작가들과 견줘 볼 수 있습니다.', v2:true,
      img:'level-ranking.jpg', pos:'left top', alt:'홈 왼쪽 작가 카드(레벨 · 칭호 · EXP)와 주간 랭킹 — 시험 계정 화면, 다른 작가는 익명 표시' },
  ];
  return (
    <Section id="more" label="05 More" className="border-y border-white/5 bg-white/[0.01]">
      <Reveal>
        <div className="text-center mb-12">
          <div className="flex justify-center"><SoonTag/></div>
          <h2 className="text-3xl md:text-4xl font-bold tracking-tight mt-3">{SOON ? '2.0에서 함께 열리는 것' : '2.0에서 새로 생긴 것'}</h2>
        </div>
      </Reveal>
      <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
        {items.map((it,i) => (
          <Reveal key={it.t} delay={i*60}>
            <div className="h-full rounded-xl border border-white/10 bg-white/[0.02] overflow-hidden">
              {it.video && <LoopVideo name={it.video} ratio="1280/688"/>}
              {it.img && (
                <div className="relative w-full overflow-hidden border-b border-white/10" style={{aspectRatio:'1280/688', maxWidth:'100%'}}>
                  <img src={`uploads/2.0/${it.img}`} alt={it.alt} loading="lazy" className="w-full h-full object-cover" style={{objectPosition: it.pos}}/>
                  {it.cap && <span className="absolute bottom-2 right-3 px-1.5 rounded bg-black/55 text-[10px] text-white/80">{it.cap}</span>}
                </div>
              )}
              <div className="p-5">
                <h3 className="font-bold mb-1.5 flex flex-wrap items-center gap-2">{it.t}{it.v2 && <SoonTag/>}</h3>
                <p className="text-sm text-neutral-400 leading-relaxed">{it.d}</p>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

// ── 기본기 (1.x 부터 있던 것 · 압축) ──
function Basics({ accent }) {
  const cols = [
    { t:'쓰기', items:['회차별 원고 · 자동 저장','백지에 떠오르는 대로','맞춤법 · 형광펜 · 스프린트 타이머','스냅샷으로 되돌리기'] },
    { t:'설계', items:['캐릭터 · 배경 카드와 소속별 보기','인물관계도 · 공간 구조도 · 타임라인','플롯 마법사 4단계 · 칠판 카드','원고에서 인물 · 배경 자동 추출'] },
    { t:'어시스턴트', items:['작품 전체를 읽고 대화','가볍게는 훑어보기 · 깊게는 정독','노트 정리 · 개연성 검토','캐릭터 · 배경 이미지 만들기'] },
    { t:'내보내기', items:['투고 자료 DOCX · HWPX','출판사 탐색 · 투고 추적','연독률 · 실적 인사이트','연재 컨설팅'] },
  ];
  return (
    <Section id="basics" label="06 Basics">
      <Reveal>
        <div className="max-w-3xl mb-12">
          <Pill tone="neutral">기본기</Pill>
          <h2 className="text-3xl md:text-4xl font-bold tracking-tight mt-4" style={{textWrap:'balance'}}>쓰기만 하세요. 나머지는 상태창이 챙깁니다.</h2>
        </div>
      </Reveal>
      <div className="grid md:grid-cols-[1.2fr_1fr] gap-8 items-start mb-12">
        <Reveal className="min-w-0"><AssistantChat/></Reveal>
        <Reveal delay={100} className="min-w-0"><div className="h-[380px] flex"><CharacterMap accent={accent}/></div></Reveal>
      </div>
      <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
        {cols.map((c,i) => (
          <Reveal key={c.t} delay={i*60}>
            <div className="p-5 rounded-xl border border-white/10 bg-white/[0.02] h-full">
              <h3 className="font-bold mb-3" style={{color: accent}}>{c.t}</h3>
              <ul className="space-y-1.5 text-sm text-neutral-300">
                {c.items.map(x => <li key={x} className="flex gap-2"><I.Check size={14} className="mt-1 shrink-0" style={{color: accent}}/>{x}</li>)}
              </ul>
            </div>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

// ── 원고 안전 ──
function Safety() {
  const pts = [
    ['원고는 내 기기에','쓰는 원고는 내 기기에 저장됩니다. 투고처럼 직접 보내는 경우의 보관은 개인정보 처리방침을 따릅니다.'],
    ['내 구글 드라이브로 동기화', SOON ? '여러 PC · 태블릿에서 같은 원고를 씁니다(연결은 선택). 폰은 12월 24일 2.0부터입니다.' : 'PC · 태블릿 · 폰 어디서 열어도 같은 원고입니다(연결은 선택).'],
    ['휴지통 · 스냅샷 · 백업','지운 것도, 고치기 전도 되살릴 수 있게 지킵니다.'],
  ];
  return (
    <Section id="safety" label="08 Safety" className="border-y border-white/5 bg-white/[0.01]">
      <div className="grid md:grid-cols-3 gap-5">
        {pts.map(([t,d],i) => (
          <Reveal key={t} delay={i*70}>
            <div className="p-6 rounded-xl border border-emerald-500/20 bg-emerald-500/[0.03] h-full">
              <h3 className="font-bold mb-2 text-emerald-200">{t}</h3>
              <p className="text-sm text-neutral-400 leading-relaxed">{d}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

// ── 마지막 단추 ──
function FinalCTAV2({ accent }) {
  return (
    <section className="relative px-6 py-28 md:py-36 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] mb-12" style={{textWrap:'balance'}}>
            {SOON ? <>12월 24일,<br/><span style={{color: accent}}>상태창 2.0이 열립니다.</span></>
                  : <>오늘 쓰기 시작하면,<br/><span style={{color: accent}}>내일 완결이 가까워집니다.</span></>}
          </h2>
        </Reveal>
        <Reveal delay={120}>
          <div className="flex flex-col sm:flex-row items-center justify-center gap-3">
            {SOON && FUNDING_OPEN && (
              <TumblbugLink 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}}>
                텀블벅에서 2.0 후원하기 <I.ArrowRight size={18}/>
              </TumblbugLink>
            )}
            <a href="download.html"
               className={SOON && FUNDING_OPEN
                 ? 'inline-flex items-center gap-2 px-8 py-4 rounded-lg border border-white/15 bg-white/[0.03] text-white font-semibold text-lg transition hover:bg-white/[0.07]'
                 : 'inline-flex items-center gap-2 px-8 py-4 rounded-lg text-black font-bold text-lg transition hover:brightness-110'}
               style={SOON && FUNDING_OPEN ? {} : {background: accent}}>
              <I.Download size={18}/> {SOON ? '14일 무료로 써 보기' : '무료 다운로드'}
            </a>
          </div>
          {SOON && <p className="text-xs text-neutral-500 mt-5">{TRIAL_NOTE}</p>}
          <div className="flex items-center justify-center gap-6 mt-8 text-sm text-neutral-500">
            <a href="pricing.html" className="hover:text-white transition">가격 보기</a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { LandingV2Sections: { FundingBand, HeroV2, PillarPhone, PillarOverseas, MoreNew, Basics, Safety, FinalCTAV2 } });