export default function FunnelPage({ branding, navigate, onContactSubmit }) { const [formData, setFormData] = React.useState({ name: '', phone: '', email: '', serviceStatus: '', branchOfService: '', creditScoreRange: '', loanPurpose: '', message: '', agreeToTerms: false }); const [status, setStatus] = React.useState('idle'); const handleChange = (e) => { const { name, value } = e.target; setFormData(prev => ({ ...prev, [name]: value })); }; const handleSubmit = async (e) => { e.preventDefault(); if (!formData.name.trim() || !formData.email.trim() || !formData.phone.trim() || !formData.agreeToTerms) return; setStatus('sending'); try { // Format message with ALL fields exactly as specified const formattedMessage = `Name: ${formData.name || 'Not Provided.'} Phone: ${formData.phone || 'Not Provided.'} Email: ${formData.email || 'Not Provided.'} Service Status: ${formData.serviceStatus || 'Not Provided.'} Branch of Service: ${formData.branchOfService || 'Not Provided.'} Credit Score: ${formData.creditScoreRange || 'Not Provided.'} Loan Purpose: ${formData.loanPurpose || 'Not Provided.'} Notes: ${formData.message || 'Not Provided.'} Terms Agreement: Confirmed - User agreed to Terms of Service on ${new Date().toLocaleDateString()}`; await onContactSubmit({ name: formData.name, email: formData.email, phone: formData.phone || 'Not Provided.', message: formattedMessage, // Pass individual field values for structured data serviceStatus: formData.serviceStatus || 'Not Provided.', branchOfService: formData.branchOfService || 'Not Provided.', creditScoreRange: formData.creditScoreRange || 'Not Provided.' }); setStatus('sent'); setFormData({ name: '', phone: '', email: '', serviceStatus: '', branchOfService: '', creditScoreRange: '', loanPurpose: '', message: '', agreeToTerms: false }); } catch { setStatus('error'); } }; const CompactForm = () => { const compactSubmit = async (e) => { e.preventDefault(); if (!formData.name.trim() || !formData.email.trim() || !formData.phone.trim() || !formData.agreeToTerms) return; setStatus('sending'); try { const formattedMessage = `Name: ${formData.name || 'Not Provided.'} Phone: ${formData.phone || 'Not Provided.'} Email: ${formData.email || 'Not Provided.'} Service Status: ${formData.serviceStatus || 'Not Provided.'} Branch of Service: ${formData.branchOfService || 'Not Provided.'} Credit Score: ${formData.creditScoreRange || 'Not Provided.'} Loan Purpose: ${formData.loanPurpose || 'Not Provided.'} Notes: ${formData.message || 'Not Provided.'} Terms Agreement: Confirmed - User agreed to Terms of Service on ${new Date().toLocaleDateString()}`; await onContactSubmit({ name: formData.name, email: formData.email, phone: formData.phone || 'Not Provided.', message: formattedMessage, serviceStatus: formData.serviceStatus || 'Not Provided.', branchOfService: formData.branchOfService || 'Not Provided.', creditScoreRange: formData.creditScoreRange || 'Not Provided.' }); setStatus('sent'); setFormData({ name: '', phone: '', email: '', serviceStatus: '', branchOfService: '', creditScoreRange: '', loanPurpose: '', message: '', agreeToTerms: false }); } catch { setStatus('error'); } }; if (status === 'sent') { return (

Thank You!

I'll be in touch within 2 hours.

); } return (

{/* Name */}

Name *

{/* Email & Phone - Shared Line */}

Email *

Phone *

{/* Two columns for Service & Branch */}

Service Status

Branch of Service

{/* Two columns for Credit Score & Loan Purpose */}

Credit Score Range

Loan Purpose

{/* Message */}

Message

</div>

{/* Terms Checkbox */}
        <div className="flex items-start gap-3">
          <input
            type="checkbox"
            name="agreeToTerms"
            id="agreeToTerms"
            checked={formData.agreeToTerms}
            onChange={handleChange}
            required
            className="mt-0.5 w-4 h-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
          />
          <label htmlFor="agreeToTerms" className="font-body text-xs text-gray-600 leading-relaxed">
            I agree to the <a href="/terms" target="_blank" rel="noopener noreferrer" className="underline hover:opacity-80" style={{ color: branding.primaryColor }}>Terms of Service</a> and consent to being contacted regarding mortgage services. I understand this is not a loan application.*
          </label>
        </div>

{/* Error Message */}
        {status === 'error' && (
          <div className="p-3 bg-red-50 rounded-lg border border-red-100">
            <p className="font-body text-xs text-red-600">
              Error. Please try again or call {branding.phone}.
            </p>
          </div>
        )}

{/* Submit Button */}
        <button
          type="submit"
          disabled={status === 'sending' || !formData.agreeToTerms}
          className="w-full py-3 px-6 rounded-lg font-display font-semibold text-white text-sm transition-all duration-200 hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed btn-pulse"
          style={{ backgroundColor: branding.primaryColor }}
        >
          {status === 'sending' ? (
            <span className="flex items-center justify-center gap-2">
              <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
                <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>
              Sending...
            </span>
          ) : (
            'Get My Rate Quote'
          )}
        </button>

<p className="text-center font-body text-[10px] text-gray-400">
          *Required fields
        </p>
      </form>
    );
  };

