/* ScenarioStudy — "실측(정답지) vs 공개데이터 시나리오" 정밀도 연구.
   목적(최상위): 스토어센터·브랜드사 RAW 없이 공개 데이터만으로 어디까지 날카롭게 맞히나 →
   AE가 RAW 없이도 설득력 있는 제안을 하는 영역을 규명하고, 갭을 메우는 정보 수집을 역제안.
   실측 브랜드(샥즈)를 ground truth로, 차원별 공개추정 가능성을 등급화.

   원칙(거짓 정밀 금지): 공개추정은 "방법 + 밴드"로 제시. 실측처럼 단정하지 않음.
   props: { profile }  // measuredProfile (tier-A)
*/
const { useState: useSSState } = React;

// 차원별 연구 결과 — 공개 데이터로 추정 가능성 + 방법 + 실측 대비 일치
// tier: green(공개로 날카로움) / amber(프록시 근접·밴드) / red(스토어센터·브랜드사 필수)
const SS_DIMS = [
  { id: 'category', label: '카테고리·포지셔닝', tier: 'green',
    source: 'shopSearch(쇼핑 API)', method: '상품 카테고리 집계',
    actual: p => p.meta.categoryLabel,
    est: () => '디지털/가전 > 음향가전 > 블루투스이어폰',
    match: '적중', note: '카테고리는 공개 API로 정확. AE가 즉시 단정 가능.' },
  { id: 'price', label: '가격대 · AOV', tier: 'green',
    source: 'shopSearch — 브랜드 세그먼트', method: '브랜드 필터 후 가격 중앙값',
    actual: p => p.economics && p.economics.aov ? '₩' + p.economics.aov.toLocaleString() : '—',
    est: () => '₩230k~260k (브랜드 필터)',
    match: '밴드 적중', warn: 'raw 카테고리 median은 ₩67,690 — 저가 클론 범람으로 크게 빗나감. 반드시 브랜드/프리미엄 티어로 세그먼트.',
    note: '브랜드명으로 좁히면 공개 데이터로도 객단가 밴드 적중.' },
  { id: 'competitors', label: '경쟁군 · 점유', tier: 'green',
    source: 'shopSearch brands + DataLab', method: '동일 카테고리 판매 브랜드',
    actual: p => (p.competitors || []).slice(0, 4).join(', '),
    est: () => '볼티움·브리츠·스마텍·아남 (저가군) + 에어팟·버즈',
    match: '실측 확인', note: '경쟁 브랜드·점유는 공개. 단 가격 티어 구분 필요(저가 클론 vs 프리미엄).' },
  { id: 'bestseller', label: '제품 랭킹 · 베스트셀러', tier: 'green',
    source: 'shopSearch 정렬', method: '쇼핑 노출/판매순 랭킹',
    actual: p => (p.topProducts && p.topProducts[0] ? p.topProducts[0].name : '—'),
    est: () => '오픈런 프로2 / 오픈닷 원 상위 노출',
    match: '랭킹 적중', note: '어떤 모델이 시장에서 도는지 공개로 관찰 가능.' },
  { id: 'keyword', label: '검색 수요 · 키워드', tier: 'green',
    source: 'keywordTool(검색광고)', method: '검색량·경쟁도·입찰가',
    actual: p => (p.signatureKeywords || []).slice(0, 3).join(', '),
    est: () => '골전도이어폰·오픈이어 검색량/경쟁도 실수치',
    match: '완전 공개', note: 'SA·SEO 키워드 전략은 RAW 없이도 완전히 공개 데이터로 가능.' },
  { id: 'demand', label: '수요 추세 · 시즌성', tier: 'green',
    source: 'DataLab searchTrend(검색추세)', method: '카테고리 검색량 월별 추세',
    actual: p => p.seasonality ? '월별 매출 시계열 보유' : (p.hourly ? '시간대 피크 ' + p.hourly.indexOf(Math.max(...p.hourly)) + '시' : '—'),
    est: () => '검색 피크 4·7월, 저점 11~12월 (실추세)',
    match: '실데이터', note: '검색 추세(시즌성)는 공개 API로 실측 가능 — 광고 예산 타이밍 제안에 즉시 활용.' },
  { id: 'gender', label: '성별 구성', tier: 'amber',
    source: '카테고리 판단 (API 비세분)', method: 'DataLab 인구통계 = flat 반환',
    actual: p => p.gender ? `남 ${p.gender['남성']}% / 여 ${p.gender['여성']}%` : '—',
    est: () => '남성 우세(카테고리 경험칙)',
    match: '방향만', warn: 'DataLab 인구통계 엔드포인트는 성별 50/50으로 비세분 반환 → API 정량 검증 불가. 음향/운동=남성 skew는 경험칙 방향만.',
    note: '정확 비율은 실측 필요. 공개로는 "남성 우세" 방향까지만 단정 안전.' },
  { id: 'age', label: '연령 분포', tier: 'amber',
    source: '카테고리 판단 (API 비세분)', method: 'DataLab 연령 = flat 반환',
    actual: p => { const t = window.BrandProfiles.topCells(p, 1)[0]; return t ? t.label + ' 코어' : '—'; },
    est: () => '30~40대 skew(경험칙·검색 연령 간접)',
    match: '방향만', warn: 'DataLab 연령 분포도 비세분 → 정확 셀 추정 불가. 30~40대 skew는 가격대·용도(러닝/자전거)로 간접 추론.',
    note: '정확 결합셀(남41~45)은 실측 전용. 공개로는 "3040 운동인구" 방향까지.' },
  { id: 'mobile', label: '디바이스(모바일)', tier: 'amber',
    source: 'DataLab device', method: '카테고리 디바이스 비중',
    actual: p => p.device ? p.device.mobile + '%' : '—',
    est: () => '모바일 70~85% (카테고리 일반)',
    match: '밴드 적중', note: '모바일 우세는 카테고리 공통 — 밴드로 안전.' },
  { id: 'adintensity', label: '광고 강도(오가닉/광고)', tier: 'amber',
    source: 'keywordTool 경쟁도 + shopSearch 광고노출', method: '경쟁도·스폰서 비율 프록시',
    actual: p => p.channelSplit ? `오가닉 ${p.channelSplit.organic.total}% / 광고 ${p.channelSplit.ad.total}%` : '—',
    est: () => '광고 의존 높음(방향만)',
    match: '방향만', note: '카테고리 광고 경쟁이 치열함은 추정 가능. 정확 채널 분리는 스토어 필요.' },
  { id: 'channel', label: '채널별 매출 ROI', tier: 'red',
    source: '— (스토어센터)', method: '브랜드 광고효과분석',
    actual: p => p.adAccount ? 'blended ROAS ' + p.adAccount.blendedRoas : '—',
    est: () => '공개 불가',
    match: '실측 필수', note: 'SA·DA 채널별 ROAS·기여는 사업자/스토어 데이터 없이는 불가.' },
  { id: 'funnel', label: '퍼널 전환율', tier: 'red',
    source: '— (스토어센터)', method: '쇼핑 단계별 고객수',
    actual: p => p.shoppingFunnel ? '발견→구매 ' + p.shoppingFunnel.discoverToBuyPct + '%' : '—',
    est: () => '공개 불가',
    match: '실측 필수', note: '발견→관심→구매 전환은 브랜드 애널리틱스 권한 필요. 카테고리 벤치만 간접.' },
  { id: 'repurchase', label: '재구매 · 시간대', tier: 'red',
    source: '— (스토어센터)', method: '재구매통계·시간대별',
    actual: p => p.hourly ? '피크 ' + p.hourly.indexOf(Math.max(...p.hourly)) + '시' : '—',
    est: () => '공개 불가',
    match: '실측 필수', note: '재구매율·결제 시간대/요일은 스토어센터 전용.' },
];

