'use client';
import { CheckCircle } from 'lucide-react';
import Link from 'next/link';
import { useEffect, useState } from 'react';
import { Button } from '@/components/ui/button';
import { Skeleton } from '@/components/ui/skeleton';

interface Certification {
  id: string;
  title: string;
  organization: string;
  description: string;
  icon: string;
}

const certifications: Certification[] = [
  {
    id: 'iso-9001',
    title: 'ISO 9001:2015',
    organization: 'International Organization for Standardization',
    description:
      'Quality Management Systems certification, demonstrating our commitment to consistently providing products and services that meet customer and regulatory requirements.',
    icon: '🏆',
  },
  {
    id: 'iso-14001',
    title: 'ISO 14001:2015',
    organization: 'International Organization for Standardization',
    description:
      'Environmental Management Systems certification, showcasing our dedication to minimizing environmental impact and promoting sustainability in all operations.',
    icon: '🌿',
  },
  {
    id: 'iso-45001',
    title: 'ISO 45001:2018',
    organization: 'International Organization for Standardization',
    description:
      'Occupational Health and Safety Management Systems certification, highlighting our commitment to providing safe and healthy workplaces.',
    icon: '⚕️',
  },
  {
    id: 'nse',
    title: 'Nigerian Society of Engineers',
    organization: 'NSE',
    description:
      "Corporate membership in Nigeria's premier engineering professional association, validating our engineering excellence and professional standards.",
    icon: '🛠️',
  },
  {
    id: 'coren',
    title: 'Council for the Regulation of Engineering in Nigeria',
    organization: 'COREN',
    description:
      "Registration and certification by Nigeria's regulatory body for engineering practice, ensuring adherence to professional engineering standards.",
    icon: '📜',
  },
  {
    id: 'bpp',
    title: 'Bureau of Public Procurement',
    organization: 'Federal Government of Nigeria',
    description:
      "Registration with Nigeria's public procurement bureau, allowing participation in government contracts and projects.",
    icon: '🏛️',
  },
  {
    id: 'pecb',
    title: 'Professional Evaluation and Certification Board',
    organization: 'PECB',
    description:
      'Certification in project management and quality assurance practices, demonstrating our commitment to international standards of project delivery.',
    icon: '📊',
  },
  {
    id: 'asme',
    title: 'American Society of Mechanical Engineers',
    organization: 'ASME',
    description:
      'International accreditation in mechanical engineering standards, particularly relevant to our oil and gas industry projects.',
    icon: '⚙️',
  },
];

