// sc-law.jsx — 特定商取引法に基づく表記

function LawPage() {
  const PageHero = () => (
    <section style={{ background: "var(--dark)", padding: "160px 24px 100px", textAlign: "center" }}>
      <AnimateIn>
        <p style={{ fontFamily: "var(--font-sans)", fontSize: "11px", letterSpacing: "0.2em", color: "var(--accent)", textTransform: "uppercase", marginBottom: "20px" }}>Specified Commercial Transactions Act</p>
        <h1 style={{ fontFamily: "var(--font-serif)", fontSize: "clamp(24px,4vw,44px)", fontWeight: 600, color: "#fff", lineHeight: 1.4, marginBottom: "20px" }}>特定商取引法に基づく表記</h1>
        <GoldLine width="40px" margin="0 auto" />
      </AnimateIn>
    </section>
  );

  const items = [
    { label: "販売事業者名", value: "中本達也" },
    { label: "屋号", value: "スポッターコーチング" },
    { label: "所在地", value: "お問い合わせいただいた際に開示いたします" },
    { label: "電話番号", value: "お問い合わせいただいた際に開示いたします" },
    { label: "メールアドレス", value: "お問い合わせフォームよりご連絡ください" },
    { label: "サービスの名称", value: "スポッターコーチング（ビジネスコーチングサービス）" },
    { label: "サービスの内容", value: "起業家・経営者・個人事業主向けの伴走型ビジネスコーチング。毎日の進捗確認・週次オンラインセッション・タスク構造化・目標管理などを提供します。" },
    { label: "販売価格", value: "無料トライアル（1週間）：無料\n有料プランについては、初回セッション後に個別にご案内いたします。" },
    { label: "料金以外の費用", value: "インターネット接続にかかる通信費用はお客様のご負担となります。" },
    { label: "申込方法", value: "当サイトのお申し込みフォームまたは公式LINEよりお申し込みください。" },
    { label: "支払い方法", value: "銀行振込・クレジットカード（詳細は契約時にご案内いたします）" },
    { label: "支払い時期", value: "契約成立後、指定の期日までにお支払いください（詳細は契約時にご案内いたします）。" },
    { label: "サービス提供時期", value: "お申し込み確認後、担当コーチより連絡のうえ開始日を決定します。通常、お申し込みから2〜5営業日以内に初回セッションを実施します。" },
    { label: "返金・キャンセルポリシー", value: "無料トライアル期間中はいつでもキャンセル可能です。有料プランのキャンセル・返金については、サービス開始前であれば全額返金いたします。サービス開始後のキャンセルについては、残期間に応じた返金となります。詳細は契約時にご確認ください。" },
    { label: "動作環境", value: "オンラインセッションはZoom等のビデオ通話ツールを使用します。インターネット接続環境およびマイク・カメラ付きのデバイスをご用意ください。" },
  ];

  const Body = () => (
    <section style={{ background: "var(--bg)", padding: "80px 24px 120px" }}>
      <div style={{ maxWidth: "860px", margin: "0 auto" }}>
        <AnimateIn>
          <p style={{ fontFamily: "var(--font-sans)", fontSize: "13px", color: "var(--text-muted)", lineHeight: 1.9, marginBottom: "48px", padding: "20px 24px", background: "var(--bg-alt)", border: "1px solid var(--border)", borderLeft: "3px solid var(--accent)" }}>
            特定商取引法第11条（通信販売についての広告）に基づき、以下の事項を表記します。
          </p>
        </AnimateIn>
        <div style={{ display: "flex", flexDirection: "column", gap: "2px" }}>
          {items.map((item, i) => (
            <AnimateIn key={item.label} delay={i * 30}>
              <div style={{
                display: "grid", gridTemplateColumns: "200px 1fr",
                border: "1px solid var(--border)",
                background: i % 2 === 0 ? "#fff" : "var(--bg-alt)",
              }} className="law-row">
                <div style={{
                  padding: "20px 24px", background: "var(--dark)",
                  display: "flex", alignItems: "flex-start",
                }}>
                  <p style={{ fontFamily: "var(--font-sans)", fontSize: "13px", fontWeight: 500, color: "rgba(255,255,255,0.85)", lineHeight: 1.6 }}>{item.label}</p>
                </div>
                <div style={{ padding: "20px 28px" }}>
                  <p style={{ fontFamily: "var(--font-sans)", fontSize: "14px", color: "var(--text)", lineHeight: 2, whiteSpace: "pre-line" }}>{item.value}</p>
                </div>
              </div>
            </AnimateIn>
          ))}
        </div>
        <AnimateIn delay={200}>
          <div style={{ marginTop: "56px", padding: "28px 32px", background: "var(--bg-alt)", border: "1px solid var(--border)" }}>
            <p style={{ fontFamily: "var(--font-sans)", fontSize: "13px", color: "var(--text-muted)", lineHeight: 2 }}>
              本表記に関するお問い合わせは、<a href="contact.html" style={{ color: "var(--accent)", textDecoration: "none" }}>お問い合わせフォーム</a>または公式LINEよりご連絡ください。
            </p>
          </div>
        </AnimateIn>
      </div>
    </section>
  );

  return (
    <div>
      <PageHero />
      <Body />
    </div>
  );
}

window.LawPage = LawPage;
