import type { Vertical } from "@/types";
import Image from "next/image";
import Link from "next/link";

export function VerticalCard({
  vertical,
  variant = "grid",
  reverse = false,
}: {
  vertical: Vertical;
  /** grid = compact card; feature = wide image + copy row */
  variant?: "grid" | "feature";
  /** Flip image/copy order on feature layout */
  reverse?: boolean;
}) {
  if (variant === "feature") {
    return (
      <Link
        href={`/offerings/${vertical.slug}`}
        className="group grid items-center gap-8 border-b border-[var(--color-border)] pb-12 transition-colors last:border-b-0 md:grid-cols-2 md:gap-12 md:pb-16"
      >
        <div
          className={`relative aspect-[16/10] overflow-hidden bg-[var(--color-surface)] ${
            reverse ? "md:order-2" : ""
          }`}
        >
          <Image
            src={vertical.image}
            alt={vertical.title}
            fill
            sizes="(max-width: 768px) 100vw, 50vw"
            className="object-cover transition-transform duration-700 ease-out group-hover:scale-105"
          />
          <div className="absolute inset-0 bg-black/0 transition-colors duration-500 group-hover:bg-black/10" />
        </div>
        <div className={`md:py-4 ${reverse ? "md:order-1 md:text-right md:ml-auto" : ""}`}>
          <div
            className={`mb-4 flex flex-wrap items-center gap-3 ${
              reverse ? "md:justify-end" : ""
            }`}
          >
            <span className="text-[10px] font-medium uppercase tracking-[2px] text-[var(--color-text-muted)]">
              {vertical.status.replace("-", " ")}
            </span>
            {vertical.pillars?.length > 0 && (
              <span className="text-[10px] font-medium uppercase tracking-[2px] text-[var(--color-text-muted)]">
                · {vertical.pillars.join(" · ")}
              </span>
            )}
          </div>
          <h3 className="mb-3 text-2xl font-semibold tracking-[-0.02em] text-[var(--color-heading)] transition-colors group-hover:text-[var(--color-accent)] md:text-3xl">
            {vertical.title}
          </h3>
          <p
            className={`mb-6 max-w-md text-[15px] leading-relaxed text-[var(--color-text-muted)] md:text-base ${
              reverse ? "md:ml-auto" : ""
            }`}
          >
            {vertical.summary}
          </p>
          <span
            className={`inline-flex items-center gap-2 text-sm font-medium tracking-wide text-[var(--color-heading)] ${
              reverse ? "md:flex-row-reverse" : ""
            }`}
          >
            Explore
            <span
              aria-hidden
              className={`transition-transform duration-300 ${
                reverse
                  ? "group-hover:-translate-x-1"
                  : "group-hover:translate-x-1"
              }`}
            >
              →
            </span>
          </span>
        </div>
      </Link>
    );
  }

  return (
    <Link
      href={`/offerings/${vertical.slug}`}
      className="group flex h-full flex-col overflow-hidden border border-[var(--color-border)] bg-[var(--color-surface)] transition-shadow duration-300 hover:shadow-[0_20px_50px_-24px_rgba(0,0,0,0.35)] dark:hover:shadow-[0_20px_50px_-24px_rgba(0,0,0,0.8)]"
    >
      <div className="relative aspect-[16/11] overflow-hidden">
        <Image
          src={vertical.image}
          alt={vertical.title}
          fill
          sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
          className="object-cover transition-transform duration-700 ease-out group-hover:scale-105"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-60" />
        <span className="absolute bottom-3 left-3 text-[10px] font-medium uppercase tracking-[2px] text-white/90">
          {vertical.status.replace("-", " ")}
        </span>
      </div>
      <div className="flex flex-1 flex-col p-5 md:p-6">
        <h3 className="mb-2 text-xl font-medium tracking-[-0.01em] text-[var(--color-heading)] transition-colors group-hover:text-[var(--color-accent)]">
          {vertical.title}
        </h3>
        <p className="text-[15px] leading-relaxed text-[var(--color-text-muted)]">
          {vertical.summary}
        </p>
      </div>
    </Link>
  );
}
