---
import IconArrowRight from "@tabler/icons/outline/arrow-right.svg";
import IconChevronLeft from "@tabler/icons/outline/chevron-left.svg";
import IconChevronRight from "@tabler/icons/outline/chevron-right.svg";
import type { HTMLAttributes } from "astro/types";
import { tv } from "tailwind-variants";

import { Button } from "@/components/starwind/button";
import { Image } from "@/components/starwind/image";
import type { ImageMetadata } from "astro";

/** Service item configuration */
export interface Service {
  image: ImageMetadata;
  title: string;
  tagline: string;
  href?: string;
}

interface Props extends HTMLAttributes<"section"> {
  badge?: string;
  heading?: string;
  description?: string;
  services?: Service[];
  ctaText?: string;
  ctaHref?: string;
}

const sectionStyles = tv({
  base: "@container w-full pt-24",
});

const {
  badge,
  heading,
  description,
  services = [],
  ctaText,
  ctaHref = "#",
  class: className,
  ...rest
} = Astro.props;
---

<section class={sectionStyles({ class: className })} {...rest}>
  <!-- Header -->
  <div class="mx-auto mb-12 max-w-7xl px-4">
    <div class="flex flex-col gap-6 @2xl:flex-row @2xl:items-end @2xl:justify-between">
      <div class="max-w-2xl">
        <span class="text-foreground text-sm font-semibold tracking-widest uppercase">
          {badge}
        </span>
        <h2
          class="font-heading mt-3 text-3xl font-semibold tracking-tight @xl:text-4xl @3xl:text-5xl"
        >
          {heading}
        </h2>
        <p class="text-muted-foreground mt-4 text-pretty @xl:text-lg">
          {description}
        </p>
      </div>
      {
        ctaText && (
          <Button variant="outline" href={ctaHref} class="group w-fit shrink-0">
            {ctaText}
            <IconArrowRight class="size-4 transition-transform group-hover:translate-x-1" />
          </Button>
        )
      }
    </div>
  </div>

  <!-- Scrolling Cards -->
  <div class="relative mx-auto mb-12 max-w-7xl">
    <div
      class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 overflow-x-auto scroll-smooth px-4 pb-4"
    >
      {
        services.map((service, index) => (
          <a
            href={service.href || undefined}
            target="_blank"
        class="group relative shrink-0 overflow-hidden rounded-2xl first:ml-0 w-full"
            style={`--index: ${index}`}
          >
            <Image
              src={service.image}
              alt={service.title}
              class="size-full object-cover transition-transform duration-700 group-hover:scale-110 brightness-75"
              loading="lazy"
            />
            <div class="absolute inset-0 bg-linear-to-t from-black/80 via-black/20 to-transparent" />
            <div class="absolute inset-x-0 bottom-0 p-6 @xl:p-8">
              <p class="text-sm font-medium text-white/70">{service.tagline}</p>
              <h3 class="font-heading mt-2 text-xl font-semibold text-white @xl:text-2xl">
                {service.title}
              </h3>
              {service.href &&
                <div class="mt-4 flex items-center gap-2 text-sm font-medium text-white opacity-0 transition-all duration-300 group-hover:opacity-100">
                  <span>{service.href ? "visitar" : ""}</span>
                  <IconArrowRight class="size-4 transition-transform group-hover:translate-x-1" />
                </div>}
            {!service.href && <div class="mt-4 h-6 w-full" />}
            </div>
          </a>
        ))
      }
    </div>
  </div>
</section>

