import { motion } from "framer-motion";
import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";
import { Button } from "@/components/ui/button";
import { ArrowRight, Phone } from "lucide-react";
import { Link } from "react-router-dom";

interface BusinessPageLayoutProps {
    children: React.ReactNode;
    title: string;
    subtitle?: string;
    description: string;
    icon?: React.ElementType;
    heroImage?: string;
}

const BusinessPageLayout = ({
    children,
    title,
    subtitle,
    description,
    icon: Icon,
}: BusinessPageLayoutProps) => {
    return (
        <div className="min-h-screen bg-targo-dark text-white selection:bg-targo-green selection:text-white">
            <Header />

            {/* Hero Section */}
            <section className="relative pt-32 pb-20 md:pt-40 md:pb-32 overflow-hidden">
                {/* Background Elements */}
                <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,_var(--tw-gradient-stops))] from-targo-green/20 via-targo-dark to-targo-dark" />
                <div className="absolute top-0 left-0 w-full h-full bg-[url('/grid-pattern.svg')] opacity-5" />

                <div className="container relative mx-auto px-4">
                    <motion.div
                        initial={{ opacity: 0, y: 30 }}
                        animate={{ opacity: 1, y: 0 }}
                        transition={{ duration: 0.8, ease: "easeOut" }}
                        className="max-w-4xl mx-auto text-center"
                    >
                        <Link
                            to="/business"
                            className="inline-flex items-center text-targo-green-light hover:text-white transition-colors mb-8 text-sm font-medium tracking-wide uppercase"
                        >
                            ← Retour aux solutions affaires
                        </Link>

                        {Icon && (
                            <motion.div
                                initial={{ scale: 0.8, opacity: 0 }}
                                animate={{ scale: 1, opacity: 1 }}
                                transition={{ delay: 0.2, duration: 0.5 }}
                                className="w-20 h-20 bg-targo-green/10 rounded-2xl flex items-center justify-center mx-auto mb-8 border border-targo-green/20 backdrop-blur-sm shadow-[0_0_30px_rgba(0,200,83,0.2)]"
                            >
                                <Icon className="h-10 w-10 text-targo-green" />
                            </motion.div>
                        )}

                        <h1 className="text-5xl md:text-6xl lg:text-7xl font-bold mb-6 font-display tracking-tight">
                            {title} <span className="text-transparent bg-clip-text bg-gradient-to-r from-targo-green to-targo-green-light">{subtitle}</span>
                        </h1>

                        <p className="text-lg md:text-xl text-gray-400 mb-10 max-w-3xl mx-auto leading-relaxed">
                            {description}
                        </p>

                        <motion.div
                            initial={{ opacity: 0, y: 20 }}
                            animate={{ opacity: 1, y: 0 }}
                            transition={{ delay: 0.4, duration: 0.5 }}
                            className="flex flex-col sm:flex-row gap-4 justify-center"
                        >
                            <Button size="lg" className="bg-targo-green hover:bg-targo-green-dark text-white font-bold text-lg px-8 py-6 rounded-xl shadow-lg shadow-targo-green/20 transition-all hover:scale-105">
                                Demander une soumission
                                <ArrowRight className="ml-2 h-5 w-5" />
                            </Button>
                            <Button size="lg" variant="outline" className="text-lg px-8 py-6 border-white/10 bg-white/5 text-white hover:bg-white/10 hover:text-white rounded-xl backdrop-blur-sm transition-all hover:scale-105">
                                <Phone className="mr-2 h-5 w-5" />
                                1-855-888-2746
                            </Button>
                        </motion.div>
                    </motion.div>
                </div>
            </section>

            {children}

            <div className="border-t border-white/5">
                <Footer />
            </div>
        </div>
    );
};

export default BusinessPageLayout;
