export default function FunnelPage({ branding, navigate, onContactSubmit }) { const [lang, setLang] = React.useState("es"); const [calcPrice, setCalcPrice] = React.useState(450000); const [calcDown, setCalcDown] = React.useState(10); const [calcRate, setCalcRate] = React.useState(7.25); const [faqOpen, setFaqOpen] = React.useState(null); const [formData, setFormData] = React.useState({ name: "", email: "", phone: "", purchasePrice: "", message: "" }); const [status, setStatus] = React.useState("idle"); const [visibleSections, setVisibleSections] = React.useState(new Set()); const [navVisible, setNavVisible] = React.useState(false); const sectionRefs = React.useRef([]); React.useEffect(() => { const handleScroll = () => setNavVisible(window.scrollY > 80); window.addEventListener("scroll", handleScroll, { passive: true }); return () => window.removeEventListener("scroll", handleScroll); }, []); React.useEffect(() => { const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { setVisibleSections((prev) => new Set([...prev, entry.target.dataset.section])); } }); }, { threshold: 0.12, rootMargin: "0px 0px -40px 0px" } ); sectionRefs.current.forEach((el) => el && observer.observe(el)); return () => observer.disconnect(); }, []); const addRef = (el) => { if (el && !sectionRefs.current.includes(el)) sectionRefs.current.push(el); }; const isVisible = (id) => visibleSections.has(id); const t = { en: { heroPre: "Smart Home Financing", heroTitle: "Buy Your Home With a Free 1-0 Buydown", heroSub: "Lower your first-year payment by 1% — no cost to you. A powerful strategy helping buyers stop renting and start building equity today.", ctaPrimary: "Get My Free Rate Quote", ctaSecondary: "Speak With A Loan Officer", callLazaro: "Call Lazaro", callLuis: "Call Luis", callAntonio: "Call Antonio", callNow: "Or call directly:", trust1: "NMLS Licensed", trust2: "Same-Day Pre-Approval", trust3: "Trusted by 1,200+ Families", howLabel: "How It Works", howTitle: "The 1-0 Buydown in 3 Simple Steps", step1: "Lower Payment Year One", step1Desc: "Your interest rate drops by 1% for the first 12 months. That means hundreds in monthly savings while you settle into your new home.", step2: "Smooth Transition", step2Desc: "Starting month 13, your payment adjusts to the standard rate. No surprises, no hidden fees — you know exactly what to expect.", step3: "Fixed Rate Stays Forever", step3Desc: "Your underlying 30-year fixed loan never changes. The buydown is simply a seller-funded subsidy that makes your first year easier.", benefitsLabel: "Why Buyers Love It", benefitsTitle: "Real Advantages for Real Life", ben1: "Lower First-Year Payment", ben1Desc: "Free up cash for moving costs, furniture, and the unexpected expenses of a new home.", ben2: "Buy Now, Don't Wait", ben2Desc: "Stop throwing money at rent. Start building equity immediately with a gentler first year.", ben3: "Budget Flexibility", ben3Desc: "Use year one to adjust your financial plan without the pressure of a full payment right away.", ben4: "Less Financial Stress", ben4Desc: "A softer start makes the transition from renting to owning feel natural, not overwhelming.", ben5: "Seller Often Pays", ben5Desc: "Many sellers and builders offer the buydown as a closing incentive. We help you negotiate it.", ben6: "Multiple Loan Types", ben6Desc: "Works with FHA, Conventional, VA, and USDA loans. We find the right fit for your situation.", whoLabel: "Who Qualifies", whoTitle: "This Strategy Helps...", who1: "First-Time Buyers", who2: "Self-Employed", who3: "Growing Families", who4: "Relocating", who5: "Rate-Watchers", calcLabel: "Interactive Calculator", calcTitle: "See Your Year 1 Savings", purchasePrice: "Purchase Price", downPayment: "Down Payment", interestRate: "Interest Rate", standardPayment: "Standard Payment", buydownPayment: "Year 1 Buydown Payment", monthlySavings: "Monthly Savings", year1Savings: "Total Year 1 Savings", testimonialsLabel: "Success Stories", testimonialsTitle: "What Homebuyers Are Saying", faqLabel: "Common Questions", faqTitle: "Frequently Asked Questions", faq1Q: "What is a temporary buydown?", faq1A: "A temporary buydown is a subsidy — usually funded by the seller or builder — that reduces your interest rate for a set period. With a 1-0 buydown, your rate is 1% lower for the first 12 months. Your underlying 30-year fixed loan terms never change.", faq2Q: "Who pays for the buydown?", faq2A: "In most cases, the seller or builder covers the cost as a closing incentive. Sometimes it can be negotiated into your purchase agreement. We handle the structuring so you don't have to worry about the details.", faq3Q: "Does the payment stay reduced forever?", faq3A: "No. The reduction is temporary for the first 12 months only. After that, your payment returns to the standard note rate for the remaining term. You will know the full payment amount before you ever sign.", faq4Q: "Is this available for FHA or conventional loans?", faq4A: "Yes. 1-0 buydowns are available for FHA, Conventional, VA, and USDA loans depending on your lender and program eligibility. We match you with the right program.", faq5Q: "Does this affect qualification?", faq5A: "Lenders typically qualify you using the full note rate, not the reduced buydown rate. However, the lower first-year payment still gives you valuable breathing room and cash flow flexibility.", ctaTitle: "Ready To See Your Numbers?", ctaSub: "Get a personalized 1-0 buydown analysis and pre-approval in minutes. No pressure, no spam.", fullName: "Full Name", phone: "Phone Number", email: "Email Address", estPrice: "Estimated Purchase Price", message: "How Can We Help?", getConsultation: "Get My Free Consultation", sending: "Sending...", sentMsg: "Thank you! We'll be in touch shortly.", errorMsg: "Something went wrong. Please try again.", retry: "Try Again", privacy: "Privacy Policy", terms: "Terms of Service", equalHousing: "Equal Housing Opportunity", nmls: "NMLS", }, es: { heroPre: "Financiamiento Inteligente", heroTitle: "Compra Tu Casa Con Buydown 1-0 Gratis", heroSub: "Reduce tu pago del primer año en 1% — sin costo para ti. Una estrategia poderosa que ayuda a compradores a dejar de alquilar y comenzar a generar patrimonio hoy.", ctaPrimary: "Obtener Cotización Gratis", ctaSecondary: "Hablar Con Un Asesor", callLazaro: "Llamar a Lazaro", callLuis: "Llamar a Luis", callAntonio: "Llamar a Antonio", callNow: "O llama directo:", trust1: "Licenciado NMLS", trust2: "Pre-Aprobación Mismo Día", trust3: "Más de 1,200 Familias Confían", howLabel: "Cómo Funciona", howTitle: "El Buydown 1-0 En 3 Pasos", step1: "Pago Reducido Año 1", step1Desc: "Tu tasa de interés baja 1% durante los primeros 12 meses. Eso significa cientos de dólares en ahorro mensual mientras te acomodas en tu nuevo hogar.", step2: "Transición Suave", step2Desc: "A partir del mes 13, tu pago se ajusta a la tasa estándar. Sin sorpresas, sin cargos ocultos — sabes exactamente qué esperar.", step3: "Tasa Fija Para Siempre", step3Desc: "Tu préstamo subyacente a 30 años fijo nunca cambia. El buydown es simplemente un subsidio financiado por el vendedor que facilita tu primer año.", benefitsLabel: "Por Qué Les Encanta", benefitsTitle: "Ventajas Reales Para La Vida Real", ben1: "Pago Menor El Primer Año", ben1Desc: "Libera efectivo para gastos de mudanza, muebles y los imprevistos de un nuevo hogar.", ben2: "Compra Ahora, No Esperes", ben2Desc: "Deja de tirar dinero en alquiler. Comienza a generar patrimonio inmediatamente con un primer año más suave.", ben3: "Flexibilidad De Presupuesto", ben3Desc: "Usa el primer año para ajustar tu plan financiero sin la presión de un pago completo de inmediato.", ben4: "Menos Estrés Financiero", ben4Desc: "Un inicio más suave hace la transición de alquilar a propietario se sienta natural, no abrumadora.", ben5: "El Vendedor Suele Pagar", ben5Desc: "Muchos vendedores y constructores ofrecen el buydown como incentivo de cierre. Te ayudamos a negociarlo.", ben6: "Múltiples Tipos De Préstamo", ben6Desc: "Funciona con FHA, Conventional, VA y USDA. Encontramos la opción ideal para tu situación.", whoLabel: "Quién Califica", whoTitle: "Esta Estrategia Ayuda A...", who1: "Compradores Nuevos", who2: "Autónomos", who3: "Familias Crecientes", who4: "Reubicados", who5: "Observadores De Tasas", calcLabel: "Calculadora Interactiva", calcTitle: "Mira Tus Ahorros Del Año 1", purchasePrice: "Precio De Compra", downPayment: "Pago Inicial", interestRate: "Tasa De Interés", standardPayment: "Pago Estándar", buydownPayment: "Pago Con Buydown Año 1", monthlySavings: "Ahorro Mensual", year1Savings: "Ahorro Total Año 1", testimonialsLabel: "Historias De Éxito", testimonialsTitle: "Lo Que Dicen Los Compradores", faqLabel: "Preguntas Frecuentes", faqTitle: "Preguntas Frecuentes", faq1Q: "¿Qué es un buydown temporal?", faq1A: "Un buydown temporal es un subsidio — usualmente financiado por el vendedor o constructor — que reduce tu tasa de interés por un período determinado. Con un buydown 1-0, tu tasa es 1% más baja durante los primeros 12 meses. Los términos subyacentes de tu préstamo a 30 años fijo nunca cambian.", faq2Q: "¿Quién paga el buydown?", faq2A: "En la mayoría de los casos, el vendedor o constructor cubre el costo como incentivo de cierre. A veces puede negociarse en tu contrato de compra. Nosotros manejamos la estructuración para que no tengas que preocuparte por los detalles.", faq3Q: "¿El pago se mantiene reducido para siempre?", faq3A: "No. La reducción es temporal solo durante los primeros 12 meses. Después, tu pago vuelve a la tasa estándar del préstamo por el resto del término. Conocerás el pago completo antes de firmar.", faq4Q: "¿Está disponible para préstamos FHA o convencionales?", faq4A: "Sí. Los buydowns 1-0 están disponibles para préstamos FHA, Conventional, VA y USDA dependiendo de tu prestamista y elegibilidad del programa. Te emparejamos con el programa correcto.", faq5Q: "¿Esto afecta la calificación?", faq5A: "Los prestamistas típicamente te califican usando la tasa completa del préstamo, no la tasa reducida del buydown. Sin embargo, el menor pago del primer año te da un valioso respiro financiero y flexibilidad de flujo de efectivo.", ctaTitle: "¿Listo Para Ver Tus Números?", ctaSub: "Obtén un análisis personalizado de buydown 1-0 y pre-aprobación en minutos. Sin presión, sin spam.", fullName: "Nombre Completo", phone: "Número De Teléfono", email: "Correo Electrónico", estPrice: "Precio Estimado De Compra", message: "¿Cómo Podemos Ayudarte?", getConsultation: "Obtener Consulta Gratis", sending: "Enviando...", sentMsg: "¡Gracias! Nos pondremos en contacto pronto.", errorMsg: "Algo salió mal. Por favor intenta de nuevo.", retry: "Intentar De Nuevo", privacy: "Política De Privacidad", terms: "Términos De Servicio", equalHousing: "Igualdad De Oportunidades De Vivienda", nmls: "NMLS", }, }; const txt = t[lang]; const loanAmount = calcPrice * (1 - calcDown / 100); const monthlyRateStandard = calcRate / 100 / 12; const monthlyRateBuydown = Math.max(0.001, (calcRate - 1) / 100 / 12); const numPayments = 360; const standardPayment = (loanAmount * monthlyRateStandard * Math.pow(1 + monthlyRateStandard, numPayments)) / (Math.pow(1 + monthlyRateStandard, numPayments) - 1); const buydownPayment = (loanAmount * monthlyRateBuydown * Math.pow(1 + monthlyRateBuydown, numPayments)) / (Math.pow(1 + monthlyRateBuydown, numPayments) - 1); const monthlySavings = standardPayment - buydownPayment; const year1Savings = monthlySavings * 12; const fmtMoney = (n) => new Intl.NumberFormat(lang === "en" ? "en-US" : "es-US", { style: "currency", currency: "USD", maximumFractionDigits: 0, }).format(n); const handleFormSubmit = async (e) => { e.preventDefault(); if (!formData.name.trim() || !formData.email.trim()) return; setStatus("sending"); try { await onContactSubmit({ name: formData.name, email: formData.email, phone: formData.phone, message: `Purchase Price: ${formData.purchasePrice || "Not provided"} | Notes: ${formData.message || "None"} | Language: ${lang.toUpperCase()} | Page: 1-0 Buydown`, }); setStatus("sent"); setFormData({ name: "", email: "", phone: "", purchasePrice: "", message: "" }); } catch { setStatus("error"); } }; const scrollToForm = () => { const el = document.getElementById("final-cta"); if (el) el.scrollIntoView({ behavior: "smooth", block: "start" }); }; const faqItems = [ { q: txt.faq1Q, a: txt.faq1A }, { q: txt.faq2Q, a: txt.faq2A }, { q: txt.faq3Q, a: txt.faq3A }, { q: txt.faq4Q, a: txt.faq4A }, { q: txt.faq5Q, a: txt.faq5A }, ]; const brandPrimary = branding.primaryColor || "#224879"; const brandSecondary = branding.secondaryColor || "#266ca8"; return (

{/* LANGUAGE TOGGLE */}

{/* STICKY NAV */} {/* HERO SECTION */}

{/* Mobile Image - Full width, no transparency, flows naturally into text */}

{/* Desktop Background Only */}

{/* Left Content */}

{txt.heroPre}

{txt.heroTitle}

{txt.heroSub}

{txt.callNow}

{txt.callLazaro} {txt.callLuis} {txt.callAntonio}

{txt.trust1}

{txt.trust2}

{txt.trust3}

{/* Right Visual */}

{/* HOW IT WORKS */}

{txt.howLabel}

{txt.howTitle}

{[ { num: "1", title: txt.step1, desc: txt.step1Desc }, { num: "2", title: txt.step2, desc: txt.step2Desc }, { num: "3", title: txt.step3, desc: txt.step3Desc }, ].map((step, i) => (

{step.num}

{step.title}

{step.desc}

))}

{/* CALCULATOR SECTION */}

{txt.calcLabel}

{txt.calcTitle}

{txt.purchasePrice} {fmtMoney(calcPrice)}

setCalcPrice(Number(e.target.value))} />