export default function Certifications() {
  const [isLoading, setIsLoading] = useState(true);
  const [bgImage, setBgImage] = useState<string>('');
  const fallbackImage =
    'https://images.unsplash.com/photo-1556761175-b413da4baf72?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1674&q=80';

  useEffect(() => {
    // Simulate loading for the background image
    const timer = setTimeout(() => {
      setBgImage(fallbackImage);
      setIsLoading(false);
    }, 1000); // Simulate 1 second loading time

    return () => clearTimeout(timer);
  }, []);

  return (
    <>
      <style>{`
        .team-hero-bg {
          background-image: linear-gradient(
              to right,
              rgba(0, 70, 173, 0.85),
              rgba(0, 160, 233, 0.85)
            ),
            url(${bgImage});
          background-size: cover;
          background-position: center;
        }
      `}</style>
      <div>
        <section className="team-hero-bg py-20 pt-32 text-white">
          <div className="container mx-auto px-4">
            <div className="max-w-3xl">
              {isLoading ? (
                <>
                  <Skeleton className="mb-6 h-12 w-3/4 bg-gray-300" />
                  <Skeleton className="h-6 w-full bg-gray-300" />
                  <Skeleton className="h-6 w-5/6 bg-gray-300" />
                </>
              ) : (
                <>
                  <h1 className="mb-6 font-bold text-4xl md:text-5xl">
                    Our Certifications
                  </h1>
                  <p className="text-white/90 text-xl">
                    O.K. Isokariari Nigeria Limited maintains the highest
                    standards of professional excellence, as evidenced by our
                    comprehensive portfolio of industry certifications and
                    accreditations.
                  </p>
                </>
              )}
            </div>
          </div>
        </section>

        <section className="py-16">
          <div className="container mx-auto px-4">
            <div className="mb-12 text-center">
              {isLoading ? (
                <Skeleton className="mx-auto h-6 w-1/2" />
              ) : (
                <p className="mx-auto max-w-3xl text-gray-600 text-lg">
                  Our certifications represent our unwavering commitment to
                  quality, safety, environmental responsibility, and
                  professional excellence across all aspects of our operations.
                </p>
              )}
            </div>
            {isLoading ? (
              <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
                {Array.from({ length: 8 }).map((_, i) => (
                  <div
                    className="animate-pulse rounded-lg border-oki-blue-dark border-t-4 bg-white p-6 shadow-md"
                    key={i}
                  >
                    <Skeleton className="mb-4 h-12 w-12 rounded-full" />
                    <Skeleton className="mb-2 h-6 w-3/4" />
                    <Skeleton className="mb-4 h-4 w-1/2" />
                    <Skeleton className="h-4 w-full" />
                    <Skeleton className="h-4 w-5/6" />
                  </div>
                ))}
              </div>
            ) : (
              <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
                {certifications.map((cert) => (
                  <div
                    className="rounded-lg border-oki-blue-dark border-t-4 bg-white p-6 shadow-md transition-shadow hover:shadow-lg"
                    key={cert.id}
                  >
                    <div className="mb-4 text-4xl">{cert.icon}</div>
                    <h3 className="mb-2 font-semibold text-oki-gray-dark text-xl">
                      {cert.title}
                    </h3>
                    <p className="mb-4 text-oki-blue-dark text-sm">
                      {cert.organization}
                    </p>
                    <p className="text-gray-600">{cert.description}</p>
                  </div>
                ))}
              </div>
            )}
          </div>
        </section>

        <section className="bg-oki-gray-light py-16">
          <div className="container mx-auto px-4">
            <div className="mb-12 text-center">
              {isLoading ? (
                <Skeleton className="mx-auto mb-6 h-8 w-1/2" />
              ) : (
                <h2 className="mb-6 font-bold text-3xl text-oki-gray-dark">
                  Our Commitment to Excellence
                </h2>
              )}
              {isLoading ? (
                <Skeleton className="mx-auto h-6 w-3/4" />
              ) : (
                <p className="mx-auto max-w-3xl text-gray-600 text-lg">
                  Beyond formal certifications, O.K. Isokariari Nigeria Limited
                  is committed to maintaining the highest standards of quality,
                  safety, and professionalism in all our operations.
                </p>
              )}
            </div>

            {isLoading ? (
              <div className="grid grid-cols-1 gap-12 md:grid-cols-2">
                {Array.from({ length: 2 }).map((_, i) => (
                  <div
                    className="animate-pulse rounded-lg bg-white p-8 shadow-md"
                    key={i}
                  >
                    <Skeleton className="mb-6 h-8 w-3/4" />
                    <div className="space-y-4">
                      {[...Array(4)].map((_, j) => (
                        <div className="flex items-center" key={j}>
                          <Skeleton className="mr-3 h-5 w-5 rounded-full" />
                          <Skeleton className="h-4 w-full" />
                        </div>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <div className="grid grid-cols-1 gap-12 md:grid-cols-2">
                <div className="rounded-lg bg-white p-8 shadow-md">
                  <h3 className="mb-6 font-semibold text-2xl text-oki-gray-dark">
                    Quality Assurance
                  </h3>
                  <ul className="space-y-4">
                    <li className="flex">
                      <CheckCircle
                        className="mt-1 mr-3 flex-shrink-0 text-oki-blue-dark"
                        size={20}
                      />
                      <span className="text-gray-600">
                        Rigorous quality control processes at every stage of
                        project execution
                      </span>
                    </li>
                    <li className="flex">
                      <CheckCircle
                        className="mt-1 mr-3 flex-shrink-0 text-oki-blue-dark"
                        size={20}
                      />
                      <span className="text-gray-600">
                        Regular internal and third-party quality audits
                      </span>
                    </li>
                    <li className="flex">
                      <CheckCircle
                        className="mt-1 mr-3 flex-shrink-0 text-oki-blue-dark"
                        size={20}
                      />
                      <span className="text-gray-600">
                        Continuous improvement of processes based on performance
                        data
                      </span>
                    </li>
                    <li className="flex">
                      <CheckCircle
                        className="mt-1 mr-3 flex-shrink-0 text-oki-blue-dark"
                        size={20}
                      />
                      <span className="text-gray-600">
                        Comprehensive material testing and verification
                        procedures
                      </span>
                    </li>
                  </ul>
                </div>

                <div className="rounded-lg bg-white p-8 shadow-md">
                  <h3 className="mb-6 font-semibold text-2xl text-oki-gray-dark">
                    Health, Safety & Environment
                  </h3>
                  <ul className="space-y-4">
                    <li className="flex">
                      <CheckCircle
                        className="mt-1 mr-3 flex-shrink-0 text-oki-blue-dark"
                        size={20}
                      />
                      <span className="text-gray-600">
                        Zero tolerance safety policy across all project sites
                      </span>
                    </li>
                    <li className="flex">
                      <CheckCircle
                        className="mt-1 mr-3 flex-shrink-0 text-oki-blue-dark"
                        size={20}
                      />
                      <span className="text-gray-600">
                        Regular safety training for all personnel
                      </span>
                    </li>
                    <li className="flex">
                      <CheckCircle
                        className="mt-1 mr-3 flex-shrink-0 text-oki-blue-dark"
                        size={20}
                      />
                      <span className="text-gray-600">
                        Environmental impact assessment for all major projects
                      </span>
                    </li>
                    <li className="flex">
                      <CheckCircle
                        className="mt-1 mr-3 flex-shrink-0 text-oki-blue-dark"
                        size={20}
                      />
                      <span className="text-gray-600">
                        Sustainable construction practices and waste management
                      </span>
                    </li>
                  </ul>
                </div>
              </div>
            )}
          </div>
        </section>

        <section className="py-16">
          <div className="container mx-auto px-4 text-center">
            {isLoading ? (
              <Skeleton className="mx-auto mb-6 h-8 w-1/2" />
            ) : (
              <h2 className="mb-6 font-bold text-3xl text-oki-gray-dark">
                Partner with a Certified Industry Leader
              </h2>
            )}
            {isLoading ? (
              <Skeleton className="mx-auto mb-8 h-6 w-3/4" />
            ) : (
              <p className="mx-auto mb-8 max-w-2xl text-gray-600 text-lg">
                When you work with O.K. Isokariari Nigeria Limited, you're
                choosing a partner committed to excellence, quality, and
                professional standards in every aspect of our operations.
              </p>
            )}
            {isLoading ? (
              <Skeleton className="mx-auto h-12 w-48" />
            ) : (
              <Link href="/contact">
                <Button className="bg-oki-blue-dark px-8 py-6 text-white hover:bg-oki-blue-light">
                  Contact Our Team
                </Button>
              </Link>
            )}
          </div>
        </section>
      </div>
    </>
  );
}