// Works.jsx — Delvecore Website UI Kit (responsive)
const WORKS = [
  {
    category: 'Web Production — 2026',
    title: '製版会社\nコーポレートサイト',
    issue: '営業先に技術力と実績を十分に伝えられず、更新作業も担当者依存になっていました。',
    action: '情報構成を再設計し、CMS運用しやすい導線を設計しました。実績掲載と問い合わせ導線を優先して再配置しています。',
    result: '更新負荷を下げながら、商談化につながる導線を可視化しました。',
    leadTime: '8週間',
    scope: '情報設計 / UI設計 / フロント実装 / CMS構築',
    tech: 'HTML / CSS / JavaScript / microCMS',
    tags: ['Web制作', 'BtoB', '製造業', 'コーポレートサイト'],
    visual: 'wireframe',
  },
  {
    category: 'Tool Development — 2026',
    title: '配送ルート\n重複可視化ツール',
    issue: '複数ドライバーのルート重複を手動確認しており、見直し判断に時間がかかっていました。',
    action: '地図上に複数ルートを重ね、重複区間を色分け表示する試作ツールを開発しました。確認観点をひと目で揃えられるUIにしています。',
    result: '見直し対象を短時間で特定できる状態を作り、手動確認工数の削減につなげました。',
    leadTime: '5週間',
    scope: '要件整理 / 可視化設計 / プロトタイプ開発 / 検証支援',
    tech: 'Google Maps API / JavaScript / Node.js',
    tags: ['Google Maps API', 'JavaScript', '物流・配送', '可視化ツール'],
    visual: 'route',
    reverse: true,
  },
];

function WireframeVisual() {
  return (
    <div style={{ width: '100%', height: '100%', padding: '28px 24px', display: 'flex', flexDirection: 'column', gap: 16, background: '#EEECEA', border: '1px solid #E0DFD8' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingBottom: 12, borderBottom: '1px solid rgba(0,0,0,0.1)' }}>
        <div style={{ height: 6, width: '30%', borderRadius: 2, background: 'rgba(0,0,0,0.15)' }} />
        <div style={{ display: 'flex', gap: 6 }}>
          {[0, 1, 2].map(i => <span key={i} style={{ width: 5, height: 5, borderRadius: '50%', background: 'rgba(0,0,0,0.2)', display: 'block' }} />)}
        </div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
        <div style={{ height: 14, width: '60%', background: 'rgba(0,0,0,0.25)', borderRadius: 2 }} />
        <div style={{ height: 6, width: '44%', background: 'rgba(0,0,0,0.15)', borderRadius: 2 }} />
        <div style={{ height: 6, width: '28%', background: 'rgba(0,0,0,0.15)', borderRadius: 2 }} />
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 10, marginTop: 4 }}>
        {[0, 1, 2].map(i => (
          <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
            <div style={{ width: '100%', aspectRatio: '4/3', background: 'rgba(0,0,0,0.08)', border: '1px solid rgba(0,0,0,0.1)' }} />
            <div style={{ height: 5, width: '80%', background: 'rgba(0,0,0,0.1)', borderRadius: 2 }} />
          </div>
        ))}
      </div>
    </div>
  );
}

function RouteVisual() {
  return (
    <svg viewBox="0 0 400 300" style={{ width: '100%', height: '100%', display: 'block', background: '#EEECEA', border: '1px solid #E0DFD8' }} xmlns="http://www.w3.org/2000/svg">
      {[[60], [120], [180], [240]].map(([y], i) => <line key={i} x1="0" y1={y} x2="400" y2={y} stroke="rgba(0,0,0,0.07)" strokeWidth="1" />)}
      {[[80], [160], [240], [320]].map(([x], i) => <line key={i} x1={x} y1="0" x2={x} y2="300" stroke="rgba(0,0,0,0.07)" strokeWidth="1" />)}
      <polyline points="40,260 100,180 160,200 220,120 300,80 360,40" fill="none" stroke="rgba(0,0,0,0.2)" strokeWidth="1.5" strokeDasharray="4,3" />
      <polyline points="40,260 100,180 160,200 200,240 280,180 360,160" fill="none" stroke="rgba(0,0,0,0.2)" strokeWidth="1.5" strokeDasharray="4,3" />
      <polyline points="40,260 100,180 160,200" fill="none" stroke="rgba(0,0,0,0.75)" strokeWidth="2.5" />
      {[[40, 260, 4, 'rgba(0,0,0,0.7)'], [100, 180, 3, 'rgba(0,0,0,0.4)'], [160, 200, 4, 'rgba(0,0,0,0.7)'], [360, 40, 4, 'rgba(0,0,0,0.5)'], [360, 160, 4, 'rgba(0,0,0,0.5)']].map(([cx, cy, r, fill], i) => <circle key={i} cx={cx} cy={cy} r={r} fill={fill} />)}
      <line x1="24" y1="24" x2="44" y2="24" stroke="rgba(0,0,0,0.7)" strokeWidth="2.5" />
      <text x="50" y="28" fill="rgba(0,0,0,0.4)" fontSize="9" fontFamily="DM Sans, sans-serif" letterSpacing="1">OVERLAP</text>
    </svg>
  );
}

