import SEO from '@/components/SEO'
import { Link } from 'react-router-dom'
import { ArrowRight, Award, CheckCircle2, Compass, Cpu, Handshake, Headphones, Route, Users, Wrench } from 'lucide-react'

const proofPoints = [
  { label: '25+ years', detail: 'Communications and infrastructure experience', icon: Award, accent: 'text-primary-blue', bg: 'bg-sky-50', border: 'border-t-primary-blue' },
  {
    label: '8x8 Certified Partner',
    detail: 'Sales, engineering, build, deployment, and support',
    logo: '/assets/brand/8x8-logo-white.svg',
    logoAlt: '8x8 Certified Partner logo',
    logoClassName: 'h-6 w-14',
  },
  {
    label: 'Cisco Partner',
    detail: 'Networking and communications implementation',
    logo: '/assets/brand/cisco-partner-logo-white.svg',
    logoAlt: 'Cisco Partner certification logo',
    logoClassName: 'h-10 w-10',
  },
  { label: 'Veteran owned', detail: 'Disciplined delivery and direct accountability', icon: Users, accent: 'text-amber-600', bg: 'bg-amber-50', border: 'border-t-accent-gold' },
]

const operatingPrinciples = [
  {
    title: 'Own the outcome',
    desc: 'We stay close to implementation details so decisions survive real production conditions.',
    icon: Wrench,
    accent: 'text-primary-blue',
    bg: 'bg-sky-50',
    border: 'border-t-primary-blue',
  },
  {
    title: 'Recommend what fits',
    desc: 'We align platforms, budgets, users, and support realities before anyone signs a contract.',
    icon: Handshake,
    accent: 'text-teal-600',
    bg: 'bg-teal-50',
    border: 'border-t-teal-500',
  },
  {
    title: 'Design for operations',
    desc: 'Documentation, migration planning, training, and escalation paths are part of the work.',
    icon: Route,
    accent: 'text-cyan-600',
    bg: 'bg-cyan-50',
    border: 'border-t-cyan-400',
  },
  {
    title: 'Support after go-live',
    desc: 'Our team remains accountable after deployment, when reliability starts to matter most.',
    icon: Headphones,
    accent: 'text-amber-600',
    bg: 'bg-amber-50',
    border: 'border-t-accent-gold',
  },
]

const capabilities = [
  'UCaaS and cloud PBX migration',
  'Contact center implementation',
  'Network infrastructure and cabling',
  'Wireless access design',
  'Vendor-neutral consulting',
  'Managed support and monitoring',
  'Cloud migration support',
  'Disaster recovery planning',
]

const nameMeanings = [
  {
    title: 'Queue',
    desc: 'Rooted in technology that works - proven, stable, and repeatable. We focus on environments that behave predictably in real production conditions.',
    icon: Cpu,
    border: 'border-t-primary-blue',
    iconWrap: 'bg-sky-50 text-primary-blue',
  },
  {
    title: 'North',
    desc: 'A responsible direction forward - evaluating and adopting new technology carefully, with governance, security, and long-term ownership in mind.',
    icon: Compass,
    border: 'border-t-teal-500',
    iconWrap: 'bg-teal-50 text-teal-600',
  }
]

