0x1998 - MANAGER

Düzenlenen Dosya: App.jsx

import { useState, useEffect } from 'react'
import { Routes, Route, Link } from 'react-router-dom'
import './index.css'
import { ForgotPasswordModal } from './ForgotPassword'
import { auth } from './firebase'
import { signInWithEmailAndPassword, createUserWithEmailAndPassword, onAuthStateChanged, updateProfile } from 'firebase/auth'
import { db } from './firebase'
import { collection, addDoc } from 'firebase/firestore'

// ===== MODAL COMPONENTS =====
function Modal({ isOpen, onClose, title, children }) {
  if (!isOpen) return null;
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <div className="modal__header">
          <h3 className="modal__title">{title}</h3>
          <button className="modal__close" onClick={onClose}>×</button>
        </div>
        <div className="modal__content">{children}</div>
      </div>
    </div>
  );
}

function NotificationsModal({ isOpen, onClose, notifications }) {
  return (
    <Modal isOpen={isOpen} onClose={onClose} title="Notifications">
      <div className="notifications-list">
        {notifications.length === 0 ? <p>No notifications</p> : notifications.map((n, i) => (
          <div key={i} className="notification-item">
            <span className="notification-item__icon">{n.icon}</span>
            <div className="notification-item__content">
              <span className="notification-item__text">{n.text}</span>
              <span className="notification-item__time">{n.time}</span>
            </div>
          </div>
        ))}
      </div>
    </Modal>
  );
}

// ===== COMPONENTS =====
function Header({ onLoginClick, user, onLogout }) {
  const [scrolled, setScrolled] = useState(false)
  const navLinks = [
    { label: 'Home', href: '#home' },
    { label: 'Features', href: '#features' },
    { label: 'Services', href: '#services' },
    { label: 'Contact', href: '#contact' },
  ]

return (
    <header className={`header${scrolled ? ' header--scrolled' : ''}`}>
      <div className="container header__inner">
        <a href="#home" className="header__logo">
          <span className="header__logo-icon">🏢</span>
          <span className="header__logo-text">BEPARAGON <span className="header__logo-llc">LLC</span></span>
        </a>
        <nav className="header__nav">
          <ul className="header__nav-list">
            {navLinks.map((link) => (
              <li key={link.href}><a href={link.href} className="header__nav-link">{link.label}</a></li>
            ))}
          </ul>
        </nav>
        <div className="header__actions">
          {user ? (
            <div className="header__user-menu">
              <div className="header__user-avatar">{user.name?.charAt(0)?.toUpperCase() || 'U'}</div>
              <span className="header__user-name">{user.name}</span>
              {/* <button className="btn btn-outline-white header__logout-btn" onClick={onLogout}>Sign Out</button> */}
            </div>
          ) : (
            <>
              <button className="header__login-btn" onClick={onLoginClick}>Log In</button>
              {/* <Link to="/login" className="btn btn-accent">Get Started Free</Link> */}
            </>
          )}
        </div>
      </div>
    </header>
  )
}

function Hero({ onSignUpClick }) {
  return (
    <section id="home" className="hero">
      <div className="container hero__inner">
        <div className="hero__content">
          <div className="hero__badge"><span className="hero__badge-dot"></span>Trusted by 10,000+ Real Estate Professionals</div>
          <h1 className="hero__title">Streamline Your <span className="hero__title-accent">Real Estate</span> Business Like Never Before</h1>
          <p className="hero__subtitle">BEPARAGON CRM is the all-in-one platform built for real estate professionals. Manage leads, track properties, automate follow-ups, and close deals faster.</p>
          <div className="hero__actions">
            <button className="btn btn-accent btn-lg" onClick={onSignUpClick}>🚀 Start Free Trial</button>
            <a href="#features" className="btn btn-outline-white btn-lg">▶ Explore Features</a>
          </div>
        </div>
      </div>
    </section>
  )
}

