import SEO from '@/components/SEO'
import { buildBreadcrumbLd } from '@/lib/seo'
import { industries } from '@/data/industries'
import { ArrowRight, Building2, CheckCircle2, HeartPulse, ShoppingCart, Factory, Landmark } from 'lucide-react'
import { Link } from 'react-router-dom'

const iconMap = {
  'heart-pulse': HeartPulse,
  'shopping-cart': ShoppingCart,
  'factory': Factory,
  'landmark': Landmark,
}

const industryAccentStyles = [
  { card: 'border-t-[3px] border-t-rose-400 hover:border-rose-400/60', iconWrap: 'bg-rose-50', icon: 'text-rose-600' },
  { card: 'border-t-[3px] border-t-primary-blue hover:border-primary-blue/50', iconWrap: 'bg-sky-50', icon: 'text-primary-blue' },
  { card: 'border-t-[3px] border-t-accent-gold hover:border-accent-gold/60', iconWrap: 'bg-amber-50', icon: 'text-amber-600' },
  { card: 'border-t-[3px] border-t-teal-500 hover:border-teal-500/50', iconWrap: 'bg-teal-50', icon: 'text-teal-600' },
]

const Industries = () => {
  return (
    <>
      <SEO
        title="Industries We Serve | Queue North"
        description="Queue North Technologies serves healthcare, retail, manufacturing, education, and finance industries with tailored communications and IT solutions."
        url="https://queuenorth.com/industries"
        jsonLd={buildBreadcrumbLd([{ name: 'Industries', path: '/industries' }])}
      />

      {/* Hero */}
      <section className="relative isolate overflow-hidden bg-primary-navy py-16 lg:py-24 text-white">
        <div className="absolute inset-0 -z-10">
          <img
            src="/assets/local-networking.webp"
            alt="Network infrastructure used by businesses across industries"
            className="h-full w-full object-cover object-center"
            loading="eager"
            fetchPriority="high"
            decoding="async"
          />
          <div className="absolute inset-0 bg-primary-navy/82" />
          <div className="absolute inset-0 bg-gradient-to-r from-primary-navy via-primary-navy/92 to-primary-navy/45" />
        </div>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <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 mb-6">
              <Building2 className="h-4 w-4" aria-hidden="true" />
              Industries
            </div>
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
              Built around how your industry actually works.
            </h1>
            <p className="text-lg md:text-xl text-white/75 max-w-2xl leading-relaxed mb-8">
              Communications and infrastructure solutions shaped by the compliance, workflow, and connectivity demands of your specific environment.
            </p>
            <Link
              to="/contact#contact-form"
              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"
            >
              Talk to a Specialist
              <ArrowRight className="h-4 w-4" aria-hidden="true" />
            </Link>
          </div>
        </div>
      </section>

      {/* Industries Grid */}
      <section className="bg-background py-16 lg:py-24">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="mb-10 max-w-3xl">
            <p className="text-sm font-semibold uppercase tracking-wide text-primary-blue">Industry fit</p>
            <h2 className="mt-3 text-3xl md:text-4xl font-bold text-primary-navy">Communications needs change by environment.</h2>
            <p className="mt-4 text-lg text-soft-text">
              We adapt platform, network, and support recommendations to the way your teams actually operate.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            {industries.map((industry, index) => {
              const Icon = iconMap[industry.icon] || Building2
              const accent = industryAccentStyles[index % industryAccentStyles.length]

              return (
                <div
                  key={industry.id}
                  className={`group flex flex-col rounded-md border border-border bg-white p-8 shadow-sm hover:shadow-md transition-all ${accent.card}`}
                >
                  <div className={`flex h-14 w-14 items-center justify-center rounded-md ${accent.iconWrap} mb-6 flex-shrink-0`}>
                    <Icon className={`h-7 w-7 ${accent.icon}`} aria-hidden="true" />
                  </div>
                  <h2 className="text-2xl font-bold text-primary-navy mb-3">{industry.name}</h2>
                  <p className="text-soft-text leading-relaxed mb-6">{industry.shortDesc}</p>
                  <ul className="space-y-2.5 mb-8 flex-1">
                    {industry.solutions.slice(0, 3).map((solution, i) => (
                      <li key={i} className="flex items-start gap-3 text-sm text-text">
                        <CheckCircle2 className="h-4 w-4 text-primary-blue flex-shrink-0 mt-0.5" aria-hidden="true" />
                        {solution}
                      </li>
                    ))}
                  </ul>
                  <Link
                    to={`/industries/${industry.id}`}
                    className="inline-flex items-center gap-1.5 text-sm font-semibold text-primary-navy hover:text-primary-blue transition-colors"
                    aria-label={`Learn more about ${industry.name} solutions`}
                  >
                    See how we help
                    <ArrowRight className="h-4 w-4" aria-hidden="true" />
                  </Link>
                </div>
              )
            })}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="bg-section-alt py-16 lg:py-24">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="rounded-md bg-primary-navy px-6 py-10 text-white shadow-md sm:px-8 lg:flex lg:items-center lg:justify-between lg:gap-10 lg:px-10">
            <div>
              <h2 className="text-3xl md:text-4xl font-bold mb-3">Don't see your industry?</h2>
              <p className="text-white/70 max-w-2xl">
                We work with businesses across all sectors. If you have specific compliance, connectivity, or workflow requirements, let's talk.
              </p>
            </div>
            <div className="mt-7 flex flex-col gap-3 sm:flex-row lg:mt-0 lg:flex-shrink-0">
              <Link
                to="/contact#contact-form"
                className="inline-flex w-full sm:w-auto h-11 items-center justify-center gap-2 rounded-md bg-white px-6 text-sm font-semibold text-primary-navy hover:bg-section-alt transition-colors"
              >
                Talk to a Specialist
                <ArrowRight className="h-4 w-4" aria-hidden="true" />
              </Link>
              <a
                href="tel:+13217308020"
                className="inline-flex w-full sm:w-auto h-11 items-center justify-center rounded-md border border-white/35 px-6 text-sm font-semibold text-white hover:bg-white/10 transition-colors"
              >
                Call (321) 730-8020
              </a>
            </div>
          </div>
        </div>
      </section>
    </>
  )
}

export default Industries