/* P・SPO HP 共通コンポーネント — 各ページから利用 */

function SectionHead({ eyebrow, title, lede, align }) {
  return (
    <div className="section__head" style={align === "center" ? { textAlign: "center" } : null}>
      {eyebrow && <p className="section__eyebrow">{eyebrow}</p>}
      <h2 className="section__title">{title}</h2>
      {lede && <p className="section__lede" style={align === "center" ? { marginInline: "auto" } : null}>{lede}</p>}
    </div>
  );
}

function LocationCard({ loc }) {
  return (
    <article className="location-card">
      <img className="location-card__photo" src={loc.photos[0]} alt={loc.name} loading="lazy" />
      <div className="location-card__body">
        <h3 className="location-card__name">{loc.name}</h3>
        <p className="location-card__tagline">{loc.tagline}</p>
        <dl className="location-card__meta">
          <div className="location-card__meta-row">
            <dt>住所</dt><dd>{loc.address}</dd>
          </div>
          <div className="location-card__meta-row">
            <dt>アクセス</dt><dd>{loc.access[0]}</dd>
          </div>
          <div className="location-card__meta-row">
            <dt>営業</dt><dd>{loc.hours}</dd>
          </div>
        </dl>
        <div className="location-card__cta">
          <a className="btn btn--ghost" href={"/locations/" + loc.id + "/"} style={{ flex: 1 }}>詳細を見る →</a>
        </div>
      </div>
    </article>
  );
}

function PriceCard() {
  const p = window.PSPO_SITE.pricing;
  return (
    <div className="price-card">
      <div className="price-card__label">月額プラン</div>
      <div className="price-card__amount">
        <span className="yen">¥</span>{p.monthly_taxex.toLocaleString()}
      </div>
      <div className="price-card__period">/ 月（税抜）　税込 ¥{p.monthly_tax.toLocaleString()}</div>
      <ul className="price-card__includes">
        <li>3拠点（住吉・清城・知多半田駅前）使い放題</li>
        <li>住吉店のジムも利用可</li>
        <li>清城店の WEB 個室ブースも利用可</li>
        <li>知多半田駅前店は24時間営業</li>
        <li>フリードリンク・Wi-Fi・電源</li>
        <li>1日あたり ¥{p.daily_estimate} 程度</li>
      </ul>
    </div>
  );
}

function CampaignBanner() {
  const c = window.PSPO_SITE.campaign;
  return (
    <div className="campaign-banner">
      <div>
        <h3 className="campaign-banner__title">{c.name}</h3>
        <p className="campaign-banner__sub">
          {c.deadline_label}まで · 入会金・事務手数料 0円
        </p>
      </div>
      <div className="campaign-banner__code">{c.code}</div>
    </div>
  );
}

function FeatureStrip() {
  const items = [
    { num: "3", label: "拠点 使い放題" },
    { num: "24h", label: "知多半田駅前店" },
    { num: "¥4,980", label: "月額（税抜）" },
    { num: "4", label: "サービス種類" },
  ];
  return (
    <div className="feature-strip">
      {items.map((it, i) => (
        <div key={i} className="feature-strip__item">
          <div className="feature-strip__num">{it.num}</div>
          <div className="feature-strip__label">{it.label}</div>
        </div>
      ))}
    </div>
  );
}

function FaqItem({ q, a }) {
  return (
    <div className="faq-item">
      <p className="faq-item__q">{q}</p>
      <p className="faq-item__a">{a}</p>
    </div>
  );
}

function NewsList({ items, limit }) {
  const list = limit ? items.slice(0, limit) : items;
  if (!list.length) return <p className="u-text-mute">お知らせはまだありません。</p>;
  return (
    <div>
      {list.map((n) => (
        <a key={n.slug} href={"/news/?slug=" + n.slug} className="news-item">
          <span className="news-item__date">{n.date}</span>
          <span className="news-item__category">{n.category}</span>
          <span className="news-item__title">{n.title}</span>
        </a>
      ))}
    </div>
  );
}

function StepGrid({ steps }) {
  return (
    <div className="steps">
      {steps.map((s, i) => (
        <div key={i} className="step">
          <div className="step__num">0{i + 1}</div>
          <h3 className="step__title">{s.title}</h3>
          <p className="step__body">{s.body}</p>
        </div>
      ))}
    </div>
  );
}

/* お知らせのモック（D1 が繋がるまでの暫定。後で API 取得に差し替え） */
window.PSPO_NEWS_MOCK = [
  {
    slug: "campaign-2026-01",
    date: "2026.05.04",
    category: "キャンペーン",
    title: "入会金・事務手数料0円キャンペーン実施中",
  },
  {
    slug: "webmeeting-booth",
    date: "2026.04.20",
    category: "設備",
    title: "清城店に WEB 個室ブースを増設しました",
  },
  {
    slug: "wifi-upgrade",
    date: "2026.04.10",
    category: "設備",
    title: "全店の Wi-Fi 環境をアップグレード",
  },
];