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

const proofPoints = [
  { label: '25+ years', detail: 'Communications and infrastructure experience', icon: Award },
  { label: '8x8 certified', detail: 'Sales, engineering, build, deployment, and support', icon: BadgeCheck },
  { label: 'Cisco certified', detail: 'Networking and communications implementation', icon: ShieldCheck },
  { label: 'Veteran owned', detail: 'Disciplined delivery and direct accountability', icon: Users },
]

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

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 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="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="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="space-y-4">
                {proofPoints.map((point) => {
                  const Icon = point.icon
                  return (
                    <div key={point.label} className="flex gap-4">
                      <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-white/10 text-primary-cyan">
                        <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>

      {/* Operating Model */}
      <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 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">How we work</p>
              <h2 className="mt-3 text-3xl md:text-4xl font-bold text-primary-navy">
                We bridge strategy, deployment, and long-term ownership.
              </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 bg-white p-6 shadow-sm">
                    <span className="flex h-11 w-11 items-center justify-center rounded-md bg-section-alt text-primary-navy">
                      <Icon className="h-5 w-5" aria-hidden="true" />
                    </span>
                    <h3 className="mt-5 text-xl font-semibold text-primary-navy">{item.title}</h3>
                    <p className="mt-3 text-sm leading-relaxed text-soft-text">{item.desc}</p>
                  </div>
                )
              })}
            </div>
          </div>
        </div>
      </section>

      {/* Meaning */}
      <section className="bg-white py-16 lg:py-20 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.9fr_1.1fr] 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-3xl md:text-4xl font-bold text-primary-navy">
                Queue is stability. North is responsible progress.
              </h2>
            </div>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
              <div className="rounded-md border border-border bg-background p-6">
                <Cpu className="h-7 w-7 text-primary-blue" aria-hidden="true" />
                <h3 className="mt-5 text-xl font-semibold text-primary-navy">Queue</h3>
                <p className="mt-3 text-sm leading-relaxed text-soft-text">
                  Proven, repeatable technology that behaves predictably when customers, staff, and operations depend on it.
                </p>
              </div>
              <div className="rounded-md border border-border bg-background p-6">
                <Compass className="h-7 w-7 text-primary-blue" aria-hidden="true" />
                <h3 className="mt-5 text-xl font-semibold text-primary-navy">North</h3>
                <p className="mt-3 text-sm leading-relaxed text-soft-text">
                  A clear direction forward, with security, governance, supportability, and long-term ownership built into the plan.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Capabilities */}
      <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 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) => (
                <div key={item} className="flex items-center gap-3 rounded-md border border-border bg-white p-4">
                  <CheckCircle2 className="h-5 w-5 shrink-0 text-primary-blue" aria-hidden="true" />
                  <span className="text-sm font-medium text-text">{item}</span>
                </div>
              ))}
            </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">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>
            <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"
            >
              Request Consultation
              <ArrowRight className="h-4 w-4" aria-hidden="true" />
            </Link>
          </div>
        </div>
      </section>
    </>
  )
}

export default About