import Image from "next/image";
import Link from "next/link";
import { ArrowRight } from "lucide-react";
import { Container } from "@/components/Container";
import { products } from "@/lib/site-config";

const productImages: Record<string, { src: string; alt: string }> = {
  atlas: {
    src: "/photos/anatomy/skeleton-upper-body.jpg",
    alt: "Upper body skeleton anatomy model",
  },
  consentiq: {
    src: "/photos/consent/doctor-talking-patient.jpg",
    alt: "Doctor discussing treatment options with a patient",
  },
  orthoprep: {
    src: "/photos/exam-prep/anatomy-textbook.jpg",
    alt: "Anatomy textbook open on a study desk",
  },
  academy: {
    src: "/photos/training/anatomage-table.jpg",
    alt: "Students around an Anatomage virtual dissection table",
  },
  store: {
    src: "/photos/exam-prep/surgical-instruments.jpg",
    alt: "Tray of surgical instruments",
  },
  research: {
    src: "/photos/training/medical-lecture-room.jpg",
    alt: "Medical lecture hall filled with students",
  },
};

/**
 * Elevated 6-product grid. Pure server component — no client JS — with
 * pseudo-element hover lift driven by group classes so it still animates
 * gracefully under a strict CSP.
 *
 * Each card: blue gradient accent header, product name, tagline, description,
 * and a "Visit" affordance.
 */
export function ProductShowcase() {
  return (
    <section id="products" className="relative bg-white py-12 md:py-16">
      <Container>
        <div className="mx-auto max-w-3xl text-center">
          <div className="text-[11px] font-bold uppercase tracking-[0.18em] text-[var(--color-blue)]">
            The platform
          </div>
          <h2 className="mt-4 font-display text-[40px] md:text-[54px] font-extrabold leading-[1.05] tracking-[-0.02em] text-[var(--color-ink)]">
            Six initiatives. One collaboration.
          </h2>
          <p className="mt-5 text-[17px] md:text-[18px] leading-relaxed text-[var(--color-slate)]">
            Every OrthoGlobe initiative is built by practising surgeons and
            grounded in peer-reviewed literature. Explore what's live today.
          </p>
        </div>

        <div className="mt-16 grid gap-6 md:grid-cols-2 lg:gap-8">
          {products.map((product, i) => {
            const img = productImages[product.slug];
            return (
              <Link
                key={product.slug}
                href={product.href}
                className="group relative flex flex-col overflow-hidden rounded-2xl border border-[var(--color-line)] bg-white transition-[transform,border-color,box-shadow] duration-300 ease-out hover:-translate-y-1 hover:border-[var(--color-blue)] hover:shadow-[0_28px_64px_rgba(30,64,255,0.12)]"
              >
                {img ? (
                  <div className="relative aspect-[16/10] w-full overflow-hidden bg-[var(--color-mist)]">
                    <Image
                      src={img.src}
                      alt={img.alt}
                      fill
                      sizes="(min-width: 1024px) 40vw, (min-width: 768px) 50vw, 100vw"
                      className="object-cover transition-transform duration-500 ease-out group-hover:scale-[1.04]"
                    />
                    <div
                      aria-hidden
                      className="absolute inset-0 bg-[linear-gradient(to_top,rgba(10,14,40,0.35),transparent_55%)]"
                    />
                    <div
                      aria-hidden
                      className="absolute inset-0 bg-[linear-gradient(120deg,rgba(30,64,255,0.0)_60%,rgba(30,64,255,0.28))] opacity-0 transition-opacity duration-500 group-hover:opacity-100"
                    />
                  </div>
                ) : null}

                <div className="relative flex flex-1 flex-col p-8 md:p-10">
                  {/* Gradient accent bar along the top edge */}
                  <div
                    aria-hidden
                    className="pointer-events-none absolute inset-x-0 top-0 h-[3px] bg-[linear-gradient(to_right,var(--color-blue),#6b82ff,var(--color-blue))] opacity-80"
                  />
                  {/* Faint background glow on hover */}
                  <div
                    aria-hidden
                    className="pointer-events-none absolute -top-24 -right-24 h-56 w-56 rounded-full bg-[radial-gradient(circle_at_center,rgba(30,64,255,0.10),transparent_65%)] opacity-0 transition-opacity duration-500 group-hover:opacity-100"
                  />

                  <div className="relative flex items-start justify-between gap-4">
                    <div className="font-display text-[12px] font-bold uppercase tracking-[0.2em] text-[var(--color-blue)]">
                      0{i + 1}
                    </div>
                    <span className="rounded-full bg-[var(--color-mist)] px-2.5 py-1 text-[10px] font-bold uppercase tracking-wider text-[var(--color-blue)]">
                      Live
                    </span>
                  </div>

                  <div className="relative mt-6 font-display text-[26px] md:text-[30px] font-extrabold tracking-[-0.015em] text-[var(--color-ink)]">
                    {product.name}
                  </div>
                  <div className="relative mt-2 text-[14px] font-semibold text-[var(--color-blue)]">
                    {product.tagline}
                  </div>
                  <p className="relative mt-5 text-[15px] leading-relaxed text-[var(--color-slate)]">
                    {product.description}
                  </p>

                  <div className="relative mt-8 inline-flex items-center gap-1.5 text-[14px] font-semibold text-[var(--color-blue)]">
                    Visit {product.name}
                    <ArrowRight
                      size={16}
                      strokeWidth={1.75}
                      aria-hidden
                      className="transition-transform duration-300 ease-out group-hover:translate-x-1.5"
                    />
                  </div>
                </div>
              </Link>
            );
          })}
        </div>
      </Container>
    </section>
  );
}
