function Footer() {
  return (
    <footer style={{
      background: "#1F1B14",
      color: "#E8DFD0",
      padding: "72px 0 28px",
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "0 32px" }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: "1.4fr 1fr 1fr 1fr",
          gap: 48,
          paddingBottom: 48,
          borderBottom: "1px solid rgba(232,223,208,0.15)",
        }} className="footer-grid">
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 20 }}>
              <div style={{
                width: 40, height: 40,
                borderRadius: "50%",
                border: "1px solid var(--gold-light)",
                display: "grid", placeItems: "center",
              }}>
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                  <path d="M12 3 C 7 6, 5 11, 6 17 C 6 17, 9 14, 12 14 C 15 14, 18 17, 18 17 C 19 11, 17 6, 12 3 Z" fill="var(--gold)" opacity="0.85"/>
                  <path d="M12 14 L 12 21" stroke="var(--gold-light)" strokeWidth="1.4" strokeLinecap="round"/>
                </svg>
              </div>
              <div>
                <div style={{ fontSize: 16, fontWeight: 700, letterSpacing: "0.05em" }}>障害年金専門 社労士事務所</div>
                <div style={{ fontSize: 11, color: "rgba(232,223,208,0.6)", letterSpacing: "0.1em", marginTop: 2 }}>
                  社会保険労務士法人 ◯◯サポート
                </div>
              </div>
            </div>
            <p style={{ fontSize: 13, color: "rgba(232,223,208,0.7)", lineHeight: 2.0 }}>
              全国47都道府県対応。<br />
              障害年金の申請を、最後まで丁寧に伴走いたします。
            </p>
          </div>

          <FootCol title="サイトマップ" items={[
            ["ホーム", "#top"],
            ["お悩み", "#worries"],
            ["事務所について", "#strengths"],
            ["受給診断", "#simulator"],
          ]} />
          <FootCol title="サービス" items={[
            ["ご相談の流れ", "#flow"],
            ["料金", "#pricing"],
            ["ご相談者様の声", "#voice"],
            ["よくあるご質問", "#faq"],
          ]} />
          <div>
            <div style={{ fontSize: 12, letterSpacing: "0.2em", color: "var(--gold-light)", marginBottom: 18 }}>
              CONTACT
            </div>
            <div className="num" style={{ fontSize: 22, fontWeight: 500, letterSpacing: "0.05em", marginBottom: 6 }}>
              0120-000-000
            </div>
            <div style={{ fontSize: 12, color: "rgba(232,223,208,0.6)", lineHeight: 2.0 }}>
              平日 9:00〜18:00<br />
              （土日祝を除く）
            </div>
            <div style={{ marginTop: 20, fontSize: 12, color: "rgba(232,223,208,0.6)", lineHeight: 2.0 }}>
              〒◯◯◯-◯◯◯◯<br />
              ◯◯県◯◯市◯◯町◯-◯-◯
            </div>
          </div>
        </div>

        <div style={{
          paddingTop: 28,
          display: "flex", justifyContent: "space-between", alignItems: "center",
          flexWrap: "wrap", gap: 16,
          fontSize: 11,
          color: "rgba(232,223,208,0.5)",
          letterSpacing: "0.1em",
        }}>
          <div>© 2026 社会保険労務士法人 ◯◯サポート. All rights reserved.</div>
          <div style={{ display: "flex", gap: 24 }}>
            <a href="#" style={{ color: "inherit" }}>プライバシーポリシー</a>
            <a href="#" style={{ color: "inherit" }}>特定商取引法に基づく表記</a>
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 820px) {
          .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
        }
        @media (max-width: 520px) {
          .footer-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </footer>
  );
}

function FootCol({ title, items }) {
  return (
    <div>
      <div style={{ fontSize: 12, letterSpacing: "0.2em", color: "var(--gold-light)", marginBottom: 18 }}>
        {title.toUpperCase ? title : title}
      </div>
      <ul style={{ listStyle: "none", display: "flex", flexDirection: "column", gap: 12 }}>
        {items.map(([label, href]) => (
          <li key={label}>
            <a href={href} style={{ fontSize: 13, color: "rgba(232,223,208,0.75)", letterSpacing: "0.05em" }}>
              {label}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}

window.Footer = Footer;