// pages-info.jsx — Shop list, FAQ, Tokushoho, Privacy, Terms, About
const { Icon, MediaPH, PRODUCTS } = window.LCS;
const { ProductCard } = window.LCS;

// ─────────────────────────────────────────────────────────────
// SHOP LIST
// ─────────────────────────────────────────────────────────────
const ShopPage = ({ go }) => {
  return (
    <main className="page" data-screen-label="Shop">
      <div className="shell">
        <div className="page-head">
          <div>
            <div className="page-head__en">PRODUCTS</div>
            <h1>商品一覧</h1>
          </div>
          <div className="page-head__deco">{PRODUCTS.length}<span style={{ fontSize: 24 }}>title</span></div>
        </div>

        <div className="product-grid">
          {PRODUCTS.map((p) => (<ProductCard key={p.id} p={p} go={go} />))}
        </div>
      </div>
    </main>
  );
};

// ─────────────────────────────────────────────────────────────
// ABOUT (lightweight)
// ─────────────────────────────────────────────────────────────
const AboutPage = ({ go }) => (
  <main className="page" data-screen-label="About">
    <div className="shell">
      <div className="page-head">
        <div>
          <div className="page-head__en">ABOUT THE SHOP</div>
          <h1>ショップについて</h1>
        </div>
        <div className="page-head__deco">LCS</div>
      </div>

      <section className="section" style={{ marginTop: 0 }}>
        <div className="blurb">
          <div>
            <h2 className="blurb__title">社会貢献に繋がる、<br />ハンドメイド生産のカード。</h2>
            <p className="blurb__body">
              ローシスカードショップの製品づくりには、働きたくても機会に恵まれない方々の「輝ける場所」を創るという想いがあります。
            </p>
            <p className="blurb__body">
              現在は、ご縁のある身近な高齢者や障がいを持つ方々と共に、一つひとつ手作業で生産しています。
            </p>
            <p className="blurb__body">
              この活動の輪が広がることで、より多くの方が社会と繋がり、自分らしく楽しく働ける場を広げていきたいと考えています。
            </p>
          </div>
          <div className="blurb__panel">
            <div className="blurb__stat"><span className="blurb__stat-k">◆ これまでの作品数</span><span className="blurb__stat-v">6<small>タイトル</small></span></div>
            <div className="blurb__stat"><span className="blurb__stat-k">◆ 発送までの目安</span><span className="blurb__stat-v">7〜14<small>営業日</small></span></div>
            <div className="blurb__stat"><span className="blurb__stat-k">◆ 送料</span><span className="blurb__stat-v">商品価格に含む</span></div>
            <div className="blurb__stat"><span className="blurb__stat-k">◆ 決済</span><span className="blurb__stat-v">Stripe<small> 各種カード対応</small></span></div>
          </div>
        </div>
      </section>

      <div className="flex gap-12 mt-32" style={{ flexWrap: "wrap" }}>
        <button className="btn btn--primary btn--lg" onClick={() => go("shop")}>商品を見る <Icon name="arrow-r" size={14} /></button>
        <button className="btn btn--lg" onClick={() => go("faq")}>よくある質問 <Icon name="chev-r" size={14} /></button>
        <button className="btn btn--lg" onClick={() => go("terms")}>利用規約 <Icon name="doc" size={14} /></button>
        <button className="btn btn--lg" onClick={() => go("privacy")}>プライバシーポリシー <Icon name="shield" size={14} /></button>
        <button className="btn btn--lg" onClick={() => go("tokushoho")}>特定商取引法に基づく表記 <Icon name="scale" size={14} /></button>
      </div>
    </div>
  </main>
);

