CTA Centered

"use client";

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

interface CtaCenteredProps {
  title?: string;
  titleAccent?: string;
  description?: string;
  ctaLabel?: string;
  ctaUrl?: string;
  ctaSecondaryLabel?: string;
}

export default function CtaCentered({
  title = "Pret a commencer ?",
  titleAccent = "commencer",
  description = "Contactez-nous pour discuter de votre projet.",
  ctaLabel = "Demarrer",
  ctaUrl = "#contact",
  ctaSecondaryLabel,
}: CtaCenteredProps) {
  const titleParts = titleAccent
    ? title.split(titleAccent)
    : [title];

  return (
    <section
      style={{
        backgroundColor: "var(--color-background)",
        paddingTop: "var(--section-padding-y)",
        paddingBottom: "var(--section-padding-y)",
      }}
    >
      <div
        className="mx-auto"
        style={{
          maxWidth: "var(--container-max-width)",
          paddingLeft: "var(--container-padding-x)",
          paddingRight: "var(--container-padding-x)",
        }}
      >
        <motion.div
          initial={{ opacity: 0, y: 24 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-60px" }}
          transition={{ duration: 0.6, ease: [0.16, 1, 0.3, 1] }}
          className="text-center max-w-2xl mx-auto"
        >
          <h2
            className="text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight"
            style={{ color: "var(--color-foreground)" }}
          >
            {titleAccent ? (
              <>
                {titleParts[0]}
                <em
                  className="font-normal italic"
                  style={{
                    fontFamily: "var(--font-serif)",
                    textDecoration: "underline",
                    textDecorationColor: "var(--color-accent)",
                    textDecorationThickness: "3px",
                    textUnderlineOffset: "4px",
                  }}
                >
                  {titleAccent}
                </em>
                {titleParts[1]}
              </>
            ) : (
              title
            )}
          </h2>

          {description && (
            <p
              className="mt-5 text-base leading-relaxed max-w-md mx-auto"
              style={{ color: "var(--color-foreground-muted)" }}
            >
              {description}
            </p>
          )}

          <div className="flex items-center justify-center gap-3 mt-8">
            <a
              href={ctaUrl}
              className="inline-flex items-center gap-2 px-6 py-3 rounded-full text-sm font-semibold transition-transform hover:scale-105"
              style={{
                backgroundColor: "var(--color-accent)",
                color: "var(--color-foreground)",
              }}
            >
              {ctaLabel}
              <ArrowRight className="h-4 w-4" />
            </a>
            {ctaSecondaryLabel && (
              <a
                href={ctaUrl}
                className="inline-flex items-center gap-2 px-6 py-3 rounded-full text-sm font-semibold transition-colors"
                style={{
                  border: "1px solid var(--color-border)",
                  color: "var(--color-foreground-muted)",
                }}
              >
                {ctaSecondaryLabel}
              </a>
            )}
          </div>
        </motion.div>
      </div>
    </section>
  );
}