import React, { useState, useEffect } from 'react';
import { 
  MapPin, 
  Wifi, 
  Dog, 
  Coffee, 
  Calendar, 
  Check, 
  Car, 
  Maximize, 
  Info,
  Menu,
  X,
  Star,
  Download,
  Mail,
  Shield,
  FileText,
  Phone,
  MessageSquare,
  Globe,
  HelpCircle,
  ArrowRight,
  Calculator,
  Waves,
  Dumbbell,
  Plus,
  Minus,
  Bike,
  Utensils,
  Zap,
  Gamepad2
} from 'lucide-react';

const App = () => {
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const [activeTab, setActiveTab] = useState('1bed');
  const [lang, setLang] = useState('en'); // 'en' or 'es'
  
  // Animation State for Commute Bars
  const [animateBars, setAnimateBars] = useState(false);
  
  // Modal State Management
  const [activeModal, setActiveModal] = useState(null); // 'lead', 'demo', 'terms', 'privacy', 'quiz'
  const [formStatus, setFormStatus] = useState('idle');

  // FAQ State
  const [activeFaq, setActiveFaq] = useState(null);

  // Quiz State
  const [quizStep, setQuizStep] = useState(0);
  const [quizScore, setQuizScore] = useState(0);
  const [quizFinished, setQuizFinished] = useState(false);

  // Trigger animations on mount
  useEffect(() => {
    setAnimateBars(true);
  }, []);

  // Updated Brand Colors - NO PURPLE
  const colors = {
    bg: '#ffffff',
    bgAlt: '#f3f4f6', 
    text: '#111827',  
    textLight: '#4b5563', 
    accent: '#f97316', 
    secondary: '#374151', 
    white: '#ffffff',
    footer: '#1f2937' 
  };

  // Content Translations
  const content = {
    en: {
      nav: { residences: 'Residences', features: 'Features', lifestyle: 'Lifestyle', neighborhood: 'Neighborhood', compare: 'Compare', about: 'About', quiz: 'Help Me Find It', book: 'VIP Demo' },
      hero: {
        special: 'Current Special: 1 Month Free',
        title: 'Elevated Living in Arista.',
        subtitle: 'Curated by Emma Caballero.',
        desc: 'Skip the corporate runaround. Get the insider knowledge on the quietest units, the best views, and the true Arista lifestyle.',
        cta_demo: 'Schedule VIP Demo',
        cta_view: 'View Inventory'
      },
      contact_bar: {
        call: 'Call Me',
        text: 'Text Me',
        lang_note: 'English & Spanish Speaker'
      },
      intro: {
        title: 'The "Insider" Difference',
        card1_title: 'Contextual Leasing',
        card1_desc: 'Corporate sites show you floor plans. I show you which unit fits your Peloton and which balcony catches the sunset.',
        card2_title: 'Unvarnished Truth',
        card2_desc: 'Is the construction next door loud? How is the valet trash? I answer the questions the brochures ignore.',
        card3_title: 'Community Connection',
        card3_desc: 'From the dog park clique to the best happy hour at Arista Deli, I plug you into the neighborhood instantly.'
      },
      residences: {
        title: 'The Residences',
        subtitle: 'Mid-rise density with condo-spec finishes. 12-foot ceilings in select homes, quartz countertops, and superior sound attenuation.',
        check_avail: 'Check Availability',
        emma_take: "Emma's Take:"
      },
      faq: {
        title: 'Apartment Features (Luxury & Comfort)',
        subtitle: 'Everything crafted with your comfort in mind.',
        items: [
          { q: 'Gourmet Kitchens', a: 'Quartz countertops, tile backsplashes, and under-mounted stainless steel sinks with GE Stainless Steel Appliances.' },
          { q: 'In-Unit Laundry', a: 'Full-size washers & dryers are included in every single home for your convenience.' },
          { q: 'Flooring & Finishes', a: 'Wood-style vinyl flooring in living areas for durability, upgraded chrome finishes, and plush carpeting in bedrooms.' },
          { q: 'Volume & Space', a: 'Select units feature soaring 12-foot ceilings and oversized walk-in closets.' },
          { q: 'Natural Light & Air', a: 'Large, energy-efficient dual-pane windows, patios/balconies, and central air conditioning.' }
        ]
      },
      amenities: {
        title: 'Community Perks (Lifestyle & Convenience)',
        pool: 'Resort-Inspired Pool & Spa',
        pool_desc: 'Lounging areas for relaxation.',
        gym: '24-Hour Fitness Center',
        gym_desc: 'Fully equipped for cardio and strength.',
        tech: 'Work From Home Ready',
        tech_desc: 'Conference room with Wi-Fi.',
        lounge: 'Entertainment Lounge',
        lounge_desc: 'Pool table, foosball, TVs, & fireplace.',
        ev: 'EV Charging Station',
        ev_desc: 'On-site charging for electric vehicles.',
        bike: 'Bike Storage',
        bike_desc: 'Secure community storage.',
        grill: 'BBQ Grilling Station',
        grill_desc: 'Perfect for outdoor dining.'
      },
      neighborhood: {
        loc_intel: 'Location Intelligence',
        title: 'The Arista Evolution',
        insider_note: 'Insider Note: The 1stBank Center',
        note_body: 'The venue is permanently closed and undergoing demolition. Why this is good for you: No more concert traffic. No more noise pollution. Arista is transitioning into a quieter community.',
        walk_score: 'The "Walk Score" Highlights',
        commute: 'Commute Calculator'
      },
      compare: {
        title: 'Clearing the Confusion',
        subtitle: 'There are two "Uptowns" in Arista. Here is why 8000 Uptown is your choice.',
        col_1: 'Feature',
        col_2: '8000 Uptown',
        col_3: 'Arista Uptown',
        rows: [
          { feat: 'Management', val1: 'Inland Residential (Stable)', val2: 'Greystar (High Turnover)' },
          { feat: 'Ceiling Height', val1: 'Up to 12-Foot (Condo Feel)', val2: 'Standard 9-Foot' },
          { feat: 'Vibe', val1: 'Residential / Peaceful', val2: 'Hotel / Urban' },
          { feat: 'Parking', val1: 'Attached Garages Available', val2: 'Mostly Surface / Detached' }
        ]
      },
      about: {
        title: "Hi, I'm Emma Caballero.",
        subtitle: 'Your Arista Neighborhood Insider.',
        p1: 'I believe that where you live determines how you live. Specializing in the Arista neighborhood, I help professionals and families navigate the Broomfield rental market to find not just an apartment, but a home base.',
        p2: 'I know which units get the best morning light, which floor plans fit a king-sized bed, and exactly how long it takes to walk to the bus. My goal is to make your move seamless.',
        cta: 'Book a Chat'
      },
      footer: {
        role: 'Leasing Consultant',
        rights: '© 2025 Rent8000.com. All rights reserved.',
        legal: 'Legal'
      }
    },
    es: {
      nav: { residences: 'Residencias', features: 'Características', lifestyle: 'Estilo de Vida', neighborhood: 'Vecindario', compare: 'Comparar', about: 'Sobre Mí', quiz: 'Ayúdame a Encontrar', book: 'Demostración VIP' },
      hero: {
        special: 'Oferta Actual: 1 Mes Gratis',
        title: 'Vida Elevada en Arista.',
        subtitle: 'Comisariado por Emma Caballero.',
        desc: 'Evite los trámites corporativos. Obtenga información privilegiada sobre las unidades más tranquilas, las mejores vistas y el verdadero estilo de vida de Arista.',
        cta_demo: 'Agendar Demo VIP',
        cta_view: 'Ver Inventario'
      },
      contact_bar: {
        call: 'Llamar',
        text: 'Enviar SMS',
        lang_note: 'Hablo Inglés y Español'
      },
      intro: {
        title: 'La Diferencia "Insider"',
        card1_title: 'Arrendamiento Contextual',
        card1_desc: 'Los sitios corporativos muestran planos. Yo te muestro qué unidad se adapta a tu Peloton y qué balcón tiene la mejor puesta de sol.',
        card2_title: 'Verdad Sin Filtros',
        card2_desc: '¿La construcción de al lado es ruidosa? ¿Cómo es la recolección de basura? Respondo las preguntas que los folletos ignoran.',
        card3_title: 'Conexión Comunitaria',
        card3_desc: 'Desde el grupo del parque para perros hasta el mejor happy hour en Arista Deli, te conecto con el vecindario al instante.'
      },
      residences: {
        title: 'Las Residencias',
        subtitle: 'Densidad media con acabados de condominio. Techos de 12 pies en hogares selectos, encimeras de cuarzo y aislamiento acústico superior.',
        check_avail: 'Ver Disponibilidad',
        emma_take: "Opinión de Emma:"
      },
      faq: {
        title: 'Características del Apartamento (Lujo y Confort)',
        subtitle: 'Todo diseñado pensando en su comodidad.',
        items: [
          { q: 'Cocinas Gourmet', a: 'Encimeras de cuarzo, placas para salpicaduras de azulejos y fregaderos de acero inoxidable bajo encimera con electrodomésticos GE.' },
          { q: 'Lavandería en la Unidad', a: 'Lavadoras y secadoras de tamaño completo están incluidas en cada hogar.' },
          { q: 'Pisos y Acabados', a: 'Pisos de vinilo estilo madera en áreas de estar, acabados cromados mejorados y alfombras lujosas en habitaciones.' },
          { q: 'Volumen y Espacio', a: 'Unidades selectas cuentan con techos de 12 pies y vestidores de gran tamaño.' },
          { q: 'Luz Natural y Aire', a: 'Grandes ventanas de doble panel, patios/balcones y aire acondicionado central.' }
        ]
      },
      amenities: {
        title: 'Ventajas Comunitarias',
        pool: 'Piscina y Spa Estilo Resort',
        pool_desc: 'Áreas de descanso para relajarse.',
        gym: 'Gimnasio 24 Horas',
        gym_desc: 'Totalmente equipado para cardio y fuerza.',
        tech: 'Listo para Trabajo Remoto',
        tech_desc: 'Sala de conferencias con Wi-Fi.',
        lounge: 'Salón de Entretenimiento',
        lounge_desc: 'Billar, futbolín, televisores y chimenea.',
        ev: 'Estación de Carga EV',
        ev_desc: 'Carga en el sitio para vehículos eléctricos.',
        bike: 'Almacenamiento de Bicicletas',
        bike_desc: 'Almacenamiento comunitario seguro.',
        grill: 'Estación de Parrilla BBQ',
        grill_desc: 'Perfecto para cenar al aire libre.'
      },
      neighborhood: {
        loc_intel: 'Inteligencia de Ubicación',
        title: 'La Evolución de Arista',
        insider_note: 'Nota Insider: El 1stBank Center',
        note_body: 'El lugar está cerrado permanentemente y en demolición. Por qué esto es bueno para ti: No más tráfico de conciertos. No más contaminación acústica. Arista se está convirtiendo en una comunidad más tranquila.',
        walk_score: 'Puntos Destacados a Pie',
        commute: 'Calculadora de Viaje'
      },
      compare: {
        title: 'Aclarando la Confusión',
        subtitle: 'Hay dos "Uptowns" en Arista. Aquí es por qué 8000 Uptown es tu elección.',
        col_1: 'Característica',
        col_2: '8000 Uptown',
        col_3: 'Arista Uptown',
        rows: [
          { feat: 'Administración', val1: 'Inland Residential (Estable)', val2: 'Greystar (Alta Rotación)' },
          { feat: 'Altura de Techo', val1: 'Hasta 12 Pies (Estilo Condo)', val2: 'Estándar 9 Pies' },
          { feat: 'Ambiente', val1: 'Residencial / Pacífico', val2: 'Hotel / Urbano' },
          { feat: 'Estacionamiento', val1: 'Garajes Adjuntos Disponibles', val2: 'Mayoría Superficie / Separado' }
        ]
      },
      about: {
        title: "Hola, soy Emma Caballero.",
        subtitle: 'Tu Insider del Vecindario Arista.',
        p1: 'Creo que dónde vives determina cómo vives. Especializándome en el vecindario Arista, ayudo a profesionales y familias a navegar el mercado de alquiler de Broomfield para encontrar no solo un apartamento, sino un hogar.',
        p2: 'Sé qué unidades reciben la mejor luz matutina, qué planos acomodan una cama king-size y exactamente cuánto se tarda en caminar al autobús. Mi objetivo es hacer tu mudanza perfecta.',
        cta: 'Agendar Charla'
      },
      footer: {
        role: 'Consultora de Arrendamiento',
        rights: '© 2025 Rent8000.com. Todos los derechos reservados.',
        legal: 'Legal'
      }
    }
  };

  const t = content[lang];

  // Official Floor Plan Data from Brochure
  const floorPlans = {
    '1bed': [
      { id: '1A', name: 'Plan 1A', sqft: '688', price: 'Call for Details', features: ['1 Bed / 1 Bath', 'Entry Level Value'] },
      { id: '1B', name: 'Plan 1B', sqft: '752', price: '$1,440+', features: ['1 Bed / 1 Bath', 'Open Layout'] },
      { id: '1C', name: 'Plan 1C', sqft: '807', price: '$1,540+', features: ['1 Bed / 1 Bath', 'Spacious Living'] },
      { id: '1D', name: 'Plan 1D', sqft: '835', price: '$1,570+', features: ['1 Bed / 1 Bath', 'Largest 1-Bed'] },
    ],
    '2bed': [
      { id: '2', name: 'Plan 2', sqft: '950', price: '$1,695+', features: ['2 Bed / 1 Bath', 'Smart Value'] },
      { id: '2A', name: 'Plan 2A', sqft: '1,001', price: '$1,890+', features: ['2 Bed / 2 Bath', 'Dual Master'] },
      { id: '2B', name: 'Plan 2B', sqft: '1,009', price: '$1,870+', features: ['2 Bed / 2 Bath', 'Balanced Layout'] },
      { id: '2C', name: 'Plan 2C', sqft: '1,037', price: '$2,125+', features: ['2 Bed / 2 Bath', 'Premium Views'] },
      { id: '2D', name: 'Plan 2D', sqft: '1,041', price: '$1,845+', features: ['2 Bed / 2 Bath', 'WFH Optimized'] },
      { id: '2E', name: 'Plan 2E', sqft: '1,051', price: '$2,095+', features: ['2 Bed / 2 Bath', 'Extra Storage'] },
      { id: '2F', name: 'Plan 2F', sqft: '1,094', price: 'Call for Details', features: ['2 Bed / 2 Bath', 'Largest 2-Bed'] },
    ],
    '3bed': [
      { id: '3', name: 'Plan 3', sqft: '1,205', price: '$2,355+', features: ['3 Bed / 2 Bath', 'Corner Location'] },
    ]
  };

  // Help Me Find It - Quiz Questions
  const quizQuestions = [
    {
      q: "Where is your office / primary commute?",
      options: [
        { text: "Denver / Union Station", points: 2, note: "Perfect. The FF1 Bus Station is an 8-minute walk." },
        { text: "Boulder", points: 2, note: "Great. You have direct access to US 36." },
        { text: "Interlocken / Broomfield", points: 3, note: "Ideal. You can basically walk or bike to work." },
        { text: "Remote", points: 3, note: "Our Fiber Internet and Coworking lounge are made for you." }
      ]
    },
    {
      q: "How do you get around?",
      options: [
        { text: "My own Car", points: 1, note: "We have attached garages available." },
        { text: "EV (Electric Vehicle)", points: 3, note: "We have on-site EV charging stations." },
        { text: "Bus / Public Transit", points: 3, note: "You are right next to the US 36 Bus Hub." },
        { text: "Bike", points: 2, note: "The US 36 Bikeway connects right to our property." }
      ]
    },
    {
      q: "Do you have any furry friends?",
      options: [
        { text: "Yes, a Dog", points: 3, note: "We have a dedicated dog park and no weight limits." },
        { text: "Yes, a Cat", points: 2, note: "We are cat friendly!" },
        { text: "No", points: 1, note: "Enjoy the quiet community." }
      ]
    },
    {
      q: "What is your biggest pain point in your current rental?",
      options: [
        { text: "Noise / Thin Walls", points: 3, note: "8000 Uptown uses condo-spec construction for better soundproofing." },
        { text: "Slow Internet", points: 3, note: "We have CenturyLink Quantum Fiber." },
        { text: "Parking", points: 3, note: "We have reserved garages." },
        { text: "Outdated Finishes", points: 2, note: "Our units feature quartz and modern stainless steel." }
      ]
    },
    {
      q: "How important is vertical space to you?",
      options: [
        { text: "I need high ceilings", points: 3, note: "Select units feature stunning 12-foot ceilings." },
        { text: "Standard is fine", points: 1, note: "Our standard 9-foot is still spacious." }
      ]
    },
    {
      q: "What is your ideal Saturday?",
      options: [
        { text: "Clubbing downtown", points: 0, note: "We are a quieter, residential community." },
        { text: "Hiking / Outdoors", points: 3, note: "You are minutes from trails and open space." },
        { text: "Chilling at a local brewery", points: 2, note: "Arista Deli and The Burns Pub are a walk away." }
      ]
    },
    {
      q: "When are you looking to move?",
      options: [
        { text: "ASAP / This Month", points: 3, note: "We have immediate inventory." },
        { text: "1-2 Months", points: 2, note: "Perfect timing to secure a rate." },
        { text: "Just browsing", points: 0, note: "Take your time!" }
      ]
    }
  ];

  const handleQuizAnswer = (points) => {
    setQuizScore(quizScore + points);
    if (quizStep < quizQuestions.length - 1) {
      setQuizStep(quizStep + 1);
    } else {
      setQuizFinished(true);
    }
  };

  const resetQuiz = () => {
    setQuizStep(0);
    setQuizScore(0);
    setQuizFinished(false);
  };

  const handleLeadSubmit = async (e) => {
    e.preventDefault();
    setFormStatus('submitting');
    const formData = new FormData(e.target);
    try {
      const response = await fetch("https://formspree.io/f/mwpqovln", { method: "POST", body: formData, headers: { 'Accept': 'application/json' } });
      if (response.ok) {
        setFormStatus('success');
        setTimeout(() => { setActiveModal(null); setFormStatus('idle'); }, 3000);
      } else { setFormStatus('error'); }
    } catch (error) { setFormStatus('error'); }
  };

  const TermsOfUse = () => (
    <div className="space-y-4 text-sm text-gray-600">
      <h3 className="text-xl font-bold text-gray-900">Terms of Use / Términos de Uso</h3>
      <p><strong>Effective Date:</strong> October 2025</p>
      <p>Welcome to Rent8000.com. By accessing this website, you agree to comply with and be bound by the following terms and conditions.</p>
      <h4 className="font-bold text-gray-900">1. Information Accuracy</h4>
      <p>While Emma Caballero strives to provide accurate, real-time "insider" information regarding 8000 Uptown, all pricing, availability, and specific unit details are subject to change by property management.</p>
      <h4 className="font-bold text-gray-900">2. Pricing & Availability Disclaimer</h4>
      <p>Rents, premiums, and special offers are dynamic and subject to change without notice. The pricing shown on this website is for informational purposes and does not constitute a binding offer. Final pricing is determined at the time of lease application based on move-in date and lease term.</p>
    </div>
  );

  const PrivacyPolicy = () => (
    <div className="space-y-4 text-sm text-gray-600">
      <h3 className="text-xl font-bold text-gray-900">Privacy Policy / Política de Privacidad</h3>
      <p>At Rent8000.com, we prioritize your privacy.</p>
      <h4 className="font-bold text-gray-900">1. Data Collection</h4>
      <p>We collect information you voluntarily provide via our contact forms.</p>
    </div>
  );

  return (
    <div style={{ backgroundColor: colors.bg, color: colors.text }} className="min-h-screen font-sans selection:bg-orange-100 selection:text-orange-900">
      
      {/* Injecting Dynamic Styles for Animations */}
      <style>
        {`
          @keyframes slowZoom {
            0% { transform: scale(1); }
            100% { transform: scale(1.1); }
          }
          @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
          }
          @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-8px); }
            100% { transform: translateY(0px); }
          }
          @keyframes pulse-slow {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.8; }
          }
          .animate-slow-zoom { animation: slowZoom 20s infinite alternate ease-in-out; }
          .animate-fade-in-up { animation: fadeInUp 0.8s ease-out forwards; }
          .animate-float { animation: float 6s ease-in-out infinite; }
          .animate-pulse-slow { animation: pulse-slow 3s ease-in-out infinite; }
          .delay-100 { animation-delay: 100ms; }
          .delay-200 { animation-delay: 200ms; }
          .delay-300 { animation-delay: 300ms; }
          .hover-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
          .hover-lift:hover { transform: translateY(-5px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); }
        `}
      </style>

      {/* Top Bar - Contact & Language */}
      <div className="bg-gray-900 text-white text-xs py-2 px-4 transition-colors duration-300">
        <div className="max-w-7xl mx-auto flex justify-between items-center">
          <div className="flex items-center gap-4">
            <span className="flex items-center gap-1 font-medium"><Globe size={12}/> {t.contact_bar.lang_note}</span>
          </div>
          <div className="flex items-center gap-4">
             {/* Language Toggle */}
             <button 
              onClick={() => setLang(lang === 'en' ? 'es' : 'en')}
              className="font-bold uppercase tracking-wider hover:text-orange-400 transition-colors flex items-center gap-1"
            >
              {lang === 'en' ? 'Español' : 'English'}
            </button>
            <div className="h-4 w-px bg-gray-700 mx-2 hidden sm:block"></div>
            <a href="tel:7206185374" className="hidden sm:flex items-center gap-1 hover:text-orange-400 font-bold transition-colors"><Phone size={12}/> 720-618-5374</a>
          </div>
        </div>
      </div>

      {/* Navigation */}
      <nav className="sticky top-0 z-50 bg-white/95 backdrop-blur-md shadow-sm border-b border-gray-100 transition-all duration-300">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between h-20 items-center">
            <div className="flex items-center group cursor-pointer" onClick={() => window.scrollTo({top: 0, behavior: 'smooth'})}>
              <span className="text-2xl font-serif font-black tracking-wider group-hover:opacity-80 transition-opacity" style={{ color: colors.text }}>
                Rent<span style={{ color: colors.accent }}>8000</span>.com
                <span className="hidden sm:block text-[10px] font-sans font-medium text-gray-500 tracking-[0.2em] mt-1 group-hover:text-orange-600 transition-colors">EMMA CABALLERO | INSIDER ACCESS</span>
              </span>
            </div>
            
            {/* Desktop Nav */}
            <div className="hidden md:flex space-x-6 items-center">
              <button 
                onClick={() => { setActiveModal('quiz'); resetQuiz(); }} 
                className="flex items-center gap-2 text-orange-600 hover:text-orange-700 text-sm uppercase tracking-wide font-bold bg-orange-50 px-3 py-1 rounded-full border border-orange-100 hover:shadow-md transition-all duration-300 hover:scale-105"
              >
                <HelpCircle size={14} className="animate-pulse-slow" /> {t.nav.quiz}
              </button>
              {['residences', 'features', 'lifestyle', 'neighborhood', 'compare', 'about'].map((item) => (
                <a key={item} href={`#${item}`} className="text-gray-600 hover:text-orange-600 transition-colors text-sm uppercase tracking-wide font-bold relative group">
                  {t.nav[item]}
                  <span className="absolute -bottom-1 left-0 w-0 h-0.5 bg-orange-600 transition-all duration-300 group-hover:w-full"></span>
                </a>
              ))}
              <button 
                onClick={() => setActiveModal('demo')}
                style={{ backgroundColor: colors.accent }} 
                className="px-6 py-2 rounded-sm text-white font-bold hover:bg-orange-700 transition-all shadow-md hover:shadow-lg flex items-center gap-2 text-sm uppercase tracking-wide transform hover:-translate-y-0.5 active:translate-y-0 duration-200"
              >
                <Calendar size={14} />
                {t.nav.book}
              </button>
            </div>

            {/* Mobile Menu Button */}
            <div className="md:hidden flex items-center">
              <button onClick={() => setIsMenuOpen(!isMenuOpen)} className="text-gray-800 hover:text-orange-600 transition-colors">
                {isMenuOpen ? <X size={28} /> : <Menu size={28} />}
              </button>
            </div>
          </div>
        </div>

        {/* Mobile Nav */}
        {isMenuOpen && (
          <div className="md:hidden bg-white pb-4 px-4 shadow-xl border-t border-gray-100 animate-fade-in-up duration-300">
             <button 
                onClick={() => { setActiveModal('quiz'); resetQuiz(); setIsMenuOpen(false); }} 
                className="w-full text-left py-3 text-orange-600 font-bold border-b border-gray-100 hover:text-orange-700 uppercase text-sm flex items-center gap-2"
              >
                <HelpCircle size={16} /> {t.nav.quiz}
              </button>
             {['residences', 'features', 'lifestyle', 'neighborhood', 'compare', 'about'].map((item) => (
                <a 
                  key={item} 
                  href={`#${item}`} 
                  onClick={() => setIsMenuOpen(false)}
                  className="block py-3 text-gray-600 font-bold border-b border-gray-100 hover:text-orange-600 uppercase text-sm"
                >
                  {t.nav[item]}
                </a>
              ))}
          </div>
        )}
      </nav>

      {/* Hero Section */}
      <section className="relative h-[85vh] flex items-center justify-center overflow-hidden bg-gray-50">
        <div className="absolute inset-0 z-0">
          <img 
            src="https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?q=80&w=2070&auto=format&fit=crop" 
            alt="Leasing Documents on Desk Abstract" 
            className="w-full h-full object-cover grayscale opacity-20 animate-slow-zoom origin-center"
          />
          <div className="absolute inset-0 bg-white/40"></div>
          <div className="absolute inset-0 bg-gradient-to-t from-white via-transparent to-transparent"></div>
        </div>

        <div className="relative z-10 max-w-4xl mx-auto px-4 text-center">
          <div className="inline-block px-6 py-2 mb-6 border border-gray-900 text-gray-900 bg-white/80 backdrop-blur-md uppercase tracking-widest text-xs font-bold shadow-sm animate-fade-in-up">
            {t.hero.special}
          </div>
          <h1 className="text-5xl md:text-7xl font-serif text-gray-900 mb-6 leading-tight drop-shadow-sm animate-fade-in-up delay-100">
            {t.hero.title}
            <span className="block italic text-orange-600 text-3xl md:text-5xl mt-3 font-light font-serif">{t.hero.subtitle}</span>
          </h1>
          <p className="text-xl text-gray-700 mb-10 max-w-2xl mx-auto font-medium bg-white/70 p-4 backdrop-blur-sm border-l-4 border-orange-500 animate-fade-in-up delay-200">
            {t.hero.desc}
          </p>
          <div className="flex flex-col sm:flex-row gap-4 justify-center animate-fade-in-up delay-300">
            {/* Call Action Buttons */}
            <div className="flex gap-2 justify-center sm:justify-start">
               <a 
                  href="tel:7206185374"
                  className="px-6 py-4 bg-gray-900 text-white font-bold text-sm hover:bg-black transition-all shadow-xl flex items-center justify-center gap-2 uppercase tracking-wide hover:-translate-y-1 duration-300"
                >
                  <Phone size={16} /> {t.contact_bar.call}
                </a>
                <a 
                  href="sms:7206185374"
                  className="px-6 py-4 bg-orange-600 text-white font-bold text-sm hover:bg-orange-700 transition-all shadow-xl flex items-center justify-center gap-2 uppercase tracking-wide hover:-translate-y-1 duration-300"
                >
                  <MessageSquare size={16} /> {t.contact_bar.text}
                </a>
            </div>
            
             <button 
              onClick={() => setActiveModal('demo')}
              className="px-8 py-4 border-2 border-gray-900 text-gray-900 bg-white/80 backdrop-blur-sm font-bold text-sm hover:bg-gray-900 hover:text-white transition-all flex items-center justify-center uppercase tracking-wide hover:-translate-y-1 duration-300"
            >
              {t.hero.cta_demo}
            </button>
          </div>
        </div>
      </section>

      {/* Intro */}
      <section className="py-20 px-4 max-w-5xl mx-auto text-center">
        <h2 className="text-3xl font-serif text-gray-900 mb-8 animate-fade-in-up">{t.intro.title}</h2>
        <div className="grid md:grid-cols-3 gap-8">
          <div className="p-8 bg-white shadow-lg border-t-4 border-gray-800 hover:shadow-2xl transition-all duration-500 group hover:-translate-y-2">
            <div className="w-14 h-14 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-6 text-gray-700 group-hover:bg-gray-800 group-hover:text-white transition-colors duration-300">
              <Maximize size={28} className="group-hover:scale-110 transition-transform" />
            </div>
            <h3 className="text-xl font-bold mb-3 text-gray-900">{t.intro.card1_title}</h3>
            <p className="text-gray-600 text-sm leading-relaxed">{t.intro.card1_desc}</p>
          </div>
          <div className="p-8 bg-white shadow-lg border-t-4 border-orange-500 hover:shadow-2xl transition-all duration-500 group hover:-translate-y-2">
            <div className="w-14 h-14 bg-orange-50 rounded-full flex items-center justify-center mx-auto mb-6 text-orange-500 group-hover:bg-orange-500 group-hover:text-white transition-colors duration-300">
              <Info size={28} className="group-hover:scale-110 transition-transform" />
            </div>
            <h3 className="text-xl font-bold mb-3 text-gray-900">{t.intro.card2_title}</h3>
            <p className="text-gray-600 text-sm leading-relaxed">{t.intro.card2_desc}</p>
          </div>
          <div className="p-8 bg-white shadow-lg border-t-4 border-gray-800 hover:shadow-2xl transition-all duration-500 group hover:-translate-y-2">
            <div className="w-14 h-14 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-6 text-gray-700 group-hover:bg-gray-800 group-hover:text-white transition-colors duration-300">
              <Dog size={28} className="group-hover:scale-110 transition-transform" />
            </div>
            <h3 className="text-xl font-bold mb-3 text-gray-900">{t.intro.card3_title}</h3>
            <p className="text-gray-600 text-sm leading-relaxed">{t.intro.card3_desc}</p>
          </div>
        </div>
      </section>

      {/* Floor Plans Section */}
      <section id="residences" className="py-20" style={{ backgroundColor: colors.bgAlt }}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-4xl font-serif text-gray-900 mb-4">{t.residences.title}</h2>
            <p className="text-gray-600 max-w-2xl mx-auto">
              {t.residences.subtitle}
            </p>
          </div>

          {/* Tabs */}
          <div className="flex justify-center mb-10 space-x-2">
            {['1bed', '2bed', '3bed'].map((type) => (
              <button
                key={type}
                onClick={() => setActiveTab(type)}
                className={`px-8 py-3 text-xs font-bold uppercase tracking-widest transition-all duration-300 transform ${
                  activeTab === type 
                    ? `bg-gray-900 text-white shadow-lg scale-105` 
                    : 'bg-white text-gray-500 hover:bg-gray-200 shadow-sm hover:scale-105'
                }`}
              >
                {type === '1bed' ? '1 Bedroom' : type === '2bed' ? '2 Bedroom' : '3 Bedroom'}
              </button>
            ))}
          </div>

          {/* Grid */}
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {floorPlans[activeTab].map((plan, idx) => (
              <div key={plan.id} className="group bg-white overflow-hidden border border-gray-200 shadow-lg hover:shadow-2xl transition-all duration-500 hover:-translate-y-2 relative" style={{ animationDelay: `${idx * 100}ms` }}>
                {/* Badge logic for WFH */}
                {plan.id.includes('2D') && (
                     <div className="absolute top-0 right-0 bg-gray-800 text-white text-[10px] font-bold px-3 py-1 uppercase shadow-md z-10 animate-pulse-slow">
                       WFH Verified
                     </div>
                  )}

                <div className="p-8 flex flex-col h-full">
                  <div className="flex justify-between items-baseline mb-4 border-b border-gray-100 pb-4">
                    <h3 className="text-3xl font-serif text-gray-900 group-hover:text-orange-600 transition-colors">{plan.name}</h3>
                  </div>
                   <div className="flex justify-between items-center mb-6">
                     <p className="text-gray-500 text-sm font-bold uppercase tracking-wide">{plan.sqft} Sq. Ft.</p>
                     <span className="text-orange-600 font-bold text-xl">{plan.price}</span>
                   </div>
                  
                  <div className="space-y-3 mb-8 flex-grow">
                    {plan.features.map((feat, idx) => (
                      <div key={idx} className="flex items-center text-sm text-gray-600">
                        <Check size={16} className="text-orange-600 mr-3" />
                        {feat}
                      </div>
                    ))}
                  </div>

                  {/* Emma's Insider Tip */}
                  <div className="bg-gray-50 p-4 mb-6 border-l-4 border-gray-800 rounded-r-lg group-hover:bg-orange-50 group-hover:border-orange-500 transition-colors duration-300">
                    <p className="text-xs italic text-gray-700">
                      <span className="font-bold not-italic block mb-1 text-gray-900 flex items-center gap-1"><Star size={12} fill="currentColor" className="text-orange-500"/> {t.residences.emma_take}</span>
                      "{plan.id.includes('2') ? 'Ideal for roommates or home offices. The layout separates living and sleeping zones perfectly.' : 'The high ceilings in these units make 800 sq ft feel like 1,200.'}"
                    </p>
                  </div>

                  <button 
                    onClick={() => setActiveModal('demo')}
                    className="w-full py-4 border-2 border-gray-900 text-gray-900 hover:bg-gray-900 hover:text-white transition-colors uppercase text-xs font-bold tracking-widest"
                  >
                    {t.residences.check_avail}
                  </button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ / FEATURES SECTION */}
      <section id="features" className="py-20 bg-gray-50">
        <div className="max-w-4xl mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-4xl font-serif text-gray-900 mb-4">{t.faq.title}</h2>
            <p className="text-gray-600">{t.faq.subtitle}</p>
          </div>

          <div className="space-y-4">
            {t.faq.items.map((item, idx) => (
              <div key={idx} className="bg-white border border-gray-200 rounded-lg shadow-sm overflow-hidden hover:shadow-md transition-shadow duration-300">
                <button 
                  onClick={() => setActiveFaq(activeFaq === idx ? null : idx)}
                  className="w-full flex justify-between items-center p-6 text-left hover:bg-gray-50 transition-colors"
                >
                  <span className="font-bold text-gray-900 text-lg group-hover:text-orange-600 transition-colors">{item.q}</span>
                  <span className="text-orange-600 transition-transform duration-300 transform" style={{ transform: activeFaq === idx ? 'rotate(180deg)' : 'rotate(0deg)' }}>
                    {activeFaq === idx ? <Minus size={20} /> : <Plus size={20} />}
                  </span>
                </button>
                <div 
                  className={`transition-all duration-500 ease-in-out overflow-hidden ${
                    activeFaq === idx ? 'max-h-40 opacity-100 p-6 pt-0 border-t border-gray-100' : 'max-h-0 opacity-0'
                  }`}
                >
                  <p className="text-gray-600 leading-relaxed">{item.a}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Bento Grid Amenities */}
      <section id="lifestyle" className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4">
          <h2 className="text-4xl font-serif mb-12 text-center text-gray-900">{t.amenities.title}</h2>
          
          <div className="grid grid-cols-1 md:grid-cols-4 md:grid-rows-2 gap-4 h-auto md:h-[600px]">
            {/* Pool */}
            <div className="md:col-span-2 md:row-span-2 bg-blue-500 relative group overflow-hidden shadow-sm flex items-center justify-center hover-lift">
               <Waves size={120} className="text-white opacity-20 absolute animate-float" />
               <div className="absolute inset-0 bg-gradient-to-t from-blue-900/50 to-transparent"></div>
               <div className="absolute bottom-6 left-6 text-white z-10">
                 <div className="bg-white/20 backdrop-blur-sm p-3 inline-block rounded-full mb-2 group-hover:scale-110 transition-transform"><Waves size={24} className="text-white"/></div>
                 <h3 className="text-3xl font-bold mb-1">{t.amenities.pool}</h3>
                 <p className="text-blue-50 text-sm font-medium">{t.amenities.pool_desc}</p>
               </div>
            </div>

            {/* Gym */}
            <div className="md:col-span-1 bg-gray-900 relative group overflow-hidden p-6 flex flex-col justify-end text-white shadow-sm hover-lift">
               <Dumbbell size={80} className="text-gray-700 absolute top-4 right-4 opacity-20 group-hover:rotate-12 transition-transform duration-500" />
               <div className="relative z-10">
                 <Maximize className="text-orange-500 mb-2 group-hover:scale-110 transition-transform origin-left" />
                 <h3 className="font-bold text-lg">{t.amenities.gym}</h3>
                 <p className="text-xs text-gray-400 mt-1">{t.amenities.gym_desc}</p>
               </div>
            </div>

            {/* Tech - WFH */}
            <div className="md:col-span-1 bg-gray-800 p-6 flex flex-col justify-center items-start text-white shadow-sm relative overflow-hidden hover-lift">
                <Wifi size={80} className="text-gray-600 absolute top-[-10px] right-[-10px] opacity-20 group-hover:scale-125 transition-transform duration-700" />
                <Wifi size={32} className="text-white/80 mb-4 relative z-10 group-hover:text-orange-400 transition-colors" />
                <h3 className="font-bold text-xl mb-2 relative z-10">{t.amenities.tech}</h3>
                <p className="text-sm text-gray-400 relative z-10">{t.amenities.tech_desc}</p>
            </div>

            {/* Pets */}
            <div className="md:col-span-1 bg-orange-600 text-white p-6 flex flex-col justify-between shadow-sm relative overflow-hidden hover-lift">
               <Dog size={80} className="text-orange-800 absolute bottom-[-10px] right-[-10px] opacity-20 group-hover:rotate-6 transition-transform" />
               <div className="relative z-10">
                 <Dog size={32} className="mb-4 text-white/90 group-hover:scale-110 transition-transform origin-left" />
                 <h3 className="font-bold text-xl leading-tight">{t.amenities.pets}</h3>
               </div>
               <p className="text-sm font-medium text-orange-100 relative z-10">{t.amenities.pets_desc}</p>
            </div>

            {/* Parking & Bike */}
            <div className="md:col-span-1 bg-gray-100 relative group overflow-hidden p-6 flex flex-col justify-end border border-gray-200 hover:shadow-lg transition-all duration-300">
               <Bike size={80} className="text-gray-300 absolute top-4 right-4 opacity-30 group-hover:-translate-x-4 transition-transform duration-500" />
               <div className="relative z-10">
                 <Bike className="text-gray-900 mb-2" />
                 <h3 className="font-bold text-gray-900">{t.amenities.bike}</h3>
                 <p className="text-xs text-gray-500 mt-1">{t.amenities.bike_desc}</p>
               </div>
            </div>
            
             {/* Entertainment Lounge */}
            <div className="md:col-span-1 bg-gray-100 relative group overflow-hidden p-6 flex flex-col justify-end border border-gray-200 hover:shadow-lg transition-all duration-300">
               <Gamepad2 size={80} className="text-gray-300 absolute top-4 right-4 opacity-30 group-hover:rotate-12 transition-transform duration-500" />
               <div className="relative z-10">
                 <Gamepad2 className="text-gray-900 mb-2" />
                 <h3 className="font-bold text-gray-900">{t.amenities.lounge}</h3>
                 <p className="text-xs text-gray-500 mt-1">{t.amenities.lounge_desc}</p>
               </div>
            </div>

             {/* EV Charging */}
            <div className="md:col-span-1 bg-gray-800 relative group overflow-hidden p-6 flex flex-col justify-end text-white shadow-sm hover-lift">
               <Zap size={80} className="text-gray-600 absolute top-4 right-4 opacity-20 group-hover:text-yellow-400 transition-colors duration-500" />
               <div className="relative z-10">
                 <Zap className="text-orange-500 mb-2 group-hover:scale-110 transition-transform origin-left" />
                 <h3 className="font-bold text-lg">{t.amenities.ev}</h3>
                 <p className="text-xs text-gray-400 mt-1">{t.amenities.ev_desc}</p>
               </div>
            </div>

          </div>
        </div>
      </section>

      {/* Neighborhood & Commute */}
      <section id="neighborhood" className="py-20" style={{ backgroundColor: colors.bgAlt }}>
        <div className="max-w-6xl mx-auto px-4">
          <div className="grid md:grid-cols-2 gap-16 items-center">
            
            {/* Map Narrative */}
            <div>
               <div className="flex items-center gap-2 mb-4">
                 <MapPin className="text-orange-500 animate-bounce" />
                 <span className="uppercase tracking-widest text-sm font-bold text-gray-500">{t.neighborhood.loc_intel}</span>
               </div>
               <h2 className="text-4xl font-serif text-gray-900 mb-6">{t.neighborhood.title}</h2>
               
               <div className="mb-8 bg-white p-6 shadow-md border-l-4 border-gray-900 hover:border-orange-600 transition-colors duration-500">
                 <h4 className="font-bold text-gray-900 mb-2 flex items-center gap-2">
                   <Star size={16} className="text-orange-500" fill="#f97316" /> 
                   {t.neighborhood.insider_note}
                 </h4>
                 <p className="text-sm text-gray-600 leading-relaxed">
                   {t.neighborhood.note_body}
                 </p>
               </div>

               <h3 className="font-bold text-gray-900 mb-4">{t.neighborhood.walk_score}</h3>
               <ul className="space-y-4 mb-8">
                 <li className="flex items-center justify-between border-b border-gray-200 pb-2 group">
                   <span className="flex items-center gap-2 text-gray-700 font-medium group-hover:translate-x-2 transition-transform"><Coffee size={16} className="text-orange-500" /> Arista Deli & Coffee</span>
                   <span className="text-sm font-bold text-gray-900">3 Min Walk</span>
                 </li>
                 <li className="flex items-center justify-between border-b border-gray-200 pb-2 group">
                   <span className="flex items-center gap-2 text-gray-700 font-medium group-hover:translate-x-2 transition-transform"><span className="text-lg">🍺</span> The Burns Pub</span>
                   <span className="text-sm font-bold text-gray-900">5 Min Walk</span>
                 </li>
                 <li className="flex items-center justify-between border-b border-gray-200 pb-2 group">
                   <span className="flex items-center gap-2 text-gray-700 font-medium group-hover:translate-x-2 transition-transform"><span className="text-lg">🚌</span> US 36 Station (FF1 Bus)</span>
                   <span className="text-sm font-bold text-gray-900">8 Min Walk</span>
                 </li>
               </ul>
            </div>

            {/* Commute Card */}
            <div className="bg-white p-8 shadow-2xl border-t-8 border-gray-900 hover:border-orange-600 transition-colors duration-500 transform hover:-translate-y-2">
               <h3 className="text-2xl font-serif text-gray-900 mb-6">{t.neighborhood.commute}</h3>
               <div className="space-y-6">
                 
                 <div>
                   <div className="flex justify-between mb-1">
                     <span className="font-bold text-gray-700">Oracle / Interlocken</span>
                     <span className="text-gray-900 font-bold">5 Mins</span>
                   </div>
                   <div className="w-full bg-gray-100 h-2 rounded-full overflow-hidden">
                     <div 
                        className="bg-gray-700 h-2 rounded-full transition-all duration-1000 ease-out" 
                        style={{ width: animateBars ? '10%' : '0%' }}
                     ></div>
                   </div>
                   <p className="text-xs text-gray-400 mt-1">Driving via Broomfield Ln</p>
                 </div>

                 <div>
                   <div className="flex justify-between mb-1">
                     <span className="font-bold text-gray-700">Union Station (Denver)</span>
                     <span className="text-orange-500 font-bold">25 Mins</span>
                   </div>
                   <div className="w-full bg-gray-100 h-2 rounded-full overflow-hidden">
                     <div 
                        className="bg-orange-500 h-2 rounded-full transition-all duration-1000 ease-out delay-100" 
                        style={{ width: animateBars ? '45%' : '0%' }}
                     ></div>
                   </div>
                   <p className="text-xs text-gray-400 mt-1">Via FF1 Flatiron Flyer (Wifi on board)</p>
                 </div>

                 <div>
                   <div className="flex justify-between mb-1">
                     <span className="font-bold text-gray-700">Pearl St (Boulder)</span>
                     <span className="text-gray-800 font-bold">18 Mins</span>
                   </div>
                   <div className="w-full bg-gray-100 h-2 rounded-full overflow-hidden">
                     <div 
                        className="bg-gray-800 h-2 rounded-full transition-all duration-1000 ease-out delay-200" 
                        style={{ width: animateBars ? '35%' : '0%' }}
                     ></div>
                   </div>
                   <p className="text-xs text-gray-400 mt-1">Driving via US-36 Express</p>
                 </div>

               </div>

               <button 
                onClick={() => setActiveModal('lead')}
                className="mt-8 w-full py-4 bg-orange-500 text-white font-bold text-sm uppercase tracking-wider hover:bg-orange-600 transition-colors flex justify-center items-center gap-2 shadow-lg hover:shadow-xl transform hover:scale-[1.02] duration-200"
              >
                <Download size={16} /> Get 2025 Relocation Guide
              </button>
            </div>

          </div>
        </div>
      </section>

      {/* Compare Section */}
      <section id="compare" className="py-20 bg-white">
        <div className="max-w-4xl mx-auto px-4">
          <div className="text-center mb-12">
            <h2 className="text-3xl font-serif text-gray-900">{t.compare.title}</h2>
            <p className="text-gray-500 mt-2">{t.compare.subtitle}</p>
          </div>

          <div className="overflow-hidden border border-gray-200 shadow-md hover:shadow-xl transition-shadow duration-300">
            <table className="w-full text-left border-collapse">
              <thead>
                <tr>
                  <th className="p-4 bg-gray-50 border-b border-gray-200 text-gray-500 text-sm uppercase tracking-wider">{t.compare.col_1}</th>
                  <th className="p-4 bg-gray-900 text-white border-b border-gray-900 w-1/3 text-lg font-serif">{t.compare.col_2}</th>
                  <th className="p-4 bg-gray-100 text-gray-500 border-b border-gray-200 w-1/3 text-sm font-medium">{t.compare.col_3}</th>
                </tr>
              </thead>
              <tbody>
                {t.compare.rows.map((row, idx) => (
                  <tr key={idx} className="hover:bg-gray-50 transition-colors">
                    <td className="p-4 border-b border-gray-100 font-bold text-gray-700">{row.feat}</td>
                    <td className="p-4 border-b border-gray-100 text-gray-900 font-bold bg-gray-50">{row.val1}</td>
                    <td className="p-4 border-b border-gray-100 text-gray-500">{row.val2}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>

      {/* About Emma */}
      <section id="about" className="py-20 bg-gray-900 text-white">
        <div className="max-w-5xl mx-auto px-4 flex flex-col md:flex-row items-center gap-12">
          <div className="md:w-1/3">
             <div className="aspect-[3/4] bg-gray-800 relative overflow-hidden border-4 border-orange-500 shadow-2xl transform hover:scale-105 transition-transform duration-500">
               {/* Updated Headshot */}
               <img src="https://ik.imagekit.io/caballero/Emma/Headshots/EmmaCaballero.jpg" alt="Emma Caballero" className="w-full h-full object-cover" />
             </div>
          </div>
          <div className="md:w-2/3">
            <h2 className="text-4xl font-serif mb-6 text-white">{t.about.title}</h2>
            <div className="flex gap-4 mb-6">
               <span className="bg-gray-800 px-3 py-1 text-xs font-bold uppercase tracking-widest text-orange-400 border border-gray-700 hover:border-orange-400 transition-colors">English / Español</span>
            </div>
            <h3 className="text-xl text-orange-400 mb-6 font-light">{t.about.subtitle}</h3>
            <p className="text-gray-300 mb-6 leading-relaxed">
              {t.about.p1}
            </p>
            <p className="text-gray-300 mb-8 leading-relaxed">
              {t.about.p2}
            </p>
            <div className="flex gap-4">
              <button 
                onClick={() => setActiveModal('demo')}
                style={{ backgroundColor: colors.accent }} 
                className="px-8 py-3 font-bold text-white hover:bg-orange-600 transition-colors shadow-lg uppercase tracking-wider transform hover:-translate-y-1"
              >
                {t.about.cta}
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-white border-t border-gray-200 text-gray-600 py-12 text-sm">
        <div className="max-w-7xl mx-auto px-4 grid grid-cols-1 md:grid-cols-4 gap-8">
          <div>
            <h4 className="text-gray-900 font-serif text-lg mb-4 font-bold">Emma Caballero</h4>
            <p>{t.footer.role}<br/>8000 Uptown Apartments</p>
            <div className="mt-4 flex flex-col gap-2 text-gray-700">
               <a href="mailto:Emma@rent8000.com" className="hover:text-orange-600 font-bold flex items-center gap-2 transition-colors"><Mail size={14} /> Emma@rent8000.com</a>
               <a href="tel:7206185374" className="hover:text-orange-600 font-bold flex items-center gap-2 transition-colors"><Phone size={14} /> 720-618-5374</a>
            </div>
          </div>
          <div>
            <h4 className="text-gray-900 font-bold mb-4">Property Info</h4>
            <p>8000 Uptown Ave<br/>Broomfield, CO 80021</p>
            <p className="mt-2 text-xs">Managed by Inland Residential</p>
          </div>
          <div>
            <h4 className="text-gray-900 font-bold mb-4">Quick Links</h4>
            <ul className="space-y-2">
              <li><a href="#residences" className="hover:text-orange-600 transition-colors">Floor Plans</a></li>
              <li><a href="#neighborhood" className="hover:text-orange-600 transition-colors">Commute Info</a></li>
              <li><a href="#" className="hover:text-orange-600 transition-colors">Apply Now</a></li>
            </ul>
          </div>
          <div>
             <h4 className="text-gray-900 font-bold mb-4">{t.footer.legal}</h4>
             <div className="flex flex-col gap-2">
                <button onClick={() => setActiveModal('terms')} className="text-left hover:text-orange-600 flex items-center gap-2 transition-colors">
                  <Shield size={14}/> Terms of Use
                </button>
                <button onClick={() => setActiveModal('privacy')} className="text-left hover:text-orange-600 flex items-center gap-2 transition-colors">
                  <FileText size={14}/> Privacy Policy
                </button>
             </div>
             <p className="text-xs text-gray-400 mt-4">
               {t.footer.rights} Pricing subject to change without notice. Equal Housing Opportunity.
             </p>
          </div>
        </div>
      </footer>

      {/* Unified Modal System */}
      {activeModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-900/80 backdrop-blur-sm p-4 animate-fade-in-up duration-200">
          <div className="bg-white w-full max-w-lg p-8 relative shadow-2xl animate-fade-in-up duration-300 max-h-[90vh] overflow-y-auto rounded-lg">
            <button 
              onClick={() => { setActiveModal(null); setFormStatus('idle'); resetQuiz(); }} 
              className="absolute top-4 right-4 text-gray-400 hover:text-gray-900 bg-gray-100 rounded-full p-1 hover:bg-gray-200 transition-colors"
            >
              <X size={24} />
            </button>
            
            {/* LEAD MAGNET MODAL */}
            {activeModal === 'lead' && (
              <>
                 {!formStatus || formStatus === 'idle' || formStatus === 'submitting' || formStatus === 'error' ? (
                  <>
                    <h3 className="text-2xl font-serif text-gray-900 mb-2">The 2025 Relocation Guide</h3>
                    <p className="text-gray-500 text-sm mb-6">
                      Get the PDF guide including "The Commuter’s Secret" FF1 schedule and the Arista Trail Map.
                    </p>
                    <form onSubmit={handleLeadSubmit} className="space-y-4">
                      <div>
                        <label className="block text-xs font-bold text-gray-500 uppercase mb-1">Name</label>
                        <input name="name" type="text" required className="w-full p-3 border border-gray-200 focus:border-orange-500 focus:ring-2 focus:ring-orange-100 outline-none transition-all rounded-sm" placeholder="New Resident" />
                      </div>
                      <div>
                        <label className="block text-xs font-bold text-gray-500 uppercase mb-1">Email</label>
                        <input name="email" type="email" required className="w-full p-3 border border-gray-200 focus:border-orange-500 focus:ring-2 focus:ring-orange-100 outline-none transition-all rounded-sm" placeholder="jane@example.com" />
                      </div>
                      <button 
                        type="submit" 
                        disabled={formStatus === 'submitting'}
                        className="w-full py-4 bg-orange-500 text-white font-bold uppercase tracking-widest hover:bg-orange-600 shadow-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all transform active:scale-95 rounded-sm"
                      >
                        {formStatus === 'submitting' ? 'Sending...' : 'Send Me The Guide'}
                      </button>
                      {formStatus === 'error' && <p className="text-red-500 text-sm text-center">Something went wrong. Please try again.</p>}
                    </form>
                  </>
                ) : (
                  <div className="text-center py-8 animate-fade-in-up">
                    <div className="w-16 h-16 bg-green-100 text-green-600 rounded-full flex items-center justify-center mx-auto mb-4">
                      <Check size={32} />
                    </div>
                    <h3 className="text-xl font-bold text-gray-900 mb-2">You're on the list!</h3>
                    <p className="text-gray-600">Check your inbox. I've sent the guide your way.</p>
                  </div>
                )}
              </>
            )}

            {/* DEMO REQUEST MODAL */}
            {activeModal === 'demo' && (
              <>
                 {!formStatus || formStatus === 'idle' || formStatus === 'submitting' || formStatus === 'error' ? (
                  <>
                    <h3 className="text-2xl font-serif text-gray-900 mb-2">Book Your VIP Demo</h3>
                    <p className="text-gray-500 text-sm mb-6">
                      Schedule a private tour with Emma. I'll show you the specific units that match your needs.
                    </p>
                    <form onSubmit={handleLeadSubmit} className="space-y-4">
                      <div>
                        <label className="block text-xs font-bold text-gray-500 uppercase mb-1">Name</label>
                        <input name="name" type="text" required className="w-full p-3 border border-gray-200 focus:border-orange-500 focus:ring-2 focus:ring-orange-100 outline-none transition-all rounded-sm" placeholder="New Resident" />
                      </div>
                      <div className="grid grid-cols-2 gap-4">
                        <div>
                          <label className="block text-xs font-bold text-gray-500 uppercase mb-1">Phone</label>
                          <input name="phone" type="tel" required className="w-full p-3 border border-gray-200 focus:border-orange-500 focus:ring-2 focus:ring-orange-100 outline-none transition-all rounded-sm" placeholder="(303)-444-4444" />
                        </div>
                        <div>
                          <label className="block text-xs font-bold text-gray-500 uppercase mb-1">Date Preference</label>
                          <input name="date" type="date" className="w-full p-3 border border-gray-200 focus:border-orange-500 focus:ring-2 focus:ring-orange-100 outline-none transition-all rounded-sm" />
                        </div>
                      </div>
                      <div>
                        <label className="block text-xs font-bold text-gray-500 uppercase mb-1">Notes (Optional)</label>
                         <textarea name="message" className="w-full p-3 border border-gray-200 focus:border-orange-500 focus:ring-2 focus:ring-orange-100 outline-none transition-all rounded-sm" rows="3" placeholder="I have a dog and need a 2 bedroom..."></textarea>
                      </div>
                      <button 
                        type="submit" 
                        disabled={formStatus === 'submitting'}
                        className="w-full py-4 bg-gray-900 text-white font-bold uppercase tracking-widest hover:bg-black shadow-lg disabled:opacity-50 disabled:cursor-not-allowed transition-all transform active:scale-95 rounded-sm"
                      >
                        {formStatus === 'submitting' ? 'Booking...' : 'Request Tour'}
                      </button>
                    </form>
                  </>
                ) : (
                  <div className="text-center py-8 animate-fade-in-up">
                    <div className="w-16 h-16 bg-green-100 text-green-600 rounded-full flex items-center justify-center mx-auto mb-4">
                      <Check size={32} />
                    </div>
                    <h3 className="text-xl font-bold text-gray-900 mb-2">Request Received!</h3>
                    <p className="text-gray-600">I will reach out shortly to confirm your time.</p>
                  </div>
                )}
              </>
            )}

            {/* QUIZ MODAL */}
            {activeModal === 'quiz' && (
              <div className="text-center">
                 {!quizFinished ? (
                   <div className="animate-fade-in-up">
                     <div className="mb-6 flex justify-between items-center text-xs font-bold text-gray-400 uppercase tracking-widest">
                       <span>Question {quizStep + 1} of {quizQuestions.length}</span>
                       <span>Match Calculator</span>
                     </div>
                     <h3 className="text-xl font-serif text-gray-900 mb-8 h-16 flex items-center justify-center">
                       {quizQuestions[quizStep].q}
                     </h3>
                     <div className="space-y-3">
                       {quizQuestions[quizStep].options.map((option, idx) => (
                         <button
                           key={idx}
                           onClick={() => handleQuizAnswer(option.points)}
                           className="w-full p-4 border border-gray-200 hover:border-orange-500 hover:bg-orange-50 transition-all rounded-lg text-left group hover:scale-[1.02]"
                         >
                           <span className="font-bold text-gray-700 group-hover:text-orange-700 block mb-1">{option.text}</span>
                           <span className="text-xs text-gray-500">{option.note}</span>
                         </button>
                       ))}
                     </div>
                   </div>
                 ) : (
                   <div className="py-8 animate-fade-in-up">
                     <div className="w-20 h-20 bg-orange-100 text-orange-600 rounded-full flex items-center justify-center mx-auto mb-6 animate-pulse-slow">
                       <Calculator size={36} />
                     </div>
                     <h3 className="text-2xl font-serif text-gray-900 mb-2">Match Result</h3>
                     <p className="text-gray-600 mb-6">
                       Based on your lifestyle, 8000 Uptown is a 
                       <span className="text-3xl font-bold text-orange-600 mx-2">
                         {Math.min(100, Math.round((quizScore / 18) * 100))}%
                       </span>
                       match.
                     </p>
                     
                     <div className="bg-gray-50 p-4 rounded-lg mb-8 text-left text-sm text-gray-600 border border-gray-200">
                       <p className="mb-2 font-bold text-gray-900">Why?</p>
                       <ul className="space-y-2 list-disc pl-4">
                         {quizScore > 12 
                           ? <li>You value high-quality infrastructure (Commute/Internet).</li>
                           : <li>You are looking for value in a stable community.</li>
                         }
                         <li>Arista fits your location needs perfectly.</li>
                       </ul>
                     </div>

                     <button 
                        onClick={() => { setQuizFinished(false); setActiveModal('demo'); }}
                        className="w-full py-4 bg-orange-600 text-white font-bold uppercase tracking-widest hover:bg-orange-700 shadow-lg transform hover:-translate-y-1 transition-all"
                      >
                        Schedule Your Tour Now
                      </button>
                      <button 
                        onClick={() => { resetQuiz(); setActiveModal(null); }}
                        className="mt-4 text-gray-400 text-xs hover:text-gray-600 underline"
                      >
                        Close Results
                      </button>
                   </div>
                 )}
              </div>
            )}

            {activeModal === 'terms' && <TermsOfUse />}
            {activeModal === 'privacy' && <PrivacyPolicy />}

          </div>
        </div>
      )}

    </div>
  );
};

export default App;