/* eslint-disable @next/next/no-img-element */
/* eslint-disable @typescript-eslint/no-unused-vars */
"use client";

import React, { useState, useEffect } from 'react';

import {
  Lock,
  Server,
  Globe,
  Cpu,
  CheckCircle,
  Phone,
  Mail,
  ArrowRight,
  Play,
  Settings,
  ShieldCheck,
  Database,
  Smartphone,
  Calendar,
  User,
  MessageSquare,
  Facebook,
  Instagram,
  Linkedin,
  Twitter
} from 'lucide-react';

// --- Components ---
const TopBar = () => (
  <div className="bg-[#0b0d1e] text-slate-400 py-3 px-4 hidden lg:block border-b border-white/5 font-['Jost']">
    <div className="max-w-7xl mx-auto flex justify-between items-center text-sm font-medium">
      <div className="flex items-center space-x-8">
        <div className="flex items-center space-x-2 hover:text-[#0055ff] transition-colors cursor-pointer">
          <Mail size={16} className="text-[#0055ff]" />
          <span>support@cyberguard.com</span>
        </div>
        <div className="flex items-center space-x-2 hover:text-[#0055ff] transition-colors cursor-pointer">
          <Phone size={16} className="text-[#0055ff]" />
          <span>+1 (555) 123-4567</span>
        </div>
        <div className="flex items-center space-x-2">
          <span className="w-1.5 h-1.5 rounded-full bg-[#0055ff] animate-pulse"></span>
          <span className="text-white font-semibold tracking-wide">24/7 Operations Center Online</span>
        </div>
      </div>
      <div className="flex items-center space-x-6">
        <span className="text-slate-500">Follow Us:</span>
        <div className="flex space-x-4">
          <a href="#" className="hover:text-[#0055ff] transition-colors"><Facebook size={14} /></a>
          <a href="#" className="hover:text-[#0055ff] transition-colors"><Twitter size={14} /></a>
          <a href="#" className="hover:text-[#0055ff] transition-colors"><Linkedin size={14} /></a>
          <a href="#" className="hover:text-[#0055ff] transition-colors"><Instagram size={14} /></a>
        </div>
      </div>
    </div>
  </div>
);

const SectionTitle = ({ subtitle, title, align = 'center', light = false }: { subtitle: string, title: string, align?: 'left' | 'center', light?: boolean }) => (
  <div className={`mb-12 ${align === 'center' ? 'text-center' : 'text-left'}`}>
    <span className="text-[#0055ff] font-bold uppercase tracking-widest text-sm mb-3 block">{subtitle}</span>
    <h2 className={`text-3xl md:text-5xl font-bold leading-tight ${light ? 'text-white' : 'text-[#0b0d1e]'}`}>
      {title}
    </h2>
    <div className={`mt-5 h-1.5 w-24 bg-[#0055ff] ${align === 'center' ? 'mx-auto' : ''} relative overflow-hidden`}>
      <div className="absolute top-0 left-0 h-full w-full bg-white/30 animate-pulse"></div>
    </div>
  </div>
);

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const ServiceCard = ({ icon, title, desc }: { icon: any, title: string, desc: string }) => (
  <div className="bg-white p-10 shadow-[0_10px_40px_-10px_rgba(0,0,0,0.08)] rounded-sm border-b-[3px] border-[#0055ff] hover:bg-[#0055ff] transition-all duration-500 group relative overflow-hidden z-10">
    <div className="absolute top-0 right-0 p-8 opacity-0 group-hover:opacity-10 transition-opacity duration-500 transform translate-x-4 -translate-y-4">
      {React.cloneElement(icon, { size: 120 })}
    </div>
    <div className="w-20 h-20 bg-blue-50 rounded-full flex items-center justify-center text-[#0055ff] mb-8 group-hover:bg-white group-hover:text-[#0055ff] transition-all duration-500 shadow-lg">
      {icon}
    </div>
    <h3 className="text-2xl font-bold text-[#0b0d1e] mb-4 group-hover:text-white transition-colors duration-300 font-['Jost']">{title}</h3>
    <p className="text-slate-600 leading-relaxed mb-6 group-hover:text-blue-100 transition-colors duration-300">{desc}</p>
    <a href="#" className="inline-flex items-center text-[#0055ff] font-bold text-sm uppercase tracking-wide group-hover:text-white transition-colors">
      Read More <ArrowRight size={16} className="ml-2 group-hover:translate-x-2 transition-transform" />
    </a>
  </div>
);


