// 03 Concept × Fields — HOW (専門知×日常) on top + 5 FIELDS below
function DC() {
  return (
    <section className="s" id="dc">
      <div className="sect-mark reveal" style={{ marginBottom: 56 }}>
        <span>03 / Concept × Fields</span><span className="bar" /><span>Main</span>
      </div>

      {/* === Top: HOW — 専門知 × 日常 === */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
        <div className="reveal">
          <div className="hd" style={{ fontSize: 'clamp(24px, 2.8vw, 40px)', fontWeight: 700, lineHeight: 1.3 }}>
            専門知と日常のあいだに、<br />デザインを置く。
          </div>
          <div style={{ marginTop: 32, fontSize: 16, lineHeight: 2.0, color: 'var(--ink-soft)', maxWidth: 480 }}>
            専門知（Professional）と暮らしのなかの実践知（Everyday）。<br /><br />
            設計者の意図と、使い手のリアル。<br />
            組織のロジックと、現場の温度感。<br />
            災害対応のプロトコルと、暮らしのリズム。<br /><br />
            ふたつの円が重なる場所に、わたしたちの仕事はあります。<br />
            場を設計し、対話を編集し、日常のなかに新しい習慣を織り込む。
          </div>
          <div style={{ marginTop: 40 }}>
            <a href="concept/" className="cta ghost hot">わたしたちが向かう場所をくわしく見る</a>
          </div>
        </div>

        <div className="reveal delay-2">
          <ConceptDiagramOverlap />
        </div>
      </div>

      {/* === Bottom: 5 FIELDS === */}
      <div className="reveal delay-3" id="fields" style={{ marginTop: 140, paddingTop: 56, borderTop: '0.5px solid var(--rule-soft)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 24 }}>
          <div className="hd serif" style={{ fontSize: 28, letterSpacing: '0.06em' }}>5つのFIELDS</div>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 11, color: 'var(--ink-faint)', letterSpacing: '0.12em' }}>
            FIELDS — 05
          </div>
        </div>
        <div style={{ marginBottom: 56, fontSize: 15, lineHeight: 2.0, color: 'var(--ink-soft)', maxWidth: 720 }}>
          これまでの探究を土台に、CONENとしてこれから取り組んでいく5つの領域です。
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0, borderTop: '0.5px solid var(--rule)' }}>
          {[
          { n: '01', jp: 'デザインで伴走する、', t: 'ブランドとプロダクト', desc: '事業会社・スタートアップ・公共領域のチームと伴走し、プロダクトのUI/UX、ブランドのトーン設計、Webサイトや読み物の編集デザインを手がけます。表層の見た目だけでなく、使い手と長く続く関係性まで含めて設計するのが、わたしたちのスタイルです。', soon: false },
          { n: '02', jp: 'まなびをひらく、', t: 'まなびとキャリアのデザイン', desc: '学校・教育機関・事業会社のチームと協働し、まなび手が主役になれる教材・プロダクト・キャリア体験をデザインします。「教えられる」から「ひらかれる」へ。まなび手のまわりに、選択肢と関係性を増やしていく仕事です。', soon: true },
          { n: '03', jp: '暮らしに織り込む、', t: '続けられるそなえ', desc: '備蓄食を「贈る」かたちに置き換えたサービス（SOUBI／贈備）や、全国の名産品を備蓄文化として贈り合う「ごとうち贈備食」など、始めるきっかけと続ける仕組みの両方をデザインし、防災を生活の予定の中に置き直します。', soon: true },
          { n: '04', jp: '地域でひらく、', t: '防災ワークショップ', desc: '住民・自治体・地域団体と対話を重ね、土地の文脈に即した場を設計・ファシリテート。専門知を住民の言葉に翻訳し、共助の関係性が育つきっかけをつくります。', soon: false },
          { n: '05', jp: '共に育てる、', t: '子どもと地域の防災教育', desc: '学校・地域と連携し、子ども自身が主役になるワークショップを実施。地域で子どもを育てる感覚を、防災教育を入り口にして都市にも広げていきます。', soon: true }].
          map(({ n, jp, t, desc, soon }, i, arr) =>
          <div key={n} style={{
            position: 'relative',
            padding: '32px 24px',
            borderRight: i < arr.length - 1 ? '0.5px solid var(--rule-soft)' : 'none',
            borderBottom: '0.5px solid var(--rule)',
            background: soon ? 'rgba(26,26,26,0.02)' : 'transparent',
            opacity: soon ? 0.78 : 1
          }}>
              {soon &&
              <div style={{
                position: 'absolute', top: 16, right: 16,
                fontFamily: 'var(--mono)', fontSize: 9, letterSpacing: '0.16em',
                color: 'var(--ink-faint)', textTransform: 'uppercase',
                border: '0.5px solid var(--rule)', padding: '3px 7px', borderRadius: 999
              }}>
                  Coming Soon
                </div>
              }
              <div style={{ fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--ink-faint)', letterSpacing: '0.16em' }}>{n}</div>
              <div style={{ marginTop: 24, fontSize: 13, color: 'var(--ink-soft)' }}>{jp}</div>
              <div style={{ marginTop: 6, fontFamily: 'var(--serif)', fontSize: 17, fontWeight: 500, lineHeight: 1.6 }}>{t}</div>
              <div style={{ marginTop: 16, fontSize: 12, lineHeight: 1.85, color: 'var(--ink-soft)' }}>{desc}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// 専門知 × CONEN × 日常 ベン図（旧版から復活）
function ConceptDiagramOverlap() {
  return (
    <div style={{ position: 'relative', width: '100%', aspectRatio: '5/4' }}>
      <svg viewBox="0 0 500 400" width="100%" height="100%">
        <defs>
          <radialGradient id="gDC" cx="50%" cy="50%" r="50%">
            <stop offset="0%" stopColor="rgba(26,26,26,0.04)" />
            <stop offset="100%" stopColor="rgba(26,26,26,0)" />
          </radialGradient>
        </defs>
        <circle cx="180" cy="200" r="140" fill="url(#gDC)" stroke="rgba(26,26,26,0.4)" strokeWidth="0.5" strokeDasharray="3 4" />
        <circle cx="320" cy="200" r="140" fill="url(#gDC)" stroke="rgba(26,26,26,0.4)" strokeWidth="0.5" strokeDasharray="3 4" />
        <circle cx="250" cy="200" r="58" fill="none" stroke="var(--terra)" strokeWidth="0.7" />
        <text x="100" y="200" fontFamily="var(--serif)" fontSize="20" fill="var(--ink)" textAnchor="middle">専門知</text>
        <text x="400" y="200" fontFamily="var(--serif)" fontSize="20" fill="var(--ink)" textAnchor="middle">日常</text>
        <text x="250" y="206" fontFamily="var(--serif)" fontSize="15" fill="var(--terra)" textAnchor="middle" letterSpacing="0.1em">CONEN</text>
        <line x1="60" y1="60" x2="120" y2="130" stroke="rgba(26,26,26,0.3)" strokeWidth="0.5" />
        <line x1="440" y1="60" x2="380" y2="130" stroke="rgba(26,26,26,0.3)" strokeWidth="0.5" />
        <text x="60" y="48" fontFamily="var(--mono)" fontSize="10" fill="var(--ink-soft)" letterSpacing="1.5">PROFESSIONAL</text>
        <text x="440" y="48" fontFamily="var(--mono)" fontSize="10" fill="var(--ink-soft)" letterSpacing="1.5" textAnchor="end">EVERYDAY</text>
        <line x1="250" y1="270" x2="250" y2="330" stroke="var(--terra)" strokeWidth="0.5" />
        <text x="250" y="350" fontFamily="var(--mono)" fontSize="10" fill="var(--terra)" textAnchor="middle" letterSpacing="1.5">DESIGN THE OVERLAP</text>
      </svg>
    </div>);

}
window.DC = DC;
