// 会社概要ページ
function CompanyPage() {
  const { SectionHeading, Card, Badge } = window.DesignSystem_36acde;
  const rows = [
    ['会社名', '株式会社スマイルファクトリー'],
    ['所在地', '〒213-0011 神奈川県川崎市高津区久本1-6-8 3号室'],
    ['設立', '2017年'],
    ['事業内容', 'リユース品・リサイクル品の販売代行、地域・社会貢献活動'],
    ['対応エリア', '川崎市高津区 溝口1丁目・久本1〜3丁目・坂戸1丁目・坂戸3丁目'],
    ['連絡先', 'Email：admin@smilefactory-reuse.com ／ LINE：smilefactory001'],
    ['許可', '古物営業法に基づく古物商許可'],
  ];
  return (
    <main>
      <section style={{ background: 'var(--green-50)', borderBottom: '1px solid var(--green-100)' }}>
        <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '64px 24px' }}>
          <Badge variant="brand">COMPANY</Badge>
          <h1 style={{ margin: '14px 0 0', fontFamily: 'var(--font-display)', fontWeight: 900, fontSize: 40, color: 'var(--text-primary)' }}>会社概要</h1>
          <p style={{ margin: '12px 0 0', fontSize: 17, color: 'var(--text-secondary)' }}>顔が見える、安心・丁寧なリユースを地域の皆様へ。</p>
        </div>
      </section>

      <section style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '72px 24px', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 48, alignItems: 'start' }}>
        <Card variant="elevated" padding="none" style={{ overflow: 'hidden' }}>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontFamily: 'var(--font-body)' }}>
            <tbody>
              {rows.map(([k, v], i) => (
                <tr key={k} style={{ borderBottom: i < rows.length - 1 ? '1px solid var(--border-subtle)' : 'none' }}>
                  <th style={{ textAlign: 'left', verticalAlign: 'top', width: 132, padding: '18px 20px', background: 'var(--green-50)', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 14, color: 'var(--green-800)' }}>{k}</th>
                  <td style={{ padding: '18px 20px', fontSize: 15, lineHeight: 1.8, color: 'var(--text-primary)' }}>{v}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          <Photo label="店舗・スタッフ写真" ratio="4 / 3" tint="var(--green-100)" />
          <Card variant="soft">
            <h3 style={{ margin: '0 0 8px', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, color: 'var(--green-800)' }}>合言葉</h3>
            <p style={{ margin: 0, fontSize: 15, lineHeight: 1.9, color: 'var(--text-secondary)' }}>リユースで地域と社会に貢献する。地域の皆様とつくりあげるリユース集団です。</p>
          </Card>
        </div>
      </section>
    </main>
  );
}
window.CompanyPage = CompanyPage;