function ScenarioStudy({ profile }) {
  const [filter, setFilter] = useSSState('all');
  if (!profile) {
    return <div className="ssd-empty">실측(tier-A) 브랜드를 정답지로 둘 때 공개데이터 정밀도 연구가 열립니다. (예: 샥즈)</div>;
  }
  const p = profile;
  const counts = { green: 0, amber: 0, red: 0 };
  SS_DIMS.forEach(d => counts[d.tier]++);
  const coverage = Math.round((counts.green + counts.amber * 0.5) / SS_DIMS.length * 100);
  const dims = filter === 'all' ? SS_DIMS : SS_DIMS.filter(d => d.tier === filter);

  const TIER = {
    green: { dot: '🟢', label: '공개로 날카로움', cls: 'ssd-green' },
    amber: { dot: '🟡', label: '프록시 근접(밴드)', cls: 'ssd-amber' },
    red: { dot: '🔴', label: '스토어센터 필수', cls: 'ssd-red' },
  };

  return (
    <div className="ssd">
      <div className="ssd-head">
        <div>
          <div className="ssd-eyebrow">시나리오 정밀도 연구 · 실측 = 정답지({p.meta.brand})</div>
          <h3 className="ssd-title">스토어센터 없이, 공개 데이터로 어디까지 날카로운가</h3>
        </div>
      </div>

      {/* 커버리지 게이지 */}
      <div className="ssd-cov">
        <div className="ssd-cov-bar">
          <div className="ssd-cov-g" style={{ width: (counts.green / SS_DIMS.length * 100) + '%' }} />
          <div className="ssd-cov-a" style={{ width: (counts.amber / SS_DIMS.length * 100) + '%' }} />
          <div className="ssd-cov-r" style={{ width: (counts.red / SS_DIMS.length * 100) + '%' }} />
        </div>
        <div className="ssd-cov-meta">
          <span><b>{coverage}%</b> 공개데이터 커버리지</span>
          <span className="ssd-cov-leg">🟢 {counts.green} 날카로움 · 🟡 {counts.amber} 근접 · 🔴 {counts.red} 실측필수</span>
        </div>
      </div>

      {/* 필터 */}
      <div className="ssd-filters">
        {[['all', '전체'], ['green', '🟢 공개로 날카로움'], ['amber', '🟡 프록시 근접'], ['red', '🔴 스토어센터 필수']].map(([k, l]) => (
          <button key={k} data-on={filter === k} onClick={() => setFilter(k)}>{l}</button>
        ))}
      </div>

      {/* 차원 테이블 */}
      <div className="ssd-rows">
        {dims.map(d => (
          <div key={d.id} className={'ssd-row ' + TIER[d.tier].cls}>
            <div className="ssd-row-top">
              <span className="ssd-dim">{TIER[d.tier].dot} {d.label}</span>
              <span className="ssd-match">{d.match}</span>
            </div>
            <div className="ssd-vs">
              <div className="ssd-actual"><span className="ssd-l">실측</span>{d.actual(p)}</div>
              <span className="ssd-arrow">vs</span>
              <div className="ssd-est"><span className="ssd-l">공개추정</span>{d.est(p)}</div>
            </div>
            <div className="ssd-src"><b>{d.source}</b> · {d.method}</div>
            {d.warn && <div className="ssd-warn">⚠ {d.warn}</div>}
            <div className="ssd-note">{d.note}</div>
          </div>
        ))}
      </div>

      {/* 3축 — 오디언스 인사이트 소스 (성별/연령 파훼) */}
      <AudienceAxis profile={p} />

      {/* AE 결론 + 수집 우선순위 */}
      <div className="ssd-concl">
        <div className="ssd-concl-h">AE 제안 전략 — RAW 없이 날카로운 영역 / 역제안으로 수집할 영역</div>
        <div className="ssd-concl-cols">
          <div className="ssd-cc ssd-cc-can">
            <strong>🟢 지금 바로 단정 가능 (공개)</strong>
            <p>포지셔닝·가격 전략·경쟁 점유·SEO/SA 키워드·제품 랭킹·대략 오디언스. <b>RAW 없이도 설득력 있는 제안 가능.</b></p>
          </div>
          <div className="ssd-cc ssd-cc-ask">
            <strong>🔴 역제안으로 수집 (= 광고 정밀화 훅)</strong>
            <p>채널 ROI·퍼널 전환·재구매. "이 부분은 스토어 통계를 주시면 SA·DA 추천을 실측으로 정밀화합니다" → 자연스러운 데이터 수집 + 표본(n) 증가.</p>
          </div>
        </div>
        <div className="ssd-foot">
          ※ 실측 브랜드(샥즈)가 정답지 — 공개 시나리오의 적중 여부를 검증하는 기준. 동종 표본이 늘수록 "RAW 없는 브랜드"의 시나리오 신뢰도를 실증으로 보증 → <b>SA·DA 광고 활성화의 회귀 표본 확장</b>.
        </div>
      </div>

      <style>{`
        .ssd { display: flex; flex-direction: column; gap: 12px; }
        .ssd-empty { padding: 24px; text-align: center; color: var(--text-dim); border: 1px dashed var(--border-strong); font-size: 13px; }
        .ssd-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--signal); }
        .ssd-title { margin: 4px 0 0; font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
        .ssd-cov { border: 1px solid var(--border); padding: 11px 12px; background: oklch(0.10 0.02 240 / 0.5); }
        .ssd-cov-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; }
        .ssd-cov-g { background: var(--plant); } .ssd-cov-a { background: var(--signal); } .ssd-cov-r { background: var(--alert); }
        .ssd-cov-meta { display: flex; justify-content: space-between; align-items: baseline; margin-top: 7px; flex-wrap: wrap; gap: 6px; }
        .ssd-cov-meta b { font-family: var(--font-mono); font-size: 17px; color: var(--text); }
        .ssd-cov-leg { font-size: 10px; color: var(--text-mute); }
        .ssd-filters { display: flex; flex-wrap: wrap; gap: 5px; }
        .ssd-filters button { font-size: 11px; padding: 4px 10px; border: 1px solid var(--border-strong); background: oklch(0.10 0.02 240 / 0.6); color: var(--text-dim); cursor: pointer; border-radius: 3px; font-family: inherit; }
        .ssd-filters button[data-on="true"] { border-color: var(--signal); color: var(--text); }
        .ssd-rows { display: flex; flex-direction: column; gap: 8px; }
        .ssd-row { border: 1px solid var(--border); border-left-width: 3px; padding: 10px 12px; background: oklch(0.10 0.02 240 / 0.5); }
        .ssd-green { border-left-color: var(--plant); } .ssd-amber { border-left-color: var(--signal); } .ssd-red { border-left-color: var(--alert); }
        .ssd-row-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
        .ssd-dim { font-size: 13px; font-weight: 600; color: var(--text); }
        .ssd-match { font-family: var(--font-mono); font-size: 10px; padding: 2px 7px; border-radius: 3px; border: 1px solid var(--border-strong); color: var(--text-mute); }
        .ssd-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin: 7px 0; }
        @media (max-width: 600px) { .ssd-vs { grid-template-columns: 1fr; } .ssd-arrow { display: none; } }
        .ssd-actual, .ssd-est { font-size: 11.5px; padding: 6px 8px; border-radius: 4px; }
        .ssd-actual { background: var(--plant-soft); color: var(--text); }
        .ssd-est { background: rgba(0,0,0,0.22); color: var(--text-dim); }
        .ssd-l { display: block; font-family: var(--font-mono); font-size: 8.5px; color: var(--text-mute); text-transform: uppercase; margin-bottom: 2px; }
        .ssd-arrow { font-family: var(--font-mono); font-size: 10px; color: var(--text-mute); }
        .ssd-src { font-size: 10.5px; color: var(--text-mute); }
        .ssd-src b { color: var(--cyan); font-family: var(--font-mono); }
        .ssd-warn { font-size: 10.5px; color: oklch(0.78 0.16 50); margin-top: 5px; line-height: 1.45; background: oklch(0.80 0.15 72 / 0.07); padding: 5px 8px; border-radius: 3px; }
        .ssd-note { font-size: 10.5px; color: var(--text-dim); margin-top: 5px; line-height: 1.45; }
        .ssd-concl { border: 1px solid var(--signal-dim); padding: 12px; background: oklch(0.80 0.15 72 / 0.04); }
        .ssd-concl-h { font-size: 12px; font-weight: 700; color: var(--text); margin-bottom: 9px; }
        .ssd-concl-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        @media (max-width: 600px) { .ssd-concl-cols { grid-template-columns: 1fr; } }
        .ssd-cc { padding: 9px 11px; border-radius: 5px; }
        .ssd-cc-can { background: var(--plant-soft); border: 1px solid var(--plant); }
        .ssd-cc-ask { background: oklch(0.68 0.21 22 / 0.06); border: 1px solid oklch(0.68 0.21 22 / 0.3); }
        .ssd-cc strong { font-size: 12px; color: var(--text); }
        .ssd-cc p { margin: 5px 0 0; font-size: 11px; color: var(--text-dim); line-height: 1.5; }
        .ssd-cc b { color: var(--text); }
        .ssd-foot { font-size: 10.5px; color: var(--text-mute); margin-top: 10px; line-height: 1.55; border-top: 1px solid var(--border); padding-top: 9px; }
        .ssd-foot b { color: var(--signal); }
      `}</style>
    </div>
  );
}

