import Link from "next/link";

export default function Pricing() {
    return (
        <section className="py-24 section-dark relative overflow-hidden" id="pricing">
            {/* Subtle glow */}
            <div className="glow-orb w-80 h-80 top-10 left-1/2 -translate-x-1/2 opacity-20" />

            <div className="max-w-[1280px] mx-auto px-4 sm:px-6 lg:px-8 relative">
                <div className="text-center mb-16">
                    <h2 className="text-3xl md:text-5xl font-bold text-text-light mb-4">Tailored Pricing Plans</h2>
                    <p className="text-text-light-muted max-w-2xl mx-auto">Every project is unique. We offer custom pricing based on your requirements — choose a plan that fits your scope and let&apos;s talk.</p>
                </div>
                <div className="grid lg:grid-cols-3 gap-8 items-center">
                    {/* Starter Plan */}
                    <div className="card-glass-dark p-8 rounded-3xl card-hover-lift transition-all duration-300">
                        <h3 className="text-2xl font-bold text-text-light mb-2">Starter</h3>
                        <p className="text-text-light-muted text-sm mb-6">Ideal for startups &amp; small businesses launching their digital presence.</p>
                        <div className="text-4xl font-black text-text-light mb-2">Custom</div>
                        <p className="text-primary-light text-xs font-semibold uppercase tracking-wide mb-6">Tailored to your scope</p>
                        <ul className="space-y-4 mb-8">
                            <li className="flex items-center gap-3 text-sm text-text-light-muted"><span className="text-primary-light material-symbols-outlined text-base">check_circle</span> Web Development (Landing / Business site)</li>
                            <li className="flex items-center gap-3 text-sm text-text-light-muted"><span className="text-primary-light material-symbols-outlined text-base">check_circle</span> UI/UX Design (Template-based)</li>
                            <li className="flex items-center gap-3 text-sm text-text-light-muted"><span className="text-primary-light material-symbols-outlined text-base">check_circle</span> Basic Chatbot Integration</li>
                            <li className="flex items-center gap-3 text-sm text-text-light-muted"><span className="text-primary-light material-symbols-outlined text-base">check_circle</span> Cloud Hosting Setup</li>
                            <li className="flex items-center gap-3 text-sm text-text-light-muted"><span className="text-primary-light material-symbols-outlined text-base">check_circle</span> Email Support</li>
                        </ul>
                        <Link href="/contact" className="block w-full py-3 border border-primary/40 text-primary-light font-bold rounded-xl hover:bg-primary/20 hover:text-white transition-colors text-center btn-hover-lift">Get Started</Link>
                    </div>
                    {/* Professional Plan */}
                    <div className="card-glass-dark p-8 rounded-3xl border border-primary/50 relative transform lg:scale-105 z-10 shadow-glow-green card-hover-lift transition-all duration-300">
                        <div className="absolute -top-4 left-1/2 -translate-x-1/2 bg-gradient-to-r from-primary to-primary-light text-white text-xs font-bold px-4 py-1.5 rounded-full uppercase tracking-wider shadow-lg">Most Popular</div>
                        <h3 className="text-2xl font-bold text-white mb-2">Professional</h3>
                        <p className="text-text-light-muted text-sm mb-6">For growing businesses that need advanced digital solutions.</p>
                        <div className="text-4xl font-black text-white mb-2">Custom</div>
                        <p className="text-primary-light text-xs font-semibold uppercase tracking-wide mb-6">Based on project scope</p>
                        <ul className="space-y-4 mb-8">
                            <li className="flex items-center gap-3 text-sm text-text-light font-medium"><span className="text-primary-light material-symbols-outlined text-base">check_circle</span> Web &amp; Mobile App Development</li>
                            <li className="flex items-center gap-3 text-sm text-text-light font-medium"><span className="text-primary-light material-symbols-outlined text-base">check_circle</span> Custom UI/UX Design System</li>
                            <li className="flex items-center gap-3 text-sm text-text-light font-medium"><span className="text-primary-light material-symbols-outlined text-base">check_circle</span> AI-Powered Chatbot Development</li>
                            <li className="flex items-center gap-3 text-sm text-text-light font-medium"><span className="text-primary-light material-symbols-outlined text-base">check_circle</span> IoT Solutions &amp; Integration</li>
                            <li className="flex items-center gap-3 text-sm text-text-light font-medium"><span className="text-primary-light material-symbols-outlined text-base">check_circle</span> Cloud Computing &amp; Deployment</li>
                            <li className="flex items-center gap-3 text-sm text-text-light font-medium"><span className="text-primary-light material-symbols-outlined text-base">check_circle</span> Business Intelligence &amp; Analytics</li>
                            <li className="flex items-center gap-3 text-sm text-text-light font-medium"><span className="text-primary-light material-symbols-outlined text-base">check_circle</span> Priority Support</li>
                        </ul>
                        <Link href="/contact" className="block w-full py-4 btn-primary text-center">Get Started</Link>
                    </div>
                    {/* Enterprise Plan */}
                    <div className="card-glass-dark p-8 rounded-3xl card-hover-lift transition-all duration-300">
                        <h3 className="text-2xl font-bold text-text-light mb-2">Enterprise</h3>
                        <p className="text-text-light-muted text-sm mb-6">End-to-end digital transformation for large-scale organizations.</p>
                        <div className="text-4xl font-black text-text-light mb-2">Custom</div>
                        <p className="text-primary-light text-xs font-semibold uppercase tracking-wide mb-6">Let&apos;s discuss your vision</p>
                        <ul className="space-y-4 mb-8">
                            <li className="flex items-center gap-3 text-sm text-text-light-muted"><span className="text-primary-light material-symbols-outlined text-base">check_circle</span> Custom Web &amp; Mobile Platforms</li>
                            <li className="flex items-center gap-3 text-sm text-text-light-muted"><span className="text-primary-light material-symbols-outlined text-base">check_circle</span> AI &amp; Machine Learning Solutions</li>
                            <li className="flex items-center gap-3 text-sm text-text-light-muted"><span className="text-primary-light material-symbols-outlined text-base">check_circle</span> AR / VR Application Development</li>
                            <li className="flex items-center gap-3 text-sm text-text-light-muted"><span className="text-primary-light material-symbols-outlined text-base">check_circle</span> Advanced IoT &amp; Edge Computing</li>
                            <li className="flex items-center gap-3 text-sm text-text-light-muted"><span className="text-primary-light material-symbols-outlined text-base">check_circle</span> Enterprise Cloud Architecture</li>
                            <li className="flex items-center gap-3 text-sm text-text-light-muted"><span className="text-primary-light material-symbols-outlined text-base">check_circle</span> Dedicated Account Manager &amp; SLA</li>
                        </ul>
                        <Link href="/contact" className="block w-full py-3 border border-primary/40 text-primary-light font-bold rounded-xl hover:bg-primary/20 hover:text-white transition-colors text-center btn-hover-lift">Get Started</Link>
                    </div>
                </div>
            </div>
        </section>
    );
}
