/* 店舗詳細ページ — data-loc-id で対象を切り替える */

const { useEffect: useEffectLD } = React;

function LocationDetailPage({ id }) {
  const loc = window.PSPO_LOCATION_BY_ID(id);
  if (!loc) return <div className="container section">店舗が見つかりません。</div>;

  useEffectLD(() => {
    if (typeof L === "undefined" || !loc.map) return;
    const el = document.getElementById("loc-map");
    if (!el || el._inited) return;
    el._inited = true;
    const map = L.map("loc-map", {
      center: [loc.map.lat, loc.map.lng],
      zoom: 16,
      scrollWheelZoom: false,
    });
    L.tileLayer("https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png", {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OSM</a> &copy; <a href="https://carto.com/">CARTO</a>',
      subdomains: "abcd",
      maxZoom: 19,
    }).addTo(map);
    L.marker([loc.map.lat, loc.map.lng]).addTo(map).bindPopup(loc.name).openPopup();
  }, []);

  return (
    <>
      <PageHero
        breadcrumb={[
          { label: "店舗", href: "/locations/" },
          { label: loc.name },
        ]}
        title={loc.name}
        lede={loc.tagline}
      />

      {/* 写真 */}
      <section className="section section--tight">
        <div className="container">
          <div className="grid grid--2">
            {loc.photos.slice(0, 2).map((p, i) => (
              <img key={i} src={p} alt={loc.name} style={{
                width: "100%", aspectRatio: "16/10", objectFit: "cover",
                borderRadius: "var(--r-md)", border: "1px solid var(--c-border)",
              }} />
            ))}
          </div>
        </div>
      </section>

      {/* 基本情報 */}
      <section className="section">
        <div className="container">
          <SectionHead eyebrow="INFO" title="基本情報" />
          <div className="grid grid--2">
            <table className="compare-table">
              <tbody>
                <tr><td>住所</td><td>{loc.address}</td></tr>
                <tr><td>アクセス</td><td>{loc.access.map((a, i) => <div key={i}>{a}</div>)}</td></tr>
                <tr><td>営業時間</td><td>{loc.hours}</td></tr>
                <tr><td>収容</td><td>{loc.capacity}席</td></tr>
                <tr><td>駐車場</td><td>{loc.parking ? "あり" : "なし"}{loc.parkingNote && `（${loc.parkingNote}）`}</td></tr>
              </tbody>
            </table>
            <table className="compare-table">
              <thead><tr><th colSpan="2">設備</th></tr></thead>
              <tbody>
                {loc.features.map((f, i) => (
                  <tr key={i}><td>{f.name}</td><td>{f.value}</td></tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>

      {/* ハイライト */}
      <section className="section section--alt">
        <div className="container">
          <SectionHead eyebrow="HIGHLIGHTS" title="この店舗の特色" lede={loc.notes} />
          <div className="grid grid--3">
            {loc.highlights.map((h, i) => (
              <div key={i} className="card card--feature">
                <div style={{
                  fontFamily: "var(--f-mono)", fontSize: 24, fontWeight: 700,
                  color: "var(--c-coral)", lineHeight: 1, marginBottom: 8,
                }}>0{i + 1}</div>
                <p style={{ margin: 0, fontSize: 15, fontWeight: 600 }}>{h}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 地図 */}
      <section className="section">
        <div className="container">
          <SectionHead eyebrow="ACCESS" title="アクセス" lede={loc.address} />
          <div id="loc-map" className="map-wrap"></div>
        </div>
      </section>

      {/* CTA */}
      <section className="section section--alt">
        <div className="container u-text-center">
          <h2 className="section__title">{loc.name}を見学してみませんか？</h2>
          <p className="section__lede" style={{ marginInline: "auto" }}>
            実際の席で集中の質を確認できます。
          </p>
          <div className="u-mt-6 u-flex u-flex-gap" style={{ justifyContent: "center", flexWrap: "wrap" }}>
            <a className="btn btn--primary btn--lg" href="/join/">入会する →</a>
            <a className="btn btn--ghost btn--lg" href="/contact/">お問い合わせ</a>
          </div>
        </div>
      </section>
    </>
  );
}