/* 設備・サービスページ */

function FacilitiesPage() {
  const facilities = [
    {
      title: "スタディルーム",
      img: "/assets/seishiro/store-21.jpg",
      desc: "お仕事、勉強、読書に。集中したい方に最適です。",
      specs: ["清城店 21席", "知多半田駅前店 14席", "全席に電源・Wi-Fi"],
    },
    {
      title: "カフェスペース",
      img: "/assets/seishiro/store-29.jpg",
      desc: "お友達と一緒にゆっくり過ごせる、広めのテーブル席。",
      specs: ["清城店 17席", "知多半田駅前店 17席", "フリードリンクあり"],
    },
    {
      title: "WEB個室ブース",
      img: "/assets/seishiro/store-12.jpg",
      desc: "WEBミーティング・オンライン授業・通話作業に最適な個室。",
      specs: ["清城店 5席", "防音設計", "電源・Wi-Fi完備"],
    },
    {
      title: "ジム",
      img: "/assets/facility-study.png",
      desc: "住吉店に併設。運動と仕事・学びを、ひとつの場所で。",
      specs: ["住吉店に併設", "会員プランに含まれます", "詳細は店舗にお問い合わせください"],
      todo: true,
    },
  ];

  const services = [
    { name: "フリードリンク", value: "コーヒー他、無料で利用可" },
    { name: "Wi-Fi", value: "全席無線完備" },
    { name: "電源", value: "全席に電源コンセント" },
    { name: "顔認証", value: "施設の入退館管理" },
    { name: "防犯ボタン", value: "緊急時対応、24時間室内監視" },
    { name: "駐輪場", value: "両店ともあり" },
    { name: "駐車場", value: "清城店：9台 / 知多半田駅前店：なし" },
    { name: "飲食", value: "カフェスペースのみ可、スタディルームは飲食禁止（飲料のみOK）" },
  ];

  return (
    <>
      <PageHero
        breadcrumb={[{ label: "設備・サービス" }]}
        title="設備・サービス"
        lede="スタディルーム・カフェスペース・WEB個室ブース・ジム。目的に合わせてお選びいただけます。"
      />

      <section className="section">
        <div className="container">
          <SectionHead eyebrow="SERVICES" title="サービス内容" lede="月額会員制のP・SPO で利用できる設備。" />
          <div className="grid grid--4">
            {facilities.map((f, i) => (
              <article key={i} className="card card--feature">
                <img src={f.img} alt={f.title} style={{
                  width: "100%", aspectRatio: "16/10", objectFit: "cover",
                  borderRadius: "var(--r-sm)", marginBottom: 16,
                }} />
                <h3 className="card__title">{f.title}</h3>
                <p className="card__body">{f.desc}</p>
                <ul style={{ marginTop: 12, paddingLeft: 20, fontSize: 13, color: "var(--c-text-mute)" }}>
                  {f.specs.map((s, j) => <li key={j}>{s}</li>)}
                </ul>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="section section--alt">
        <div className="container">
          <SectionHead eyebrow="SERVICES" title="共通サービス" lede="3拠点すべてで提供しています。" />
          <table className="compare-table">
            <tbody>
              {services.map((s, i) => (
                <tr key={i}><td>{s.name}</td><td>{s.value}</td></tr>
              ))}
            </tbody>
          </table>
        </div>
      </section>

      <section className="section">
        <div className="container u-text-center">
          <a className="btn btn--primary btn--lg" href="/contact/">見学・体験を申込む</a>
        </div>
      </section>
    </>
  );
}