oms-website-nextjs/app/achievements/page.tsx

// /app/achievements/page.tsx
import Image from "next/image";
import { Metadata } from "next";
import {
  FaAward,
  FaCertificate,
  FaHandshake,
  FaCamera,
  FaTrophy,
  FaStar,
  FaExternalLinkAlt,
} from "react-icons/fa";
import { COLORS } from "@/constants"; // Assuming COLORS is available
// import HeroSection from "../_components/HeroSection"; // Reuse HeroSection component

// Import the placeholder data
import {
  defaultAwards,
  defaultCertifications,
  defaultPartners,
  defaultGalleryImages,
  defaultMilestones,
} from "./_data/achievementsDefaults"; // Adjust path as needed
import CallToActionSection from "../(website)/_components/CallToActionSection";

// SEO Metadata
export const metadata: Metadata = {
  title: "Achievements & Recognition | Owethu Managed Services (OMS)",
  description:
    "Explore the awards, certifications, partnerships, and milestones achieved by OMS. See our commitment to excellence and empowerment.",
  keywords: [
    "OMS achievements",
    "Owethu Managed Services awards",
    "BEE Level 1",
    "Salesforce Partner",
    "company milestones",
    "IT company recognition",
    "supplier development program",
    "South Africa IT awards",
    "OMS gallery",
    "OMS partnerships",
  ],
  openGraph: {
    title: "Achievements & Recognition | OMS",
    description:
      "Discover OMS's journey of success, awards, and key partnerships.",
    url: "https://oms.cvevolve.com/achievements", // Update with the final URL
    // Add an appropriate OG image URL if available
    // images: [{ url: '/images/oms-achievements-og.png', width: 1200, height: 630, alt: 'OMS Achievements' }],
    locale: "en_ZA",
    type: "website",
  },
  // Add twitter card if desired
};

