// Financing calculator — estimate a monthly payment.
// Acorn Finance hookup: set ACORN_APPLY_URL to your merchant application link
// (from your Acorn Finance dashboard). The button passes the project amount
// along as ?amount= so the application can prefill it where supported.
const ACORN_APPLY_URL = "https://www.acornfinance.com/pre-qualify/?d=73U2N&utm_medium=web_pre_qual_link";
function acornUrl(amount) {
  try {
    const u = new URL(ACORN_APPLY_URL);
    if (amount) u.searchParams.set("amount", String(amount));
    return u.toString();
  } catch (e) { return ACORN_APPLY_URL; }
}

function Financing({ onQuote }) {
  const w = useW();
  const mobile = w < 768;
  const [amount, setAmount] = React.useState(8500);
  const [term, setTerm] = React.useState(36);
  const terms = [24, 36, 48, 60, 84];
  const EST_APR = 9.99; // illustrative mid-range Acorn rate; actual depends on credit
  const apr = EST_APR;
  const monthly = React.useMemo(() => {
    const r = apr / 100 / 12;
    return (amount * r) / (1 - Math.pow(1 + r, -term));
  }, [amount, term, apr]);
  const fmt = (n) => "$" + Math.round(n).toLocaleString();

  return (
    <Section id="financing">
      <div style={{ display: "grid", gridTemplateColumns: mobile ? "1fr" : "1fr 1.05fr", gap: mobile ? 40 : 72, alignItems: "center" }}>
        <Reveal>
          <Kicker>Financing</Kicker>
          <h2 style={{ fontFamily: FONT.disp, fontWeight: 700, fontSize: "clamp(38px,4.4vw,54px)", textTransform: "uppercase",
            letterSpacing: "-0.015em", color: NP.textL, margin: "20px 0 20px", lineHeight: 1.03 }}>
            Shade now,<br />pay monthly.
          </h2>
          <p style={{ fontFamily: FONT.body, fontSize: 17.5, lineHeight: 1.7, color: NP.textL2, maxWidth: 460 }}>
            Don't wait out another summer. Flexible financing puts a custom NorthPoint structure over your patio for a comfortable monthly payment.
          </p>
          <div style={{ marginTop: 30, display: "flex", flexDirection: "column", gap: 14 }}>
            {[
              ["Rates from 5.99% APR", "Based on credit, through Acorn's lender network"],
              ["Fast approvals", "Soft-pull pre-qualification in minutes"],
              ["No prepayment penalty", "Pay it down early, anytime"],
            ].map(([t, d]) => (
              <div key={t} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                <span style={{ color: NP.gold, fontSize: 18, lineHeight: 1.3 }}>◆</span>
                <div>
                  <span style={{ fontFamily: FONT.body, fontSize: 16, fontWeight: 700, color: NP.textL }}>{t}</span>
                  <span style={{ fontFamily: FONT.body, fontSize: 15, color: NP.textL2 }}> — {d}</span>
                </div>
              </div>
            ))}
          </div>
        </Reveal>

        <Reveal delay={120}>
          <div style={{ background: NP.panel, border: `1px solid ${NP.lineL}`, borderRadius: 5, padding: mobile ? "28px 20px 24px" : "40px 40px 36px" }}>
            {/* amount */}
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
              <span style={{ fontFamily: FONT.body, fontSize: 13, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: NP.textL2 }}>Project amount</span>
              <span style={{ fontFamily: FONT.disp, fontWeight: 700, fontSize: 26, color: NP.gold }}>{fmt(amount)}</span>
            </div>
            <input type="range" min={2000} max={35000} step={250} value={amount}
              onChange={(e) => setAmount(+e.target.value)} className="np-range" style={{ width: "100%", marginTop: 16 }} />
            <div style={{ display: "flex", justifyContent: "space-between", fontFamily: FONT.body, fontSize: 12, color: NP.textL2, marginTop: 6 }}>
              <span>$2,000</span><span>$35,000</span>
            </div>

            {/* term */}
            <div style={{ marginTop: 30 }}>
              <span style={{ fontFamily: FONT.body, fontSize: 13, fontWeight: 700, letterSpacing: "0.14em", textTransform: "uppercase", color: NP.textL2 }}>Term</span>
              <div style={{ display: "grid", gridTemplateColumns: mobile ? "repeat(3,1fr)" : "repeat(5,1fr)", gap: 8, marginTop: 12 }}>
                {terms.map((t) => (
                  <button key={t} onClick={() => setTerm(t)}
                    style={{ fontFamily: FONT.body, fontSize: 14, fontWeight: 700, padding: "12px 0", borderRadius: 3, cursor: "pointer", transition: "all .15s",
                      background: term === t ? NP.gold : NP.panel2, color: term === t ? "#1a130b" : NP.textL,
                      border: `1px solid ${term === t ? NP.gold : NP.lineL}` }}>{t}<span style={{ fontSize: 10, fontWeight: 600 }}> mo</span></button>
                ))}
              </div>
            </div>

            {/* result */}
            <div style={{ marginTop: 30, padding: "26px 28px", borderRadius: 4, background: NP.panel2, border: `1px solid ${NP.lineL}`,
              display: "flex", alignItems: "center", justifyContent: "space-between" }}>
              <div>
                <div style={{ fontFamily: FONT.body, fontSize: 13, fontWeight: 700, letterSpacing: "0.12em", textTransform: "uppercase", color: NP.textL2 }}>Est. monthly</div>
                <div style={{ fontFamily: FONT.body, fontSize: 12.5, color: NP.textL2, marginTop: 4 }}>{apr}% APR (est.) · {term} months</div>
              </div>
              <div style={{ fontFamily: FONT.disp, fontWeight: 800, fontSize: 44, color: NP.textL, letterSpacing: "-0.02em" }}>{fmt(monthly)}<span style={{ fontSize: 16, fontWeight: 600, color: NP.textL2 }}>/mo</span></div>
            </div>

            <Btn variant="solid" full style={{ marginTop: 22 }} onClick={() => window.open(acornUrl(amount), "_blank", "noopener")}>Pre-qualify with Acorn Finance →</Btn>
            <p style={{ fontFamily: FONT.body, fontSize: 11.5, lineHeight: 1.5, color: NP.textL2, marginTop: 16, textAlign: "center" }}>
              Estimates only, for illustration. Checking your rate with Acorn is a soft pull and won't affect your credit. Actual terms subject to approval.
            </p>
          </div>
        </Reveal>
      </div>
    </Section>
  );
}
window.Financing = Financing;