const About = () => {
  const rows = [
    { en: "Company", ja: "屋号", value: "フジサワ企画 (FUJISAWA PLANNING)" },
    { en: "Founder", ja: "代表", value: "藤澤 宏茂" },
    { en: "Established", ja: "設立", value: "令和6年12月（2024年12月）" },
    { en: "Address", ja: "所在地", value: <>〒761-0433<br/>香川県高松市十川西町239-1</> },
    { en: "Mail", ja: "メール", value: "info@fujisawa-planning.jp" },
    { en: "Web", ja: "Web", value: "https://fujisawa-planning.jp" },
    { en: "Business", ja: "事業内容", value: "ITコンサルティング / 資料制作 / Web制作 / コーヒー豆焙煎（FUJISAWA BEANS）" },
  ];
  return (
    <section className="section about" id="about">
      <div className="container">
        <div className="about-grid">
          <div className="about-meta">
            <span className="eyebrow">About</span>
            <h2 className="section-title">小さな屋号で、<br/>大きな仕事を、<br/>誠実に。</h2>
            <p className="section-lead">
              個人の屋号だからこそできる、近い距離・速い判断・確かな伴走。<br/>
              20年の営業企画経験を土台に、
              現場と経営の両方の言葉で対話します。
            </p>
          </div>
          <div className="about-table">
            {rows.map((r) => (
              <dl key={r.en}>
                <dt>{r.en}<span className="ja">{r.ja}</span></dt>
                <dd>{r.value}</dd>
              </dl>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

window.About = About;