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

const proofPoints = [
  { label: '25+ years', detail: 'Communications and infrastructure experience', icon: Award, containerClass: '' },
  {
    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',
    containerClass: 'px-2',
  },
  {
    label: 'Cisco Partner',
    detail: 'Networking and communications implementation',
    logo: '/assets/brand/Cisco-Partner-Logo_trasnp_w.png',
    logoAlt: 'Cisco Partner certification logo',
    logoClassName: 'h-full w-full scale-[2]',
    containerClass: 'p-1 overflow-hidden',
  },
  {
    label: 'Veteran-Owned Certified',
    detail: 'Disciplined delivery and direct accountability',
    logo: '/assets/brand/veteran-owned-certified-mark.webp',
    logoAlt: 'SBA logo for Veteran-Owned Certified',
    logoClassName: 'h-full w-full',
    containerClass: 'p-1',
  },
]

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 Us | Veteran-Owned 8x8 Partner | Queue North"
        description="Veteran-owned 8x8 and Cisco Certified Partner with 25+ years in communications, contact center, managed support, and network infrastructure."
        url="https://queuenorth.com/about"
        jsonLd={buildBreadcrumbLd([{ name: 'About', path: '/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="Compass on a dark navigation map"
            className="h-full w-full object-cover object-[66%_top] md:object-[62%_top]"
            loading="eager"
            fetchPriority="high"
            decoding="async"
          />
          <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
              </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#contact-form" className="inline-flex w-full sm:w-auto 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 w-full sm:w-auto 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 w-16 shrink-0 items-center justify-center rounded-md bg-white/10 text-primary-cyan ${point.containerClass}`}>
                        {point.logo ? (
                          <img
                            src={point.logo}
                            alt={point.logoAlt}
                            className={`${point.logoClassName} object-contain`}
                            loading="lazy"
                            decoding="async"
                          />
                        ) : (
                          <Icon className="h-7 w-7" 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>
              <p className="mt-4 text-base leading-relaxed text-soft-text">
                Queue North Technologies provides remote business communications and technology services to organizations throughout the United States. On-site services are available based on project scope and location.
              </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#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"
              >
                Request Consultation
                <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 About
