/* global React, useLang */
// Works — design / planning / dev work pieces (smaller than full project mockups)

const { useState: useStateW, useEffect: useEffectW, useRef: useRefW } = React;

function useRevealW(threshold = 0.12) {
  const ref = useRefW(null);
  const [seen, setSeen] = useStateW(false);
  useEffectW(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(
      (entries) => entries.forEach(e => { if (e.isIntersecting) { setSeen(true); io.disconnect(); } }),
      { threshold }
    );
    io.observe(ref.current);
    return () => io.disconnect();
  }, [threshold]);
  return [ref, seen];
}

/* ============================================================
   WORK VISUALS — 10 unique compositions
   ============================================================ */

/* ---------- DESIGN 1: 상세페이지 ---------- */
function WkDetail() {
  return (
    <div className="wk wk-detail">
      <div className="wk-detail-bar">
        <span className="logo">NATURAL</span>
        <span className="bag">BAG · 0</span>
      </div>
      <div className="wk-detail-hero">
        <span className="badge">NEW · 신상품</span>
        <strong>HYDRATING<br/>SERUM</strong>
        <em>피부 깊은 곳까지<br/>14일 집중 보습</em>
      </div>
      <div className="wk-detail-stats">
        <div><strong>98%</strong><span>수분감</span></div>
        <div><strong>72h</strong><span>지속력</span></div>
        <div><strong>0</strong><span>색소·향료</span></div>
      </div>
      <div className="wk-detail-grid">
        <div className="g1"></div>
        <div className="g2"></div>
        <div className="g3"></div>
        <div className="g4"></div>
      </div>
      <div className="wk-detail-cta">SHOP NOW · ₩49,000</div>
    </div>
  );
}

/* ---------- DESIGN 2: 브랜드 시스템 ---------- */
function WkBrandSystem() {
  return (
    <div className="wk wk-brand-sys">
      <div className="wk-bs-q wk-bs-logo">
        <div className="wk-bs-lbl">LOGO</div>
        <div className="wk-bs-mark">
          <span className="dot"></span>
          <strong>chamomile</strong>
        </div>
      </div>
      <div className="wk-bs-q wk-bs-pal">
        <div className="wk-bs-lbl">PALETTE</div>
        <div className="wk-bs-swatches">
          <span style={{ background: '#3F5544' }}></span>
          <span style={{ background: '#D4B98A' }}></span>
          <span style={{ background: '#F4ECD8' }}></span>
          <span style={{ background: '#2A1F15' }}></span>
        </div>
      </div>
      <div className="wk-bs-q wk-bs-type">
        <div className="wk-bs-lbl">TYPE</div>
        <div className="wk-bs-aa">Aa</div>
        <div className="wk-bs-fontname">Cormorant Garamond</div>
      </div>
      <div className="wk-bs-q wk-bs-mark2">
        <div className="wk-bs-lbl">MARK</div>
        <div className="wk-bs-marks">
          <div className="m1">CG</div>
          <div className="m2">★</div>
          <div className="m3">∞</div>
        </div>
      </div>
    </div>
  );
}

/* ---------- DESIGN 3: 로고 모음 ---------- */
function WkLogos() {
  const logos = [
    { mark: '◐', name: 'MOON', tag: 'CAFE' },
    { mark: '✦', name: 'STELLA', tag: 'STUDIO' },
    { mark: '◇', name: 'PRISM', tag: 'TECH' },
    { mark: '♥', name: 'PETIT', tag: 'BAKERY' },
    { mark: '⬢', name: 'HEXA', tag: 'AGENCY' },
    { mark: '∞', name: 'LOOP', tag: 'MEDIA' },
  ];
  return (
    <div className="wk wk-logos">
      {logos.map((l, i) => (
        <div key={i} className={`wk-logo-cell c${i}`}>
          <div className="wk-logo-mark">{l.mark}</div>
          <div className="wk-logo-name">{l.name}</div>
          <div className="wk-logo-tag">{l.tag}</div>
        </div>
      ))}
    </div>
  );
}

