"use client";

import React from "react";
import { motion } from "framer-motion";
import { Reveal } from "@/components/Reveal";
import { Counter } from "@/components/Counter";
import { TechBackground } from "@/components/TechBackground";
import { Button } from "@/components/Button";
import { useTranslations } from "next-intl";

interface CTASectionProps {
  title?: string;
  subtitle?: string;
  buttonText?: string;
}

export const CTASection = ({
  title,
  subtitle,
  buttonText,
}: CTASectionProps) => {
  const t = useTranslations("Index");

  const displayTitle = title || t("cta.title");
  const displaySubtitle = subtitle || t("cta.subtitle");
  const displayButtonText = buttonText || t("cta.button");

  return (
    <section className="bg-white relative overflow-hidden">
      <TechBackground />
      {/* Decorative Background Elements */}
      <div className="absolute top-0 left-0 w-64 h-64 bg-accent/5 rounded-full blur-3xl -translate-x-1/2 -translate-y-1/2" />
      <div className="absolute bottom-0 right-0 w-96 h-96 bg-primary/5 rounded-full blur-3xl translate-x-1/2 translate-y-1/2" />

      <div className="container-custom relative z-10">
        <Counter value={5} className="section-number" />
        <Reveal>
          <div className="relative rounded-3xl md:rounded-[2.5rem] bg-primary p-8 md:p-24 overflow-hidden group">
            {/* Corner Accents */}
            <div className="tech-corner top-8 left-8 border-t-2 border-l-2" />
            <div className="tech-corner top-8 right-8 border-t-2 border-r-2" />
            <div className="tech-corner bottom-8 left-8 border-b-2 border-l-2" />
            <div className="tech-corner bottom-8 right-8 border-b-2 border-r-2" />

            <div className="absolute top-0 right-0 w-1/2 h-full opacity-10 pointer-events-none">
              <svg
                viewBox="0 0 400 400"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <motion.circle
                  animate={{ r: [400, 410, 400], opacity: [0.1, 0.2, 0.1] }}
                  transition={{
                    duration: 5,
                    repeat: Infinity,
                    ease: "easeInOut",
                  }}
                  cx="400"
                  cy="0"
                  r="400"
                  stroke="white"
                  strokeWidth="2"
                />
                <motion.circle
                  animate={{ r: [300, 310, 300], opacity: [0.1, 0.2, 0.1] }}
                  transition={{
                    duration: 4,
                    repeat: Infinity,
                    ease: "easeInOut",
                    delay: 0.5,
                  }}
                  cx="400"
                  cy="0"
                  r="300"
                  stroke="white"
                  strokeWidth="2"
                />
                <motion.circle
                  animate={{ r: [200, 210, 200], opacity: [0.1, 0.2, 0.1] }}
                  transition={{
                    duration: 3,
                    repeat: Infinity,
                    ease: "easeInOut",
                    delay: 1,
                  }}
                  cx="400"
                  cy="0"
                  r="200"
                  stroke="white"
                  strokeWidth="2"
                />
              </svg>
            </div>

            <div className="relative z-10">
              <h2 className="text-3xl md:text-6xl font-bold text-white mb-6 md:mb-8 leading-tight">
                {displayTitle}
              </h2>
              <p className="text-slate-300 text-lg md:text-xl mb-8 md:mb-12 leading-relaxed">
                {displaySubtitle}
              </p>
              <Button
                href="/kontakt"
                variant="accent"
                showArrow
                className="w-full sm:w-auto !px-10 !py-5 text-lg"
              >
                {displayButtonText}
              </Button>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
};