/**
 * Features Server Component
 *
 * Renders static feature cards server-side
 * - Title and description
 * - 4 feature cards with metrics
 * - Background grid
 */

import { cn } from "@/lib/utils";
import type { FeatureCard } from "./features.types";

const features: FeatureCard[] = [
  {
    percentage: "-15%",
    description: "Budget Énergie",
    subtext: "Économie moyenne constatée après renégociation.",
  },
  {
    percentage: "100%",
    description: "Délégué",
    subtext: "Gestion administrative et transfert de dossier inclus.",
  },
  {
    percentage: "0",
    description: "Commercial",
    subtext: "Uniquement des ingénieurs experts dédiés à votre compte.",
  },
  {
    percentage: "< 24h",
    description: "Réactivité",
    subtext: "Audit technique et réponses à vos questions.",
  },
];

export function FeaturesServer() {
  return (
    <div className="w-full py-20 relative bg-white overflow-hidden">
      <div className="text-center mb-16 relative z-20">
        <h2 className="text-4xl md:text-5xl font-bold mb-4 text-slate-900">
          La performance énergétique, <br />
          <span className="text-orange-700">sans</span> compromis.
        </h2>
        <p className="text-slate-900 mx-auto max-w-2xl text-lg">
          En tant que courtier en énergie indépendant, nous ne vendons pas
          d&apos;énergie : nous optimisons votre stratégie d&apos;achat avec la
          précision d&apos;un bureau d&apos;études d&apos;ingénieurs.
        </p>
      </div>

      <div
        style={{ zIndex: 10 }}
        className="relative grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 max-w-7xl mx-auto px-4"
      >
        {features.map((feature, index) => (
          <div
            key={index}
            className={cn(
              "relative p-6 rounded-xl border border-slate-200 bg-white/80 backdrop-blur-md",
              "hover:shadow-xl transition-all duration-300 group",
              "before:absolute before:top-0 before:left-1/2 before:-translate-x-1/2 before:h-[2px] before:w-12",
              "before:bg-gradient-to-r from-orange-600 to-orange-900",
              "hover:-translate-y-1"
            )}
          >
            {/* Static grid background */}
            <div
              className="absolute inset-0 rounded-xl opacity-30"
              style={{
                backgroundImage: `
                  linear-gradient(to right, #cbd5e1 1px, transparent 1px),
                  linear-gradient(to bottom, #cbd5e1 1px, transparent 1px)
                `,
                backgroundSize: "24px 24px",
              }}
            />

            {/* Radial effect */}
            <div className="absolute z-0 inset-0 rounded-xl h-full bg-radial from-white/50 via-white/60 to-white" />

            <div className="relative z-10 flex flex-col items-center text-center">
              <h3 className="text-5xl font-bold mb-2 text-orange-700 tracking-tight">
                {feature.percentage}
              </h3>
              <p className="text-lg font-semibold text-slate-800 uppercase tracking-wider mb-2">
                {feature.description}
              </p>
              <p className="text-sm text-slate-900 leading-relaxed">
                {feature.subtext}
              </p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}