Location 1

import { ArrowUpRight } from "lucide-react";
import Image from "next/image";
import Link from "next/link";

import { cn } from "@/lib/utils";

import type { Surface } from "../_types/common";
import type { LocationContent } from "../_types/location";
import { defaultLocation1Content } from "./data";
import {
  eyebrowClass,
  SectionHeader,
  surfaceClass,
  toneFor,
} from "./section-header";

/** One tall feature card beside a two-across grid of smaller photo cards. */
export default function Location1({
  content = defaultLocation1Content,
  surface = "default",
}: {
  content?: LocationContent;
  surface?: Surface;
}) {
  const [feature, ...rest] = content.items;

  return (
    <section className={cn("py-20 sm:py-28", surfaceClass[surface])}>
      <div className="mx-auto max-w-7xl px-5 sm:px-8 lg:px-12">
        <SectionHeader
          action={
            content.action && (
              <Link
                className="group inline-flex items-center gap-2 text-primary text-sm underline-offset-4 hover:underline"
                href={content.action.href}
              >
                {content.action.label}
                <ArrowUpRight className="size-4 transition-transform duration-300 group-hover:translate-x-0.5 group-hover:-translate-y-0.5" />
              </Link>
            )
          }
          description={content.description}
          eyebrow={content.eyebrow}
          title={content.title}
          tone={toneFor(surface)}
        />

        {feature && (
          <div className="mt-10 grid gap-4 lg:grid-cols-12">
            <Link
              className="group relative flex min-h-80 flex-col justify-end overflow-hidden rounded-lg lg:col-span-6 lg:min-h-136"
              href={feature.href}
            >
              <Image
                alt={feature.image.alt}
                className="object-cover transition-transform duration-700 ease-out group-hover:scale-105"
                fill
                sizes="(min-width: 1024px) 50vw, 100vw"
                src={feature.image.src}
              />
              <div className="absolute inset-0 bg-linear-to-t from-primary/90 via-primary/30 to-transparent" />
              <div className="relative p-7 lg:p-9">
                <p className={cn(eyebrowClass, "text-white/60")}>
                  {feature.label}
                </p>
                <h3 className="mt-3 font-display text-3xl text-white lg:text-4xl">
                  {feature.name}
                </h3>
                <p className="mt-2 max-w-sm text-sm text-white/70 leading-relaxed">
                  {feature.description}
                </p>
              </div>
            </Link>

            <div className="grid gap-4 sm:grid-cols-2 lg:col-span-6">
              {rest.map((item) => (
                <Link
                  className="group relative flex min-h-56 flex-col justify-end overflow-hidden rounded-lg"
                  href={item.href}
                  key={item.href}
                >
                  <Image
                    alt={item.image.alt}
                    className="object-cover transition-transform duration-700 ease-out group-hover:scale-105"
                    fill
                    sizes="(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw"
                    src={item.image.src}
                  />
                  <div className="absolute inset-0 bg-linear-to-t from-primary/90 via-primary/25 to-transparent" />
                  <div className="relative p-6">
                    <p className={cn(eyebrowClass, "text-white/60")}>
                      {item.label}
                    </p>
                    <h3 className="mt-2 font-display text-2xl text-white">
                      {item.name}
                    </h3>
                    {item.meta && (
                      <p className="mt-1 text-white/60 text-xs">{item.meta}</p>
                    )}
                  </div>
                </Link>
              ))}
            </div>
          </div>
        )}
      </div>
    </section>
  );
}