// about.jsx — 会社概要 / プライバシーポリシー / 特定商取引法に基づく表記

const COMPANY = {
  legalName: "株式会社アソシエーションオフィス",
  ceo: "泉 もとき",
  ceoTitle: "代表取締役",
  affiliation: "特定非営利活動法人ＩＴ整備士協会　理事",
  founded: "2011年10月4日",
  zip: "〒110-0012",
  address: "東京都台東区竜泉1-28-6 501",
  phone: "03-6820-6847",
  phoneHours: "平日 9:00 〜 19:00",
  email: "pake@a-off.com",
  salesManager: "西村 友寿",
  salesHours: "平日 13:00 〜 18:00",
};

// 共通: 情報ページのヒーロー
function PageHero({ eyebrow, title, lede, navigate }) {
  return (
    <section className="info-hero">
      <div className="container container--narrow">
        <Breadcrumb navigate={navigate} items={[{ label: "Top", href: "top" }, { label: title }]} />
        <div className="eyebrow" style={{ marginTop: 24 }}>{eyebrow}</div>
        <h1 className="info-hero__title">{title}</h1>
        {lede && <p className="info-hero__lede">{lede}</p>}
      </div>
    </section>
  );
}

// 共通: 定義リスト風テーブル
function InfoTable({ rows }) {
  return (
    <dl className="info-dl">
      {rows.map((r, i) => (
        <div className="info-dl__row" key={i}>
          <dt className="info-dl__dt">{r.k}</dt>
          <dd className="info-dl__dd">{r.v}</dd>
        </div>
      ))}
    </dl>
  );
}

// 会社概要ページ
function AboutPage({ navigate }) {
  const rows = [
    { k: "法人名", v: COMPANY.legalName },
    { k: "代表取締役", v: COMPANY.ceo },
    { k: "所属団体・役職", v: COMPANY.affiliation },
    { k: "設立", v: COMPANY.founded },
    { k: "本社住所", v: <>{COMPANY.zip}<br />{COMPANY.address}</> },
    { k: "電話番号", v: <>{COMPANY.phone}<br /><small style={{ color: "var(--muted)" }}>受付時間：{COMPANY.phoneHours}</small></> },
    { k: "メール", v: <a href={`mailto:${COMPANY.email}`}>{COMPANY.email}</a> },
  ];
  const businessGroups = [
    {
      title: "システム開発・AI技術",
      items: [
        "生成AIを活用したシステム開発",
        "ブログ自動生成・投稿システムの構築",
        "業務システム・業種特化型システムの開発",
        "決済・課金、問い合わせ管理、トレーニングなど業務支援システムの構築"
      ]
    },
    {
      title: "WEB・マーケティング支援",
      items: [
        "ホームページ・ECサイトの企画・制作",
        "SNSマーケティング管理システムの開発",
        "メールマーケティング・集客支援システムの構築",
        "広告管理・SEO/SEM支援ツールの開発"
      ]
    },
    {
      title: "コンテンツ制作・教育支援",
      items: [
        "AI導入コンサルティング・社内推進者育成",
        "業務AI化のための研修・伴走支援",
        "業界別AI活用ナレッジの整備"
      ]
    }
  ];
  return (
    <div className="page-fade">
      <PageHero
        eyebrow="Company"
        title="会社概要"
        lede="AI導入コンサルティング事業を運営する、株式会社アソシエーションオフィスの会社情報です。"
        navigate={navigate}
      />
      <section className="section section--tight">
        <div className="container container--narrow">
          <InfoTable rows={rows} />
          <h2 className="info-h2">事業内容</h2>
          <div className="info-business">
            {businessGroups.map((g, i) => (
              <div className="info-business__group" key={i}>
                <div className="info-business__title">【{g.title}】</div>
                <ul className="info-business__list">
                  {g.items.map((it, j) => <li key={j}>{it}</li>)}
                </ul>
              </div>
            ))}
          </div>
        </div>
      </section>
      <CTABanner />
      <FinalCTA />
    </div>
  );
}

