import React, { useState } from "react"; // RoofImpactLoanPage.jsx // Single-file React component styled with Tailwind CSS // Default export a React component for preview in canvas export default function RoofImpactLoanPage() { const [loanAmount, setLoanAmount] = useState(25000); const [termYears, setTermYears] = useState(10); const [interestRate, setInterestRate] = useState(6.99); const [creditScore, setCreditScore] = useState("Good (680+)"); const [zip, setZip] = useState(33101); const [name, setName] = useState(""); const [email, setEmail] = useState(""); const [phone, setPhone] = useState(""); const [submitted, setSubmitted] = useState(false); // monthly payment (principal + interest) formula: P = r*PV / (1 - (1+r)^-n) function monthlyPayment(amount, annualRate, years) { if (!amount || !annualRate || !years) return 0; const r = annualRate / 100 / 12; const n = years * 12; if (r === 0) return amount / n; const payment = (r * amount) / (1 - Math.pow(1 + r, -n)); return payment; } const payment = monthlyPayment(loanAmount, interestRate, termYears); function handleApply(e) { e.preventDefault(); // In production this would POST to your API or CRM. Here we just simulate. setSubmitted(true); // TODO: integrate with /api/apply or a third-party form provider } return (