const Vision = () => {
  const items = [
    {
      num: "01",
      symbol: (
        <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <circle cx="32" cy="32" r="28" stroke="currentColor" strokeWidth="1.4" opacity="0.3"/>
          <path d="M14 44 L24 30 L34 38 L50 18" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
          <circle cx="50" cy="18" r="2.5" fill="currentColor"/>
          <circle cx="14" cy="44" r="2" fill="currentColor"/>
          <circle cx="24" cy="30" r="2" fill="currentColor"/>
          <circle cx="34" cy="38" r="2" fill="currentColor"/>
        </svg>
      ),
      en: "Local Vitality",
      title: "地域企業の活性化",
      desc: "香川・四国の小さな事業者にこそ、伝える力が必要だと考えています。地元で生まれた価値を、地元の言葉で、より遠くへ届ける。地域経済の循環を、ITと表現の力で支えます。",
    },
    {
      num: "02",
      symbol: (
        <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <path d="M10 24 L32 14 L54 24 L32 34 Z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/>
          <path d="M18 28 L18 42 C18 42 24 48 32 48 C40 48 46 42 46 42 L46 28" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" opacity="0.7"/>
          <line x1="32" y1="34" x2="32" y2="50" stroke="currentColor" strokeWidth="1.2" opacity="0.5"/>
          <circle cx="32" cy="50" r="2" fill="currentColor"/>
        </svg>
      ),
      en: "Equal Learning",
      title: "教育格差の是正",
      desc: "営業時代、現場で見てきた「学びの機会の差」。デジタルとデザインの力で、誰もが等しく学び・伝えられる環境を広げたい。教育現場での経験を、社会のために生かしていきます。",
    },
    {
      num: "03",
      symbol: (
        <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <circle cx="32" cy="22" r="8" stroke="currentColor" strokeWidth="1.6"/>
          <path d="M16 52 C16 42 22 36 32 36 C42 36 48 42 48 52" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
          <path d="M28 14 L32 8 L36 14" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" opacity="0.6"/>
          <line x1="32" y1="8" x2="32" y2="14" stroke="currentColor" strokeWidth="1.4" opacity="0.6"/>
        </svg>
      ),
      en: "Women's Roles",
      title: "女性活躍の場の推進",
      desc: "性別や立場にとらわれず、それぞれの強みが生かされる社会へ。とりわけ女性が能力を発揮できる場づくりを、仕事を通じて応援していきます。多様な視点こそが、新しい価値を生む土壌だと信じています。",
    },
  ];

  return (
    <section className="section vision" id="vision">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Vision</span>
            <h2 className="section-title">仕事の先にある、<br/>3つの<span style={{color:"#5b9bd5"}}>願い</span>。</h2>
          </div>
          <p className="section-lead">
            日々の仕事の積み重ねが、少しずつ社会につながっていくこと。<br/>
            フジサワ企画は、3つの願いを胸に、地域とともに歩んでいきます。
          </p>
        </div>

        <div className="vision-grid">
          {items.map((it) => (
            <div className="vision-card" key={it.num}>
              <div className="vision-symbol">{it.symbol}</div>
              <div className="vision-meta">
                <span className="vision-num">{it.num}</span>
                <span className="vision-en">{it.en}</span>
              </div>
              <h3 className="vision-title">{it.title}</h3>
              <p className="vision-desc">{it.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.Vision = Vision;