const About = () => {
  return (
    <>
      <SEO
        title="About Queue North | Veteran-Owned 8x8 Partner — 25+ Years of Service"
        description="Queue North Technologies is a veteran-owned 8x8 and Cisco Certified Partner with 25+ years of experience in communications, contact center, support, and network infrastructure."
        url="https://queuenorth.com/about"
      />

      {/* Page 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/about-image.webp"
            alt="Queue North team member reviewing communications infrastructure"
            className="h-full w-full object-cover object-center"
          />
          <div className="absolute inset-0 bg-primary-navy/88" />
          <div className="absolute inset-0 bg-gradient-to-r from-primary-navy via-primary-navy/95 to-primary-navy/60" />
        </div>
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-[1fr_0.75fr] gap-10 lg:gap-14 items-center">
            <div>
              <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">
                <Compass className="h-4 w-4" aria-hidden="true" />
                About Queue North
              </div>
              <h1 className="mt-6 text-4xl md:text-5xl lg:text-6xl font-bold leading-tight">
                Accountable communications infrastructure, built around how your business actually works.
              </h1>
              <p className="mt-6 text-lg md:text-xl text-white/75 max-w-3xl leading-relaxed">
                Queue North helps organizations choose, implement, and support the phone, contact center, network, and IT systems that keep daily operations moving.
              </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">
                  Start a Conversation
                  <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/40 px-5 text-sm font-semibold text-white hover:bg-white/10 transition-colors">
                  View Services
                </Link>
              </div>
            </div>

            <div className="rounded-md border border-white/15 bg-white/10 p-6 shadow-xl backdrop-blur">
              <h2 className="text-lg font-semibold mb-5">At a glance</h2>
              <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-1">
                {proofPoints.map((point) => {
                  const Icon = point.icon
                  return (
                    <div key={point.label} className="flex gap-4 rounded-md border border-white/10 bg-white/5 p-3">
                      <span className={`flex h-10 shrink-0 items-center justify-center rounded-md bg-white/10 text-primary-cyan ${point.logo ? 'w-16 px-2' : 'w-10'}`}>
                        {point.logo ? (
                          <img
                            src={point.logo}
                            alt={point.logoAlt}
                            className={`${point.logoClassName} object-contain`}
                          />
                        ) : (
                          <Icon className="h-5 w-5" aria-hidden="true" />
                        )}
                      </span>
                      <div>
                        <h3 className="font-semibold">{point.label}</h3>
                        <p className="text-sm text-white/70">{point.detail}</p>
                      </div>
                    </div>
                  )
                })}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Name */}
      <section className="bg-white py-16 lg:py-24 border-b border-border">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-[0.78fr_1.22fr] gap-10 lg:gap-14 items-start">
            <div>
              <p className="text-sm font-semibold uppercase tracking-wide text-primary-blue">The name</p>
              <h2 className="mt-3 text-4xl font-bold leading-tight text-primary-navy md:text-5xl">Queue North</h2>
              <p className="mt-4 text-xl font-semibold text-soft-text">Where Stability Meets Direction</p>
              <p className="mt-6 text-lg leading-relaxed text-soft-text">
                The name reflects how we approach technology: dependable systems first, then a responsible path forward.
              </p>
            </div>

            <div className="grid grid-cols-1 gap-5 md:grid-cols-2">
              {nameMeanings.map((item) => {
                const Icon = item.icon
                return (
                  <div key={item.title} className={`rounded-md border border-border border-t-[3px] bg-background p-7 shadow-sm ${item.border}`}>
                    <span className={`flex h-12 w-12 items-center justify-center rounded-md ${item.iconWrap}`}>
                      <Icon className="h-6 w-6" aria-hidden="true" />
                    </span>
                    <h3 className="mt-6 text-3xl font-bold text-primary-navy">{item.title}</h3>
                    <p className="mt-4 text-base leading-relaxed text-soft-text">{item.desc}</p>
                  </div>
                )
              })}
            </div>
          </div>
        </div>
      </section>

      {/* Operating Model */}
      <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="grid grid-cols-1 lg:grid-cols-[0.8fr_1.2fr] gap-10 lg:gap-14 items-start">
            <div>
              <p className="text-sm font-semibold uppercase tracking-wide text-primary-blue">In practice</p>
              <h2 className="mt-3 text-3xl md:text-4xl font-bold text-primary-navy">
                Stability first, then the right path forward.
              </h2>
              <p className="mt-5 text-lg leading-relaxed text-soft-text">
                Many businesses are asked to pick platforms before anyone has mapped the operational reality. Queue North starts with the environment, the people using it, and the support model that has to carry it after launch.
              </p>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
              {operatingPrinciples.map((item) => {
                const Icon = item.icon
                return (
                  <div key={item.title} className={`rounded-md border border-border border-t-[3px] bg-white p-6 shadow-sm transition-all hover:shadow-md ${item.border}`}>
                    <div className="flex items-center gap-4">
                      <span className={`flex h-11 w-11 shrink-0 items-center justify-center rounded-md ${item.bg} ${item.accent}`}>
                        <Icon className="h-5 w-5" aria-hidden="true" />
                      </span>
                      <h3 className="text-left text-xl font-semibold text-primary-navy">{item.title}</h3>
                    </div>
                    <p className="mt-3 text-sm leading-relaxed text-soft-text">{item.desc}</p>
                  </div>
                )
              })}
            </div>
          </div>
        </div>
      </section>

      {/* Capabilities */}
      <section className="bg-white py-16 lg:py-24 border-y border-border">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-[0.75fr_1.25fr] gap-10 lg:gap-14 items-start">
            <div>
              <p className="text-sm font-semibold uppercase tracking-wide text-primary-blue">Expertise</p>
              <h2 className="mt-3 text-3xl md:text-4xl font-bold text-primary-navy">
                Practical coverage from assessment through support.
              </h2>
              <p className="mt-5 text-lg leading-relaxed text-soft-text">
                We work across the pieces that make communications reliable: platforms, networks, users, support process, and vendor coordination.
              </p>
            </div>

            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
              {capabilities.map((item, index) => (
                <div key={item} className="flex items-center gap-3 rounded-md border border-border bg-white p-4 shadow-sm">
                  <CheckCircle2 className={`h-5 w-5 shrink-0 ${index % 2 === 0 ? 'text-primary-blue' : 'text-teal-600'}`} aria-hidden="true" />
                  <span className="text-sm font-medium text-text">{item}</span>
                </div>
              ))}
            </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">Need a cleaner path forward?</h2>
              <p className="mt-3 text-white/70 max-w-2xl">
                Talk with a team that can help evaluate the current state, recommend the right path, and stay accountable after deployment.
              </p>
            </div>
            <div className="mt-7 flex flex-col gap-3 sm:flex-row lg:mt-0 lg:flex-shrink-0">
              <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"
              >
                Request Consultation
                <ArrowRight className="h-4 w-4" aria-hidden="true" />
              </Link>
              <a
                href="tel:+13217308020"
                className="inline-flex 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 About