const About = () => {
  return (
    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 lg:py-24">
      {/* Page Hero */}
      <section className="mb-16">
        <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>
      </section>

      {/* Company Story */}
      <section className="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-16">
        <div>
          <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 in 2000, 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>
        </div>
        <div>
          <div className="rounded-xl overflow-hidden shadow-lg">
            <img 
              src="/assets/about-image.png" 
              alt="Our Team" 
              className="w-full h-full object-cover"
            />
          </div>
        </div>
      </section>

      {/* Our Values */}
      <section className="mb-16">
        <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-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-lg border border-border bg-card shadow-sm">
              <h3 className="text-xl font-semibold text-primary-navy mb-3">{value.title}</h3>
              <p className="text-soft-text">{value.desc}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Our Expertise */}
      <section className="mb-16">
        <h2 className="text-3xl font-bold text-primary-navy mb-8">Our Expertise</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {[
            '8x8 Certified Partner',
            'VoIP and UCaaS Solutions',
            'Contact Center Implementation',
            'Network Infrastructure',
            'Cloud Migration',
            'Cybersecurity for Communications',
            'Disaster Recovery Planning',
            '24/7 Support & Monitoring',
          ].map((expertise, index) => (
            <div key={index} className="flex items-center gap-3">
              <div className="h-6 w-6 rounded-full bg-primary-navy text-white flex items-center justify-center flex-shrink-0">
                <svg className="h-4 w-4" 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-lg text-text">{expertise}</span>
            </div>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section className="bg-section-alt rounded-xl p-8 md:p-12 text-center">
        <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>
        <a
          href="/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
        </a>
      </section>
    </div>
  )
}

export default About