const WORKS = [
  { num: "W-01", year: "2026", title: "土地家屋調査士事務所", desc: "境界確定・登記業務の事務所サイト。地域に根ざした事業内容を、信頼感のある縦書きで。", tags: ["士業", "Corporate"], accent: "#1731D9", img: "works/nakata-chosashi.png" },
  { num: "W-02", year: "2026", title: "社会保険労務士事務所", desc: "「会社を支えるのは、いつも『人』です。」をキャッチに、顧問先候補に届く落ち着いた構成。", tags: ["士業", "Corporate"], accent: "#1F2937", img: "works/matsumura-sharoshi.png" },
  { num: "W-03", year: "2026", title: "不動産（住宅売買）", desc: "「ここから先の暮らしを、家族と一緒に。」温かみのある木と和紙のトーン。", tags: ["不動産", "B2C"], accent: "#92400E", img: "works/mirai-fudosan.png" },
  { num: "W-04", year: "2026", title: "自動車整備・板金塗装", desc: "「車のことなら、ここへ。」黒×赤のメカニカルな質感で頼れる印象に。", tags: ["整備工場", "B2C"], accent: "#0F0F0F", img: "works/sinei-motors.png" },
  { num: "W-05", year: "2026", title: "プラスチック製品 製造（BtoB）", desc: "設計図風の図面トーン。技術力と対応力を、図面・寸法表記でストレートに。", tags: ["製造業", "BtoB"], accent: "#0E4A8A", img: "works/nara-kasei.png" },
  { num: "W-06", year: "2026", title: "奈良漬・佃煮 専門店", desc: "「百年の伝統、今日のごちそうに。」奈良町の風情を茶金と明朝で表現。", tags: ["食品", "老舗"], accent: "#8B6914", img: "works/ashibinosato.png" },
  { num: "W-07", year: "2026", title: "イベント企画", desc: "「感動を、企画する。」マゼンタ×ピンクのドラマチックなビジュアル構成。", tags: ["サービス業", "B2B"], accent: "#C2185B", img: "works/honpo-event.png" },
  { num: "W-08", year: "2026", title: "地酒・酒蔵", desc: "深藍×額縁の酒ラベル風意匠。創業の重みを、控えめなコピーで伝える。", tags: ["酒類", "老舗"], accent: "#1A2B5C", img: "works/nara-toyosawa-demo.png" },
  { num: "W-09", year: "2026", title: "老舗食料品店", desc: "紫×藤、麻の葉柄をあしらった和の趣。観光客にも届く明朝デザイン。", tags: ["食品", "老舗"], accent: "#6D28D9", img: "works/satouden.png" },
  { num: "W-10", year: "2026", title: "米と地酒の販売店", desc: "「奈良の一粒、一杯を、あなたの食卓へ。」乳白×藍の落ち着いた老舗風。", tags: ["食品", "老舗"], accent: "#1B3A6B", img: "works/hikariya-yonesake.png" },
];

function WorkThumb({ work }) {
  const seed = work.num.charCodeAt(2) + work.num.charCodeAt(4);
  // build a small unique abstract composition per work
  return (
    <svg viewBox="0 0 400 300" preserveAspectRatio="xMidYMid slice">
      <rect width="400" height="300" fill={work.accent} opacity="0.04" />
      {/* grid */}
      {Array.from({length: 12}).map((_, i) => (
        <line key={i} x1={i*33.3} y1="0" x2={i*33.3} y2="300"
              stroke={work.accent} strokeOpacity="0.06" />
      ))}
      {/* shape composition */}
      <g transform={`translate(${60 + (seed%3)*20}, ${80 + (seed%2)*20})`}>
        <rect width="220" height="140" fill={work.accent} opacity="0.18" />
        <rect x="40" y="40" width="220" height="140" fill={work.accent} />
        <circle cx="240" cy="40" r="36" fill={work.accent} opacity="0.32" />
        <line x1="0" y1="180" x2="280" y2="180" stroke={work.accent} strokeWidth="2" />
      </g>
      {/* type echo */}
      <text x="20" y="285" fontFamily="var(--font-mono)" fontSize="10"
            fill="rgba(17,17,17,0.5)" letterSpacing="1">
        {work.title}
      </text>
    </svg>
  );
}

function Works() {
  return (
    <section className="section" id="works">
      <div className="section__inner">
        <div className="section__head">
          <div className="section__index">
            <span>SECTION</span><b>/ 03</b>
          </div>
          <h2 className="section__title">
            これまでにつくらせていただいたもの。
            <span className="en">Works / Selected Projects 2024 — 2026</span>
          </h2>
        </div>

        <div className="works__grid">
          {WORKS.map((w, i) => (
            <article className="work" key={w.num}>
              <div className="work__thumb" style={{position: 'relative', overflow: 'hidden', aspectRatio: '4/3', background: w.accent}}>
                <img src={w.img} alt={w.title}
                     style={{width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'top center', filter: 'blur(2px) saturate(1.05)', transform: 'scale(1.03)'}} />
                <div style={{position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.15) 100%)'}}></div>
                <span className="label" style={{position: 'absolute', top: 12, left: 12, color: '#fff', fontSize: 10, letterSpacing: '0.15em', fontFamily: 'var(--font-mono)'}}>{String(i+1).padStart(2,'0')} / {WORKS.length.toString().padStart(2,'0')}</span>
                <span className="num" style={{position: 'absolute', bottom: 12, right: 12, color: '#fff', fontSize: 11, fontFamily: 'var(--font-mono)', letterSpacing: '0.05em'}}>{w.num}</span>
              </div>
              <div className="work__meta">
                <span>{w.year}</span>
                <span>{w.tags[0]}</span>
              </div>
              <h3>{w.title}</h3>
              <p>{w.desc}</p>
              <div className="work__tags">
                {w.tags.map(t => <span key={t}>#{t}</span>)}
              </div>
            </article>
          ))}
        </div>
        <p style={{marginTop: 32, fontSize: 13, color: 'var(--sub)', textAlign: 'center'}}>
          ※ プライバシー保護のため、デモサイトのプレビュー画像はぼかし加工をしています。
        </p>
      </div>
    </section>
  );
}

Object.assign(window, { Works });