import Link from "next/link";

export default function PricingGrid() {
    return (
        <section className="section-dark px-4 pb-20 pt-4 md:px-10 lg:px-20 relative overflow-hidden">
            <div className="glow-orb w-[600px] h-[600px] bottom-0 left-0 -translate-x-1/3 translate-y-1/3 opacity-30"></div>
            <div className="relative z-10 mx-auto grid max-w-7xl grid-cols-1 gap-8 lg:grid-cols-3 gsap-stagger">
                {/* Starter Plan */}
                <div className="card-glass-dark relative flex flex-col rounded-3xl p-8 card-hover-lift transition-all duration-300">
                    <div className="mb-6">
                        <h3 className="text-2xl font-bold text-light-surface">Starter</h3>
                        <p className="mt-2 text-sm text-text-light-muted">Essential services for startups and small businesses establishing their digital presence.</p>
                    </div>
                    <div className="mb-2 flex items-baseline gap-1">
                        <span className="text-5xl font-black tracking-tight text-text-light">Custom</span>
                    </div>
                    <p className="text-primary-light text-xs font-semibold uppercase tracking-wide mb-6">Tailored to your scope</p>
                    <ul className="mb-8 flex flex-1 flex-col gap-4">
                        <li className="flex items-center gap-3 text-sm text-text-light-muted">
                            <span className="material-symbols-outlined text-primary-light">check_circle</span>
                            Web Development (Landing / Business site)
                        </li>
                        <li className="flex items-center gap-3 text-sm text-text-light-muted">
                            <span className="material-symbols-outlined text-primary-light">check_circle</span>
                            UI/UX Design (Template-based)
                        </li>
                        <li className="flex items-center gap-3 text-sm text-text-light-muted">
                            <span className="material-symbols-outlined text-primary-light">check_circle</span>
                            Basic Chatbot Integration
                        </li>
                        <li className="flex items-center gap-3 text-sm text-text-light-muted">
                            <span className="material-symbols-outlined text-primary-light">check_circle</span>
                            Cloud Hosting Setup (Shared)
                        </li>
                        <li className="flex items-center gap-3 text-sm text-text-light-muted">
                            <span className="material-symbols-outlined text-primary-light">check_circle</span>
                            Standard Email Support
                        </li>
                    </ul>
                    <Link href="/contact" className="block w-full rounded-xl border border-primary/40 px-6 py-4 text-sm font-bold text-primary-light transition-colors hover:bg-primary/20 hover:text-white text-center btn-hover-lift">
                        Get Started
                    </Link>
                </div>

                {/* Professional Plan */}
                <div className="card-glass-dark relative flex flex-col lg:scale-105 rounded-3xl border border-primary/50 shadow-glow-green p-8 z-10 card-hover-lift transition-all duration-300">
                    <div className="absolute -top-4 left-1/2 -translate-x-1/2 rounded-full bg-gradient-to-r from-primary to-primary-light px-4 py-1.5 text-xs font-bold uppercase tracking-wider text-white shadow-lg">
                        Most Popular
                    </div>
                    <div className="mb-6 pt-2">
                        <h3 className="text-2xl font-bold text-white">Professional</h3>
                        <p className="mt-2 text-sm text-text-light-muted">Comprehensive solutions for growing companies that need advanced digital capabilities.</p>
                    </div>
                    <div className="mb-2 flex items-baseline gap-1">
                        <span className="text-5xl font-black tracking-tight text-white drop-shadow-md">Custom</span>
                    </div>
                    <p className="text-primary-light text-xs font-semibold uppercase tracking-wide mb-6">Based on project scope</p>
                    <ul className="mb-8 flex flex-1 flex-col gap-4">
                        <li className="flex items-center gap-3 text-sm text-light-surface font-semibold">
                            <span className="material-symbols-outlined text-primary-light">check_circle</span>
                            Web &amp; Mobile App Development
                        </li>
                        <li className="flex items-center gap-3 text-sm text-text-light-muted">
                            <span className="material-symbols-outlined text-primary-light">check_circle</span>
                            Custom UI/UX Design System
                        </li>
                        <li className="flex items-center gap-3 text-sm text-text-light-muted">
                            <span className="material-symbols-outlined text-primary-light">check_circle</span>
                            AI-Powered Chatbot Development
                        </li>
                        <li className="flex items-center gap-3 text-sm text-text-light-muted">
                            <span className="material-symbols-outlined text-primary-light">check_circle</span>
                            IoT Solutions &amp; Integration
                        </li>
                        <li className="flex items-center gap-3 text-sm text-text-light-muted">
                            <span className="material-symbols-outlined text-primary-light">check_circle</span>
                            Scalable Cloud Computing &amp; Deployment
                        </li>
                        <li className="flex items-center gap-3 text-sm text-text-light-muted">
                            <span className="material-symbols-outlined text-primary-light">check_circle</span>
                            Business Intelligence &amp; Analytics
                        </li>
                        <li className="flex items-center gap-3 text-sm text-text-light-muted">
                            <span className="material-symbols-outlined text-primary-light">check_circle</span>
                            Priority Support (12h Response)
                        </li>
                    </ul>
                    <Link href="/contact" className="block w-full btn-primary px-6 py-4 text-base font-bold text-center isolate relative overflow-hidden group">
                        <span className="relative z-10 w-full h-full block">Get Started</span>
                        <div className="absolute inset-0 bg-gradient-to-r from-primary-light to-primary opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-[-1]" />
                    </Link>
                </div>

                {/* Enterprise Plan */}
                <div className="card-glass-dark relative flex flex-col rounded-3xl p-8 card-hover-lift transition-all duration-300">
                    <div className="mb-6">
                        <h3 className="text-2xl font-bold text-light-surface">Enterprise</h3>
                        <p className="mt-2 text-sm text-text-light-muted">End-to-end digital transformation with advanced AI, immersive tech, and dedicated support.</p>
                    </div>
                    <div className="mb-2 flex items-baseline gap-1">
                        <span className="text-5xl font-black tracking-tight text-text-light">Custom</span>
                    </div>
                    <p className="text-primary-light text-xs font-semibold uppercase tracking-wide mb-6">Let&apos;s discuss your vision</p>
                    <ul className="mb-8 flex flex-1 flex-col gap-4">
                        <li className="flex items-center gap-3 text-sm text-text-light-muted">
                            <span className="material-symbols-outlined text-primary-light">check_circle</span>
                            Custom Web &amp; Mobile Platform Architecture
                        </li>
                        <li className="flex items-center gap-3 text-sm text-text-light-muted">
                            <span className="material-symbols-outlined text-primary-light">check_circle</span>
                            AI &amp; Machine Learning Solutions
                        </li>
                        <li className="flex items-center gap-3 text-sm text-text-light-muted">
                            <span className="material-symbols-outlined text-primary-light">check_circle</span>
                            AR / VR Application Development
                        </li>
                        <li className="flex items-center gap-3 text-sm text-text-light-muted">
                            <span className="material-symbols-outlined text-primary-light">check_circle</span>
                            Advanced IoT &amp; Edge Computing
                        </li>
                        <li className="flex items-center gap-3 text-sm text-text-light-muted">
                            <span className="material-symbols-outlined text-primary-light">check_circle</span>
                            Enterprise Cloud Infrastructure &amp; Optimization
                        </li>
                        <li className="flex items-center gap-3 text-sm text-text-light-muted">
                            <span className="material-symbols-outlined text-primary-light">check_circle</span>
                            Dedicated Account Manager &amp; SLAs
                        </li>
                    </ul>
                    <Link href="/contact" className="block w-full rounded-xl border border-primary/40 px-6 py-4 text-sm font-bold text-primary-light transition-colors hover:bg-primary/20 hover:text-white text-center btn-hover-lift">
                        Get Started
                    </Link>
                </div>
            </div>
        </section>
    );
}