function Features() {
  const features = [
    { icon: '🎯', title: 'Lead Management', desc: 'Capture leads from multiple sources and track every interaction.', tag: 'Core' },
    { icon: '🏠', title: 'Property Listings', desc: 'Manage all your property listings in one place.', tag: 'Core' },
    { icon: '📊', title: 'Deal Pipeline', desc: 'Visualize every deal stage in a customizable pipeline.', tag: 'Popular' },
    { icon: '🔔', title: 'Automated Follow-ups', desc: 'Set up smart drip campaigns that nurture leads.', tag: 'Automation' },
    { icon: '📈', title: 'Analytics Dashboard', desc: 'Real-time insights into your business performance.', tag: 'Insights' },
    { icon: '👥', title: 'Team Collaboration', desc: 'Keep your entire team aligned and productive.', tag: 'Teamwork' },
  ]
  return (
    <section id="features" className="section bg-alt">
      <div className="container">
        <div className="section-header">
          <span className="section-label">Platform Features</span>
          <h2 className="section-title">Everything You Need to Win More Deals</h2>
        </div>
        <div className="features__grid">
          {features.map((f, i) => (
            <div className="feature-card" key={i}>
              <div className="feature-card__top">
                <div className="feature-card__icon">{f.icon}</div>
                <span className="feature-card__tag">{f.tag}</span>
              </div>
              <h3 className="feature-card__title">{f.title}</h3>
              <p className="feature-card__desc">{f.desc}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}

function Services() {
  const services = [
    { icon: '🤝', title: 'CRM & Contact Management', desc: 'Build a 360° view of every client and prospect.' },
    { icon: '📣', title: 'Marketing Automation', desc: 'Reach the right clients with behavior-driven marketing.' },
    { icon: '📋', title: 'Transaction Management', desc: 'Manage every detail of a real estate transaction.' },
    { icon: '📊', title: 'Reporting & Analytics', desc: 'Real-time view of your business performance.' },
  ]
  return (
    <section id="services" className="section bg-white">
      <div className="container">
        <div className="section-header">
          <span className="section-label">Our Services</span>
          <h2 className="section-title">A Complete Solution for Your Business</h2>
        </div>
        <div className="services__list">
          {services.map((s, i) => (
            <div className="service-item" key={i}>
              <div className="service-item__icon-wrap"><span className="service-item__icon">{s.icon}</span></div>
              <div className="service-item__content">
                <h3 className="service-item__title">{s.title}</h3>
                <p className="service-item__desc">{s.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}

function Statistics() {
  const stats = [
    { value: '10,000+', label: 'Active Users', icon: '👤' },
    { value: '500K+', label: 'Properties Managed', icon: '🏠' },
    { value: '$12B+', label: 'Total Deal Value', icon: '💰' },
    { value: '98%', label: 'Client Satisfaction', icon: '⭐' },
  ]
  return (
    <section className="statistics">
      <div className="container">
        <div className="statistics__header">
          <span className="section-label">By the Numbers</span>
          <h2 className="statistics__title">Powering Real Estate Businesses</h2>
        </div>
        <div className="statistics__grid">
          {stats.map((s, i) => (
            <div className="stat-card" key={i}>
              <div className="stat-card__icon">{s.icon}</div>
              <div className="stat-card__value">{s.value}</div>
              <div className="stat-card__label">{s.label}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}

function CTA() {
  const [form, setForm] = useState({ name: '', email: '', phone: '', subject: 'general', message: '' })
  const [submitted, setSubmitted] = useState(false)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState('')

const handleSubmit = async (e) => {
    e.preventDefault()
    setLoading(true)
    setError('')
    
    // Simulate form submission
    await new Promise(resolve => setTimeout(resolve, 1500))
    
    setLoading(false)
    setSubmitted(true)
  }

const subjects = [
    { value: 'general', label: 'General Inquiry' },
    { value: 'support', label: 'Technical Support' },
    { value: 'sales', label: 'Sales Question' },
    { value: 'partnership', label: 'Partnership' },
    { value: 'feedback', label: 'Feedback' }
  ]

return (
    <section id="contact" className="cta-section">
      <div className="container cta-section__inner">
        <div className="cta-section__pitch">
          <span className="section-label">Get In Touch</span>
          <h2 className="cta-section__title">We'd Love to Hear From You!</h2>
          <p className="cta-section__desc">Have questions about our CRM? Our team is here to help you succeed.</p>
          
          <div className="cta-section__contact-info">
            <div className="cta-section__contact-card">
              <div className="cta-section__contact-icon-wrap">
                <span className="cta-section__contact-icon">📧</span>
              </div>
              <div className="cta-section__contact-details">
                <h4>Email Us</h4>
                <a href="mailto:support@beparagon.to">support@beparagon.to</a>
              </div>
            </div>
            <div className="cta-section__contact-card">
              <div className="cta-section__contact-icon-wrap">
                <span className="cta-section__contact-icon">📞</span>
              </div>
              <div className="cta-section__contact-details">
                <h4>Call Us</h4>
                <a href="tel:+14054627472">(405) 462-7472</a>
              </div>
            </div>
            <div className="cta-section__contact-card">
              <div className="cta-section__contact-icon-wrap">
                <span className="cta-section__contact-icon">📍</span>
              </div>
              <div className="cta-section__contact-details">
                <h4>Visit Us</h4>
                <p>123 Business Park, Oklahoma City, OK 73102</p>
              </div>
            </div>
          </div>
          
          <div className="cta-section__social">
            <h4>Follow Us</h4>
            <div className="cta-section__social-links">
              <a href="https://facebook.com" target="_blank" rel="noopener noreferrer" className="cta-section__social-link" aria-label="Facebook">
                <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>
              </a>
              <a href="https://twitter.com" target="_blank" rel="noopener noreferrer" className="cta-section__social-link" aria-label="Twitter">
                <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"/></svg>
              </a>
              <a href="https://linkedin.com" target="_blank" rel="noopener noreferrer" className="cta-section__social-link" aria-label="LinkedIn">
                <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>
              </a>
              <a href="https://instagram.com" target="_blank" rel="noopener noreferrer" className="cta-section__social-link" aria-label="Instagram">
                <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z" fill="none" stroke="currentColor" strokeWidth="2"/><line x1="17.5" y1="6.5" x2="17.51" y2="6.5" stroke="currentColor" strokeWidth="2"/></svg>
              </a>
            </div>
          </div>
        </div>
        <div className="cta-section__form-wrap">
          {submitted ? (
            <div className="cta-section__success">
              <div className="cta-section__success-icon">✓</div>
              <h3>Message Sent!</h3>
              <p>Thank you for reaching out. Our team will get back to you within 24 hours.</p>
              <button className="btn btn-outline" onClick={() => { setSubmitted(false); setForm({ name: '', email: '', phone: '', subject: 'general', message: '' }) }}>Send Another Message</button>
            </div>
          ) : (
            <form className="cta-form" onSubmit={handleSubmit}>
              <h3 className="cta-form__title">Send Us a Message</h3>
              <p className="cta-form__subtitle">Fill out the form below and we'll respond ASAP</p>
              
              {error && <div className="cta-form__error">{error}</div>}
              
              <div className="cta-form__row">
                <div className="cta-form__field">
                  <label className="cta-form__label">Full Name *</label>
                  <input 
                    className="cta-form__input" 
                    placeholder="John Doe" 
                    value={form.name} 
                    onChange={e => setForm({...form, name: e.target.value})} 
                    required 
                  />
                </div>
                <div className="cta-form__field">
                  <label className="cta-form__label">Phone Number</label>
                  <input 
                    className="cta-form__input" 
                    placeholder="(555) 123-4567" 
                    type="tel"
                    value={form.phone} 
                    onChange={e => setForm({...form, phone: e.target.value})} 
                  />
                </div>
              </div>
              <div className="cta-form__field">
                <label className="cta-form__label">Email Address *</label>
                <input 
                  className="cta-form__input" 
                  placeholder="john@company.com" 
                  type="email" 
                  value={form.email} 
                  onChange={e => setForm({...form, email: e.target.value})} 
                  required 
                />
              </div>
              <div className="cta-form__field">
                <label className="cta-form__label">Subject</label>
                <select 
                  className="cta-form__input cta-form__select" 
                  value={form.subject}
                  onChange={e => setForm({...form, subject: e.target.value})}
                >
                  {subjects.map(s => (
                    <option key={s.value} value={s.value}>{s.label}</option>
                  ))}
                </select>
              </div>
              <div className="cta-form__field">
                <label className="cta-form__label">Message *</label>
                <textarea 
                  className="cta-form__input cta-form__textarea" 
                  placeholder="Tell us how we can help you..." 
                  rows={4} 
                  value={form.message} 
                  onChange={e => setForm({...form, message: e.target.value})}
                  required
                ></textarea>
              </div>
              <button type="submit" className="btn btn-accent btn-lg cta-form__submit" disabled={loading}>
                {loading ? (
                  <><span className="cta-form__spinner"></span> Sending...</>
                ) : (
                  '🚀 Send Message'
                )}
              </button>
            </form>
          )}
        </div>
      </div>
    </section>
  )
}

function Footer({ onHelpCenterClick }) {
  return (
    <footer className="footer">
      <div className="container footer__top-inner">
        <div className="footer__brand">
          <a href="#home" className="footer__logo">
            <span className="footer__logo-icon">🏢</span>
            <span className="footer__logo-text">BEPARAGON <span className="footer__logo-llc">LLC</span></span>
          </a>
          <p className="footer__brand-desc">The leading Real Estate CRM platform trusted by 10,000+ agents nationwide.</p>
        </div>
        <div className="footer__links-col">
          <h4 className="footer__col-title">Product</h4>
          <a href="#features" className="footer__link">Features</a>
          <a href="#services" className="footer__link">Pricing</a>
        </div>
        <div className="footer__links-col">
          <h4 className="footer__col-title">Company</h4>
          {/* <Link to="/about-us" className="footer__link">About</Link> */}
          <a href="#" className="footer__link">Careers</a>
        </div>
        <div className="footer__links-col">
          <h4 className="footer__col-title">Support</h4>
          <Link to="/about-us" className="footer__link">About us</Link>
          <Link to="/privacy-policy" className="footer__link">Privacy Policy</Link>
          <a href="#contact" className="footer__link">Contact us</a>
           <Link to="/terms-conditions" className="footer__link">Terms & Conditions</Link>
           <Link to="/refund-policy" className="footer__link">Refund Policy</Link>
        </div>
      </div>
      <div className="footer__bottom">
        <div className="container footer__bottom-inner">
          <p className="footer__copyright">© 2026 BEPARAGON LLC. All rights reserved.</p>
        </div>
      </div>
    </footer>
  )
}

function HelpCenterModal({ isOpen, onClose }) {
  const [searchQuery, setSearchQuery] = useState('')
  const [expandedFaq, setExpandedFaq] = useState(null)
  const faqs = [
    { q: 'How do I add a new lead?', a: 'Go to your Dashboard and click the "+ New Lead" button. Fill in the lead details and click Save.' },
    { q: 'How do I track my deals?', a: 'Navigate to the Deals section from the sidebar. You can view all deals and move them through different pipeline stages.' },
    { q: 'How do I add properties?', a: 'Click on Properties in the sidebar, then click "+ New Property" to add a new listing.' },
    { q: 'How do I create tasks?', a: 'Go to the Tasks section and click "+ New Task" to create a new task with priority levels.' },
    { q: 'How do I view analytics?', a: 'Click on Analytics in the sidebar to see performance metrics and charts.' },
    { q: 'How do I change my password?', a: 'Go to your profile settings in the dashboard to update your password.' },
  ]
  const filteredFaqs = faqs.filter(f => f.q.toLowerCase().includes(searchQuery.toLowerCase()) || f.a.toLowerCase().includes(searchQuery.toLowerCase()))
  const categories = [
    { icon: '🎯', title: 'Getting Started', desc: 'Learn the basics' },
    { icon: '👥', title: 'Leads Management', desc: 'Managing leads' },
    { icon: '🏠', title: 'Properties', desc: 'Property listings' },
    { icon: '📋', title: 'Deals & Pipeline', desc: 'Sales pipeline' },
    { icon: '📊', title: 'Analytics', desc: 'Your metrics' },
    { icon: '⚙️', title: 'Account Settings', desc: 'Profile prefs' },
  ]
  return (
    <Modal isOpen={isOpen} onClose={onClose} title="Help Center">
      <div className="help-center">
        <div className="help-center__search">
          <input className="help-center__search-input" placeholder="Search for help..." value={searchQuery} onChange={e => setSearchQuery(e.target.value)} />
        </div>
        {searchQuery === '' ? (
          <>
            <div className="help-center__categories">
              <h4>Browse by Category</h4>
              <div className="help-center__categories-grid">
                {categories.map((cat, i) => (
                  <div key={i} className="help-center__category">
                    <span className="help-center__category-icon">{cat.icon}</span>
                    <span className="help-center__category-title">{cat.title}</span>
                    <span className="help-center__category-desc">{cat.desc}</span>
                  </div>
                ))}
              </div>
            </div>
            <div className="help-center__faq">
              <h4>Frequently Asked Questions</h4>
              {faqs.map((faq, i) => (
                <div key={i} className="help-center__faq-item">
                  <button className="help-center__faq-question" onClick={() => setExpandedFaq(expandedFaq === i ? null : i)}>
                    <span>{faq.q}</span>
                    <span className="help-center__faq-icon">{expandedFaq === i ? '−' : '+'}</span>
                  </button>
                  {expandedFaq === i && <p className="help-center__faq-answer">{faq.a}</p>}
                </div>
              ))}
            </div>
          </>
        ) : (
          <div className="help-center__results">
            {filteredFaqs.length === 0 ? <p className="help-center__no-results">No results found for "{searchQuery}"</p> : filteredFaqs.map((faq, i) => (
              <div key={i} className="help-center__result-item">
                <h5>{faq.q}</h5>
                <p>{faq.a}</p>
              </div>
            ))}
          </div>
        )}
        <div className="help-center__contact">
          <p>Can't find what you're looking for? <a href="#contact" onClick={onClose}>Contact Support</a></p>
        </div>
      </div>
    </Modal>
  )
}

function LoginPage({ onLogin, onRegister, onForgotPassword, onBackToHome }) {
  const [form, setForm] = useState({ email: '', password: '' })
  const [errors, setErrors] = useState({ email: '', password: '' })
  const [loading, setLoading] = useState(false)
  const [firebaseError, setFirebaseError] = useState('')
  const [showPassword, setShowPassword] = useState(false)
  
  const validateEmail = (email) => {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
    return emailRegex.test(email)
  }
  
  const validatePassword = (password) => {
    const passwordRegex = /^(?=.*[0-9]).{8,}$/
    return passwordRegex.test(password)
  }
  
  const handleEmailChange = (e) => {
    const email = e.target.value
    setForm({...form, email})
    setFirebaseError('')
    if (email && !validateEmail(email)) {
      setErrors({...errors, email: 'Please enter a valid email address'})
    } else {
      setErrors({...errors, email: ''})
    }
  }
  
  const handlePasswordChange = (e) => {
    const password = e.target.value
    setForm({...form, password})
    setFirebaseError('')
    if (password && !validatePassword(password)) {
      setErrors({...errors, password: 'Password must be at least 8 characters with 1 number'})
    } else {
      setErrors({...errors, password: ''})
    }
  }
  
  const isValid = validateEmail(form.email) && validatePassword(form.password)
  
  const handleSubmit = async (e) => {
    e.preventDefault()
    setLoading(true)
    setFirebaseError('')
    
    try {
      const userCredential = await signInWithEmailAndPassword(auth, form.email, form.password)
      const user = userCredential.user
      onLogin({ 
        name: user.displayName || user.email.split('@')[0], 
        email: user.email,
        uid: user.uid
      })
    } catch (error) {
      console.error('Login error:', error.message)
      if (error.code === 'auth/invalid-email') {
        setFirebaseError('Invalid email address')
      } else if (error.code === 'auth/user-not-found') {
        setFirebaseError('No account found with this email')
      } else if (error.code === 'auth/wrong-password') {
        setFirebaseError('Incorrect password')
      } else if (error.code === 'auth/invalid-credential') {
        setFirebaseError('Invalid email or password')
      } else if (error.code === 'auth/too-many-requests') {
        setFirebaseError('Too many attempts. Please try again later')
      } else {
        setFirebaseError('Login failed. Please try again')
      }
    } finally {
      setLoading(false)
    }
  }
  return (
    <div className="login-page">
      <div className="login-page__left">
        <div className="login-page__brand">
          <span className="login-page__brand-icon">🏢</span>
          <span className="login-page__brand-name">BEPARAGON <span>LLC</span></span>
        </div>
        <h2 className="login-page__left-title">Welcome back to your Real Estate Command Center</h2>
        <div className="login-page__features">
          <div className="login-page__feature"><span className="login-page__feature-icon">🎯</span>Manage leads efficiently</div>
          <div className="login-page__feature"><span className="login-page__feature-icon">📊</span>Track deals in pipeline</div>
          <div className="login-page__feature"><span className="login-page__feature-icon">🏠</span>Showcase property listings</div>
        </div>
      </div>
      <div className="login-page__right">
        <button className="login-page__back-home" onClick={onBackToHome}>← Back to Home</button>
        <form className="login-form" onSubmit={handleSubmit}>
          <h1 className="login-page__form-title">Sign in</h1>
          <p className="login-page__form-subtitle">Enter your credentials to access your dashboard</p>
          <div className="login-form__field">
            <label className="login-form__label">Email Address</label>
            <input className="login-form__input" placeholder="you@company.com" type="email" value={form.email} onChange={handleEmailChange} required />
            {errors.email && <span className="login-form__error">{errors.email}</span>}
          </div>
          <div className="login-form__field">
            <label className="login-form__label">Password</label>
            <div className="login-form__password-wrapper">
              <input 
                className="login-form__input" 
                placeholder="Min 8 characters with 1 number" 
                type={showPassword ? "text" : "password"} 
                value={form.password} 
                onChange={handlePasswordChange} 
                required 
              />
              <button 
                type="button" 
                className="login-form__password-toggle"
                onClick={() => setShowPassword(!showPassword)}
              >
                {showPassword ? '👁️' : '👁️‍🗨️'}
              </button>
            </div>
            {errors.password && <span className="login-form__error">{errors.password}</span>}
          </div>
          {firebaseError && <div className="login-form__error">{firebaseError}</div>}
          <button type="submit" className="btn btn-accent login-form__submit" disabled={!isValid || loading}>
            {loading ? 'Signing in...' : '→ Sign In to Dashboard'}
          </button>
          <p className="login-form__footer">
            <span className="login-form__forgot">
              <a href="#" onClick={(e) => { e.preventDefault(); onForgotPassword() }}>Forgot Password?</a>
            </span>
            <br />
            Don't have an account? <a href="#" onClick={(e) => { e.preventDefault(); onRegister() }}>Create Account</a>
          </p>
        </form>
      </div>
    </div>
  )
}

function RegisterPage({ onRegister, onBackToLogin }) {
  const [form, setForm] = useState({ name: '', email: '', password: '', confirmPassword: '' })
  const [loading, setLoading] = useState(false)
  const [firebaseError, setFirebaseError] = useState('')
  const [showPassword, setShowPassword] = useState(false)
  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
  
  const handleSubmit = async (e) => {
    e.preventDefault()
    setFirebaseError('')
    
    if (form.password !== form.confirmPassword) {
      setFirebaseError('Passwords do not match')
      return
    }
    
    if (form.password.length < 6) {
      setFirebaseError('Password must be at least 6 characters')
      return
    }
    
    setLoading(true)
    
    try {
      const userCredential = await createUserWithEmailAndPassword(auth, form.email, form.password)
      const user = userCredential.user
      
      await updateProfile(user, { displayName: form.name })
      
      await addDoc(collection(db, 'users'), {
        uid: user.uid,
        name: form.name,
        email: form.email,
        createdAt: new Date()
      })
      
      onRegister({ 
        name: form.name, 
        email: form.email,
        uid: user.uid
      })
    } catch (error) {
      console.error('Registration error:', error.message)
      
      if (error.code === 'auth/email-already-in-use') {
        setFirebaseError('An account with this email already exists')
      } else if (error.code === 'auth/invalid-email') {
        setFirebaseError('Invalid email address')
      } else if (error.code === 'auth/weak-password') {
        setFirebaseError('Password is too weak')
      } else {
        setFirebaseError('Registration failed. Please try again')
      }
    } finally {
      setLoading(false)
    }
  }
  
  return (
    <div className="register-page">
      <div className="register-page__card">
        <div className="register-page__header">
          <div className="register-page__logo">
            <span className="register-page__logo-icon">🏢</span>
            <span className="register-page__logo-text">BEPARAGON <span className="register-page__logo-llc">LLC</span></span>
          </div>
          <h1 className="register-page__title">Create your account</h1>
          <p className="register-page__subtitle">Start your 14-day free trial</p>
        </div>
        
        <form className="register-page__form" onSubmit={handleSubmit}>
          <div className="register-page__field">
            <label className="register-page__label">Full Name</label>
            <input 
              className="register-page__input" 
              type="text" 
              placeholder="John Smith" 
              value={form.name} 
              onChange={e => setForm({...form, name: e.target.value})} 
              required 
            />
          </div>
          
          <div className="register-page__field">
            <label className="register-page__label">Email</label>
            <input 
              className="register-page__input" 
              type="email" 
              placeholder="you@company.com" 
              value={form.email} 
              onChange={e => setForm({...form, email: e.target.value})} 
              required 
            />
          </div>
          
          <div className="register-page__field">
            <label className="register-page__label">Password</label>
            <div className="register-page__password-wrapper">
              <input 
                className="register-page__input" 
                type={showPassword ? "text" : "password"}
                placeholder="Create a strong password" 
                value={form.password} 
                onChange={e => setForm({...form, password: e.target.value})} 
                required 
              />
              <button 
                type="button" 
                className="register-page__password-toggle"
                onClick={() => setShowPassword(!showPassword)}
              >
                {showPassword ? '👁️' : '👁️‍🗨️'}
              </button>
            </div>
          </div>
          
          <div className="register-page__field">
            <label className="register-page__label">Confirm Password</label>
            <div className="register-page__password-wrapper">
              <input 
                className="register-page__input" 
                type={showConfirmPassword ? "text" : "password"}
                placeholder="Confirm your password" 
                value={form.confirmPassword} 
                onChange={e => setForm({...form, confirmPassword: e.target.value})} 
                required 
              />
              <button 
                type="button" 
                className="register-page__password-toggle"
                onClick={() => setShowConfirmPassword(!showConfirmPassword)}
              >
                {showConfirmPassword ? '👁️' : '👁️‍🗨️'}
              </button>
            </div>
          </div>
          
          {firebaseError && <div className="register-page__error">{firebaseError}</div>}
          
          <button type="submit" className="register-page__btn" disabled={loading}>
            {loading ? 'Creating account...' : 'Create Account'}
          </button>
        </form>
        
        <div className="register-page__footer-text">
          Already have an account? 
          <a href="#" onClick={(e) => { e.preventDefault(); onBackToLogin() }}>Sign in</a>
        </div>
      </div>
    </div>
  )
}

// ===== DASHBOARD SECTIONS =====
function TasksSection({ tasks, setTasks, setActiveSection }) {
  const [showAddTask, setShowAddTask] = useState(false);
  const [newTask, setNewTask] = useState({ title: '', time: '', priority: 'medium' });
  const addTask = (e) => {
    e.preventDefault();
    setTasks([...tasks, { ...newTask, completed: false }]);
    setNewTask({ title: '', time: '', priority: 'medium' });
    setShowAddTask(false);
  };
  const toggleTask = (index) => {
    const updated = [...tasks];
    updated[index].completed = !updated[index].completed;
    setTasks(updated);
  };
  const deleteTask = (index) => {
    setTasks(tasks.filter((_, i) => i !== index));
  };
  return (
    <div className="dashboard__body">
      <div className="dashboard__welcome">
        <div className="dashboard__welcome-content">
          <h2>Tasks</h2>
          <p>Manage your upcoming tasks and activities.</p>
        </div>
        <div className="dashboard__welcome-actions">
          <button className="btn btn-accent" onClick={() => setShowAddTask(true)}>+ New Task</button>
        </div>
      </div>
      <div className="dashboard__card">
        <div className="tasks-list">
          {tasks.length === 0 ? <p style={{padding: '2rem', textAlign: 'center', color: 'var(--color-text-secondary)'}}>No tasks yet. Click "+ New Task" to add one.</p> : tasks.map((task, i) => (
            <div key={i} className={`task-item ${task.completed ? 'task-item--completed' : ''}`}>
              <input type="checkbox" checked={task.completed} onChange={() => toggleTask(i)} />
              <div className="task-item__content">
                <span className="task-item__title">{task.title}</span>
                <span className="task-item__time">{task.time}</span>
              </div>
              <span className={`task-item__priority task-item__priority--${task.priority}`}>{task.priority}</span>
              <button className="task-item__delete" onClick={() => deleteTask(i)}>×</button>
            </div>
          ))}
        </div>
      </div>
      {showAddTask && (
        <Modal isOpen={showAddTask} onClose={() => setShowAddTask(false)} title="Add New Task">
          <form onSubmit={addTask}>
            <div className="lead-form__field">
              <label>Task Title *</label>
              <input className="lead-form__input" value={newTask.title} onChange={e => setNewTask({...newTask, title: e.target.value})} required />
            </div>
            <div className="lead-form__field">
              <label>Due Date/Time *</label>
              <input className="lead-form__input" value={newTask.time} onChange={e => setNewTask({...newTask, time: e.target.value})} placeholder="e.g., Today, 2:00 PM" required />
            </div>
            <div className="lead-form__field">
              <label>Priority</label>
              <select className="lead-form__input" value={newTask.priority} onChange={e => setNewTask({...newTask, priority: e.target.value})}>
                <option>high</option>
                <option>medium</option>
                <option>low</option>
              </select>
            </div>
            <button type="submit" className="btn btn-accent">Add Task</button>
          </form>
        </Modal>
      )}
    </div>
  );
}

function DashboardOverview({ user, setActiveSection, onNewLead }) {
  const recentLeads = [
    { name: 'Sarah Johnson', property: 'Sunset Villa #204', status: 'Hot', value: '$850,000', time: '2 min ago' },
    { name: 'Michael Chen', property: 'Ocean View Condo #108', status: 'Warm', value: '$520,000', time: '15 min ago' },
    { name: 'Emily Rodriguez', property: 'Downtown Loft #305', status: 'Hot', value: '$675,000', time: '1 hour ago' },
    { name: 'David Kim', property: 'Garden Estate #412', status: 'Cold', value: '$1,200,000', time: '3 hours ago' },
    { name: 'Lisa Thompson', property: 'Marina Bay #220', status: 'Warm', value: '$890,000', time: '5 hours ago' },
  ]
  
  const upcomingTasks = [
    { title: 'Follow-up call with Sarah Johnson', time: 'Today, 2:00 PM', priority: 'high' },
    { title: 'Property viewing - Ocean View Condo', time: 'Today, 4:30 PM', priority: 'medium' },
    { title: 'Prepare contract for Michael Chen', time: 'Tomorrow, 10:00 AM', priority: 'high' },
    { title: 'Team meeting - Weekly pipeline review', time: 'Wed, 9:00 AM', priority: 'low' },
  ]
  
  const dealStages = [
    { stage: 'New Leads', count: 45, value: '$2.1M', color: '#6366F1' },
    { stage: 'Showing Scheduled', count: 28, value: '$1.8M', color: '#8B5CF6' },
    { stage: 'Offer Submitted', count: 15, value: '$980K', color: '#F59E0B' },
    { stage: 'Under Contract', count: 8, value: '$620K', color: '#10B981' },
    { stage: 'Closed Won', count: 12, value: '$890K', color: '#059669' },
  ]

const getStatusClass = (status) => {
    switch(status) {
      case 'Hot': return 'status-hot'
      case 'Warm': return 'status-warm'
      case 'Cold': return 'status-cold'
      default: return ''
    }
  }

return (
    <div className="dashboard__body">
      <div className="dashboard__welcome">
        <div className="dashboard__welcome-content">
          <h2>Good morning, {user?.name}! 👋</h2>
          <p>Here's what's happening with your business today. You have 5 new leads and 3 upcoming viewings.</p>
        </div>
        <div className="dashboard__welcome-actions">
          <button className="btn btn-accent" onClick={onNewLead}>+ New Lead</button>
          <button className="btn btn-outline-white" onClick={() => setActiveSection('analytics')}>View Reports</button>
        </div>
      </div>
      
      <div className="dashboard__stats-grid">
        <div className="dashboard__stat-card">
          <div className="dashboard__stat-card-header">
            <span className="dashboard__stat-card-icon">🎯</span>
            <span className="dashboard__stat-card-trend positive">↑ 12%</span>
          </div>
          <div className="dashboard__stat-card-value">1,284</div>
          <div className="dashboard__stat-card-label">Active Leads</div>
          <div className="dashboard__stat-card-bar"><div className="dashboard__stat-card-bar-fill" style={{width: '78%'}}></div></div>
        </div>
        <div className="dashboard__stat-card">
          <div className="dashboard__stat-card-header">
            <span className="dashboard__stat-card-icon">🏠</span>
            <span className="dashboard__stat-card-trend positive">↑ 8%</span>
          </div>
          <div className="dashboard__stat-card-value">348</div>
          <div className="dashboard__stat-card-label">Properties Listed</div>
          <div className="dashboard__stat-card-bar"><div className="dashboard__stat-card-bar-fill" style={{width: '65%'}}></div></div>
        </div>
        <div className="dashboard__stat-card">
          <div className="dashboard__stat-card-header">
            <span className="dashboard__stat-card-icon">💰</span>
            <span className="dashboard__stat-card-trend positive">↑ 24%</span>
          </div>
          <div className="dashboard__stat-card-value">$4.2M</div>
          <div className="dashboard__stat-card-label">Revenue Pipeline</div>
          <div className="dashboard__stat-card-bar"><div className="dashboard__stat-card-bar-fill" style={{width: '92%'}}></div></div>
        </div>
        <div className="dashboard__stat-card">
          <div className="dashboard__stat-card-header">
            <span className="dashboard__stat-card-icon">✅</span>
            <span className="dashboard__stat-card-trend positive">↑ 15%</span>
          </div>
          <div className="dashboard__stat-card-value">27</div>
          <div className="dashboard__stat-card-label">Deals Closed (MTD)</div>
          <div className="dashboard__stat-card-bar"><div className="dashboard__stat-card-bar-fill" style={{width: '85%'}}></div></div>
        </div>
      </div>

<div className="dashboard__grid">
        <div className="dashboard__card dashboard__card--leads">
          <div className="dashboard__card-header">
            <h3 className="dashboard__card-title">Recent Leads</h3>
            <button className="dashboard__card-action" onClick={() => setActiveSection('leads')}>View All →</button>
          </div>
          <div className="dashboard__leads-table">
            <div className="dashboard__leads-header">
              <span>Lead</span>
              <span>Property</span>
              <span>Status</span>
              <span>Value</span>
            </div>
            {recentLeads.map((lead, i) => (
              <div className="dashboard__leads-row" key={i}>
                <div className="dashboard__leads-lead">
                  <div className="dashboard__leads-avatar">{lead.name.split(' ').map(n=>n[0]).join('')}</div>
                  <div className="dashboard__leads-info">
                    <span className="dashboard__leads-name">{lead.name}</span>
                    <span className="dashboard__leads-time">{lead.time}</span>
                  </div>
                </div>
                <span className="dashboard__leads-property">{lead.property}</span>
                <span className={`dashboard__leads-status ${getStatusClass(lead.status)}`}>{lead.status}</span>
                <span className="dashboard__leads-value">{lead.value}</span>
              </div>
            ))}
          </div>
        </div>

<div className="dashboard__card dashboard__card--tasks">
          <div className="dashboard__card-header">
            <h3 className="dashboard__card-title">Upcoming Tasks</h3>
            <button className="dashboard__card-action" onClick={() => setActiveSection('tasks')}>View All →</button>
          </div>
          <div className="dashboard__tasks-list">
            {upcomingTasks.map((task, i) => (
              <div className="dashboard__task-item" key={i}>
                <div className={`dashboard__task-priority dashboard__task-priority--${task.priority}`}></div>
                <div className="dashboard__task-content">
                  <span className="dashboard__task-title">{task.title}</span>
                  <span className="dashboard__task-time">{task.time}</span>
                </div>
              </div>
            ))}
          </div>
        </div>

<div className="dashboard__card dashboard__card--pipeline">
          <div className="dashboard__card-header">
            <h3 className="dashboard__card-title">Deal Pipeline</h3>
            <button className="dashboard__card-action" onClick={() => setActiveSection('deals')}>View All →</button>
          </div>
          <div className="dashboard__pipeline">
            {dealStages.map((stage, i) => (
              <div className="dashboard__pipeline-stage" key={i}>
                <div className="dashboard__pipeline-header">
                  <span className="dashboard__pipeline-dot" style={{backgroundColor: stage.color}}></span>
                  <span className="dashboard__pipeline-stage-name">{stage.stage}</span>
                </div>
                <div className="dashboard__pipeline-count">{stage.count}</div>
                <div className="dashboard__pipeline-value">{stage.value}</div>
                <div className="dashboard__pipeline-bar">
                  <div className="dashboard__pipeline-bar-fill" style={{width: `${(stage.count / 50) * 100}%`, backgroundColor: stage.color}}></div>
                </div>
              </div>
            ))}
          </div>
        </div>

<div className="dashboard__card dashboard__card--performance">
          <div className="dashboard__card-header">
            <h3 className="dashboard__card-title">Performance Overview</h3>
            <select className="dashboard__card-select" onChange={(e) => console.log('Period:', e.target.value)}>
              <option>This Month</option>
              <option>Last Month</option>
              <option>This Quarter</option>
            </select>
          </div>
          <div className="dashboard__chart">
            <div className="dashboard__chart-bars">
              {[65, 45, 80, 55, 90, 70, 85].map((h, i) => (
                <div className="dashboard__chart-bar-wrap" key={i}>
                  <div className="dashboard__chart-bar" style={{height: `${h}%`}}></div>
                  <span className="dashboard__chart-label">{['Mon','Tue','Wed','Thu','Fri','Sat','Sun'][i]}</span>
                </div>
              ))}
            </div>
            <div className="dashboard__chart-summary">
              <div className="dashboard__chart-stat">
                <span className="dashboard__chart-stat-value">89%</span>
                <span className="dashboard__chart-stat-label">Conversion Rate</span>
              </div>
              <div className="dashboard__chart-stat">
                <span className="dashboard__chart-stat-value">$12.5K</span>
                <span className="dashboard__chart-stat-label">Avg. Deal Size</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

function Dashboard({ user, onLogout }) {
  const [activeSection, setActiveSection] = useState('overview')
  const [showNewLeadModal, setShowNewLeadModal] = useState(false)
  const [showSearchModal, setShowSearchModal] = useState(false)
  const [showNotificationsModal, setShowNotificationsModal] = useState(false)
  
  const [leads, setLeads] = useState([
    { name: 'Sarah Johnson', email: 'sarah@email.com', phone: '555-0101', property: 'Sunset Villa #204', status: 'Hot', value: '$850,000', time: '2 min ago' },
    { name: 'Michael Chen', email: 'michael@email.com', phone: '555-0102', property: 'Ocean View Condo #108', status: 'Warm', value: '$520,000', time: '15 min ago' },
    { name: 'Emily Rodriguez', email: 'emily@email.com', phone: '555-0103', property: 'Downtown Loft #305', status: 'Hot', value: '$675,000', time: '1 hour ago' },
    { name: 'David Kim', email: 'david@email.com', phone: '555-0104', property: 'Garden Estate #412', status: 'Cold', value: '$1,200,000', time: '3 hours ago' },
    { name: 'Lisa Thompson', email: 'lisa@email.com', phone: '555-0105', property: 'Marina Bay #220', status: 'Warm', value: '$890,000', time: '5 hours ago' },
  ])
  
  const [tasks, setTasks] = useState([
    { title: 'Follow-up call with Sarah Johnson', time: 'Today, 2:00 PM', priority: 'high', completed: false },
    { title: 'Property viewing - Ocean View Condo', time: 'Today, 4:30 PM', priority: 'medium', completed: false },
    { title: 'Prepare contract for Michael Chen', time: 'Tomorrow, 10:00 AM', priority: 'high', completed: false },
    { title: 'Team meeting - Weekly pipeline review', time: 'Wed, 9:00 AM', priority: 'low', completed: false },
  ])
  
  const [properties, setProperties] = useState([
    { title: 'Sunset Villa #204', address: '123 Sunset Blvd, Los Angeles', price: '$850,000', bedrooms: '3', bathrooms: '2', sqft: '1,800', status: 'Active' },
    { title: 'Ocean View Condo #108', address: '456 Ocean Drive, Miami', price: '$520,000', bedrooms: '2', bathrooms: '2', sqft: '1,200', status: 'Active' },
    { title: 'Downtown Loft #305', address: '789 Main St, New York', price: '$675,000', bedrooms: '1', bathrooms: '1', sqft: '950', status: 'Pending' },
  ])
  
  const [deals, setDeals] = useState([
    { client: 'Sarah Johnson', property: 'Sunset Villa', value: '$850,000', stage: 'Showing Scheduled', probability: '30%', lastUpdated: '2 hours ago' },
    { client: 'Michael Chen', property: 'Ocean View Condo', value: '$520,000', stage: 'Offer Submitted', probability: '60%', lastUpdated: '1 day ago' },
    { client: 'Emily Rodriguez', property: 'Downtown Loft', value: '$675,000', stage: 'New Leads', probability: '10%', lastUpdated: '3 hours ago' },
  ])
  
  const [notifications, setNotifications] = useState([
    { icon: '🎯', text: 'New lead: Sarah Johnson', time: '2 min ago' },
    { icon: '📋', text: 'Deal moved to Under Contract', time: '1 hour ago' },
    { icon: '🔔', text: 'Task reminder: Follow-up call', time: '30 min ago' },
  ])

const handleNewLead = (leadData) => {
    setLeads([{ ...leadData, time: 'Just now' }, ...leads])
  }

return (
    <div className="dashboard">
      <aside className="dashboard__sidebar">
        <div className="dashboard__sidebar-header">
          <span className="dashboard__sidebar-logo-icon">🏢</span>
          <span className="dashboard__sidebar-logo-text">BEPARAGON <span>LLC</span></span>
        </div>
        <nav className="dashboard__sidebar-nav">
          {[
            { name: 'Overview', icon: '📊' },
            { name: 'Leads', icon: '🎯' },
            { name: 'Properties', icon: '🏠' },
            { name: 'Deals', icon: '📋' },
            { name: 'Tasks', icon: '✅' },
            { name: 'Analytics', icon: '📈' },
          ].map(item => (
            <button key={item.name} className={`dashboard__sidebar-link${activeSection === item.name.toLowerCase() ? ' dashboard__sidebar-link--active' : ''}`} onClick={() => setActiveSection(item.name.toLowerCase())}>
              <span className="dashboard__sidebar-icon">{item.icon}</span>
              {item.name}
            </button>
          ))}
        </nav>
        <div className="dashboard__sidebar-footer">
          <button className="dashboard__sidebar-link" onClick={onLogout}>
            <span className="dashboard__sidebar-icon">🚪</span>Sign Out
          </button>
        </div>
      </aside>
      <div className="dashboard__main">
        <header className="dashboard__topbar">
          <div className="dashboard__topbar-left">
            <h1 className="dashboard__topbar-title">{activeSection.charAt(0).toUpperCase() + activeSection.slice(1)}</h1>
            <span className="dashboard__topbar-subtitle">{new Date().toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}</span>
          </div>
          <div className="dashboard__topbar-actions">
            <button className="dashboard__topbar-btn" onClick={() => setShowSearchModal(true)}>🔍</button>
            <button className="dashboard__topbar-btn" onClick={() => setShowNotificationsModal(true)}>🔔<span className="dashboard__topbar-badge">{notifications.length}</span></button>
            <div className="dashboard__topbar-user">
              <div className="dashboard__topbar-avatar">{user?.name?.charAt(0)?.toUpperCase() || 'U'}</div>
              <div className="dashboard__topbar-user-info">
                <span className="dashboard__topbar-user-name">{user?.name}</span>
                <span className="dashboard__topbar-user-role">Admin</span>
              </div>
            </div>
          </div>
        </header>
        {renderSection()}
      </div>

<NewLeadModal isOpen={showNewLeadModal} onClose={() => setShowNewLeadModal(false)} onSubmit={handleNewLead} />
      <SearchModal isOpen={showSearchModal} onClose={() => setShowSearchModal(false)} leads={leads} properties={properties} deals={deals} />
      <NotificationsModal isOpen={showNotificationsModal} onClose={() => setShowNotificationsModal(false)} notifications={notifications} />
    </div>
  )
}

// ===== PRIVACY POLICY PAGE =====
function PrivacyPolicy() {
  return (
    <div className="privacy-policy">
      <nav className="privacy-policy__nav">
        <Link to="/" className="privacy-policy__back">← Back to Home</Link>
      </nav>
      
      <div className="privacy-policy__content">
        <h1 className="privacy-policy__title">Privacy Policy</h1>
        <p className="privacy-policy__subtitle">Your privacy is important to us. Learn how we protect your data.</p>
        
        {/* Card Grid */}
        <div className="privacy-policy__cards">
          <div className="privacy-policy__card">
            <div className="privacy-policy__card-icon">🔒</div>
            <h3>Data Security</h3>
            <p>We use industry-standard encryption to protect your personal information.</p>
          </div>
          <div className="privacy-policy__card">
            <div className="privacy-policy__card-icon">📊</div>
            <h3>Data Collection</h3>
            <p>We collect only necessary information to provide our services to you.</p>
          </div>
          <div className="privacy-policy__card">
            <div className="privacy-policy__card-icon">🎯</div>
            <h3>Your Rights</h3>
            <p>You have full control over your personal data and privacy settings.</p>
          </div>
          <div className="privacy-policy__card">
            <div className="privacy-policy__card-icon">⚡</div>
            <h3>Quick Updates</h3>
            <p>We keep you informed about changes to our privacy practices.</p>
          </div>
        </div>
        
        <section className="privacy-policy__section">
          <h2>📋 Introduction</h2>
          <p>
            At our company, we take your privacy seriously. This Privacy Policy explains how we collect, 
            use, disclose, and safeguard your information when you visit our website or use our services.
          </p>
        </section>

<section className="privacy-policy__section">
          <h2>📝 Information We Collect</h2>
          <p>We may collect personal information that you voluntarily provide to us when you:</p>
          <ul className="privacy-policy__list">
            <li>Register on the Website</li>
            <li>Express an interest in obtaining information about us or our products and services</li>
            <li>Participate in activities on the Website</li>
            <li>Contact us</li>
            <li>Subscribe to our newsletter</li>
            <li>Request a demo or trial</li>
          </ul>
        </section>

<section className="privacy-policy__section">
          <h2>💡 How We Use Your Information</h2>
          <p>
            We use personal information collected via our Website for a variety of business purposes described below. 
            We process your personal information for these purposes in reliance on our legitimate business interests.
          </p>
          <ul className="privacy-policy__list">
            <li>To facilitate account creation and logon process</li>
            <li>To send administrative information to you</li>
            <li>To fulfill and manage your orders</li>
            <li>To request feedback</li>
            <li>To protect our Services</li>
            <li>To deliver targeted advertising</li>
            <li>To improve our website and services</li>
          </ul>
        </section>

<section className="privacy-policy__section">
          <h2>🔄 Data Sharing & Transfers</h2>
          <p>We only share information with the following third parties:</p>
          <ul className="privacy-policy__list">
            <li><strong>Data Analytics Services:</strong> Google Analytics, Mixpanel</li>
            <li><strong>Customer Support:</strong> Zendesk, Intercom</li>
            <li><strong>Payment Processing:</strong> Stripe, PayPal</li>
            <li><strong>Marketing Platforms:</strong> Mailchimp, HubSpot</li>
            <li><strong>Cloud Storage:</strong> AWS, Google Cloud</li>
          </ul>
        </section>

<section className="privacy-policy__section">
          <h2>🛡️ Your Privacy Rights</h2>
          <p>You have the following rights regarding your personal data:</p>
          <ul className="privacy-policy__list">
            <li><strong>Right to Access:</strong> Request access to your personal data</li>
            <li><strong>Right to Correction:</strong> Request correction or deletion of your personal data</li>
            <li><strong>Right to Object:</strong> Object to processing of your personal data</li>
            <li><strong>Right to Restriction:</strong> Request restriction of processing your personal data</li>
            <li><strong>Right to Transfer:</strong> Request transfer of your personal data</li>
            <li><strong>Right to Withdraw:</strong> Withdraw your consent at any time</li>
          </ul>
        </section>

<section className="privacy-policy__section">
          <h2>🍪 Cookies & Tracking Technologies</h2>
          <p>
            We use cookies and similar tracking technologies to track the activity on our Website and hold certain information. 
            You can instruct your browser to refuse all cookies or to indicate when a cookie is being sent.
          </p>
          <ul className="privacy-policy__list">
            <li>Essential cookies for site functionality</li>
            <li>Analytics cookies to understand site usage</li>
            <li>Marketing cookies for targeted advertising</li>
            <li>Preference cookies to remember your settings</li>
          </ul>
        </section>

<section className="privacy-policy__section">
          <h2>📱 Data Security</h2>
          <p>
            We have implemented appropriate technical and organizational security measures designed to protect the security 
            of any personal information we process. Your data is encrypted both in transit and at rest using industry-standard protocols.
          </p>
        </section>

<section className="privacy-policy__section">
          <h2>🌍 International Data Transfers</h2>
          <p>
            Your information, including personal data, may be transferred to — and maintained on — computers located 
            outside of your state, province, country or other governmental jurisdiction where the data protection laws 
            may differ from those from your jurisdiction.
          </p>
        </section>

<section className="privacy-policy__section">
          <h2>👶 Children's Privacy</h2>
          <p>
            Our Service does not address anyone under the age of 13. We do not knowingly collect personally identifiable 
            information from anyone under the age of 13. If you become aware that a child under 13 has provided us with 
            personal information, please contact us immediately.
          </p>
        </section>

<section className="privacy-policy__section">
          <h2>🔐 Data Retention</h2>
          <p>
            We will retain your personal information only for as long as is necessary for the purposes set out in this 
            Privacy Policy. We will retain and use your information to the extent necessary to comply with our legal 
            obligations, resolve disputes, and enforce our policies.
          </p>
          <ul className="privacy-policy__list">
            <li>Account data: Retained while your account is active</li>
            <li>Transaction data: Retained for 7 years for tax purposes</li>
            <li>Marketing data: Retuned until you unsubscribe</li>
            <li>Log files: Retained for 12 months</li>
          </ul>
        </section>

<section className="privacy-policy__section">
          <h2>⚖️ GDPR Privacy Rights</h2>
          <p>If you are a resident of the European Economic Area (EEA), you have certain data protection rights:</p>
          <ul className="privacy-policy__list">
            <li><strong>Right to Access:</strong> You have the right to request copies of your personal data</li>
            <li><strong>Right to Rectification:</strong> You can request that we correct any information you believe is inaccurate</li>
            <li><strong>Right to Erasure:</strong> You can request that we erase your personal data under certain conditions</li>
            <li><strong>Right to Restrict Processing:</strong> You can request that we restrict the processing of your data</li>
            <li><strong>Right to Data Portability:</strong> You can request that we transfer your data to another organization</li>
            <li><strong>Right to Object:</strong> You can object to our processing of your personal data</li>
          </ul>
        </section>

<section className="privacy-policy__section">
          <h2>🇺🇸 CCPA Privacy Rights</h2>
          <p>If you are a resident of California, you have the following rights under the California Consumer Privacy Act (CCPA):</p>
          <ul className="privacy-policy__list">
            <li><strong>Right to Know:</strong> You can request what personal information we collect and how we use it</li>
            <li><strong>Right to Delete:</strong> You can request deletion of your personal information</li>
            <li><strong>Right to Opt-Out:</strong> You can opt-out of the sale of your personal information</li>
            <li><strong>Right to Non-Discrimination:</strong> We will not discriminate against you for exercising your rights</li>
          </ul>
        </section>

<section className="privacy-policy__section">
          <h2>📢 Third-Party Advertising</h2>
          <p>
            We may use third-party advertising companies to serve ads when you visit our website. These companies may use 
            information about your visits to this and other websites in order to provide advertisements about goods and 
            services of interest to you.
          </p>
          <ul className="privacy-policy__list">
            <li>Google AdSense</li>
            <li>Facebook Pixel</li>
            <li>LinkedIn Insight Tag</li>
            <li>Twitter Pixel</li>
          </ul>
        </section>

<section className="privacy-policy__section">
          <h2>🔔 Communication Preferences</h2>
          <p>
            We may use your personal information to contact you with newsletters, marketing or promotional materials, and 
            other information that may be of interest to you. You can opt-out of receiving any of these communications 
            at any time by clicking the unsubscribe link in our emails.
          </p>
          <ul className="privacy-policy__list">
            <li>Product updates and new features</li>
            <li>Company news and announcements</li>
            <li>Educational content and guides</li>
            <li>Special offers and promotions</li>
          </ul>
        </section>

<section className="privacy-policy__section">
          <h2>🏢 Business Transfers</h2>
          <p>
            If we are involved in a merger, acquisition, or sale of all or a portion of our assets, your personal information 
            may be transferred as part of that transaction. We will notify you before your personal information becomes subject 
            to a different privacy policy.
          </p>
        </section>

<section className="privacy-policy__section">
          <h2>📊 Analytics Services</h2>
          <p>We use third-party analytics tools to understand how our website is used:</p>
          <ul className="privacy-policy__list">
            <li><strong>Google Analytics:</strong> Tracks website traffic and user behavior</li>
            <li><strong>Hotjar:</strong> Records user sessions for UX improvement</li>
            <li><strong>Mixpanel:</strong> Analyzes user engagement and feature usage</li>
            <li><strong>Segment:</strong> Customer data platform for unified analytics</li>
          </ul>
        </section>

<section className="privacy-policy__section">
          <h2>🔄 Changes to This Policy</h2>
          <p>
            We may update our Privacy Policy from time to time. We will notify you of any changes by posting the new 
            Privacy Policy on this page and updating the "last updated" date at the bottom. You are advised to review 
            this Privacy Policy periodically for any changes.
          </p>
        </section>

<section className="privacy-policy__section">
          <h2>📧 Contact Us</h2>
          <p>If you have questions or comments about this policy, please contact us:</p>
          <div className="privacy-policy__contact-card">
            <p><strong>📧 Email:</strong>support@beparagon.com</p>
            <p><strong>📞 Phone:</strong> (405) 462-7472</p>
            <p><strong>📍 Address:</strong> 1001 S. MAIN STREET STE 500 KALISPELL, MT 59901</p>
            <p><strong>🌐 Website:</strong> www.beparagon.com</p>
          </div>
        </section>

<p className="privacy-policy__last-updated">
          Last updated: {new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
        </p>
      </div>
    </div>
  );
}

// ===== TERMS & CONDITIONS PAGE =====
function TermsAndConditions() {
  const [openSection, setOpenSection] = useState(null)
  const toggleSection = (index) => {
    setOpenSection(openSection === index ? null : index)
  }

const sections = [
    { title: "📜 Acceptance of Terms", content: "By accessing and using this website, you accept and agree to be bound by the terms and provision of this agreement. If you do not agree to abide by these terms, please do not use our service." },
    { title: "📝 Use License", content: "Permission is granted to temporarily use this website for personal, non-commercial transitory viewing only. This is the grant of a license, not a transfer of title. Under this license you may not: modify or copy the materials, use the materials for any commercial purpose." },
    { title: "⚠️ Disclaimer", content: "The materials on this website are provided 'as is'. We make no warranties, expressed or implied, and hereby disclaim and negate all other warranties, including without limitation, implied warranties of merchantability, fitness for a particular purpose, or non-infringement of intellectual property." },
    { title: "🚫 Limitations", content: "In no event shall we or our suppliers be liable for any damages (including, without limitation, damages for loss of data or profit, or due to business interruption) arising out of the use or inability to use the materials on our website." },
    { title: "📐 Accuracy of Materials", content: "The materials appearing on our website could include technical, typographical, or photographic errors. We do not warrant that any of the materials on its website are accurate, complete, or current." },
    { title: "🔗 Links", content: "We have not reviewed all of the sites linked to its website and are not responsible for the contents of any such linked site. The inclusion of any link does not imply endorsement by us of the site." },
    { title: "💳 Payments & Billing", content: "All paid subscriptions are billed in advance. By subscribing, you authorize us to charge your payment method. Prices are subject to change with 30 days notice. Refunds are available within 14 days of purchase." },
    { title: "🔒 Account Responsibilities", content: "You are responsible for maintaining the confidentiality of your account and password. You agree to accept responsibility for all activities that occur under your account." },
    { title: "🌐 User Generated Content", content: "Our service allows you to post, link, store, share and otherwise make available certain information. You are responsible for the content you post and its legality." },
    { title: "⚖️ Governing Law", content: "These terms and conditions are governed by and construed in accordance with the laws of the State of Montana and you irrevocably submit to the exclusive jurisdiction of the courts in that State." },
    { title: "🔄 Changes to Terms", content: "We reserve the right, at our sole discretion, to modify or replace these Terms at any time. By continuing to access or use our service, you agree to be bound by the revised terms." }
  ]
  return (
    <div className="terms-conditions">
      <nav className="terms-conditions__nav">
        <Link to="/" className="terms-conditions__back">← Back to Home</Link>
      </nav>
      
      <div className="terms-conditions__content">
        <h1 className="terms-conditions__title">Terms & Conditions</h1>
        <p className="terms-conditions__subtitle">Please read our terms and conditions carefully before using our service.</p>
        
        {/* Quick Info Cards */}
        <div className="terms-conditions__cards">
          <div className="terms-conditions__card">
            <div className="terms-conditions__card-icon">📋</div>
            <h3>Last Updated</h3>
            <p>{new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}</p>
          </div>
          <div className="terms-conditions__card">
            <div className="terms-conditions__card-icon">📧</div>
            <h3>Questions?</h3>
            <p>Contact us anytime</p>
          </div>
          <div className="terms-conditions__card">
            <div className="terms-conditions__card-icon">✅</div>
            <h3>Agreement</h3>
            <p>By using, you agree</p>
          </div>
        </div>

{/* Accordion Sections */}
        <div className="terms-conditions__accordion">
          {sections.map((section, index) => (
            <div key={index} className={`terms-conditions__accordion-item ${openSection === index ? 'active' : ''}`}>
              <button className="terms-conditions__accordion-header" onClick={() => toggleSection(index)}>
                <span>{section.title}</span>
                <span className="terms-conditions__accordion-icon">{openSection === index ? '−' : '+'}</span>
              </button>
              {openSection === index && (
                <div className="terms-conditions__accordion-content">
                  <p>{section.content}</p>
                </div>
              )}
            </div>
          ))}
        </div>
        
        <section className="terms-conditions__section">
          <h2>Acceptance of Terms</h2>
          <p>
            By accessing and using this website, you accept and agree to be bound by the terms and provision of this agreement.
          </p>
        </section>

<section className="terms-conditions__section">
          <h2>Use License</h2>
          <p>
            Permission is granted to temporarily use this website for personal, non-commercial transitory viewing only.
          </p>
        </section>

<section className="terms-conditions__section">
          <h2>Disclaimer</h2>
          <p>
            The materials on this website are provided "as is". We make no warranties, expressed or implied, and 
            hereby disclaim and negate all other warranties, including without limitation, implied warranties or conditions 
            of merchantability, fitness for a particular purpose, or non-infringement of intellectual property.
          </p>
        </section>

<section className="terms-conditions__section">
          <h2>Limitations</h2>
          <p>
            In no event shall we or our suppliers be liable for any damages (including, without limitation, damages 
            for loss of data or profit, or due to business interruption) arising out of the use or inability to 
            use the materials on our website.
          </p>
        </section>

<section className="terms-conditions__section">
          <h2>Accuracy of Materials</h2>
          <p>
            The materials appearing on our website could include technical, typographical, or photographic errors. 
            We do not warrant that any of the materials on its website are accurate, complete, or current.
          </p>
        </section>

<section className="terms-conditions__section">
          <h2>Links</h2>
          <p>
            We have not reviewed all of the sites linked to its website and are not responsible for the contents 
            of any such linked site. The inclusion of any link does not imply endorsement by us of the site.
          </p>
        </section>

<section className="terms-conditions__section">
          <h2>Governing Law</h2>
          <p>
            These terms and conditions are governed by and construed in accordance with the laws of your jurisdiction 
            and you irrevocably submit to the exclusive jurisdiction of the courts in that State or location.
          </p>
        </section>

<section className="terms-conditions__section">
          <h2>📧 Contact Us</h2>
          <p>If you have any questions about these Terms & Conditions, please contact us:</p>
          <div className="terms-conditions__contact-card">
            <p><strong>📧 Email:</strong> support@beparagon.to</p>
            <p><strong>📞 Phone:</strong> (405) 462-7472</p>
            <p><strong>📍 Address:</strong> 1001 S. MAIN STREET STE 500 KALISPELL, MT 59901</p>
            <p><strong>🌐 Website:</strong> www.beparagon.com</p>
          </div>
        </section>

<p className="terms-conditions__last-updated">
          Last updated: {new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
        </p>
      </div>
    </div>
  );
}

// ===== REFUND POLICY PAGE =====
function RefundPolicy() {
  const [openSection, setOpenSection] = useState(null)

const toggleSection = (index) => {
    setOpenSection(openSection === index ? null : index)
  }

const sections = [
    {
      title: "💰 Refund Eligibility",
      content: "Customers may request a full refund within 30 days of purchase if they are not satisfied with our service. After 30 days, refunds are considered on a case-by-case basis depending on the circumstances."
    },
    {
      title: "🔄 Refund Process",
      content: "To request a refund, please contact our support team at support@beparagon.to with your order details. We will process your request within 5-7 business days."
    },
    {
      title: "💳 Refund Method",
      content: "Refunds will be credited to the original payment method used during the purchase. Please allow 5-10 business days for the refund to appear in your account."
    },
    {
      title: "🚫 Non-Refundable Items",
      content: "Customized services, add-on features, and promotional discounts are non-refundable. Annual subscription plans may be refunded pro-rated based on remaining months."
    },
    {
      title: "📞 Contact for Refunds",
      content: "For refund inquiries, please reach out to our support team who will assist you through the process and answer any questions you may have."
    }
  ]

return (
    <div className="refund-policy">
      <nav className="refund-policy__nav">
        <Link to="/" className="refund-policy__back">← Back to Home</Link>
      </nav>

<div className="refund-policy__content">
        <h1 className="refund-policy__title">Refund Policy</h1>
        <p className="refund-policy__subtitle">Our commitment to customer satisfaction and transparent refund processes.</p>

{/* Quick Info Cards */}
        <div className="refund-policy__cards">
          <div className="refund-policy__card">
            <div className="refund-policy__card-icon">💵</div>
            <h3>30-Day Window</h3>
            <p>Full refund within 30 days</p>
          </div>
          <div className="refund-policy__card">
            <div className="refund-policy__card-icon">⚡</div>
            <h3>Fast Processing</h3>
            <p>5-7 business days</p>
          </div>
          <div className="refund-policy__card">
            <div className="refund-policy__card-icon">🔒</div>
            <h3>Secure Refunds</h3>
            <p>Original payment method</p>
          </div>
        </div>

{/* Accordion Sections */}
        <div className="refund-policy__accordion">
          {sections.map((section, index) => (
            <div key={index} className={`refund-policy__accordion-item ${openSection === index ? 'active' : ''}`}>
              <button className="refund-policy__accordion-header" onClick={() => toggleSection(index)}>
                <span>{section.title}</span>
                <span className="refund-policy__accordion-icon">{openSection === index ? '−' : '+'}</span>
              </button>
              {openSection === index && (
                <div className="refund-policy__accordion-content">
                  <p>{section.content}</p>
                </div>
              )}
            </div>
          ))}
        </div>

<section className="refund-policy__section">
          <h2>📋 Eligibility Requirements</h2>
          <p>To be eligible for a refund, you must meet the following criteria:</p>
          <ul className="refund-policy__list">
            <li>Request made within 30 days of original purchase</li>
            <li>Account in good standing with no violations of terms of service</li>
            <li>No excessive usage of the service during the refund period</li>
            <li>Proof of purchase (order confirmation email)</li>
          </ul>
        </section>

<section className="refund-policy__section">
          <h2>💳 Refund Timeline</h2>
          <p>Once your refund request is approved, please note the following timeline:</p>
          <ul className="refund-policy__list">
            <li><strong>Processing Time:</strong> 5-7 business days to process your request</li>
            <li><strong>Credit Card:</strong> 5-10 business days to reflect in your account</li>
            <li><strong>PayPal:</strong> 3-5 business days</li>
            <li><strong>Bank Transfer:</strong> 7-14 business days</li>
          </ul>
        </section>

<section className="refund-policy__section">
          <h2>🔄 Partial Refunds</h2>
          <p>For annual subscriptions canceled after 30 days, we offer pro-rated refunds based on the remaining months of your subscription. The refund amount is calculated as:</p>
          <ul className="refund-policy__list">
            <li>Total annual fee minus monthly rate for months used</li>
            <li>Minus any applicable processing fees</li>
            <li>Minus any promotional discounts received</li>
          </ul>
        </section>

<section className="refund-policy__section">
          <h2>❌ Refund Denials</h2>
          <p>Refund requests may be denied in the following circumstances:</p>
          <ul className="refund-policy__list">
            <li>Request made after 30 days from purchase date</li>
            <li>Violation of terms of service or abuse of the platform</li>
            <li>Previously received a refund for the same service</li>
            <li>Custom or customized services have been delivered</li>
          </ul>
        </section>

<section className="refund-policy__section">
          <h2>📧 Contact Us</h2>
          <p>If you have any questions about our refund policy, please contact us:</p>
          <div className="refund-policy__contact-card">
            <p><strong>📧 Email:</strong> support@beparagon.com</p>
            <p><strong>📞 Phone:</strong> 1-800-BEPARAGON</p>
            <p><strong>💬 Live Chat:</strong> Available 24/7 on our website</p>
          </div>
        </section>

<p className="refund-policy__last-updated">
          Last updated: {new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
        </p>
      </div>
    </div>
  );
}

// ===== ABOUT US PAGE =====
function AboutUs() {
  const [counters, setCounters] = useState({ clients: 0, properties: 0, deals: 0, years: 0 })
  const [hasAnimated, setHasAnimated] = useState(false)
  
  useEffect(() => {
    if (hasAnimated) return
    const timer = setTimeout(() => {
      setCounters({ clients: 5000, properties: 15000, deals: 25000, years: 10 })
      setHasAnimated(true)
    }, 500)
    return () => clearTimeout(timer)
  }, [hasAnimated])

const teamMembers = [
    { name: 'John Smith', role: 'CEO & Founder', icon: '👨‍💼' },
    { name: 'Sarah Johnson', role: 'Chief Technology Officer', icon: '👩‍💻' },
    { name: 'Michael Brown', role: 'Head of Sales', icon: '👨‍💼' },
    { name: 'Emily Davis', role: 'Customer Success Lead', icon: '👩‍💼' },
  ]

const features = [
    { icon: '🏠', title: 'Property Management', desc: 'Manage unlimited property listings with ease' },
    { icon: '👥', title: 'Lead Tracking', desc: 'Track and convert leads efficiently' },
    { icon: '📈', title: 'Analytics', desc: 'Real-time insights into your business' },
    { icon: '🤖', title: 'Automation', desc: 'Automate repetitive tasks and workflows' },
    { icon: '📱', title: 'Mobile App', desc: 'Access your data from anywhere' },
    { icon: '🔒', title: 'Secure & Compliant', desc: 'Bank-level security and GDPR compliant' },
  ]

const timeline = [
    { year: '2014', title: 'Founded', desc: 'BEPARAGON was founded with a vision to revolutionize real estate CRM' },
    { year: '2016', title: 'First 1000 Clients', desc: 'Reached our first major milestone of 1000 active users' },
    { year: '2018', title: 'Mobile App Launch', desc: 'Launched our mobile app for iOS and Android' },
    { year: '2020', title: '50K Users', desc: 'Reached 50,000 active users milestone' },
    { year: '2023', title: 'Industry Leader', desc: 'Recognized as leading CRM in real estate industry' },
    { year: '2024', title: 'Global Expansion', desc: 'Expanded operations to serve clients worldwide' },
  ]
  return (
    <div className="about-us">
      <nav className="about-us__nav">
        <Link to="/" className="about-us__back">← Back to Home</Link>
      </nav>
      
      <div className="about-us__content">
        <h1 className="about-us__title">About BEPARAGON</h1>
        <p className="about-us__subtitle">Empowering Real Estate Professionals Since 2014</p>
        
        {/* Animated Stats */}
        <div className="about-us__stats">
          <div className="about-us__stat">
            <span className="about-us__stat-number">{counters.clients.toLocaleString()}+</span>
            <span className="about-us__stat-label">Happy Clients</span>
          </div>
          <div className="about-us__stat">
            <span className="about-us__stat-number">{counters.properties.toLocaleString()}+</span>
            <span className="about-us__stat-label">Properties Managed</span>
          </div>
          <div className="about-us__stat">
            <span className="about-us__stat-number">{counters.deals.toLocaleString()}+</span>
            <span className="about-us__stat-label">Deals Closed</span>
          </div>
          <div className="about-us__stat">
            <span className="about-us__stat-number">{counters.years}+</span>
            <span className="about-us__stat-label">Years Experience</span>
          </div>
        </div>
        
        {/* Features Grid */}
        <section className="about-us__section">
          <h2>🚀 What We Offer</h2>
          <div className="about-us__features-grid">
            {features.map((feature, index) => (
              <div key={index} className="about-us__feature-card" style={{animationDelay: `${index * 0.1}s`}}>
                <div className="about-us__feature-icon">{feature.icon}</div>
                <h3>{feature.title}</h3>
                <p>{feature.desc}</p>
              </div>
            ))}
          </div>
        </section>

<section className="about-us__section">
          <h2>Who We Are</h2>
          <p>
            BEPARAGON LLC is a leading real estate technology company dedicated to revolutionizing how real estate 
            professionals manage their businesses. We provide an all-in-one CRM platform that helps agents, brokers, 
            and teams streamline their operations and close deals faster.
          </p>
        </section>

<section className="about-us__section">
          <h2>Our Mission</h2>
          <p>
            Our mission is to empower real estate professionals with cutting-edge technology that simplifies lead 
            management, improves client relationships, and drives business growth. We believe that the right tools 
            can transform how real estate businesses operate.
          </p>
        </section>

<section className="about-us__section">
          <h2>What We Offer</h2>
          <ul>
            <li>Advanced Lead Management System</li>
            <li>Property Tracking & Inventory Management</li>
            <li>Automated Marketing Tools</li>
            <li>Client Relationship Management</li>
            <li>Analytics & Reporting Dashboard</li>
            <li>Team Collaboration Features</li>
          </ul>
        </section>

<section className="about-us__section">
          <h2>Why Choose BEPARAGON?</h2>
          <ul>
            <li>User-friendly interface designed for real estate professionals</li>
            <li>Comprehensive solution eliminating the need for multiple tools</li>
            <li>Real-time data synchronization across all devices</li>
            <li>Excellent customer support and training</li>
            <li>Affordable pricing plans for businesses of all sizes</li>
          </ul>
        </section>

<section className="about-us__section">
          <h2>👥 Our Team</h2>
          <div className="about-us__team-grid">
            {teamMembers.map((member, index) => (
              <div key={index} className="about-us__team-card">
                <div className="about-us__team-avatar">{member.icon}</div>
                <h3>{member.name}</h3>
                <p>{member.role}</p>
              </div>
            ))}
          </div>
        </section>

<section className="about-us__section">
          <h2>📅 Our Journey</h2>
          <div className="about-us__timeline">
            {timeline.map((item, index) => (
              <div key={index} className="about-us__timeline-item">
                <div className="about-us__timeline-year">{item.year}</div>
                <div className="about-us__timeline-content">
                  <h3>{item.title}</h3>
                  <p>{item.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </section>

<section className="about-us__section">
          <h2>Contact Us</h2>
          <p>We'd love to hear from you! Get in touch with us:</p>
          <p className="about-us__contact">
            <strong>Email:</strong> support@beparagon.to<br />
            <strong>Phone:</strong> (405) 462-7472<br />
            <strong>Address:</strong>  1001 S. MAIN STREET STE 500 KALISPELL, MT 59901
          </p>
        </section>

<p className="about-us__last-updated">
          Last updated: {new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' })}
        </p>
      </div>
    </div>
  );
}

// ===== MAIN APP =====
function App() {
  const [view, setView] = useState('home')
  const [user, setUser] = useState(null)
  const [showForgotPassword, setShowForgotPassword] = useState(false)
  const [initializing, setInitializing] = useState(true)

// Listen for auth state changes
  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (firebaseUser) => {
      if (firebaseUser) {
        // User is logged in, set the user state
        setUser({
          name: firebaseUser.displayName || firebaseUser.email.split('@')[0],
          email: firebaseUser.email,
          uid: firebaseUser.uid
        })
      } else {
        // User is not logged in
        setUser(null)
      }
      setInitializing(false)
    })

// Cleanup subscription
    return () => unsubscribe()
  }, [])

// Handle logout
  const handleLogout = async () => {
    try {
      const { signOut } = await import('firebase/auth')
      await signOut(auth)
      setUser(null)
      setView('home')
    } catch (error) {
      console.error('Logout error:', error)
    }
  }

if (initializing) {
    return (
      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
        <div>Loading...</div>
      </div>
    )
  }

if (view === 'login') return (
    <>
      <LoginPage 
        onLogin={u => { setUser(u); setView('dashboard') }} 
        onRegister={() => setView('register')} 
        onForgotPassword={() => setShowForgotPassword(true)}
        onBackToHome={() => setView('home')}
      />
      <ForgotPasswordModal 
        isOpen={showForgotPassword} 
        onClose={() => setShowForgotPassword(false)} 
        onBackToLogin={() => { setShowForgotPassword(false); }}
      />
    </>
  )
  if (view === 'register') return <RegisterPage onRegister={u => { setUser(u); setView('dashboard') }} onBackToLogin={() => setView('login')} />
  if (view === 'dashboard' && user) return <Dashboard user={user} onLogout={handleLogout} />

return (
    <Routes>
      <Route path="/login" element={
        <div className="login-page-wrapper">
          <LoginPage 
            onLogin={u => { setUser(u); setView('dashboard') }} 
            onRegister={() => setView('register')} 
            onForgotPassword={() => setShowForgotPassword(true)}
            onBackToHome={() => setView('home')}
          />
          <ForgotPasswordModal 
            isOpen={showForgotPassword} 
            onClose={() => setShowForgotPassword(false)} 
            onBackToLogin={() => { setShowForgotPassword(false); }}
          />
        </div>
      } />
      <Route path="/" element={
        <div className="app">
          <Header onLoginClick={() => setView('login')} user={user} onLogout={handleLogout} />
          <main>
            <Hero onSignUpClick={() => setView('login')} />
            <Features />
            <Services />
            <Statistics />
            <CTA />
          </main>
          <Footer />
        </div>
      } />
      <Route path="/privacy-policy" element={<PrivacyPolicy />} />
      <Route path="/terms-conditions" element={<TermsAndConditions />} />
      <Route path="/refund-policy" element={<RefundPolicy />} />
      <Route path="/about-us" element={<AboutUs />} />
    </Routes>
  )
}

export default App

geri dön