import React, { useState, useEffect, useRef } from 'react';
import { 
  Phone, ShieldCheck, Clock, FileText, Lock, CheckCircle, 
  Menu, X, ChevronRight, Quote, MapPin, Mail, ArrowRight, Shield, 
  Scale, FileSignature, Landmark, Star
} from 'lucide-react';

// --- DATA ---
const STATES = [
  "AL", "AK", "AZ", "AR", "CA", "CO", "CT", "DE", "FL", "GA", 
  "HI", "ID", "IL", "IN", "IA", "KS", "KY", "LA", "ME", "MD", 
  "MA", "MI", "MN", "MS", "MO", "MT", "NE", "NV", "NH", "NJ", 
  "NM", "NY", "NC", "ND", "OH", "OK", "OR", "PA", "RI", "SC", 
  "SD", "TN", "TX", "UT", "VT", "VA", "WA", "WV", "WI", "WY"
];

const DOC_TYPES = [
  "Contract Drafting/Review",
  "Creditor Defense Letter",
  "Estate Planning Document",
  "Litigation Support",
  "Tenant/Landlord Notice",
  "Cease & Desist Letter",
  "Other"
];

const PHONE_NUMBER = "(888) 988-6815";
const PHONE_LINK = "tel:+18889886815";

// --- NEXT-LEVEL CUSTOM STYLES & ANIMATIONS ---
const CustomStyles = () => (
  <style dangerouslySetInnerHTML={{__html: `
    :root {
      --brand-navy: #060B14;
      --brand-navy-light: #101A2E;
      --brand-navy-dark: #03060B;
      --brand-gold-light: #FBE6AB;
      --brand-gold: #C5A059;
      --brand-gold-dark: #8C6F36;
    }

    /* Core Brand Classes */
    .bg-brand-navy { background-color: var(--brand-navy); }
    .bg-brand-navy-light { background-color: var(--brand-navy-light); }
    .bg-brand-navy-dark { background-color: var(--brand-navy-dark); }
    .text-brand-navy { color: var(--brand-navy); }
    .text-brand-gold { color: var(--brand-gold); }
    .bg-brand-gold { background-color: var(--brand-gold); }

    /* Gradients & Glows */
    .brand-gradient-bg {
      background: linear-gradient(135deg, var(--brand-gold-light) 0%, var(--brand-gold) 50%, var(--brand-gold-dark) 100%);
    }
    .brand-gradient-text {
      background: linear-gradient(135deg, var(--brand-gold-light) 0%, var(--brand-gold) 50%, var(--brand-gold-dark) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .glow-effect {
      box-shadow: 0 0 40px rgba(197, 160, 89, 0.15);
    }
    .glow-effect:hover {
      box-shadow: 0 0 60px rgba(197, 160, 89, 0.3);
    }

    /* Premium Button */
    .btn-premium {
      background: linear-gradient(135deg, var(--brand-gold-light) 0%, var(--brand-gold) 40%, var(--brand-gold-dark) 100%);
      color: var(--brand-navy-dark);
      box-shadow: 0 4px 20px rgba(197, 160, 89, 0.25);
      transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
      position: relative;
      overflow: hidden;
      border: none;
      z-index: 1;
    }
    .btn-premium::before {
      content: '';
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      background: linear-gradient(135deg, var(--brand-gold) 0%, var(--brand-gold-light) 60%, var(--brand-gold) 100%);
      z-index: -1;
      transition: opacity 0.5s ease;
      opacity: 0;
    }
    .btn-premium:hover::before { opacity: 1; }
    .btn-premium:hover {
      box-shadow: 0 8px 30px rgba(197, 160, 89, 0.5);
      transform: translateY(-3px);
    }
    .btn-premium::after {
      content: '';
      position: absolute;
      top: -50%; left: -100%; width: 50%; height: 200%;
      background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
      transform: skewX(-25deg);
      animation: premiumShine 6s infinite;
      z-index: 2;
      pointer-events: none;
    }

    /* Keyframes */
    @keyframes premiumShine { 0% { left: -100%; } 15%, 100% { left: 200%; } }
    @keyframes float { 
      0%, 100% { transform: translateY(0px); } 
      50% { transform: translateY(-15px); } 
    }
    @keyframes float-reverse { 
      0%, 100% { transform: translateY(0px); } 
      50% { transform: translateY(15px); } 
    }
    @keyframes kenBurns {
      0% { transform: scale(1); }
      100% { transform: scale(1.1); }
    }
    @keyframes pulseGlow {
      0%, 100% { opacity: 0.4; transform: scale(1); }
      50% { opacity: 0.7; transform: scale(1.05); }
    }

    /* Animation Utility Classes */
    .animate-float { animation: float 6s ease-in-out infinite; }
    .animate-float-delayed { animation: float-reverse 7s ease-in-out infinite 1s; }
    .animate-ken-burns { animation: kenBurns 30s ease-out infinite alternate; }
    .ambient-orb {
      position: absolute;
      border-radius: 50%;
      filter: blur(80px);
      animation: pulseGlow 8s infinite alternate;
      z-index: 0;
      pointer-events: none;
    }

    /* Scroll Reveal System */
    .reveal { opacity: 0; transform: translateY(50px); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
    .reveal-left { opacity: 0; transform: translateX(-50px); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
    .reveal-right { opacity: 0; transform: translateX(50px); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
    .reveal-scale { opacity: 0; transform: scale(0.9); transition: all 1s cubic-bezier(0.16, 1, 0.3, 1); }
    
    .reveal.active, .reveal-left.active, .reveal-right.active, .reveal-scale.active {
      opacity: 1; transform: translate(0) scale(1);
    }

    .delay-100 { transition-delay: 100ms; }
    .delay-200 { transition-delay: 200ms; }
    .delay-300 { transition-delay: 300ms; }
    .delay-400 { transition-delay: 400ms; }
    
    /* Glassmorphism */
    .glass-panel {
      background: rgba(10, 17, 33, 0.65);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid rgba(197, 160, 89, 0.15);
    }
    .glass-panel-hover:hover {
      border: 1px solid rgba(197, 160, 89, 0.5);
      background: rgba(10, 17, 33, 0.85);
      transform: translateY(-4px);
      box-shadow: 0 15px 35px rgba(0,0,0,0.4);
    }

    .glass-card-light {
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(226, 232, 240, 0.8);
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    }

    /* Image Interactions */
    .image-hover-zoom { overflow: hidden; }
    .image-hover-zoom img { transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
    .image-hover-zoom:hover img { transform: scale(1.08); }
  `}} />
);

// --- HOOKS ---
const useScrollReveal = () => {
  useEffect(() => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('active');
        }
      });
    }, { threshold: 0.1, rootMargin: "0px 0px -50px 0px" });
    
    const elements = document.querySelectorAll('.reveal, .reveal-left, .reveal-right, .reveal-scale');
    elements.forEach(el => observer.observe(el));

    return () => observer.disconnect();
  }, []);
};

const useScrollProgress = () => {
  const [progress, setProgress] = useState(0);
  useEffect(() => {
    const handleScroll = () => {
      const totalScroll = document.documentElement.scrollTop;
      const windowHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
      const scroll = `${totalScroll / windowHeight * 100}`;
      setProgress(scroll);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);
  return progress;
};

// --- COMPONENTS ---
const LiveCounter = ({ end, duration = 2500, suffix = "", prefix = "" }) => {
  const [count, setCount] = useState(0);
  const [isVisible, setIsVisible] = useState(false);
  const ref = useRef(null);

  useEffect(() => {
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) setIsVisible(true);
    }, { threshold: 0.5 });
    if (ref.current) observer.observe(ref.current);
    return () => observer.disconnect();
  }, []);

  useEffect(() => {
    if (!isVisible) return;
    let start = 0;
    const increment = end / (duration / 16);
    const timer = setInterval(() => {
      start += increment;
      if (start >= end) {
        setCount(end);
        clearInterval(timer);
      } else {
        setCount(Math.floor(start));
      }
    }, 16);
    return () => clearInterval(timer);
  }, [isVisible, end, duration]);

  return <span ref={ref}>{prefix}{count.toLocaleString()}{suffix}</span>;
};

