"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 ProductHero({ data }: { data: ProductPageData }) {
  return (
    <section className="relative px-4 pb-10 pt-14 sm:px-6 sm:pt-20">
      <div className="mx-auto flex w-full max-w-5xl flex-col items-center gap-8 text-center">
        <LandingReveal>
          <span
            className="landing-glass inline-flex items-center gap-2.5 rounded-full px-4 py-1.5 text-xs font-medium sm:text-sm"
            style={{ color: data.accent }}
          >
            <img
              src={data.icon}
              alt=""
              className="size-4 object-contain"
              draggable={false}
              aria-hidden
            />
            {data.heroEyebrow}
          </span>
        </LandingReveal>

        <LandingReveal delay={0.08}>
          <div className="flex flex-col items-center gap-5">
            <span
              className="flex size-20 items-center justify-center rounded-2xl sm:size-24"
              style={{
                backgroundColor: `${data.accent}18`,
                boxShadow: `0 0 60px -12px ${data.accent}55`,
              }}
            >
              <img
                src={data.icon}
                alt=""
                className="size-12 object-contain sm:size-14"
                draggable={false}
                aria-hidden
              />
            </span>
            <p className="text-[11px] font-semibold uppercase tracking-wider text-[var(--landing-muted)]">
              {data.tagline}
            </p>
            <h1 className="text-balance text-4xl font-bold leading-[1.06] tracking-tight sm:text-6xl lg:text-7xl">
              {data.heroTitle}
              <br />
              <span
                className="landing-gradient-text"
                style={
                  {
                    "--landing-glow-a": data.accent,
                    "--landing-glow-b": data.accent,
                    "--landing-glow-c": data.accent,
                  } as React.CSSProperties
                }
              >
                {data.heroTitleAccent}
              </span>
            </h1>
          </div>
        </LandingReveal>

        <LandingReveal delay={0.16}>
          <p className="mx-auto max-w-2xl text-balance text-base leading-relaxed text-[var(--landing-muted)] sm:text-lg">
            {data.description}
          </p>
        </LandingReveal>

        <LandingReveal delay={0.24} className="flex flex-wrap items-center justify-center gap-3">
          <Link
            href={data.ctas.primary.href}
            className="landing-cta landing-cta--primary h-12 px-7 text-base"
            style={
              {
                "--landing-glow-a": data.accent,
                "--landing-glow-b": data.accent,
                "--landing-glow-c": data.accent,
              } as React.CSSProperties
            }
          >
            {data.ctas.primary.label}
            <Icon icon="mdi:arrow-right" className="size-5" aria-hidden />
          </Link>
          {data.ctas.secondary ? (
            <Link
              href={data.ctas.secondary.href}
              className="landing-cta landing-cta--ghost h-12 px-7 text-base"
            >
              {data.ctas.secondary.label}
            </Link>
          ) : null}
        </LandingReveal>
      </div>
    </section>
  )
}