"use client"

import Link from "next/link"
import { Icon } from "@iconify/react"
import { LandingReveal } from "@/components/landing/landing-reveal"
import type { ProductPageData } from "@/components/landing/product/product-data"

export function ProductCta({
  section,
  accent,
}: {
  section: ProductPageData["ctaSection"]
  accent: string
}) {
  return (
    <section className="px-4 pb-10 pt-10 sm:px-6">
      <div className="mx-auto flex w-full max-w-6xl flex-col items-center gap-6 text-center">
        <LandingReveal className="flex flex-col items-center gap-6">
          <h2 className="text-balance text-3xl font-bold tracking-tight sm:text-5xl">
            {section.title}
          </h2>
          <p className="max-w-xl text-balance text-base text-[var(--landing-muted)]">
            {section.description}
          </p>
          <div className="flex flex-wrap items-center justify-center gap-3">
            <Link
              href={section.ctas.primary.href}
              className="landing-cta landing-cta--primary h-12 px-7 text-base"
              style={
                {
                  "--landing-glow-a": accent,
                  "--landing-glow-b": accent,
                  "--landing-glow-c": accent,
                } as React.CSSProperties
              }
            >
              {section.ctas.primary.label}
              <Icon icon="mdi:arrow-right" className="size-5" aria-hidden />
            </Link>
            {section.ctas.secondary ? (
              <Link
                href={section.ctas.secondary.href}
                className="landing-cta landing-cta--ghost h-12 px-7 text-base"
              >
                {section.ctas.secondary.label}
              </Link>
            ) : null}
          </div>
        </LandingReveal>
      </div>
    </section>
  )
}