$200k $1M

{txt.downPayment} {calcDown}%

setCalcDown(Number(e.target.value))} />

0% 30%

{txt.interestRate} {calcRate}%

setCalcRate(Number(e.target.value))} />

5% 10%

Loan Amount {fmtMoney(loanAmount)}

{txt.standardPayment}

{fmtMoney(standardPayment)}

/ {lang === "en" ? "month" : "mes"}

{txt.buydownPayment}

{fmtMoney(buydownPayment)}

/ {lang === "en" ? "month (Year 1)" : "mes (Año 1)"}

{txt.monthlySavings}

{fmtMoney(monthlySavings)}

{txt.year1Savings}: {fmtMoney(year1Savings)}

{/* CALL LOAN OFFICERS */}

{lang === "en" ? "Speak With a Loan Officer" : "Habla Con Un Asesor"}

{lang === "en" ? "Call now for immediate assistance. No forms, no waiting." : "Llama ahora para asistencia inmediata. Sin formularios, sin espera."}

{/* BENEFITS - Zig-Zag Layout */}

{txt.benefitsLabel}

{txt.benefitsTitle}

{[ { title: txt.ben1, desc: txt.ben1Desc, icon: "M2.25 18L9 11.25l4.306 4.307a11.95 11.95 0 015.814-5.519l2.74-1.22m0 0l-5.94-2.28m5.94 2.28l-2.28 5.941" }, { title: txt.ben2, desc: txt.ben2Desc, icon: "M3.75 13.5l10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75z" }, { title: txt.ben3, desc: txt.ben3Desc, icon: "M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 012.25-2.25h13.5A2.25 2.25 0 0121 7.5v11.25m-18 0A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75m-18 0v-7.5A2.25 2.25 0 015.25 9h13.5A2.25 2.25 0 0121 11.25v7.5" }, { title: txt.ben4, desc: txt.ben4Desc, icon: "M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" }, { title: txt.ben5, desc: txt.ben5Desc, icon: "M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }, { title: txt.ben6, desc: txt.ben6Desc, icon: "M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" }, ].map((b, i) => (

{b.title}

{b.desc}

))}

