Download Minimal

"use client";

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

interface DownloadMinimalProps {
  title?: string;
  ctaLabel?: string;
  ctaUrl?: string;
  fileSize?: string;
  version?: string;
  note?: string;
}

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

export default function DownloadMinimal({
  title = "Telecharger l'application",
  ctaLabel = "Telecharger",
  ctaUrl = "#",
  fileSize = "78 Mo",
  version = "v2.4.1",
  note = "macOS 12+ — Mises a jour automatiques",
}: DownloadMinimalProps) {
  return (
    <section
      style={{
        position: "relative",
        overflow: "hidden",
        paddingTop: "var(--section-padding-y-lg)",
        paddingBottom: "var(--section-padding-y-lg)",
        background: "var(--color-background)",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        minHeight: "50vh",
      }}
    >
      <div
        style={{
          width: "100%",
          maxWidth: "var(--container-max-width)",
          margin: "0 auto",
          padding: "0 var(--container-padding-x)",
          textAlign: "center",
        }}
      >
        <motion.h2
          initial={{ opacity: 0, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, ease: EASE }}
          style={{
            fontFamily: "var(--font-sans)",
            fontSize: "clamp(1.75rem, 3.5vw, 2.75rem)",
            fontWeight: 700,
            lineHeight: 1.15,
            letterSpacing: "-0.02em",
            color: "var(--color-foreground)",
            marginBottom: "2.5rem",
          }}
        >
          {title}
        </motion.h2>

        {/* Big download button */}
        <motion.div
          initial={{ opacity: 0, scale: 0.95 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 0.5, delay: 0.1, ease: EASE }}
        >
          <a
            href={ctaUrl}
            style={{
              display: "inline-flex",
              flexDirection: "column",
              alignItems: "center",
              gap: "1rem",
              padding: "2.5rem 4rem",
              borderRadius: "var(--radius-xl)",
              background: "var(--color-accent)",
              color: "var(--color-foreground)",
              textDecoration: "none",
              transition: "transform var(--duration-normal) var(--ease-out)",
            }}
          >
            <Download style={{ width: 36, height: 36 }} />
            <span style={{ fontWeight: 700, fontSize: "1.25rem" }}>{ctaLabel}</span>
            <span
              style={{
                fontSize: "0.8125rem",
                opacity: 0.8,
                display: "flex",
                alignItems: "center",
                gap: "0.5rem",
              }}
            >
              <span>{version}</span>
              <span aria-hidden>·</span>
              <span>{fileSize}</span>
            </span>
          </a>
        </motion.div>

        {note && (
          <motion.p
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            transition={{ duration: 0.4, delay: 0.25, ease: EASE }}
            style={{
              marginTop: "1.5rem",
              fontSize: "0.8125rem",
              color: "var(--color-foreground-muted)",
              opacity: 0.7,
            }}
          >
            {note}
          </motion.p>
        )}
      </div>
    </section>
  );
}