Team Advisory

"use client";

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

interface Advisor {
  name: string;
  title: string;
  affiliation: string;
  linkedinUrl?: string;
}

interface TeamAdvisoryProps {
  title?: string;
  subtitle?: string;
  description?: string;
  advisors?: Advisor[];
}

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

export default function TeamAdvisory({
  title = "Board & Advisors",
  subtitle = "Conseil",
  description = "Des leaders reconnus qui guident notre strategie.",
  advisors = [],
}: TeamAdvisoryProps) {
  return (
    <section
      style={{
        paddingTop: "var(--section-padding-y)",
        paddingBottom: "var(--section-padding-y)",
        background: "var(--color-background-alt)",
      }}
    >
      <div
        style={{
          maxWidth: "var(--container-max-width)",
          margin: "0 auto",
          paddingLeft: "var(--container-padding-x)",
          paddingRight: "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" }}
        >
          <p
            style={{
              fontSize: "0.75rem",
              fontWeight: 600,
              textTransform: "uppercase",
              letterSpacing: "0.1em",
              color: "var(--color-accent)",
              marginBottom: "0.5rem",
            }}
          >
            {subtitle}
          </p>
          <h2
            style={{
              fontFamily: "var(--font-sans)",
              fontSize: "clamp(1.5rem, 3vw, 2.25rem)",
              fontWeight: 700,
              letterSpacing: "-0.02em",
              color: "var(--color-foreground)",
              marginBottom: "0.75rem",
            }}
          >
            {title}
          </h2>
          <p
            style={{
              fontSize: "1rem",
              color: "var(--color-foreground-muted)",
              maxWidth: "480px",
              margin: "0 auto",
            }}
          >
            {description}
          </p>
        </motion.div>

        <div
          style={{
            display: "grid",
            gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))",
            gap: "1rem",
            maxWidth: "900px",
            margin: "0 auto",
          }}
        >
          {advisors.map((advisor, i) => (
            <motion.div
              key={advisor.name}
              initial={{ opacity: 0, y: 16 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.4, delay: i * 0.08, ease: EASE }}
              style={{
                display: "flex",
                alignItems: "flex-start",
                gap: "1rem",
                padding: "1.5rem",
                borderRadius: "var(--radius-xl)",
                background: "var(--color-background-card)",
                border: "1px solid var(--color-border)",
              }}
            >
              <div
                style={{
                  width: "56px",
                  height: "56px",
                  borderRadius: "var(--radius-full)",
                  background: "var(--color-accent-subtle)",
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center",
                  flexShrink: 0,
                }}
              >
                <span
                  style={{
                    fontSize: "1.125rem",
                    fontWeight: 700,
                    color: "var(--color-accent)",
                    fontFamily: "var(--font-serif)",
                  }}
                >
                  {advisor.name.charAt(0)}
                </span>
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
                  <h3
                    style={{
                      fontSize: "0.9375rem",
                      fontWeight: 600,
                      color: "var(--color-foreground)",
                    }}
                  >
                    {advisor.name}
                  </h3>
                  {advisor.linkedinUrl && (
                    <a
                      href={advisor.linkedinUrl}
                      aria-label={`Profil de ${advisor.name}`}
                      style={{ color: "var(--color-foreground-muted)", flexShrink: 0 }}
                    >
                      <ExternalLink style={{ width: 14, height: 14 }} />
                    </a>
                  )}
                </div>
                <p
                  style={{
                    fontSize: "0.8125rem",
                    fontWeight: 500,
                    color: "var(--color-accent)",
                    marginTop: "0.125rem",
                  }}
                >
                  {advisor.title}
                </p>
                <p
                  style={{
                    fontSize: "0.75rem",
                    color: "var(--color-foreground-muted)",
                    marginTop: "0.25rem",
                  }}
                >
                  {advisor.affiliation}
                </p>
              </div>
            </motion.div>
          ))}
        </div>
      </div>
    </section>
  );
}