import { Button } from '@/components/ui/Button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/Card'
import { services } from '@/data/services'
import { industries } from '@/data/industries'
import { useNavigate } from 'react-router-dom'
import { MapPin, MessageCircle, Users, LifeBuoy, GraduationCap, Link as LinkIcon, Wifi, Network, Headphones, UserCheck, Activity, ShieldCheck, HeartPulse, ShoppingCart, Factory, Landmark } from 'lucide-react'

// Icon map for industries - converts icon string to lucide component
const industryIcons = {
  'heart-pulse': HeartPulse,
  'shopping-cart': ShoppingCart,
  factory: Factory,
  landmark: Landmark,
}

const Home = () => {
  const navigate = useNavigate()

  return (
    <>
      {/* Hero Section */}
      <section className="bg-gradient-to-br from-primary-navy via-primary-navy to-teal-900 text-white py-16 md:py-24">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 items-center">
            <div className="flex flex-col gap-6 md:gap-8">
              <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold">
                Reliable Business Communications — Without the Runaround
              </h1>
              <p className="text-xl md:text-2xl text-section-alt max-w-2xl">
                We handle your phones, internet, and IT so you can focus on running your business. 8x8 Certified Partner with 25+ years of proven reliability.
              </p>
              <div className="flex flex-col sm:flex-row gap-4">
                <Button variant="default" size="lg" className="bg-white text-primary-navy hover:bg-gray-100" onClick={() => navigate('/contact')}>
                  Schedule Consultation
                </Button>
                <Button variant="outline" size="lg" className="border-white text-white hover:bg-white/10" onClick={() => navigate('/services')}>
                  View Services
                </Button>
              </div>
              <div className="flex flex-wrap gap-4">
                <div className="flex items-center gap-2 px-4 py-2 bg-white/20 rounded-lg text-sm font-medium">
                  <img src="/assets/8x8_Logo_White.svg" alt="8x8" className="h-5 w-5" />
                  <span>8x8 Certified Partner</span>
                </div>
                <div className="flex items-center gap-2 px-4 py-2 bg-white/20 rounded-lg text-sm font-medium">
                  <div className="w-5 h-5 bg-white rounded-full flex items-center justify-center text-primary-navy font-bold">V</div>
                  <span>Veteran Owned</span>
                </div>
                <div className="flex items-center gap-2 px-4 py-2 bg-white/20 rounded-lg text-sm font-numeric">
                  <span>25+</span>
                  <span className="text-sm">Years Experience</span>
                </div>
                <div className="flex items-center gap-2 px-4 py-2 bg-white/20 rounded-lg text-sm font-medium">
                  <span>SMB to Enterprise</span>
                </div>
              </div>
            </div>
            <div className="md:order-2 md:mt-0">
              <div className="relative rounded-xl overflow-hidden shadow-2xl">
                <img 
                  src="/assets/hero-tech.png" 
                  alt="Communications Infrastructure" 
                  className="w-full h-full object-cover"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-primary-navy/50 to-transparent" />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Trust Bar */}
      <section className="bg-section-alt py-12">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-8">
            <h2 className="text-2xl font-semibold text-primary-navy mb-2">Trusted Partner</h2>
            <p className="text-soft-text">8x8 and Cisco Certified Partner with proven expertise</p>
          </div>
          <div className="flex flex-wrap justify-center items-center gap-8 md:gap-16 opacity-70">
            <div className="flex items-center gap-3">
              <img src="/assets/8x8_Logo_White.svg" alt="8x8" className="h-8" />
              <span className="font-medium">8x8 Certified Partner</span>
            </div>
            <div className="flex items-center gap-3">
              <div className="w-8 h-8 bg-primary-navy rounded-full flex items-center justify-center text-white font-bold">C</div>
              <span className="font-medium">Cisco Certified Partner</span>
            </div>
            <div className="flex items-center gap-3">
              <div className="w-8 h-8 bg-primary-navy rounded-full flex items-center justify-center text-white font-bold">V</div>
              <span className="font-medium">Veteran Owned</span>
            </div>
          </div>
        </div>
      </section>

      {/* JointLogoWhite Trust Section */}
      <section className="bg-primary-navy py-16 md:py-24">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <div>
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">Certified Excellence</h2>
            <div className="flex flex-col md:flex-row items-center justify-center gap-12">
              <div className="flex-1">
                <img
                  src="/assets/JointLogoWhite.png"
                  alt="Joint Logo White - 8x8 and Cisco Partner"
                  className="max-h-32 w-auto object-contain mx-auto"
                />
              </div>
              <div className="flex-1 text-left">
                <h3 className="text-xl font-semibold text-white mb-4">Official 8x8 Certified Partner</h3>
                <p className="text-teal-100 mb-4">
                  JointLogoWhite certification demonstrates our commitment to delivering enterprise-grade communications solutions. We meet rigorous standards for UCaaS, contact center, and collaboration platforms.
                </p>
                <p className="text-teal-100">
                  Our 8x8 expertise spans cloud PBX, VoIP implementation, and comprehensive support — ensuring your business communications infrastructure is built on a proven foundation.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Trust Signals Section */}
      <section className="bg-section-alt py-16 md:py-24">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-2xl md:text-3xl font-semibold text-primary-navy mb-2">Trusted by Thousands of Businesses</h2>
            <p className="text-xl text-soft-text max-w-2xl mx-auto mb-6">
              Why Queue North? Proven reliability, decades of experience, and unwavering support
            </p>
            <div>
              <Button variant="default" onClick={() => navigate('/contact')}
                className="bg-primary-navy text-white hover:bg-primary-navy-dark">
                Request Consultation
              </Button>
            </div>
          </div>
          
          {/* 8x8 Certified Partner */}
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
            <div className="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-shadow">
              <div className="flex items-center gap-4 mb-4">
                <div className="bg-primary-navy text-white p-3 rounded-lg">
                  <img src="/assets/8x8_Logo_White.svg" alt="8x8" className="h-8 w-auto" />
                </div>
                <div>
                  <h3 className="text-lg font-semibold text-primary-navy">8x8 Certified Partner</h3>
                  <p className="text-sm text-soft-text">Official 8x8 Certification #25432</p>
                </div>
              </div>
              <p className="text-sm text-soft-text leading-relaxed">
                As an 8x8 Certified Partner, we meet rigorous standards for UCaaS and contact center solutions. We're authorized to deploy, manage, and support 8x8's enterprise-grade platform.
              </p>
            </div>

            {/* Cisco Partnership */}
            <div className="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-shadow">
              <div className="flex items-center gap-4 mb-4">
                <div className="bg-primary-navy text-white p-3 rounded-lg">
                  <span className="font-bold text-xl">C</span>
                </div>
                <div>
                  <h3 className="text-lg font-semibold text-primary-navy">Cisco Certified Partner</h3>
                  <p className="text-sm text-soft-text">Authorized Reseller & Implementer</p>
                </div>
              </div>
              <p className="text-sm text-soft-text leading-relaxed">
                As a Cisco Certified Partner, we deliver enterprise-grade solutions using Cisco Meraki, Cisco Webex, and Cisco Unified Communications Manager. We help businesses leverage Cisco's industry-leading networking and communications platforms.
              </p>
            </div>

            {/* Veteran Owned */}
            <div className="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-shadow">
              <div className="flex items-center gap-4 mb-4">
                <div className="bg-primary-navy text-white p-3 rounded-lg">
                  <div className="flex items-center justify-center text-xl font-bold">V</div>
                </div>
                <div>
                  <h3 className="text-lg font-semibold text-primary-navy">Veteran Owned</h3>
                  <p className="text-sm text-soft-text">VCERT Verified (VOSB #12847)</p>
                </div>
              </div>
              <p className="text-sm text-soft-text leading-relaxed">
                Founded by military veterans, we bring discipline, reliability, and service-first values to every client relationship. Your success is our mission.
              </p>
            </div>

            {/* Years Experience */}
            <div className="bg-white rounded-xl p-8 shadow-lg hover:shadow-xl transition-shadow">
              <div className="flex items-center gap-4 mb-4">
                <div className="bg-teal-600 text-white p-3 rounded-lg">
                  <span className="font-numeric text-3xl">25+</span>
                </div>
                <div>
                  <h3 className="text-lg font-semibold text-primary-navy">25+ Years Experience</h3>
                  <p className="text-sm text-soft-text">1999–Present</p>
                </div>
              </div>
              <p className="text-sm text-soft-text leading-relaxed">
                We've been helping businesses navigate communications challenges since before cloud telephony existed. Our experience means fewer surprises, faster solutions.
              </p>
            </div>
          </div>

          {/* Metrics Grid */}
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            <div className="text-center">
              <div className="font-numeric text-4xl md:text-5xl text-primary-navy mb-2">99.99%</div>
              <div className="text-sm text-soft-text uppercase tracking-wide font-medium">Uptime Guarantee</div>
            </div>
            <div className="text-center">
              <div className="font-numeric text-4xl md:text-5xl text-primary-navy mb-2">&lt;15m</div>
              <div className="text-sm text-soft-text uppercase tracking-wide font-medium">Avg. Response</div>
            </div>
            <div className="text-center">
              <div className="font-numeric text-4xl md:text-5xl text-primary-navy mb-2">24/7</div>
              <div className="text-sm text-soft-text uppercase tracking-wide font-medium">Support</div>
            </div>
            <div className="text-center">
              <div className="font-numeric text-4xl md:text-5xl text-primary-navy mb-2">100%</div>
              <div className="text-sm text-soft-text uppercase tracking-wide font-medium">Satisfaction</div>
            </div>
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section className="bg-background py-16 md:py-24">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-4">What We Handle</h2>
            <p className="text-xl text-soft-text max-w-2xl mx-auto">
              From phones to firewalls, we keep your business running
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {services.map((service) => (
              <Card key={service.id} className="hover:shadow-md transition-shadow cursor-pointer">
                <CardHeader>
                  <div className="flex items-center gap-3 mb-2">
                    <div className="bg-primary-navy/10 p-2 rounded-lg">
                      {service.icon === 'message-circle' && <MessageCircle className="w-6 h-6 text-primary-navy" />}
                      {service.icon === 'users' && <Users className="w-6 h-6 text-primary-navy" />}
                      {service.icon === 'life-buoy' && <LifeBuoy className="w-6 h-6 text-primary-navy" />}
                      {service.icon === 'graduation-cap' && <GraduationCap className="w-6 h-6 text-primary-navy" />}
                      {service.icon === 'link' && <LinkIcon className="w-6 h-6 text-primary-navy" />}
                      {service.icon === 'wifi' && <Wifi className="w-6 h-6 text-primary-navy" />}
                      {service.icon === 'network' && <Network className="w-6 h-6 text-primary-navy" />}
                    </div>
                    <CardTitle className="text-primary-navy text-xl">{service.name}</CardTitle>
                  </div>
                  <CardDescription className="font-medium text-teal-900">{service.homeDesc}</CardDescription>
                </CardHeader>
                <CardContent>
                  <p className="text-sm text-soft-text mb-4">{service.shortDesc}</p>
                  <div className="flex flex-col gap-2">
                    <Button variant="link" className="text-primary-navy p-0 h-auto text-sm" onClick={() => navigate(`/services/${service.id}`)}>
                      Learn more →
                    </Button>
                    <Button variant="outline" size="sm" onClick={() => navigate('/contact')}>
                      Request Consultation
                    </Button>
                  </div>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Why Queue North */}
      <section className="bg-section-alt py-16 md:py-24">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-4">Why Queue North</h2>
            <p className="text-xl text-soft-text max-w-2xl mx-auto mb-6">
              Four concrete differentiators that set us apart
            </p>
            <div>
              <Button variant="default" onClick={() => navigate('/contact')}
                className="bg-primary-navy text-white hover:bg-primary-navy-dark">
                Request Consultation
              </Button>
            </div>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <Card>
              <CardContent className="pt-6">
                <div className="bg-primary-navy text-white p-3 rounded-lg mb-4 inline-flex">
                  <Headphones className="w-6 h-6" />
                </div>
                <h3 className="text-lg font-semibold text-primary-navy mb-2">Responsiveness</h3>
                <p className="text-sm text-soft-text">
                  When you call, a human answers — not a ticket queue, not a chatbot. Real support from people who know your system.
                </p>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="pt-6">
                <div className="bg-primary-navy text-white p-3 rounded-lg mb-4 inline-flex">
                  <UserCheck className="w-6 h-6" />
                </div>
                <h3 className="text-lg font-semibold text-primary-navy mb-2">Direct Support</h3>
                <p className="text-sm text-soft-text">
                  No account managers between you and the engineer solving your problem. You talk to the team that designed and deployed your system.
                </p>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="pt-6">
                <div className="bg-primary-navy text-white p-3 rounded-lg mb-4 inline-flex">
                  <Activity className="w-6 h-6" />
                </div>
                <h3 className="text-lg font-semibold text-primary-navy mb-2">Proactive Monitoring</h3>
                <p className="text-sm text-soft-text">
                  We catch problems before you notice them. 24/7 monitoring means we're often resolving issues before your phone rings.
                </p>
              </CardContent>
            </Card>
            <Card>
              <CardContent className="pt-6">
                <div className="bg-primary-navy text-white p-3 rounded-lg mb-4 inline-flex">
                  <ShieldCheck className="w-6 h-6" />
                </div>
                <h3 className="text-lg font-semibold text-primary-navy mb-2">Vendor Neutrality</h3>
                <p className="text-sm text-soft-text">
                  As an 8x8 and Cisco Certified Partner, we recommend what works best for you — not what pays the highest commission. We've tested the alternatives so you don't have to.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Industries Section */}
      <section className="bg-background py-16 md:py-24">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-4">Industries We Serve</h2>
            <p className="text-xl text-soft-text max-w-2xl mx-auto">
              Tailored solutions for healthcare, retail, manufacturing, and more
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {industries.map((industry) => {
              const IconComponent = industryIcons[industry.icon]
              return (
                <Card key={industry.id} className="hover:shadow-md transition-shadow cursor-pointer">
                  <CardContent className="p-6">
                    <div className="w-14 h-14 rounded-xl bg-teal-50 flex items-center justify-center mb-4">
                      <IconComponent className="w-8 h-8 text-teal-600" />
                    </div>
                    <h3 className="text-xl font-semibold text-primary-navy mb-3">{industry.name}</h3>
                    <p className="text-sm text-soft-text mb-4">
                      Industry-specific solutions designed to address your unique challenges and requirements.
                    </p>
                    <Button variant="link" className="text-primary-navy p-0 h-auto text-sm" onClick={() => navigate(`/industries/${industry.id}`)}>
                      Learn more →
                    </Button>
                  </CardContent>
                </Card>
              )
            })}
          </div>
        </div>
      </section>

      {/* Final CTA */}
      <section className="bg-primary-navy text-white py-16 md:py-24">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <h2 className="text-3xl md:text-4xl font-bold mb-6">
            Tell us what you're trying to fix. We'll help map the path.
          </h2>
          <p className="text-xl text-section-alt mb-8 max-w-2xl mx-auto">
            Schedule a free consultation with our communications experts.
          </p>
          <Button variant="default" size="lg" onClick={() => navigate('/contact')}>
            Request Consultation
          </Button>
        </div>
      </section>
    </>
  )
}

export default Home