/* ========== Stores Page ========== */

const STORES = [
  {
    id: "honten",
    name: "本店（いわき）",
    nameEn: "Honten (Iwaki)",
    addr: "福島県いわき市平月見町字三倉62-1",
    tel: "0246-23-0181",
    hours: "9:30 〜 18:30",
    holiday: "1月1日のみ",
    since: "2001",
    desc: "創業の地。創業者の手による焼き場が今も健在。すべてはここから始まりました。",
    nearest: "JR常磐線「いわき駅」より車で10分",
    parking: "店舗前 5台",
  },
  {
    id: "hitachinaka",
    name: "ひたちなか店",
    nameEn: "Hitachinaka",
    addr: "茨城県ひたちなか市新光町34-1",
    tel: "0292-12-5516",
    hours: "9:30 〜 19:30",
    holiday: "1月1日のみ",
    since: "2008",
    desc: "茨城エリア初出店。海風を感じる地で、地元の方々に親しまれています。",
    nearest: "ひたちなか海浜鉄道「金上駅」より徒歩15分",
    parking: "共用駐車場あり",
  },
  {
    id: "chiba",
    name: "千葉ニュータウン店",
    nameEn: "Chiba New Town",
    addr: "千葉県印西市牧の原2丁目",
    tel: "0476-36-8018",
    hours: "9:30 〜 19:00",
    holiday: "1月1日のみ",
    since: "2015",
    desc: "ファミリー層が多い人気エリアの店舗。お子様連れのお客様に大人気です。",
    nearest: "北総線「千葉ニュータウン中央駅」より徒歩12分",
    parking: "共用駐車場あり",
  },
];

const StoresHero = ({ isMobile }) => (
  <section className={`stores-hero ${isMobile ? "is-mobile" : ""}`}>
    <AsanohaPattern color="var(--t-accent)" opacity={0.05} />
    <div className="stores-hero__inner">
      <span className="eyebrow">OUR STORES</span>
      <h1 className="stores-hero__title">
        福島・茨城・千葉、<br />
        <span className="brush-under">三店舗で</span>お待ちしております。
      </h1>
      <p className="stores-hero__lede">
        2001年、福島県いわき市に一号店を開業。<br />
        現在は三店舗で、地域の皆様に愛されています。
      </p>
    </div>
  </section>
);

const StoreDetail = ({ store, index, isMobile }) => (
  <section className={`store-detail reveal ${index % 2 === 1 ? "is-flipped" : ""}`} id={store.id}>
    <div className="store-detail__inner">
      <div className="store-detail__media">
        <div className="store-detail__map">
          <svg viewBox="0 0 480 320" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
            <rect width="480" height="320" fill="#E8DCC4" />
            <g stroke="#C9A07A" strokeWidth="1.5" fill="none">
              <path d="M 0 100 Q 120 95 240 110 T 480 105" />
              <path d="M 0 220 Q 140 230 280 215 T 480 230" />
              <path d="M 80 0 L 90 320" />
              <path d="M 360 0 L 350 320" />
              <path d="M 200 0 L 215 320" />
            </g>
            <g fill="#D4B896" opacity="0.6">
              <rect x="20" y="30" width="50" height="60" />
              <rect x="100" y="50" width="80" height="40" />
              <rect x="220" y="20" width="60" height="60" />
              <rect x="380" y="60" width="80" height="30" />
              <rect x="20" y="240" width="60" height="50" />
              <rect x="240" y="240" width="80" height="60" />
              <rect x="380" y="250" width="80" height="50" />
            </g>
            <g transform="translate(240, 160)">
              <circle r="22" fill="var(--t-accent)" opacity="0.2" />
              <circle r="14" fill="var(--t-accent)" />
              <text y="5" textAnchor="middle" fontSize="14" fontWeight="700" fill="white" fontFamily="var(--font-display)">庵</text>
            </g>
          </svg>
          <div className="store-detail__map-tag">
            <span style={{ fontSize: 18 }}>📍</span>
            <span>{store.name}</span>
          </div>
        </div>
        <div className="store-detail__since-badge">
          <div style={{ fontSize: 11, letterSpacing: "0.2em" }}>SINCE</div>
          <div style={{ fontFamily: "var(--font-display)", fontSize: 28, fontWeight: 700 }}>{store.since}</div>
        </div>
      </div>
      <div className="store-detail__content">
        <div className="store-detail__num">店舗 0{index + 1}</div>
        <div className="store-detail__en">{store.nameEn}</div>
        <h2 className="store-detail__name">{store.name}</h2>
        <p className="store-detail__desc">{store.desc}</p>

        <dl className="store-detail__info">
          <div><dt>住所</dt><dd>{store.addr}</dd></div>
          <div><dt>電話</dt><dd>{store.tel}</dd></div>
          <div><dt>営業時間</dt><dd>{store.hours}</dd></div>
          <div><dt>定休日</dt><dd>{store.holiday}</dd></div>
          <div><dt>最寄り</dt><dd>{store.nearest}</dd></div>
          <div><dt>駐車場</dt><dd>{store.parking}</dd></div>
        </dl>

        <div className="store-detail__cta-row">
          <a href={`tel:${store.tel}`} className="btn">📞 電話する</a>
          <a href="#" className="btn btn-ghost">地図で見る</a>
        </div>
      </div>
    </div>
  </section>
);

const StoresPage = ({ isMobile = false }) => {
  useReveal();
  return (
    <div className="page">
      {isMobile ? <Nav variant="mobile" active="stores" /> : <Nav active="stores" />}
      <StoresHero isMobile={isMobile} />
      {STORES.map((s, i) => (
        <StoreDetail key={s.id} store={s} index={i} isMobile={isMobile} />
      ))}
      <Footer />
    </div>
  );
};

Object.assign(window, { StoresPage });