export default function AchievementsPage() {
  // In a real app, fetch data here using functions like getAchievements(), getAwards(), etc.
  const awards = defaultAwards;
  const certifications = defaultCertifications;
  const partners = defaultPartners;
  const galleryImages = defaultGalleryImages;
  const milestones = defaultMilestones;

  return (
    <>
      {/* 1. Hero Section */}
      {/* <HeroSection
        title={
          <>
            Our Journey & <br className="hidden md:block" />
            Recognition
          </>
        }
        subtitle="Celebrating our milestones, awards, and the partnerships that drive our success."
        // Optional button:
        // buttonText="Explore Our Services"
        // buttonHref="/services"
        imageUrl="/images/hero/achievements-hero.jpg" // Replace with a suitable hero image (e.g., abstract success, team celebration)
      /> */}

      {/* 2. Introduction (Optional) */}
      <section className="py-12 md:py-16 bg-white dark:bg-gray-900">
        <div className="container mx-auto px-6 text-center">
          <p className="text-lg md:text-xl text-gray-700 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed">
            At Owethu Managed Services, we are proud of the progress we&apos;ve
            made and the recognition we&apos;ve earned. These achievements
            reflect our commitment to excellence, empowerment, and delivering
            value to our clients and community.
          </p>
        </div>
      </section>

      {/* 3. Awards Section */}
      {awards && awards.length > 0 && (
        <section className="py-16 md:py-20 bg-gray-50 dark:bg-gray-800">
          <div className="container mx-auto px-6">
            <h2 className="text-3xl md:text-4xl font-bold font-poppins text-center text-gray-900 dark:text-white mb-12">
              <FaAward
                className="inline-block mr-3 mb-1"
                style={{ color: COLORS.primary }}
              />{" "}
              Awards & Accolades
            </h2>
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              {awards.map((award) => (
                <div
                  key={award.id}
                  className="bg-white dark:bg-gray-700 p-6 rounded-lg shadow-md flex flex-col items-center text-center transform transition duration-300 hover:-translate-y-1 hover:shadow-lg"
                >
                  {award.imageUrl && (
                    <div className="relative h-20 w-20 mb-4">
                      <Image
                        src={award.imageUrl}
                        alt={`${award.name} Logo`}
                        layout="fill"
                        objectFit="contain"
                      />
                    </div>
                  )}
                  {!award.imageUrl && (
                    <FaTrophy
                      className="text-4xl mb-4"
                      style={{ color: COLORS.primary }}
                    />
                  )}
                  <h3 className="text-xl font-semibold mb-1 font-poppins text-gray-900 dark:text-white">
                    {award.name}
                  </h3>
                  <p className="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">
                    {award.awardingBody} - {award.year}
                  </p>
                  {award.description && (
                    <p className="text-sm text-gray-600 dark:text-gray-300">
                      {award.description}
                    </p>
                  )}
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* 4. Certifications & Partnerships Section */}
      {((certifications && certifications.length > 0) ||
        (partners && partners.length > 0)) && (
        <section className="py-16 md:py-20 bg-white dark:bg-gray-900">
          <div className="container mx-auto px-6">
            <h2 className="text-3xl md:text-4xl font-bold font-poppins text-center text-gray-900 dark:text-white mb-12">
              <FaCertificate
                className="inline-block mr-3 mb-1"
                style={{ color: COLORS.primary }}
              />{" "}
              Certifications &{" "}
              <FaHandshake
                className="inline-block ml-2 mr-3 mb-1"
                style={{ color: COLORS.primary }}
              />{" "}
              Partnerships
            </h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-16">
              {/* Certifications Column */}
              {certifications && certifications.length > 0 && (
                <div>
                  <h3 className="text-2xl font-semibold font-poppins text-gray-800 dark:text-gray-100 mb-6 text-center md:text-left">
                    Our Certifications
                  </h3>
                  <div className="space-y-6">
                    {certifications.map((cert) => (
                      <div
                        key={cert.id}
                        className="flex items-center bg-gray-50 dark:bg-gray-800 p-4 rounded-lg shadow-sm"
                      >
                        {cert.logoUrl && (
                          <div className="relative h-12 w-16 mr-4 flex-shrink-0">
                            <Image
                              src={cert.logoUrl}
                              alt={`${cert.name} Logo`}
                              layout="fill"
                              objectFit="contain"
                            />
                          </div>
                        )}
                        {!cert.logoUrl && (
                          <FaCertificate
                            className="text-2xl mr-4 flex-shrink-0"
                            style={{ color: COLORS.primary }}
                          />
                        )}
                        <div>
                          <h4 className="font-semibold text-gray-900 dark:text-white">
                            {cert.name}
                          </h4>
                          <p className="text-sm text-gray-500 dark:text-gray-400">
                            {cert.issuingBody}
                          </p>
                          {cert.details && (
                            <p className="text-xs text-gray-600 dark:text-gray-300 mt-1">
                              {cert.details}
                            </p>
                          )}
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}
              {/* Partnerships Column */}
              {partners && partners.length > 0 && (
                <div>
                  <h3 className="text-2xl font-semibold font-poppins text-gray-800 dark:text-gray-100 mb-6 text-center md:text-left">
                    Key Partners
                  </h3>
                  <div className="grid grid-cols-2 sm:grid-cols-3 gap-6 items-center">
                    {partners.map((partner) => (
                      <div key={partner.id} className="text-center group">
                        <a
                          href={partner.websiteUrl || "#"}
                          target="_blank"
                          rel="noopener noreferrer"
                          className={`relative block h-16 md:h-20 filter grayscale group-hover:grayscale-0 transition duration-300 ${
                            !partner.websiteUrl ? "cursor-default" : ""
                          }`}
                          title={partner.name}
                        >
                          <Image
                            src={partner.logoUrl}
                            alt={`${partner.name} Logo`}
                            layout="fill"
                            objectFit="contain"
                          />
                        </a>
                        {partner.websiteUrl && (
                          <a
                            href={partner.websiteUrl}
                            target="_blank"
                            rel="noopener noreferrer"
                            className="text-xs text-gray-500 dark:text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 inline-flex items-center mt-1"
                          >
                            Visit <FaExternalLinkAlt className="ml-1 w-2 h-2" />
                          </a>
                        )}
                        {!partner.websiteUrl && (
                          <span className="text-xs text-gray-500 dark:text-gray-400 mt-1 inline-block">
                            {partner.name}
                          </span>
                        )}
                      </div>
                    ))}
                  </div>
                  {partners.length > 6 && (
                    <p className="text-center text-sm text-gray-500 dark:text-gray-400 mt-4">
                      And more...
                    </p>
                  )}
                </div>
              )}
            </div>
          </div>
        </section>
      )}

      {/* 5. Milestones Section */}
      {milestones && milestones.length > 0 && (
        <section className="py-16 md:py-20 bg-gray-50 dark:bg-gray-800">
          <div className="container mx-auto px-6 max-w-3xl">
            <h2 className="text-3xl md:text-4xl font-bold font-poppins text-center text-gray-900 dark:text-white mb-12">
              <FaStar
                className="inline-block mr-3 mb-1"
                style={{ color: COLORS.primary }}
              />{" "}
              Key Milestones
            </h2>
            <div
              className="relative pl-8 border-l-2 border-gold-500 dark:border-gold-400"
              style={{ borderColor: COLORS.primary }}
            >
              {milestones.map((milestone) => (
                <div key={milestone.id} className="mb-8 relative">
                  <div
                    className="absolute -left-[1.6rem] top-1 w-6 h-6 bg-gold-500 rounded-full border-4 border-white dark:border-gray-800 dark:bg-gold-400"
                    style={{
                      backgroundColor: COLORS.primary,
                      borderColor:
                        bgColor === "dark"
                          ? "#1f2937"
                          : "#f9fafb" /* Adjust based on actual dark/light bg */,
                    }}
                  ></div>
                  <p
                    className="text-sm font-semibold text-gold-600 dark:text-gold-400"
                    style={{ color: COLORS.primary }}
                  >
                    {milestone.date}
                  </p>
                  <p className="text-md text-gray-700 dark:text-gray-300">
                    {milestone.description}
                  </p>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* 6. Gallery Section */}
      {galleryImages && galleryImages.length > 0 && (
        <section className="py-16 md:py-20 bg-white dark:bg-gray-900">
          <div className="container mx-auto px-6">
            <h2 className="text-3xl md:text-4xl font-bold font-poppins text-center text-gray-900 dark:text-white mb-12">
              <FaCamera
                className="inline-block mr-3 mb-1"
                style={{ color: COLORS.primary }}
              />{" "}
              Moments & Memories
            </h2>
            <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
              {galleryImages.map((image) => (
                <div
                  key={image.id}
                  className="group relative aspect-square overflow-hidden rounded-lg shadow-md cursor-pointer"
                >
                  {/* Consider adding a Lightbox library here for better image viewing */}
                  <Image
                    src={image.imageUrl}
                    alt={image.alt}
                    layout="fill"
                    objectFit="cover"
                    className="transform transition-transform duration-300 group-hover:scale-110"
                  />
                  {/* Overlay for caption */}
                  <div className="absolute inset-0 bg-gradient-to-t from-black/60 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-3 md:p-4">
                    <p className="text-white text-xs md:text-sm font-semibold line-clamp-2">
                      {image.caption || image.alt}
                    </p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>
      )}

      {/* 7. Optional CTA Section */}
      <CallToActionSection
        title="Partner with Proven Expertise"
        subtitle="Let our recognized capabilities help you achieve your technology goals."
        buttonText="Discuss Your Project"
        buttonHref="/contact"
      />
    </>
  );
}

// Helper function to determine background color for milestone border (if needed)
// This is a simplified check, adjust based on how you handle theme toggling
const bgColor =
  typeof window !== "undefined" &&
  document.documentElement.classList.contains("dark")
    ? "dark"
    : "light";