// ─────────────────────────────────────────────────────────────
// FAQ
// ─────────────────────────────────────────────────────────────
const FAQ_DATA = [
  {
    cat: "商品について",
    items: [
      { q: "どのようなゲームを取り扱っていますか？", a: "障がい者雇用なども考慮した、ハンドメイドのカードゲームを受注生産で販売しています。パーティ向けや知育ができるカードゲームなど、さまざまなジャンルのゲームを取り扱っています。" },
      { q: "対象年齢は何歳からですか？", a: "商品ごとに対象年齢が異なります。各商品の詳細ページに「対象年齢」「プレイ人数」「プレイ時間」などの情報を掲載していますのでご確認ください。" },
      { q: "ルールは難しいですか？", a: "初めての方でも遊びやすいゲームから、じっくり考える戦略ゲームまで幅広く取り扱っています。商品ページにゲームの特徴や遊び方を掲載していますので、購入前にご確認いただけます。" },
      { q: "ルールブックは付属していますか？", a: "はい。すべての商品に、ルール説明書を閲覧できる QR コードが付属しています。そちらをスマートフォンで読み込んでご確認ください。また、商品によっては遊び方を紹介する画像も掲載しています。" },
    ],
  },
  {
    cat: "注文について",
    items: [
      { q: "会員登録は必要ですか？", a: "会員登録をしなくても商品をご購入いただけます。" },
      { q: "注文方法を教えてください。", a: "商品ページから購入ボタンを押し、決済画面に進んでください。必要な情報を入力後、ご注文を確定すると購入が完了します。" },
      { q: "注文内容を変更できますか？", a: "ご注文確定後の変更はできません。内容をよくご確認のうえご注文ください。" },
    ],
  },
  {
    cat: "お支払いについて",
    items: [
      { q: "利用できる支払い方法を教えてください。", a: "クレジットカード（Stripe 決済）がご利用いただけます。" },
      { q: "支払いはいつ行われますか？", a: "ご注文確定時に決済処理が行われます。詳しくはお使いの決済サービスにお問い合わせください。" },
      { q: "決済エラーが出た場合はどうすればいいですか？", a: "決済が正常に完了しなかった場合、ご注文は確定されません。カード情報や残高をご確認のうえ、再度ご注文手続きをお願いいたします。" },
      { q: "分割払いはできますか？", a: "分割払いの可否は、ご利用のクレジットカード会社の設定によって異なります。詳しくはカード会社へご確認ください。" },
    ],
  },
  {
    cat: "キャンセル・返品について",
    items: [
      { q: "注文のキャンセルはできますか？", a: "当サイトの商品は受注生産のため、ご注文完了（決済完了）後のキャンセルはお受けしておりません。なお、商品に破損や不良があった場合は、別途お問い合わせください。" },
      { q: "商品に不具合があった場合はどうすればいいですか？", a: "商品到着後、破損や不足があった場合はお問い合わせください。状況を確認のうえ対応いたします。" },
      { q: "お客様都合の返品はできますか？", a: "発送後の返品はお受けしておりません。なお、商品に破損や不良があった場合は、別途お問い合わせください。" },
    ],
  },
  {
    cat: "配送について",
    items: [
      { q: "商品はいつ発送されますか？", a: "通常、ご注文から 7〜14 営業日以内を目安に発送いたします。受注生産のため、ご注文状況や生産状況により発送時期が前後する場合があります。" },
      { q: "配送料はいくらですか？", a: "配送料は全国一律 185 円です。配送料は各商品の表示価格に含まれていますので、購入手続き画面で最終金額をご確認ください。" },
      { q: "海外配送は対応していますか？", a: "現在は日本国内への配送のみ対応しています。予めご了承ください。" },
    ],
  },
];

