import { useEffect, useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Quote, Building2, Zap, MapPin } from "lucide-react";
import Navigation from "@/components/Navigation";
import Footer from "@/components/Footer";

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

  useEffect(() => {
    const handleScroll = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  const pipingProjects = [
    { name: "Frontier Generating station", contractor: "Black and Veatch", location: "College Station, TX" },
    { name: "Valley Re-powering Station", contractor: "Kiewit", location: "Los Angeles, CA" },
    { name: "Tenasta Fluvanna", contractor: "Kiewit", location: "Virginia" },
    { name: "Forney Power", contractor: "Duke/Fluor Daniel", location: "Forney, TX" },
    { name: "Calpine", contractor: "Duke/Fluor Daniel", location: "Oneta, OK" },
    { name: "Marion", contractor: "Duke/Fluor Daniel", location: "New Braunsfels, TX" },
    { name: "Permian", contractor: "Kiewit", location: "Odessa, TX" },
    { name: "Florida Power", contractor: "Duke/ Fluor Daniel", location: "Bastrop, TX" },
    { name: "Chuck Lindsey", contractor: "Fluor Power", location: "Las Vegas, NV" },
    { name: "Palomar", contractor: "Kiewit", location: "Escondido, CA" },
    { name: "Flint Hill expansion", contractor: "Kiewit Industrial", location: "Minneapolis, MN" },
    { name: "Lake Side Power", contractor: "Teton Industrial", location: "Prove, UT" },
    { name: "Cross Generating", contractor: "Teton Industrial", location: "Cross, SC" },
    { name: "Navasota Quail Run FASE 1", contractor: "Teton Industrial", location: "Odessa, TX" },
    { name: "Navasota Colorado Bend FASE 1", contractor: "Teton Industrial", location: "Wharton, TX" },
    { name: "Navasota Quail Run FASE 2", contractor: "Teton Industrial", location: "Odessa, TX" },
    { name: "Navasota Colorado Bend FASE 2", contractor: "Teton Industrial", location: "Wharton, TX" },
    { name: "Dallman Generating station 4", contractor: "KBV", location: "Springfield, IL" },
    { name: "Bartow Repowering Project", contractor: "TIC/The Industrial Company", location: "St Petersburg, FL" },
    { name: "Total Refinery Expansion", contractor: "Teton Industrial", location: "Port Arthur, TX" },
    { name: "John Sever", contractor: "Kiewit", location: "Rogersville, TN" },
    { name: "Progress Energy", contractor: "TIC/The Industrial Company", location: "Goldsboro, NC" },
    { name: "Langley Gulch", contractor: "TIC/The Industrial Company", location: "Boise, ID" },
    { name: "Walnut Creek", contractor: "Kiewit Power", location: "City of In, CA" },
    { name: "Chouteau Power Unit II", contractor: "TIC/The Industrial Company", location: "Chouteau, OK" },
    { name: "J. Lamar Stall Project", contractor: "TIC/The Industrial Company", location: "Shreveport, LA" },
    { name: "La Cygne Environmental Retrofit", contractor: "Kiewit Power", location: "La Cygne, KS" },
    { name: "Columbia AQCS Project", contractor: "Black & Veatch Construction", location: "Portage, WI" },
    { name: "LGE Cane Run Bluegrass Project", contractor: "PCL", location: "Louisville, KY" },
    { name: "Woodbridge Energy Project", contractor: "Kiewit", location: "Keasbey, NJ" },
    { name: "Wildcat Energy Center", contractor: "PCL", location: "Rising Sun, MD" },
    { name: "St Joseph's Energy Center", contractor: "Kiewit", location: "New Carlisle, IN" },
    { name: "Westmoreland Energy Center", contractor: "Black & Veatch Construction", location: "Smithton, PA" },
    { name: "Oregon Clean Energy", contractor: "Black & Veatch Construction", location: "Oregon, OH" },
    { name: "TVA Paradise", contractor: "Kiewit", location: "Paradise, KY" },
    { name: "TVA Allen", contractor: "Kiewit", location: "Memphis, TN" },
    { name: "Naheola Energy", contractor: "TIC", location: "Pennington, AL" },
    { name: "Birdsboro Energy Center", contractor: "Kiewit", location: "Birdsboro, PA" },
    { name: "Fairview Energy Center", contractor: "Kiewit", location: "Johnstown, PA" },
    { name: "Hickory Run Energy Center", contractor: "Kiewit", location: "New Castle, PA" }
  ];

  const offshoreProjects = [
    { client: "Exxon", project: "Heritage & Harmony", contractor: "Gulf Marine Fabricators" },
    { client: "Mobile", project: "Green Canyon", contractor: "Gulf Marine Fabricators" },
    { client: "Shell Offshore", project: "Auger project", contractor: "Aker Kiewit GMF" },
    { client: "Shell Offshore", project: "Mars Project", contractor: "Aker Kiewit GMF" },
    { client: "Shell Offshore", project: "Ram Powell", contractor: "Aker Kiewit GMF" },
    { client: "Shell Offshore", project: "Ursa project", contractor: "Aker Kiewit GMF" },
    { client: "BP–Deepwater", project: "Holstein project", contractor: "Technip Gulf Marine" },
    { client: "Kerr McGee \"Spar\"", project: "Red Hawk project", contractor: "Technip Gulf Marine" },
    { client: "Chevron", project: "project", contractor: "Technip Gulf Marine" }
  ];

  return (
    <div className="min-h-screen bg-background">
      <Navigation />
      {/* Hero Section */}
      <section className="relative py-24 bg-background dark-section jagged-divider-bottom">
        <div 
          className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 parallax-element"
          style={{ transform: `translateY(${scrollY * 0.1}px)` }}
        >
          <div className="text-center mb-16">
            <h1 className="text-4xl md:text-6xl font-bold text-white mb-6">
              What We <span className="text-glow">Do</span>
            </h1>
            <p className="text-xl text-gray-200 max-w-3xl mx-auto leading-relaxed">
              Since 2005, we have provided NDE expertise to our clients in Petro/Chem and Power Generation. 
              We bring unmatched quality at the most competitive pricing.
            </p>
          </div>
        </div>
      </section>

      {/* Mission Section */}
      <section className="light-section 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-2 gap-16 items-center">
            <div>
              <h2 className="text-3xl md:text-4xl font-bold mb-6">
                Our <span className="text-glow">Mission</span>
              </h2>
              <p className="text-lg text-gray-700 leading-relaxed">
                At NQS Inspection, Ltd. it is our mission to obtain state of the art procedures and proven NDE techniques 
                in order to present the best possible results along with the highest reliability, accuracy, and integrity. 
                Assuring our customers that their plant structures and components possess the height of integrity required 
                by their engineer's, their codes, and their environment.
              </p>
            </div>
            
            {/* Testimonial */}
            <div className="bg-white/80 backdrop-blur-sm border border-gray-200 rounded-2xl p-8">
              <Quote className="w-8 h-8 text-primary mb-4" />
              <blockquote className="text-lg text-gray-800 italic mb-6">
                "We had set our expectations pretty high when it came to Quality for our Project. 
                NQS came in and exceeded them in every measurable way possible."
              </blockquote>
              <cite className="text-sm font-semibold text-primary">
                — PQM Wyatt Field Service
              </cite>
            </div>
          </div>
        </div>
      </section>

      {/* Achievements Section */}
      <section className="py-24 bg-background dark-section">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16">
            <h2 className="text-3xl md:text-4xl font-bold text-white mb-6">
              What We've <span className="text-glow">Achieved</span>
            </h2>
          </div>

          {/* Piping Projects History */}
          <div className="mb-16">
            <div className="flex items-center mb-8">
              <Building2 className="w-6 h-6 text-primary mr-3" />
              <h3 className="text-2xl font-bold text-white">Piping Projects History</h3>
            </div>
            
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              {pipingProjects.map((project, index) => (
                <Card key={index} className="industrial-card bg-card/80 backdrop-blur-sm border-white/20">
                  <CardContent className="p-4">
                    <h4 className="font-semibold text-white text-sm mb-2">{project.name}</h4>
                    <p className="text-xs text-primary mb-1">{project.contractor}</p>
                    <div className="flex items-center text-xs text-gray-300">
                      <MapPin className="w-3 h-3 mr-1" />
                      {project.location}
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          </div>

          {/* Offshore Projects */}
          <div className="mb-16">
            <div className="flex items-center mb-8">
              <Zap className="w-6 h-6 text-primary mr-3" />
              <h3 className="text-2xl font-bold text-white">Major Offshore Construction Projects</h3>
            </div>
            <p className="text-gray-300 mb-8">
              Some of the major offshore construction projects NQS has participated in over the last 20 years:
            </p>
            
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
              {offshoreProjects.map((project, index) => (
                <Card key={index} className="industrial-card bg-card/80 backdrop-blur-sm border-white/20">
                  <CardContent className="p-4">
                    <h4 className="font-semibold text-white text-sm mb-2">{project.client}</h4>
                    <p className="text-xs text-gray-300 mb-1">{project.project}</p>
                    <p className="text-xs text-primary">{project.contractor}</p>
                  </CardContent>
                </Card>
              ))}
            </div>

            {/* KEPPEL Amfels */}
            <Card className="industrial-card bg-card/80 backdrop-blur-sm border-white/20 max-w-2xl mx-auto">
              <CardContent className="p-6 text-center">
                <h4 className="font-semibold text-white text-lg mb-2">KEPPEL Amfels</h4>
                <p className="text-gray-300">
                  NDT services on Jack-up rig, New builds and repairs, for the past 18 years.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>
      <Footer />
    </div>
  );
};

export default WhatWeDo;