// Policy page — プライバシーポリシー & 特定商取引法に基づく表記

const POLICY_TWEAK_DEFAULTS = {
  "primaryColor": "#14224a",
  "accent": "#2a4691",
  "fontJp": "noto",
  "dark": false,
  "btnRadius": 10,
  "cardRadius": 16,
  "density": "regular",
};

// ─── 見出しコンポーネント ──────────────────────────────────────────────────
function PolicySection({ id, title, children }) {
  return (
    <section id={id} style={{ marginBottom: 64 }}>
      <h2 style={{
        fontSize: "clamp(20px, 2.8vw, 26px)",
        fontWeight: 800,
        color: "var(--fg)",
        borderLeft: "4px solid var(--primary-600)",
        paddingLeft: 16,
        margin: "0 0 28px",
        letterSpacing: "-0.01em",
        lineHeight: 1.4,
      }}>{title}</h2>
      {children}
    </section>
  );
}

function PolicyHeading({ children }) {
  return (
    <h3 style={{
      fontSize: 15,
      fontWeight: 700,
      color: "var(--fg)",
      margin: "24px 0 8px",
    }}>{children}</h3>
  );
}

function PolicyText({ children }) {
  return (
    <p style={{
      fontSize: 14,
      color: "var(--fg-2)",
      lineHeight: 2,
      margin: "0 0 12px",
    }}>{children}</p>
  );
}

function PolicyTable({ rows }) {
  return (
    <div className="card" style={{ overflow: "hidden", marginBottom: 8 }}>
      {rows.map((row, i) => (
        <div key={i} style={{
          display: "grid",
          gridTemplateColumns: "160px 1fr",
          borderBottom: i < rows.length - 1 ? "1px solid var(--border)" : "none",
        }} className="about-row">
          <div style={{
            padding: "14px 16px",
            fontSize: 13,
            fontWeight: 700,
            color: "var(--fg-3)",
            background: "var(--bg-soft)",
            display: "flex",
            alignItems: "flex-start",
            borderRight: "1px solid var(--border)",
          }}>{row.label}</div>
          <div style={{
            padding: "14px 20px",
            fontSize: 14,
            color: "var(--fg)",
            lineHeight: 1.8,
          }}>{row.value}</div>
        </div>
      ))}
    </div>
  );
}

