"use client";

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

export const CTASection = () => {
  const t = useTranslations("Index");

  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"
              >
                <m.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"
                />
                <m.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"
                />
                <m.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">
                {t("cta.title")}
              </h2>
              <p className="text-slate-300 text-lg md:text-xl mb-8 md:mb-12 leading-relaxed">
                {t("cta.subtitle")}
              </p>
              <Button
                href="/kontakt"
                variant="accent"
                showArrow
                className="w-full sm:w-auto !px-10 !py-5 text-lg"
              >
                {t("cta.button")}
              </Button>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
};