"use client";

import Image from "next/image";
import Link from "next/link";

type GalleryItem = {
  src: string;
  alt: string;
  comingSoon?: boolean;
};

type DownloadItem = {
  label: string;
  description: string;
  href?: string;
  links?: { label: string; href: string; note?: string }[];
  icon: "plans" | "sheet" | "brochure" | "magazine";
  download?: boolean;
};

type LocationInfo = {
  address: string;
  mapQuery: string;
  city?: string;
  phone?: string;
  email?: string;
  directionsUrl?: string;
};

type PropertyShowcaseProps = {
  badge: string;
  title: string;
  subtitle: string;
  description: string;
  gallery: GalleryItem[];
  downloads: DownloadItem[];
  location: LocationInfo;
};

const DownloadIcon = ({ kind }: { kind: DownloadItem["icon"] }) => {
  switch (kind) {
    case "plans":
      return (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.5"
          strokeLinecap="round"
          strokeLinejoin="round"
          className="h-6 w-6"
          aria-hidden
        >
          <rect x="3" y="3" width="18" height="18" rx="2" />
          <path d="M3 9h18M9 3v18M9 14h6M14 14v7" />
        </svg>
      );
    case "sheet":
      return (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.5"
          strokeLinecap="round"
          strokeLinejoin="round"
          className="h-6 w-6"
          aria-hidden
        >
          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
          <polyline points="14 2 14 8 20 8" />
          <line x1="8" y1="13" x2="16" y2="13" />
          <line x1="8" y1="17" x2="16" y2="17" />
        </svg>
      );
    case "brochure":
      return (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.5"
          strokeLinecap="round"
          strokeLinejoin="round"
          className="h-6 w-6"
          aria-hidden
        >
          <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
          <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
        </svg>
      );
    case "magazine":
      return (
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.5"
          strokeLinecap="round"
          strokeLinejoin="round"
          className="h-6 w-6"
          aria-hidden
        >
          <path d="M2 4h7a3 3 0 0 1 3 3v13a2 2 0 0 0-2-2H2z" />
          <path d="M22 4h-7a3 3 0 0 0-3 3v13a2 2 0 0 1 2-2h8z" />
        </svg>
      );
  }
};