Object.assign(window, { ScenarioStudy });

/* categoryLabel → 네이버 쇼핑 대분류 카테고리ID (쇼핑인사이트 성/연령 호출용) */
function naverCidFor(label) {
  const s = String(label || '');
  if (/화장품|뷰티|미용|바디|코스메|향수/.test(s)) return { id: '50000002', name: '화장품/미용' };
  if (/디지털|가전|음향|이어폰|헤드폰|전자|컴퓨터|모바일|IT/.test(s)) return { id: '50000003', name: '디지털/가전' };
  if (/스포츠|레저|운동|골프|낚시|캠핑|자전거|수영|러닝/.test(s)) return { id: '50000007', name: '스포츠/레저' };
  if (/식품|푸드|간편식|냉동|음료|건강식|커피|차/.test(s)) return { id: '50000006', name: '식품' };
  if (/패션|의류|원피스|티셔츠|아우터/.test(s)) return { id: '50000000', name: '패션의류' };
  if (/잡화|가방|신발|주얼리|시계|지갑/.test(s)) return { id: '50000001', name: '패션잡화' };
  if (/가구|인테리어|침대|소파|조명/.test(s)) return { id: '50000004', name: '가구/인테리어' };
  if (/출산|육아|유아|기저귀|분유/.test(s)) return { id: '50000005', name: '출산/육아' };
  if (/생활|건강|건기식|위생|세제/.test(s)) return { id: '50000008', name: '생활/건강' };
  return null;
}