const OverlappingStats = () => (
  <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-30 -mt-20 md:-mt-32 mb-20">
    <div className="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6">
      {[
        { num: 12500, suf: "+", text: "Documents Prepared" },
        { num: 48, suf: "h", text: "Avg. Turnaround" },
        { num: 50, suf: "", text: "States Covered" },
        { num: 99, suf: "%", text: "Client Satisfaction" }
      ].map((stat, idx) => (
        <div key={idx} className={`glass-panel p-6 md:p-8 rounded-2xl text-center reveal delay-${idx * 100} glow-effect border-t border-t-brand-gold/40`}>
          <div className="text-4xl md:text-5xl font-extrabold brand-gradient-text mb-2 drop-shadow-md">
            <LiveCounter end={stat.num} suffix={stat.suf} />
          </div>
          <div className="text-brand-gold uppercase tracking-widest text-[9px] md:text-xs font-bold mt-2 opacity-90">
            {stat.text}
          </div>
        </div>
      ))}
    </div>
  </div>
);

const LeadForm = ({ onSuccess }) => {
  const [formData, setFormData] = useState({
    firstName: '', lastName: '', email: '', phone: '', state: '',
    docType: '', description: '', consent: false
  });
  const [error, setError] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleChange = (e) => {
    const { name, value, type, checked } = e.target;
    setFormData(prev => ({ ...prev, [name]: type === 'checkbox' ? checked : value }));
    setError('');
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (formData.state === 'OR') {
      setError('We do not provide services in your state at this time.');
      return;
    }
    if (!formData.consent) {
      setError('You must agree to the terms to proceed.');
      return;
    }

    setIsSubmitting(true);
    setTimeout(() => {
      setIsSubmitting(false);
      onSuccess();
    }, 1500);
  };

  return (
    <div className="glass-card-light rounded-3xl p-8 sm:p-12 relative overflow-hidden group border border-white/50">
      <div className="absolute top-0 left-0 w-full h-1.5 brand-gradient-bg"></div>
      
      <div className="text-center mb-10">
        <h3 className="text-3xl font-extrabold text-brand-navy mb-3 tracking-tight">Request Your Quote</h3>
        <p className="text-slate-500 font-medium text-lg">Professional documentation. Honest pricing.</p>
      </div>

      {error && (
        <div className="bg-red-50 text-red-700 p-4 rounded-xl text-sm mb-6 border border-red-200 flex items-start animate-fade-in-up">
          <Shield className="w-5 h-5 mr-3 mt-0.5 flex-shrink-0" />
          <span className="font-medium">{error}</span>
        </div>
      )}

      <form onSubmit={handleSubmit} className="space-y-6 relative z-10">
        <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
          <div>
            <label className="block text-xs font-bold text-slate-700 mb-2 uppercase tracking-wider">First Name *</label>
            <input required type="text" name="firstName" value={formData.firstName} onChange={handleChange} className="w-full px-5 py-4 bg-slate-50/50 border border-slate-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-[#C5A059] focus:border-[#C5A059] outline-none transition-all shadow-sm hover:border-[#C5A059]/30" />
          </div>
          <div>
            <label className="block text-xs font-bold text-slate-700 mb-2 uppercase tracking-wider">Last Name *</label>
            <input required type="text" name="lastName" value={formData.lastName} onChange={handleChange} className="w-full px-5 py-4 bg-slate-50/50 border border-slate-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-[#C5A059] focus:border-[#C5A059] outline-none transition-all shadow-sm hover:border-[#C5A059]/30" />
          </div>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
          <div>
            <label className="block text-xs font-bold text-slate-700 mb-2 uppercase tracking-wider">Email Address *</label>
            <input required type="email" name="email" value={formData.email} onChange={handleChange} className="w-full px-5 py-4 bg-slate-50/50 border border-slate-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-[#C5A059] focus:border-[#C5A059] outline-none transition-all shadow-sm hover:border-[#C5A059]/30" />
          </div>
          <div>
            <label className="block text-xs font-bold text-slate-700 mb-2 uppercase tracking-wider">Phone Number *</label>
            <input required type="tel" name="phone" placeholder="(555) 555-5555" value={formData.phone} onChange={handleChange} className="w-full px-5 py-4 bg-slate-50/50 border border-slate-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-[#C5A059] focus:border-[#C5A059] outline-none transition-all shadow-sm hover:border-[#C5A059]/30" />
          </div>
        </div>

        <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
          <div>
            <label className="block text-xs font-bold text-slate-700 mb-2 uppercase tracking-wider">State *</label>
            <select required name="state" value={formData.state} onChange={handleChange} className="w-full px-5 py-4 bg-slate-50/50 border border-slate-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-[#C5A059] focus:border-[#C5A059] outline-none transition-all appearance-none cursor-pointer shadow-sm hover:border-[#C5A059]/30">
              <option value="">Select State</option>
              {STATES.map(state => <option key={state} value={state}>{state}</option>)}
            </select>
          </div>
          <div>
            <label className="block text-xs font-bold text-slate-700 mb-2 uppercase tracking-wider">Document Type *</label>
            <select required name="docType" value={formData.docType} onChange={handleChange} className="w-full px-5 py-4 bg-slate-50/50 border border-slate-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-[#C5A059] focus:border-[#C5A059] outline-none transition-all appearance-none cursor-pointer shadow-sm hover:border-[#C5A059]/30">
              <option value="">Select Type</option>
              {DOC_TYPES.map(type => <option key={type} value={type}>{type}</option>)}
            </select>
          </div>
        </div>

        <div>
          <label className="block text-xs font-bold text-slate-700 mb-2 uppercase tracking-wider">Brief Description (Optional)</label>
          <textarea name="description" rows="3" maxLength="500" value={formData.description} onChange={handleChange} className="w-full px-5 py-4 bg-slate-50/50 border border-slate-200 rounded-xl focus:bg-white focus:ring-2 focus:ring-[#C5A059] focus:border-[#C5A059] outline-none transition-all resize-none shadow-sm hover:border-[#C5A059]/30"></textarea>
        </div>

        <div className="bg-slate-50/80 p-6 rounded-xl border border-slate-200 hover:border-[#C5A059]/40 transition-colors">
          <label className="flex items-start cursor-pointer group">
            <div className="relative flex items-center justify-center mt-0.5">
              <input required type="checkbox" name="consent" checked={formData.consent} onChange={handleChange} className="peer w-5 h-5 opacity-0 absolute cursor-pointer" />
              <div className="w-5 h-5 border-2 border-slate-300 rounded flex items-center justify-center peer-checked:bg-[#C5A059] peer-checked:border-[#C5A059] transition-colors shadow-sm">
                <CheckCircle className={`w-3.5 h-3.5 text-white ${formData.consent ? 'opacity-100' : 'opacity-0'} transition-opacity`} />
              </div>
            </div>
            <span className="ml-4 text-xs text-slate-500 leading-relaxed block group-hover:text-slate-700 transition-colors font-medium">
              By checking this box and clicking "Submit," I agree to the Terms of Service and Privacy Policy, and I authorize Cordoba Document Services to contact me via phone, SMS, and email. Message/data rates may apply. Reply STOP to cancel.
            </span>
          </label>
        </div>

        <button 
          type="submit" 
          disabled={isSubmitting}
          className="w-full btn-premium font-extrabold py-5 px-6 rounded-xl flex items-center justify-center text-lg mt-8 disabled:opacity-70 disabled:hover:translate-y-0"
        >
          {isSubmitting ? (
             <span className="flex items-center text-brand-navy-dark">
                <svg className="animate-spin -ml-1 mr-3 h-5 w-5 text-brand-navy-dark" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>
                PROCESSING SECURELY...
             </span>
          ) : (
            <span className="flex items-center text-brand-navy-dark">SUBMIT MY REQUEST <ArrowRight className="ml-2 w-5 h-5" /></span>
          )}
        </button>
        <div className="text-center mt-5 flex items-center justify-center text-xs font-bold text-slate-400 uppercase tracking-widest">
          <Lock className="w-3.5 h-3.5 mr-1.5 text-[#C5A059]" /> 256-bit Secure Encryption
        </div>
      </form>
    </div>
  );
};

// --- PAGES ---

