import {
  Activity,
  BriefcaseBusiness,
  Layers3,
  Mail,
  Sparkles,
  TimerReset,
} from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { SectionHeading } from "./section-heading";
import { BentoCard } from "./bento-card";
import type { BentoSectionCopy } from "./types";

type BentoGridSectionProps = {
  copy: BentoSectionCopy;
};

export function BentoGridSection({ copy }: BentoGridSectionProps) {
  return (
    <section className="space-y-8">
      <SectionHeading
        eyebrow={copy.eyebrow}
        title={copy.title}
        description={copy.description}
      />

      <div className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4 xl:gap-6">
        <BentoCard
          eyebrow={copy.about.eyebrow}
          title={copy.about.title}
          description={copy.about.description}
          icon={<BriefcaseBusiness className="h-5 w-5" />}
          className="xl:col-span-2 xl:row-span-2"
        >
          <ul className="grid gap-3 sm:grid-cols-2">
            {copy.about.points.map((item) => (
              <li
                key={item}
                className="rounded-nested border border-border/70 bg-background px-4 py-3 text-sm text-foreground/88"
              >
                {item}
              </li>
            ))}
          </ul>
        </BentoCard>

        <BentoCard
          eyebrow={copy.coreStack.eyebrow}
          title={copy.coreStack.title}
          icon={<Layers3 className="h-5 w-5" />}
        >
          <div className="flex flex-wrap gap-2">
            {copy.coreStack.items.map((item) => (
              <Badge key={item} variant="outline" className="border-border/80 bg-background">
                {item}
              </Badge>
            ))}
          </div>
        </BentoCard>

        <BentoCard
          eyebrow={copy.availability.eyebrow}
          title={copy.availability.title}
          description={copy.availability.description}
          icon={<Activity className="h-5 w-5" />}
        >
          <Badge variant="success" className="w-fit">
            {copy.availability.status}
          </Badge>
        </BentoCard>

        <BentoCard
          eyebrow={copy.currentFocus.eyebrow}
          title={copy.currentFocus.title}
          icon={<Sparkles className="h-5 w-5" />}
        >
          <ul className="space-y-3 text-sm text-foreground/88">
            {copy.currentFocus.items.map((item) => (
              <li key={item} className="rounded-nested border border-border/70 bg-background px-4 py-3">
                {item}
              </li>
            ))}
          </ul>
        </BentoCard>

        <BentoCard
          eyebrow={copy.contact.eyebrow}
          title={copy.contact.title}
          description={copy.contact.description}
          icon={<Mail className="h-5 w-5" />}
        >
          <div className="rounded-nested border border-border/70 bg-background px-4 py-4">
            <p className="text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground">
              {copy.contact.emailLabel}
            </p>
            <p className="mt-2 text-base font-medium text-foreground">
              {copy.contact.emailValue}
            </p>
          </div>
        </BentoCard>

        <BentoCard
          eyebrow={copy.highlights.eyebrow}
          title={copy.highlights.title}
          icon={<TimerReset className="h-5 w-5" />}
        >
          <div className="grid gap-3 sm:grid-cols-3 xl:grid-cols-1">
            {copy.highlights.items.map((item) => (
              <div
                key={item.label}
                className="rounded-nested border border-border/70 bg-background px-4 py-4"
              >
                <p className="text-2xl font-semibold tracking-[-0.05em] text-foreground">
                  {item.value}
                </p>
                <p className="mt-1 text-sm text-muted-foreground">{item.label}</p>
              </div>
            ))}
          </div>
        </BentoCard>
      </div>
    </section>
  );
}