import { useEffect, useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Award, Target, Users, Lightbulb } from "lucide-react";

const About = () => {
  const [scrollY, setScrollY] = useState(0);

  useEffect(() => {
    const handleScroll = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);
  const values = [
    {
      icon: Award,
      title: "Excellence",
      description: "Delivering the highest quality inspection services with certified professionals and cutting-edge technology."
    },
    {
      icon: Target,
      title: "Precision",
      description: "Accurate, detailed inspections that provide actionable insights for optimal operational safety."
    },
    {
      icon: Users,
      title: "Partnership",
      description: "Building long-term relationships through reliable service, transparent communication, and expert guidance."
    },
    {
      icon: Lightbulb,
      title: "Innovation",
      description: "Continuously advancing our methods and technology to provide industry-leading inspection solutions."
    }
  ];

  const certifications = [
    "AWS Certified Welding Inspector",
    "ASNT Level III Certified",
    "API 510 Pressure Vessel Inspector",
    "API 570 Piping Inspector",
    "NACE Corrosion Specialist",
    "ISO 9001:2015 Quality Management"
  ];

  return (
    <section id="about" className="diagonal-cut-bottom py-24 bg-background">
      <div 
        className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 parallax-element"
        style={{ transform: `translateY(${scrollY * 0.05}px)` }}
      >
        {/* Section Header */}
        <div className="text-center mb-16">
          <h2 className="text-4xl md:text-5xl font-bold text-foreground mb-6">
            About <span className="text-glow">NQS Inspection</span>
          </h2>
          <p className="text-xl text-muted-foreground max-w-2xl mx-auto">
            Your trusted partner for industrial inspection services across Texas.
          </p>
        </div>

        {/* Main Content Grid */}
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 mb-16">
          {/* Left Column - Mission & Vision */}
          <div className="space-y-8">
            <div>
              <h3 className="text-2xl font-bold text-foreground mb-4">Our Mission</h3>
              <p className="text-muted-foreground leading-relaxed">
                At NQS Inspection Ltd, we are dedicated to providing exceptional non-destructive 
                testing and industrial inspection services that ensure the safety, reliability, 
                and integrity of critical infrastructure. Our certified professionals utilize 
                state-of-the-art technology and proven methodologies to deliver accurate, 
                actionable insights that help our clients maintain operational excellence.
              </p>
            </div>

            <div>
              <h3 className="text-2xl font-bold text-foreground mb-4">Our Vision</h3>
              <p className="text-muted-foreground leading-relaxed">
                To be the leading industrial inspection company in Texas, recognized for 
                technical expertise and commitment to safety.
              </p>
            </div>

            {/* Background Image */}
            <div 
              className="rounded-lg h-48 bg-cover bg-center relative overflow-hidden"
              style={{
                backgroundImage: `url('/lovable-uploads/0a023c3c-76e5-4475-a0de-b3e0891c9d50.png')`,
              }}
            >
              <div className="absolute inset-0 bg-gradient-to-r from-background/80 to-primary/20"></div>
            </div>
          </div>

          {/* Right Column - Values & Certifications */}
          <div className="space-y-8">
            <div>
              <h3 className="text-2xl font-bold text-foreground mb-6">Core Values</h3>
              <div className="grid grid-cols-2 gap-4">
                {values.map((value, index) => {
                  const IconComponent = value.icon;
                  return (
                    <Card key={index} className="industrial-card">
                      <CardContent className="p-4">
                        <div className="flex items-center space-x-3">
                          <div className="w-8 h-8 bg-primary/10 rounded-lg flex items-center justify-center flex-shrink-0">
                            <IconComponent className="w-4 h-4 text-primary" />
                          </div>
                          <div>
                            <h4 className="font-semibold text-foreground text-sm">{value.title}</h4>
                          </div>
                        </div>
                      </CardContent>
                    </Card>
                  );
                })}
              </div>
            </div>

            <div>
              <h3 className="text-2xl font-bold text-foreground mb-6">Certifications</h3>
              <div className="flex flex-wrap gap-2 mb-6">
                {certifications.slice(0, 4).map((cert, index) => (
                  <Badge 
                    key={index} 
                    variant="secondary" 
                    className="bg-primary/10 text-primary border-primary/30 text-xs"
                  >
                    {cert}
                  </Badge>
                ))}
              </div>
            </div>

            {/* Stats */}
            <div className="grid grid-cols-2 gap-4">
              <div className="text-center p-4 bg-card rounded-lg border border-border">
                <div className="text-2xl font-bold text-glow mb-1">500+</div>
                <div className="text-sm text-muted-foreground">Projects Completed</div>
              </div>
              <div className="text-center p-4 bg-card rounded-lg border border-border">
                <div className="text-2xl font-bold text-glow mb-1">99.9%</div>
                <div className="text-sm text-muted-foreground">Accuracy Rate</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default About;