Security Badges

"use client";

import { motion } from "framer-motion";
import { ShieldCheck } from "lucide-react";

interface SecurityBadge {
  label: string;
  description?: string;
  acronym: string;
}

interface SecurityBadgesProps {
  title?: string;
  description?: string;
  badges?: SecurityBadge[];
}

const EASE = [0.16, 1, 0.3, 1] as const;

export default function SecurityBadges({
  title = "Securite et conformite",
  description = "Certifie par les standards les plus exigeants",
  badges = [],
}: SecurityBadgesProps) {
  return (
    <section
      style={{
        padding: "var(--section-padding-y) 0",
        background: "var(--color-background)",
      }}
    >
      <div
        style={{
          maxWidth: "var(--container-max-width)",
          margin: "0 auto",
          padding: "0 var(--container-padding-x)",
        }}
      >
        <motion.div
          initial={{ opacity: 0, y: 16 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5, ease: EASE }}
          style={{ textAlign: "center", marginBottom: "3rem" }}
        >
          <div style={{ display: "inline-flex", alignItems: "center", gap: "0.5rem", marginBottom: "0.75rem" }}>
            <ShieldCheck style={{ width: 22, height: 22, color: "var(--color-accent)" }} />
            <h2
              style={{
                fontFamily: "var(--font-sans)",
                fontSize: "clamp(1.75rem, 3.5vw, 2.75rem)",
                fontWeight: 700,
                color: "var(--color-foreground)",
              }}
            >
              {title}
            </h2>
          </div>
          <p style={{ fontSize: "1.0625rem", color: "var(--color-foreground-muted)", maxWidth: "520px", margin: "0 auto" }}>
            {description}
          </p>
        </motion.div>

        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
            gap: "1.25rem",
            maxWidth: "900px",
            margin: "0 auto",
          }}
        >
          {badges.map((badge, i) => (
            <motion.div
              key={i}
              initial={{ opacity: 0, scale: 0.95 }}
              whileInView={{ opacity: 1, scale: 1 }}
              viewport={{ once: true }}
              transition={{ duration: 0.4, delay: i * 0.06, ease: EASE }}
              style={{
                padding: "1.5rem",
                borderRadius: "var(--radius-lg)",
                background: "var(--color-background-alt)",
                border: "1px solid var(--color-border)",
                textAlign: "center",
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
                gap: "0.75rem",
              }}
            >
              {/* Badge icon circle */}
              <div
                style={{
                  width: 56,
                  height: 56,
                  borderRadius: "var(--radius-full)",
                  background: "var(--color-accent-subtle)",
                  border: "2px solid var(--color-accent)",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                }}
              >
                <span
                  style={{
                    fontFamily: "var(--font-mono, var(--font-sans))",
                    fontSize: "0.75rem",
                    fontWeight: 700,
                    color: "var(--color-accent)",
                    letterSpacing: "0.02em",
                  }}
                >
                  {badge.acronym}
                </span>
              </div>

              <h3 style={{ fontFamily: "var(--font-sans)", fontSize: "0.9375rem", fontWeight: 600, color: "var(--color-foreground)" }}>
                {badge.label}
              </h3>
              {badge.description && (
                <p style={{ fontSize: "0.8125rem", color: "var(--color-foreground-muted)", lineHeight: 1.5 }}>
                  {badge.description}
                </p>
              )}
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}