const ContactForm = () => {
    if (status === 'sent') {
      return (
        <div className="bg-gray-50 p-8 rounded-2xl border-2 border-green-100 text-center">
          <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <svg className="w-8 h-8 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
            </svg>
          </div>
          <h3 className="font-display text-2xl font-bold text-gray-900 mb-2">
            Thank You!
          </h3>
          <p className="font-body text-gray-600 mb-6">
            Your request has been submitted. I'll be in touch within 2 hours.
          </p>
          <button
            onClick={() => setStatus('idle')}
            className="px-6 py-3 rounded-lg font-display font-medium text-white transition-all duration-200 hover:opacity-90"
            style={{ backgroundColor: branding.primaryColor }}
          >
            Submit Another Request
          </button>
        </div>
      );
    }

return (
      <form onSubmit={handleSubmit} className="space-y-6">
        {/* Full size form for standalone section */}
        {/* Name - Full Width */}
        <div>
          <label className="block font-display text-sm font-medium text-gray-700 mb-2">
            Name <span className="text-red-500">*</span>
          </label>
          <input
            type="text"
            name="name"
            value={formData.name}
            onChange={handleChange}
            required
            className="w-full px-4 py-3 rounded-lg border border-gray-200 font-body text-gray-900 transition-all duration-200"
            placeholder="Enter your full name"
          />
        </div>

{/* Email & Phone - Shared Line */}
        <div className="grid md:grid-cols-2 gap-6">
          <div>
            <label className="block font-display text-sm font-medium text-gray-700 mb-2">
              Email <span className="text-red-500">*</span>
            </label>
            <input
              type="email"
              name="email"
              value={formData.email}
              onChange={handleChange}
              required
              className="w-full px-4 py-3 rounded-lg border border-gray-200 font-body text-gray-900 transition-all duration-200"
              placeholder="you@example.com"
            />
          </div>
          <div>
            <label className="block font-display text-sm font-medium text-gray-700 mb-2">
              Phone <span className="text-red-500">*</span>
            </label>
            <input
              type="tel"
              name="phone"
              value={formData.phone}
              onChange={handleChange}
              required
              className="w-full px-4 py-3 rounded-lg border border-gray-200 font-body text-gray-900 transition-all duration-200"
              placeholder="(555) 123-4567"
            />
          </div>
        </div>

<div className="grid md:grid-cols-2 gap-6">
          <div>
            <label className="block font-display text-sm font-medium text-gray-700 mb-2">
              Military Service Status
            </label>
            <select
              name="serviceStatus"
              value={formData.serviceStatus}
              onChange={handleChange}
              className="w-full px-4 py-3 rounded-lg border border-gray-200 font-body text-gray-900 transition-all duration-200 bg-white"
            >
              <option value="">Select your service status</option>
              <option value="Active Duty">Active Duty</option>
              <option value="Veteran">Veteran</option>
              <option value="National Guard/Reserves">National Guard/Reserves</option>
              <option value="Military Spouse">Military Spouse</option>
            </select>
          </div>
          <div>
            <label className="block font-display text-sm font-medium text-gray-700 mb-2">
              Credit Score Range
            </label>
            <select
              name="creditScoreRange"
              value={formData.creditScoreRange}
              onChange={handleChange}
              className="w-full px-4 py-3 rounded-lg border border-gray-200 font-body text-gray-900 transition-all duration-200 bg-white"
            >
              <option value="">Select your credit score range</option>
              <option value="Excellent (740+)">Excellent (740+)</option>
              <option value="Good (680-739)">Good (680-739)</option>
              <option value="Fair (620-679)">Fair (620-679)</option>
              <option value="Poor (Below 620)">Poor (Below 620)</option>
              <option value="Not Sure">Not Sure</option>
            </select>
          </div>
        </div>

<div>
          <label className="block font-display text-sm font-medium text-gray-700 mb-2">
            Branch of Service
          </label>
          <select
            name="branchOfService"
            value={formData.branchOfService}
            onChange={handleChange}
            className="w-full px-4 py-3 rounded-lg border border-gray-200 font-body text-gray-900 transition-all duration-200 bg-white"
          >
            <option value="">Select Branch of Service...</option>
            <option value="Army">Army</option>
            <option value="Navy">Navy</option>
            <option value="Air Force">Air Force</option>
            <option value="Marine Corps">Marine Corps</option>
            <option value="Coast Guard">Coast Guard</option>
            <option value="Space Force">Space Force</option>
            <option value="National Guard">National Guard</option>
            <option value="Reserves">Reserves</option>
          </select>
        </div>

{/* Terms Checkbox - Full */}
        <div className="flex items-start gap-3">
          <input
            type="checkbox"
            name="agreeToTerms"
            id="agreeToTermsFull"
            checked={formData.agreeToTerms}
            onChange={handleChange}
            required
            className="mt-1 w-4 h-4 rounded border-gray-300"
          />
          <label htmlFor="agreeToTermsFull" className="font-body text-sm text-gray-600 leading-relaxed">
            I agree to the <a href="/terms" target="_blank" rel="noopener noreferrer" className="underline hover:opacity-80" style={{ color: branding.primaryColor }}>Terms of Service</a> and consent to being contacted regarding mortgage services. I understand this is not a loan application.*
          </label>
        </div>

{status === 'error' && (
          <div className="p-4 bg-red-50 rounded-lg border border-red-100">
            <p className="font-body text-sm text-red-600">
              Something went wrong. Please try again or call directly at {branding.phone}.
            </p>
          </div>
        )}

<button
          type="submit"
          disabled={status === 'sending' || !formData.agreeToTerms}
          className="w-full py-4 px-8 rounded-lg font-display font-semibold text-white text-lg transition-all duration-200 hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed btn-pulse"
          style={{ backgroundColor: branding.primaryColor }}
        >
          {status === 'sending' ? (
            <span className="flex items-center justify-center gap-2">
              <svg className="animate-spin h-5 w-5" viewBox="0 0 24 24">
                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
                <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>
              Sending...
            </span>
          ) : (
            'Get My Rate Quote'
          )}
        </button>

<p className="text-center font-body text-xs text-gray-400">
          All fields reported exactly as entered. Required fields marked with *
        </p>
      </form>
    );
  };

