import React, { useState, useEffect, Suspense } from 'react';
import { 
  ShieldCheck, 
  Zap, 
  Target, 
  BarChart3, 
  Camera, 
  UploadCloud, 
  CheckCircle2, 
  ArrowRight, 
  Menu, 
  X, 
  Phone, 
  Mail, 
  Database,
  Lock,
  Clock,
  ShieldAlert,
  GraduationCap,
  Scale,
  Activity,
  Server,
  FileSearch,
  Share2,
  HardDrive,
  FileText,
  TrendingUp,
  Layout,
  Award,
  Loader2,
  ChevronRight,
  Search,
  ClipboardCheck
} from 'lucide-react';

/**
 * NSR STRATEGIC DESK - REFACTORED OPERATIONAL PLATFORM v1.4
 * SINGLE-FILE MODULAR ARCHITECTURE
 */

// --- 1. REUSABLE UI PRIMITIVES (Design System) ---

const Container = ({ children, className = "" }) => (
  <div className={`max-w-7xl mx-auto px-6 ${className}`}>
    {children}
  </div>
);

const SectionHeader = ({ badge, title, subtitle, centered = false }) => (
  <div className={`mb-16 ${centered ? 'text-center' : 'text-left'}`}>
    {badge && (
      <span className="text-emerald-500 font-black tracking-[0.3em] uppercase text-[10px] mb-4 block">
        {badge}
      </span>
    )}
    <h2 className="text-4xl md:text-5xl font-black tracking-tight italic uppercase leading-[0.9] mb-6">
      {title}
    </h2>
    {subtitle && (
      <p className="text-slate-400 text-lg max-w-2xl font-medium italic leading-relaxed">
        {subtitle}
      </p>
    )}
  </div>
);

const Card = ({ children, className = "", hover = true, accent = false }) => (
  <div className={`
    bg-slate-900/40 p-10 rounded-[2.5rem] border transition-all duration-500
    ${accent ? 'border-emerald-500 shadow-xl shadow-emerald-500/5' : 'border-slate-800/60'}
    ${hover ? 'hover:-translate-y-2 hover:border-emerald-500/30 hover:bg-slate-900/60' : ''}
    ${className}
  `}>
    {children}
  </div>
);

const Button = ({ children, variant = 'primary', className = "", ...props }) => {
  const variants = {
    primary: "bg-emerald-500 text-slate-950 hover:bg-emerald-400 shadow-emerald-500/20",
    secondary: "border border-slate-700 text-white hover:bg-slate-800",
    outline: "border border-emerald-500/30 text-emerald-500 hover:bg-emerald-500/10",
  };
  
  return (
    <button 
      className={`px-8 py-4 rounded-2xl font-black uppercase tracking-widest text-[10px] transition-all active:scale-95 flex items-center justify-center gap-3 ${variants[variant]} ${className}`}
      {...props}
    >
      {children}
    </button>
  );
};

// --- 2. PAGE COMPONENTS ---

