const ServiceIcon = ({ kind }) => {
  const stroke = "#0e2a55";
  if (kind === "consulting") {
    return (
      <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
        <circle cx="14" cy="14" r="11" stroke={stroke} strokeWidth="1.4"/>
        <path d="M5 14 L14 8 L23 14 L14 20 Z" stroke={stroke} strokeWidth="1.4" fill="none"/>
        <circle cx="14" cy="14" r="2" fill={stroke}/>
      </svg>
    );
  }
  if (kind === "doc") {
    return (
      <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
        <rect x="6" y="3" width="16" height="22" stroke={stroke} strokeWidth="1.4"/>
        <path d="M9 9 H19 M9 13 H19 M9 17 H15" stroke={stroke} strokeWidth="1.4"/>
      </svg>
    );
  }
  return (
    <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
      <rect x="3" y="5" width="22" height="16" stroke={stroke} strokeWidth="1.4"/>
      <path d="M3 10 H25" stroke={stroke} strokeWidth="1.4"/>
      <circle cx="6.5" cy="7.5" r="0.7" fill={stroke}/>
      <circle cx="9" cy="7.5" r="0.7" fill={stroke}/>
    </svg>
  );
};

const Services = () => {
  const items = [
    {
      num: "01",
      ja: "ITコンサルティング",
      en: "IT Consulting",
      kind: "consulting",
      desc: "現場の業務を丁寧にヒアリングし、IT活用の最適解を一緒に考えます。導入だけで終わらせず、運用が定着するまで伴走します。",
      bullets: ["業務の可視化と課題整理", "ツール選定・導入支援", "社内勉強会・運用定着サポート"],
    },
    {
      num: "02",
      ja: "資料制作",
      en: "Document Design",
      kind: "doc",
      desc: "情報を整理し、構造を組み直す。読み手の判断を助ける資料へ。営業資料・提案書・社内向け資料まで、目的に応じて設計します。",
      bullets: ["営業資料・提案書", "セミナー・登壇資料", "社内マニュアル・業務手順書"],
    },
    {
      num: "03",
      ja: "Web制作",
      en: "Web Production",
      kind: "web",
      desc: "見た目だけでなく、伝わる構造から設計するホームページ。既存サイトの改善・リニューアルから、新規立ち上げまで対応します。",
      bullets: ["コーポレートサイト制作", "既存ホームページの改善", "更新・運用サポート"],
    },
  ];

  return (
    <section className="section services" id="services">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Services</span>
            <h2 className="section-title">3つの<span className="accent">事業</span>。<br/>ひとつの軸。</h2>
          </div>
          <p className="section-lead">
            フジサワ企画は、ITコンサルティング・資料制作・Web制作を中心に、
            「情報を整え、伝わる形にする」ことを軸に活動しています。
            領域は分かれていても、目指すところは同じ。誠実なものづくりです。
          </p>
        </div>

        <div className="service-grid">
          {items.map((it) => (
            <div className="service-card" key={it.num}>
              <div className="num">— {it.num}</div>
              <div className="icon"><ServiceIcon kind={it.kind} /></div>
              <h3 className="ja-title">{it.ja}</h3>
              <div className="en-title">{it.en}</div>
              <p className="desc">{it.desc}</p>
              <ul>
                {it.bullets.map((b) => <li key={b}>{b}</li>)}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Services = Services;
