"use client";

import Image from "next/image";
import Link from "next/link";
import { ArrowRight, Play } from "lucide-react";

import { ButtonLink } from "@/components/ui/button-link";
import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { siteConfig } from "@/lib/constants/site";

const FALLBACK_HERO =
  "https://images.unsplash.com/photo-1583454110551-21f2fa2afe61?w=1920&q=85";

type Props = {
  backgroundImage?: string;
};

export function HeroSection({ backgroundImage }: Props) {
  const src = backgroundImage?.trim() || FALLBACK_HERO;
  return (
    <section className="relative overflow-hidden border-b border-border/50">
      <div className="mesh-hero absolute inset-0 opacity-90" aria-hidden />
      <div className="ds-container relative grid min-h-[min(88vh,820px)] gap-10 py-14 lg:grid-cols-2 lg:items-center lg:gap-16 lg:py-20">
        <div className="animate-fade-in-up flex max-w-xl flex-col justify-center">
          <p className="text-primary inline-flex w-fit items-center gap-2 rounded-full border border-primary/25 bg-primary/10 px-3 py-1 text-xs font-medium">
            <span className="bg-primary size-1.5 animate-pulse rounded-full" />
            Coaching · Programs · Results
          </p>
          <h1 className="font-display mt-6 text-4xl font-semibold leading-[1.08] tracking-tight text-foreground sm:text-5xl lg:text-[3.25rem]">
            Train with structure.
            <span className="text-muted-foreground block font-medium">
              {siteConfig.tagline}
            </span>
          </h1>
          <p className="text-muted-foreground mt-5 max-w-lg text-base leading-relaxed sm:text-lg">
            Programs, nutrition systems, and accountability built for people who want a
            serious body of work — not another generic PDF.
          </p>
          <div className="mt-9 flex flex-wrap items-center gap-3">
            <ButtonLink href="/programs" size="lg" className="rounded-xl px-6 shadow-sm">
              View plans
              <ArrowRight className="size-4 opacity-80" />
            </ButtonLink>
            <Link
              href="/gallery"
              className={cn(
                buttonVariants({ variant: "outline", size: "lg" }),
                "inline-flex items-center gap-2 rounded-xl border-border/80 px-6",
              )}
            >
              <Play className="text-primary size-4 fill-current" />
              Transformations
            </Link>
          </div>
          <dl className="text-muted-foreground mt-10 grid grid-cols-3 gap-4 border-t border-border/50 pt-8 text-xs sm:text-sm">
            <div>
              <dt className="font-medium text-foreground">Programs</dt>
              <dd className="mt-0.5">Structured paths</dd>
            </div>
            <div>
              <dt className="font-medium text-foreground">Dashboard</dt>
              <dd className="mt-0.5">Instant access</dd>
            </div>
            <div>
              <dt className="font-medium text-foreground">Support</dt>
              <dd className="mt-0.5">For members</dd>
            </div>
          </dl>
        </div>

        <div className="animate-fade-in-up stagger-1 relative">
          <div className="ring-border/60 relative aspect-[16/11] overflow-hidden rounded-2xl bg-muted shadow-lg ring-1 lg:aspect-[4/5]">
            <Image
              src={src}
              alt="Athletic training"
              fill
              priority
              sizes="(max-width: 1023px) calc(100vw - 2rem), (max-width: 1279px) 44vw, 520px"
              className="object-cover object-top"
            />
            <div className="absolute inset-0 bg-gradient-to-t from-background/90 via-background/20 to-transparent lg:via-transparent" />
          </div>
          <div className="border-border/60 bg-card/90 absolute -bottom-4 -left-4 hidden max-w-[240px] rounded-xl border p-4 shadow-md backdrop-blur-md lg:block">
            <p className="text-muted-foreground text-xs font-medium uppercase tracking-wider">
              Member area
            </p>
            <p className="font-display mt-1 text-sm font-semibold tracking-tight">
              Plans, PDFs, and onboarding in one place
            </p>
          </div>
        </div>

      </div>
    </section>
  );
}