import React, { useState, useEffect } from 'react';
import { Shield, Lock, Activity, Globe, CheckCircle, AlertTriangle, Smartphone, Users, Zap, Search, Menu, X, Check, Server } from 'lucide-react';

// --- Components ---

const Button = ({ children, variant = 'primary', onClick, className = '' }) => {
  const baseStyle = "px-6 py-3 rounded-lg font-bold transition-all duration-300 transform hover:scale-105 active:scale-95";
  const styles = {
    primary: "bg-cyan-500 hover:bg-cyan-400 text-slate-900 shadow-lg shadow-cyan-500/50",
    secondary: "bg-slate-700 hover:bg-slate-600 text-white border border-slate-600",
    outline: "border-2 border-cyan-500 text-cyan-500 hover:bg-cyan-500/10",
    danger: "bg-red-500 hover:bg-red-400 text-white shadow-lg shadow-red-500/50"
  };
  return (
    <button onClick={onClick} className={`${baseStyle} ${styles[variant]} ${className}`}>
      {children}
    </button>
  );
};

const Card = ({ title, children, className = '' }) => (
  <div className={`bg-slate-800/50 backdrop-blur-md border border-slate-700 p-6 rounded-xl hover:border-cyan-500/30 transition-colors ${className}`}>
    {title && <h3 className="text-xl font-bold text-white mb-4">{title}</h3>}
    {children}
  </div>
);

// --- Main Application Component ---

