import { Helmet } from 'react-helmet-async'
import { Link } from 'react-router-dom'

const About = () => {
  return (
    <>
      <Helmet>
        <title>About Queue North | Veteran-Owned 8x8 Partner — 25+ Years of Service</title>
        <meta name="description" content="Queue North Technologies is a veteran-owned 8x8 and Cisco Certified Partner with 25+ years of experience. Learn our story, values, and expertise." />
        <meta property="og:title" content="About Queue North | Veteran-Owned 8x8 Partner — 25+ Years of Service" />
        <meta property="og:description" content="Veteran-owned 8x8 and Cisco Certified Partner with 25+ years of experience." />
        <meta property="og:url" content="https://queuenorth.com/about" />
        <meta property="og:type" content="website" />
        <meta property="og:image" content="https://queuenorth.com/assets/og-image.png" />
        <meta property="og:site_name" content="Queue North Technologies" />
      </Helmet>
      {/* Page Hero */}
      <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>
            <h1 className="text-4xl md:text-5xl font-bold text-primary-navy mb-6">About Queue North</h1>
            <p className="text-xl text-soft-text max-w-3xl">
              We're communications and infrastructure partners who cut through the vendor noise to deliver what actually works for your business.
            </p>
          </div>
        </div>
      </section>

      {/* Company Story */}
      <section className="bg-background py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="max-w-3xl">
              <h2 className="text-3xl font-bold text-primary-navy mb-4">Our Story</h2>
              <p className="text-lg text-soft-text mb-6 leading-relaxed">
                Founded by military veterans, Queue North Technologies began with a simple mission: help businesses navigate the complex world of communications technology. What started as a small team of communications specialists has grown into a full-service provider for SMB and enterprise organizations across multiple industries.
              </p>
              <p className="text-lg text-soft-text mb-6 leading-relaxed">
                Our journey began when our founders saw too many businesses paying too much for solutions that didn't fit their actual needs. We believed in a different approach — one focused on understanding your business challenges first, then selecting or integrating the right technologies to solve them.
              </p>
              <p className="text-lg text-soft-text leading-relaxed">
                Today, we continue that mission as an 8x8 Certified Partner, helping organizations modernize their communications, streamline their operations, and focus on what matters most — their customers and their growth.
              </p>
              <p className="text-lg text-soft-text mt-4 leading-relaxed">
                We continue the mission — bringing the same discipline, reliability, and commitment to every client relationship that we brought to our service.
              </p>
          </div>
        </div>
      </section>

      {/* The Meaning Behind Queue North */}
      <section className="bg-primary-navy py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">The Meaning Behind Queue North</h2>
            <p className="text-lg text-white/70 max-w-2xl mx-auto leading-relaxed">
              Queue is stability. North is responsible progress. The compass is how we guide customers with both.
            </p>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
            <div className="bg-white/10 border border-white/20 rounded-md p-8">
              <div className="w-12 h-12 bg-primary-cyan/20 rounded-md flex items-center justify-center mb-5">
                <svg className="h-6 w-6 text-primary-cyan" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
                  <rect x="7" y="7" width="10" height="10" rx="1" strokeLinejoin="round" />
                  <path strokeLinecap="round" strokeLinejoin="round" d="M9 7V5M12 7V5M15 7V5M9 17v2M12 17v2M15 17v2M7 9H5M7 12H5M7 15H5M17 9h2M17 12h2M17 15h2" />
                </svg>
              </div>
              <h3 className="text-xl font-bold text-primary-cyan mb-3">Queue</h3>
              <p className="text-white/80 leading-relaxed">
                Rooted in technology that works — proven, stable, and repeatable. We focus on environments that behave predictably in real production conditions.
              </p>
            </div>
            <div className="bg-white/10 border border-white/20 rounded-md p-8">
              <div className="w-12 h-12 bg-primary-cyan/20 rounded-md flex items-center justify-center mb-5">
                <svg className="h-6 w-6 text-primary-cyan" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
                  <path strokeLinecap="round" strokeLinejoin="round" d="M5 10l7-7m0 0l7 7m-7-7v18" />
                </svg>
              </div>
              <h3 className="text-xl font-bold text-primary-cyan mb-3">North</h3>
              <p className="text-white/80 leading-relaxed">
                A <strong className="text-white font-semibold">responsible direction forward</strong> — evaluating and adopting new technology carefully, with governance, security, and long-term ownership in mind.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Our Values */}
      <section className="bg-background py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold text-primary-navy mb-8 text-center">Our Values</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {[
              { title: 'Business First', desc: 'We focus on your business outcomes, not just technology' },
              { title: 'Honesty', desc: 'We tell you what you need, not just what we can sell' },
              { title: 'Partnership', desc: 'We work with you, not just for you' },
              { title: 'Expertise', desc: 'Our team has real, proven experience in your industry' },
              { title: 'Reliability', desc: 'When we say we will do something, we do it' },
              { title: 'Support', desc: 'Our job doesn\'t end when installation completes' },
            ].map((value, index) => (
              <div key={index} className="p-6 rounded-md border border-border bg-card shadow-sm hover:shadow-md transition-shadow">
                <h3 className="text-xl font-semibold text-primary-navy mb-3">{value.title}</h3>
                <p className="text-soft-text">{value.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Our Expertise */}
      <section className="bg-background py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <h2 className="text-3xl font-bold text-primary-navy mb-8 text-center">Our Expertise</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            {[
              '8x8 Certified Partner',
              'VoIP and UCaaS Solutions',
              'Contact Center Implementation',
              'Network Infrastructure',
              'Cloud Migration',
              'Vendor-Neutral Consulting',
              'Disaster Recovery Planning',
              '24/7 Support & Monitoring',
            ].map((expertise, index) => (
              <div key={index} className="flex items-center gap-2 p-3 rounded-md border border-border bg-card">
                <div className="h-5 w-5 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0">
                  <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                  </svg>
                </div>
                <span className="text-sm font-medium text-text">{expertise}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="bg-section-alt py-16">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
          <div>
            <h2 className="text-3xl md:text-4xl font-bold text-primary-navy mb-6">Ready to Learn More?</h2>
            <p className="text-xl text-soft-text mb-8 max-w-2xl mx-auto">
              Schedule a free consultation with our communications experts to discuss your needs.
            </p>
            <Link
              to="/contact"
              className="inline-block bg-primary-navy text-white px-8 py-3 rounded-md font-bold text-lg hover:bg-primary-navy-dark transition-colors"
            >
              Request Consultation
            </Link>
          </div>
        </div>
      </section>
    </>
  )
}

export default About