const PageHome = ({ navigate }) => {
  useScrollReveal();
  
  return (
  <div className="bg-slate-50 min-h-screen">
    {/* ADVANCED HERO SECTION */}
    <div className="relative min-h-screen flex items-center pt-24 pb-32 overflow-hidden bg-brand-navy">
      {/* Cinematic Background */}
      <div className="absolute inset-0 z-0">
        <img 
          src="https://images.unsplash.com/photo-1589391886645-d51941baf7fb?q=80&w=2500&auto=format&fit=crop" 
          alt="Authoritative legal architecture" 
          className="w-full h-full object-cover object-center opacity-30 mix-blend-luminosity animate-ken-burns"
        />
        <div className="absolute inset-0 bg-gradient-to-r from-brand-navy-dark via-brand-navy/90 to-transparent"></div>
        <div className="absolute inset-0 bg-gradient-to-t from-brand-navy-dark via-transparent to-brand-navy-dark/80"></div>
        
        {/* Ambient Glowing Orbs */}
        <div className="ambient-orb bg-brand-gold/10 w-[500px] h-[500px] top-[-10%] left-[-10%]"></div>
        <div className="ambient-orb bg-[#4A6B99]/10 w-[600px] h-[600px] bottom-[-20%] right-[-10%] delay-700"></div>
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 w-full mt-10">
        <div className="grid lg:grid-cols-12 gap-12 items-center">
          
          {/* Left Content */}
          <div className="lg:col-span-7 text-left">
            <div className="reveal-scale inline-flex items-center px-4 py-2 rounded-full glass-panel mb-8 text-sm font-semibold text-brand-gold border-brand-gold/40 shadow-[0_0_20px_rgba(197,160,89,0.2)]">
               <ShieldCheck className="w-4 h-4 mr-2" /> Attorney-Reviewed Frameworks
            </div>
            
            <h1 className="reveal delay-100 text-5xl sm:text-6xl lg:text-7xl xl:text-8xl font-extrabold tracking-tight mb-6 text-white leading-[1.05]">
              Paperwork <br/><span className="brand-gradient-text">Done Right.</span>
            </h1>
            
            <h2 className="reveal delay-200 text-2xl sm:text-3xl lg:text-4xl text-slate-300 font-medium mb-8 leading-tight max-w-2xl border-l-4 border-brand-gold pl-6">
              Without the courtroom price tag.
            </h2>
            
            <p className="reveal delay-300 text-lg sm:text-xl text-slate-400 mb-12 max-w-2xl leading-relaxed">
              From contracts to creditor responses, our specialists help you get the paperwork you need — accurately, quickly, and affordably.
            </p>
            
            <div className="reveal delay-400 flex flex-col sm:flex-row gap-5">
              <button 
                onClick={() => navigate('quote')}
                className="btn-premium font-extrabold py-4 px-10 rounded-xl text-lg flex items-center justify-center uppercase tracking-wider"
              >
                Get Free Quote <ArrowRight className="w-5 h-5 ml-3" />
              </button>
              <a 
                href={PHONE_LINK} 
                className="glass-panel glass-panel-hover text-white font-bold py-4 px-10 rounded-xl transition-all duration-300 flex items-center justify-center text-lg"
              >
                <Phone className="w-5 h-5 mr-3 text-brand-gold" /> {PHONE_NUMBER}
              </a>
            </div>
          </div>

          {/* Right Content - Parallax Trust Elements */}
          <div className="hidden lg:block lg:col-span-5 relative h-full">
             <div className="absolute right-0 top-1/2 -translate-y-1/2 w-full max-w-md">
                
                {/* Floating Cards with subtle offsets */}
                <div className="glass-panel glass-panel-hover p-6 rounded-2xl mb-6 reveal-right delay-200 animate-float glow-effect border-brand-gold/30">
                  <div className="flex items-start">
                    <div className="w-14 h-14 rounded-xl bg-brand-gold/10 flex items-center justify-center flex-shrink-0 mr-5 border border-brand-gold/30">
                      <Clock className="w-7 h-7 text-brand-gold" />
                    </div>
                    <div>
                      <h4 className="text-white font-extrabold text-lg mb-1 tracking-wide">48-Hour Turnaround</h4>
                      <p className="text-slate-400 text-sm leading-relaxed">Most standard documents prepared and delivered within two business days.</p>
                    </div>
                  </div>
                </div>

                <div className="glass-panel glass-panel-hover p-6 rounded-2xl mb-6 reveal-right delay-300 animate-float-delayed transform -translate-x-12 glow-effect border-brand-gold/30">
                  <div className="flex items-start">
                    <div className="w-14 h-14 rounded-xl bg-brand-gold/10 flex items-center justify-center flex-shrink-0 mr-5 border border-brand-gold/30">
                      <Landmark className="w-7 h-7 text-brand-gold" />
                    </div>
                    <div>
                      <h4 className="text-white font-extrabold text-lg mb-1 tracking-wide">Flat-Rate Pricing</h4>
                      <p className="text-slate-400 text-sm leading-relaxed">No hourly billing. No surprise invoices. Know your exact costs upfront.</p>
                    </div>
                  </div>
                </div>

                <div className="glass-panel glass-panel-hover p-6 rounded-2xl reveal-right delay-400 animate-float glow-effect border-brand-gold/30">
                  <div className="flex items-start">
                    <div className="w-14 h-14 rounded-xl bg-brand-gold/10 flex items-center justify-center flex-shrink-0 mr-5 border border-brand-gold/30">
                      <Lock className="w-7 h-7 text-brand-gold" />
                    </div>
                    <div>
                      <h4 className="text-white font-extrabold text-lg mb-1 tracking-wide">100% Confidential</h4>
                      <p className="text-slate-400 text-sm leading-relaxed">Bank-grade encryption and strict privacy protocols protect your data.</p>
                    </div>
                  </div>
                </div>

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

    {/* OVERLAPPING LIVE STATS */}
    <OverlappingStats />

    {/* EXPERTISE PREVIEW (Split Layout) */}
    <div className="py-24 bg-slate-50 relative overflow-hidden">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <div className="text-center max-w-3xl mx-auto mb-20 reveal-scale">
          <h2 className="text-sm font-extrabold text-brand-gold uppercase tracking-widest mb-3">Our Expertise</h2>
          <h3 className="text-4xl md:text-6xl font-extrabold text-brand-navy mb-6 tracking-tight">Documents We Prepare</h3>
          <div className="w-24 h-1.5 brand-gradient-bg mx-auto rounded-full mb-6"></div>
          <p className="text-xl text-slate-600 leading-relaxed">Professional legal document preparation across multiple categories to protect your rights, your assets, and your business.</p>
        </div>

        <div className="space-y-8">
          {[
            { 
              title: "Creditor Defense & FDCPA", 
              desc: "Assert your rights against unfair collection practices. We draft debt validation requests, dispute letters, and formal responses to collection lawsuits.",
              img: "https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?q=80&w=800&auto=format&fit=crop"
            },
            { 
              title: "Contract Drafting & Review", 
              desc: "Lock in your agreements securely. We prepare employment contracts, independent contractor agreements, NDAs, and comprehensive service contracts.",
              img: "https://images.unsplash.com/photo-1600880292203-757bb62b4baf?q=80&w=800&auto=format&fit=crop"
            }
          ].map((service, idx) => (
            <div key={idx} className={`bg-white rounded-3xl shadow-[0_15px_40px_rgba(0,0,0,0.06)] border border-slate-100 overflow-hidden flex flex-col ${idx % 2 === 1 ? 'lg:flex-row-reverse' : 'lg:flex-row'} reveal`}>
              <div className="lg:w-1/2 h-80 lg:h-auto relative image-hover-zoom">
                <img src={service.img} alt={service.title} className="absolute inset-0 w-full h-full object-cover" />
                <div className="absolute inset-0 bg-brand-navy/5 mix-blend-multiply transition-colors duration-500 hover:bg-transparent"></div>
              </div>
              <div className="lg:w-1/2 p-10 md:p-16 flex flex-col justify-center">
                <div className="w-14 h-14 bg-[#C5A059]/10 rounded-2xl flex items-center justify-center mb-6 text-brand-gold">
                  <FileSignature className="w-7 h-7" />
                </div>
                <h3 className="text-3xl md:text-4xl font-extrabold text-brand-navy mb-5 tracking-tight">{service.title}</h3>
                <p className="text-slate-600 mb-8 text-xl leading-relaxed">{service.desc}</p>
                <button onClick={() => navigate('services')} className="text-brand-navy font-extrabold hover:text-brand-gold flex items-center group text-lg transition-colors uppercase tracking-wider text-sm w-fit">
                  View Service Details <ArrowRight className="w-5 h-5 ml-3 group-hover:translate-x-2 transition-transform" />
                </button>
              </div>
            </div>
          ))}
        </div>
        
        <div className="mt-16 text-center reveal delay-200">
          <button onClick={() => navigate('services')} className="bg-brand-navy text-white font-extrabold uppercase tracking-wider text-sm py-5 px-10 rounded-xl hover:bg-brand-navy-light transition-all hover:shadow-xl hover:-translate-y-1">
            Explore All Categories
          </button>
        </div>
      </div>
    </div>

    {/* THE PROCESS (Animated Steps) */}
    <div className="py-32 bg-brand-navy relative overflow-hidden">
       {/* Cinematic Background elements */}
       <div className="absolute top-0 right-0 -mr-40 -mt-40 w-96 h-96 rounded-full bg-brand-gold/10 blur-[100px] pointer-events-none"></div>
       <div className="absolute bottom-0 left-0 -ml-40 -mb-40 w-96 h-96 rounded-full bg-[#131E35] blur-[100px] pointer-events-none"></div>
       <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1589829085413-56de8ae18c73?q=80&w=2000')] bg-cover opacity-5 mix-blend-overlay"></div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
        <h2 className="text-sm font-extrabold text-brand-gold uppercase tracking-widest mb-3 reveal">The Process</h2>
        <h3 className="text-4xl md:text-6xl font-extrabold text-white mb-6 tracking-tight reveal delay-100">Three Simple Steps</h3>
        <div className="w-24 h-1.5 brand-gradient-bg mx-auto rounded-full mb-24 reveal delay-200"></div>

        <div className="grid md:grid-cols-3 gap-12 relative">
          {/* Animated Connector Line */}
          <div className="hidden md:block absolute top-12 left-[16.66%] right-[16.66%] h-0.5 bg-brand-navy-light z-0 reveal delay-300">
             <div className="absolute top-0 left-0 h-full brand-gradient-bg w-full origin-left animate-[pulse_4s_ease-in-out_infinite]"></div>
          </div>

          {[
            { step: "01", title: "Submit Request", desc: "Use our secure online portal to provide the details of the document you need drafted or reviewed." },
            { step: "02", title: "Specialist Review", desc: "A dedicated specialist reviews your intake, confirms the details, and provides a guaranteed flat-rate quote." },
            { step: "03", title: "Delivery", desc: "Your professionally prepared, attorney-framework documents are delivered securely within 48 hours." }
          ].map((item, idx) => (
            <div key={idx} className={`relative z-10 flex flex-col items-center group reveal-scale delay-${(idx+3)*100}`}>
              <div className="w-24 h-24 bg-brand-navy text-brand-gold rounded-full flex items-center justify-center text-3xl font-extrabold mb-8 border-4 border-brand-navy-light shadow-[0_0_30px_rgba(0,0,0,0.5)] group-hover:border-brand-gold group-hover:shadow-[0_0_40px_rgba(197,160,89,0.3)] transition-all duration-500 relative">
                {item.step}
                <div className="absolute inset-0 rounded-full border-2 border-brand-gold/0 group-hover:border-brand-gold/50 scale-110 group-hover:scale-125 transition-all duration-500 opacity-0 group-hover:opacity-100"></div>
              </div>
              <h3 className="text-3xl font-bold mb-4 text-white tracking-tight">{item.title}</h3>
              <p className="text-slate-400 leading-relaxed text-lg max-w-sm">{item.desc}</p>
            </div>
          ))}
        </div>
        
        <div className="mt-24 reveal delay-500">
           <button onClick={() => navigate('quote')} className="btn-premium font-extrabold py-5 px-14 rounded-xl text-xl inline-flex items-center uppercase tracking-wider">
              Start Your Request <ArrowRight className="w-6 h-6 ml-3"/>
           </button>
        </div>
      </div>
    </div>

    {/* TESTIMONIALS (Glass Grid) */}
    <div className="py-24 bg-slate-50 relative overflow-hidden">
      <div className="absolute top-0 left-0 w-full h-[500px] bg-brand-navy-light/5 skew-y-3 transform origin-top-left -z-10"></div>
      
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="text-center mb-20 reveal">
          <h2 className="text-sm font-extrabold text-brand-gold uppercase tracking-widest mb-3">Client Success</h2>
          <h3 className="text-4xl md:text-5xl font-extrabold text-brand-navy mb-6 tracking-tight">Trusted Nationwide</h3>
          <div className="w-24 h-1.5 brand-gradient-bg mx-auto rounded-full"></div>
        </div>

        <div className="grid md:grid-cols-3 gap-8">
          {[
            { quote: "I needed a demand letter drafted fast and Cordoba had it ready the next morning. Saved me hundreds compared to hiring an attorney outright.", author: "Maria R.", rating: 5 },
            { quote: "The process was simple. I filled out the form, they called me back within an hour, and three days later my documents were ready and perfect.", author: "James T.", rating: 5 },
            { quote: "Honest, professional, and affordable. They told me exactly what I needed and nothing I didn't. I'll definitely use them again.", author: "Denise K.", rating: 5 }
          ].map((test, idx) => (
            <div key={idx} className={`bg-white p-10 rounded-3xl shadow-[0_10px_40px_rgba(0,0,0,0.04)] border border-slate-100 relative group hover:-translate-y-3 hover:shadow-[0_20px_50px_rgba(0,0,0,0.08)] transition-all duration-500 reveal-up delay-${idx * 100}`}>
              <div className="flex mb-6 text-brand-gold">
                {[...Array(test.rating)].map((_, i) => <Star key={i} className="w-5 h-5 fill-current" />)}
              </div>
              <Quote className="w-16 h-16 text-slate-100 absolute top-8 right-8 group-hover:text-[#C5A059]/10 transition-colors duration-500" />
              <p className="text-slate-700 italic mb-10 relative z-10 text-lg leading-relaxed font-medium">"{test.quote}"</p>
              <div className="flex items-center border-t border-slate-100 pt-6 mt-auto">
                 <div className="w-12 h-12 rounded-full brand-gradient-bg flex items-center justify-center text-brand-navy-dark font-extrabold text-lg mr-4 shadow-md">{test.author.charAt(0)}</div>
                 <div>
                    <div className="font-extrabold text-brand-navy text-lg">{test.author}</div>
                    <div className="text-xs text-slate-400 font-bold uppercase tracking-widest mt-0.5">Verified Client</div>
                 </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </div>
  );
};

const PageQuote = ({ navigate }) => {
  useScrollReveal();
  return (
  <div className="bg-slate-50 min-h-screen py-24 relative overflow-hidden">
    <div className="absolute top-0 left-0 w-full h-[60vh] bg-brand-navy"></div>
    <div className="absolute top-0 left-0 w-full h-[60vh] bg-[url('https://images.unsplash.com/photo-1589391886645-d51941baf7fb?q=80&w=2000&auto=format&fit=crop')] bg-cover bg-center opacity-20 mix-blend-luminosity"></div>
    <div className="absolute top-0 left-0 w-full h-[60vh] bg-gradient-to-b from-transparent to-slate-50"></div>
    
    <div className="max-w-5xl mx-auto px-4 relative z-10">
      <div className="text-center mb-16 reveal-scale">
        <div className="w-16 h-16 brand-gradient-bg rounded-2xl flex items-center justify-center mx-auto mb-8 shadow-[0_0_30px_rgba(197,160,89,0.3)]">
          <FileText className="w-8 h-8 text-brand-navy-dark" />
        </div>
        <h1 className="text-5xl md:text-7xl font-extrabold text-white mb-6 tracking-tight drop-shadow-lg">Secure Quote Portal</h1>
        <p className="text-xl md:text-2xl text-slate-300 max-w-2xl mx-auto font-medium">Provide your details below. A specialist will review your needs and provide a guaranteed flat-rate quote.</p>
      </div>

      <div className="reveal delay-200 max-w-4xl mx-auto">
        <LeadForm onSuccess={() => navigate('thank-you')} />
      </div>

      <div className="mt-16 text-center reveal delay-400 glass-panel-hover p-8 rounded-3xl border border-slate-200 bg-white/50 backdrop-blur-md max-w-2xl mx-auto">
         <p className="text-slate-500 font-bold uppercase tracking-widest text-sm mb-3">Need Immediate Assistance?</p>
         <a href={PHONE_LINK} className="inline-flex items-center text-3xl font-extrabold text-brand-navy hover:text-brand-gold transition-colors">
           <Phone className="w-8 h-8 mr-4 text-brand-gold" /> {PHONE_NUMBER}
         </a>
      </div>
    </div>
  </div>
  );
};

const PageServices = ({ navigate }) => {
  useScrollReveal();
  
  return (
  <div className="bg-slate-50 min-h-screen pb-32">
    <div className="bg-brand-navy text-white py-32 relative overflow-hidden">
      <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1450101499163-c8848c66ca85?q=80&w=2500&auto=format&fit=crop')] bg-cover bg-center opacity-20 mix-blend-luminosity animate-ken-burns"></div>
      <div className="absolute inset-0 bg-gradient-to-t from-slate-50 to-transparent"></div>
      
      <div className="max-w-4xl mx-auto px-4 relative z-10 text-center reveal-scale">
        <h1 className="text-5xl md:text-7xl font-extrabold mb-6 tracking-tight text-white drop-shadow-xl">Our Expertise</h1>
        <p className="text-2xl text-slate-300 mb-12 max-w-3xl mx-auto font-medium">Law-firm grade document preparation across every major category. Flat rates, zero surprises.</p>
      </div>
    </div>

    <div className="max-w-7xl mx-auto px-4 relative z-20 -mt-16 space-y-16">
      {[
        {
          title: "Creditor Defense & FDCPA",
          desc: "When creditors cross the line, the right paperwork makes all the difference. We build documents to assert your rights under the Fair Debt Collection Practices Act and state laws.",
          list: ["Debt validation letters", "Dispute letters to credit bureaus", "Cease-and-desist letters to collectors", "Responses to collection lawsuits", "FDCPA violation complaint drafts"],
          img: "https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?q=80&w=1000&auto=format&fit=crop"
        },
        {
          title: "Contract Drafting & Review",
          desc: "Whether you're signing a contract or writing one, language is everything. We cover the operational, employment, and service agreements businesses and individuals need most.",
          list: ["Employment / Contractor agreements", "Service and vendor contracts", "Non-disclosure agreements (NDAs)", "Purchase and sale agreements", "Contract redlines & revisions"],
          img: "https://images.unsplash.com/photo-1600880292203-757bb62b4baf?q=80&w=1000&auto=format&fit=crop"
        },
        {
          title: "Estate Planning Frameworks",
          desc: "Protecting your legacy starts with the right paperwork. Get peace of mind with our attorney-reviewed estate planning document frameworks, customized to your state.",
          list: ["Simple wills", "Durable powers of attorney", "Healthcare directives / living wills", "HIPAA authorizations", "Beneficiary designation forms"],
          img: "https://images.unsplash.com/photo-1532094349884-543bc11b234d?q=80&w=1000&auto=format&fit=crop"
        },
        {
          title: "Litigation Support Drafting",
          desc: "Facing a lawsuit or preparing to file one? Proper formatting and accurate templates can make or break your case. We provide the structural drafting support you need.",
          list: ["Responses to civil complaints", "Motion templates", "Discovery requests and responses", "Affidavits and declarations", "Settlement demand letters"],
          img: "https://images.unsplash.com/photo-1589829085413-56de8ae18c73?q=80&w=1000&auto=format&fit=crop"
        }
      ].map((service, idx) => (
        <div key={idx} className={`bg-white rounded-[2.5rem] shadow-[0_20px_50px_rgba(0,0,0,0.06)] border border-slate-100 hover:border-brand-gold/40 transition-all duration-500 overflow-hidden flex flex-col ${idx % 2 === 1 ? 'lg:flex-row-reverse' : 'lg:flex-row'} reveal`}>
          <div className="lg:w-5/12 h-80 lg:h-auto relative image-hover-zoom">
            <img src={service.img} alt={service.title} className="absolute inset-0 w-full h-full object-cover" />
            <div className="absolute inset-0 bg-brand-navy/10 mix-blend-multiply transition-opacity duration-500 hover:opacity-0"></div>
          </div>
          <div className="lg:w-7/12 p-10 md:p-16 lg:p-20 flex flex-col justify-center">
            <h2 className="text-3xl md:text-5xl font-extrabold text-brand-navy mb-6 tracking-tight">{service.title}</h2>
            <p className="text-slate-600 mb-10 text-xl leading-relaxed">{service.desc}</p>
            <div className="bg-slate-50/80 p-8 md:p-10 rounded-3xl border border-slate-100">
              <h4 className="font-extrabold text-brand-navy mb-6 uppercase tracking-widest text-sm flex items-center">
                 <ShieldCheck className="w-5 h-5 text-brand-gold mr-3" /> Core Documents Prepared:
              </h4>
              <ul className="grid sm:grid-cols-2 gap-y-4 gap-x-6">
                {service.list.map((item, i) => (
                  <li key={i} className="flex items-start text-slate-700 font-medium text-lg">
                    <CheckCircle className="w-6 h-6 text-brand-gold mr-3 shrink-0 mt-0.5" />
                    <span className="leading-tight">{item}</span>
                  </li>
                ))}
              </ul>
            </div>
            <button onClick={() => navigate('quote')} className="mt-10 btn-premium font-extrabold uppercase tracking-wider text-sm py-4 px-8 rounded-xl w-fit flex items-center">
              Request Flat-Rate Quote <ArrowRight className="w-5 h-5 ml-3" />
            </button>
          </div>
        </div>
      ))}
      
      <div className="brand-gradient-bg p-12 md:p-24 rounded-[3rem] text-center shadow-2xl mt-32 relative overflow-hidden reveal-scale border border-brand-gold-light">
        <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1589391886645-d51941baf7fb?q=80&w=2000&auto=format&fit=crop')] opacity-10 mix-blend-multiply bg-cover"></div>
        <div className="relative z-10">
           <h2 className="text-4xl md:text-6xl font-extrabold text-brand-navy-dark mb-6 tracking-tight drop-shadow-sm">Don't See What You Need?</h2>
           <p className="text-brand-navy-dark/80 mb-12 max-w-2xl mx-auto text-2xl font-medium">We prepare many more document types than we can list here. If a specialist can draft it, we can probably help.</p>
           <button onClick={() => navigate('quote')} className="bg-brand-navy hover:bg-brand-navy-dark text-white font-extrabold py-5 px-14 rounded-xl transition-all hover:shadow-2xl hover:-translate-y-2 text-xl uppercase tracking-wider shadow-lg">
             Tell Us What You Need
           </button>
        </div>
      </div>
    </div>
  </div>
  );
};

const PageAbout = ({ navigate }) => {
  useScrollReveal();
  
  return (
  <div className="bg-slate-50 min-h-screen pb-32">
    <div className="bg-brand-navy text-white py-32 relative overflow-hidden">
      <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1497366216548-37526070297c?q=80&w=2500&auto=format&fit=crop')] bg-cover bg-center opacity-20 mix-blend-luminosity animate-ken-burns"></div>
      <div className="absolute inset-0 bg-gradient-to-t from-slate-50 to-transparent"></div>
      
      <div className="max-w-4xl mx-auto px-4 relative z-10 text-center reveal-scale">
        <h1 className="text-5xl md:text-7xl font-extrabold mb-6 tracking-tight text-white drop-shadow-xl">Our Identity</h1>
        <p className="text-2xl text-slate-300 font-medium">Professional paperwork, stripped of the courtroom premium.</p>
      </div>
    </div>

    <div className="max-w-7xl mx-auto px-4 relative z-20 -mt-16 space-y-24">
      
      <section className="bg-white rounded-[3rem] shadow-2xl border border-slate-100 overflow-hidden flex flex-col lg:flex-row reveal">
        <div className="lg:w-1/2 h-[500px] lg:h-auto relative image-hover-zoom">
          <img src="https://images.unsplash.com/photo-1450101499163-c8848c66ca85?q=80&w=1500&auto=format&fit=crop" alt="Cordoba Professional Office" className="absolute inset-0 w-full h-full object-cover" />
          <div className="absolute inset-0 bg-brand-navy/10 mix-blend-multiply"></div>
        </div>
        <div className="lg:w-1/2 p-12 md:p-20 flex flex-col justify-center">
          <h2 className="text-sm font-extrabold text-brand-gold uppercase tracking-widest mb-4">Our Origin Story</h2>
          <h3 className="text-4xl md:text-5xl font-extrabold text-brand-navy mb-8 tracking-tight">Access to Proper Paperwork Should Be Universal.</h3>
          <div className="prose prose-xl text-slate-600 max-w-none space-y-6 leading-relaxed font-medium">
            <p>Cordoba Document Services was built on a simple idea: not every legal form requires an attorney on retainer. The paperwork people need shouldn't require paying $300 an hour.</p>
            <p>We are a dedicated document preparation service. Our team works with experienced legal professionals to build document frameworks that follow best practices, current standards, and state-specific requirements. <strong className="text-brand-navy font-bold">We do not represent clients in court and we do not provide legal advice</strong> — we prepare the documents you need, professionally and affordably.</p>
            <p>For the vast majority of our clients, that's exactly what they need: the right document, formatted correctly, delivered fast, at a flat price that makes sense.</p>
          </div>
        </div>
      </section>

      <section className="grid lg:grid-cols-3 gap-8">
        <div className="lg:col-span-3 text-center mb-10 reveal">
          <h2 className="text-sm font-extrabold text-brand-gold uppercase tracking-widest mb-3">Our Core Pillars</h2>
          <h3 className="text-4xl md:text-5xl font-extrabold text-brand-navy tracking-tight">The Cordoba Standard</h3>
        </div>
        
        {[
          { icon: Scale, title: "Comprehensive Focus", desc: "Every request is different. We take the time to understand exactly what you need before drafting a single page, ensuring your documents match your exact situation." },
          { icon: Shield, title: "Compassionate Service", desc: "Many clients come to us during stressful moments—facing evictions, debt, or complex contracts. We treat every client with profound respect and absolute discretion." },
          { icon: CheckCircle, title: "Unwavering Commitment", desc: "We stand entirely behind every document we prepare. If something needs to be revised, clarified, or formatted differently, we make it right without question." }
        ].map((pillar, idx) => (
          <div key={idx} className={`bg-white p-12 rounded-[2.5rem] shadow-xl border border-slate-100 text-center hover:-translate-y-3 hover:shadow-2xl hover:border-brand-gold/30 transition-all duration-500 reveal delay-${(idx+1)*100} group`}>
            <div className="w-20 h-20 bg-brand-navy/5 rounded-[1.5rem] flex items-center justify-center mx-auto mb-8 text-brand-gold group-hover:bg-brand-gold group-hover:text-brand-navy-dark transition-colors duration-500">
               <pillar.icon className="w-10 h-10" />
            </div>
            <h3 className="text-3xl font-extrabold text-brand-navy mb-5 tracking-tight">{pillar.title}</h3>
            <p className="text-slate-600 text-lg leading-relaxed">{pillar.desc}</p>
          </div>
        ))}
      </section>

      <section className="border-l-[6px] border-brand-gold pl-10 py-8 bg-white rounded-r-[3rem] shadow-lg reveal">
        <h2 className="text-sm font-extrabold text-brand-gold uppercase tracking-widest mb-3">Important Legal Disclosure</h2>
        <h3 className="text-3xl font-extrabold text-brand-navy mb-5 tracking-tight">What We Are — And What We Aren't</h3>
        <p className="text-slate-700 text-xl leading-relaxed font-medium">Cordoba Document Services is a legal document preparation service. <strong className="text-brand-navy font-extrabold bg-brand-gold/20 px-2 py-1 rounded">We are not a law firm.</strong> Our specialists prepare documents based exclusively on your instructions and established legal frameworks. If your situation requires legal representation, strategic counsel, or legal advice, we will tell you honestly and highly recommend you consult a licensed attorney in your jurisdiction.</p>
      </section>
      
    </div>
  </div>
  );
};

const PageContact = ({ navigate }) => {
  useScrollReveal();
  
  return (
  <div className="bg-slate-50 min-h-screen pb-32">
    <div className="bg-brand-navy text-white py-32 text-center relative overflow-hidden">
      <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1577415124269-fc1140a69e91?q=80&w=2500&auto=format&fit=crop')] bg-cover bg-center opacity-20 mix-blend-luminosity animate-ken-burns"></div>
      <div className="absolute inset-0 bg-gradient-to-t from-slate-50 to-transparent"></div>

      <div className="max-w-4xl mx-auto px-4 relative z-10 reveal-scale">
        <h1 className="text-5xl md:text-7xl font-extrabold mb-6 tracking-tight drop-shadow-xl">Let's Connect</h1>
        <p className="text-2xl text-slate-300 font-medium">Have a question? Ready to start? We're standing by.</p>
      </div>
    </div>

    <div className="max-w-7xl mx-auto px-4 relative z-20 -mt-16">
      <div className="grid lg:grid-cols-12 gap-8 items-stretch reveal">
        
        {/* Contact Info Grid */}
        <div className="lg:col-span-5 grid gap-8">
          <div className="bg-white p-10 rounded-[2.5rem] shadow-xl border border-slate-100 hover:-translate-y-2 transition-transform duration-500 group">
             <div className="w-16 h-16 brand-gradient-bg text-brand-navy-dark rounded-[1.5rem] flex items-center justify-center mb-6 shadow-lg">
               <Phone className="w-8 h-8" />
             </div>
             <h3 className="text-sm font-extrabold text-slate-400 uppercase tracking-widest mb-2">Direct Phone</h3>
             <a href={PHONE_LINK} className="text-3xl font-extrabold text-brand-navy group-hover:text-brand-gold transition-colors block mb-3 tracking-tight">{PHONE_NUMBER}</a>
             <p className="text-slate-500 text-lg font-medium">Mon – Fri, 9am – 6pm ET</p>
          </div>

          <div className="bg-white p-10 rounded-[2.5rem] shadow-xl border border-slate-100 hover:-translate-y-2 transition-transform duration-500 group">
             <div className="w-16 h-16 brand-gradient-bg text-brand-navy-dark rounded-[1.5rem] flex items-center justify-center mb-6 shadow-lg">
               <Mail className="w-8 h-8" />
             </div>
             <h3 className="text-sm font-extrabold text-slate-400 uppercase tracking-widest mb-2">Email Support</h3>
             <a href="mailto:info@cordobadocprep.com" className="text-2xl md:text-3xl font-extrabold text-brand-navy group-hover:text-brand-gold transition-colors block mb-3 tracking-tight">info@cordobadocprep.com</a>
             <p className="text-slate-500 text-lg font-medium">Response within 1 business day.</p>
          </div>
          
          <div className="bg-white p-10 rounded-[2.5rem] shadow-xl border border-slate-100 hover:-translate-y-2 transition-transform duration-500 group">
             <div className="w-16 h-16 brand-gradient-bg text-brand-navy-dark rounded-[1.5rem] flex items-center justify-center mb-6 shadow-lg">
               <MapPin className="w-8 h-8" />
             </div>
             <h3 className="text-sm font-extrabold text-slate-400 uppercase tracking-widest mb-2">Corporate Office</h3>
             <p className="text-2xl font-extrabold text-brand-navy tracking-tight leading-tight">102 NE 2nd Street<br/>Suite 237<br/>Boca Raton, FL 33432</p>
          </div>
        </div>

        {/* Large Image Panel */}
        <div className="lg:col-span-7 relative h-96 lg:h-full min-h-[500px] rounded-[3rem] overflow-hidden shadow-2xl image-hover-zoom">
           <img src="https://images.unsplash.com/photo-1497366754035-f200968a6e72?q=80&w=2000&auto=format&fit=crop" alt="Premium Office Space" className="absolute inset-0 w-full h-full object-cover" />
           <div className="absolute inset-0 bg-brand-navy/20 mix-blend-multiply"></div>
           <div className="absolute bottom-10 left-10 right-10 glass-panel p-8 rounded-3xl border-white/20">
              <h3 className="text-2xl font-extrabold text-white mb-2">Fast, Secure Processing.</h3>
              <p className="text-slate-300 font-medium">Ready to get started? Use our secure portal to receive your flat-rate quote immediately.</p>
              <button onClick={() => navigate('quote')} className="mt-6 btn-premium font-extrabold text-sm uppercase tracking-wider py-3 px-8 rounded-xl">
                 Open Quote Portal
              </button>
           </div>
        </div>
        
      </div>
    </div>
  </div>
);
};

const PageThankYou = ({ navigate }) => (
  <div className="animate-reveal min-h-[80vh] flex items-center justify-center bg-slate-50 py-32 px-4 relative">
    <div className="absolute inset-0 bg-[url('https://images.unsplash.com/photo-1589391886645-d51941baf7fb?q=80&w=2000&auto=format&fit=crop')] bg-cover bg-center opacity-5 mix-blend-luminosity"></div>
    <div className="max-w-3xl w-full bg-white rounded-[3rem] shadow-2xl p-16 text-center relative z-10 border border-slate-100">
      <div className="w-32 h-32 bg-green-50 text-green-600 rounded-full flex items-center justify-center mx-auto mb-10 border-8 border-green-100 shadow-inner">
        <CheckCircle className="w-16 h-16" />
      </div>
      <h1 className="text-5xl md:text-6xl font-extrabold text-brand-navy mb-6 tracking-tight">Request Received</h1>
      <h2 className="text-2xl text-slate-600 mb-12 font-medium">A specialist will contact you within one business day.</h2>
      
      <div className="bg-slate-50/80 p-10 rounded-3xl border border-slate-100 mb-12 text-left text-slate-600 leading-relaxed text-lg">
        <p className="mb-8">Thank you for reaching out to Cordoba Document Services. We've received your request securely and a document preparation specialist will review it shortly. Expect a call or email to discuss your needs and provide your guaranteed flat-rate quote.</p>
        <p className="font-extrabold text-brand-navy text-sm uppercase tracking-widest mb-3">Need to reach us sooner?</p>
        <p className="flex items-center text-xl">
           <Phone className="w-6 h-6 mr-3 text-brand-gold" />
           Call us directly at <a href={PHONE_LINK} className="text-brand-gold hover:text-brand-gold-dark font-extrabold transition-colors ml-2">{PHONE_NUMBER}</a>
        </p>
      </div>

      <button onClick={() => navigate('home')} className="btn-premium font-extrabold py-5 px-12 rounded-xl transition-all shadow-lg uppercase tracking-wider text-sm">
        Return to Homepage
      </button>
    </div>
  </div>
);

// Simple text pages (Privacy, Terms)
const PageLegalTemplate = ({ title, children }) => (
  <div className="animate-reveal py-32 px-4 bg-white min-h-screen">
    <div className="max-w-4xl mx-auto">
      <h1 className="text-5xl md:text-6xl font-extrabold text-brand-navy mb-12 pb-8 border-b-2 border-slate-100 tracking-tight">{title}</h1>
      <div className="prose prose-slate prose-xl max-w-none text-slate-600 font-medium">
        {children}
      </div>
    </div>
  </div>
);

const PagePrivacy = () => (
  <PageLegalTemplate title="Privacy Policy">
    <p><strong>Effective Date:</strong> January 1, 2026</p>
    <p>Cordoba Document Services ("we," "us," "our") respects your privacy. This Privacy Policy explains how we collect, use, and protect your information when you use our website.</p>
    
    <h3>Information We Collect</h3>
    <p>We collect information you provide directly, including name, email, phone number, state of residence, details about the documents you need prepared, and any form submissions.</p>
    <p>We also automatically collect IP address, browser type, referring URL, timestamp, and device information.</p>
    
    <h3>How We Use Your Information</h3>
    <ul>
      <li>Respond to your inquiry and provide a quote</li>
      <li>Prepare the documents you request</li>
      <li>Communicate with you about your order</li>
      <li>Send marketing communications (only with your consent)</li>
      <li>Comply with legal obligations</li>
    </ul>

    <h3>Information Sharing</h3>
    <p>We do not sell your personal information. We may share your information with service providers, legal professionals assisting with preparation, marketing partners (with consent), and law enforcement when required.</p>

    <h3>Your Rights</h3>
    <p>You have the right to access, correct, or delete your info, opt out of marketing, and withdraw consent. Contact info@cordobadocprep.com.</p>

    <h3>SMS/Text Messaging</h3>
    <p>By opting in to text messages, you authorize us to send you messages related to your inquiry and services. Message and data rates may apply. Message frequency varies. Reply STOP to unsubscribe or HELP for help.</p>
  </PageLegalTemplate>
);

const PageTerms = () => (
  <PageLegalTemplate title="Terms of Service">
    <p><strong>Effective Date:</strong> January 1, 2026</p>
    <p>By using this website and our services, you agree to these Terms of Service.</p>

    <h3>Not a Law Firm</h3>
    <p>Cordoba Document Services is a legal document preparation service. <strong>We are not a law firm and we do not provide legal advice.</strong> Our specialists prepare documents based on your instructions and established legal frameworks. If your situation requires legal advice or representation, you should consult a licensed attorney in your state.</p>

    <h3>No Attorney-Client Relationship</h3>
    <p>Using our website or services does not create an attorney-client relationship. Communications with us are not protected by attorney-client privilege.</p>

    <h3>Service Limitations</h3>
    <p>We do not represent clients in court, provide legal advice, guarantee specific outcomes, provide debt management services in Oregon, or serve clients where restricted.</p>

    <h3>Payment and Refunds</h3>
    <p>All pricing is quoted before work begins. Payment is due before document delivery. Refund policies are communicated on a per-order basis.</p>

    <h3>Governing Law</h3>
    <p>These Terms are governed by the laws of the State of Florida, without regard to conflict of law principles.</p>
  </PageLegalTemplate>
);


// 3. Main Layout & Routing
export default function App() {
  const [currentPage, setCurrentPage] = useState('home');
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [scrolled, setScrolled] = useState(false);
  const scrollProgress = useScrollProgress();

  // Scroll handler for dynamic header
  useEffect(() => {
    const handleScroll = () => {
      setScrolled(window.scrollY > 50);
    };
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // Scroll to top on page change
  useEffect(() => {
    window.scrollTo(0, 0);
    setMobileMenuOpen(false);
  }, [currentPage]);

  const navigate = (page) => setCurrentPage(page);

  const navLinks = [
    { name: 'Home', id: 'home' },
    { name: 'Services', id: 'services' },
    { name: 'About', id: 'about' },
    { name: 'Contact', id: 'contact' },
  ];

  return (
    <div className="min-h-screen bg-slate-50 font-sans text-brand-navy flex flex-col selection:bg-[#C5A059] selection:text-brand-navy-dark">
      <CustomStyles />
      
      {/* GLOBAL SCROLL PROGRESS */}
      <div 
        className="fixed top-0 left-0 h-1 brand-gradient-bg z-[100] transition-all duration-75 ease-out shadow-[0_0_10px_rgba(197,160,89,0.8)]"
        style={{ width: `${scrollProgress}%` }}
      />

      {/* HEADER */}
      <header className={`fixed w-full top-0 z-50 transition-all duration-500 ${scrolled ? 'bg-brand-navy-dark/90 backdrop-blur-xl shadow-2xl py-3 border-b border-brand-gold/10' : 'bg-brand-navy py-5 border-b border-brand-navy-light/50'}`}>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-16 md:h-20">
            
            {/* Logo */}
            <div className="flex-shrink-0 cursor-pointer flex items-center group" onClick={() => navigate('home')}>
              <div className="w-12 h-12 md:w-14 md:h-14 brand-gradient-bg rounded-xl flex items-center justify-center mr-5 shadow-[0_0_20px_rgba(197,160,89,0.2)] group-hover:shadow-[0_0_30px_rgba(197,160,89,0.5)] group-hover:scale-105 transition-all duration-500">
                <FileText className="w-7 h-7 md:w-8 md:h-8 text-brand-navy-dark" />
              </div>
              <div className="flex flex-col">
                <span className="text-2xl md:text-3xl font-extrabold text-white tracking-tight leading-none uppercase">Cordoba</span>
                <span className="text-[10px] md:text-xs text-brand-gold font-bold tracking-[0.25em] uppercase mt-1.5 opacity-90">Document Services</span>
              </div>
            </div>

            {/* Desktop Nav */}
            <nav className="hidden lg:flex space-x-12 ml-10 flex-1">
              {navLinks.map(link => (
                <button 
                  key={link.id} 
                  onClick={() => navigate(link.id)}
                  className={`text-sm font-extrabold transition-colors uppercase tracking-widest relative py-2 ${currentPage === link.id ? 'text-brand-gold' : 'text-slate-400 hover:text-white'}`}
                >
                  {link.name}
                  {currentPage === link.id && (
                    <span className="absolute bottom-0 left-0 w-full h-[3px] bg-brand-gold rounded-t-full shadow-[0_0_15px_rgba(197,160,89,1)]"></span>
                  )}
                </button>
              ))}
            </nav>

            {/* Header Right CTA */}
            <div className="hidden md:flex items-center space-x-10">
              <div className="flex flex-col items-end">
                <span className="text-[10px] text-slate-500 font-extrabold uppercase tracking-widest mb-1">Consultation</span>
                <a href={PHONE_LINK} className="text-xl font-extrabold text-white hover:text-brand-gold transition-colors flex items-center">
                  <Phone className="w-5 h-5 mr-2 text-brand-gold" />
                  {PHONE_NUMBER}
                </a>
              </div>
              <button 
                onClick={() => navigate('quote')}
                className="btn-premium font-extrabold text-sm uppercase tracking-widest py-4 px-8 rounded-xl"
              >
                Get Quote
              </button>
            </div>

            {/* Mobile Menu Button */}
            <div className="lg:hidden flex items-center">
              <button onClick={() => setMobileMenuOpen(!mobileMenuOpen)} className="text-brand-gold hover:text-white focus:outline-none p-2 transition-colors">
                {mobileMenuOpen ? <X className="w-10 h-10" /> : <Menu className="w-10 h-10" />}
              </button>
            </div>
          </div>
        </div>

        {/* Mobile Menu Dropdown */}
        <div className={`lg:hidden absolute w-full left-0 bg-brand-navy border-t border-brand-navy-light shadow-2xl transition-all duration-500 overflow-hidden ${mobileMenuOpen ? 'max-h-[600px] opacity-100' : 'max-h-0 opacity-0'}`}>
          <div className="px-6 pt-6 pb-10 space-y-3">
            {navLinks.map(link => (
              <button 
                key={link.id} 
                onClick={() => navigate(link.id)}
                className={`block w-full text-left px-5 py-5 rounded-2xl text-xl font-extrabold tracking-widest uppercase ${currentPage === link.id ? 'bg-brand-navy-light/50 text-brand-gold border border-brand-gold/20' : 'text-slate-300 hover:text-white hover:bg-brand-navy-light/30'}`}
              >
                {link.name}
              </button>
            ))}
            <div className="mt-10 pt-10 border-t border-brand-navy-light/50 space-y-4">
              <a href={PHONE_LINK} className="flex items-center justify-center w-full px-5 py-5 bg-brand-navy-light text-white rounded-2xl font-extrabold text-xl border border-brand-navy-light hover:border-brand-gold/30 transition-colors shadow-lg">
                <Phone className="w-6 h-6 mr-4 text-brand-gold" /> {PHONE_NUMBER}
              </a>
              <button 
                onClick={() => navigate('quote')}
                className="w-full text-center btn-premium font-extrabold py-5 rounded-2xl text-xl uppercase tracking-widest"
              >
                Get Your Free Quote
              </button>
            </div>
          </div>
        </div>
      </header>

      {/* Spacer */}
      <div className="h-24 md:h-32 bg-brand-navy"></div>

      {/* MAIN CONTENT AREA */}
      <main className="flex-grow flex flex-col relative z-0 min-h-screen">
        {currentPage === 'home' && <PageHome navigate={navigate} />}
        {currentPage === 'quote' && <PageQuote navigate={navigate} />}
        {currentPage === 'services' && <PageServices navigate={navigate} />}
        {currentPage === 'about' && <PageAbout navigate={navigate} />}
        {currentPage === 'contact' && <PageContact navigate={navigate} />}
        {currentPage === 'privacy' && <PagePrivacy />}
        {currentPage === 'terms' && <PageTerms />}
        {currentPage === 'thank-you' && <PageThankYou navigate={navigate} />}
      </main>

      {/* FOOTER */}
      <footer className="bg-brand-navy-dark text-slate-400 py-20 lg:py-24 border-t-4 border-brand-gold relative z-10 overflow-hidden">
        <div className="absolute top-0 right-0 w-[800px] h-[800px] bg-brand-gold/5 blur-[120px] rounded-full pointer-events-none -mt-[400px] -mr-[400px]"></div>
        
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-16 lg:gap-12 mb-16">
            
            <div className="lg:col-span-4">
              <div className="flex items-center mb-8 cursor-pointer group" onClick={() => navigate('home')}>
                <div className="w-12 h-12 brand-gradient-bg rounded-xl flex items-center justify-center mr-4 opacity-90 group-hover:opacity-100 transition-all shadow-[0_0_15px_rgba(197,160,89,0.3)]">
                  <FileText className="w-7 h-7 text-brand-navy-dark" />
                </div>
                <span className="text-3xl font-extrabold text-white tracking-tight uppercase">Cordoba</span>
              </div>
              <p className="text-lg leading-relaxed mb-10 max-w-sm font-medium">Professional, attorney-reviewed legal document preparation. Without the courtroom price tag.</p>
              <div className="text-xs font-extrabold text-slate-500 mb-3 uppercase tracking-widest">Direct Line</div>
              <a href={PHONE_LINK} className="text-brand-gold hover:text-[#EFE0A1] font-extrabold text-2xl flex items-center transition-colors">
                <Phone className="w-6 h-6 mr-3" /> {PHONE_NUMBER}
              </a>
            </div>

            <div className="lg:col-span-3 lg:col-start-6">
              <h4 className="text-white font-extrabold mb-8 uppercase tracking-widest text-sm">Our Services</h4>
              <ul className="space-y-5 text-lg font-medium">
                <li><button onClick={() => navigate('services')} className="hover:text-brand-gold transition-colors">Creditor Defense Letters</button></li>
                <li><button onClick={() => navigate('services')} className="hover:text-brand-gold transition-colors">Contract Drafting</button></li>
                <li><button onClick={() => navigate('services')} className="hover:text-brand-gold transition-colors">Estate Planning</button></li>
                <li><button onClick={() => navigate('services')} className="hover:text-brand-gold transition-colors">Litigation Support</button></li>
              </ul>
            </div>

            <div className="lg:col-span-2">
              <h4 className="text-white font-extrabold mb-8 uppercase tracking-widest text-sm">Company</h4>
              <ul className="space-y-5 text-lg font-medium">
                <li><button onClick={() => navigate('home')} className="hover:text-brand-gold transition-colors">Home</button></li>
                <li><button onClick={() => navigate('about')} className="hover:text-brand-gold transition-colors">About Us</button></li>
                <li><button onClick={() => navigate('contact')} className="hover:text-brand-gold transition-colors">Contact</button></li>
                <li><button onClick={() => navigate('quote')} className="text-brand-gold hover:text-[#EFE0A1] transition-colors font-extrabold">Get Quote</button></li>
              </ul>
            </div>

            <div className="lg:col-span-2">
              <h4 className="text-white font-extrabold mb-8 uppercase tracking-widest text-sm">Legal</h4>
              <ul className="space-y-5 text-lg font-medium">
                <li><button onClick={() => navigate('privacy')} className="hover:text-brand-gold transition-colors">Privacy Policy</button></li>
                <li><button onClick={() => navigate('terms')} className="hover:text-brand-gold transition-colors">Terms of Service</button></li>
              </ul>
            </div>

          </div>
          
          {/* Disclaimer Box */}
          <div className="p-8 bg-brand-navy rounded-3xl border border-brand-navy-light text-base leading-relaxed text-slate-500 shadow-inner">
            <strong className="text-slate-400 font-extrabold uppercase tracking-widest text-sm mr-2">Disclaimer:</strong> Cordoba Document Services is a legal document preparation service. We are not a law firm, we do not employ attorneys to represent clients, and we do not provide legal advice, explanations, opinions, or recommendations about possible legal rights, remedies, defenses, options, selection of forms or strategies.
          </div>

          <div className="mt-12 pt-12 border-t border-brand-navy/50 flex flex-col md:flex-row justify-between items-center text-base font-medium">
            <p>&copy; {new Date().getFullYear()} Cordoba Document Services. All rights reserved.</p>
            <div className="flex space-x-10 mt-8 md:mt-0">
               <span className="flex items-center text-slate-400"><Lock className="w-5 h-5 mr-3 text-brand-gold/50"/> 256-bit Secure</span>
               <span className="flex items-center text-slate-400"><Shield className="w-5 h-5 mr-3 text-brand-gold/50"/> Confidential</span>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}