export default function SafeGuardApp() {
  const [view, setView] = useState('landing'); // 'landing' or 'app'
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  // App Simulation State
  const [scanStatus, setScanStatus] = useState('idle'); // idle, scanning, secure, risk
  const [urlInput, setUrlInput] = useState('');
  const [activeTab, setActiveTab] = useState('dashboard');

  const handleScan = () => {
    if (!urlInput) return;
    setScanStatus('scanning');
    setTimeout(() => {
      // Mock logic: if url contains "danger", "hack", or "scam", it's bad.
      if (urlInput.toLowerCase().includes('scam') || urlInput.toLowerCase().includes('hack')) {
        setScanStatus('risk');
      } else {
        setScanStatus('secure');
      }
    }, 1500);
  };

  // --- Views ---

  const LandingPage = () => (
    <div className="min-h-screen bg-slate-900 text-slate-100 font-sans selection:bg-cyan-500 selection:text-slate-900">
      
      {/* Navbar */}
      <nav className="fixed w-full z-50 bg-slate-900/90 backdrop-blur-md border-b border-slate-800">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center h-20">
            <div className="flex items-center space-x-2 cursor-pointer" onClick={() => setView('landing')}>
              <Shield className="h-8 w-8 text-cyan-500" />
              <span className="text-2xl font-extrabold tracking-tight text-white">Safe<span className="text-cyan-500">Guard</span></span>
            </div>
            
            <div className="hidden md:flex items-center space-x-8">
              <a href="#features" className="text-slate-300 hover:text-cyan-400 transition-colors">Features</a>
              <a href="#accountability" className="text-slate-300 hover:text-cyan-400 transition-colors">Why Us?</a>
              <a href="#pricing" className="text-slate-300 hover:text-cyan-400 transition-colors">Pricing</a>
              <Button variant="primary" onClick={() => setView('app')}>Launch Web App</Button>
            </div>

            <div className="md:hidden">
              <button onClick={() => setIsMenuOpen(!isMenuOpen)} className="text-white">
                {isMenuOpen ? <X /> : <Menu />}
              </button>
            </div>
          </div>
        </div>
        
        {/* Mobile Menu */}
        {isMenuOpen && (
          <div className="md:hidden bg-slate-800 p-4 space-y-4">
             <a href="#features" className="block text-slate-300">Features</a>
             <a href="#pricing" className="block text-slate-300">Pricing</a>
             <Button className="w-full" onClick={() => setView('app')}>Launch Web App</Button>
          </div>
        )}
      </nav>

      {/* Hero Section */}
      <header className="pt-32 pb-20 px-4 sm:px-6 lg:px-8 relative overflow-hidden">
        <div className="absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[800px] bg-cyan-500/10 rounded-full blur-3xl -z-10"></div>
        <div className="max-w-7xl mx-auto text-center">
          <div className="inline-flex items-center space-x-2 bg-slate-800/80 rounded-full px-4 py-1.5 mb-8 border border-slate-700">
            <span className="relative flex h-3 w-3">
              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-cyan-400 opacity-75"></span>
              <span className="relative inline-flex rounded-full h-3 w-3 bg-cyan-500"></span>
            </span>
            <span className="text-sm font-medium text-cyan-400">AI-Powered Protection Live</span>
          </div>
          <h1 className="text-5xl md:text-7xl font-bold text-white mb-6 leading-tight">
            Security that keeps up with <br />
            <span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-600">the speed of life.</span>
          </h1>
          <p className="text-xl text-slate-400 mb-10 max-w-3xl mx-auto">
            We grew up online. Security shouldn't be complicated. SafeGuard uses AI to predict threats before they happen, and we take full accountability if they do.
          </p>
          <div className="flex flex-col sm:flex-row justify-center gap-4">
            <Button onClick={() => setView('app')}>Get Protected Now</Button>
            <Button variant="outline" onClick={() => document.getElementById('features').scrollIntoView()}>Learn More</Button>
          </div>
        </div>
      </header>

      {/* Problem/Solution Strip */}
      <section className="bg-slate-800 py-12 border-y border-slate-700">
        <div className="max-w-7xl mx-auto px-4 grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
          <div className="p-4">
            <Users className="h-10 w-10 text-red-400 mx-auto mb-4" />
            <h3 className="text-lg font-bold text-white">The Threat</h3>
            <p className="text-slate-400 mt-2">Hackers are using AI to target everyone, from teens to grandparents.</p>
          </div>
          <div className="p-4">
            <Activity className="h-10 w-10 text-cyan-400 mx-auto mb-4" />
            <h3 className="text-lg font-bold text-white">The Solution</h3>
            <p className="text-slate-400 mt-2">AI combating AI. Predictive blocking rather than reactive fixing.</p>
          </div>
          <div className="p-4">
            <Shield className="h-10 w-10 text-green-400 mx-auto mb-4" />
            <h3 className="text-lg font-bold text-white">The Promise</h3>
            <p className="text-slate-400 mt-2">If our system fails, we pay. Full accountability.</p>
          </div>
        </div>
      </section>

      {/* Features Grid */}
      <section id="features" className="py-24 px-4">
        <div className="max-w-7xl mx-auto">
          <div className="text-center mb-16">
            <h2 className="text-3xl font-bold text-white mb-4">Complete Protection Platform</h2>
            <p className="text-slate-400">One subscription covers your digital life.</p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <Card title="AI Threat Prediction">
              <p className="text-slate-400">Our AI engine learns from global cyberattack trends in real-time to block new scams before they load.</p>
            </Card>
            <Card title="Cross-Platform">
              <p className="text-slate-400">Whether you are on your phone, laptop, or tablet, your protection travels with you seamlessly.</p>
            </Card>
            <Card title="Secure Shopping VPN">
              <p className="text-slate-400">Shop online with a private encrypted tunnel that hides your financial data from prying eyes.</p>
            </Card>
            <Card title="Data Breach Monitor">
              <p className="text-slate-400">We scan the dark web 24/7. If your email or password leaks, you'll know instantly.</p>
            </Card>
            <Card title="Website Safety Scanner">
              <p className="text-slate-400">Not sure about a link? Our instant scanner checks for malicious code before you click.</p>
            </Card>
            <Card title="Family Friendly">
              <p className="text-slate-400">Simple enough for grandparents, powerful enough for techies. One plan protects the whole house.</p>
            </Card>
          </div>
        </div>
      </section>

      {/* The Accountability Difference (USP) */}
      <section id="accountability" className="py-24 bg-gradient-to-b from-slate-900 to-slate-800 relative overflow-hidden">
        <div className="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/cubes.png')] opacity-5"></div>
        <div className="max-w-5xl mx-auto px-4 relative z-10 text-center">
          <div className="inline-block p-4 rounded-full bg-cyan-500/20 mb-6">
            <CheckCircle className="h-12 w-12 text-cyan-400" />
          </div>
          <h2 className="text-4xl font-bold text-white mb-6">We don't just protect you. <br/>We insure you.</h2>
          <p className="text-xl text-slate-300 mb-8 leading-relaxed">
            Most security companies hide behind fine print when things go wrong. SafeGuard is different. 
            If a failure occurs within our system, <strong>we accept the responsibility, not you.</strong>
            This builds the one thing missing in cybersecurity: Trust.
          </p>
        </div>
      </section>

      {/* Pricing */}
      <section id="pricing" className="py-24 px-4">
        <div className="max-w-7xl mx-auto">
          <h2 className="text-3xl font-bold text-white text-center mb-16">Transparent Pricing</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 items-center">
            
            {/* Standard */}
            <div className="bg-slate-800 p-8 rounded-2xl border border-slate-700">
              <h3 className="text-xl font-bold text-white">Standard</h3>
              <div className="my-4"><span className="text-4xl font-bold text-white">$14.99</span><span className="text-slate-400">/mo</span></div>
              <p className="text-sm text-slate-400 mb-6">Essential protection for individuals.</p>
              <ul className="space-y-3 mb-8 text-slate-300">
                <li className="flex items-center"><Check className="h-5 w-5 text-cyan-500 mr-2"/> Real-time AI Protection</li>
                <li className="flex items-center"><Check className="h-5 w-5 text-cyan-500 mr-2"/> Safe Browsing VPN</li>
                <li className="flex items-center"><Check className="h-5 w-5 text-cyan-500 mr-2"/> 1 Device</li>
              </ul>
              <Button variant="secondary" className="w-full">Choose Standard</Button>
            </div>

            {/* Partially Insured (Highlight) */}
            <div className="bg-slate-800 p-8 rounded-2xl border-2 border-cyan-500 relative transform md:-translate-y-4 shadow-2xl shadow-cyan-900/50">
              <div className="absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-cyan-500 text-slate-900 font-bold px-4 py-1 rounded-full text-sm">Most Popular</div>
              <h3 className="text-xl font-bold text-white">Partially Insured</h3>
              <div className="my-4"><span className="text-4xl font-bold text-white">$34.99</span><span className="text-slate-400">/mo</span></div>
              <p className="text-sm text-slate-400 mb-6">Enhanced coverage with financial backing.</p>
              <ul className="space-y-3 mb-8 text-slate-300">
                <li className="flex items-center"><Check className="h-5 w-5 text-cyan-500 mr-2"/> All Standard Features</li>
                <li className="flex items-center"><Check className="h-5 w-5 text-cyan-500 mr-2"/> Multi-Device (Up to 5)</li>
                <li className="flex items-center"><Check className="h-5 w-5 text-cyan-500 mr-2"/> <strong>Partial Loss Reimbursement</strong></li>
                <li className="flex items-center"><Check className="h-5 w-5 text-cyan-500 mr-2"/> Priority Support</li>
              </ul>
              <Button variant="primary" className="w-full">Choose Insured</Button>
            </div>

            {/* Fully Insured */}
            <div className="bg-slate-800 p-8 rounded-2xl border border-slate-700">
              <h3 className="text-xl font-bold text-white">Fully Insured</h3>
              <div className="my-4"><span className="text-4xl font-bold text-white">$64.99</span><span className="text-slate-400">/mo</span></div>
              <p className="text-sm text-slate-400 mb-6">Total peace of mind for families & businesses.</p>
              <ul className="space-y-3 mb-8 text-slate-300">
                <li className="flex items-center"><Check className="h-5 w-5 text-cyan-500 mr-2"/> Enterprise-Grade Security</li>
                <li className="flex items-center"><Check className="h-5 w-5 text-cyan-500 mr-2"/> Unlimited Devices</li>
                <li className="flex items-center"><Check className="h-5 w-5 text-cyan-500 mr-2"/> <strong>Full Loss Coverage</strong></li>
                <li className="flex items-center"><Check className="h-5 w-5 text-cyan-500 mr-2"/> 24/7 Dedicated Agent</li>
              </ul>
              <Button variant="secondary" className="w-full">Choose Full Coverage</Button>
            </div>

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

      {/* Footer */}
      <footer className="bg-slate-950 py-12 border-t border-slate-800">
        <div className="max-w-7xl mx-auto px-4 text-center">
          <div className="flex items-center justify-center space-x-2 mb-4">
             <Shield className="h-6 w-6 text-slate-600" />
             <span className="text-xl font-bold text-slate-500">SafeGuard</span>
          </div>
          <p className="text-slate-500 text-sm">
            Created by Kevin, Alex, and Aaditya.
          </p>
          <p className="text-slate-600 text-xs mt-4">
            © 2025 SafeGuard Inc. All rights reserved.
          </p>
        </div>
      </footer>
    </div>
  );

  // --- Mock Dashboard App ---

  const Dashboard = () => (
    <div className="min-h-screen bg-slate-900 flex text-slate-100 font-sans">
      
      {/* Sidebar */}
      <div className="w-64 bg-slate-800 border-r border-slate-700 hidden md:flex flex-col">
        <div className="h-20 flex items-center px-6 border-b border-slate-700">
           <Shield className="h-6 w-6 text-cyan-500 mr-2" />
           <span className="text-xl font-bold">SafeGuard</span>
        </div>
        <div className="p-4 space-y-2">
          <button onClick={() => setActiveTab('dashboard')} className={`w-full flex items-center p-3 rounded-lg transition-colors ${activeTab === 'dashboard' ? 'bg-cyan-500/10 text-cyan-400' : 'hover:bg-slate-700 text-slate-400'}`}>
            <Activity className="h-5 w-5 mr-3" /> Dashboard
          </button>
          <button onClick={() => setActiveTab('scan')} className={`w-full flex items-center p-3 rounded-lg transition-colors ${activeTab === 'scan' ? 'bg-cyan-500/10 text-cyan-400' : 'hover:bg-slate-700 text-slate-400'}`}>
            <Search className="h-5 w-5 mr-3" /> Site Scanner
          </button>
          <button className="w-full flex items-center p-3 rounded-lg hover:bg-slate-700 text-slate-400">
            <Globe className="h-5 w-5 mr-3" /> VPN <span className="ml-auto text-xs bg-green-500/20 text-green-400 px-2 py-0.5 rounded">ON</span>
          </button>
          <button className="w-full flex items-center p-3 rounded-lg hover:bg-slate-700 text-slate-400">
            <Server className="h-5 w-5 mr-3" /> Breach Monitor
          </button>
        </div>
        <div className="mt-auto p-4 border-t border-slate-700">
          <div className="bg-slate-900 rounded-lg p-3">
            <p className="text-xs text-slate-400">Plan: <span className="text-cyan-400 font-bold">Partially Insured</span></p>
            <p className="text-xs text-slate-500 mt-1">Coverage: Active</p>
          </div>
          <button onClick={() => setView('landing')} className="mt-4 text-sm text-slate-500 hover:text-white flex items-center">
            <X className="h-4 w-4 mr-2" /> Exit Demo
          </button>
        </div>
      </div>

      {/* Main Content */}
      <div className="flex-1 flex flex-col">
        {/* Mobile Header */}
        <div className="h-16 bg-slate-800 border-b border-slate-700 md:hidden flex items-center justify-between px-4">
          <span className="font-bold">SafeGuard Dashboard</span>
          <button onClick={() => setView('landing')}><X className="h-6 w-6" /></button>
        </div>

        <div className="flex-1 p-8 overflow-y-auto">
          
          {activeTab === 'dashboard' && (
            <div className="max-w-4xl mx-auto animate-fadeIn">
              <h1 className="text-2xl font-bold mb-6">System Overview</h1>
              
              {/* Status Hero */}
              <div className="bg-gradient-to-r from-emerald-500/10 to-teal-500/10 border border-emerald-500/30 rounded-2xl p-8 mb-8 flex items-center justify-between">
                <div>
                  <h2 className="text-3xl font-bold text-emerald-400 mb-2">System Secured</h2>
                  <p className="text-slate-300">AI Engine is monitoring 4 devices. No threats detected.</p>
                </div>
                <div className="h-20 w-20 bg-emerald-500/20 rounded-full flex items-center justify-center animate-pulse">
                  <Shield className="h-10 w-10 text-emerald-400" />
                </div>
              </div>

              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <Card className="flex flex-col items-center text-center">
                   <div className="h-12 w-12 rounded-full bg-blue-500/20 flex items-center justify-center mb-4">
                     <Globe className="h-6 w-6 text-blue-400" />
                   </div>
                   <h3 className="font-bold text-lg">VPN Active</h3>
                   <p className="text-sm text-slate-400 mt-2">IP: Hidden location</p>
                   <p className="text-xs text-green-400 mt-1">Encrypted</p>
                </Card>
                <Card className="flex flex-col items-center text-center">
                   <div className="h-12 w-12 rounded-full bg-purple-500/20 flex items-center justify-center mb-4">
                     <Lock className="h-6 w-6 text-purple-400" />
                   </div>
                   <h3 className="font-bold text-lg">Passwords</h3>
                   <p className="text-sm text-slate-400 mt-2">124 Monitored</p>
                   <p className="text-xs text-green-400 mt-1">0 Breaches found</p>
                </Card>
                <Card className="flex flex-col items-center text-center">
                   <div className="h-12 w-12 rounded-full bg-cyan-500/20 flex items-center justify-center mb-4">
                     <Zap className="h-6 w-6 text-cyan-400" />
                   </div>
                   <h3 className="font-bold text-lg">AI Assistant</h3>
                   <p className="text-sm text-slate-400 mt-2">Learning Patterns...</p>
                   <p className="text-xs text-green-400 mt-1">Updated 2m ago</p>
                </Card>
              </div>
              
              <div className="mt-8 bg-slate-800/50 rounded-xl p-6 border border-slate-700">
                 <h3 className="font-bold mb-4">Recent Activity</h3>
                 <div className="space-y-3">
                   <div className="flex items-center justify-between text-sm p-2 bg-slate-800 rounded">
                      <div className="flex items-center"><CheckCircle className="h-4 w-4 text-green-500 mr-3"/> Malicious ad blocked</div>
                      <span className="text-slate-500">2 mins ago</span>
                   </div>
                   <div className="flex items-center justify-between text-sm p-2 bg-slate-800 rounded">
                      <div className="flex items-center"><CheckCircle className="h-4 w-4 text-green-500 mr-3"/> Bank of America site verified safe</div>
                      <span className="text-slate-500">1 hour ago</span>
                   </div>
                   <div className="flex items-center justify-between text-sm p-2 bg-slate-800 rounded">
                      <div className="flex items-center"><CheckCircle className="h-4 w-4 text-green-500 mr-3"/> Daily System Scan completed</div>
                      <span className="text-slate-500">4 hours ago</span>
                   </div>
                 </div>
              </div>
            </div>
          )}

          {activeTab === 'scan' && (
            <div className="max-w-2xl mx-auto animate-fadeIn mt-10">
              <h1 className="text-3xl font-bold mb-2 text-center">AI Website Scanner</h1>
              <p className="text-center text-slate-400 mb-8">Enter a URL to check for malicious code, phishing scams, or weak security.</p>
              
              <div className="bg-slate-800 p-8 rounded-2xl shadow-xl border border-slate-700">
                <div className="flex gap-2 mb-8">
                  <input 
                    type="text" 
                    placeholder="e.g. www.google.com" 
                    className="flex-1 bg-slate-900 border border-slate-600 rounded-lg px-4 py-3 text-white focus:outline-none focus:border-cyan-500"
                    value={urlInput}
                    onChange={(e) => {
                        setUrlInput(e.target.value); 
                        setScanStatus('idle');
                    }}
                  />
                  <Button onClick={handleScan}>Scan</Button>
                </div>

                {/* Results Area */}
                <div className="h-64 flex flex-col items-center justify-center bg-slate-900 rounded-xl border border-dashed border-slate-700">
                  {scanStatus === 'idle' && (
                    <div className="text-center text-slate-500">
                      <Search className="h-12 w-12 mx-auto mb-2 opacity-50" />
                      <p>Waiting for input...</p>
                      <p className="text-xs mt-2 text-slate-600">Try typing "scam" to see a threat warning.</p>
                    </div>
                  )}

                  {scanStatus === 'scanning' && (
                    <div className="text-center">
                       <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-cyan-500 mx-auto mb-4"></div>
                       <p className="text-cyan-400 font-mono">Analyzing Code Structure...</p>
                       <p className="text-xs text-slate-500 mt-1">Checking global blacklists...</p>
                    </div>
                  )}

                  {scanStatus === 'secure' && (
                    <div className="text-center animate-fadeIn">
                       <CheckCircle className="h-16 w-16 text-green-500 mx-auto mb-4" />
                       <h3 className="text-2xl font-bold text-white">Website is Safe</h3>
                       <p className="text-green-400 mt-2">No threats detected. SSL Valid.</p>
                    </div>
                  )}

                  {scanStatus === 'risk' && (
                     <div className="text-center animate-fadeIn">
                       <AlertTriangle className="h-16 w-16 text-red-500 mx-auto mb-4 animate-bounce" />
                       <h3 className="text-2xl font-bold text-red-500">DANGER DETECTED</h3>
                       <p className="text-white mt-2">Phishing Attempt Identified.</p>
                       <p className="text-sm text-slate-400 mt-2">Connection blocked by SafeGuard.</p>
                    </div>
                  )}
                </div>
              </div>
            </div>
          )}

        </div>
      </div>
    </div>
  );

  return view === 'landing' ? <LandingPage /> : <Dashboard />;
}