window.Works = function Works() {
  const mobile = useIsMobile();
  return (
    <section id="works" style={{ padding: mobile ? '80px 24px' : '120px 48px' }}>
      <SectionHeader num="02" title="Works" ja="実績" />
      <div style={{ marginTop: 24, display: 'flex', flexWrap: 'wrap', gap: 10 }}>
        <span style={{ fontSize: 12, letterSpacing: '0.1em', color: '#666662', border: '1px solid #E0DFD8', padding: '8px 12px', background: '#F8F7F5' }}>掲載実績: {WORKS.length}件</span>
        <span style={{ fontSize: 12, letterSpacing: '0.1em', color: '#666662', border: '1px solid #E0DFD8', padding: '8px 12px', background: '#F8F7F5' }}>課題解決型の設計・実装</span>
      </div>

      {WORKS.map((w, i) => (
        <React.Fragment key={i}>
          <div style={{
            display: 'grid',
            gridTemplateColumns: mobile ? '1fr' : '1fr 1fr',
            gap: mobile ? 40 : 80,
            alignItems: 'center',
            direction: (!mobile && w.reverse) ? 'rtl' : 'ltr',
            marginTop: 80,
          }}>
            <div style={{ aspectRatio: '4/3', direction: 'ltr' }}>
              {w.visual === 'wireframe' ? <WireframeVisual /> : <RouteVisual />}
            </div>
            <div style={{ direction: 'ltr' }}>
              <p style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: '#888884', marginBottom: 20 }}>{w.category}</p>
              <h3 style={{ fontFamily: "'Cormorant Garamond',serif", fontSize: 'clamp(28px,3.5vw,48px)', fontWeight: 300, lineHeight: 1.25, marginBottom: 24, whiteSpace: 'pre-line' }}>{w.title}</h3>

              <div style={{ display: 'grid', gap: 10 }}>
                <div style={{ border: '1px solid #E0DFD8', padding: '12px 14px', background: '#F8F7F5' }}>
                  <p style={{ fontSize: 11, letterSpacing: '0.1em', color: '#888884' }}>課題</p>
                  <p style={{ marginTop: 6, fontSize: 14, lineHeight: 1.8, color: '#666662' }}>{w.issue}</p>
                </div>
                <div style={{ border: '1px solid #E0DFD8', padding: '12px 14px', background: '#F8F7F5' }}>
                  <p style={{ fontSize: 11, letterSpacing: '0.1em', color: '#888884' }}>対応</p>
                  <p style={{ marginTop: 6, fontSize: 14, lineHeight: 1.8, color: '#666662' }}>{w.action}</p>
                </div>
                <div style={{ border: '1px solid #D8D1C3', padding: '12px 14px', background: 'linear-gradient(90deg, #EEE4D2 0%, #F8F7F5 100%)' }}>
                  <p style={{ fontSize: 11, letterSpacing: '0.1em', color: '#6B5530' }}>結果</p>
                  <p style={{ marginTop: 6, fontSize: 14, lineHeight: 1.8, color: '#5B513D' }}>{w.result}</p>
                </div>
              </div>

              <p style={{ marginTop: 14, fontSize: 12, letterSpacing: '0.08em', color: '#888884' }}>納期: {w.leadTime}</p>
              <p style={{ marginTop: 4, fontSize: 12, letterSpacing: '0.08em', color: '#888884' }}>担当範囲: {w.scope}</p>
              <p style={{ marginTop: 4, fontSize: 12, letterSpacing: '0.08em', color: '#888884' }}>使用技術: {w.tech}</p>
              <p style={{ marginTop: 10, marginBottom: 20, fontSize: 12, color: '#888884', lineHeight: 1.7 }}>
                ※ 結果は実装時点の要件・運用体制に基づく成果です。
              </p>
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
                {w.tags.map(t => <span key={t} style={{ fontSize: 11, letterSpacing: '0.1em', padding: '6px 14px', border: '1px solid #E0DFD8', color: '#888884' }}>{t}</span>)}
              </div>
            </div>
          </div>
          {i < WORKS.length - 1 && <div style={{ height: 1, background: '#E0DFD8', margin: '80px 0' }} />}
        </React.Fragment>
      ))}
    </section>
  );
};