const FAQPage = ({ go }) => {
  const [cat, setCat] = React.useState("すべて");
  const [open, setOpen] = React.useState({});

  const visible = FAQ_DATA.filter((g) => cat === "すべて" || g.cat === cat);

  return (
    <main className="page" data-screen-label="05 FAQ">
      <div className="shell">
        <div className="page-head">
          <div>
            <div className="page-head__en">FAQ · よくある質問</div>
            <h1>よくある質問</h1>
          </div>
          <div className="page-head__deco">?</div>
        </div>

        <div className="faq-cats">
          {["すべて", ...FAQ_DATA.map((g) => g.cat)].map((c) => (
            <button key={c} className={"faq-cat" + (cat === c ? " active" : "")} onClick={() => setCat(c)}>{c}</button>
          ))}
        </div>

        {visible.map((g, gi) => (
          <section key={gi} className="mt-24">
            <h2 style={{ fontFamily: "Noto Sans JP, sans-serif", fontWeight: 900, fontSize: 22, margin: "0 0 14px", display: "flex", alignItems: "baseline", gap: 12 }}>
              <span style={{ width: 28, height: 28, background: "var(--c-main)", border: "1.5px solid var(--c-line)", borderRadius: 6, display: "inline-grid", placeItems: "center", fontFamily: "Plus Jakarta Sans, sans-serif", fontSize: 13, fontWeight: 900 }}>{gi + 1}</span>
              {g.cat}
            </h2>
            <div className="faq-list">
              {g.items.map((it, i) => {
                const key = `${gi}-${i}`;
                const isOpen = !!open[key];
                return (
                  <div key={key} className={"faq-item" + (isOpen ? " open" : "")}>
                    <button className="faq-q" onClick={() => setOpen({ ...open, [key]: !isOpen })}>
                      <span className="faq-q__q">Q</span>
                      <span className="faq-q__title">{it.q}</span>
                      <span className="faq-q__chev"><Icon name="chev" size={18} /></span>
                    </button>
                    {isOpen && <div className="faq-a">{it.a}</div>}
                  </div>
                );
              })}
            </div>
          </section>
        ))}

        <div className="note mt-32" style={{ marginBottom: 0 }}>
          <div className="note__icon">?</div>
          <div>
            <b>解決しない場合は</b>
            <a href="https://forms.google.com/lowsys-card-shop-contact" target="_blank" rel="noopener" style={{ color: "var(--c-accent)", fontWeight: 700, cursor: "pointer" }}>お問い合わせフォーム（Google フォーム）</a> よりご連絡ください。3〜5 営業日以内にご返信いたします。
          </div>
        </div>
      </div>
    </main>
  );
};

// ─────────────────────────────────────────────────────────────
// LEGAL: shared shell
// ─────────────────────────────────────────────────────────────
const LegalShell = ({ enTitle, jpTitle, deco, sections, screen }) => {
  const sectionId = (i) => `legal-sec-${screen.replace(/\s+/g, "-")}-${i}`;
  const scrollTo = (i) => {
    const el = document.getElementById(sectionId(i));
    if (!el) return;
    const header = document.querySelector(".header");
    const offset = (header ? header.getBoundingClientRect().height : 0) + 16;
    const top = el.getBoundingClientRect().top + window.scrollY - offset;
    window.scrollTo({ top, behavior: "smooth" });
  };
  return (
    <main className="page" data-screen-label={screen}>
      <div className="shell">
        <div className="page-head">
          <div>
            <div className="page-head__en">{enTitle}</div>
            <h1>{jpTitle}</h1>
          </div>
          <div className="page-head__deco">{deco}</div>
        </div>
        <div className="legal">
          <aside className="legal__toc">
            <h4>目次</h4>
            <ol>
              {sections.map((s, i) => (
                <li key={i}>
                  <button
                    className="legal__toc-link"
                    onClick={() => scrollTo(i)}
                  >{s.title}</button>
                </li>
              ))}
            </ol>
          </aside>
          <div className="legal__body">
            {sections.map((s, i) => (
              <section key={i} id={sectionId(i)}>
                <h2>{s.title}</h2>
                {s.content}
              </section>
            ))}
          </div>
        </div>
      </div>
    </main>
  );
};

