/* global React */

// ───────────────────────────────────────────────────────────
// 공통 유틸
// ───────────────────────────────────────────────────────────
const fmt = (n) => n.toLocaleString('ko-KR');
const fmtKRW = (n) => '₩' + fmt(n);
const chgClass = (v) => v > 0 ? 'up' : v < 0 ? 'down' : '';
const chgSign = (v) => v > 0 ? '+' : '';

// ───────────────────────────────────────────────────────────
// 탑바 + 라우팅
// ───────────────────────────────────────────────────────────
function TopBar({ route, setRoute, onOpenCrit }) {
  const nav = [
    { id: 'home', label: '홈' },
    { id: 'class', label: '클래스' },
    { id: 'pf', label: '포트폴리오' },
    { id: 'community', label: '커뮤니티' },
    { id: 'columns', label: '칼럼' },
  ];
  return (
    <header className="topbar">
      <div className="topbar-inner">
        <div className="logo" onClick={() => setRoute('home')} style={{ cursor: 'pointer' }}>
          <div className="logo-mark">J</div>
          <span>제이씨드</span>
        </div>
        <nav className="nav-links">
          {nav.map(n => (
            <button key={n.id} className={'nav-link' + (route === n.id ? ' active' : '')} onClick={() => setRoute(n.id)}>
              {n.label}
            </button>
          ))}
        </nav>
        <div className="topbar-spacer" />
        <div className="search-box">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
          종목·영상·강의 검색
        </div>
        <button className="btn btn-ghost" onClick={onOpenCrit}>회의방</button>
        <button className="btn btn-dark">로그인</button>
        <button className="btn btn-primary">무료 체험</button>
      </div>
    </header>
  );
}

