Social Proof Awards

"use client";

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

interface AwardItem {
  id: string;
  title: string;
  organization: string;
  year: string;
  category?: string;
}

interface SocialProofAwardsProps {
  badge?: string;
  title?: string;
  subtitle?: string;
  awards: AwardItem[];
}

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

export default function SocialProofAwards({
  badge,
  title,
  subtitle,
  awards,
}: SocialProofAwardsProps) {
  return (
    <section
      style={{
        paddingTop: "var(--section-padding-y, 6rem)",
        paddingBottom: "var(--section-padding-y, 6rem)",
        backgroundColor: "var(--color-background)",
      }}
    >
      <div
        style={{
          maxWidth: "var(--container-max-width, 72rem)",
          margin: "0 auto",
          padding: "0 var(--container-padding-x, 1.5rem)",
        }}
      >
        {/* Header */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-80px" }}
          transition={{ duration: 0.5, ease: EASE }}
          style={{ textAlign: "center", marginBottom: "3.5rem" }}
        >
          {badge && (
            <span
              style={{
                display: "inline-block",
                fontSize: "0.75rem",
                fontWeight: 500,
                letterSpacing: "0.05em",
                textTransform: "uppercase",
                padding: "0.25rem 0.75rem",
                borderRadius: "var(--radius-full, 9999px)",
                border: "1px solid var(--color-border)",
                color: "var(--color-accent)",
                marginBottom: "1rem",
              }}
            >
              {badge}
            </span>
          )}
          {title && (
            <h2
              style={{
                fontSize: "clamp(1.875rem, 3vw, 2.5rem)",
                fontWeight: 700,
                letterSpacing: "-0.025em",
                color: "var(--color-foreground)",
                lineHeight: 1.2,
              }}
            >
              {title}
            </h2>
          )}
          {subtitle && (
            <p
              style={{
                marginTop: "0.75rem",
                fontSize: "1rem",
                color: "var(--color-foreground-muted)",
                maxWidth: "32rem",
                marginLeft: "auto",
                marginRight: "auto",
                lineHeight: 1.6,
              }}
            >
              {subtitle}
            </p>
          )}
        </motion.div>

        {/* Awards grid */}
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))",
            gap: "1.5rem",
          }}
        >
          {awards.map((award, i) => (
            <motion.div
              key={award.id}
              initial={{ opacity: 0, y: 20 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true, margin: "-60px" }}
              transition={{ duration: 0.45, delay: i * 0.08, ease: EASE }}
              style={{
                padding: "2rem",
                borderRadius: "var(--radius-xl, 1.5rem)",
                border: "1px solid var(--color-border)",
                backgroundColor: "var(--color-background-card)",
                textAlign: "center",
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
                gap: "0.75rem",
              }}
            >
              {/* Award icon */}
              <div
                style={{
                  width: "3rem",
                  height: "3rem",
                  borderRadius: "var(--radius-full, 9999px)",
                  backgroundColor: "var(--color-accent-subtle, rgba(129,140,248,0.1))",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  color: "var(--color-accent)",
                }}
              >
                <Award style={{ width: 20, height: 20 }} />
              </div>

              {/* Year */}
              <span
                style={{
                  fontSize: "0.6875rem",
                  fontWeight: 600,
                  textTransform: "uppercase",
                  letterSpacing: "0.08em",
                  color: "var(--color-accent)",
                  padding: "0.125rem 0.5rem",
                  borderRadius: "var(--radius-full, 9999px)",
                  backgroundColor: "var(--color-accent-subtle, rgba(129,140,248,0.1))",
                }}
              >
                {award.year}
              </span>

              <h3
                style={{
                  fontSize: "1.0625rem",
                  fontWeight: 600,
                  color: "var(--color-foreground)",
                }}
              >
                {award.title}
              </h3>

              <p
                style={{
                  fontSize: "0.8125rem",
                  color: "var(--color-foreground-muted)",
                }}
              >
                {award.organization}
              </p>

              {award.category && (
                <span
                  style={{
                    fontSize: "0.75rem",
                    color: "var(--color-foreground-muted)",
                    padding: "0.25rem 0.75rem",
                    borderRadius: "var(--radius-full, 9999px)",
                    border: "1px solid var(--color-border)",
                  }}
                >
                  {award.category}
                </span>
              )}
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}