// ─── メインアプリ ─────────────────────────────────────────────────────────
function PolicyPage() {
  const [tweaks, setTweak] = useTweaks(POLICY_TWEAK_DEFAULTS);

  React.useEffect(() => {
    const root = document.documentElement;
    root.style.setProperty("--primary",     tweaks.primaryColor);
    root.style.setProperty("--primary-700", `color-mix(in oklab, ${tweaks.primaryColor} 80%, black)`);
    root.style.setProperty("--primary-600", tweaks.primaryColor);
    root.style.setProperty("--primary-500", tweaks.accent);
    root.style.setProperty("--primary-100", `color-mix(in oklab, ${tweaks.primaryColor} 12%, white)`);
    root.style.setProperty("--primary-50",  `color-mix(in oklab, ${tweaks.primaryColor} 6%, white)`);
    root.style.setProperty("--btn-radius",  `${tweaks.btnRadius}px`);
    root.style.setProperty("--card-radius", `${tweaks.cardRadius}px`);
    root.dataset.theme   = tweaks.dark ? "dark" : "light";
    root.dataset.density = tweaks.density;

    // ハッシュアンカーへのスムーズスクロール
    if (window.location.hash) {
      setTimeout(() => {
        const el = document.querySelector(window.location.hash);
        if (el) el.scrollIntoView({ behavior: "smooth" });
      }, 300);
    }
  }, [tweaks]);

  const tokushohoRows = [
    { label: "事業者名",     value: "白石 智（屋号：ITtechWorks）" },
    { label: "所在地",       value: "神奈川県川崎市（詳細は請求に応じて開示します）" },
    { label: "メールアドレス", value: "info@ittech-works.com" },
    { label: "営業時間",     value: "平日 10:00〜18:00（土日祝を除く）" },
    { label: "サービス料金", value: "各サービスページに記載の価格（税抜）。要件に応じてお見積もりします。" },
    { label: "支払方法",     value: "銀行振込（詳細はお見積もり時にご案内します）" },
    { label: "支払時期",     value: "着手金：契約締結後、残金：納品・検収後" },
    { label: "役務提供時期", value: "契約締結後、別途ご案内するスケジュールに従います" },
    { label: "キャンセル",   value: "制作着手前：全額返金。制作着手後：着手金は返金不可。詳細は契約書に記載。" },
    { label: "特別条件",     value: "なし" },
  ];

  return (
    <>
      <Header tweaks={tweaks} setTweak={setTweak} />
      <main>
        {/* ヒーローヘッダー */}
        <div style={{ position: "relative", height: "clamp(180px, 28vw, 300px)", overflow: "hidden" }}>
          <img
            src="images/policy.png"
            alt=""
            style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center", display: "block" }}
          />
          <div style={{
            position: "absolute", inset: 0,
            background: "linear-gradient(90deg, rgba(10,17,50,0.68) 0%, rgba(10,17,50,0.4) 50%, rgba(10,17,50,0.05) 80%, transparent 100%)",
          }} />
          <div style={{
            position: "absolute", bottom: 0, left: 0, right: 0, height: 64,
            background: "linear-gradient(180deg, transparent, var(--bg))",
          }} />
          <div className="container" style={{
            position: "absolute", inset: 0,
            display: "flex", flexDirection: "column", justifyContent: "center",
          }}>
            <span className="eyebrow" style={{ color: "rgba(255,255,255,0.75)" }}>Legal</span>
            <h1 style={{
              fontSize: "clamp(22px, 3.5vw, 44px)",
              fontWeight: 800,
              letterSpacing: "-0.02em",
              margin: "12px 0 0",
              color: "#fff",
              lineHeight: 1.3,
            }}>
              プライバシーポリシー<br />
              <span style={{ color: "var(--primary-100)", fontSize: "0.65em", fontWeight: 600 }}>
                特定商取引法に基づく表記
              </span>
            </h1>
          </div>
        </div>

        {/* 本文エリア */}
        <div className="container section tight" style={{ maxWidth: 860 }}>

          {/* ─── プライバシーポリシー ─── */}
          <PolicySection id="privacy" title="プライバシーポリシー">
            <PolicyText>
              ITtechWorks（代表：白石 智、以下「当事業者」）は、お客様の個人情報の保護を重要な責務と考え、以下の方針に基づいて適切に取り扱います。
            </PolicyText>

            <PolicyHeading>1. 個人情報の収集</PolicyHeading>
            <PolicyText>
              当事業者は、お問い合わせ・お見積もり・サービス提供に必要な範囲で、氏名・メールアドレス・電話番号・会社名などの個人情報を収集します。
            </PolicyText>

            <PolicyHeading>2. 利用目的</PolicyHeading>
            <PolicyText>
              収集した個人情報は、①お問い合わせへの回答、②サービスの提供・請求、③重要なお知らせの送付、以上の目的にのみ使用します。ご本人の同意なく第三者に提供・開示することはありません（法令に基づく場合を除く）。
            </PolicyText>

            <PolicyHeading>3. 安全管理</PolicyHeading>
            <PolicyText>
              個人情報への不正アクセス・紛失・漏洩・改ざんを防ぐため、適切な安全管理措置を講じます。
            </PolicyText>

            <PolicyHeading>4. Cookie・アクセス解析</PolicyHeading>
            <PolicyText>
              当サイトでは Google アナリティクスを使用しており、Cookie を通じてアクセス情報を収集することがあります。取得される情報は匿名であり、個人を特定するものではありません。Cookie の使用を望まない場合はブラウザの設定で無効化できます。
            </PolicyText>

            <PolicyHeading>5. 開示・訂正・削除</PolicyHeading>
            <PolicyText>
              ご本人からの個人情報の開示・訂正・削除のご要望は、下記お問い合わせ先までご連絡ください。合理的な範囲で速やかに対応いたします。
            </PolicyText>

            <PolicyHeading>6. お問い合わせ先</PolicyHeading>
            <PolicyText>
              メール：info@ittech-works.com　／　受付時間：平日 10:00〜18:00
            </PolicyText>

            <PolicyHeading>7. 改定</PolicyHeading>
            <PolicyText>
              本ポリシーは法令の変更やサービス内容の変更に伴い、予告なく改定する場合があります。最新版は本ページにてご確認ください。
            </PolicyText>
          </PolicySection>

          {/* 区切り線 */}
          <div style={{ borderTop: "1px solid var(--border)", marginBottom: 64 }} />

          {/* ─── 特定商取引法に基づく表記 ─── */}
          <PolicySection id="tokushoho" title="特定商取引法に基づく表記">
            <PolicyTable rows={tokushohoRows} />
            <p style={{ fontSize: 12, color: "var(--fg-4)", marginTop: 12, lineHeight: 1.8 }}>
              ※ 価格はすべて税抜表示です。別途消費税が加算されます。<br />
              ※ 所在地の詳細開示をご希望の場合はメールにてお問い合わせください。
            </p>
          </PolicySection>

        </div>
      </main>
      <Footer />
      <style>{`
        @media (max-width: 480px) {
          .about-row { grid-template-columns: 1fr !important; }
          .about-row > div:first-child { border-right: none !important; border-bottom: 1px solid var(--border); padding: 10px 14px !important; }
          .about-row > div:last-child  { padding: 10px 14px !important; }
        }
      `}</style>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<PolicyPage />);