"use client";

import { Card, CardHeader } from "@/components/ui/card";
import { cn } from "@/lib/utils";
import { Settings2, Sparkles, Zap } from "lucide-react";
import { ReactNode } from "react";
import { useContent } from "@/components/layout/content-provider";

const featureIcons = [Zap, Settings2, Sparkles];

export default function FeaturesCardGrid() {
  const content = useContent();
  const { featuresCardGrid } = content.pages.home;
  const features = featuresCardGrid.items.map((item, i) => ({
    ...item,
    icon: featureIcons[i] ?? Zap,
  }));

  return (
    <section
      className="py-16 md:py-24 lg:py-32 border-t border-border/50"
      aria-labelledby="features-heading"
    >
      <div className="@container mx-auto max-w-5xl px-6" dir="rtl">
        <div className="text-center">
          <h2
            id="features-heading"
            className="text-heading-2 font-semibold leading-tight text-foreground"
          >
            {featuresCardGrid.heading}
          </h2>
        </div>
        <div className="@min-4xl:max-w-full @min-4xl:grid-cols-3 mx-auto mt-10 grid max-w-sm gap-6 md:mt-14 lg:gap-8">
          {features.map((item) => {
            const Icon = item.icon;
            return (
              <Card
                key={item.title}
                className="group border-border/80 bg-card text-center shadow-sm transition-shadow hover:shadow-md hover:border-primary/20"
              >
                <CardHeader className="pb-4">
                  <CardDecorator>
                    <Icon
                      className="size-6 text-primary"
                      aria-hidden
                    />
                  </CardDecorator>
                  <h3 className="mt-5 text-heading-5 font-medium text-foreground">
                    {item.title}
                  </h3>
                  <p className="mt-2 text-body-sm leading-relaxed text-muted-foreground">
                    {item.description}
                  </p>
                </CardHeader>
              </Card>
            );
          })}
        </div>
      </div>
    </section>
  );
}

const CardDecorator = ({ children }: { children: ReactNode }) => (
  <div className="mask-radial-from-40% mask-radial-to-60% relative mx-auto size-36 duration-200 [--color-border:color-mix(in_oklab,var(--color-primary)_0.12,transparent)] group-hover:[--color-border:color-mix(in_oklab,var(--color-primary)_0.2,transparent)]">
    <div
      aria-hidden
      className="absolute inset-0 bg-[linear-gradient(to_right,var(--color-border)_1px,transparent_1px),linear-gradient(to_bottom,var(--color-border)_1px,transparent_1px)] bg-[size:24px_24px] opacity-80"
    />
    <div className="bg-card border-border/60 absolute inset-0 m-auto flex size-12 items-center justify-center rounded-lg border shadow-sm">
      {children}
    </div>
  </div>
);