import React from 'react';
import { Button } from "@/components/ui/button";
import { motion } from 'framer-motion';
import {
    Briefcase, // For Business/Consulting
    TrendingUp, // For Growth/Success
    Users,       // For Outsourcing/Team
    ShieldCheck, // For Trust/Security
    Mail,        // For Contact
    Phone,       // For Phone
    MapPin,      // For Location
} from 'lucide-react';
import { cn } from "@/lib/utils";

// Animation variants
const fadeIn = {
    hidden: { opacity: 0, y: 20 },
    visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: 'easeInOut' } },
};

const slideIn = {
    hidden: { opacity: 0, x: -50 },
    visible: { opacity: 1, x: 0, transition: { duration: 0.6, ease: 'easeInOut' } },
};

const OpexLandingPage = () => {
    return (
        <div className="min-h-screen bg-gradient-to-br from-gray-900 to-black text-white">
            {/* Header Section */}
            <header className="py-6 px-4 md:px-8 lg:px-16">
                <div className="container mx-auto flex justify-between items-center">
                    <h1 className="text-2xl md:text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-purple-400">
                        OPEX
                    </h1>
                    <nav className="hidden md:flex gap-6">
                        <a href="#services" className="hover:text-gray-300 transition-colors">Services</a>
                        <a href="#about" className="hover:text-gray-300 transition-colors">About Us</a>
                        <a href="#contact" className="hover:text-gray-300 transition-colors">Contact</a>
                    </nav>
                    <Button
                        variant="outline"
                        className="bg-gradient-to-r from-blue-500/20 to-purple-500/20 text-white border-blue-500/30 hover:border-blue-500/50 hover:from-blue-500/30 hover:to-purple-500/30"
                    >
                        Get a Quote
                    </Button>
                </div>
            </header>

            {/* Hero Section */}
            <section className="py-16 px-4 md:px-8 lg:px-16">
                <div className="container mx-auto text-center">
                    <motion.h2
                        variants={fadeIn}
                        initial="hidden"
                        animate="visible"
                        className="text-4xl md:text-5xl lg:text-6xl font-bold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-400"
                    >
                        Financial Consultancy & Outsourcing
                    </motion.h2>
                    <motion.p
                        variants={fadeIn}
                        initial="hidden"
                        animate="visible"
                        className="text-lg md:text-xl text-gray-300 mb-8 max-w-2xl mx-auto"
                    >
                        Empowering your business with expert financial solutions and strategic outsourcing.
                    </motion.p>
                    <motion.div
                        variants={fadeIn}
                        initial="hidden"
                        animate="visible"
                    >
                        <Button
                            size="lg"
                            className="bg-gradient-to-r from-blue-500 to-purple-500 text-white hover:from-blue-600 hover:to-purple-600 shadow-lg"
                        >
                            Explore Our Services
                        </Button>
                    </motion.div>
                </div>
            </section>

            {/* Services Section */}
            <section id="services" className="py-16 px-4 md:px-8 lg:px-16 bg-gray-900/50">
                <div className="container mx-auto text-center">
                    <h2 className="text-3xl md:text-4xl font-bold mb-8 text-white">Our Services</h2>
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                        <motion.div
                            variants={slideIn}
                            initial="hidden"
                            whileInView="visible"
                            viewport={{ once: true }}
                            className="bg-gray-800/80 p-6 rounded-lg shadow-lg border border-gray-700/50 hover:border-blue-500/30 transition-all duration-300"
                        >
                            <Briefcase className="w-10 h-10 text-blue-400 mb-4" />
                            <h3 className="text-2xl font-semibold mb-2 text-white">Financial Consulting</h3>
                            <p className="text-gray-300">Strategic financial planning, investment advice, and risk management.</p>
                        </motion.div>
                        <motion.div
                            variants={slideIn}
                            initial="hidden"
                            whileInView="visible"
                            viewport={{ once: true }}
                            className="bg-gray-800/80 p-6 rounded-lg shadow-lg border border-gray-700/50 hover:border-blue-500/30 transition-all duration-300"
                        >
                            <TrendingUp className="w-10 h-10 text-purple-400 mb-4" />
                            <h3 className="text-2xl font-semibold mb-2 text-white">Business Growth</h3>
                            <p className="text-gray-300">Strategies for business expansion, market analysis, and performance improvement.</p>
                        </motion.div>
                        <motion.div
                            variants={slideIn}
                            initial="hidden"
                            whileInView="visible"
                            viewport={{ once: true }}
                            className="bg-gray-800/80 p-6 rounded-lg shadow-lg border border-gray-700/50 hover:border-blue-500/30 transition-all duration-300"
                        >
                            <Users className="w-10 h-10 text-green-400 mb-4" />
                            <h3 className="text-2xl font-semibold mb-2 text-white">Outsourcing Services</h3>
                            <p className="text-gray-300">Efficient and cost-effective outsourcing solutions for your financial operations.</p>
                        </motion.div>
                    </div>
                </div>
            </section>

            {/* About Us Section */}
            <section id="about" className="py-16 px-4 md:px-8 lg:px-16">
                <div className="container mx-auto grid md:grid-cols-2 gap-12 items-center">
                    <motion.div
                        variants={slideIn}
                        initial="hidden"
                        whileInView="visible"
                        viewport={{ once: true }}
                        className="text-center md:text-left"
                    >
                        <h2 className="text-3xl md:text-4xl font-bold mb-4 text-white">About Us</h2>
                        <p className="text-gray-300 mb-6">
                            OPEX is a leading financial consultancy and outsourcing services provider.  We are dedicated to delivering
                            innovative solutions and exceptional value to our clients. Our team of experts has years of experience
                            in the financial industry, and we are committed to helping businesses of all sizes achieve their
                            financial goals.
                        </p>
                        <Button
                            variant="outline"
                            className="bg-gradient-to-r from-blue-500/20 to-purple-500/20 text-white border-blue-500/30 hover:border-blue-500/50 hover:from-blue-500/30 hover:to-purple-500/30"
                        >
                            Learn More
                        </Button>
                    </motion.div>
                    <motion.div
                        variants={fadeIn}
                        initial="hidden"
                        whileInView="visible"
                        viewport={{ once: true }}
                        className="rounded-lg overflow-hidden shadow-lg"
                    >
                        {/* Replace this with an actual image or video */}
                        <div className="bg-gray-700 h-64 flex items-center justify-center">
                            <ShieldCheck className="w-16 h-16 text-white/50" />
                        </div>
                    </motion.div>
                </div>
            </section>

            {/* Contact Section */}
            <section id="contact" className="py-16 px-4 md:px-8 lg:px-16 bg-gray-900/50">
                <div className="container mx-auto text-center">
                    <h2 className="text-3xl md:text-4xl font-bold mb-8 text-white">Contact Us</h2>
                    <div className="grid md:grid-cols-3 gap-8 text-left">
                        <div className="bg-gray-800/80 p-6 rounded-lg shadow-lg border border-gray-700/50">
                            <Mail className="w-6 h-6 text-blue-400 mb-2" />
                            <h4 className="text-lg font-semibold mb-2 text-white">Email</h4>
                            <p className="text-gray-300">info@opexconsulting.com</p>
                        </div>
                        <div className="bg-gray-800/80 p-6 rounded-lg shadow-lg border border-gray-700/50">
                            <Phone className="w-6 h-6 text-purple-400 mb-2" />
                            <h4 className="text-lg font-semibold mb-2 text-white">Phone</h4>
                            <p className="text-gray-300">+123 456 7890</p>
                        </div>
                        <div className="bg-gray-800/80 p-6 rounded-lg shadow-lg border border-gray-700/50">
                            <MapPin className="w-6 h-6 text-green-400 mb-2" />
                            <h4 className="text-lg font-semibold mb-2 text-white">Address</h4>
                            <p className="text-gray-300">123 Main St, Anytown, USA</p>
                        </div>
                    </div>
                    <div className="mt-8">
                        <Button
                            size="lg"
                            className="bg-gradient-to-r from-blue-500 to-purple-500 text-white hover:from-blue-600 hover:to-purple-600 shadow-lg"
                        >
                            Get in Touch
                        </Button>
                    </div>
                </div>
            </section>

            {/* Footer */}
            <footer className="py-8 px-4 md:px-8 lg:px-16 bg-gray-900/80">
                <div className="container mx-auto text-center text-gray-400">
                    &copy; {new Date().getFullYear()} OPEX. All rights reserved.  |  <a href="#" className="hover:text-blue-400 transition-colors">Privacy Policy</a>  |  <a href="#" className="hover:text-blue-400 transition-colors">Terms of Service</a>
                </div>
            </footer>
        </div>
    );
};

export default OpexLandingPage;