---
import type { HTMLAttributes } from "astro/types";
import { tv } from "tailwind-variants";

import { Button } from "@/components/starwind/button";

interface Props extends HTMLAttributes<"section"> {
  headline?: string;
  subheadline?: string;
  primaryCtaText?: string;
  primaryCtaHref?: string;
  secondaryCtaText?: string;
  secondaryCtaHref?: string;
}

const heroStyles = tv({
  base: "relative overflow-hidden py-20 md:py-32 lg:py-40",
});

const {
  headline = "Herramientas gratuitas para tu día a día",
  subheadline = "Resuely es una marca paraguas de aplicaciones web gratuitas diseñadas para usuarios venezolanos",
  primaryCtaText = "Explorar apps",
  primaryCtaHref = "/#apps",
  secondaryCtaText = "Saber más",
  secondaryCtaHref = "/#about",
  class: className,
  ...rest
} = Astro.props;
---

<section class={heroStyles({ class: className })} {...rest}>
  <div class="mx-auto max-w-7xl px-4 text-center">
    <h1 class="font-heading text-4xl font-bold tracking-tight md:text-5xl lg:text-6xl">
      {headline}
    </h1>
    <p class="mt-6 text-lg text-muted-foreground md:text-xl max-w-2xl mx-auto">
      {subheadline}
    </p>
    <div class="mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row">
      <Button href={primaryCtaHref} size="lg">
        {primaryCtaText}
      </Button>
      <Button href={secondaryCtaHref} variant="outline" size="lg">
        {secondaryCtaText}
      </Button>
    </div>
  </div>
</section>