import { useState } from 'react'; export default function LEAnalyzerPage({ branding, navigate, onContactSubmit }) { const [activeStep, setActiveStep] = useState(1); // User-specified color palette const accentLight = '#ab965d'; // antique gold/olive (primary) const accentMuted = '#f5efe8'; // warm off-white const sageGreen = '#82895f'; // sage green const darkForest = '#25342d'; // dark forest green (secondary) const terracotta = '#ab965d'; // reusing antique gold as accent const benefits = [ { title: 'Instant Rate Comparison', desc: 'See how your offered rate stacks against current market rates in seconds.', icon: ( ) }, { title: 'Hidden Fee Detection', desc: 'Our experts flag suspicious fees and unnecessary charges that cost you thousands.', icon: ( ) }, { title: 'Personalized Strategy Report', desc: 'Get a detailed breakdown of potential savings customized to your loan scenario.', icon: ( ) }, { title: 'Expert Review Included', desc: 'Our team perersonally reviews your estimate and strategy within 24 hours.', icon: ( ) } ]; const steps = [ { num: 1, label: 'Upload Your LE' }, { num: 2, label: 'Add Your Info' }, { num: 3, label: 'Get Your Analysis' } ]; return (

{/* Navigation */}

{branding.logoUrl ? ( Logo

) : (

Printz Mortgage

)}

{branding.phone}

{/* Hero Section */}

{/* Animated Background Blobs */}

{/* Organic SVG Shape */}

{/* Left Content */}

Free Analysis — No Obligation

Don't Overpay on Your{' '} Mortgage

Upload your Loan Estimate and discover hidden fees, better strategies, and potential savings. We personally review each scenario to put you in the best overall financial position.

{/* Trust Badges */}

100% Free

24-Hour Response

Licensed Expert Review

{/* Right Content - Image + Testimonial Card */}

{/* Decorative Blob Behind */}

{/* User's Image */}

{/* Testimonial */}

{[...Array(5)].map((_, i) => ( ))}

"Jessy did an amazing job helping me get the best rates for my new home. She was always available at answer questions that I may have had."

Becky E.

First-Time Buyer

{/* Wave Divider */}

{/* How It Works */}

Simple Process

Three Steps to Savings

{steps.map((step, idx) => (

{/* Connector Line */} {idx < steps.length - 1 && (

)}

{step.num}

{step.label}

{idx === 0 && "Securely upload your Loan Estimate PDF. It only takes a few seconds."} {idx === 1 && "Enter your contact info and credit score so we can provide accurate comparisons."} {idx === 2 && "Receive a detailed and personalized strategy analysis and comparison within 24 hours of your submission."}

))}

{/* Benefits Grid */}

{/* Decorative Elements */}

What You Get

Complete Loan Analysis

{benefits.map((benefit, idx) => (

{benefit.icon}

{benefit.title}

{benefit.desc}

))}

{/* LE Analyzer Section */}

{/* Organic Background Pattern */}

Get Started

Upload Your Loan Estimate

Our team will analyze your LE and send you a personalized savings report within 24 hours.

{/* LE Analyzer Container */}

{/* Security Notice */}

Bank-Level Encryption

NMLS Licensed

We Never Sell Your Data

{/* Testimonials */}

Client Experiences

What Our Clients Say

{[ { quote: "Jessy was incredibly responsive and patient throughout the entire process. She explained everything clearly and made sure I felt confident about my loan.", author: "Sarah M.", location: "Richmond, VA" }, { quote: "The attention to detail was outstanding. They caught things I never would have noticed and walked me through every step with professionalism.", author: "David K.", location: "Virginia Beach, VA" }, { quote: "As a first-time buyer, I had so many questions. The team was always available to answer them and made me feel supported the entire way.", author: "Jennifer L.", location: "Charlottesville, VA" } ].map((testimonial, idx) => (

{/* Star Rating */}

{[...Array(5)].map((_, i) => ( ))}

{testimonial.quote}

{testimonial.author.split(' ').map(n => n[0]).join('')}

{testimonial.author}

{testimonial.location}

))}

{/* FAQ Section */} {/* Final CTA */}

{/* Organic Shape Overlay */}

Ready to Save on Your Mortgage?

Join thousands of homeowners who discovered better deals. Your free analysis is just a click away.

NMLS #{branding.nmls} | {branding.company}

{/* Footer */}

); } // Loan Estimate Analyzer Form Component function LEAnalyzerForm({ accentLight, accentMuted, darkForest, sageGreen, onContactSubmit }) { const [step, setStep] = useState(1); const [file, setFile] = useState(null); const [fileName, setFileName] = useState(''); const [formData, setFormData] = useState({ name: '', email: '', phone: '', creditScore: '', loanAmount: '', notes: '' }); const [status, setStatus] = useState('idle'); // idle | sending | sent | error const [dragActive, setDragActive] = useState(false); const creditScoreOptions = [ { value: '', label: 'Select your credit score range' }, { value: '740+', label: '740+ (Excellent)' }, { value: '720-739', label: '720-739 (Very Good)' }, { value: '700-719', label: '700-719 (Good)' }, { value: '680-699', label: '680-699 (Fair)' }, { value: '660-679', label: '660-679 (Below Average)' }, { value: '640-659', label: '640-659 (Poor)' }, { value: '620-639', label: '620-639 (Very Poor)' }, { value: 'Below 620', label: 'Below 620' }, { value: 'Not sure', label: 'Not sure / Prefer not to say' } ]; const handleDrag = (e) => { e.preventDefault(); e.stopPropagation(); if (e.type === 'dragenter' || e.type === 'dragover') { setDragActive(true); } else if (e.type === 'dragleave') { setDragActive(false); } }; const handleDrop = (e) => { e.preventDefault(); e.stopPropagation(); setDragActive(false); if (e.dataTransfer.files && e.dataTransfer.files[0]) { const droppedFile = e.dataTransfer.files[0]; if (droppedFile.type === 'application/pdf' || droppedFile.name.toLowerCase().endsWith('.pdf')) { setFile(droppedFile); setFileName(droppedFile.name); } } }; const handleFileChange = (e) => { if (e.target.files && e.target.files[0]) { const selectedFile = e.target.files[0]; setFile(selectedFile); setFileName(selectedFile.name); } }; const handleInputChange = (e) => { const { name, value } = e.target; setFormData(prev => ({ ...prev, [name]: value })); }; const handleSubmit = async (e) => { e.preventDefault(); if (!formData.name.trim() || !formData.email.trim()) return; if (!file) { setStatus('error'); return; } setStatus('sending'); try { const fd = new FormData(); fd.append('websiteId', '39a96b6c-2c5e-45c4-b924-1015107e3d0c'); fd.append('name', formData.name.trim()); fd.append('email', formData.email.trim()); fd.append('phone', formData.phone.trim()); fd.append('creditScore', formData.creditScore); fd.append('file', file); const res = await fetch('/api/website-builder/loan-estimate', { method: 'POST', body: fd }); if (!res.ok) throw new Error('Submission failed'); setStatus('sent'); setFormData({ name: '', email: '', phone: '', creditScore: '', loanAmount: '', notes: '' }); setFile(null); setFileName(''); } catch { setStatus('error'); } }; const nextStep = () => setStep(2); const prevStep = () => setStep(1); // Success State if (status === 'sent') { return (

