function Pricing() {
  return (
    <section id="pricing" data-screen-label="06 Pricing" style={{
      padding: "140px 0",
      background: "var(--bg-warm)",
    }}>
      <div style={{ maxWidth: 1080, margin: "0 auto", padding: "0 32px" }}>
        <SectionHead en="FEE" ja="安心の" jaAccent="完全成功報酬制" />

        <p style={{ textAlign: "center", marginTop: 28, fontSize: 15, color: "var(--ink-soft)", lineHeight: 2.0 }}>
          着手金は <span style={{ color: "var(--gold-deep)", fontWeight: 700 }}>０円</span>。受給が決定した場合のみ、報酬をいただきます。<br />
          費用面のご心配なく、安心してご相談いただけます。
        </p>

        <div style={{
          marginTop: 64,
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 20,
        }} className="price-grid">
          <PriceCard
            label="ご相談料"
            value="無料"
            sub="何度でも・何時間でも"
            tag="初回〜契約前"
          />
          <PriceCard
            label="着手金"
            value="０"
            unit="円"
            sub="ご契約時のお支払いはありません"
            tag="ご契約時"
            primary
          />
          <PriceCard
            label="成功報酬"
            value="◯ヶ月分"
            sub="受給決定後の年金額に応じて"
            tag="受給決定時"
          />
        </div>

        {/* Detail breakdown */}
        <div style={{
          marginTop: 56,
          background: "var(--paper)",
          border: "1px solid var(--line)",
          borderRadius: 4,
          padding: "40px 48px",
        }} className="price-detail">
          <h3 style={{ fontSize: 17, fontWeight: 700, letterSpacing: "0.1em", marginBottom: 24, display: "flex", alignItems: "center", gap: 12 }}>
            <span style={{ width: 4, height: 16, background: "var(--gold)" }} /> 報酬の内訳
          </h3>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0 }} className="fee-table">
            <FeeRow label="着手金" value="無料" />
            <FeeRow label="ご相談料" value="無料" />
            <FeeRow label="成功報酬（年金月額の◯ヶ月分）" value="例：◯◯◯,◯◯◯ 円〜" />
            <FeeRow label="遡及分（過去分一時金の◯◯％）" value="例：◯◯◯,◯◯◯ 円〜" />
          </div>
          <p style={{ fontSize: 12, color: "var(--ink-mute)", marginTop: 20, lineHeight: 1.9 }}>
            ※ 表示額は税込目安です。具体的な金額はご契約前にお見積もりをご提示します。<br />
            ※ 受給に至らなかった場合、報酬は一切発生いたしません（実費を除く）。
          </p>
        </div>
      </div>

      <style>{`
        @media (max-width: 820px) {
          .price-grid { grid-template-columns: 1fr !important; }
          .fee-table { grid-template-columns: 1fr !important; }
          .price-detail { padding: 28px 24px !important; }
        }
      `}</style>
    </section>
  );
}

function PriceCard({ label, value, unit, sub, tag, primary }) {
  return (
    <div style={{
      padding: "36px 28px",
      background: primary ? "linear-gradient(180deg, #FFFDF7, var(--bg-cream))" : "var(--paper)",
      border: primary ? "1.5px solid var(--gold)" : "1px solid var(--line)",
      borderRadius: 4,
      textAlign: "center",
      position: "relative",
      boxShadow: primary ? "0 18px 40px rgba(184,147,90,0.18)" : "var(--shadow-soft)",
    }}>
      {primary && (
        <div style={{
          position: "absolute", top: -12, left: "50%", transform: "translateX(-50%)",
          background: "var(--gold)",
          color: "white",
          fontSize: 11,
          letterSpacing: "0.2em",
          padding: "4px 16px",
          borderRadius: 999,
        }}>
          安心ポイント
        </div>
      )}
      <div style={{ fontSize: 11, letterSpacing: "0.25em", color: "var(--gold-deep)", marginBottom: 16 }}>
        {tag}
      </div>
      <div style={{ fontSize: 14, color: "var(--ink-soft)", letterSpacing: "0.1em", marginBottom: 8 }}>
        {label}
      </div>
      <div style={{ display: "flex", alignItems: "baseline", justifyContent: "center", gap: 4, marginBottom: 12 }}>
        <span className="num" style={{ fontSize: 56, fontWeight: 500, color: primary ? "var(--gold-deep)" : "var(--ink)", lineHeight: 1, letterSpacing: "0.02em" }}>
          {value}
        </span>
        {unit && <span style={{ fontSize: 18, color: "var(--ink-soft)" }}>{unit}</span>}
      </div>
      <div style={{ fontSize: 12, color: "var(--ink-soft)", letterSpacing: "0.05em", lineHeight: 1.8 }}>
        {sub}
      </div>
    </div>
  );
}

function FeeRow({ label, value }) {
  return (
    <React.Fragment>
      <div style={{ padding: "16px 4px", borderBottom: "1px solid var(--line-soft)", fontSize: 14, color: "var(--ink)" }}>{label}</div>
      <div style={{ padding: "16px 4px", borderBottom: "1px solid var(--line-soft)", fontSize: 14, color: "var(--gold-deep)", textAlign: "right", letterSpacing: "0.05em" }}>{value}</div>
    </React.Fragment>
  );
}

window.Pricing = Pricing;