{/* WHO THIS HELPS */}

{txt.whoLabel}

{txt.whoTitle}

{[ { label: txt.who1, icon: "M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" }, { label: txt.who2, icon: "M3.75 21h16.5M4.5 3h15M5.25 3v18m13.5-18v18M9 6.75h1.5m-1.5 3h1.5m-1.5 3h1.5m3-6H15m-1.5 3H15m-1.5 3H15M9 21v-3.375c0-.621.504-1.125 1.125-1.125h3.75c.621 0 1.125.504 1.125 1.125V21" }, { label: txt.who3, icon: "M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" }, { label: txt.who4, icon: "M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9.75 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 00-3.213-9.193 2.056 2.056 0 00-1.58-.86H14.25M16.5 18.75h-2.25m0-11.177v-.958c0-.568-.422-1.048-.987-1.106a48.554 48.554 0 00-10.026 0 1.106 1.106 0 00-.987 1.106v7.635m12-6.677v6.677m0 4.5v-4.5m0 0h-12" }, { label: txt.who5, icon: "M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" }, ].map((w, i) => (

{w.label}

))}

{/* MID CTA */}

{txt.ctaTitle}

{txt.ctaSub}

{txt.callLazaro} {txt.callLuis} {txt.callAntonio}

{/* FAQ */}

