Mega Footer CTA

"use client";

import { ArrowRight } from "lucide-react";

interface MegaFooterCtaProps {
  companyName?: string;
  ctaTitle?: string;
  ctaDescription?: string;
  ctaLabel?: string;
  ctaUrl?: string;
  links?: { label: string; url: string }[];
  copyright?: string;
}

export default function MegaFooterCta({
  companyName = "Entreprise",
  ctaTitle = "Pret a commencer ?",
  ctaDescription = "Lancez votre projet en quelques minutes.",
  ctaLabel = "Demarrer",
  ctaUrl = "#contact",
  links = [],
  copyright = "Tous droits reserves.",
}: MegaFooterCtaProps) {
  return (
    <footer
      style={{
        paddingTop: "var(--section-padding-y)",
        paddingBottom: "2rem",
        background: "var(--color-background-dark)",
      }}
    >
      <div
        className="mx-auto"
        style={{
          maxWidth: "var(--container-max-width)",
          paddingLeft: "var(--container-padding-x)",
          paddingRight: "var(--container-padding-x)",
        }}
      >
        {/* CTA block */}
        <div
          className="p-10 rounded-xl text-center mb-12"
          style={{
            background: "var(--color-accent)",
            borderRadius: "var(--radius-xl)",
          }}
        >
          <h3 className="text-2xl md:text-3xl font-bold mb-3" style={{ color: "var(--color-foreground)" }}>
            {ctaTitle}
          </h3>
          <p className="text-sm mb-6 max-w-md mx-auto" style={{ color: "var(--color-foreground)", opacity: 0.7 }}>
            {ctaDescription}
          </p>
          <a
            href={ctaUrl}
            className="inline-flex items-center gap-2 px-7 py-3 rounded-full text-sm font-semibold"
            style={{
              background: "var(--color-foreground)",
              color: "var(--color-accent)",
              textDecoration: "none",
            }}
          >
            {ctaLabel}
            <ArrowRight className="h-4 w-4" />
          </a>
        </div>

        {/* Bottom bar */}
        <div className="flex flex-col md:flex-row items-center justify-between gap-4">
          <p className="text-sm font-semibold" style={{ color: "var(--color-foreground-on-dark)" }}>
            {companyName}
          </p>
          <div className="flex flex-wrap gap-6">
            {links.map((link) => (
              <a
                key={link.label}
                href={link.url}
                className="text-xs transition-opacity hover:opacity-100"
                style={{ color: "var(--color-foreground-on-dark)", opacity: 0.5, textDecoration: "none" }}
              >
                {link.label}
              </a>
            ))}
          </div>
          <p className="text-xs" style={{ color: "var(--color-foreground-on-dark)", opacity: 0.4 }}>
            {new Date().getFullYear()} {companyName}. {copyright}
          </p>
        </div>
      </div>
    </footer>
  );
}