// ─────────────────────────────────────────────────────────────
// TOKUSHOHO
// ─────────────────────────────────────────────────────────────
const TokushohoPage = () => (
  <LegalShell
    screen="06 Tokushoho"
    enTitle="LEGAL / 特定商取引法に基づく表記"
    jpTitle="特定商取引法に基づく表記"
    deco="§"
    sections={[
      {
        title: "事業者情報",
        content: (
          <table className="dl-table">
            <tbody>
              <tr><th>販売事業者</th><td>株式会社ローシス（Lowsys Card Shop）</td></tr>
              <tr><th>運営責任者</th><td>宇都宮　睦大</td></tr>
              <tr><th>所在地</th><td>〒150-0045 東京都渋谷区神泉町10-15</td></tr>
              <tr><th>電話対応</th><td>お問い合わせフォームまたはメールにて「電話対応希望」の旨をご連絡ください。担当者より折り返しご連絡いたします。</td></tr>
              <tr><th>メールアドレス</th><td>support@cs.lowsys.co.jp</td></tr>
              <tr><th>サイト URL</th><td>https://lcs.lowsys.co.jp</td></tr>
            </tbody>
          </table>
        ),
      },
      {
        title: "販売価格",
        content: <p>各商品ページに記載された価格 (消費税込) によります。</p>,
      },
      {
        title: "商品代金以外の必要料金",
        content: (
          <p>商品価格はすべて税込価格です。表示されている商品価格には送料および必要な手数料が含まれており、追加料金は発生しません。</p>
        ),
      },
      {
        title: "お支払い方法",
        content: <p>クレジットカード（Stripe 決済）</p>,
      },
      {
        title: "お支払い時期",
        content: <p>クレジットカード：ご注文時に決済されます。</p>,
      },
      {
        title: "ご注文の成立時期",
        content: <p>ご注文は、当ショップにて決済の完了が確認された時点で成立するものとします。</p>,
      },
      {
        title: "商品の引渡し時期",
        content: (
          <React.Fragment>
            <p>当サイトの商品は受注生産のため、ご注文完了（決済完了）後に制作を開始いたします。</p>
            <p>通常 7〜14 営業日以内を目安に発送いたします。ただし、ご注文状況、生産状況、資材調達その他やむを得ない事情により、発送時期が前後する場合があります。</p>
          </React.Fragment>
        ),
      },
      {
        title: "配送方法",
        content: <p>日本郵便 クリックポスト。発送後の配送遅延につきましては、配送会社の事情による場合があります。</p>,
      },
      {
        title: "キャンセル・返品について",
        content: (
          <React.Fragment>
            <p>当サイトの商品は受注生産のため、ご注文完了（決済完了）後に制作を開始いたします。そのため、ご注文完了後のキャンセルおよびお客様都合による返品はお受けしておりません。</p>
            <p>商品に破損・印刷不良など、使用に支障のある問題があった場合は、商品到着後 7 日以内に support@cs.lowsys.co.jp までお問い合わせください。内容を確認の上、当ショップの判断にて交換または返金等の対応を行います。返品送料は不良品の場合、当ショップが負担いたします。</p>
          </React.Fragment>
        ),
      },
      {
        title: "販売数量の制限等",
        content: <p>当サイトの商品は受注生産のため、販売期間や数量を制限する場合があります。生産状況や在庫状況により販売を停止または変更する場合があります。あらかじめご了承ください。</p>,
      },
      {
        title: "表現および商品に関する注意書き",
        content: <p>商品画像はできる限り実物に近い形で掲載しておりますが、モニター環境等により実際の色味や質感と異なって見える場合があります。</p>,
      },
      {
        title: "クーリングオフについて",
        content: <p>本サイトで販売している商品は通信販売に該当するため、特定商取引法に基づくクーリングオフ制度の適用対象外となります。</p>,
      },
    ]}
  />
);