const HomePage = ({ onNavigate }) => (
  <div className="animate-in fade-in duration-1000">
    <header className="pt-48 pb-32 relative overflow-hidden">
      <div className="absolute top-[-10%] left-[-10%] w-[40%] h-[40%] bg-emerald-500/10 blur-[120px] rounded-full" />
      <Container>
        <div className="max-w-5xl relative z-10">
          <SectionHeader 
            badge="Boutique Intake Operations"
            title={<>Outsourced FNOL & <br/><span className="text-emerald-500">Claim File Preparation.</span></>}
            subtitle="NSR provides a high-integrity front-end for insurers and MGAs. We don't just take messages; we deliver adjuster-ready files with 65-point documentation accuracy."
          />
          <div className="flex flex-col sm:flex-row gap-4">
            <Button onClick={() => onNavigate('tech')}>
              The Evidence Vault <ArrowRight size={16} />
            </Button>
            <Button variant="secondary" onClick={() => onNavigate('contact')}>
              Request Operations Review
            </Button>
          </div>
        </div>
      </Container>
    </header>

    {/* Capacity & Workflow Snapshot */}
    <section className="py-24 border-y border-slate-900 bg-slate-950/50">
      <Container>
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-12 items-center">
          <div className="lg:col-span-1">
            <h3 className="text-2xl font-black italic uppercase mb-4">Institutional <br/>Capacity</h3>
            <p className="text-slate-500 text-sm font-medium mb-6">Scaleable FNOL infrastructure designed for mid-market carriers and high-volume MGAs.</p>
            <div className="space-y-4">
               <div className="flex justify-between items-center p-4 bg-slate-900 rounded-xl border border-slate-800">
                  <span className="text-[10px] font-bold uppercase text-slate-400">Current Base</span>
                  <span className="text-emerald-500 font-black">150 FNOL / Day</span>
               </div>
               <div className="flex justify-between items-center p-4 bg-slate-900 rounded-xl border border-slate-800">
                  <span className="text-[10px] font-bold uppercase text-slate-400">Availability</span>
                  <span className="text-emerald-500 font-black">24/7/365 Duty Desk</span>
               </div>
            </div>
          </div>
          <div className="lg:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-6">
             <Card accent className="p-8">
                <ClipboardCheck className="text-emerald-500 mb-4" />
                <h4 className="font-bold text-lg mb-2 italic">The 65-Point Standard</h4>
                <p className="text-slate-400 text-xs leading-relaxed">Every intake follows a rigid data-collection protocol used by top-tier carriers to ensure subrogation and liability triggers are caught instantly.</p>
             </Card>
             <Card className="p-8">
                <Share2 className="text-blue-500 mb-4" />
                <h4 className="font-bold text-lg mb-2 italic">CMS Native Entry</h4>
                <p className="text-slate-400 text-xs leading-relaxed">Direct logging into Guidewire, FileTrac, or Snapsheet. No administrative cleanup required by your internal adjusting staff.</p>
             </Card>
          </div>
        </div>
      </Container>
    </section>
  </div>
);

const ServicesPage = () => (
  <div className="pt-40 pb-20 animate-in slide-in-from-bottom-4 duration-700">
    <Container>
      <SectionHeader 
        badge="Service Menu"
        title="High-Integrity Operations"
        subtitle="Specialized claims intake services that function as a seamless extension of your department."
      />
      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
        {[
          { title: 'FNOL Intake', icon: Activity, desc: 'High-detail reporting covering fact patterns, injury status, and point of impact.' },
          { title: 'File Preparation', icon: FileText, desc: 'Converting raw data into structured PDF summaries or direct system entries.' },
          { title: 'Evidence Capture', icon: Camera, desc: 'Secure portal links for instant collection of scene photos and police reports.' },
          { title: 'Document Indexing', icon: Database, desc: 'Labeling and sorting of all files per your specific carrier standards.' },
          { title: 'IA Dispatching', icon: TrendingUp, desc: 'Coordination and follow-up with your preferred field adjusting vendors.' },
          { title: 'CMS Data Entry', icon: Zap, desc: 'Real-time entry into your proprietary or industry-standard claims platform.' }
        ].map((s, i) => (
          <Card key={i} className="flex flex-col h-full">
            <s.icon className="text-emerald-500 mb-6" size={32} />
            <h3 className="text-xl font-black uppercase italic mb-4">{s.title}</h3>
            <p className="text-slate-400 text-sm leading-relaxed font-medium">{s.desc}</p>
          </Card>
        ))}
      </div>
    </Container>
  </div>
);

