About Founder

"use client";

import { motion } from "framer-motion";
import { Quote, ImageIcon } from "lucide-react";

interface AboutFounderProps {
  name?: string;
  role?: string;
  quote?: string;
  bio?: string;
  imageColor?: string;
}

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

export default function AboutFounder({
  name = "Nom du fondateur",
  role = "Fondateur & CEO",
  quote = "Citation inspirante.",
  bio = "Bio courte du fondateur.",
  imageColor = "var(--color-accent)",
}: AboutFounderProps) {
  return (
    <section
      style={{
        paddingTop: "var(--section-padding-y)",
        paddingBottom: "var(--section-padding-y)",
        background: "var(--color-background)",
      }}
    >
      <div
        style={{
          maxWidth: "var(--container-max-width)",
          margin: "0 auto",
          padding: "0 var(--container-padding-x)",
          display: "grid",
          gridTemplateColumns: "320px 1fr",
          gap: "4rem",
          alignItems: "center",
        }}
      >
        {/* Photo placeholder */}
        <motion.div
          initial={{ opacity: 0, scale: 0.95 }}
          whileInView={{ opacity: 1, scale: 1 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6, ease: EASE }}
          style={{
            position: "relative",
            aspectRatio: "3/4",
            borderRadius: "var(--radius-lg)",
            overflow: "hidden",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
          }}
        >
          <div style={{ position: "absolute", inset: 0, background: imageColor, opacity: 0.12 }} />
          <ImageIcon style={{ width: 48, height: 48, color: "var(--color-foreground-muted)", opacity: 0.25 }} />
        </motion.div>

        {/* Content */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6, delay: 0.1, ease: EASE }}
        >
          {/* Quote */}
          <div style={{ position: "relative", marginBottom: "2rem" }}>
            <Quote
              style={{
                width: 32,
                height: 32,
                color: "var(--color-accent)",
                opacity: 0.3,
                marginBottom: "0.75rem",
              }}
            />
            <blockquote
              style={{
                fontFamily: "var(--font-serif)",
                fontSize: "clamp(1.25rem, 2.5vw, 1.75rem)",
                fontStyle: "italic",
                lineHeight: 1.5,
                color: "var(--color-foreground)",
                margin: 0,
                padding: 0,
                border: "none",
              }}
            >
              {quote}
            </blockquote>
          </div>

          {/* Name and role */}
          <div
            style={{
              display: "flex",
              alignItems: "center",
              gap: "1rem",
              marginBottom: "1.5rem",
              paddingBottom: "1.5rem",
              borderBottom: "1px solid var(--color-border)",
            }}
          >
            <div>
              <p
                style={{
                  fontFamily: "var(--font-sans)",
                  fontSize: "1.125rem",
                  fontWeight: 600,
                  color: "var(--color-foreground)",
                  marginBottom: "0.125rem",
                }}
              >
                {name}
              </p>
              <p
                style={{
                  fontSize: "0.875rem",
                  color: "var(--color-accent)",
                  fontWeight: 500,
                }}
              >
                {role}
              </p>
            </div>
          </div>

          {/* Bio */}
          <p
            style={{
              fontSize: "1rem",
              lineHeight: 1.7,
              color: "var(--color-foreground-muted)",
            }}
          >
            {bio}
          </p>
        </motion.div>
      </div>
    </section>
  );
}