// ─────────────────────────────────────────────────────────────
// PRIVACY
// ─────────────────────────────────────────────────────────────
const PrivacyPage = () => (
  <LegalShell
    screen="07 Privacy"
    enTitle="LEGAL / プライバシーポリシー"
    jpTitle="プライバシーポリシー"
    deco="P"
    sections={[
      { title: "はじめに", content: <p>株式会社ローシス（以下「当社」）は、当社が運営するオンラインショップ「Lowsys Card Shop」（以下「本サービス」）において、ユーザーの個人情報の重要性を認識し、以下の方針に基づき個人情報の保護に努めます。最終更新日：2026年４月１日。</p> },
      { title: "第1条（個人情報の定義）", content: <p>本ポリシーにおける「個人情報」とは、氏名、住所、電話番号、メールアドレスなど、特定の個人を識別できる情報を指します。</p> },
      { title: "第2条（個人情報の収集方法）",
        content: (
          <React.Fragment>
            <p>当社は、以下の場合にユーザーの個人情報を取得することがあります。</p>
            <ol>
              <li>商品の注文時</li>
              <li>お問い合わせフォームの利用時</li>
              <li>会員登録を行う場合</li>
              <li>アンケートやキャンペーンへの参加時</li>
            </ol>
            <p>取得する情報には、氏名・メールアドレス・住所・電話番号・配送先情報・決済に関連する情報が含まれる場合があります。なお、本サービスでは決済処理に外部決済サービスを利用しており、クレジットカード情報などの決済情報は当社では保持せず、決済サービス提供会社により安全に処理されます。</p>
          </React.Fragment>
        ) },
      { title: "第3条（個人情報の利用目的）",
        content: (
          <ol>
            <li>商品の発送およびサービス提供</li>
            <li>お問い合わせへの対応</li>
            <li>注文内容の確認および連絡</li>
            <li>サービス改善のための分析</li>
            <li>新商品やキャンペーンの案内</li>
            <li>不正利用の防止</li>
          </ol>
        ) },
      { title: "第4条（個人情報の第三者提供）",
        content: (
          <React.Fragment>
            <p>当社は、以下の場合を除き、ユーザーの同意なく第三者に個人情報を提供することはありません。</p>
            <ol>
              <li>法令に基づく場合</li>
              <li>人命または財産の保護が必要な場合</li>
              <li>商品配送、決済処理などの業務を行うため、配送業者や決済事業者などの業務委託先に必要な範囲で提供する場合</li>
            </ol>
          </React.Fragment>
        ) },
      { title: "第5条（外部サービスの利用）",
        content: (
          <React.Fragment>
            <p>本サービスでは、決済処理のために <b>Stripe</b> を利用しています。ユーザーが入力した決済情報は、Stripe のシステムを通じて安全に処理され、当社はクレジットカード情報等の決済情報を保持しません。Stripe における個人情報の取り扱いについては Stripe のプライバシーポリシー（https://stripe.com/privacy）をご確認ください。</p>
          </React.Fragment>
        ) },
      { title: "第6条（Cookie の利用）", content: <p>本サービスでは、サービス向上やアクセス解析のために Cookie を使用する場合があります。ユーザーはブラウザ設定により Cookie を無効にすることができます。</p> },
      { title: "第7条（アクセス解析ツール）", content: <p>本サービスでは、アクセス状況を分析するためのツールを利用する場合があります。これにより収集される情報には、個人を特定する情報は含まれません。</p> },
      { title: "第8条（個人情報の管理）", content: <p>当社は、個人情報の漏えい、紛失、改ざんなどを防止するため、適切な安全管理措置を講じます。</p> },
      { title: "第9条（個人情報の開示・訂正・削除）", content: <p>ユーザーは、自身の個人情報について、開示・訂正・削除を求めることができます。希望される場合は、当社のお問い合わせ窓口（support@cs.lowsys.co.jp）までご連絡ください。</p> },
      { title: "第10条（プライバシーポリシーの変更）", content: <p>当社は、必要に応じて本ポリシーを変更する場合があります。変更後のポリシーは、本サービス上に掲載された時点で効力を生じます。</p> },
      { title: "第11条（お問い合わせ窓口）", content: <p>個人情報の取り扱いに関するお問い合わせは以下までご連絡ください。<br />株式会社ローシス Lowsys Card Shop<br />メール：support@cs.lowsys.co.jp</p> },
    ]}
  />
);