const BlogCard = ({ img, date, title, comments }: { img: string, date: string, title: string, comments: number }) => (
  <div className="group bg-white rounded-sm shadow-md overflow-hidden hover:-translate-y-2 transition-transform duration-300">
    <div className="relative overflow-hidden h-64">
      <img src={img} alt={title} className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
      <div className="absolute top-4 left-4 bg-[#0055ff] text-white px-4 py-2 text-sm font-bold uppercase tracking-wide rounded-sm flex items-center gap-2">
        <Calendar size={14} /> {date}
      </div>
    </div>
    <div className="p-8">
      <div className="flex items-center gap-6 text-sm text-slate-500 mb-4 font-medium">
        <div className="flex items-center gap-2 hover:text-[#0055ff] cursor-pointer transition-colors"><User size={14} className="text-[#0055ff]" /> By Admin</div>
        <div className="flex items-center gap-2 hover:text-[#0055ff] cursor-pointer transition-colors"><MessageSquare size={14} className="text-[#0055ff]" /> {comments} Comments</div>
      </div>
      <h3 className="text-xl font-bold text-[#0b0d1e] mb-4 leading-snug group-hover:text-[#0055ff] transition-colors line-clamp-2">
        {title}
      </h3>
      <a href="#" className="inline-flex items-center text-slate-500 font-bold text-sm uppercase tracking-wide hover:text-[#0055ff] transition-colors">
        Read More <ArrowRight size={16} className="ml-2" />
      </a>
    </div>
  </div>
);

// --- Main App ---