{txt.faqLabel}

{txt.faqTitle}

{faqItems.map((faq, i) => (

{faq.a}

))}

{/* FINAL CTA / FORM */}

{lang === "en" ? "Get Started" : "Comienza Hoy"}

{txt.ctaTitle}

{txt.ctaSub}

{status === "sent" ? (

{txt.sentMsg}

{lang === "en" ? "A loan officer will contact you within 24 hours." : "Un asesor se pondrá en contacto contigo dentro de 24 horas."}

) : (

{txt.fullName} * setFormData({ ...formData, name: e.target.value })} className="w-full px-4 py-3.5 rounded-xl bg-neutral-50 border border-neutral-200 text-neutral-900 placeholder-neutral-400 focus:border-[#224879] focus:outline-none focus:ring-1 focus:ring-[#224879]/30 transition-all duration-300 font-body text-sm" placeholder={lang === "en" ? "John Smith" : "Juan Pérez"} />

{txt.phone} setFormData({ ...formData, phone: e.target.value })} className="w-full px-4 py-3.5 rounded-xl bg-neutral-50 border border-neutral-200 text-neutral-900 placeholder-neutral-400 focus:border-[#224879] focus:outline-none focus:ring-1 focus:ring-[#224879]/30 transition-all duration-300 font-body text-sm" placeholder="(555) 000-0000" />

