"use client";

import { useState } from "react";
import { motion } from "framer-motion";
import { useTranslations } from "next-intl";
import RequestQuoteModal from "@/components/RequestQuoteModal";

const CallToAction = ({
  heading,
  subtitle,
  buttonLabel,
}: {
  heading?: string;
  subtitle?: string;
  buttonLabel?: string;
}) => {
  const t = useTranslations("callToAction");
  const [quoteOpen, setQuoteOpen] = useState(false);
  return (
    <section className="petro-section">
      <div className="petro-container">
        <motion.div
          initial={{ opacity: 0, y: 30 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.6 }}
          className="bg-primary relative overflow-hidden p-12 md:p-20 text-center rounded-sm"
        >
          <div className="absolute top-0 right-0 w-64 h-64 bg-accent opacity-10 rounded-full -mr-32 -mt-32" />
          <div className="absolute bottom-0 left-0 w-48 h-48 bg-accent opacity-5 rounded-full -ml-24 -mb-24" />
          <div className="relative z-10">
            <h2 className="text-3xl md:text-5xl font-bold text-primary-foreground mb-8">
              {heading ?? t("heading")}
            </h2>
            <p className="text-primary-foreground/70 max-w-xl mx-auto mb-10 text-lg">
              {subtitle ?? t("subtitle")}
            </p>
            <button onClick={() => setQuoteOpen(true)} className="petro-btn-gold text-base py-5 px-10 inline-block">
              {buttonLabel ?? t("button")}
            </button>
          </div>
        </motion.div>
      </div>
      <RequestQuoteModal open={quoteOpen} onOpenChange={setQuoteOpen} />
    </section>
  );
};

export default CallToAction;