/* 카테고리 성/연령 — DataLab 쇼핑인사이트 라이브 호출. 정상이면 실데이터 막대,
   깨진 응답(옛 스텁/비세분)이면 "재배포 필요"로 정직하게(가짜 50/50 렌더 금지). */
function CategoryDemoLive({ profile }) {
  const cid = naverCidFor((profile && profile.meta && profile.meta.categoryLabel) || (profile && profile.realCategory) || '');
  const [st, setSt] = React.useState({ loading: true });
  React.useEffect(() => {
    let alive = true;
    if (!cid || !window.DataLab || !window.DataLab.categoryDemographics) { setSt({ loading: false, unavailable: true }); return; }
    window.DataLab.categoryDemographics({ category: cid.id })
      .then(r => { if (alive) setSt({ loading: false, r }); })
      .catch(e => { if (alive) setSt({ loading: false, err: String(e) }); });
    return () => { alive = false; };
  }, [cid && cid.id]);
  if (!cid) return null;
  const wrap = { border: '1px solid var(--border)', borderLeft: '2px solid var(--cyan)', borderRadius: 4, background: 'rgba(0,0,0,0.22)', padding: '9px 11px', margin: '9px 0' };
  const head = { fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--cyan)', letterSpacing: '.04em' };
  if (st.loading) return <div style={wrap}><span style={head}>⊙ 카테고리 성/연령 (DataLab 실호출) — 조회중…</span></div>;
  const r = st.r;
  if (st.unavailable || st.err || !r) {
    return <div style={wrap}><span style={head}>⊙ 카테고리 성/연령</span><div style={{ fontSize: 10.5, color: 'var(--text-mute)', marginTop: 4 }}>DataLab 미연결 — 프록시 연결 시 "{cid.name}" 성/연령 실데이터 표시.</div></div>;
  }
  if (r.degenerate) {
    return (
      <div style={wrap}>
        <span style={head}>⊙ 카테고리 성/연령 — ⚠ 비세분 응답</span>
        <div style={{ fontSize: 10.5, color: 'var(--signal)', marginTop: 4, lineHeight: 1.5 }}>
          프록시가 성별 50/50·연령 단일치만 반환 → <b>옛 배포(스텁) 또는 비세분</b>. 거짓 정밀 방지를 위해 표시 안 함.
          <br/>최신 <code>datalab-proxy.gs</code> 재배포 후 <code>?fn=rawShopInsight&p={'{'}"category":"{cid.id}"{'}'}</code>로 원시 응답 검증.
        </div>
      </div>
    );
  }
  const g = r.gender || {}, a = r.age || {};
  const ageRows = [['10s','10대'],['20s','20대'],['30s','30대'],['40s','40대'],['50s','50대'],['60s_plus','60+']];
  const maxAge = Math.max(1, ...ageRows.map(([k]) => a[k] || 0));
  return (
    <div style={wrap}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <span style={head}>⊙ 카테고리 성/연령 — {cid.name} (DataLab 실측)</span>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9, color: 'var(--text-mute)' }}>{r.__source === 'real' ? 'real' : r.__source} · 상대지수 · tier-B</span>
      </div>
      <div style={{ display: 'flex', gap: 6, margin: '7px 0 4px', fontSize: 11 }}>
        <div style={{ flex: g.male || 1, background: 'var(--cyan-dim)', color: 'var(--text)', padding: '3px 6px', borderRadius: 3, textAlign: 'center' }}>남 {g.male}%</div>
        <div style={{ flex: g.female || 1, background: 'var(--signal-dim)', color: 'var(--text)', padding: '3px 6px', borderRadius: 3, textAlign: 'center' }}>여 {g.female}%</div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 3, marginTop: 5 }}>
        {ageRows.map(([k, lbl]) => (
          <div key={k} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 10 }}>
            <span style={{ width: 28, color: 'var(--text-mute)', fontFamily: 'var(--font-mono)' }}>{lbl}</span>
            <div style={{ flex: 1, background: 'rgba(255,255,255,0.05)', borderRadius: 2, height: 10 }}>
              <div style={{ width: ((a[k] || 0) / maxAge * 100) + '%', height: '100%', background: 'var(--cyan)', borderRadius: 2 }}></div>
            </div>
            <span style={{ width: 34, textAlign: 'right', color: 'var(--text-dim)' }}>{a[k]}%</span>
          </div>
        ))}
      </div>
      <div style={{ fontSize: 9.5, color: 'var(--text-mute)', marginTop: 6, lineHeight: 1.45 }}>
        ※ 카테고리 단위(블루투스이어폰이 아니라 "{cid.name}") 상대지수. 브랜드 고유 성/연령은 스토어센터 실측만. 갭이 곧 브랜드 차별점.
      </div>
    </div>
  );
}