// プライバシーポリシーページ
function PrivacyPage({ navigate }) {
  const sections = [
    {
      title: "個人情報の管理",
      body: "当社は、お客さまの個人情報を正確かつ最新の状態に保ち、個人情報への不正アクセス・紛失・破損・改ざん・漏洩などを防止するため、セキュリティシステムの維持・管理体制の整備・社員教育の徹底等の必要な措置を講じ、安全対策を実施し個人情報の厳重な管理を行ないます。"
    },
    {
      title: "個人情報の利用目的",
      body: "お客さまからお預かりした個人情報は、お客さまから委託を受けた業務で利用します。委託業務以外で利用が必要となる場合、お客さまと別途協議のうえ円満に解決を図ります。"
    },
    {
      title: "個人情報の第三者への開示・提供の禁止",
      body: "当社は、お客さまよりお預かりした個人情報を適切に管理し、次のいずれかに該当する場合を除き、個人情報を第三者に開示いたしません。",
      list: [
        "お客さまの同意がある場合",
        "お客さまが希望される業務を行なうために当社が業務を委託する業者に対して開示する場合",
        "法令に基づき開示することが必要である場合"
      ]
    },
    {
      title: "個人情報の安全対策",
      body: "当社は、個人情報の正確性及び安全性確保のために、セキュリティに万全の対策を講じています。"
    },
    {
      title: "ご本人の照会",
      body: "お客さまがご本人の個人情報の照会・修正・削除などをご希望される場合には、ご本人であることを確認の上、対応させていただきます。"
    },
    {
      title: "法令、規範の遵守と見直し",
      body: "当社は、保有する個人情報に関して適用される日本の法令、その他規範を遵守するとともに、本ポリシーの内容を適宜見直し、その改善に努めます。"
    }
  ];
  return (
    <div className="page-fade">
      <PageHero
        eyebrow="Privacy Policy"
        title="プライバシーポリシー"
        lede="株式会社アソシエーションオフィス（以下「当社」）は、以下のとおり個人情報保護方針を定め、個人情報保護の仕組みを構築し、リアル・ネット関わらず全従業員に個人情報保護の重要性の認識と取組みを徹底させることにより、個人情報の保護を推進致します。"
        navigate={navigate}
      />
      <section className="section section--tight">
        <div className="container container--narrow">
          <div className="policy">
            {sections.map((s, i) => (
              <div className="policy__section" key={i}>
                <h3 className="policy__h">{s.title}</h3>
                <p className="policy__p">{s.body}</p>
                {s.list && (
                  <ul className="policy__list">
                    {s.list.map((l, j) => <li key={j}>{l}</li>)}
                  </ul>
                )}
              </div>
            ))}
            <div className="policy__section">
              <h3 className="policy__h">お問い合わせ</h3>
              <p className="policy__p">当社の個人情報の取扱に関するお問い合せは下記までご連絡ください。</p>
              <div className="policy__contact">
                <div><strong>{COMPANY.legalName}</strong></div>
                <div>メール：<a href={`mailto:${COMPANY.email}`}>{COMPANY.email}</a></div>
                <div>電話：{COMPANY.phone}</div>
              </div>
            </div>
          </div>
        </div>
      </section>
      <FinalCTA />
    </div>
  );
}

// 特定商取引法に基づく表記
function LegalPage({ navigate }) {
  const rows = [
    { k: "法人名", v: COMPANY.legalName },
    { k: "代表責任者", v: COMPANY.ceo },
    { k: "本社住所", v: <>{COMPANY.zip}<br />{COMPANY.address}</> },
    { k: "電話番号", v: <>{COMPANY.phone}<br /><small style={{ color: "var(--muted)" }}>受付時間：{COMPANY.phoneHours}</small></> },
    { k: "メール", v: <a href={`mailto:${COMPANY.email}`}>{COMPANY.email}</a> },
    { k: "販売責任者氏名", v: COMPANY.salesManager },
    { k: "営業時間・問合せ受付時間など", v: COMPANY.salesHours },
    { k: "販売価格", v: "各販売ページに記載しています。" },
    { k: "お支払い方法", v: "クレジットカード" },
    { k: "販売価格以外でお客様に発生する金銭", v: "当サイトのページの閲覧、コンテンツ購入、ソフトウェアのダウンロード等に必要となるインターネット接続料金、通信料金等はお客様の負担となります。それぞれの料金は、お客様がご利用のインターネットプロバイダーまたは携帯電話会社にお問い合わせください。" },
    { k: "商品の引き渡し時期", v: "各販売ページに記載しています。" },
    { k: "申込の有効期限", v: "各販売ページに記載しています。" },
    { k: "返品、キャンセル・解約等の対応", v: "商品の性質上、お客様都合による購入確定後のキャンセル・返金についてはお受けできません。解約いただくと解約指定された日付にて契約が終了しますが、中途解約による返金は承っておりません。" },
    { k: "特別条件", v: <>クーリングオフについて<br /><span style={{ color: "var(--muted)" }}>特定商取引法に規定されているクーリングオフが適用されるサービスではありません。</span></> },
  ];
  return (
    <div className="page-fade">
      <PageHero
        eyebrow="Legal"
        title="特定商取引法に基づく表記"
        lede="当社では、特定商取引法に基づき、お客様に安心してサービスをご利用いただけるよう、必要な情報を明示しております。以下の内容をご確認いただき、不明点がございましたらお気軽にお問い合わせください。"
        navigate={navigate}
      />
      <section className="section section--tight">
        <div className="container container--narrow">
          <InfoTable rows={rows} />
        </div>
      </section>
      <FinalCTA />
    </div>
  );
}

Object.assign(window, { COMPANY, AboutPage, PrivacyPage, LegalPage });