// ───────────────────────────────────────────────────────────
// 홈
// ───────────────────────────────────────────────────────────
function HomePage({ data, setRoute }) {
  const f = data.featured;
  return (
    <div className="page">
      {/* 히어로 */}
      <section className="hero">
        <div className="hero-main" onClick={() => setRoute('class')}>
          <div className="hero-thumb" />
          <div className="hero-play">
            <svg width="28" height="28" viewBox="0 0 24 24" fill="#0F0D05"><path d="M8 5v14l11-7z"/></svg>
          </div>
          <div className="hero-thumb-content">
            <span className="hero-badge"><span className="dot"/>{f.badge}</span>
            <h1 className="hero-title">{f.title.split(' → ')[0]} →<br/><em>{f.title.split(' → ')[1]}</em></h1>
            <p className="hero-sub">{f.sub}</p>
            <div className="hero-meta">
              <span>⏱ {f.duration}</span>
              <span>👁 <span className="num">{fmt(f.views)}</span></span>
              <span>{f.up}</span>
            </div>
          </div>
        </div>
        <div className="hero-side">
          <div className="hero-card dark">
            <div className="hero-card-label"><span style={{width:6,height:6,borderRadius:'50%',background:'#D94125',display:'inline-block',animation:'ping 1.6s infinite'}}/>LIVE · 매주 화·목 저녁 9시</div>
            <div className="hero-card-title">오늘의 시황 라이브<br/>— 12월 FOMC 프리뷰</div>
            <div className="hero-card-sub">이따 9시, 채팅으로 질문 받습니다.</div>
          </div>
          <div className="hero-card">
            <div className="hero-card-label">멤버십 한정</div>
            <div className="hero-card-title">자산 구조 해부 세션<br/>— 부동산·사업체·증권</div>
            <div className="hero-card-sub">계좌 공개는 안 합니다. 대신 자산을 어떤 비중·순서로 쌓았는지, 프레임만큼은 전부 공유해요.</div>
          </div>
          <div className="hero-card">
            <div className="hero-card-label">무료 · 5분</div>
            <div className="hero-card-title">내 재테크 레벨 진단</div>
            <div className="hero-card-sub">7문항으로 지금 필요한 액션 1가지만 뽑아드립니다.</div>
          </div>
        </div>
      </section>

      {/* 카운터 */}
      <div className="counter-strip">
        <div className="counter"><div className="counter-v num">48.2만</div><div className="counter-l">Subscribers</div></div>
        <div className="counter"><div className="counter-v num">312</div><div className="counter-l">Videos</div></div>
        <div className="counter"><div className="counter-v num">3,824만</div><div className="counter-l">Total Views</div></div>
        <div className="counter"><div className="counter-v num">8,420</div><div className="counter-l">Paid Members</div></div>
      </div>

      {/* 최신 영상 */}
      <div className="section-head">
        <h2>이번 주 따끈한 영상</h2>
        <a className="more" href={data.channel.youtubeUrl} target="_blank" rel="noopener noreferrer">채널보기 →</a>
      </div>
      <section className="youtube-embed-card">
        <div className="youtube-embed-copy">
          <div className="youtube-kicker">YouTube · Jay Seed</div>
          <h3>제이씨드 채널 최신 영상</h3>
          <p>주식, 부동산, 절세, 월배당까지 직장인 재테크 공부를 유튜브 영상으로 바로 이어서 볼 수 있습니다.</p>
          <a className="btn btn-dark" href={data.channel.youtubeUrl} target="_blank" rel="noopener noreferrer">유튜브 채널 열기</a>
        </div>
        <div className="youtube-frame-wrap">
          <iframe
            className="youtube-frame"
            src={data.channel.youtubeEmbedUrl}
            title="제이씨드 유튜브 채널 최신 영상"
            loading="lazy"
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
            allowFullScreen
          />
        </div>
      </section>
      <div className="video-grid">
        {data.videos.map((v, i) => (
          <a key={i} className="video-card" href={data.channel.youtubeUrl} target="_blank" rel="noopener noreferrer">
            <div className="video-thumb">
              <div className="video-thumb-bg" style={{ background: `linear-gradient(135deg, ${v.color}, ${v.color}99)` }}>
                {v.title.slice(0, 18)}
              </div>
              {v.live && <div className="video-live-badge"><span style={{width:5,height:5,borderRadius:'50%',background:'#fff',animation:'ping 1.4s infinite'}}/>LIVE</div>}
              {v.tag && !v.live && <div className="video-meta-tag">🔥 {v.tag}</div>}
              <div className="video-duration">{v.dur}</div>
              {i < 3 && <div className="video-progress"><div style={{width: (30 + i * 20) + '%'}}/></div>}
            </div>
            <div className="video-info">
              <div className="video-title">{v.title}</div>
              <div className="video-meta">#{v.cat} · 조회 {v.views} · {v.up}</div>
            </div>
          </a>
        ))}
      </div>

      {/* CTA 배너 */}
      <section className="banner">
        <div className="banner-content">
          <div className="banner-label">Class · 직장인 부자공부방</div>
          <h3>직장인이 월 1억<br/>모으는 방법, 같이 풀어봅시다</h3>
          <p>혼자 하면 3년, 같이 하면 1년. 사업·부동산·사업체를 쌓아온 제 경험을 강의로 정리하고, 매주 스터디룸에서 같이 풉니다. 1강은 무료로 열어뒀어요.</p>
          <div className="banner-ctas">
            <button className="btn btn-dark" onClick={() => setRoute('class')}>1강 무료로 보기</button>
            <button className="btn btn-ghost">커리큘럼 →</button>
          </div>
        </div>
        <div className="banner-visual">₩</div>
      </section>

      {/* 2분할: 관심종목 + 칼럼 */}
      <div className="two-col">
        <div>
          <div className="section-head"><h2>관심 주식 TOP 10</h2><span className="more">편집 →</span></div>
          <div className="watch-widget">
            <div className="watch-sub">관심 그룹에 담아보세요</div>
            {data.stocks.map((s, i) => (
              <div key={i} className="watch-row">
                <div className="watch-logo" style={{ background: s.color, color: s.txt || '#fff' }}>
                  {s.label || s.name[0]}
                </div>
                <div className="watch-body">
                  <div className="watch-name">{s.name}</div>
                </div>
                <div className="watch-price">
                  <div className="p">{typeof s.price === 'number' ? fmt(s.price) + '원' : s.price}</div>
                  <div className={'c ' + chgClass(s.chg)}>
                    {chgSign(s.chg)}{fmt(Math.abs(s.chgAbs))}원 ({chgSign(s.chg)}{Math.abs(s.chg).toFixed(2)}%)
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div>
          <div className="section-head"><h2>이번 주 칼럼</h2><span className="more" onClick={() => setRoute('columns')}>더보기 →</span></div>
          <div className="col-side">
            <h3>에디터 픽</h3>
            {data.columns.slice(0, 5).map((c, i) => (
              <div key={i} className="col-item">
                <span className="col-item-tag">{c.tag}</span>
                <div className="col-item-title">{c.title}</div>
                <div className="col-item-meta">{c.au} · {c.date} · {c.read}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────
// 클래스 (LMS)
// ───────────────────────────────────────────────────────────
function ClassPage({ data }) {
  const [current, setCurrent] = React.useState(data.classes.findIndex(c => c.status === 'now'));
  const lesson = data.classes[current];
  return (
    <div className="page">
      <div className="section-head" style={{marginTop: 0}}>
        <h2>클래스 · 직장인 월 1억 공부방</h2>
        <span className="more">수강률 <span className="num" style={{color:'var(--up)',fontWeight:700}}>32%</span></span>
      </div>
      <div style={{display:'grid', gridTemplateColumns:'2fr 1fr', gap:24}}>
        <div>
          <div className="lesson-player">
            <div className="lesson-player-bg" />
            <div className="player-title">{lesson.no}강. {lesson.title}</div>
            <div style={{position:'absolute',top:'50%',left:'50%',transform:'translate(-50%,-50%)',width:88,height:88,borderRadius:'50%',background:'rgba(255,217,61,0.95)',display:'grid',placeItems:'center'}}>
              <svg width="32" height="32" viewBox="0 0 24 24" fill="#0F0D05"><path d="M8 5v14l11-7z"/></svg>
            </div>
            <div className="player-controls">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="#fff"><path d="M8 5v14l11-7z"/></svg>
              <div className="player-time">07:12</div>
              <div className="player-progress"><div style={{width:'32%'}}/></div>
              <div className="player-time">{lesson.dur}</div>
              <span style={{padding:'4px 8px',background:'rgba(255,255,255,0.15)',borderRadius:6,fontSize:11,fontWeight:700}}>1.25×</span>
              <svg width="20" height="20" viewBox="0 0 24 24" fill="#fff"><path d="M16 8h3V5h2v14h-2v-3h-3V8zM3 5h11v3H3V5zm0 5h11v3H3v-3zm0 5h11v3H3v-3z"/></svg>
            </div>
          </div>

          <div style={{marginTop:20, display:'flex', gap:10}}>
            <button className="btn btn-dark">← 이전 강의</button>
            <button className="btn btn-primary" style={{flex:1}}>완강 체크 + 다음으로 →</button>
            <button className="btn btn-ghost">강의노트</button>
          </div>

          <div style={{marginTop:28, background:'#fff', border:'1px solid var(--t-50)', borderRadius:18, padding:'24px 28px'}}>
            <h3 style={{fontSize:18, fontWeight:800, margin:'0 0 12px'}}>이 강의 요약</h3>
            <ul style={{margin:0, paddingLeft:18, lineHeight:1.8, fontSize:14, color:'var(--t-700)'}}>
              <li>ETF 고르는 7가지 체크리스트 — 순서가 중요합니다.</li>
              <li>운용보수 0.1% 차이가 20년 후 얼마 차이로 누적되는지 실제 계산.</li>
              <li>추종지수 · 괴리율 · 배당 재투자 방식 · LP 유동성 공급 확인법.</li>
              <li>제가 <b>절대 건드리지 않는 ETF 유형</b> 3가지 — 왜 그런지 이유까지.</li>
            </ul>
          </div>
        </div>

        <div>
          <div style={{background:'var(--bg-soft)', borderRadius:18, padding:'18px 20px', marginBottom:14}}>
            <div style={{fontSize:11, letterSpacing:'0.1em', color:'var(--t-400)', fontWeight:700, textTransform:'uppercase'}}>Curriculum</div>
            <div style={{fontSize:20, fontWeight:800, marginTop:4}}>직장인 월 1억 공부방 · 10강</div>
          </div>
          <div className="lesson-list">
            {data.classes.map((c, i) => (
              <div key={i} className={'lesson-list-item' + (i === current ? ' playing' : '')} onClick={() => setCurrent(i)}>
                <div className="ll-num">{String(c.no).padStart(2,'0')}</div>
                <div className="ll-body">
                  <div className="ll-title">{c.title}</div>
                  <div className="ll-meta">{c.dur} {c.status === 'done' && '· 완강'} {c.status === 'now' && '· 시청 중'}</div>
                </div>
                <div className={'ll-dot ' + c.status} />
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────
// 포트폴리오 — 프레임워크 공개 (실계좌 비공개)
// ───────────────────────────────────────────────────────────
function PortfolioPage({ data }) {
  const pf = data.portfolio;
  const R = 90, C = 2 * Math.PI * R;
  // 실제 금액 대신 "비중 프레임"만 공개
  const frame = [
    { name: '실거주 아파트', tag: '부동산 코어', weight: 32, color: '#2F4FBA', role: '주거·시세차익·담보여력 — 포트폴리오의 기초 체력' },
    { name: '투자용 아파트 (전세 레버리지)', tag: '부동산 레버리지', weight: 18, color: '#1428A0', role: '월세 현금흐름은 0, 중장기 자본이득 베팅' },
    { name: '스터디카페 (현금흐름 사업체)', tag: '사업 · 현금흐름', weight: 15, color: '#D94125', role: '월 순익 파이프라인 — 인건비·공실 리스크 상존' },
    { name: '본업 사업체 (연매출 20억)', tag: '사업 · 코어', weight: 20, color: '#E2A900', role: '가장 큰 레버리지 자산 — 일 벌이고 일 잘하는 게 재테크' },
    { name: '증권 포트 (ETF · 배당주)', tag: '유동성·복리', weight: 10, color: '#2E8A4F', role: '전체의 10% 언저리 유지 — 세부 종목·비중 비공개' },
    { name: '현금·MMF·달러', tag: '방어력', weight: 5, color: '#706749', role: '기회가 왔을 때 살 실탄 — 현금도 포지션' },
  ];
  let offset = 0;
  return (
    <div className="page">
      <div className="section-head" style={{marginTop:0}}>
        <h2>자산 프레임 · 실계좌는 공개 안 합니다</h2>
        <span className="more">📌 금액 대신 비중과 역할만 공개해요. 따라하지 말고, 이해하세요.</span>
      </div>

      <div className="pf-hero">
        <div>
          <div className="pf-total-label">공개 범위 · 정책 고정</div>
          <div className="pf-total" style={{fontSize:38, lineHeight:1.15}}>비중 · 역할 · 의사결정<br/>프레임만 공개</div>
          <div className="pf-total-chg" style={{marginTop:14, lineHeight:1.6}}>
            <span style={{color:'#fff', fontWeight:700}}>아파트 2채 · 스터디카페 · 연매출 20억 사업체</span><br/>
            <span style={{fontSize:13, color:'var(--t-300)'}}>— 이 네 개가 제 자산의 큰 축이에요. 금액·계좌는 영원히 비공개입니다.</span>
          </div>
          <div className="pf-ctas">
            <button className="btn btn-primary">자산 구조 강의 보러가기</button>
            <button className="btn btn-ghost" style={{background:'var(--t-700)', color:'var(--bg-soft)', border:'1px solid var(--t-700)'}}>왜 공개 안 하는지 →</button>
          </div>
        </div>
        <div className="pf-donut-wrap">
          <svg width="220" height="220" viewBox="0 0 220 220" style={{transform:'rotate(-90deg)'}}>
            <circle cx="110" cy="110" r={R} fill="none" stroke="#1B1810" strokeWidth="30"/>
            {frame.map((h, i) => {
              const len = (h.weight / 100) * C;
              const el = <circle key={i} cx="110" cy="110" r={R} fill="none" stroke={h.color} strokeWidth="30" strokeDasharray={`${len} ${C-len}`} strokeDashoffset={-offset}/>;
              offset += len;
              return el;
            })}
            <text x="110" y="104" textAnchor="middle" fill="#FFD600" fontSize="13" fontWeight="700" fontFamily="var(--font-display)" transform="rotate(90 110 110)">프레임</text>
            <text x="110" y="122" textAnchor="middle" fill="#FFFAE3" fontSize="11" transform="rotate(90 110 110)">100%</text>
          </svg>
        </div>
      </div>

      <div className="pf-holdings-table">
        <div className="pf-hd-row pf-hd-head" style={{gridTemplateColumns: '44px 1.5fr 0.7fr 1.8fr'}}>
          <div></div><div>자산 항목</div><div style={{textAlign:'right'}}>비중</div><div>역할 · 한 줄 설명</div>
        </div>
        {frame.map((h, i) => (
          <div key={i} className="pf-hd-row" style={{gridTemplateColumns: '44px 1.5fr 0.7fr 1.8fr'}}>
            <div style={{width:34, height:34, borderRadius:10, background:h.color, display:'grid', placeItems:'center', color:'#fff', fontWeight:800, fontSize:14}}>
              {i+1}
            </div>
            <div>
              <div style={{fontWeight:700, fontSize:14}}>{h.name}</div>
              <div style={{fontSize:11, color:'var(--t-400)', marginTop:2}}>{h.tag}</div>
            </div>
            <div style={{textAlign:'right', fontFamily:'var(--font-num)', fontWeight:700, fontSize:16}}>{h.weight}%</div>
            <div style={{fontSize:13, color:'var(--t-700)', lineHeight:1.5}}>{h.role}</div>
          </div>
        ))}
      </div>

      <div style={{marginTop:24, background:'var(--t-900)', color:'var(--bg-soft)', borderRadius:18, padding:'24px 28px'}}>
        <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:10}}>
          <div style={{width:28, height:28, borderRadius:8, background:'#fff', color:'var(--t-900)', display:'grid', placeItems:'center', fontWeight:800, fontSize:13}}>J</div>
          <div style={{fontWeight:800, fontSize:16}}>왜 숫자는 공개 안 하는가</div>
          <div style={{fontSize:11, color:'var(--t-300)', marginLeft:'auto'}}>운영 원칙</div>
        </div>
        <p style={{fontSize:14, lineHeight:1.7, color:'var(--bg-soft)', margin:0}}>
          금액을 공개하면 <b style={{color:'#fff'}}>비교·모방·허세</b> 셋 다 생깁니다. 여러분의 출발점·속도·리스크 허용범위는 저랑 달라요. 그래서 숫자 대신 <b style={{color:'var(--brand)'}}>프레임</b>만 공개합니다 — 무엇을 몇 % 비중으로, 어떤 역할로 넣느냐. 이걸 이해하면 본인 상황에 맞게 설계할 수 있어요. 따라하면 망합니다.
        </p>
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────
// 커뮤니티
// ───────────────────────────────────────────────────────────
function CommunityPage({ data, showToast }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div className="page">
      <div className="section-head" style={{marginTop:0}}>
        <h2>커뮤니티 · 오늘의 수익인증</h2>
        <button className="btn btn-dark" onClick={() => setOpen(true)}>+ 내 수익 인증하기</button>
      </div>
      <div style={{background:'var(--bg-soft)', border:'1px solid var(--t-50)', borderRadius:16, padding:'14px 20px', marginBottom:20, fontSize:13, color:'var(--t-700)'}}>
        ⚠️ 수익 인증은 <b>캡처 + 기간</b> 필수입니다. 숫자만 올리는 글은 운영진이 조용히 내려요. 서로 도움되는 판, 같이 만들어 봅시다.
      </div>
      <div className="proof-grid">
        {data.proofs.map((p, i) => (
          <div key={i} className="proof-card">
            <div className="proof-head">
              <div className="proof-avatar">{p.user[3]}</div>
              <div>
                <div className="proof-user">{p.user}</div>
                <div className="proof-period">{p.period} · {p.age}</div>
              </div>
            </div>
            <div className="proof-rate" style={{color: p.rate > 0 ? 'var(--up)' : 'var(--down)'}}>{chgSign(p.rate)}{p.rate.toFixed(1)}%</div>
            <div className="proof-note">{p.note}</div>
            <div className="proof-foot">
              <span>👍 {fmt(p.likes)}</span>
              <span>💬 {p.cmts}</span>
              <span style={{marginLeft:'auto', color:'var(--t-700)', fontWeight:600, cursor:'pointer'}}>포트 공개 보기 →</span>
            </div>
          </div>
        ))}
      </div>

      {open && (
        <div className="modal-backdrop" onClick={() => setOpen(false)}>
          <div className="modal" onClick={e => e.stopPropagation()}>
            <div className="modal-head">
              <h3>수익 인증 올리기</h3>
              <button className="crit-close" onClick={() => setOpen(false)}>×</button>
            </div>
            <div className="modal-body">
              <div className="field"><label>닉네임</label><input placeholder="예: 서울_직장인김씨" /></div>
              <div className="field-row">
                <div className="field"><label>시작일</label><input placeholder="2024-01-01" /></div>
                <div className="field"><label>현재 수익률</label><input placeholder="예: +42.8" /></div>
              </div>
              <div className="field"><label>한 줄 후기 (솔직하게)</label><textarea placeholder="승승장구 말고 진짜 경험 나눠주세요. 실패담도 환영." /></div>
              <div className="field"><label>증빙 캡처</label><div style={{background:'var(--bg-soft)', border:'1.5px dashed var(--t-300)', borderRadius:12, padding:'22px 14px', textAlign:'center', fontSize:13, color:'var(--t-400)'}}>📎 증권앱 캡처 끌어다 놓기 (개인정보는 자동 블러 처리)</div></div>
            </div>
            <div className="modal-foot">
              <button className="btn btn-ghost" onClick={() => setOpen(false)}>취소</button>
              <button className="btn btn-primary" onClick={() => { setOpen(false); showToast('인증글이 검수 대기열에 올라갔습니다. 30분 내 노출됩니다.'); }}>검수 요청</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

// ───────────────────────────────────────────────────────────
// 칼럼
// ───────────────────────────────────────────────────────────
function ColumnsPage({ data }) {
  const cats = ['전체', '기초', '실전', '멘탈', '세금', '부동산'];
  const [cat, setCat] = React.useState('전체');
  const list = cat === '전체' ? data.columns : data.columns.filter(c => c.tag === cat);
  return (
    <div className="page">
      <div className="section-head" style={{marginTop:0}}>
        <h2>칼럼 · 제이씨드가 직접 씁니다</h2>
      </div>
      <div style={{display:'flex', gap:8, flexWrap:'wrap', marginBottom:20}}>
        {cats.map(c => (
          <button key={c} onClick={() => setCat(c)} className={'btn ' + (cat === c ? 'btn-dark' : 'btn-ghost')} style={{padding:'8px 16px', fontSize:13}}>
            {c}
          </button>
        ))}
      </div>
      <div style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:16}}>
        {list.map((c, i) => (
          <div key={i} className="column-card">
            <span className="column-tag">{c.tag}</span>
            <div className="column-title">{c.title}</div>
            <div className="column-excerpt">{c.excerpt}</div>
            <div className="column-meta">
              <span>🖊 {c.au}</span>
              <span>📅 {c.date}</span>
              <span>⏱ {c.read}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────
// 푸터
// ───────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div>
          <div className="footer-brand">
            <div className="logo-mark">J</div>
            제이씨드
          </div>
          <p className="footer-desc">월급쟁이가 투자자가 되는 재테크 베이스캠프. 매주 화·목 저녁 9시, 라이브로 만나요.</p>
          <div style={{display:'flex', gap:8, marginTop:16}}>
            <a href="https://www.youtube.com/@jayseed" target="_blank" rel="noopener noreferrer" style={{background:'#FF0000', color:'#fff', padding:'6px 12px', borderRadius:8, fontWeight:700, fontSize:12}}>YouTube</a>
            <a style={{background:'var(--t-700)', color:'#fff', padding:'6px 12px', borderRadius:8, fontWeight:700, fontSize:12}}>Instagram</a>
            <a style={{background:'#FEE500', color:'#000', padding:'6px 12px', borderRadius:8, fontWeight:700, fontSize:12}}>카카오채널</a>
          </div>
        </div>
        <div className="footer-col">
          <h4>서비스</h4>
          <a>클래스 10강</a><a>포트폴리오 공개</a><a>커뮤니티</a><a>제이씨드 칼럼</a>
        </div>
        <div className="footer-col">
          <h4>회사</h4>
          <a>채널 소개</a><a>제휴·광고 문의</a><a>공지사항</a><a>이용약관</a>
        </div>
        <div className="footer-col">
          <h4>고객지원</h4>
          <a>1:1 문의</a><a>자주 묻는 질문</a><a>환불 규정</a><a>법적 고지</a>
        </div>
      </div>
      <div className="footer-bottom">
        <div style={{flex:1}}>
          © 2026 기본이노베이션 · 브랜드 제이씨드 · 사업자 정보 확인 중
          <div style={{marginTop:14, padding:'14px 16px', background:'#fff', border:'1px solid var(--t-50)', borderRadius:10, lineHeight:1.7, color:'var(--t-500)', fontSize:11.5}}>
            <b style={{color:'var(--t-900)'}}>⚠ 법적 고지</b><br/>
            본 사이트에서 제공되는 모든 정보는 <b>투자 판단의 참고자료</b>로, 원금 손실이 발생할 수 있으며 그 손실은 투자자에게 귀속됩니다.<br/>
            금융당국의 규제를 최우선으로 준수하며, 모든 제공 콘텐츠는 사용자의 투자 관련 이해를 돕기 위한 <b>교육 목적</b>으로만 제공됩니다.<br/>
            강의와 수업자료는 <b>학습 참고용</b>이며, 어떠한 경우에도 수강생의 투자 결과에 대한 법적 책임 소재의 증빙 자료로 사용될 수 없습니다.
          </div>
        </div>
        <div style={{whiteSpace:'nowrap', alignSelf:'flex-start', fontFamily:'var(--font-mono)'}}>ver 1.0.0 · 2025.11 launch</div>
      </div>
    </footer>
  );
}

Object.assign(window, { TopBar, HomePage, ClassPage, PortfolioPage, CommunityPage, ColumnsPage, Footer, fmt, fmtKRW, chgClass, chgSign });