"use client";

import React from "react";
import { motion } from "framer-motion";
import { MessageCircle, ArrowRight } from "lucide-react";
import { useTranslations } from "next-intl";

export default function CTABand() {
  const t = useTranslations();
  const whatsappUrl = `https://wa.me/905394671328?text=${encodeURIComponent(t("catalog.whatsapp_general"))}`;

  const handleScrollToContact = (e: React.MouseEvent) => {
    e.preventDefault();
    document.getElementById("contact")?.scrollIntoView({ behavior: "smooth" });
  };

  return (
    <section
      className="py-20 md:py-32 overflow-hidden relative flex flex-col justify-center snap-start w-full"
      style={{ background: "var(--surface-1)" }}
    >
      {/* Ambient glow */}
      <div
        className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[300px] rounded-full blur-[100px] pointer-events-none"
        style={{ background: "rgba(196,147,90,0.06)" }}
      />

      <div className="w-full max-w-7xl mx-auto px-6 md:px-12">
        <motion.div
          initial={{ opacity: 0, y: 50 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: "-100px" }}
          transition={{ duration: 0.9, ease: [0.16, 1, 0.3, 1] }}
          className="liquid-glass rounded-[40px] px-8 py-16 md:py-20 text-center flex flex-col items-center shadow-2xl relative z-10"
          style={{ border: "1px solid var(--border)" }}
        >
          {/* Eyebrow — slide from top */}
          <motion.span
            initial={{ opacity: 0, y: -16 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.6, delay: 0.15 }}
            className="eyebrow mb-6"
          >
            {t("cta.eyebrow")}
          </motion.span>

          {/* Title — slide from left */}
          <motion.h2
            initial={{ opacity: 0, x: -50 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1], delay: 0.2 }}
            className="section-title mb-6 max-w-2xl mx-auto"
          >
            {t("cta.title")}
          </motion.h2>

          {/* Paragraph — slide from right */}
          <motion.p
            initial={{ opacity: 0, x: 50 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.8, ease: [0.16, 1, 0.3, 1], delay: 0.25 }}
            className="text-sm font-light leading-loose max-w-xl mb-12"
            style={{ color: "var(--fg-secondary)" }}
          >
            {t("cta.paragraph")}
          </motion.p>

          {/* Buttons — stagger from bottom */}
          <motion.div
            initial={{ opacity: 0, y: 24 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true }}
            transition={{ duration: 0.7, ease: [0.16, 1, 0.3, 1], delay: 0.35 }}
            className="flex flex-col sm:flex-row items-center gap-4"
          >
            <a
              href={whatsappUrl}
              target="_blank"
              rel="noopener noreferrer"
              className="glass-pill px-8 py-4 rounded-full font-sans text-xs uppercase tracking-widest font-medium hover:scale-[1.03] active:scale-[0.97] transition-all flex items-center gap-2.5 shadow-lg"
              style={{ color: "var(--ember)" }}
            >
              <MessageCircle size={15} />
              {t("cta.whatsapp")}
            </a>

            <a
              href="#contact"
              onClick={handleScrollToContact}
              className="px-8 py-4 rounded-full font-sans text-xs uppercase tracking-widest hover:scale-[1.03] active:scale-[0.97] transition-all flex items-center gap-2"
              style={{ color: "var(--fg-secondary)" }}
            >
              <ArrowRight size={14} style={{ color: "var(--ember)" }} />
              {t("cta.form")}
            </a>
          </motion.div>
        </motion.div>
      </div>
    </section>
  );
}