// ─────────────────────────────────────────────────────────────
// TERMS
// ─────────────────────────────────────────────────────────────
const TermsPage = () => (
  <LegalShell
    screen="08 Terms"
    enTitle="LEGAL / 利用規約"
    jpTitle="利用規約"
    deco="T"
    sections={[
      { title: "前文", content: <p>本利用規約（以下「本規約」といいます。）は、株式会社ローシス（以下「当社」といいます。）が運営するオンラインショップ「Lowsys Card Shop」（以下「本サービス」といいます。）の利用条件を定めるものです。本サービスを利用するすべての利用者（以下「利用者」といいます。）は、本規約に同意したうえで本サービスを利用するものとします。</p> },
      { title: "第1条（適用）",
        content: (
          <ol>
            <li>本規約は、利用者と当社との間の本サービスの利用に関する一切の関係に適用されます。</li>
            <li>当社が本サービス上で掲載する各種のルール、注意事項等は、本規約の一部を構成するものとします。</li>
          </ol>
        ) },
      { title: "第2条（本サービスの内容）", content: <p>本サービスは、当社が運営するオンラインショップにおいて商品を販売するサービスです。</p> },
      { title: "第3条（売買契約の成立）",
        content: (
          <ol>
            <li>利用者が本サービスを通じて商品を注文し、決済手続きが完了した時点で売買契約が成立するものとします。</li>
            <li>当社は、以下のいずれかの事由があると判断した場合、売買契約を取り消すことができるものとします。<br />（1）利用者が本規約に違反した場合<br />（2）不正な注文または不正利用が疑われる場合<br />（3）その他、当社が売買契約の成立を適当でないと判断した場合</li>
          </ol>
        ) },
      { title: "第4条（支払方法）",
        content: (
          <ol>
            <li>本サービスにおける決済は、当社が指定する外部決済サービス（Stripe）を通じて行われます。</li>
            <li>利用者は、Stripe が提供する決済手続きに従って支払いを行うものとします。</li>
            <li>利用者と Stripe またはクレジットカード会社との間で生じたトラブルについて、当社は一切責任を負いません。</li>
          </ol>
        ) },
      { title: "第5条（商品の発送）",
        content: (
          <ol>
            <li>当社は、注文内容および支払い確認後、商品を発送します。</li>
            <li>商品は通常、注文完了後 7〜14 営業日以内を目安に発送します。</li>
            <li>注文状況、生産状況、配送事情その他の事情により、商品の発送が遅れる場合があります。</li>
            <li>商品の配送は、当社が指定する配送方法により行います。</li>
          </ol>
        ) },
      { title: "第6条（キャンセル）", content: <p>本サービスで販売される商品は受注生産のため、注文確定後のキャンセルはお受けしておりません。</p> },
      { title: "第7条（返品・交換）",
        content: (
          <ol>
            <li>商品に不良または当社の手配ミスがあった場合、当社は返品または交換にて対応します。</li>
            <li>利用者都合による返品・交換はお受けしておりません。</li>
            <li>商品はハンドメイドおよび受注生産の性質上、個体差や軽微な仕様差異が生じる場合があります。これらは不良品には該当しないものとします。</li>
          </ol>
        ) },
      { title: "第8条（購入履歴）", content: <p>本サービスでは、利用者専用の購入履歴管理機能は提供していません。利用者は、決済完了後に Stripe から送信されるレシートメール等により購入内容を確認するものとします。</p> },
      { title: "第9条（禁止事項）",
        content: (
          <React.Fragment>
            <p>利用者は、本サービスの利用にあたり、以下の行為をしてはなりません。</p>
            <ol>
              <li>法令または公序良俗に違反する行為</li>
              <li>犯罪行為に関連する行為</li>
              <li>本サービスの運営を妨害する行為</li>
              <li>不正アクセスまたはこれを試みる行為</li>
              <li>他の利用者または第三者に不利益、損害、不快感を与える行為</li>
              <li>不正な注文または決済の試み</li>
              <li>その他、当社が不適切と判断する行為</li>
            </ol>
          </React.Fragment>
        ) },
      { title: "第10条（免責事項）",
        content: (
          <ol>
            <li>当社は、本サービスに事実上または法律上の瑕疵（安全性、信頼性、正確性、完全性、有効性、特定目的への適合性など）を含まないことを保証するものではありません。</li>
            <li>当社は、本サービスの利用により利用者に生じた損害について、一切の責任を負いません。</li>
            <li>当社は、配送遅延、通信障害、天災その他の不可抗力により生じた損害について責任を負いません。</li>
          </ol>
        ) },
      { title: "第11条（サービス内容の変更等）", content: <p>当社は、利用者に通知することなく、本サービスの内容を変更、停止または終了することができます。</p> },
      { title: "第12条（利用規約の変更）", content: <p>当社は、必要と判断した場合、利用者に通知することなく本規約を変更することができます。変更後の規約は、本サービス上に掲載した時点から効力を生じるものとします。</p> },
      { title: "第13条（準拠法および管轄）",
        content: (
          <ol>
            <li>本規約の解釈には日本法を準拠法とします。</li>
            <li>本サービスに関して紛争が生じた場合、当社の所在地を管轄する裁判所を専属的合意管轄とします。</li>
          </ol>
        ) },
      { title: "制定日", content: <p>制定日：2026年４月１日<br />運営者：株式会社ローシス<br />ショップ名：Lowsys Card Shop</p> },
    ]}
  />
);

window.LCS = Object.assign(window.LCS, { ShopPage, AboutPage, FAQPage, TokushohoPage, PrivacyPage, TermsPage });