export default function PricingComparison() {
    return (
        <section className="bg-light-bg py-20 px-4 md:px-10">
            <div className="mx-auto max-w-6xl">
                <div className="mb-12 text-center gsap-fade-up">
                    <h2 className="text-3xl font-bold text-text-main">Detailed Feature Comparison</h2>
                    <p className="mt-4 text-text-muted text-lg">See what&apos;s included in each plan at a glance.</p>
                </div>
                <div className="card-modern rounded-2xl bg-white overflow-hidden gsap-fade-up">
                    <div className="overflow-x-auto">
                        <table className="w-full min-w-[800px] border-collapse">
                            <thead>
                                <tr className="bg-light-bg/50 border-b border-border-light">
                                    <th className="px-6 py-5 text-left text-sm font-semibold text-text-main w-1/3">Services</th>
                                    <th className="px-6 py-5 text-center text-sm font-bold text-text-main w-1/5">Starter</th>
                                    <th className="px-6 py-5 text-center text-sm font-bold text-primary w-1/5 shadow-[inset_0_-2px_0_rgba(34,197,94,1)]">Professional</th>
                                    <th className="px-6 py-5 text-center text-sm font-bold text-text-main w-1/5">Enterprise</th>
                                </tr>
                            </thead>
                            <tbody className="divide-y divide-border-light">
                                <tr className="hover:bg-primary/5 transition-colors">
                                    <td className="px-6 py-5 text-sm text-text-main font-medium">Web Development</td>
                                    <td className="px-6 py-5 text-center text-sm text-text-muted">Landing / Business Site</td>
                                    <td className="px-6 py-5 text-center text-sm text-text-main font-semibold bg-primary/5">Full Website or Web App</td>
                                    <td className="px-6 py-5 text-center text-sm text-text-main font-semibold">Custom Platform</td>
                                </tr>
                                <tr className="hover:bg-primary/5 transition-colors">
                                    <td className="px-6 py-5 text-sm text-text-main font-medium">Mobile App Development</td>
                                    <td className="px-6 py-5 text-center"><span className="material-symbols-outlined text-border-light">remove</span></td>
                                    <td className="px-6 py-5 text-center bg-primary/5"><span className="material-symbols-outlined text-primary">check</span></td>
                                    <td className="px-6 py-5 text-center text-sm text-text-main font-semibold">Native &amp; Cross-Platform</td>
                                </tr>
                                <tr className="hover:bg-primary/5 transition-colors">
                                    <td className="px-6 py-5 text-sm text-text-main font-medium">UI/UX Design</td>
                                    <td className="px-6 py-5 text-center text-sm text-text-muted">Template Based</td>
                                    <td className="px-6 py-5 text-center text-sm text-text-main font-semibold bg-primary/5">Custom Design System</td>
                                    <td className="px-6 py-5 text-center text-sm text-text-main font-semibold">Full Research &amp; Design</td>
                                </tr>
                                <tr className="hover:bg-primary/5 transition-colors">
                                    <td className="px-6 py-5 text-sm text-text-main font-medium">Chatbot Development</td>
                                    <td className="px-6 py-5 text-center text-sm text-text-muted">Basic Bot</td>
                                    <td className="px-6 py-5 text-center text-sm text-text-main font-semibold bg-primary/5">AI-Powered Chatbot</td>
                                    <td className="px-6 py-5 text-center text-sm text-text-main font-semibold">Custom Conversational AI</td>
                                </tr>
                                <tr className="hover:bg-primary/5 transition-colors">
                                    <td className="px-6 py-5 text-sm text-text-main font-medium">IoT Solutions</td>
                                    <td className="px-6 py-5 text-center"><span className="material-symbols-outlined text-border-light">remove</span></td>
                                    <td className="px-6 py-5 text-center bg-primary/5"><span className="material-symbols-outlined text-primary">check</span></td>
                                    <td className="px-6 py-5 text-center text-sm text-text-main font-semibold">Advanced IoT &amp; Edge</td>
                                </tr>
                                <tr className="hover:bg-primary/5 transition-colors">
                                    <td className="px-6 py-5 text-sm text-text-main font-medium">AI &amp; Machine Learning</td>
                                    <td className="px-6 py-5 text-center"><span className="material-symbols-outlined text-border-light">remove</span></td>
                                    <td className="px-6 py-5 text-center text-sm text-text-main font-semibold bg-primary/5">Basic Analytics</td>
                                    <td className="px-6 py-5 text-center text-sm text-text-main font-semibold">Custom AI/ML Solutions</td>
                                </tr>
                                <tr className="hover:bg-primary/5 transition-colors">
                                    <td className="px-6 py-5 text-sm text-text-main font-medium">AR / VR Applications</td>
                                    <td className="px-6 py-5 text-center"><span className="material-symbols-outlined text-border-light">remove</span></td>
                                    <td className="px-6 py-5 text-center"><span className="material-symbols-outlined text-border-light">remove</span></td>
                                    <td className="px-6 py-5 text-center"><span className="material-symbols-outlined text-primary">check</span></td>
                                </tr>
                                <tr className="hover:bg-primary/5 transition-colors">
                                    <td className="px-6 py-5 text-sm text-text-main font-medium">Business Intelligence</td>
                                    <td className="px-6 py-5 text-center"><span className="material-symbols-outlined text-border-light">remove</span></td>
                                    <td className="px-6 py-5 text-center text-sm text-text-main font-semibold bg-primary/5">Dashboards &amp; Reports</td>
                                    <td className="px-6 py-5 text-center text-sm text-text-main font-semibold">Custom BI Platform</td>
                                </tr>
                                <tr className="hover:bg-primary/5 transition-colors">
                                    <td className="px-6 py-5 text-sm text-text-main font-medium">Cloud Computing</td>
                                    <td className="px-6 py-5 text-center text-sm text-text-muted">Shared Hosting</td>
                                    <td className="px-6 py-5 text-center text-sm text-text-main font-semibold bg-primary/5">Scalable Cloud</td>
                                    <td className="px-6 py-5 text-center text-sm text-text-main font-semibold">Enterprise Architecture</td>
                                </tr>
                                <tr className="hover:bg-primary/5 transition-colors">
                                    <td className="px-6 py-5 text-sm text-text-main font-medium">Support Level</td>
                                    <td className="px-6 py-5 text-center text-sm text-text-muted">Email Support</td>
                                    <td className="px-6 py-5 text-center text-sm text-text-main font-semibold bg-primary/5">Priority Support</td>
                                    <td className="px-6 py-5 text-center text-sm text-text-main font-semibold">Dedicated SLA</td>
                                </tr>
                                <tr className="hover:bg-primary/5 transition-colors bg-light-bg/30">
                                    <td className="px-6 py-5 text-sm text-text-main font-bold">Pricing</td>
                                    <td className="px-6 py-5 text-center text-sm text-text-main font-bold">Custom</td>
                                    <td className="px-6 py-5 text-center text-sm text-primary font-bold bg-primary/5">Custom</td>
                                    <td className="px-6 py-5 text-center text-sm text-text-main font-bold">Custom</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </section>
    );
}
