Security Compliance

"use client";

import { motion } from "framer-motion";
import { CheckCircle2, Building2 } from "lucide-react";

interface ComplianceItem {
  label: string;
  checked: boolean;
}

interface CompliancePartner {
  name: string;
  initials: string;
}

interface SecurityComplianceProps {
  title?: string;
  description?: string;
  checklist?: ComplianceItem[];
  partnersLabel?: string;
  partners?: CompliancePartner[];
}

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

export default function SecurityCompliance({
  title = "Conformite",
  description = "Nous respectons les standards reglementaires les plus stricts",
  checklist = [],
  partnersLabel = "Nos partenaires de confiance",
  partners = [],
}: SecurityComplianceProps) {
  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" }}
        >
          <h2
            style={{
              fontFamily: "var(--font-sans)",
              fontSize: "clamp(1.75rem, 3.5vw, 2.75rem)",
              fontWeight: 700,
              color: "var(--color-foreground)",
              marginBottom: "0.75rem",
            }}
          >
            {title}
          </h2>
          <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(300px, 1fr))",
            gap: "2rem",
            maxWidth: "900px",
            margin: "0 auto",
          }}
        >
          {/* Checklist */}
          <motion.div
            initial={{ opacity: 0, x: -16 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, ease: EASE }}
          >
            <h3
              style={{
                fontFamily: "var(--font-sans)",
                fontSize: "1.0625rem",
                fontWeight: 600,
                color: "var(--color-foreground)",
                marginBottom: "1rem",
              }}
            >
              Checklist de conformite
            </h3>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: "0.625rem" }}>
              {checklist.map((item, i) => (
                <motion.li
                  key={i}
                  initial={{ opacity: 0, x: -8 }}
                  whileInView={{ opacity: 1, x: 0 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.35, delay: i * 0.04, ease: EASE }}
                  style={{
                    display: "flex",
                    alignItems: "center",
                    gap: "0.625rem",
                    padding: "0.625rem 1rem",
                    borderRadius: "var(--radius-md)",
                    background: "var(--color-background-alt)",
                    border: "1px solid var(--color-border)",
                  }}
                >
                  <CheckCircle2
                    style={{
                      width: 18,
                      height: 18,
                      color: item.checked ? "var(--color-accent)" : "var(--color-border)",
                      flexShrink: 0,
                    }}
                  />
                  <span
                    style={{
                      fontSize: "0.9375rem",
                      color: item.checked ? "var(--color-foreground)" : "var(--color-foreground-muted)",
                    }}
                  >
                    {item.label}
                  </span>
                </motion.li>
              ))}
            </ul>
          </motion.div>

          {/* Partners */}
          <motion.div
            initial={{ opacity: 0, x: 16 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.5, ease: EASE }}
          >
            <h3
              style={{
                fontFamily: "var(--font-sans)",
                fontSize: "1.0625rem",
                fontWeight: 600,
                color: "var(--color-foreground)",
                marginBottom: "1rem",
              }}
            >
              {partnersLabel}
            </h3>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: "0.75rem" }}>
              {partners.map((partner, i) => (
                <motion.div
                  key={i}
                  initial={{ opacity: 0, scale: 0.95 }}
                  whileInView={{ opacity: 1, scale: 1 }}
                  viewport={{ once: true }}
                  transition={{ duration: 0.35, delay: i * 0.04, ease: EASE }}
                  style={{
                    padding: "1rem",
                    borderRadius: "var(--radius-md)",
                    background: "var(--color-background-alt)",
                    border: "1px solid var(--color-border)",
                    display: "flex",
                    alignItems: "center",
                    gap: "0.625rem",
                  }}
                >
                  <div
                    style={{
                      width: 36,
                      height: 36,
                      borderRadius: "var(--radius-md)",
                      background: "var(--color-accent-subtle)",
                      display: "flex",
                      alignItems: "center",
                      justifyContent: "center",
                      flexShrink: 0,
                    }}
                  >
                    <Building2 style={{ width: 16, height: 16, color: "var(--color-accent)" }} />
                  </div>
                  <span style={{ fontSize: "0.875rem", fontWeight: 500, color: "var(--color-foreground)" }}>
                    {partner.name}
                  </span>
                </motion.div>
              ))}
            </div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}