/* 店舗一覧ページ */

function LocationsPage() {
  const locs = window.PSPO_LOCATIONS;
  return (
    <>
      <PageHero
        breadcrumb={[{ label: "店舗" }]}
        title="店舗一覧"
        lede="半田市内に3拠点。月額1つで、すべての拠点を使い放題。"
      />

      <section className="section">
        <div className="container">
          <div className="grid grid--3">
            {locs.map((l) => <LocationCard key={l.id} loc={l} />)}
          </div>
        </div>
      </section>

      <section className="section section--alt">
        <div className="container">
          <SectionHead
            eyebrow="COMPARISON"
            title="3拠点の比較"
            lede="あなたの利用シーンに合う店舗を見つけてください。"
          />
          <div style={{ overflowX: "auto" }}>
            <table className="compare-table">
              <thead>
                <tr>
                  <th></th>
                  {locs.map((l) => <th key={l.id}>{l.name}</th>)}
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>住所</td>
                  {locs.map((l) => <td key={l.id}>{l.address}</td>)}
                </tr>
                <tr>
                  <td>営業時間</td>
                  {locs.map((l) => <td key={l.id}>{l.hours}</td>)}
                </tr>
                <tr>
                  <td>収容</td>
                  {locs.map((l) => <td key={l.id}>{l.capacity}席</td>)}
                </tr>
                <tr>
                  <td>駐車場</td>
                  {locs.map((l) => <td key={l.id}>{l.parking ? "あり" : "なし（駅前）"}</td>)}
                </tr>
                <tr>
                  <td>特色</td>
                  {locs.map((l) => <td key={l.id}>{l.tagline}</td>)}
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </section>
    </>
  );
}