/* AudienceAxis — 3번째 검증축: 오디언스 데이터 발간 매체 + 시대흐름(트렌드).
   "트렌드→시장→고객→이커머스(DB)→마케팅→광고→영업"을 한 궤로 — 성별/연령 🟡를 교차검증으로 끌어올린다.
*/
function AudienceAxis({ profile }) {
  const AS = window.AudienceSources;
  if (!AS) return null;
  const sources = AS.forCategory(profile).filter(s => s.relevance > 0);
  const top = (sources.length ? sources : AS.SOURCES).slice(0, 5);
  const cat = (profile && profile.meta && profile.meta.categoryLabel) || '';
  const segs = AS.segmentsForCategory([cat, ...((profile && profile.signatureKeywords) || [])].join(' '));
  const trends = (window.MarketTrends && window.MarketTrends.forCategory([cat, ...((profile && profile.signatureKeywords) || [])].join(' '))) || [];
  const ACC = { public: { l: '공개', c: 'aa-pub' }, freemium: { l: '일부공개', c: 'aa-fre' }, paid: { l: '유료', c: 'aa-paid' } };

  return (
    <div className="aa">
      <div className="aa-head">
        <span className="aa-eyebrow">3축 · 오디언스 인사이트 — 성별/연령 파훼</span>
        <span className="aa-chain">트렌드 → 시장 → 고객 → 이커머스(DB) → 마케팅 → 광고 → 영업 · 한 궤</span>
      </div>
      <div className="aa-intro">
        DataLab 인구통계가 비세분이라(🟡 방향만), <b>앱 사용 기반 패널 데이터</b>로 교차검증하면 성별/연령을 "방향"에서 "밴드"로 끌어올린다. 카테고리 매칭 발간처:
      </div>
      <CategoryDemoLive profile={profile} />
      <div className="aa-srcs">
        {top.map(s => (
          <div key={s.id} className={'aa-src' + (s.demographic ? ' aa-demo' : '')}>
            <div className="aa-src-top">
              <a href={s.url} target="_blank" rel="noreferrer noopener" className="aa-src-name">{s.name}</a>
              <span className={'aa-acc ' + (ACC[s.access] || {}).c}>{(ACC[s.access] || {}).l}</span>
            </div>
            <div className="aa-src-type">{s.type} · {s.cadence} · tier-{s.tier}{s.demographic ? ' · 성/연령○' : ''}{s.integrated ? ' · 연동중' : ''}</div>
            <div className="aa-src-note">{s.note}</div>
          </div>
        ))}
      </div>
      <div className="aa-status">
        {segs.length > 0
          ? <span className="aa-ok">✓ 적재된 오디언스 세그먼트 {segs.length}건 — 교차검증 가동</span>
          : <span className="aa-need">○ 아직 실수치 미적재 — 아래 리포트를 적재하면 3축 교차검증 + 일치율 정량화. (공개 PDF: CJ메조 스포츠/라이프스타일 · 다이티 운동 오디언스 / 유료 CSV: 모바일인덱스 앱 인구통계)</span>}
      </div>
      {trends.length > 0 && (
        <div className="aa-trends">
          <span className="aa-trends-l">⊙ 시대흐름(트렌드) 신호 — 수집된 발간 리포트</span>
          {trends.map(t => (
            <div key={t.id} className="aa-trend">
              <div className="aa-trend-src">{t.source} <em>· {t.method}</em></div>
              <ul className="aa-trend-take">{(t.takeaways || []).map((tk, i) => <li key={i}>{tk}</li>)}</ul>
            </div>
          ))}
        </div>
      )}
      <style>{`
        .aa { border: 1px solid var(--cyan-dim); padding: 12px; background: var(--cyan-soft); }
        .aa-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
        .aa-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--cyan); }
        .aa-chain { font-family: var(--font-mono); font-size: 9px; color: var(--text-mute); }
        .aa-intro { font-size: 11.5px; color: var(--text-dim); line-height: 1.55; margin: 8px 0 10px; }
        .aa-intro b { color: var(--text); }
        .aa-srcs { display: flex; flex-direction: column; gap: 6px; }
        .aa-src { padding: 8px 10px; background: rgba(0,0,0,0.22); border: 1px solid var(--border); border-radius: 4px; border-left: 2px solid var(--border-strong); }
        .aa-src.aa-demo { border-left-color: var(--cyan); }
        .aa-src-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
        .aa-src-name { font-size: 12px; font-weight: 600; color: var(--text); text-decoration: none; }
        .aa-src-name:hover { color: var(--cyan); text-decoration: underline; }
        .aa-acc { font-family: var(--font-mono); font-size: 9px; padding: 1px 6px; border-radius: 3px; }
        .aa-pub { color: var(--plant); border: 1px solid var(--plant); }
        .aa-fre { color: var(--signal); border: 1px solid var(--signal-dim); }
        .aa-paid { color: var(--text-mute); border: 1px solid var(--border-strong); }
        .aa-src-type { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-mute); margin-top: 3px; }
        .aa-src-note { font-size: 10.5px; color: var(--text-dim); margin-top: 4px; line-height: 1.45; }
        .aa-status { margin-top: 10px; font-size: 11px; line-height: 1.5; }
        .aa-ok { color: var(--plant); }
        .aa-need { color: var(--text-mute); }
        .aa-trends { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 9px; }
        .aa-trends-l { font-family: var(--font-mono); font-size: 10px; color: var(--cyan); }
        .aa-trend { margin-top: 6px; }
        .aa-trend-src { font-size: 11px; color: var(--text); font-weight: 600; }
        .aa-trend-src em { font-style: normal; font-weight: 400; color: var(--text-mute); font-size: 10px; }
        .aa-trend-take { margin: 4px 0 0; padding-left: 16px; }
        .aa-trend-take li { font-size: 10.5px; color: var(--text-dim); line-height: 1.5; margin-bottom: 2px; }
      `}</style>
    </div>
  );
}

Object.assign(window, { AudienceAxis });