export default function PropertyShowcase({
  badge,
  title,
  subtitle,
  description,
  gallery,
  downloads,
  location,
}: PropertyShowcaseProps) {
  const mapSrc = `https://www.google.com/maps?q=${encodeURIComponent(
    location.mapQuery,
  )}&output=embed`;
  const directionsHref =
    location.directionsUrl ??
    `https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(location.mapQuery)}`;
  return (
    <main className="bg-white">
      <section className="relative overflow-hidden bg-gradient-to-b from-[#fbf7f0] via-white to-white pt-40 pb-20 px-4 sm:px-6 lg:px-8">
        <div
          aria-hidden
          className="pointer-events-none absolute -top-32 left-1/2 h-80 w-80 -translate-x-1/2 rounded-full bg-[#d6ac63]/15 blur-3xl"
        />
        <div className="relative mx-auto flex max-w-4xl flex-col items-center text-center">
          <span className="inline-flex items-center gap-2 rounded-full border border-[#d6ac63]/40 bg-white/60 px-4 py-1.5 text-xs font-light uppercase tracking-wide text-[#d6ac63] backdrop-blur">
            <span className="h-1.5 w-1.5 rounded-full bg-[#d6ac63]" />
            {badge}
          </span>
          <h1 className="mt-6 text-xl font-light uppercase tracking-wide text-black sm:text-2xl lg:text-3xl">
            {title}
          </h1>
          <p className="mt-4 text-sm font-light uppercase tracking-wide text-[#d6ac63]">
            {subtitle}
          </p>
          <div
            className="mt-8 h-px w-24 bg-gradient-to-r from-transparent via-[#d6ac63] to-transparent"
            aria-hidden
          />
          <p className="mt-8 max-w-3xl font-light text-sm tracking-wide text-black sm:text-base">
            {description}
          </p>
        </div>
      </section>

      <section className="px-4 pb-12 sm:px-6 lg:px-8">
        <div className="mx-auto max-w-7xl">
          <div className="mb-10 flex items-end justify-between">
            <div>
              <p className="text-xs font-light uppercase tracking-wide text-[#d6ac63]">
                Gallery
              </p>
            </div>
          </div>

          <div className="grid grid-cols-2 gap-3 sm:gap-4 lg:grid-cols-4">
            {gallery.map((item, i) => {
              const solo = gallery.length === 1;
              const featured = i === 0;
              return (
                <div
                  key={i}
                  className={`group relative overflow-hidden bg-gray-100 ${
                    solo
                      ? "col-span-2 lg:col-span-4 aspect-video"
                      : featured
                        ? "col-span-2 row-span-2 aspect-square lg:col-span-2 lg:row-span-2"
                        : "aspect-square"
                  }`}
                >
                  <Image
                    src={item.src}
                    alt={item.alt}
                    fill
                    sizes="(min-width: 1024px) 25vw, 50vw"
                    className="object-cover transition-transform duration-700 ease-out group-hover:scale-105"
                  />
                  {item.comingSoon ? (
                    <div className="absolute inset-0 bg-black/65 flex flex-col items-center justify-center gap-4">
                      <span className="animate-coming-soon-text text-white text-2xl sm:text-3xl lg:text-4xl font-semibold uppercase tracking-wide">
                        Coming Soon
                      </span>
                      <div className="flex items-center gap-2">
                        <span className="animate-dot-1 inline-block h-2.5 w-2.5 rounded-full bg-[#d6ac63]" />
                        <span className="animate-dot-2 inline-block h-2.5 w-2.5 rounded-full bg-[#d6ac63]" />
                        <span className="animate-dot-3 inline-block h-2.5 w-2.5 rounded-full bg-[#d6ac63]" />
                      </div>
                    </div>
                  ) : (
                    <div
                      aria-hidden
                      className="absolute inset-0 bg-linear-to-t from-black/40 via-transparent to-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100"
                    />
                  )}
                </div>
              );
            })}
          </div>
        </div>
      </section>

      <section className="relative overflow-hidden bg-linear-to-b from-white via-[#fbf7f0] to-white px-4 py-12 sm:px-6 lg:px-8">
        <div
          aria-hidden
          className="pointer-events-none absolute -bottom-32 right-0 h-80 w-80 rounded-full bg-[#d6ac63]/10 blur-3xl"
        />
        <div className="relative mx-auto max-w-7xl">
          <div className="mx-auto ">
            <p className="text-xs font-light uppercase tracking-wide text-[#d6ac63]">
              Resources
            </p>
          </div>

          <div className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
            {downloads.map((item) =>
              item.links ? (
                <div
                  key={item.label}
                  className="group relative flex flex-col border border-[#d6ac63]/20 bg-white/70 p-6 shadow-sm shadow-[#d6ac63]/5 backdrop-blur"
                >
                  <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-[#d6ac63]/10 text-[#d6ac63]">
                    <DownloadIcon kind={item.icon} />
                  </div>
                  <h3 className="mt-5 uppercase text-sm tracking-wide font-light text-black">
                    {item.label}
                  </h3>
                  <p className="mt-1 text-sm leading-relaxed font-light tracking-wide text-gray-500">
                    {item.description}
                  </p>
                  <div className="mt-6 flex flex-col gap-2">
                    {item.links.map((link) => (
                      <div key={link.href} className="flex flex-col gap-0.5">
                        <a
                          href={link.href}
                          target="_blank"
                          rel="noopener noreferrer"
                          className="inline-flex items-center gap-1.5 text-xs font-light uppercase tracking-wide text-[#d6ac63] transition-colors hover:text-black"
                        >
                          <svg
                            xmlns="http://www.w3.org/2000/svg"
                            viewBox="0 0 24 24"
                            fill="none"
                            stroke="currentColor"
                            strokeWidth="2"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                            className="h-3 w-3 shrink-0"
                            aria-hidden
                          >
                            <line x1="7" y1="17" x2="17" y2="7" />
                            <polyline points="7 7 17 7 17 17" />
                          </svg>
                          {link.label}
                          {link.note && (
                            <span className="pl-1 text-xs font-light tracking-wide ">
                              {link.note}
                            </span>
                          )}
                        </a>
                      </div>
                    ))}
                  </div>
                </div>
              ) : (
                <Link
                  key={item.label}
                  href={item.href!}
                  download={item.download ?? undefined}
                  className="group relative flex flex-col border border-[#d6ac63]/20 bg-white/70 p-6 shadow-sm shadow-[#d6ac63]/5 backdrop-blur transition-all duration-300 hover:-translate-y-1 hover:border-[#d6ac63]/50 hover:shadow-lg hover:shadow-[#d6ac63]/20"
                >
                  <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-[#d6ac63]/10 text-[#d6ac63] transition-colors duration-300 group-hover:bg-[#d6ac63] group-hover:text-white">
                    <DownloadIcon kind={item.icon} />
                  </div>
                  <h3 className="mt-5 uppercase text-sm tracking-wide font-light text-black">
                    {item.label}
                  </h3>
                  <p className="mt-1 text-sm leading-relaxed font-light tracking-wide text-gray-500">
                    {item.description}
                  </p>
                  <span className="mt-6 inline-flex items-center gap-1.5 text-xs font-light uppercase tracking-wide text-[#d6ac63]">
                    Download
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="2"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="h-3.5 w-3.5 transition-transform duration-300 group-hover:translate-y-0.5"
                      aria-hidden
                    >
                      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
                      <polyline points="7 10 12 15 17 10" />
                      <line x1="12" y1="15" x2="12" y2="3" />
                    </svg>
                  </span>
                </Link>
              ),
            )}
          </div>
        </div>
      </section>

      <section className="px-4 pb-24 sm:px-6 lg:px-8">
        <div className="mx-auto max-w-7xl">
          <div className="mb-10 flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between">
            <div className="pt-4 lg:pt-0">
              <p className="text-xs font-light uppercase tracking-wide text-[#d6ac63]">
                Location
              </p>
            </div>
            <a
              href={directionsHref}
              target="_blank"
              rel="noopener noreferrer"
              className="group inline-flex items-center tracking-wide justify-center gap-2 self-start border border-[#d6ac63] bg-white/70 px-6 py-2.5 text-xs font-light uppercase text-black backdrop-blur transition-all duration-300 hover:bg-[#d6ac63] hover:text-white hover:shadow-lg hover:shadow-[#d6ac63]/30 sm:self-auto"
            >
              Get Directions
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="h-3.5 w-3.5 transition-transform duration-300 group-hover:translate-x-0.5"
                aria-hidden
              >
                <line x1="7" y1="17" x2="17" y2="7" />
                <polyline points="7 7 17 7 17 17" />
              </svg>
            </a>
          </div>

          <div className="grid gap-4 lg:grid-cols-3">
            <div className="overflow-hidden border border-[#d6ac63]/20 bg-white shadow-sm lg:col-span-2">
              <div className="relative aspect-16/10 w-full">
                <iframe
                  src={mapSrc}
                  title={`Map of ${title}`}
                  loading="lazy"
                  allowFullScreen
                  referrerPolicy="no-referrer-when-downgrade"
                  className="absolute inset-0 h-full w-full grayscale-15 saturate-[1.05]"
                />
              </div>
            </div>

            <div className="flex flex-col gap-4 border border-[#d6ac63]/20 bg-white/70 p-6 shadow-sm shadow-[#d6ac63]/5 backdrop-blur sm:p-8">
              <div className="flex h-12 w-12 items-center justify-center rounded-xl bg-[#d6ac63]/10 text-[#d6ac63]">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="1.5"
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="h-6 w-6"
                  aria-hidden
                >
                  <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z" />
                  <circle cx="12" cy="10" r="3" />
                </svg>
              </div>
              <div>
                {location.city && (
                  <p className="text-xs font-light uppercase tracking-wide text-[#d6ac63]">
                    {location.city}
                  </p>
                )}
                <p className="mt-2 text-sm tracking-wide font-light text-black">
                  {location.address}
                </p>
              </div>

              {location.phone && (
                <div className="mt-2 border-t border-[#d6ac63]/15 pt-4">
                  <p className="text-xs font-light uppercase tracking-wide text-gray-500">
                    Reservations
                  </p>
                  <a
                    href={`tel:${location.phone.replace(/\s/g, "")}`}
                    className="mt-1.5 inline-flex items-center gap-2 tracking-wide text-sm font-light text-black transition-colors hover:text-[#d6ac63]"
                  >
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="1.5"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="h-4 w-4 text-[#d6ac63]"
                      aria-hidden
                    >
                      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.33 1.85.57 2.81.7A2 2 0 0 1 22 16.92z" />
                    </svg>
                    {location.phone}
                  </a>
                </div>
              )}
              {location.email && (
                <div className="mt-2 border-t border-[#d6ac63]/15 pt-4">
                  <p className="text-xs font-light uppercase tracking-wide text-gray-500">
                    Email
                  </p>
                  <a
                    href={`mailto:${location.email}`}
                    className="mt-1.5 inline-flex items-center gap-2 tracking-wide text-sm font-light text-black transition-colors hover:text-[#d6ac63]"
                  >
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 24 24"
                      fill="none"
                      stroke="currentColor"
                      strokeWidth="1.5"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                      className="h-4 w-4 text-[#d6ac63]"
                      aria-hidden
                    >
                      <rect x="2" y="4" width="20" height="16" rx="2" />
                      <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
                    </svg>
                    {location.email}
                  </a>
                </div>
              )}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}