import { ArrowRight, MapPin, Sparkles } from "lucide-react";
import Link from "next/link";

import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { AppCard } from "@/components/ui/app-card";
import { cn } from "@/lib/utils";
import type { HeroCopy } from "./types";

type HeroSectionProps = {
  copy: HeroCopy;
  contactHref: string;
  portfolioHref: string;
};

export function HeroSection({
  copy,
  contactHref,
  portfolioHref,
}: HeroSectionProps) {
  return (
    <section className="relative pt-8 sm:pt-12 lg:pt-16">
      <div className="grid gap-6 lg:grid-cols-[minmax(0,1.15fr)_minmax(320px,0.85fr)] lg:items-end">
        <div className="space-y-8">
          <Badge
            variant="outline"
            className="w-fit border-border/80 bg-background/80 text-foreground shadow-xs"
          >
            <span className="mr-2 h-2 w-2 rounded-full bg-status-success" aria-hidden="true" />
            {copy.availability}
          </Badge>

          <div className="space-y-5">
            <p className="text-sm font-semibold uppercase tracking-[0.18em] text-muted-foreground">
              {copy.name}
            </p>
            <h1 className="max-w-4xl text-balance text-5xl font-semibold tracking-[-0.07em] text-foreground sm:text-6xl lg:text-7xl">
              {copy.headline}
            </h1>
            <p className="max-w-2xl text-base leading-8 text-muted-foreground sm:text-lg">
              {copy.description}
            </p>
          </div>

          <div className="flex flex-wrap gap-3">
            <Button asChild size="lg" className="shadow-sm">
              <Link href={contactHref}>
                {copy.primaryCta}
                <ArrowRight className="h-4 w-4" />
              </Link>
            </Button>
            <Button
              asChild
              size="lg"
              variant="outline"
              className="border-border/80 bg-background/70 hover:border-border-strong hover:bg-background"
            >
              <Link href={portfolioHref}>{copy.secondaryCta}</Link>
            </Button>
          </div>

          <div className="flex flex-wrap gap-3">
            {copy.highlights.map((item) => (
              <Badge
                key={item}
                variant="secondary"
                className="bg-secondary/70 text-foreground shadow-none"
              >
                {item}
              </Badge>
            ))}
          </div>
        </div>

        <AppCard className="overflow-hidden">
          <div className="grid gap-3">
            <div className="grid gap-3 sm:grid-cols-2">
              <MetricCard label={copy.roleLabel} value={copy.roleValue} />
              <MetricCard label={copy.locationLabel} value={copy.locationValue} icon={MapPin} />
            </div>
            <MetricCard label={copy.focusLabel} value={copy.focusValue} icon={Sparkles} strong />
          </div>
        </AppCard>
      </div>
    </section>
  );
}

type MetricCardProps = {
  label: string;
  value: string;
  strong?: boolean;
  icon?: typeof MapPin;
};

function MetricCard({ label, value, strong = false, icon: Icon }: MetricCardProps) {
  return (
    <div
      className={cn(
        "rounded-nested border border-border/70 bg-background p-5 transition-all duration-300",
        strong && "bg-surface-2",
      )}
    >
      <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground">
        {Icon ? <Icon className="h-3.5 w-3.5" /> : null}
        <span>{label}</span>
      </div>
      <p className="mt-3 text-xl font-semibold tracking-[-0.04em] text-foreground">
        {value}
      </p>
    </div>
  );
}