const App = () => {
  const [isScrolled, setIsScrolled] = useState(false);
  const [mobileMenu, setMobileMenu] = useState(false);

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

  return (
    <section className="font-['Jost'] text-slate-600 bg-white">
      <style>{`
        @import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700;800&display=swap');
        .clip-hex {
          clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
        }
        .clip-btn {
          clip-path: polygon(92% 0, 100% 25%, 100% 100%, 8% 100%, 0% 75%, 0 0);
        }
      `}</style>

      <TopBar />

      {/* Hero Section */}
      <section className="relative -mt-[200px] pt-48 pb-32 lg:pt-72 lg:pb-60 bg-[#0b0d1e] overflow-hidden">
        {/* Background Image Overlay */}
        <div className="absolute inset-0 z-0">
          <img
            src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?q=80&w=2070&auto=format&fit=crop"
            alt="Cyber Background"
            className="w-full h-full object-cover opacity-20"
          />
          <div className="absolute inset-0 bg-linear-to-r from-[#0b0d1e] via-[#0b0d1e]/90 to-blue-900/30"></div>
          {/* Grid Pattern */}
          <div className="absolute inset-0 opacity-[0.03]" style={{ backgroundImage: 'linear-gradient(#ffffff 1px, transparent 1px), linear-gradient(90deg, #ffffff 1px, transparent 1px)', backgroundSize: '40px 40px' }}></div>
        </div>

        <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col lg:flex-row items-center">
          <div className="lg:w-1/2 text-center lg:text-left">
            <div className="inline-flex items-center gap-2 px-5 py-2 bg-white/5 border-l-4 border-[#0055ff] text-white font-bold text-sm uppercase tracking-widest mb-8 backdrop-blur-sm">
              <span className="text-[#0055ff]">#1</span> Cyber Security Agency
            </div>
            <h1 className="text-5xl lg:text-7xl font-bold text-white leading-[1.1] mb-8">
              Modern & Secure <br />
              <span className="text-transparent bg-clip-text bg-linear-to-r from-[#0055ff] to-cyan-400">
                Digital Protection
              </span>
            </h1>
            <p className="text-xl text-slate-300 mb-10 leading-relaxed max-w-xl mx-auto lg:mx-0 font-light">
              We provide comprehensive cybersecurity services to protect your business data from unauthorized access and cyber threats.
            </p>
            <div className="flex flex-col sm:flex-row justify-center lg:justify-start gap-5">
              <button className="bg-[#0055ff] hover:bg-[#0044cc] text-white px-10 py-5 font-bold uppercase tracking-wider shadow-lg shadow-blue-600/30 transition-all rounded-md hover:-translate-y-1">
                Discover More
              </button>
              <button className="bg-transparent border border-white/20 hover:bg-white hover:text-[#0b0d1e] text-white px-10 py-5 font-bold uppercase tracking-wider transition-all flex items-center justify-center gap-3 rounded-md group">
                <Play size={18} fill="currentColor" className="group-hover:text-[#0055ff]" /> Watch Video
              </button>
            </div>
          </div>

          {/* Hero Graphic */}
          <div className="lg:w-1/2 mt-20 lg:mt-0 relative perspective-[1000px]">
            <div className="relative z-10 animate-float transform rotate-y-12 rotate-x-6">
              <div className="relative">
              </div>

              {/* Floating Card 1 */}
              <div className="absolute top-10 -right-4 bg-white p-5 rounded shadow-xl flex items-center gap-4 animate-pulse-slow md:flex border-l-4 border-[#0055ff]">
                <div className="bg-blue-100 p-3 rounded-full text-[#0055ff]"><ShieldCheck size={28} /></div>
                <div>
                  <p className="text-[#0b0d1e] font-bold text-lg">100% Secure</p>
                  <p className="text-sm text-slate-500">System Safe</p>
                </div>
              </div>


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

      {/* Features overlap */}
      <section className="relative z-20 -mt-24 px-4">
        <div className="max-w-7xl mx-auto grid md:grid-cols-3 gap-8">
          {[
            { icon: <Lock size={36} />, title: "Data Security", desc: "Enterprise-grade encryption for all your sensitive corporate data assets." },
            { icon: <Cpu size={36} />, title: "Threat Intelligence", desc: "Proactive monitoring systems that identify threats before they strike." },
            { icon: <Server size={36} />, title: "Cloud Protection", desc: "Secure cloud infrastructure management for AWS, Azure, and Google Cloud." },
          ].map((feature, idx) => (
            <div key={idx} className="bg-white p-10 shadow-2xl shadow-black/10 rounded-sm border-b-4 border-[#0055ff] hover:-translate-y-3 transition-transform duration-300 group">
              <div className="text-[#0055ff] mb-6 group-hover:scale-110 transition-transform duration-300 origin-left">{feature.icon}</div>
              <h3 className="text-2xl font-bold text-[#0b0d1e] mb-3">{feature.title}</h3>
              <p className="text-slate-500 leading-relaxed">{feature.desc}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Solutions / Experts Section */}
      <section id="solutions" className="py-28 relative bg-[url('https://images.unsplash.com/photo-1558494949-ef526b0042a0?q=80&w=2000&auto=format&fit=crop')] bg-cover bg-center bg-no-repeat bg-fixed ">
        <div className="absolute inset-0 bg-white/95"></div>


        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10 ">

          {/* Header Row */}
          <div className="text-center mb-16">
            <div className="text-[#0055ff] font-bold uppercase tracking-widest text-sm mb-3">Cybersecurity Experts</div>
            <h2 className="text-3xl md:text-5xl font-bold text-[#0b0d1e] max-w-4xl mx-auto leading-tight">
              Comprehensive Cybersecurity Solutions for Modern Threats
            </h2>
          </div>

          <div className="grid lg:grid-cols-2 gap-16 items-center">
            {/* Left Column: Images & Stats */}
            <div className="relative mb-24 lg:mb-0 flex justify-center lg:justify-start">
              <div className="relative">
                {/* Main Image Container - Fixed 452 X 252px */}
                <div className="relative z-10 w-[452px] h-[252px] max-w-full rounded-sm overflow-hidden shadow-2xl">
                  <img
                    src="/img/projects/cybersecurity.png"
                    alt="Cyber Defense Dashboard"
                    className="w-full h-full object-cover hover:scale-105 transition-transform duration-700"
                  />
                </div>

                {/* Floating Stats Box (Bottom Left) - 200px wide */}
                <div className="absolute bottom-4 left-4 lg:left-4 z-30 bg-[#0055ff] text-white p-4 rounded-sm shadow-xl w-[150px] h-[100px] text-center">
                  <h2 className="text-4xl font-bold mb-1">99.9%</h2>
                  <p className="text-xs font-medium opacity-90 leading-snug uppercase tracking-wider">Threat detection rate</p>
                </div>

                {/* Overlapping Secondary Image (Bottom Right) */}
                <div className="absolute -bottom-25 -right-4 lg:-right-10 z-20 w-[280px] h-[280px] rounded-sm overflow-hidden shadow-[0_10px_30px_rgba(0,0,0,0.2)] hidden sm:block">
                  <img
                    src="/img/projects/lock.png"
                    alt="Security Monitoring"
                    className="w-full h-full object-cover"
                  />
                </div>
              </div>
            </div>

            {/* Right Column: Text Content */}
            <div className="lg:pl-8">
              <p className="text-slate-600 text-lg leading-relaxed mb-8">
                We safeguard your business against evolving cyber threats with proactive defense, cutting-edge tools, and a dedicated team of experts. From small businesses to large enterprises, we deliver tailored protection that keeps your data, systems, and reputation secure 24/7.
              </p>

              <ul className="grid sm:grid-cols-1 gap-y-4 mb-10">
                {[
                  "Certified Cybersecurity Professionals",
                  "Advanced Threat Detection & Response",
                  "Custom Security Strategies for Your Needs",
                  "24/7 Network Monitoring & Support",
                  "End-to-End Data Protection",
                  "Proven Defense Against Cyber Attacks"
                ].map((item, i) => (
                  <li key={i} className="flex items-start gap-3">
                    <div className="mt-1 w-5 h-5 rounded-full bg-blue-100 flex items-center justify-center text-[#0055ff] shrink-0">
                      <CheckCircle size={14} strokeWidth={3} />
                    </div>
                    <span className="text-[#0b0d1e] font-bold text-lg">{item}</span>
                  </li>
                ))}
              </ul>

              <a href="#contact" className="inline-flex items-center justify-center bg-[#0055ff] hover:bg-[#0044cc] text-white px-9 py-5 font-bold uppercase tracking-widest transition-all shadow-lg shadow-blue-600/30 rounded-md hover:-translate-y-1">
                Request a Security Audit
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section id="services" className="py-28 bg-[#f4f7fa] relative">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <SectionTitle subtitle="What We Provide" title="Robust Cybersecurity Services for Today's Threats" />

          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8 mt-16">
            <ServiceCard
              icon={<Globe />}
              title="Network Security"
              desc="Deploying firewalls and intrusion detection systems to safeguard networks."
            />
            <ServiceCard
              icon={<Database />}
              title="Data Encryption"
              desc="Encrypting sensitive data at rest and in transit using advanced encryption."
            />
            <ServiceCard
              icon={<Smartphone />}
              title="Identity & Access"
              desc="Managing user identities and access with MFA and detailed role-based control."
            />
            <ServiceCard
              icon={<Server />}
              title="Security Monitoring"
              desc="24/7 monitoring with advanced SIEM systems for real-time detection."
            />
            <ServiceCard
              icon={<Settings />}
              title="Backup & Recovery"
              desc="Protecting critical data with secure backups and rapid recovery plans."
            />
            <ServiceCard
              icon={<ShieldCheck />}
              title="Security Configuration"
              desc="Hardening systems and applying secure configurations across all infrastructure."
            />
          </div>
        </div>
      </section>

      {/* Why Choose Us - UPDATED WITH USER REQUESTED DESIGN */}
      <section className="relative py-28 bg-linear-to-b from-[#0b0f2a] to-[#14183f] text-white">
        <div className="max-w-7xl mx-auto px-6">

          {/* Section Header */}
          <div className="text-center max-w-4xl mx-auto mb-20">
            <span className="text-sm tracking-[0.3em] text-blue-400 uppercase font-bold">
              Why Choose Us
            </span>
            <h2 className="mt-6 text-3xl md:text-4xl lg:text-5xl font-bold leading-tight">
              Complete Cyber Defense Against Modern Attacks
            </h2>
            <p className="mt-6 text-gray-300 text-lg leading-relaxed">
              Stay protected with a fully integrated defense strategy built for
              today’s complex cyber landscape. From ransomware to phishing and
              zero-day exploits, we provide comprehensive protection across
              networks, endpoints, and cloud environments.
            </p>
          </div>

          {/* Cards Grid */}
          <div className="grid md:grid-cols-2 gap-10">

            {/* Card 01 */}
            <div className="relative rounded-2xl bg-[#0f1438] overflow-hidden shadow-2xl flex flex-col sm:flex-row group border border-white/5 hover:border transition-all duration-300">
              <div className="p-10 flex-1 relative z-10">
                <span className="text-sm text-gray-400 font-bold uppercase tracking-widest">01</span>
                <h3 className="mt-4 text-2xl font-bold text-white group-hover transition-colors">
                  Advanced Threat Detection
                </h3>
                <p className="mt-4 text-gray-400 leading-relaxed font-light">
                  Leverage real-time monitoring and AI-driven analytics to detect
                  threats on your systems before they cause damage.
                </p>
              </div>

              <div className="relative w-full sm:w-1/2 min-h-[260px] overflow-hidden">
                <img
                  src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b?q=80&w=800&auto=format&fit=crop"
                  alt="Advanced Threat Detection"
                  className="absolute inset-0 w-full h-full object-cover grayscale opacity-50 group-hover:grayscale-0 group-hover:scale-110 transition-all duration-700"
                />
                <div className="absolute inset-0 bg-linear-to-r from-[#0f1438] via-transparent to-transparent hidden sm:block"></div>
              </div>
            </div>

            {/* Card 02 - Cloud Security Management */}
            <div className="relative rounded-2xl bg-[#0f1438] overflow-hidden shadow-2xl flex flex-col sm:flex-row group border border-white/5 hover:border transition-all duration-300">
              <div className="p-10 flex-1 relative z-10">
                <span className="text-sm text-gray-400 font-bold uppercase tracking-widest">03</span>
                <h3 className="mt-4 text-2xl font-bold text-white group-hover transition-colors">
                  Cloud Security Management
                </h3>
                <p className="mt-4 text-gray-400 leading-relaxed font-light">
                  Unified security posture across all your cloud platforms to ensure
                  seamless and safe data sovereignty.
                </p>
              </div>

              <div className="relative w-full sm:w-1/2 min-h-[260px] overflow-hidden">
                <img
                  src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=800&auto=format&fit=crop"
                  alt="Cloud Security"
                  className="absolute inset-0 w-full h-full object-cover grayscale opacity-40 group-hover:grayscale-0 group-hover:scale-110 transition-all duration-700"
                />
                <div className="absolute inset-0 bg-linear-to-r from-[#0f1438] via-transparent to-transparent hidden sm:block"></div>
              </div>
            </div>

          </div>

        </div>
      </section>

    </section>

  );
};

export default App;