Queue-North-Website/src/pages/Home.jsx

import { Helmet } from 'react-helmet-async'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/Card'
import { services } from '@/data/services'
import { industries } from '@/data/industries'
import { Link } from 'react-router-dom'
import { ArrowRight, MapPin, MessageCircle, Users, LifeBuoy, GraduationCap, Link as LinkIcon, Wifi, Network, Headphones, UserCheck, Activity, ShieldCheck, HeartPulse, ShoppingCart, Factory, Landmark, Building2, Award } 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 organizationLd = {
    '@context': 'https://schema.org',
    '@type': 'Organization',
    name: 'Queue North Technologies',
    url: 'https://queuenorth.com',
    logo: 'https://queuenorth.com/assets/og-image.png',
    description: 'Business communications and IT partner. 8x8 Certified Partner, Veteran Owned, 25+ years of service.',
    address: {
      '@type': 'PostalAddress',
      addressCountry: 'US',
    },
    contactPoint: {
      '@type': 'ContactPoint',
      telephone: '+1-321-730-8020',
      contactType: 'customer service',
      areaServed: 'US',
    },
    sameAs: [],
  }

  const localBusinessLd = {
    '@context': 'https://schema.org',
    '@type': 'LocalBusiness',
    '@id': 'https://queuenorth.com/#business',
    name: 'Queue North Technologies',
    image: 'https://queuenorth.com/assets/og-image.png',
    url: 'https://queuenorth.com',
    telephone: '+1-321-730-8020',
    address: {
      '@type': 'PostalAddress',
      addressCountry: 'US',
    },
    priceRange: '$$',
    openingHoursSpecification: {
      '@type': 'OpeningHoursSpecification',
      dayOfWeek: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
      opens: '08:00',
      closes: '18:00',
    },
  }

  return (
    <>
      <Helmet>
        <title>Queue North Technologies | Business Communications & IT Partner</title>
        <meta name="description" content="Queue North Technologies is a veteran-owned 8x8 Certified Partner providing business phone systems, UCaaS, contact center, IT support, and networking solutions. 25+ years of proven reliability." />
        <meta property="og:title" content="Queue North Technologies | Business Communications & IT Partner" />
        <meta property="og:description" content="Veteran-owned 8x8 Certified Partner. Business phone, UCaaS, contact center, IT support, and networking solutions. 25+ years of proven reliability." />
        <meta property="og:url" content="https://queuenorth.com" />
        <meta property="og:type" content="website" />
        <meta property="og:image" content="https://queuenorth.com/assets/og-image.png" />
        <meta property="og:site_name" content="Queue North Technologies" />
        <script type="application/ld+json">{JSON.stringify(organizationLd)}</script>
        <script type="application/ld+json">{JSON.stringify(localBusinessLd)}</script>
      </Helmet>
      {/* Hero Section */}
      <section className="relative isolate overflow-hidden bg-primary-navy text-white">
        <div className="absolute inset-0 -z-10">
          <img
            src="/assets/hero-tech.webp"
            alt="Queue North technician working inside a communications rack"
            className="h-full w-full object-cover object-center"
          />
          <div className="absolute inset-0 bg-primary-navy/65" />
          <div className="absolute inset-0 bg-gradient-to-r from-primary-navy via-primary-navy/90 to-primary-navy/25" />
        </div>

        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 md:py-24 lg:py-28">
          <div className="max-w-3xl">
            <div className="inline-flex items-center gap-2 rounded-md border border-white/20 bg-white/10 px-3 py-2 text-xs font-semibold uppercase tracking-wide text-primary-cyan">
              <span className="h-1.5 w-1.5 rounded-full bg-primary-cyan" />
              Veteran-owned communications and infrastructure partner
            </div>
            <h1 className="mt-6 text-4xl md:text-6xl lg:text-7xl font-bold leading-tight">
              Queue North Technologies
            </h1>
            <p className="mt-6 text-lg md:text-2xl text-white/80 max-w-2xl leading-relaxed">
              Business phone, contact center, network, and IT support built around one accountable implementation partner.
            </p>
            <div className="mt-8 flex flex-col sm:flex-row gap-3">
              <Link to="/contact" className="inline-flex h-11 items-center justify-center gap-2 rounded-md bg-white px-5 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors" aria-label="Schedule a consultation">
                Schedule Consultation
                <ArrowRight className="h-4 w-4" aria-hidden="true" />
              </Link>
              <Link to="/services" className="inline-flex h-11 items-center justify-center rounded-md border border-white/45 px-5 text-sm font-semibold text-white hover:bg-white/10 transition-colors" aria-label="View our services">
                View Services
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* Partner Proof */}
      <section className="bg-white border-b border-border py-6">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
            <div className="flex items-center gap-3">
              <span className="flex h-10 w-10 items-center justify-center rounded-md bg-primary-navy">
                <img src="/assets/8x8_Logo_White.svg" alt="8x8 Certified Partner logo" className="h-6 w-6" />
              </span>
              <span className="text-sm font-semibold text-primary-navy">8x8 Certified Partner</span>
            </div>
            <div className="flex items-center gap-3">
              <span className="flex h-10 w-10 items-center justify-center rounded-md bg-section-alt text-primary-navy">
                <ShieldCheck className="h-5 w-5" aria-hidden="true" />
              </span>
              <span className="text-sm font-semibold text-primary-navy">Cisco Certified Partner</span>
            </div>
            <div className="flex items-center gap-3">
              <span className="flex h-10 w-10 items-center justify-center rounded-md bg-section-alt text-primary-navy">
                <Award className="h-5 w-5" aria-hidden="true" />
              </span>
              <span className="text-sm font-semibold text-primary-navy">Veteran Owned</span>
            </div>
            <div className="flex items-center gap-3">
              <span className="font-numeric flex h-10 w-10 items-center justify-center rounded-md bg-section-alt text-lg text-primary-navy">25+</span>
              <span className="text-sm font-semibold text-primary-navy">Years Experience</span>
            </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="h-full transition-all hover:border-primary-blue/40 hover:shadow-md">
                <CardHeader>
                  <div className="flex items-center gap-3 mb-2">
                    <div className="bg-primary-navy/10 p-2 rounded-md" aria-hidden="true">
                      {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" aria-label={service.name}>{service.name}</CardTitle>
                  </div>
                  <CardDescription className="font-medium text-teal-900" aria-label={service.homeDesc}>{service.homeDesc}</CardDescription>
                </CardHeader>
                <CardContent>
                  <div className="flex flex-col gap-2">
                    <Link to={`/services/${service.id}`} className="inline-flex items-center gap-1 text-sm font-semibold text-primary-navy hover:text-primary-blue" aria-label={`Learn more about ${service.name}`}>
                      Learn more
                      <ArrowRight className="h-4 w-4" aria-hidden="true" />
                    </Link>
                  </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>
              <Link to="/contact" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-4 py-2 bg-primary-navy text-white hover:bg-primary-navy-dark transition-colors" aria-label="Request a consultation">
                Request Consultation
              </Link>
            </div>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            <Card className="bg-white/80">
              <CardContent className="pt-6">
                <div className="bg-primary-navy text-white p-3 rounded-md 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 className="bg-white/80">
              <CardContent className="pt-6">
                <div className="bg-primary-navy text-white p-3 rounded-md 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 className="bg-white/80">
              <CardContent className="pt-6">
                <div className="bg-primary-navy text-white p-3 rounded-md 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 className="bg-white/80">
              <CardContent className="pt-6">
                <div className="bg-primary-navy text-white p-3 rounded-md 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] || Building2
              return (
                <Card key={industry.id} className="h-full transition-all hover:border-primary-blue/40 hover:shadow-md">
                  <CardContent className="p-6">
                    <div className="w-14 h-14 rounded-md bg-teal-50 flex items-center justify-center mb-4" aria-hidden="true">
                      <IconComponent className="w-8 h-8 text-teal-600" />
                    </div>
                    <h3 className="text-xl font-semibold text-primary-navy mb-3" aria-label={industry.name}>{industry.name}</h3>
                    <p className="text-sm text-soft-text mb-4" aria-label={industry.homeDesc || 'Industry-specific solutions designed to address your unique challenges and requirements.'}>{industry.homeDesc || 'Industry-specific solutions designed to address your unique challenges and requirements.'}</p>
                    <Link to={`/industries/${industry.id}`} className="inline-flex items-center gap-1 text-sm font-semibold text-primary-navy hover:text-primary-blue" aria-label={`Learn more about ${industry.name} industry solutions`}>
                      Learn more
                      <ArrowRight className="h-4 w-4" aria-hidden="true" />
                    </Link>
                  </CardContent>
                </Card>
              )
            })}
          </div>
        </div>
      </section>

      {/* Final CTA - Free Migration Offer */}
      <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 text-center">
          <h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-6">
            What we'll help you do
          </h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
            <div className="flex items-start gap-3">
              <div className="bg-primary-navy/10 p-2 rounded-md flex-shrink-0">
                <MapPin className="w-5 h-5 text-primary-navy" />
              </div>
              <p className="text-left text-sm md:text-base text-soft-text">
                Identify the features you actually need
              </p>
            </div>
            <div className="flex items-start gap-3">
              <div className="bg-teal-500/10 p-2 rounded-md flex-shrink-0">
                <Users className="w-5 h-5 text-teal-600" />
              </div>
              <p className="text-left text-sm md:text-base text-soft-text">
                Align solutions with operations and budget
              </p>
            </div>
            <div className="flex items-start gap-3">
              <div className="bg-teal-500/10 p-2 rounded-md flex-shrink-0">
                <Network className="w-5 h-5 text-teal-600" />
              </div>
              <p className="text-left text-sm md:text-base text-soft-text">
                Plan deployment, migration, and training
              </p>
            </div>
            <div className="flex items-start gap-3">
              <div className="bg-teal-600/10 p-2 rounded-md flex-shrink-0">
                <ShieldCheck className="w-5 h-5 text-teal-600" />
              </div>
              <p className="text-left text-sm md:text-base text-teal-700 font-semibold">
                Ask how you qualify for our free migration
              </p>
            </div>
          </div>
          <p className="text-lg text-soft-text mb-8 max-w-2xl mx-auto">
            Share a few details and we'll provide clear direction.
          </p>
          <Link to="/contact" className="inline-flex items-center justify-center rounded-md text-sm font-medium h-10 px-6 bg-primary-navy text-white hover:bg-primary-navy-dark transition-colors" aria-label="Request a consultation">
            Request Consultation
          </Link>
        </div>
      </section>
    </>
  )
}

export default Home