import { CheckCircle } from "lucide-react"

const highlights = [
  "Locally owned and operated in Wisconsin",
  "24/7/365 monitoring and support",
  "Certified Microsoft, AWS, and Cisco partners",
  "No long-term contracts required",
  "Transparent, predictable pricing",
  "Dedicated account managers",
]

export function About() {
  return (
    <section id="about" className="py-24">
      <div className="max-w-7xl mx-auto px-6">
        <div className="grid lg:grid-cols-2 gap-16 items-center">
          {/* Image/Visual Side */}
          <div className="relative">
            <div className="aspect-[4/3] rounded-lg bg-secondary overflow-hidden">
              <div className="absolute inset-0 flex items-center justify-center">
                <div className="text-center p-8">
                  <div className="w-20 h-20 rounded-full bg-primary/20 flex items-center justify-center mx-auto mb-6">
                    <div className="w-14 h-14 rounded-full bg-primary flex items-center justify-center">
                      <span className="text-primary-foreground font-bold text-2xl">C</span>
                    </div>
                  </div>
                  <p className="text-2xl font-semibold text-foreground mb-2">Est. 2009</p>
                  <p className="text-muted-foreground">Madison, Wisconsin</p>
                </div>
              </div>
            </div>
            {/* Decorative elements */}
            <div className="absolute -bottom-6 -right-6 w-32 h-32 bg-primary/10 rounded-lg -z-10" />
            <div className="absolute -top-6 -left-6 w-24 h-24 border border-primary/30 rounded-lg -z-10" />
          </div>

          {/* Content Side */}
          <div className="space-y-8">
            <div>
              <p className="text-primary font-medium tracking-wider uppercase text-sm mb-4">
                About Us
              </p>
              <h2 className="text-3xl md:text-4xl font-bold mb-6 text-balance">
                Tech expertise with genuine Midwest hospitality
              </h2>
              <p className="text-muted-foreground text-lg leading-relaxed mb-6">
                We are the tech artisans of Wisconsin — a leading IT consultancy helping countless 
                organizations succeed in their most important digital transformations. In our team, 
                there&apos;s always room for more people with that delicious combination of expertise 
                and friendly energy.
              </p>
              <p className="text-muted-foreground text-lg leading-relaxed">
                Founded in Madison, we&apos;ve grown to serve businesses across the entire state, 
                from small startups to large enterprises. Our commitment remains the same: 
                deliver enterprise-grade solutions with small-town service.
              </p>
            </div>

            {/* Highlights */}
            <div className="grid sm:grid-cols-2 gap-4">
              {highlights.map((item, index) => (
                <div key={index} className="flex items-center gap-3">
                  <CheckCircle className="w-5 h-5 text-primary flex-shrink-0" />
                  <span className="text-foreground">{item}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  )
}