Analysis Request Submitted!

Thank you for submitting your Loan Estimate. Our team will review your information and send you a personalized savings report within 24 hours.

); } // Error State if (status === 'error') { return (

Something Went Wrong

We couldn't process your request. Please try again or contact us directly.

); } return (

{/* Step 1: File Upload */} {step === 1 && (

{file ? ( ) : ( )}

{file ? 'File Ready!' : 'Drop your Loan Estimate PDF here'}

{file ? fileName : 'or click to browse files'}

{file && ( )}

or continue without file

Accepted format: PDF only. Maximum file size: 10MB.

)} {/* Step 2: Contact Info */} {step === 2 && (

Full Name *

Email Address *

Phone Number

Credit Score Range

Loan Amount

Additional Notes or Questions

</div>
          </div>

{fileName && (
            <div className="flex items-center gap-3 p-4 rounded-lg" style={{ backgroundColor: accentMuted }}>
              <svg className="w-6 h-6 flex-shrink-0" fill={accentLight} viewBox="0 0 20 20">
                <path fillRule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clipRule="evenodd"/>
              </svg>
              <span className="font-body text-sm text-stone-600 flex-1 truncate">{fileName}</span>
              <button
                type="button"
                onClick={() => { setFile(null); setFileName(''); }}
                className="font-body text-sm text-red-500 hover:text-red-600"
              >
                Remove
              </button>
            </div>
          )}

<button
            type="submit"
            disabled={status === 'sending' || !formData.name.trim() || !formData.email.trim()}
            className="w-full organic-btn py-4 text-white font-semibold font-body text-lg disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-3"
            style={{ backgroundColor: accentLight }}
          >
            {status === 'sending' ? (
              <>
                <svg className="animate-spin w-5 h-5" fill="none" viewBox="0 0 24 24">
                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                </svg>
                Submitting...
              </>
            ) : (
              <>
                <span>Get My Free Analysis</span>
                <svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                </svg>
              </>
            )}
          </button>

<p className="font-body text-xs text-stone-400 text-center">
            By submitting, you agree to be contacted about your loan analysis. We respect your privacy.
          </p>
        </div>
      )}
    </form>
  );
}

