function SellerMezzCalculator() {
  // ── Property Inputs ──
  const [purchasePrice, setPurchasePrice] = React.useState(10000000);
  const [noi, setNoi] = React.useState(850000);

  // ── Senior Debt ──
  const [seniorLtv, setSeniorLtv] = React.useState(75);
  const [seniorRate, setSeniorRate] = React.useState(6.0);
  const [seniorAmortYears, setSeniorAmortYears] = React.useState(25);

  // ── Seller Mezzanine ──
  const [mezzEnabled, setMezzEnabled] = React.useState(true);
  const [mezzPercent, setMezzPercent] = React.useState(20);
  const [mezzRate, setMezzRate] = React.useState(5.0);
  const [mezzTermMonths, setMezzTermMonths] = React.useState(60);

  // ── Calculations ──
  const calc = React.useMemo(() => {
    const capRate = (noi / purchasePrice) * 100;

    // Senior Debt
    const seniorLoan = purchasePrice * (seniorLtv / 100);
    const monthlyRate = seniorRate / 100 / 12;
    const totalMonths = seniorAmortYears * 12;
    const monthlyPayment =
      monthlyRate > 0
        ? seniorLoan *
          (monthlyRate * Math.pow(1 + monthlyRate, totalMonths)) /
          (Math.pow(1 + monthlyRate, totalMonths) - 1)
        : seniorLoan / totalMonths;
    const annualSeniorDebtService = monthlyPayment * 12;

    // Without Mezz
    const equityNoMezz = purchasePrice - seniorLoan;
    const cashFlowNoMezz = noi - annualSeniorDebtService;
    const cocNoMezz =
      equityNoMezz > 0 ? (cashFlowNoMezz / equityNoMezz) * 100 : 0;
    const dscrNoMezz =
      annualSeniorDebtService > 0 ? noi / annualSeniorDebtService : 0;

    // With Mezz
    const mezzAmount = purchasePrice * (mezzPercent / 100);
    const annualMezzPayment = mezzAmount * (mezzRate / 100);
    const totalAnnualDebtService = annualSeniorDebtService + annualMezzPayment;
    const equityWithMezz = purchasePrice - seniorLoan - mezzAmount;
    const cashFlowWithMezz = noi - totalAnnualDebtService;
    const cocWithMezz =
      equityWithMezz > 0 ? (cashFlowWithMezz / equityWithMezz) * 100 : 0;
    const dscrWithMezz =
      totalAnnualDebtService > 0 ? noi / totalAnnualDebtService : 0;

    // Seller perspective
    const mezzTermYears = mezzTermMonths / 12;
    const totalMezzInterest = annualMezzPayment * mezzTermYears;
    const totalSellerProceeds = purchasePrice + totalMezzInterest;

    // CoC delta
    const cocDelta = cocWithMezz - cocNoMezz;

    return {
      capRate,
      seniorLoan,
      annualSeniorDebtService,
      equityNoMezz,
      cashFlowNoMezz,
      cocNoMezz,
      dscrNoMezz,
      mezzAmount,
      annualMezzPayment,
      totalAnnualDebtService,
      equityWithMezz,
      cashFlowWithMezz,
      cocWithMezz,
      dscrWithMezz,
      totalMezzInterest,
      totalSellerProceeds,
      cocDelta,
      mezzTermYears,
    };
  }, [
    purchasePrice,
    noi,
    seniorLtv,
    seniorRate,
    seniorAmortYears,
    mezzEnabled,
    mezzPercent,
    mezzRate,
    mezzTermMonths,
  ]);

  // ── Formatters ──
  const fmtCurrency = (val) => {
    if (Math.abs(val) >= 1e9)
      return (val < 0 ? "-" : "") + "$" + (Math.abs(val) / 1e9).toFixed(2) + "B";
    if (Math.abs(val) >= 1e6)
      return (val < 0 ? "-" : "") + "$" + (Math.abs(val) / 1e6).toFixed(2) + "M";
    if (Math.abs(val) >= 1e3)
      return (val < 0 ? "-" : "") + "$" + (Math.abs(val) / 1e3).toFixed(0) + "K";
    return (val < 0 ? "-" : "") + "$" + Math.abs(val).toLocaleString();
  };

  const fmtFullCurrency = (val) =>
    (val < 0 ? "-$" : "$") +
    Math.abs(Math.round(val)).toLocaleString("en-US");

  const fmtPct = (val) => val.toFixed(2) + "%";

  const dscrColor = (val) => {
    if (val >= 1.25) return "#4ADE80";
    if (val >= 1.0) return "#F59E0B";
    return "#EF4444";
  };

  const cocColor = (val) => {
    if (val >= 12) return "#4ADE80";
    if (val >= 8) return "#C9A962";
    if (val >= 0) return "#F59E0B";
    return "#EF4444";
  };

  // ── Slider Component ──
  const SliderInput = ({
    label,
    value,
    setValue,
    min,
    max,
    step,
    format,
    suffix,
  }) => {
    const pct = ((value - min) / (max - min)) * 100;
    return (
      <div style={{ marginBottom: 20 }}>
        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "center",
            marginBottom: 8,
          }}
        >
          <span
            style={{
              fontFamily: "'DM Sans', sans-serif",
              fontSize: 13,
              color: "#B8B5AE",
              letterSpacing: "0.02em",
            }}
          >
            {label}
          </span>
          <span
            style={{
              fontFamily: "'JetBrains Mono', monospace",
              fontSize: 14,
              color: "#F2F0ED",
              fontWeight: 500,
            }}
          >
            {format ? format(value) : value}
            {suffix || ""}
          </span>
        </div>
        <input
          type="range"
          min={min}
          max={max}
          step={step}
          value={value}
          onChange={(e) => setValue(parseFloat(e.target.value))}
          style={{
            width: "100%",
            height: 4,
            appearance: "none",
            WebkitAppearance: "none",
            background: `linear-gradient(to right, #C9A962 0%, #C9A962 ${pct}%, rgba(255,255,255,0.08) ${pct}%, rgba(255,255,255,0.08) 100%)`,
            borderRadius: 2,
            outline: "none",
            cursor: "pointer",
          }}
        />
        <style>{`
          input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #C9A962;
            cursor: pointer;
            box-shadow: 0 0 10px rgba(201,169,98,0.4);
            border: 2px solid #07090F;
          }
          input[type="range"]::-moz-range-thumb {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: #C9A962;
            cursor: pointer;
            box-shadow: 0 0 10px rgba(201,169,98,0.4);
            border: 2px solid #07090F;
          }
        `}</style>
      </div>
    );
  };

  // ── Result Row ──
  const ResultRow = ({ label, value, color, bold, mono }) => (
    <div
      style={{
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
        padding: "10px 0",
        borderBottom: "1px solid rgba(255,255,255,0.04)",
      }}
    >
      <span
        style={{
          fontFamily: "'DM Sans', sans-serif",
          fontSize: 13,
          color: "#6B6860",
        }}
      >
        {label}
      </span>
      <span
        style={{
          fontFamily: mono
            ? "'JetBrains Mono', monospace"
            : "'DM Sans', sans-serif",
          fontSize: 14,
          color: color || "#F2F0ED",
          fontWeight: bold ? 700 : 500,
        }}
      >
        {value}
      </span>
    </div>
  );

  // ── Card Styles ──
  const glassCard = {
    background: "rgba(255,255,255,0.03)",
    backdropFilter: "blur(20px)",
    WebkitBackdropFilter: "blur(20px)",
    border: "1px solid rgba(255,255,255,0.08)",
    borderRadius: 16,
    padding: 32,
  };

  const glassCardGold = {
    ...glassCard,
    border: "1px solid rgba(201,169,98,0.25)",
    boxShadow: "0 0 60px rgba(201,169,98,0.06)",
  };

  return (
    <section
      style={{
        background: "#0D1117",
        padding: "100px 24px",
        fontFamily: "'DM Sans', sans-serif",
      }}
    >
      {/* Google Fonts */}
      <link
        href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
        rel="stylesheet"
      />

      <div style={{ maxWidth: 1400, margin: "0 auto" }}>
        {/* Header */}
        <div style={{ marginBottom: 60 }}>
          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: 12,
              marginBottom: 20,
            }}
          >
            <div
              style={{
                width: 32,
                height: 1,
                background:
                  "linear-gradient(90deg, #C9A962, transparent)",
              }}
            />
            <span
              style={{
                fontFamily: "'JetBrains Mono', monospace",
                fontSize: 11,
                letterSpacing: "0.15em",
                color: "#C9A962",
                textTransform: "uppercase",
              }}
            >
              Deal Structures
            </span>
          </div>
          <h2
            style={{
              fontFamily: "'Cormorant Garamond', serif",
              fontSize: "clamp(2rem, 4vw, 3.2rem)",
              fontWeight: 600,
              color: "#F2F0ED",
              lineHeight: 1.15,
              margin: 0,
              marginBottom: 12,
            }}
          >
            Seller Mezzanine Financing —{" "}
            <span style={{ fontStyle: "italic", color: "#C9A962" }}>
              See the Impact on Your Returns
            </span>
          </h2>
          <p
            style={{
              fontFamily: "'DM Sans', sans-serif",
              fontSize: 16,
              color: "#B8B5AE",
              maxWidth: 700,
              lineHeight: 1.7,
              margin: 0,
            }}
          >
            Adjust the inputs below to see how seller mezzanine changes
            cash-on-cash returns in real-time. Toggle mezzanine on and off
            to compare.
          </p>
        </div>

        {/* Main Grid: Inputs + Results */}
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.4fr)",
            gap: 32,
            alignItems: "start",
          }}
        >
          {/* ─── LEFT: INPUTS ─── */}
          <div style={glassCard}>
            {/* Property Inputs */}
            <div style={{ marginBottom: 32 }}>
              <h3
                style={{
                  fontFamily: "'JetBrains Mono', monospace",
                  fontSize: 11,
                  letterSpacing: "0.1em",
                  color: "#C9A962",
                  textTransform: "uppercase",
                  marginBottom: 20,
                  marginTop: 0,
                }}
              >
                Property Inputs
              </h3>
              <SliderInput
                label="Purchase Price"
                value={purchasePrice}
                setValue={setPurchasePrice}
                min={2000000}
                max={50000000}
                step={500000}
                format={fmtCurrency}
              />
              <SliderInput
                label="Net Operating Income (NOI)"
                value={noi}
                setValue={setNoi}
                min={100000}
                max={5000000}
                step={25000}
                format={fmtCurrency}
              />
              <div
                style={{
                  display: "flex",
                  justifyContent: "space-between",
                  padding: "8px 0",
                  borderTop: "1px solid rgba(255,255,255,0.06)",
                  marginTop: 8,
                }}
              >
                <span
                  style={{ fontSize: 13, color: "#6B6860" }}
                >
                  Cap Rate
                </span>
                <span
                  style={{
                    fontFamily: "'JetBrains Mono', monospace",
                    fontSize: 14,
                    color: "#C9A962",
                    fontWeight: 500,
                  }}
                >
                  {calc.capRate.toFixed(2)}%
                </span>
              </div>
            </div>

            {/* Senior Debt */}
            <div style={{ marginBottom: 32 }}>
              <h3
                style={{
                  fontFamily: "'JetBrains Mono', monospace",
                  fontSize: 11,
                  letterSpacing: "0.1em",
                  color: "#C9A962",
                  textTransform: "uppercase",
                  marginBottom: 20,
                  marginTop: 0,
                }}
              >
                Senior Debt
              </h3>
              <SliderInput
                label="Loan-to-Value (LTV)"
                value={seniorLtv}
                setValue={setSeniorLtv}
                min={60}
                max={80}
                step={1}
                suffix="%"
              />
              <SliderInput
                label="Interest Rate"
                value={seniorRate}
                setValue={setSeniorRate}
                min={4.5}
                max={8.0}
                step={0.25}
                suffix="%"
              />
              <div style={{ marginBottom: 20 }}>
                <div
                  style={{
                    display: "flex",
                    justifyContent: "space-between",
                    marginBottom: 8,
                  }}
                >
                  <span style={{ fontSize: 13, color: "#B8B5AE" }}>
                    Amortization
                  </span>
                </div>
                <select
                  value={seniorAmortYears}
                  onChange={(e) =>
                    setSeniorAmortYears(parseInt(e.target.value))
                  }
                  style={{
                    width: "100%",
                    padding: "10px 14px",
                    background: "rgba(255,255,255,0.04)",
                    border: "1px solid rgba(255,255,255,0.1)",
                    borderRadius: 8,
                    color: "#F2F0ED",
                    fontFamily: "'JetBrains Mono', monospace",
                    fontSize: 13,
                    outline: "none",
                    cursor: "pointer",
                    appearance: "none",
                    WebkitAppearance: "none",
                  }}
                >
                  <option value={20} style={{ background: "#141B24" }}>
                    20 Years
                  </option>
                  <option value={25} style={{ background: "#141B24" }}>
                    25 Years
                  </option>
                  <option value={30} style={{ background: "#141B24" }}>
                    30 Years
                  </option>
                </select>
              </div>
            </div>

            {/* Seller Mezzanine */}
            <div>
              <div
                style={{
                  display: "flex",
                  justifyContent: "space-between",
                  alignItems: "center",
                  marginBottom: 20,
                }}
              >
                <h3
                  style={{
                    fontFamily: "'JetBrains Mono', monospace",
                    fontSize: 11,
                    letterSpacing: "0.1em",
                    color: "#C9A962",
                    textTransform: "uppercase",
                    margin: 0,
                  }}
                >
                  Seller Mezzanine
                </h3>
                {/* Toggle */}
                <div
                  onClick={() => setMezzEnabled(!mezzEnabled)}
                  style={{
                    width: 48,
                    height: 26,
                    borderRadius: 13,
                    background: mezzEnabled
                      ? "#C9A962"
                      : "rgba(255,255,255,0.1)",
                    cursor: "pointer",
                    position: "relative",
                    transition: "background 0.3s ease",
                  }}
                >
                  <div
                    style={{
                      width: 20,
                      height: 20,
                      borderRadius: "50%",
                      background: mezzEnabled ? "#07090F" : "#6B6860",
                      position: "absolute",
                      top: 3,
                      left: mezzEnabled ? 25 : 3,
                      transition: "left 0.3s ease, background 0.3s ease",
                    }}
                  />
                </div>
              </div>

              {mezzEnabled && (
                <>
                  <SliderInput
                    label="Mezz % of Purchase"
                    value={mezzPercent}
                    setValue={setMezzPercent}
                    min={10}
                    max={25}
                    step={1}
                    suffix="%"
                  />
                  <SliderInput
                    label="Mezz Interest Rate"
                    value={mezzRate}
                    setValue={setMezzRate}
                    min={4.0}
                    max={7.0}
                    step={0.5}
                    suffix="%"
                  />
                  <div style={{ marginBottom: 20 }}>
                    <div
                      style={{
                        display: "flex",
                        justifyContent: "space-between",
                        marginBottom: 8,
                      }}
                    >
                      <span style={{ fontSize: 13, color: "#B8B5AE" }}>
                        Mezz Term
                      </span>
                    </div>
                    <select
                      value={mezzTermMonths}
                      onChange={(e) =>
                        setMezzTermMonths(parseInt(e.target.value))
                      }
                      style={{
                        width: "100%",
                        padding: "10px 14px",
                        background: "rgba(255,255,255,0.04)",
                        border: "1px solid rgba(255,255,255,0.1)",
                        borderRadius: 8,
                        color: "#F2F0ED",
                        fontFamily: "'JetBrains Mono', monospace",
                        fontSize: 13,
                        outline: "none",
                        cursor: "pointer",
                        appearance: "none",
                        WebkitAppearance: "none",
                      }}
                    >
                      <option value={36} style={{ background: "#141B24" }}>
                        36 Months (3 Years)
                      </option>
                      <option value={48} style={{ background: "#141B24" }}>
                        48 Months (4 Years)
                      </option>
                      <option value={60} style={{ background: "#141B24" }}>
                        60 Months (5 Years)
                      </option>
                      <option value={72} style={{ background: "#141B24" }}>
                        72 Months (6 Years)
                      </option>
                      <option value={84} style={{ background: "#141B24" }}>
                        84 Months (7 Years)
                      </option>
                    </select>
                  </div>
                  <div
                    style={{
                      padding: "10px 0",
                      borderTop: "1px solid rgba(255,255,255,0.06)",
                    }}
                  >
                    <span
                      style={{
                        fontFamily: "'JetBrains Mono', monospace",
                        fontSize: 11,
                        color: "#6B6860",
                      }}
                    >
                      Structure: Interest-Only with Balloon at Maturity
                    </span>
                  </div>
                </>
              )}
            </div>
          </div>

          {/* ─── RIGHT: RESULTS ─── */}
          <div>
            {/* Comparison Cards */}
            <div
              style={{
                display: "grid",
                gridTemplateColumns: mezzEnabled ? "1fr 1fr" : "1fr",
                gap: 24,
                marginBottom: 24,
              }}
            >
              {/* Without Mezz */}
              <div style={glassCard}>
                <div
                  style={{
                    fontFamily: "'JetBrains Mono', monospace",
                    fontSize: 10,
                    letterSpacing: "0.1em",
                    color: "#6B6860",
                    textTransform: "uppercase",
                    marginBottom: 16,
                  }}
                >
                  {mezzEnabled ? "Without Seller Mezz" : "Deal Analysis"}
                </div>

                <ResultRow
                  label="Cap Rate"
                  value={fmtPct(calc.capRate)}
                  mono
                />
                <ResultRow
                  label="Senior Loan"
                  value={fmtFullCurrency(calc.seniorLoan)}
                  mono
                />
                <ResultRow
                  label="Equity Required"
                  value={fmtFullCurrency(calc.equityNoMezz)}
                  color="#F2F0ED"
                  mono
                  bold
                />
                <ResultRow
                  label="Annual Debt Service"
                  value={fmtFullCurrency(calc.annualSeniorDebtService)}
                  mono
                />
                <ResultRow
                  label="Annual Cash Flow"
                  value={fmtFullCurrency(calc.cashFlowNoMezz)}
                  color={calc.cashFlowNoMezz >= 0 ? "#4ADE80" : "#EF4444"}
                  mono
                />
                <ResultRow
                  label="DSCR"
                  value={calc.dscrNoMezz.toFixed(2) + "x"}
                  color={dscrColor(calc.dscrNoMezz)}
                  mono
                />

                {/* Big CoC */}
                <div
                  style={{
                    marginTop: 24,
                    paddingTop: 24,
                    borderTop: "1px solid rgba(255,255,255,0.08)",
                    textAlign: "center",
                  }}
                >
                  <div
                    style={{
                      fontFamily: "'JetBrains Mono', monospace",
                      fontSize: 10,
                      letterSpacing: "0.1em",
                      color: "#6B6860",
                      textTransform: "uppercase",
                      marginBottom: 8,
                    }}
                  >
                    Cash-on-Cash Return
                  </div>
                  <div
                    style={{
                      fontFamily: "'Cormorant Garamond', serif",
                      fontSize: 48,
                      fontWeight: 600,
                      color: cocColor(calc.cocNoMezz),
                      lineHeight: 1,
                    }}
                  >
                    {calc.cocNoMezz.toFixed(1)}%
                  </div>
                </div>
              </div>

              {/* With Mezz */}
              {mezzEnabled && (
                <div style={glassCardGold}>
                  <div
                    style={{
                      fontFamily: "'JetBrains Mono', monospace",
                      fontSize: 10,
                      letterSpacing: "0.1em",
                      color: "#C9A962",
                      textTransform: "uppercase",
                      marginBottom: 16,
                    }}
                  >
                    With Seller Mezz
                  </div>

                  <ResultRow
                    label="Cap Rate"
                    value={fmtPct(calc.capRate)}
                    mono
                  />
                  <ResultRow
                    label="Senior Loan"
                    value={fmtFullCurrency(calc.seniorLoan)}
                    mono
                  />
                  <ResultRow
                    label="Mezz Amount"
                    value={fmtFullCurrency(calc.mezzAmount)}
                    color="#C9A962"
                    mono
                  />
                  <ResultRow
                    label="Equity Required"
                    value={fmtFullCurrency(calc.equityWithMezz)}
                    color="#C9A962"
                    mono
                    bold
                  />
                  <ResultRow
                    label="Senior Debt Service"
                    value={fmtFullCurrency(calc.annualSeniorDebtService)}
                    mono
                  />
                  <ResultRow
                    label="Mezz Payment (IO)"
                    value={fmtFullCurrency(calc.annualMezzPayment)}
                    mono
                  />
                  <ResultRow
                    label="Total Debt Service"
                    value={fmtFullCurrency(calc.totalAnnualDebtService)}
                    mono
                  />
                  <ResultRow
                    label="Annual Cash Flow"
                    value={fmtFullCurrency(calc.cashFlowWithMezz)}
                    color={
                      calc.cashFlowWithMezz >= 0 ? "#4ADE80" : "#EF4444"
                    }
                    mono
                  />
                  <ResultRow
                    label="DSCR"
                    value={calc.dscrWithMezz.toFixed(2) + "x"}
                    color={dscrColor(calc.dscrWithMezz)}
                    mono
                  />

                  {/* Big CoC */}
                  <div
                    style={{
                      marginTop: 24,
                      paddingTop: 24,
                      borderTop: "1px solid rgba(201,169,98,0.15)",
                      textAlign: "center",
                    }}
                  >
                    <div
                      style={{
                        fontFamily: "'JetBrains Mono', monospace",
                        fontSize: 10,
                        letterSpacing: "0.1em",
                        color: "#6B6860",
                        textTransform: "uppercase",
                        marginBottom: 8,
                      }}
                    >
                      Cash-on-Cash Return
                    </div>
                    <div
                      style={{
                        fontFamily: "'Cormorant Garamond', serif",
                        fontSize: 56,
                        fontWeight: 600,
                        color: "#C9A962",
                        lineHeight: 1,
                      }}
                    >
                      {calc.cocWithMezz.toFixed(1)}%
                    </div>
                    {/* Delta */}
                    <div
                      style={{
                        marginTop: 12,
                        fontFamily: "'JetBrains Mono', monospace",
                        fontSize: 13,
                        color: "#4ADE80",
                        fontWeight: 500,
                      }}
                    >
                      ▲ +{calc.cocDelta.toFixed(1)}% CoC improvement
                    </div>
                  </div>
                </div>
              )}
            </div>

            {/* Seller Perspective */}
            {mezzEnabled && (
              <div style={glassCard}>
                <div
                  style={{
                    fontFamily: "'JetBrains Mono', monospace",
                    fontSize: 10,
                    letterSpacing: "0.1em",
                    color: "#C9A962",
                    textTransform: "uppercase",
                    marginBottom: 20,
                  }}
                >
                  Seller Perspective
                </div>

                <div
                  style={{
                    display: "grid",
                    gridTemplateColumns: "1fr 1fr 1fr",
                    gap: 24,
                  }}
                >
                  <div>
                    <div
                      style={{
                        fontFamily: "'JetBrains Mono', monospace",
                        fontSize: 10,
                        color: "#6B6860",
                        textTransform: "uppercase",
                        letterSpacing: "0.08em",
                        marginBottom: 6,
                      }}
                    >
                      Total Mezz Interest Earned
                    </div>
                    <div
                      style={{
                        fontFamily: "'Cormorant Garamond', serif",
                        fontSize: 28,
                        fontWeight: 600,
                        color: "#4ADE80",
                      }}
                    >
                      {fmtCurrency(calc.totalMezzInterest)}
                    </div>
                    <div style={{ fontSize: 12, color: "#6B6860", marginTop: 4 }}>
                      Over {calc.mezzTermYears} year
                      {calc.mezzTermYears !== 1 ? "s" : ""}
                    </div>
                  </div>

                  <div>
                    <div
                      style={{
                        fontFamily: "'JetBrains Mono', monospace",
                        fontSize: 10,
                        color: "#6B6860",
                        textTransform: "uppercase",
                        letterSpacing: "0.08em",
                        marginBottom: 6,
                      }}
                    >
                      Balloon at Maturity
                    </div>
                    <div
                      style={{
                        fontFamily: "'Cormorant Garamond', serif",
                        fontSize: 28,
                        fontWeight: 600,
                        color: "#F2F0ED",
                      }}
                    >
                      {fmtCurrency(calc.mezzAmount)}
                    </div>
                    <div style={{ fontSize: 12, color: "#6B6860", marginTop: 4 }}>
                      Returned at end of term
                    </div>
                  </div>

                  <div>
                    <div
                      style={{
                        fontFamily: "'JetBrains Mono', monospace",
                        fontSize: 10,
                        color: "#6B6860",
                        textTransform: "uppercase",
                        letterSpacing: "0.08em",
                        marginBottom: 6,
                      }}
                    >
                      Total Seller Proceeds
                    </div>
                    <div
                      style={{
                        fontFamily: "'Cormorant Garamond', serif",
                        fontSize: 28,
                        fontWeight: 600,
                        color: "#C9A962",
                      }}
                    >
                      {fmtCurrency(calc.totalSellerProceeds)}
                    </div>
                    <div style={{ fontSize: 12, color: "#6B6860", marginTop: 4 }}>
                      Purchase price + interest
                    </div>
                  </div>
                </div>

                <div
                  style={{
                    marginTop: 24,
                    paddingTop: 16,
                    borderTop: "1px solid rgba(255,255,255,0.06)",
                    display: "flex",
                    gap: 32,
                  }}
                >
                  <div style={{ flex: 1 }}>
                    <div
                      style={{
                        fontFamily: "'JetBrains Mono', monospace",
                        fontSize: 10,
                        color: "#C9A962",
                        textTransform: "uppercase",
                        letterSpacing: "0.08em",
                        marginBottom: 4,
                      }}
                    >
                      Tax Treatment
                    </div>
                    <div style={{ fontSize: 13, color: "#B8B5AE", lineHeight: 1.5 }}>
                      IRC §453 installment sale — capital gains deferred on
                      the mezzanine portion
                    </div>
                  </div>
                  <div style={{ flex: 1 }}>
                    <div
                      style={{
                        fontFamily: "'JetBrains Mono', monospace",
                        fontSize: 10,
                        color: "#C9A962",
                        textTransform: "uppercase",
                        letterSpacing: "0.08em",
                        marginBottom: 4,
                      }}
                    >
                      Estate Planning
                    </div>
                    <div style={{ fontSize: 13, color: "#B8B5AE", lineHeight: 1.5 }}>
                      Structured income stream assists with generational
                      wealth transfer
                    </div>
                  </div>
                </div>
              </div>
            )}

            {/* Static Note */}
            <div
              style={{
                marginTop: 32,
                textAlign: "center",
                padding: "20px 0",
              }}
            >
              <p
                style={{
                  fontFamily: "'DM Sans', sans-serif",
                  fontSize: 14,
                  color: "#B8B5AE",
                  margin: 0,
                  lineHeight: 1.6,
                }}
              >
                Every seller mezz deal is structured as{" "}
                <span
                  style={{
                    color: "#C9A962",
                    textDecoration: "underline",
                    textUnderlineOffset: 3,
                  }}
                >
                  interest-only with balloon at maturity
                </span>{" "}
                — never amortizing.
              </p>
            </div>
          </div>
        </div>
      </div>

      {/* Responsive override */}
      <style>{`
        @media (max-width: 900px) {
          section > div > div:nth-child(2) {
            grid-template-columns: 1fr !important;
          }
          section > div > div:nth-child(2) > div > div:first-child {
            grid-template-columns: 1fr !important;
          }
        }
      `}</style>
    </section>
  );
}


Object.assign(window, { SellerMezzCalculator });