const TechnologyPage = () => {
  const [demoState, setDemoState] = useState('idle');
  
  const runDemo = () => {
    setDemoState('loading');
    setTimeout(() => setDemoState('done'), 1500);
  };

  return (
    <div className="pt-40 pb-32">
      <Container>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-20 items-center">
          <div>
            <SectionHeader 
              badge="Proprietary Triage"
              title="The Evidence Vault"
              subtitle="NSR provides a structured bridge between the scene of the loss and your repository."
            />
            <div className="space-y-6">
              {[
                { icon: Lock, t: 'AES-256 Bit Isolation', d: 'Data encrypted at rest and in transit.' },
                { icon: Server, t: 'Google Workspace Stack', d: 'SOC2-aligned North American data residency.' },
                { icon: Search, t: 'Metadata Indexing', d: 'Automatic scrub and label for every asset.' }
              ].map((item, i) => (
                <div key={i} className="flex gap-6 items-start">
                  <div className="w-12 h-12 bg-slate-900 border border-slate-800 rounded-xl flex items-center justify-center flex-shrink-0 text-emerald-500">
                    <item.icon size={20} />
                  </div>
                  <div>
                    <h4 className="font-bold text-white text-lg italic">{item.t}</h4>
                    <p className="text-slate-500 text-sm">{item.d}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>

          <div className="flex justify-center">
             <div className="w-full max-w-[400px] bg-[#121b2e] rounded-[3.5rem] p-10 border border-slate-800 shadow-2xl relative">
                <div className="text-center mb-10">
                   <h3 className="text-xl font-black italic mb-1">STRATEGIC DESK</h3>
                   <p className="text-[9px] font-bold text-emerald-500 uppercase tracking-widest">Evidence Portal v2.4</p>
                </div>
                
                {demoState === 'idle' && (
                  <div className="space-y-8 animate-in fade-in">
                    <div className="border-2 border-dashed border-slate-800 rounded-3xl p-12 bg-slate-950/40 flex flex-col items-center">
                       <UploadCloud size={48} className="text-slate-700 mb-4" />
                       <span className="text-[10px] font-bold text-slate-500 uppercase tracking-widest">Awaiting Evidence</span>
                    </div>
                    <Button className="w-full" onClick={runDemo}>Submit to Vault</Button>
                  </div>
                )}

                {demoState === 'loading' && (
                  <div className="py-20 text-center space-y-6">
                    <Loader2 className="animate-spin text-emerald-500 mx-auto" size={48} />
                    <p className="text-xs font-bold uppercase tracking-widest text-emerald-500 animate-pulse">Encrypting & Indexing...</p>
                  </div>
                )}

                {demoState === 'done' && (
                  <div className="py-12 text-center space-y-6 animate-in zoom-in">
                    <CheckCircle2 size={64} className="text-emerald-500 mx-auto" />
                    <h4 className="text-xl font-black uppercase italic">Indexed & Delivered</h4>
                    <button onClick={() => setDemoState('idle')} className="text-[10px] font-bold uppercase text-slate-500 underline underline-offset-8 decoration-slate-800 hover:text-white transition-colors">Reset Demo</button>
                  </div>
                )}
                
                <p className="mt-12 text-center text-[8px] text-slate-600 uppercase tracking-[0.4em] font-bold">Secure Operational Link</p>
             </div>
          </div>
        </div>
      </Container>
    </div>
  );
};

const CompliancePage = () => (
  <div className="pt-40 pb-32">
    <Container>
      <SectionHeader badge="Compliance & Governance" title="Operational Trust" centered />
      
      {/* NSR Operational Trust Seal */}
      <div className="max-w-3xl mx-auto mb-20 p-10 bg-gradient-to-br from-emerald-500/10 to-transparent border border-emerald-500/20 rounded-[3rem] flex flex-col md:flex-row items-center gap-10 shadow-2xl shadow-emerald-500/5 relative overflow-hidden group">
        <div className="absolute top-0 right-0 p-4 opacity-5 group-hover:rotate-12 transition-all">
          <ShieldCheck size={180} />
        </div>
        <div className="w-32 h-32 bg-emerald-500 text-slate-950 rounded-full flex items-center justify-center shadow-xl shadow-emerald-500/20 relative z-10">
          <Award size={64} strokeWidth={2.5} />
        </div>
        <div className="relative z-10">
          <h3 className="text-2xl font-black italic uppercase mb-2">The NSR Governance Standard</h3>
          <p className="text-xs font-bold text-emerald-500 uppercase tracking-widest mb-6">Verification: Carrier-Grade Quality Control</p>
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <div className="flex items-center gap-3 text-[10px] font-black text-slate-300 uppercase">
              <CheckCircle2 size={14} className="text-emerald-500" /> 65-Point Data Audit
            </div>
            <div className="flex items-center gap-3 text-[10px] font-black text-slate-300 uppercase">
              <CheckCircle2 size={14} className="text-emerald-500" /> AES-256 Storage
            </div>
            <div className="flex items-center gap-3 text-[10px] font-black text-slate-300 uppercase">
              <CheckCircle2 size={14} className="text-emerald-500" /> PIPEDA Privacy Verified
            </div>
            <div className="flex items-center gap-3 text-[10px] font-black text-slate-300 uppercase">
              <CheckCircle2 size={14} className="text-emerald-500" /> Admin Audit Logging
            </div>
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
        <Card hover={false} className="bg-slate-900/30">
          <h4 className="text-lg font-bold text-emerald-500 mb-6 uppercase italic">Data Privacy & Security</h4>
          <ul className="space-y-4 text-sm text-slate-400 font-medium">
            <li className="flex gap-4"><ShieldCheck size={18} className="text-emerald-500 flex-shrink-0" /> PIPEDA-Compliant Data Handling</li>
            <li className="flex gap-4"><Lock size={18} className="text-emerald-500 flex-shrink-0" /> AES-256 Encryption In Transit & At Rest</li>
            <li className="flex gap-4"><Clock size={18} className="text-emerald-500 flex-shrink-0" /> Controlled Access & Admin Audit Logs</li>
            <li className="flex gap-4"><Database size={18} className="text-emerald-500 flex-shrink-0" /> North American Residency (Google Workspace)</li>
          </ul>
        </Card>
        <Card hover={false} className="bg-slate-900/30">
          <h4 className="text-lg font-bold text-emerald-500 mb-6 uppercase italic">Compliance Architecture</h4>
          <ul className="space-y-4 text-sm text-slate-400 font-medium">
            <li className="flex gap-4"><ShieldAlert size={18} className="text-emerald-500 flex-shrink-0" /> SOC2-Compliant Cloud Infrastructure</li>
            <li className="flex gap-4"><Layout size={18} className="text-emerald-500 flex-shrink-0" /> Custom Data Retention per Carrier</li>
            <li className="flex gap-4"><Activity size={18} className="text-emerald-500 flex-shrink-0" /> 24/7/365 Secure Operations & Oversight</li>
            <li className="flex gap-4"><Server size={18} className="text-emerald-500 flex-shrink-0" /> Google Workspace Security Protocol</li>
          </ul>
        </Card>
      </div>
    </Container>
  </div>
);

const PricingPage = () => (
  <div className="pt-40 pb-32">
    <Container>
      <SectionHeader badge="Partner Plans" title="Operational Tiers" centered />
      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
        {[
          { name: 'Small Fleet', base: '150', fee: '75', cap: '5-20 claims /mo', features: ['24/7 Hotline Coverage', 'Evidence Link Delivery', 'Email Summary PDF', 'Manual Intake Desk'] },
          { name: 'Regional MGA', base: '450', fee: '55', cap: '30-80 claims /mo', features: ['Direct CMS Integration', 'Liability Mapping', 'Branded Greeting', 'Operations Audit'], accent: true },
          { name: 'Carrier Pilot', base: 'Custom', fee: 'Scale', cap: '100+ claims /mo', features: ['Dedicated Team', 'Custom Governance', 'IA Dispatching', 'API Integration'] }
        ].map((t, i) => (
          <Card key={i} accent={t.accent} className="flex flex-col h-full">
            <h3 className="text-2xl font-black uppercase italic mb-1">{t.name}</h3>
            <p className="text-emerald-500 text-[10px] font-black uppercase tracking-widest mb-8">{t.cap}</p>
            <div className="mb-10">
               <span className="text-4xl font-black italic">${t.base}</span>
               {t.base !== 'Custom' && <span className="text-slate-500 text-xs font-bold uppercase ml-2">/mo base</span>}
            </div>
            <div className="bg-slate-800/60 p-5 rounded-2xl border border-slate-700/50 mb-10 shadow-inner">
               <span className="text-emerald-500 font-black text-2xl italic">${t.fee}</span>
               <span className="text-[10px] font-bold text-slate-400 uppercase tracking-widest ml-2">per FNOL intake</span>
            </div>
            <ul className="space-y-4 flex-grow mb-12">
              {t.features.map((f, idx) => (
                <li key={idx} className="flex items-center gap-3 text-xs text-slate-300 font-medium">
                  <div className="w-1.5 h-1.5 bg-emerald-500 rounded-full" /> {f}
                </li>
              ))}
            </ul>
            <Button variant={t.accent ? 'primary' : 'secondary'} className="w-full">Select Plan</Button>
          </Card>
        ))}
      </div>
    </Container>
  </div>
);

const ContactPage = () => {
  const [formState, setFormState] = useState('idle'); // idle, sending, success

  const handleSubmit = (e) => {
    e.preventDefault();
    setFormState('sending');
    setTimeout(() => setFormState('success'), 1500);
  };

  if (formState === 'success') {
    return (
      <div className="pt-48 pb-32 animate-in fade-in duration-500">
        <Container className="text-center">
          <Card accent className="max-w-2xl mx-auto p-20">
            <CheckCircle2 size={80} className="text-emerald-500 mx-auto mb-10" />
            <h2 className="text-4xl font-black italic uppercase mb-6 leading-none">Inquiry Logged</h2>
            <p className="text-slate-400 text-lg font-medium leading-relaxed italic">Our operations desk will reach out within 2 business hours.</p>
          </Card>
        </Container>
      </div>
    );
  }

  return (
    <div className="pt-40 pb-32">
      <Container>
        <Card className="max-w-4xl mx-auto p-16 shadow-2xl relative overflow-hidden" hover={false}>
          <div className="absolute top-0 right-0 w-32 h-32 bg-emerald-500/5 blur-3xl rounded-full" />
          <SectionHeader 
            badge="Direct Intake" 
            title="Operational Inquiry" 
            subtitle="Schedule a 15-minute technical demo of our triage desk."
            centered
          />
          <form className="grid grid-cols-1 md:grid-cols-2 gap-8" onSubmit={handleSubmit}>
            <div className="space-y-2">
               <label className="text-[10px] font-black uppercase text-slate-500 ml-1">Operations Lead</label>
               <input required type="text" className="w-full bg-slate-950 border border-slate-800 rounded-2xl p-4 text-white focus:border-emerald-500 outline-none transition-all font-medium italic" placeholder="Full Name" />
            </div>
            <div className="space-y-2">
               <label className="text-[10px] font-black uppercase text-slate-500 ml-1">Company Email</label>
               <input required type="email" className="w-full bg-slate-950 border border-slate-800 rounded-2xl p-4 text-white focus:border-emerald-500 outline-none transition-all font-medium italic" placeholder="navigate@company.com" />
            </div>
            <div className="md:col-span-2 space-y-2">
               <label className="text-[10px] font-black uppercase text-slate-500 ml-1">Account Profile</label>
               <select className="w-full bg-slate-950 border border-slate-800 rounded-2xl p-4 text-white focus:border-emerald-500 outline-none transition-all cursor-pointer font-medium italic">
                  <option>US MGA / TPA / Fleet Operator</option>
                  <option>Insurance Carrier</option>
                  <option>Adjusting Firm</option>
               </select>
            </div>
            <div className="md:col-span-2 space-y-2">
               <label className="text-[10px] font-black uppercase text-slate-500 ml-1">Capacity Requirement</label>
               <textarea rows="4" className="w-full bg-slate-950 border border-slate-800 rounded-2xl p-4 text-white focus:border-emerald-500 outline-none transition-all resize-none font-medium italic" placeholder="Briefly describe your monthly claim volume and CMS needs..."></textarea>
            </div>
            <Button disabled={formState === 'sending'} className="md:col-span-2 w-full py-6 mt-4">
              {formState === 'sending' ? <Loader2 className="animate-spin" /> : "Request Desk Demo"}
            </Button>
          </form>
        </Card>
      </Container>
    </div>
  );
};

const AboutPage = () => (
  <div className="pt-40 pb-32 animate-in fade-in duration-1000">
    <Container>
      <div className="max-w-4xl mx-auto">
        <SectionHeader 
          badge="NSR Standard" 
          title="The Boutique Operations Model" 
          subtitle="Built by Canadian-trained claims professionals for the North American market."
        />
        <div className="space-y-12 text-xl text-slate-400 leading-relaxed font-medium italic">
          <p>
            NSR was founded to bridge a persistent gap in the insurance lifecycle: <span className="text-white underline decoration-emerald-500/30">the erosion of documentation quality in outsourced intake.</span>
          </p>
          <p>
            While major BPOs compete on low-cost labor, we compete on <span className="text-white font-black uppercase tracking-widest">Documentation Discipline.</span> Every intake is governed by a 65-point standard that ensures subrogation opportunities and liability indicators are identified during the very first notice.
          </p>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-8 pt-16 border-t border-slate-900">
            <div><div className="text-3xl font-black text-white italic">150+</div><p className="text-[10px] uppercase font-bold text-slate-500 tracking-widest mt-2">Daily Capacity</p></div>
            <div><div className="text-3xl font-black text-white italic">24/7</div><p className="text-[10px] uppercase font-bold text-slate-500 tracking-widest mt-2">Duty Desk</p></div>
            <div><div className="text-3xl font-black text-white italic">CMS</div><p className="text-[10px] uppercase font-bold text-slate-500 tracking-widest mt-2">Integrated</p></div>
            <div><div className="text-3xl font-black text-white italic">AES</div><p className="text-[10px] uppercase font-bold text-slate-500 tracking-widest mt-2">Secured Stack</p></div>
          </div>
        </div>
      </div>
    </Container>
  </div>
);

// --- 3. MAIN APP ORCHESTRATOR ---

const App = () => {
  const [activePage, setActivePage] = useState('home');
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [isScrolled, setIsScrolled] = useState(false);

  useEffect(() => {
    const handleScroll = () => setIsScrolled(window.scrollY > 50);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const navigateTo = (id) => {
    setActivePage(id);
    setMobileMenuOpen(false);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  const navLinks = [
    { name: 'Services', id: 'services' },
    { name: 'Technology', id: 'tech' },
    { name: 'Compliance', id: 'compliance' },
    { name: 'Pricing', id: 'pricing' },
    { name: 'About', id: 'about' }
  ];

  return (
    <div className="min-h-screen bg-slate-950 text-white font-sans selection:bg-emerald-500/30 selection:text-white">
      
      {/* NAVIGATION */}
      <nav className={`fixed top-0 w-full z-50 transition-all duration-500 ${isScrolled ? 'bg-slate-950/90 backdrop-blur-md border-b border-slate-900 py-3' : 'bg-transparent py-8'}`}>
        <Container className="flex justify-between items-center">
          <div className="flex items-center gap-3 cursor-pointer group" onClick={() => navigateTo('home')}>
            <div className="w-10 h-10 bg-emerald-500 rounded-lg flex items-center justify-center shadow-lg group-hover:rotate-6 transition-transform shadow-emerald-500/20">
              <ShieldCheck className="text-slate-950" size={24} strokeWidth={2.5} />
            </div>
            <div className="flex flex-col text-left">
              <span className="text-xl font-black tracking-tighter italic uppercase leading-none">NSR</span>
              <span className="text-[9px] font-bold tracking-[0.2em] text-emerald-500 uppercase leading-none mt-1">Strategic Desk</span>
            </div>
          </div>

          <div className="hidden lg:flex items-center gap-10">
            {navLinks.map(link => (
              <button 
                key={link.id} 
                onClick={() => navigateTo(link.id)}
                className={`text-[10px] font-black uppercase tracking-[0.2em] transition-colors ${activePage === link.id ? 'text-emerald-500 underline underline-offset-8 decoration-emerald-500/50' : 'text-slate-400 hover:text-white'}`}
              >
                {link.name}
              </button>
            ))}
            <Button onClick={() => navigateTo('contact')} className="px-6 py-3">Get Started</Button>
          </div>

          <button className="lg:hidden text-slate-300 p-2" onClick={() => setMobileMenuOpen(true)}>
            <Menu size={32} />
          </button>
        </Container>
      </nav>

      {/* MOBILE OVERLAY */}
      {mobileMenuOpen && (
        <div className="fixed inset-0 z-[60] bg-slate-950 flex flex-col items-center justify-center gap-10 p-10 animate-in fade-in duration-300">
          <button className="absolute top-8 right-8 text-slate-500" onClick={() => setMobileMenuOpen(false)}>
            <X size={48} />
          </button>
          {navLinks.map(link => (
            <button key={link.id} onClick={() => navigateTo(link.id)} className="text-4xl font-black uppercase italic tracking-tighter hover:text-emerald-500 transition-colors">{link.name}</button>
          ))}
          <Button onClick={() => navigateTo('contact')} className="w-full py-6 text-xl">Connect with Ops</Button>
        </div>
      )}

      {/* RENDER ACTIVE PAGE */}
      <Suspense fallback={<div className="pt-48 pb-32 text-center text-slate-500"><Loader2 className="animate-spin mx-auto mb-4" /> SECURING ASSETS...</div>}>
        {activePage === 'home' && <HomePage onNavigate={navigateTo} />}
        {activePage === 'services' && <ServicesPage />}
        {activePage === 'tech' && <TechnologyPage />}
        {activePage === 'compliance' && <CompliancePage />}
        {activePage === 'pricing' && <PricingPage />}
        {activePage === 'contact' && <ContactPage />}
        {activePage === 'about' && <AboutPage />}
      </Suspense>

      {/* FOOTER */}
      <footer className="bg-slate-950 border-t border-slate-900 pt-32 pb-20 mt-20">
        <Container>
          <div className="grid grid-cols-1 md:grid-cols-4 gap-16 pb-20 border-b border-slate-900">
            <div className="col-span-1 md:col-span-2">
              <div className="flex items-center gap-3 mb-8">
                <div className="w-8 h-8 bg-emerald-500 rounded flex items-center justify-center">
                  <ShieldCheck className="text-slate-950" size={20} />
                </div>
                <span className="text-xl font-black italic uppercase">NSR FNOL INTAKE OPERATIONS</span>
              </div>
              <p className="text-slate-500 max-w-sm mb-10 leading-relaxed font-medium italic">
                Boutique intake operations delivering carrier-grade claim files through structured triage and secure evidence capture.
              </p>
              <div className="flex gap-4">
                <div className="w-12 h-12 bg-slate-900 border border-slate-800 rounded-full flex items-center justify-center text-slate-500 hover:text-emerald-500 hover:border-emerald-500/30 transition-all cursor-pointer"><Mail size={20} /></div>
                <div className="w-12 h-12 bg-slate-900 border border-slate-800 rounded-full flex items-center justify-center text-slate-500 hover:text-emerald-500 hover:border-emerald-500/30 transition-all cursor-pointer"><Phone size={20} /></div>
              </div>
            </div>
            <div>
              <h4 className="font-black uppercase tracking-[0.3em] text-emerald-500 mb-8 text-[10px]">Duty Desk</h4>
              <ul className="space-y-4 text-slate-400 text-xs font-mono uppercase font-bold tracking-widest">
                <li className="hover:text-emerald-400 transition-colors">claimsdesk@nsrclaim.com</li>
                <li className="hover:text-emerald-400 transition-colors">fnol@nsrclaim.com</li>
                <li className="hover:text-emerald-400 transition-colors">fleetdesk@nsrclaim.com</li>
              </ul>
            </div>
            <div>
              <h4 className="font-black uppercase tracking-[0.3em] text-emerald-500 mb-8 text-[10px]">Infrastructure</h4>
              <ul className="space-y-4 text-slate-400 text-xs font-bold uppercase tracking-widest">
                <li>PIPEDA Privacy Standard</li>
                <li>CMS Native Hub</li>
                <li>AES-256 Bit Security</li>
                <li>Duty Desk 24/7/365</li>
              </ul>
            </div>
          </div>
          <div className="pt-10 space-y-6 text-center">
            <p className="text-[9px] text-slate-600 uppercase font-black tracking-[0.5em]">
              &copy; 2026 NSR Strategic Desk Canada | North American Claims Support Vendor
            </p>
            <p className="text-[8px] text-slate-700 max-w-3xl mx-auto leading-normal uppercase font-bold tracking-widest">
              System names referenced represent industry standard claims platforms. NSR provides operational compatibility with major CMS environments and is not officially affiliated with these platforms. Data handled via Google Workspace follows AES-256 encryption and PIPEDA-compliant policies.
            </p>
          </div>
        </Container>
      </footer>
    </div>
  );
};

export default App;