return (
    <div className="min-h-screen bg-white">
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Instrument+Sans:wght@400;500;600;700&display=swap');
        
        :root {
          --primary: ${branding.primaryColor};
          --secondary: ${branding.secondaryColor};
          --black: #0a0a0a;
          --gray-100: #f8f9fa;
          --gray-200: #e9ecef;
          --gray-400: #adb5bd;
          --gray-600: #6c757d;
          --gray-900: #212529;
        }
        
        @keyframes fadeInUp {
          from {
            opacity: 0;
            transform: translateY(24px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        
        @keyframes slideInLeft {
          from {
            opacity: 0;
            transform: translateX(-32px);
          }
          to {
            opacity: 1;
            transform: translateX(0);
          }
        }
        
        @keyframes pulse {
          0%, 100% {
            box-shadow: 0 0 0 0 rgba(17, 38, 70, 0.4);
          }
          50% {
            box-shadow: 0 0 0 12px rgba(17, 38, 70, 0);
          }
        }
        
        .animate-fade-in-up {
          animation: fadeInUp 0.6s ease-out forwards;
        }
        
        .animate-slide-in-left {
          animation: slideInLeft 0.5s ease-out forwards;
        }
        
        .animate-delay-100 { animation-delay: 100ms; }
        .animate-delay-200 { animation-delay: 200ms; }
        .animate-delay-300 { animation-delay: 300ms; }
        .animate-delay-400 { animation-delay: 400ms; }
        
        .btn-pulse:hover {
          animation: pulse 1.5s infinite;
        }
        
        .font-display {
          font-family: 'Space Grotesk', sans-serif;
        }
        
        .font-body {
          font-family: 'Instrument Sans', sans-serif;
        }
        
        input:focus, textarea:focus {
          outline: none;
          border-color: var(--primary) !important;
          box-shadow: 0 0 0 3px rgba(17, 38, 70, 0.1);
        }
        
        /* Fields with values - visual feedback (controlled by JS class) */
        .field-filled {
          border-color: var(--primary) !important;
          background-color: rgba(17, 38, 70, 0.03) !important;
          border-right-width: 4px !important;
          border-right-color: var(--primary) !important;
        }
        
        .field-filled:not(select) {
          color: var(--primary) !important;
          font-weight: 500;
        }
        
        /* Select dropdowns with value selected */
        select.field-filled {
          color: var(--primary) !important;
          font-weight: 500;
        }
        
        /* Keep filled styling even when focused */
        .field-filled:focus {
          background-color: rgba(17, 38, 70, 0.05) !important;
          box-shadow: 0 0 0 3px rgba(17, 38, 70, 0.1), inset 4px 0 0 0 var(--primary) !important;
        }
      `}</style>

{/* Minimal Header */}
      <header className="border-b border-gray-100">
        <div className="max-w-6xl mx-auto px-6 py-6 flex items-center justify-between">
          {branding.logoUrl && (
            <img 
              src={branding.logoUrl} 
              alt={branding.company}
              className="h-9 object-contain"
            />
          )}

</div>
      </header>

{/* Hero Section */}
      <section className="relative overflow-hidden">
        <div className="max-w-6xl mx-auto px-6 py-16 lg:py-24">
          <div className="grid lg:grid-cols-2 gap-12 lg:gap-16 items-start">
            
            {/* Left: Copy */}
            <div className="space-y-8">
              {/* Badge */}
              <div className="animate-fade-in-up opacity-0">
                <span 
                  className="inline-flex items-center px-4 py-2 text-xs font-semibold tracking-wider uppercase rounded-full font-display"
                  style={{ backgroundColor: `${branding.primaryColor}10`, color: branding.primaryColor }}
                >
                  Military-First Mortgage Lending
                </span>
              </div>

{/* Headline */}
              <h1 className="font-display text-4xl sm:text-5xl lg:text-6xl font-bold leading-none tracking-tight text-gray-900 animate-fade-in-up animate-delay-100 opacity-0">
                Get Your
                <span 
                  className="block mt-2"
                  style={{ color: branding.primaryColor }}
                >
                  Personalized VA
                </span>
                <span 
                  className="block mt-2"
                  style={{ color: branding.primaryColor }}
                >
                  Rate Quote
                </span>
              </h1>

{/* Subhead */}
              <p className="font-body text-lg text-gray-600 max-w-lg leading-relaxed animate-fade-in-up animate-delay-200 opacity-0">
                Veterans and active duty service members: Skip the runaround. Get a personalized rate quote from a fellow service member who understands your benefits.
              </p>

{/* Trust Indicators */}
              <div className="flex flex-wrap gap-6 pt-4 animate-fade-in-up animate-delay-300 opacity-0">
                <div className="flex items-center gap-2">
                  <svg className="w-5 h-5" style={{ color: branding.primaryColor }} fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                  </svg>
                  <p className="font-body text-sm text-gray-600">Veteran-Led Mortgage Team</p>
                </div>
                <div className="flex items-center gap-2">
                  <svg className="w-5 h-5" style={{ color: branding.primaryColor }} fill="currentColor" viewBox="0 0 20 20">
                    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
                  </svg>
                  <p className="font-body text-sm text-gray-600">Serving Tennessee & Virginia Veterans</p>
                </div>
              </div>

{/* Quick Benefits */}
              <div className="grid grid-cols-2 gap-4 pt-4 animate-fade-in-up animate-delay-400 opacity-0">
                {[
                  { num: '0%', text: 'Down Payment Required' },
                  { num: '100%', text: 'VA Benefit Utilized' },
                ].map((item, i) => (
                  <div key={i} className="p-4 bg-gray-50 border-l-4" style={{ borderLeftColor: branding.primaryColor }}>
                    <p className="font-display text-2xl font-bold" style={{ color: branding.primaryColor }}>
                      {item.num}
                    </p>
                    <p className="font-body text-sm text-gray-600 mt-1">{item.text}</p>
                  </div>
                ))}
              </div>
            </div>

{/* Right: CTA Card */}
            <div className="animate-fade-in-up animate-delay-200 opacity-0">
              <div className="bg-white rounded-2xl shadow-2xl overflow-hidden border border-gray-100">
                {/* Card Header */}
                <div 
                  className="px-6 py-5"
                  style={{ backgroundColor: branding.primaryColor }}
                >
                  <span className="inline-block px-3 py-1 text-xs font-semibold tracking-wider uppercase rounded-full bg-white/20 text-white font-display mb-2">
                    Get Your Quote
                  </span>
                  <h2 className="font-display text-xl lg:text-2xl font-bold text-white leading-tight">
                    Request Your VA Rate Quote
                  </h2>
                  <p className="font-body text-white/80 text-xs mt-1">
                    Response within 2 hours
                  </p>
                </div>
                
                {/* Compact Form */}
                <div className="p-6">
                  <CompactForm />
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

{/* Value Props - Clean Horizontal */}
      <section className="py-16 lg:py-20" style={{ backgroundColor: `${branding.primaryColor}03` }}>
        <div className="max-w-6xl mx-auto px-6">
          <div className="grid md:grid-cols-3 gap-8 lg:gap-12">
            {[
              {
                title: 'Zero Down Payment',
                desc: 'VA loans require no down payment, keeping your savings intact for what matters most.',
              },
              {
                title: 'No PMI Required',
                desc: 'Unlike conventional loans, VA loans never require private mortgage insurance.',
              },
              {
                title: 'Fellow Veteran',
                desc: 'Work with someone who understands military life, moves, and your unique needs.',
              },
            ].map((item, i) => (
              <div 
                key={i}
                className="relative pl-6 border-l-2"
                style={{ borderLeftColor: branding.primaryColor }}
              >
                <span 
                  className="absolute -left-3 -top-1 font-display text-4xl font-bold opacity-20"
                  style={{ color: branding.primaryColor }}
                >
                  0{i + 1}
                </span>
                <h3 className="font-display text-xl font-semibold text-gray-900 mb-3">
                  {item.title}
                </h3>
                <p className="font-body text-gray-600 leading-relaxed">
                  {item.desc}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

{/* Quick Trust Strip */}
      <section className="py-10 border-y border-gray-100">
        <div className="max-w-6xl mx-auto px-6">
          <div className="flex flex-wrap items-center justify-center gap-8 lg:gap-16 text-center">
            <div>
              <p className="font-display text-3xl font-bold" style={{ color: branding.primaryColor }}>500+</p>
              <p className="font-body text-sm text-gray-500 uppercase tracking-wider">Families Helped</p>
            </div>
            <div className="w-px h-12 bg-gray-200 hidden lg:block" />
            <div>
              <p className="font-display text-3xl font-bold" style={{ color: branding.primaryColor }}>$200M+</p>
              <p className="font-body text-sm text-gray-500 uppercase tracking-wider">Loans Closed</p>
            </div>
            <div className="w-px h-12 bg-gray-200 hidden lg:block" />
            <div>
              <p className="font-display text-3xl font-bold" style={{ color: branding.primaryColor }}>2hrs</p>
              <p className="font-body text-sm text-gray-500 uppercase tracking-wider">Avg. Response Time</p>
            </div>
          </div>
        </div>
      </section>

{/* CTA Section - Below fold for mobile users */}
      <section id="contact-form" className="py-16 lg:py-20 bg-gray-50 lg:hidden">
        <div className="max-w-3xl mx-auto px-6">
          <div className="bg-white rounded-2xl shadow-xl overflow-hidden border border-gray-100">
            <div 
              className="px-8 py-6"
              style={{ backgroundColor: branding.primaryColor }}
            >
              <span className="inline-block px-3 py-1 text-xs font-semibold tracking-wider uppercase rounded-full bg-white/20 text-white font-display mb-3">
                Get Your Quote
              </span>
              <h2 className="font-display text-2xl lg:text-3xl font-bold text-white leading-tight">
                Request Your VA Rate Quote
              </h2>
              <p className="font-body text-white/80 text-sm mt-2">
                Response within 2 hours
              </p>
            </div>
            
            <div className="p-8">
              <ContactForm />
            </div>
          </div>
        </div>
      </section>

{/* Comprehensive Footer */}
      <footer className="py-12 border-t-2" style={{ borderTopColor: branding.primaryColor }}>
        <div className="max-w-6xl mx-auto px-6">
          {/* Main Footer Content */}
          <div className="text-center space-y-2">
            {/* Logo */}
            {branding.logoUrl && (
              <img 
                src={branding.logoUrl} 
                alt={branding.company}
                className="h-8 object-contain mx-auto"
              />
            )}
            
            {/* NMLS Info Line */}
            <p className="font-display text-xs text-gray-900 leading-tight">
              <span className="font-semibold">Michael "Big Sarge" Mesa</span> (NMLS #{branding.nmls}) | <span className="font-semibold">{branding.company}</span> (NMLS #{branding.companyNmls})
            </p>
            
            {/* Equal Housing & NMLS Link */}
            <p className="font-body text-xs text-gray-600 leading-tight">
              Equal Housing Opportunity
            </p>
            
            {/* VA Disclaimer */}
            <p className="font-body text-xs text-gray-600 italic leading-tight">
              Not affiliated with or endorsed by the U.S. Department of Veterans Affairs or any government agency.
            </p>
            
            {/* Loan Commitment Disclaimer */}
            <p className="font-body text-xs text-gray-600 leading-tight">
              This is not a commitment to lend. All loans are subject to credit approval, underwriting, and property eligibility. Not all borrowers will qualify.
            </p>
            
            {/* State Licensing */}
            <p className="font-body text-xs text-gray-500 leading-tight">
              For Tennessee and Virginia residents: Mortgage services are subject to state regulations. Licensing information available at <a href="https://www.nmlsconsumeraccess.org" target="_blank" rel="noopener noreferrer" className="underline hover:opacity-80" style={{ color: branding.primaryColor }}>www.nmlsconsumeraccess.org</a>.
            </p>
          </div>

{/* Divider */}
          <div className="my-8 border-t border-gray-200" />

{/* Bottom Row */}
          <div className="flex flex-col md:flex-row items-center justify-between gap-4">
            <div className="flex items-center gap-6">
              <a 
                href="/privacy"
                className="font-body text-xs text-gray-400 hover:text-gray-600 transition-colors"
              >
                Privacy Policy
              </a>
              <a 
                href="/terms"
                className="font-body text-xs text-gray-400 hover:text-gray-600 transition-colors"
              >
                Terms of Service
              </a>
            </div>
            
            {/* Contact Info with Profile */}
            <div className="flex items-center gap-4">
              {/* Profile */}
              <div className="flex items-center gap-2 pr-4 border-r border-gray-200">
                <div className="w-8 h-8 rounded-full overflow-hidden border" style={{ borderColor: branding.primaryColor }}>
                  {branding.headshotUrl && (
                    <img 
                      src={branding.headshotUrl} 
                      alt={branding.fullName}
                      className="w-full h-full object-cover"
                    />
                  )}
                </div>
                <div className="text-left">
                  <p className="font-display text-xs font-semibold text-gray-900">{branding.fullName}</p>
                  <p className="font-body text-[10px] text-gray-500">{branding.title}</p>
                </div>
              </div>
              
              {branding.phone && (
                <div className="text-right">
                  <a 
                    href={`tel:${branding.phone}`}
                    className="font-body text-xs font-medium transition-colors hover:opacity-80 block"
                    style={{ color: branding.primaryColor }}
                  >
                    {branding.phone} - Direct
                  </a>
                  <a 
                    href={`mailto:${branding.email}`}
                    className="font-body text-xs transition-colors hover:opacity-80 block"
                    style={{ color: branding.primaryColor }}
                  >
                    {branding.email}
                  </a>
                </div>
              )}
            </div>
          </div>

{/* Full Legal Disclaimer (if available) */}
          {branding.disclaimer && (
            <div className="mt-8 pt-6 border-t border-gray-100">
              <p className="font-body text-xs text-gray-500 leading-snug text-center max-w-4xl mx-auto whitespace-pre-line">
                {branding.disclaimer}
              </p>
            </div>
          )}
        </div>
      </footer>

</div>
  );
}</article></body></html>

Privacy Policy | Empire Home Loans

Privacy Policy | Empire Home Loans

Privacy Policy

1. Introduction

2. Information We Collect

2.1 Personal Information

2.2 Automatically Collected Information

3. How We Use Your Information

4. Legal Basis for Processing (GDPR Compliance)

5. Sharing Your Information

6. Data Security

7. Data Retention

8. Your Privacy Rights

9. CCPA Rights (California Residents)

10. Cookies and Tracking Technologies

11. Third-Party Links

12. Children's Privacy

13. Contact Us

14. Changes to This Privacy Policy