{txt.email} * setFormData({ ...formData, email: e.target.value })} className="w-full px-4 py-3.5 rounded-xl bg-neutral-50 border border-neutral-200 text-neutral-900 placeholder-neutral-400 focus:border-[#224879] focus:outline-none focus:ring-1 focus:ring-[#224879]/30 transition-all duration-300 font-body text-sm" placeholder="email@example.com" />

{txt.estPrice} setFormData({ ...formData, purchasePrice: e.target.value })} className="w-full px-4 py-3.5 rounded-xl bg-neutral-50 border border-neutral-200 text-neutral-900 placeholder-neutral-400 focus:border-[#224879] focus:outline-none focus:ring-1 focus:ring-[#224879]/30 transition-all duration-300 font-body text-sm" placeholder="$450,000" />

{txt.message} setFormData({ ...formData, message: e.target.value })} className="w-full px-4 py-3.5 rounded-xl bg-neutral-50 border border-neutral-200 text-neutral-900 placeholder-neutral-400 focus:border-[#224879] focus:outline-none focus:ring-1 focus:ring-[#224879]/30 transition-all duration-300 font-body text-sm" placeholder={lang === "en" ? "Buying first home, etc." : "Primera compra, etc."} />

{status === "error" && (

{txt.errorMsg}

)}

{lang === "en" ? "No spam. Your information is secure and never shared." : "Sin spam. Tu información está segura y nunca se comparte."}

)}

{/* FOOTER */}

); }

Buydown 1-0 Gratis | Elite Mortgage Advisors

Buydown 1-0 Gratis | Elite Mortgage Advisors