/* ---------- DESIGN 4: UI 키트 ---------- */
function WkUiKit() {
  return (
    <div className="wk wk-ui">
      <div className="wk-ui-row">
        <div className="wk-ui-lbl">BUTTONS</div>
        <div className="wk-ui-btns">
          <button className="b1">Primary</button>
          <button className="b2">Secondary</button>
          <button className="b3">Ghost</button>
        </div>
      </div>
      <div className="wk-ui-row">
        <div className="wk-ui-lbl">INPUT</div>
        <div className="wk-ui-input">
          <span>your@email.com</span>
          <span className="caret"></span>
        </div>
      </div>
      <div className="wk-ui-row">
        <div className="wk-ui-lbl">CARD</div>
        <div className="wk-ui-card">
          <div className="wk-ui-card-img"></div>
          <div className="wk-ui-card-body">
            <strong>Card Title</strong>
            <span>Lorem ipsum dolor sit amet</span>
          </div>
        </div>
      </div>
      <div className="wk-ui-row">
        <div className="wk-ui-lbl">ICONS</div>
        <div className="wk-ui-icons">
          {['◯','□','△','◇','★','✦','♡','+'].map((i, k) => <span key={k}>{i}</span>)}
        </div>
      </div>
    </div>
  );
}

/* ---------- DESIGN 5: 인포그래픽 ---------- */
function WkInfo() {
  return (
    <div className="wk wk-info">
      <div className="wk-info-top">
        <span className="wk-info-tag">2024 ESG REPORT</span>
        <strong className="wk-info-big">37%↓</strong>
        <span className="wk-info-sub">전년 대비 탄소 배출량 감축</span>
      </div>
      <div className="wk-info-grid">
        <div className="wk-info-donut">
          <svg viewBox="0 0 100 100">
            <circle cx="50" cy="50" r="40" fill="none" stroke="#E5DDD0" strokeWidth="14"/>
            <circle cx="50" cy="50" r="40" fill="none" stroke="#3F5544" strokeWidth="14"
              strokeDasharray="251" strokeDashoffset="65" transform="rotate(-90 50 50)" strokeLinecap="round" />
          </svg>
          <div className="wk-info-donut-c">
            <strong>74%</strong><span>재활용 자재</span>
          </div>
        </div>
        <div className="wk-info-bars">
          <div className="wk-info-bar"><span>2022</span><div><div style={{ width: '95%' }}></div></div><strong>1.4k</strong></div>
          <div className="wk-info-bar"><span>2023</span><div><div style={{ width: '72%' }}></div></div><strong>1.0k</strong></div>
          <div className="wk-info-bar"><span>2024</span><div><div style={{ width: '50%' }} className="hi"></div></div><strong>0.7k</strong></div>
        </div>
      </div>
      <div className="wk-info-icons">
        <div><span className="ic">🌱</span><strong>+1,240</strong><em>나무 심기</em></div>
        <div><span className="ic">💧</span><strong>-42%</strong><em>물 사용</em></div>
        <div><span className="ic">♻️</span><strong>98%</strong><em>재포장</em></div>
      </div>
    </div>
  );
}

/* ---------- DESIGN 6: 패키지 + 명함 ---------- */
function WkPrint() {
  return (
    <div className="wk wk-print">
      <div className="wk-print-box">
        <div className="wk-print-box-top"></div>
        <div className="wk-print-box-front">
          <div className="wk-print-box-logo">○ chamomile</div>
          <div className="wk-print-box-name">NIGHT SERUM</div>
          <div className="wk-print-box-vol">30ml</div>
        </div>
        <div className="wk-print-box-side"></div>
      </div>
      <div className="wk-print-cards">
        <div className="wk-print-card c1">
          <div className="cn">박지오</div>
          <div className="cr">Director</div>
          <div className="ci">jio@chamomile.kr</div>
        </div>
        <div className="wk-print-card c2">
          <div className="logo">○ chamomile</div>
        </div>
        <div className="wk-print-card c3"></div>
      </div>
      <div className="wk-print-tag">
        <span>○</span>
        <strong>HANDMADE</strong>
        <em>seoul, kr</em>
      </div>
    </div>
  );
}

/* ---------- PLANNING 1: 와이어프레임 ---------- */
function WkWireframe() {
  return (
    <div className="wk wk-wire">
      {[
        ['로그인', ['▭ Email', '▭ Password', '■ 계속']],
        ['홈', ['── ── ──', '▭▭▭▭', '▭▭ ▭▭']],
        ['상세', ['▭▭▭▭▭', '── ──', '── ──', '■ 구매']],
        ['완료', ['◯ Done', '── ──', '── ──']],
      ].map(([t, lines], i) => (
        <div key={i} className="wk-wire-frame">
          <div className="wk-wire-bar"><span></span><span></span><span></span></div>
          <div className="wk-wire-screen">
            <div className="wk-wire-h">{t}</div>
            {lines.map((l, j) => <div key={j} className="wk-wire-line">{l}</div>)}
          </div>
          <div className="wk-wire-label">0{i+1}</div>
          {i < 3 && <div className="wk-wire-arrow">→</div>}
        </div>
      ))}
    </div>
  );
}

