function Shop() {
  const products = [
    {
      id: "shikishi",
      name: "家族名色紙",
      en: "family name shikishi",
      price: "¥6,000",
      desc: "家族の絆を深める、特別な一枚。それぞれのお名前を色と文字で表現します。",
      bg: "linear-gradient(135deg, #ede2cb 0%, #d8c5a3 100%)",
      char: "家",
    },
    {
      id: "poem",
      name: "あなたに向けたポエム",
      en: "personal poem postcard",
      price: "¥4,000",
      desc: "あなたの好きな言葉を、筆文字に。世界に一つしかないハガキ。",
      bg: "linear-gradient(135deg, #f0e3d4 0%, #c9a98a 100%)",
      char: "詩",
    },
    {
      id: "naming",
      name: "命名書",
      en: "naming certificate",
      price: "¥5,000",
      desc: "新しい命に贈る、最初の一枚。お名前と生年月日をお書きします。",
      bg: "linear-gradient(135deg, #f7f0e3 0%, #d4be8b 100%)",
      char: "名",
    },
    {
      id: "sticker",
      name: "オリジナルシール",
      en: "original sticker",
      price: "¥1,000",
      desc: "あなただけの特別なデザインで、自分らしさを表現。",
      bg: "linear-gradient(135deg, #ecdcc8 0%, #b69b76 100%)",
      char: "印",
    },
    {
      id: "keychain",
      name: "オリジナルキーホルダー",
      en: "original keychain",
      price: "¥1,500",
      desc: "日常のささいな瞬間も、特別なものに変えてくれる小さなお守り。",
      bg: "linear-gradient(135deg, #e8d7bc 0%, #b89669 100%)",
      char: "守",
    },
    {
      id: "message",
      name: "メッセージカード",
      en: "message card",
      price: "¥800〜",
      desc: "ご結婚、ご出産、お祝いの気持ちを筆文字で。一文字から承ります。",
      bg: "linear-gradient(135deg, #efe2cd 0%, #c4a273 100%)",
      char: "心",
    },
  ];

  return (
    <section className="section shop-section" id="shop">
      <div className="section-inner">
        <div className="section-head">
          <div className="eyebrow">order &nbsp;·&nbsp; 物販</div>
          <h2 className="section-title">オーダー作品</h2>
          <p className="section-sub">ご要望に応じて、一点ずつ手書きでお作りします。</p>
        </div>

        <div className="shop-grid">
          {products.map(p => (
            <article key={p.id} className="product-card">
              <div className="product-thumb" style={{ background: p.bg }}>
                <div className="product-char">{p.char}</div>
                <div className="product-stamp">
                  <HankoStamp chars="灯" size={28}/>
                </div>
              </div>
              <div className="product-body">
                <div className="product-meta">
                  <span className="product-name">{p.name}</span>
                  <span className="romaji"> {p.en}</span>
                </div>
                <p className="product-desc">{p.desc}</p>
                <div className="product-foot">
                  <span className="product-price">{p.price}</span>
                  <a className="product-link" href="#contact">ご依頼 →</a>
                </div>
              </div>
            </article>
          ))}
        </div>

        <p className="caption classes-note">
          ※ 商品は 1 点 1 点手作りのため、お届けまでにお時間を頂くことがあります。
          BASE ショップ「yorozusyo」でもお求めいただけます。
        </p>
      </div>
    </section>
  );
}

Object.assign(window, { Shop });