// FAQ Section Component
function FAQSection({ sageGreen, darkForest, accentLight, accentMuted }) {
  const [openIndex, setOpenIndex] = useState(null);

const faqs = [
    { q: "Is this service really free?", a: "Yes, absolutely. There's no cost and no obligation. We provide this service to demonstrate our expertise and earn your trust." },
    { q: "How long does the analysis take?", a: "You'll receive your personalized savings report within 24 hours of submitting your Loan Estimate. Most reports are sent same-day." },
    { q: "Is my information secure?", a: "We use bank-level encryption to protect your data. Your Loan Estimate and personal information are never sold or shared with third parties." },
    { q: "What if I haven't received a Loan Estimate yet?", a: "If you have a contract, lenders are required to provide a Loan Estimate within 3 business days of receiving your application.  A fees worksheet can also be provided in place of a LE.  Or, please reach out to our team directly at team@printzmortgageteam.com" },
    { q: "Can you help me get a better loan?", a: "After analyzing your LE, we can provide you with a competing quote if we can offer better terms. There's never any pressure to switch." }
  ];

return (
    <section className="py-20 lg:py-32" style={{ backgroundColor: '#f5efe8' }}>
      <div className="max-w-3xl mx-auto px-6 lg:px-8">
        <div className="text-center mb-16">
          <span className="font-body text-sm font-semibold tracking-wider uppercase mb-4 block" style={{ color: sageGreen }}>
            Common Questions
          </span>
          <h2 className="font-display text-4xl lg:text-5xl font-bold" style={{ color: darkForest }}>
            Frequently Asked
          </h2>
        </div>

<div className="space-y-4">
          {faqs.map((faq, idx) => (
            <FAQItem 
              key={idx} 
              question={faq.q} 
              answer={faq.a} 
              darkForest={darkForest} 
              accentLight={accentLight} 
              accentMuted={accentMuted}
              isOpen={openIndex === idx}
              onClick={() => setOpenIndex(openIndex === idx ? null : idx)}
            />
          ))}
        </div>
      </div>
    </section>
  );
}

// FAQ Accordion Component
function FAQItem({ question, answer, darkForest, accentLight, accentMuted, isOpen, onClick }) {
  return (
    <div 
      className="organic-card bg-white overflow-hidden transition-all duration-300"
      style={{ backgroundColor: isOpen ? accentMuted : 'white' }}
    >
      <button 
        onClick={onClick}
        className="w-full flex items-center justify-between p-6 text-left"
      >
        <span className="font-display font-bold text-lg pr-4" style={{ color: darkForest }}>
          {question}
        </span>
        <span 
          className="flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center transition-transform duration-300"
          style={{ 
            backgroundColor: isOpen ? accentLight : accentMuted,
            transform: isOpen ? 'rotate(45deg)' : 'rotate(0deg)'
          }}
        >
          <svg 
            className="w-5 h-5 transition-colors duration-300" 
            fill="none" 
            viewBox="0 0 24 24" 
            stroke={isOpen ? 'white' : darkForest}
          >
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
          </svg>
        </span>
      </button>
      <div 
        className="overflow-hidden transition-all duration-500"
        style={{ maxHeight: isOpen ? '200px' : '0px', opacity: isOpen ? 1 : 0 }}
      >
        <p className="px-6 pb-6 font-body text-stone-600">
          {answer}
        </p>
      </div>
    </div>
  );
}</article></body></html>

Do You Have the Best Mortgage Strategy?

Do You Have the Best Mortgage Strategy?