/* ---------- PLANNING 2: IA / 사이트맵 ---------- */
function WkIA() {
  return (
    <div className="wk wk-ia">
      <div className="wk-ia-tree">
        <div className="wk-ia-root">홈</div>
        <div className="wk-ia-line"></div>
        <div className="wk-ia-row">
          {['서비스', '요금제', '고객사례', '리소스'].map((t, i) => (
            <div key={i} className="wk-ia-col">
              <div className={`wk-ia-node n${i}`}>{t}</div>
              <div className="wk-ia-sub">
                {['기능 A', '기능 B', '기능 C'].slice(0, 2 + (i % 2)).map((s, j) => (
                  <div key={j} className="wk-ia-leaf">{s}</div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
      <div className="wk-ia-meta">
        <span>v2.4</span>
        <span>·</span>
        <span>32 페이지</span>
        <span>·</span>
        <span>4 depth</span>
      </div>
    </div>
  );
}

/* ---------- DEV 1: 컴포넌트 라이브러리 ---------- */
function WkComponents() {
  return (
    <div className="wk wk-code">
      <div className="wk-code-top">
        <div className="wk-code-dots">
          <span></span><span></span><span></span>
        </div>
        <div className="wk-code-tabs">
          <span className="on">Button.tsx</span>
          <span>Card.tsx</span>
          <span>+</span>
        </div>
      </div>
      <div className="wk-code-body">
        <div className="wk-code-ln"><b>1</b><i className="kw">export</i> <i className="kw">function</i> <i className="fn">Button</i>(<i className="prop">{'{ children, variant }'}</i>) {'{'}</div>
        <div className="wk-code-ln"><b>2</b>  <i className="kw">return</i> (</div>
        <div className="wk-code-ln"><b>3</b>    {'<'}<i className="tag">button</i></div>
        <div className="wk-code-ln"><b>4</b>      <i className="prop">className</i>={'{`btn-${'}<i className="str">variant</i>{'}`}'}</div>
        <div className="wk-code-ln"><b>5</b>    {'>'}</div>
        <div className="wk-code-ln"><b>6</b>      {'{'}<i className="str">children</i>{'}'}</div>
        <div className="wk-code-ln"><b>7</b>    {'</'}<i className="tag">button</i>{'>'}</div>
        <div className="wk-code-ln"><b>8</b>  );</div>
        <div className="wk-code-ln"><b>9</b>{'}'}</div>
      </div>
      <div className="wk-code-foot">
        <span>● 42 components</span>
        <span>● 100% typed</span>
        <span>● Storybook</span>
      </div>
    </div>
  );
}



/* ============================================================
   WORKS DATA + Section component
   ============================================================ */

const WORKS = [
  { id: 'detail', cat: 'design', tag: 'Detail Page',
    title: '내츄럴 세럼 상세페이지', titleEn: 'Natural Serum Detail Page', titleJa: 'ナチュラルセラム 詳細ページ',
    desc: '스킨케어 신제품 출시 페이지. 7개 섹션, 모바일 우선 설계.', descEn: 'Skincare product launch page. 7 sections, mobile-first design.', descJa: 'スキンケア新商品ページ。7セクション、モバイルファースト設計。', Component: WkDetail },
  { id: 'brandsys', cat: 'design', tag: 'Brand System',
    title: '카모마일 브랜드 시스템', titleEn: 'Chamomile Brand System', titleJa: 'カモミール ブランドシステム',
    desc: '로고·컬러·타이포·마크까지 풀 브랜딩 시스템 설계.', descEn: 'Full branding system: logo, color, typography, and mark.', descJa: 'ロゴ・カラー・タイポ・マークを含む完全なブランディングシステム設計。', Component: WkBrandSystem },
  { id: 'logos', cat: 'design', tag: 'Logo',
    title: '로고 디자인 모음 (2024–25)', titleEn: 'Logo Collection (2024–25)', titleJa: 'ロゴデザインまとめ（2024–25）',
    desc: '카페·스튜디오·테크·베이커리 등 6개 브랜드 로고 아카이브.', descEn: 'Logo archive for 6 brands: café, studio, tech, bakery, and more.', descJa: 'カフェ・スタジオ・テック・ベーカリーなど6ブランドのロゴアーカイブ。', Component: WkLogos },
  { id: 'uikit', cat: 'design', tag: 'UI Kit',
    title: '모바일 UI 키트', titleEn: 'Mobile UI Kit', titleJa: 'モバイル UIキット',
    desc: '프로젝트 시작에 쓰는 자체 디자인 시스템. 100+ 컴포넌트.', descEn: 'In-house design system for project kickoffs. 100+ components.', descJa: 'プロジェクト開始時に使う自社デザインシステム。100+コンポーネント。', Component: WkUiKit },
  { id: 'info', cat: 'design', tag: 'Infographic',
    title: 'ESG 리포트 인포그래픽', titleEn: 'ESG Report Infographic', titleJa: 'ESGレポート インフォグラフィック',
    desc: '친환경 브랜드 연간 리포트. 한 페이지 인쇄용 디자인.', descEn: 'Annual eco-brand report. One-page print layout.', descJa: 'エコブランドの年次レポート。1ページ印刷用デザイン。', Component: WkInfo },
  { id: 'print', cat: 'design', tag: 'Print',
    title: '패키지 + 명함 디자인', titleEn: 'Package + Business Card Design', titleJa: 'パッケージ＋名刺デザイン',
    desc: '스킨케어 브랜드의 인쇄물 일체. 패키지·명함·태그.', descEn: 'Full print suite for a skincare brand. Box, card, and tag.', descJa: 'スキンケアブランドの印刷物一式。パッケージ・名刺・タグ。', Component: WkPrint },
  { id: 'wire', cat: 'planning', tag: 'Wireframe',
    title: '서비스 흐름 와이어프레임', titleEn: 'Service Flow Wireframe', titleJa: 'サービスフロー ワイヤーフレーム',
    desc: '주요 4단계 사용자 흐름을 와이어프레임으로 설계.', descEn: 'User flow wireframes for 4 key stages.', descJa: '主要4ステップのユーザーフローをワイヤーフレームで設計。', Component: WkWireframe },
  { id: 'ia', cat: 'planning', tag: 'IA / Sitemap',
    title: 'SaaS 정보 구조도', titleEn: 'SaaS Information Architecture', titleJa: 'SaaS情報アーキテクチャ',
    desc: '대형 SaaS의 전체 사이트맵과 IA를 한 장으로 정리.', descEn: 'Full sitemap and IA for a large SaaS product, in one chart.', descJa: '大型SaaSの全サイトマップとIAを1枚に整理。', Component: WkIA },
  { id: 'cmp', cat: 'dev', tag: 'Component Library',
    title: '리액트 컴포넌트 라이브러리', titleEn: 'React Component Library', titleJa: 'Reactコンポーネントライブラリ',
    desc: '자체 디자인 시스템을 코드로. 40+ 타입 안전 컴포넌트.', descEn: 'Design system in code. 40+ type-safe components.', descJa: '自社デザインシステムをコード化。40+型安全コンポーネント。', Component: WkComponents },
];

function WorksSection() {
  const [cat, setCat] = useStateW('all');
  const [ref, seen] = useRevealW();
  const { lang, t } = useLang();

  const getTitle = (w) => lang === 'ko' ? w.title : lang === 'ja' ? w.titleJa : w.titleEn;
  const getDesc = (w) => lang === 'ko' ? w.desc : lang === 'ja' ? w.descJa : w.descEn;

  const cats = [
    { id: 'all', label: t('works_all') },
    { id: 'design', label: t('works_design') },
    { id: 'planning', label: t('works_plan') },
    { id: 'dev', label: t('works_dev') },
  ];
  const filtered = cat === 'all' ? WORKS : WORKS.filter(w => w.cat === cat);
  return (
    <div ref={ref} className={`works-block ${seen ? 'in' : ''}`}>
      <div className="works-head">
        <span className="eyebrow"><span className="eyebrow-dot"></span>{t('works_eyebrow')}</span>
        <h3>{t('works_heading')}</h3>
        <p className="works-sub">{t('works_sub')}</p>
        <div className="works-cats">
          {cats.map(c => (
            <button
              key={c.id}
              className={`works-cat ${cat === c.id ? 'on' : ''}`}
              onClick={() => setCat(c.id)}
            >{c.label}</button>
          ))}
        </div>
      </div>
      <div className={`works-grid works-grid--${cat}`}>
        {filtered.map(w => (
          <div key={w.id} className={`work-card work-cat-${w.cat}`}>
            <div className="work-thumb">
              <w.Component />
            </div>
            <div className="work-meta">
              <span className="work-tag">{w.tag}</span>
              <h4 className="work-title">{getTitle(w)}</h4>
              <p className="work-desc">{getDesc(w)}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { WorksSection, WORKS });