function Contact() {
  return (
    <section id="contact" data-screen-label="09 Contact" style={{
      padding: "120px 0",
      background: "linear-gradient(180deg, var(--bg-cream), var(--bg-warm))",
      position: "relative",
      overflow: "hidden",
    }}>
      <div aria-hidden style={{ position: "absolute", inset: 0, pointerEvents: "none" }}>
        <svg width="100%" height="100%" viewBox="0 0 1440 600" preserveAspectRatio="none">
          <path d="M0,300 C 300,200 700,440 1100,300 C 1300,240 1400,280 1440,260 L1440,600 L0,600 Z" fill="rgba(255,255,255,0.4)"/>
        </svg>
      </div>

      <div style={{ maxWidth: 980, margin: "0 auto", padding: "0 32px", position: "relative" }}>
        <div style={{ textAlign: "center", display: "flex", flexDirection: "column", alignItems: "center", gap: 20 }}>
          <div className="en" style={{ fontSize: 14, letterSpacing: "0.4em", color: "var(--gold-deep)", fontStyle: "italic" }}>
            — CONTACT —
          </div>
          <h2 style={{ fontSize: "clamp(28px, 3.6vw, 44px)", fontWeight: 700, lineHeight: 1.5, letterSpacing: "0.06em" }}>
            お一人で抱え込まず、<br />
            <span style={{ color: "var(--gold-deep)" }}>まずはお話をお聞かせください。</span>
          </h2>
          <p style={{ fontSize: 15, color: "var(--ink)", lineHeight: 2.0, maxWidth: 640 }}>
            障害年金専門の社労士が、お一人おひとりに合わせた最適なサポートをご提案します。<br />
            ご相談は何度でも無料です。
          </p>
        </div>

        {/* Phone primary */}
        <div style={{
          marginTop: 56,
          padding: "48px 40px",
          background: "var(--paper)",
          border: "1px solid var(--line)",
          borderRadius: 4,
          textAlign: "center",
          boxShadow: "var(--shadow-card)",
        }} className="contact-phone">
          <div style={{ fontSize: 13, letterSpacing: "0.3em", color: "var(--gold-deep)", marginBottom: 14 }}>
            お電話でのご相談（無料）
          </div>
          <a href="tel:0120-000-000" style={{
            display: "inline-flex", alignItems: "center", gap: 18,
            color: "var(--ink)",
          }}>
            <svg width="38" height="38" viewBox="0 0 24 24" fill="none" stroke="var(--gold-deep)" strokeWidth="1.5"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
            <span className="num phone-num" style={{ fontSize: "clamp(36px, 6vw, 60px)", fontWeight: 500, letterSpacing: "0.05em", color: "var(--gold-deep)", lineHeight: 1 }}>
              0120-000-000
            </span>
          </a>
          <div style={{ marginTop: 16, fontSize: 13, color: "var(--ink-soft)", letterSpacing: "0.1em" }}>
            受付時間 ／ 平日 9:00 〜 18:00（土日祝を除く）
          </div>
          <div style={{ marginTop: 24, display: "flex", justifyContent: "center", gap: 16, flexWrap: "wrap" }}>
            <Pill icon="✓">通話料無料</Pill>
            <Pill icon="✓">秘密厳守</Pill>
            <Pill icon="✓">何度でも無料相談</Pill>
          </div>
        </div>
      </div>
    </section>
  );
}

function Pill({ icon, children }) {
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 8,
      padding: "6px 16px",
      background: "var(--bg-warm)",
      border: "1px solid var(--line)",
      borderRadius: 999,
      fontSize: 12,
      letterSpacing: "0.1em",
      color: "var(--ink)",
    }}>
      <span style={{ color: "var(--gold)" }}>{icon}</span>
      {children}
    </span>
  );
}

window.Contact = Contact;
