// app/overview/page.tsx
"use client";

import React from "react";
import Breadcrumb from "../../components/Breadcrumb";
import OurBrands from "@/components/OurBrands";
// Swiper react components + modules
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination } from "swiper/modules";
import type { Swiper as SwiperCore } from "swiper";

import { Trophy, ArrowRight } from "lucide-react";

// Swiper styles — MUST be top-level imports
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

export default function OurExperts() {
  const breadcrumbData = [
    { name: "Home", href: "/" },
    { name: "Award & Recognation", href: "award-recognation" },
  ];

  const pageTitle = "Our Global Vision for the Future";
  const subHeadline = "Strategy, Research & Commitment";
  const description =
    "Wimraw is a global organization dedicated to innovation across IT, AI, Robotics, and Media.";

  type Award = {
    id: number;
    year: string;
    title: string;
    trophySrc: string;
    documentUrl?: string;
    accentColor?: string;
  };

  const awards: Award[] = [
    {
      id: 1,
      year: "2021",
      title: "Top national exporter",
      trophySrc: "https://placehold.co/100x120/E0E0FF/000000?text=Trophy+2021",
      documentUrl: "#",
      accentColor: "#DFAF3A",
    },
    {
      id: 2,
      year: "2020",
      title: "Top national exporter",
      trophySrc: "https://placehold.co/100x120/E0E0FF/A0A0A0?text=Trophy+2020",
      documentUrl: "#",
      accentColor: "#C77B4B",
    },
    {
      id: 3,
      year: "2019",
      title: "Top national exporter",
      trophySrc: "https://placehold.co/100x120/E0E0FF/300060?text=Trophy+2019",
      documentUrl: "#",
      accentColor: "#D4AF37",
    },
    {
      id: 4,
      year: "2018",
      title: "Innovation Excellence",
      trophySrc: "https://placehold.co/100x120/E0E0FF/FFC107?text=Trophy+2018",
      documentUrl: "#",
      accentColor: "#FFC107",
    },
  ];

  return (
    <main className="min-h-screen bg-gray-50">
      <Breadcrumb
        breadcrumbs={breadcrumbData}
        pageTitle={pageTitle}
        description={description}
      />

      <section className="w-full min-h-[560px] bg-white/95 py-12 font-['Inter']">
        <h2 className="text-4xl md:text-5xl font-extrabold text-gray-900 tracking-tight text-center">
          Awards & Recognition
        </h2>
        <p className="mt-3 text-gray-700 text-base md:text-lg max-w-2x1 mx-auto text-center">
          Celebrating our achievements and honoring the milestones that define our legacy of excellence.
        </p>
        <div className="container mx-auto px-4 max-w-7xl">
          <div className="flex flex-col lg:flex-row items-center gap-12">

            {/* LEFT: Big framed hero */}
            <div className="w-full lg:w-1/2 relative">
              <div className="relative p-10 max-w-lg bg-white/0">

                {/* DECORATIVE TOP-RIGHT ANGLED LINES */}
                <div className="absolute top-15 right-15 flex gap-1 items-center z-1" aria-hidden>
                  <div className="w-15 h-[3px] bg-indigo-600 -rotate-45 origin-center"></div>
                  <div className="w-15 h-[3px] bg-black -rotate-45 origin-center -ml-8"></div>
                </div>

                <div className="w-70 h-100 absolute right-16 -bottom-1 border-4 border-amber-400/95" aria-hidden></div>


                {/* DECORATIVE Bottom-Left ANGLED LINES */}
                <div className="absolute bottom-0 left-40 flex gap-1 items-center z-1" aria-hidden>
                  <div className="w-15 h-[3px] bg-indigo-600 -rotate-45 origin-center"></div>
                  <div className="w-15 h-[3px] bg-black -rotate-45 origin-center -ml-8"></div>
                </div>

                <img
                  src="/img/bg/123.png"
                  alt="Trophy"
                  className="absolute left-5 bottom-5 w-36 h-36 object-contain z-30 drop-shadow-2xl -rotate-22 pointer-events-none"
                />


                <div className="p-10 relative z-10">

                  <h1 className="text-[140px]  font-extrabold text-indigo-600/90 font-playfair" aria-hidden>5</h1>

                  <h3 className="text-5xl uppercase tracking-tight text-gray-500 mt-15">YEARS OF</h3>

                  <h2 className="text-6xl lg:text-6xl font-extrabold leading-tight text-black pl-4">Excellence</h2>

                  <p className="mt-6 text-gray-800 text-base ml-30">
                    We&apos;ve <strong className="text-indigo-600">won five</strong>{" "}
                    different awards & trophies throughout the years as the best
                    exporter.
                  </p>

                </div>



              </div>
            </div>

            {/* RIGHT: Awards carousel */}
            <div className="w-full lg:w-1/2">
              <div className="flex items-center justify-between mb-6">
                <div>
                  <h4 className="text-sm text-gray-400 uppercase tracking-wider">
                    Recognitions
                  </h4>
                  <p className="text-xl font-semibold text-gray-900">
                    Our Recent Achievements
                  </p>
                </div>
              </div>

              <div className="relative">
                <Swiper
                  modules={[Navigation, Pagination]}
                  slidesPerView={1}
                  spaceBetween={24}
                  navigation
                  breakpoints={{
                    768: { slidesPerView: 2 },
                    1024: { slidesPerView: 3 },
                  }}
                  onSwiper={(s: SwiperCore) => {
                    /* you can store the instance if needed */
                  }}
                >
                  {awards.map((a) => (
                    <SwiperSlide key={a.id}>
                      <article className="bg-white transition-shadow h-full flex flex-col items-start justify-between">
                        <div className="w-full flex flex-col items-start gap-4">
                          <div className="w-full h-24 flex items-center justify-center pt-2">
                            <img
                              src={a.trophySrc}
                              alt={`${a.year} trophy`}
                              className="max-w-full max-h-full object-contain"
                            />
                          </div>

                          <div className="w-full text-center">
                            <span
                              className="text-2xl font-bold"
                              style={{ color: a.accentColor || "#DFAF3A" }}
                            >
                              {a.year}
                            </span>

                            <p className="mt-1 text-xs text-gray-500">
                              Top national exporter
                            </p>
                          </div>
                        </div>

                        <div className="mt-4 w-full flex items-center justify-center">
                          <a
                            href={a.documentUrl || "#"}
                            target="_blank"
                            rel="noreferrer"
                            className="inline-flex items-center gap-2 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-full text-sm"
                          >
                            <span>View Document</span>
                            <ArrowRight className="w-4 h-4" />
                          </a>
                        </div>
                      </article>
                    </SwiperSlide>

                  ))}
                </Swiper>
              </div>
            </div>
          </div>
        </div>
      </section>

      <OurBrands />
      
    </main>
  );
}