import SEO from '@/components/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 Industries = () => {
  return (
    <>
      <SEO
        title="Industries We Serve | Queue North Technologies"
        description="Queue North Technologies serves healthcare, retail, manufacturing, education, and finance industries with tailored communications and IT solutions."
        url="https://queuenorth.com/industries"
      />

      {/* Hero */}
      <section className="bg-primary-navy py-12 lg:py-20 text-white">
        <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"
              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-20">
        <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-6">
            {industries.map((industry) => {
              const Icon = iconMap[industry.icon] || Building2
              return (
                <div
                  key={industry.id}
                  className="group flex flex-col rounded-md border border-border bg-white p-8 shadow-sm hover:shadow-md hover:border-primary-navy/30 transition-all"
                >
                  <div className="flex h-14 w-14 items-center justify-center rounded-md bg-primary-navy/10 mb-6 flex-shrink-0">
                    <Icon className="h-7 w-7 text-primary-navy" 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-primary-navy py-14 text-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6">
            <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>
            <Link
              to="/contact"
              className="inline-flex 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 flex-shrink-0"
            >
              Talk to a Specialist
              <ArrowRight className="h-4 w-4" aria-hidden="true" />
            </Link>
          </div>
        </div>
      </section>
    </>
  )
}

export default Industries