import Link from "next/link";

export default function PrivacyContent() {
    return (
        <div className="bg-dark-bg py-20">
            <div className="max-w-[1000px] mx-auto px-4 sm:px-6 lg:px-8">
                {/* Introduction */}
                <div className="prose prose-lg prose-slate max-w-none text-text-light-muted mb-16">
                    <p className="leading-relaxed text-xl text-text-light">
                        At Aasi Tech ("we," "our," or "us"), we are committed to protecting your privacy. This Privacy Policy explains how we collect, use, disclose, and safeguard your information when you visit our website, use our custom software solutions, or engage with our technology consulting services. Please read this policy carefully to understand our practices regarding your data.
                    </p>
                </div>

                <div className="space-y-12">
                    {/* Section 1 */}
                    <div className="group/section bg-dark-surface p-8 md:p-10 rounded-3xl shadow-soft border border-border-dark hover:border-primary/20 transition-colors">
                        <h2 className="text-2xl font-bold text-text-light mb-6 flex items-center gap-4">
                            <span className="flex items-center justify-center w-10 h-10 rounded-xl bg-primary/10 text-primary text-lg font-black">1</span>
                            Information We Collect
                        </h2>
                        <div className="text-text-light-muted leading-relaxed space-y-4">
                            <p>
                                We collect information you provide directly to us, such as when you request a technical consultation, subscribe to our insights, or engage in a project discovery phase.
                            </p>
                            <ul className="space-y-4 mt-6">
                                <li className="flex items-start gap-3">
                                    <div className="mt-1 size-6 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
                                        <span className="material-symbols-outlined text-primary text-sm">check</span>
                                    </div>
                                    <span className="text-text-light"><strong className="text-text-light">Identity & Contact Data:</strong> Includes name, email address, job title, and company details provided during lead generation.</span>
                                </li>
                                <li className="flex items-start gap-3">
                                    <div className="mt-1 size-6 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
                                        <span className="material-symbols-outlined text-primary text-sm">check</span>
                                    </div>
                                    <span className="text-text-light"><strong className="text-text-light">Technical & Usage Data:</strong> Includes IP addresses, browser fingerprinting, and interaction metrics with our UI components to improve UX.</span>
                                </li>
                                <li className="flex items-start gap-3">
                                    <div className="mt-1 size-6 rounded-full bg-primary/10 flex items-center justify-center shrink-0">
                                        <span className="material-symbols-outlined text-primary text-sm">check</span>
                                    </div>
                                    <span className="text-text-light"><strong className="text-text-light">Project Data:</strong> Technical requirements and business logic shared during NDA-protected discovery sessions.</span>
                                </li>
                            </ul>
                        </div>
                    </div>

                    {/* Section 2 */}
                    <div className="group/section bg-dark-surface p-8 md:p-10 rounded-3xl shadow-soft border border-border-dark hover:border-primary/20 transition-colors">
                        <h2 className="text-2xl font-bold text-text-light mb-6 flex items-center gap-4">
                            <span className="flex items-center justify-center w-10 h-10 rounded-xl bg-primary/10 text-primary text-lg font-black">2</span>
                            Cookies and Tracking
                        </h2>
                        <div className="text-text-light-muted leading-relaxed space-y-4">
                            <p>
                                We use cookies and similar tracking technologies (like web beacons and pixels) to analyze traffic, remember your preferences, and provide a more personalized experience.
                            </p>
                            <div className="bg-primary/5 p-6 rounded-2xl border border-primary/10">
                                <h4 className="font-bold text-text-light mb-2">Our Cookie Usage</h4>
                                <p className="text-sm">You can instruct your browser to refuse all cookies or to indicate when a cookie is being sent. However, if you do not accept cookies, you may not be able to use some portions of our Service.</p>
                            </div>
                        </div>
                    </div>

                    {/* Section 3 */}
                    <div className="group/section bg-dark-surface p-8 md:p-10 rounded-3xl shadow-soft border border-border-dark hover:border-primary/20 transition-colors">
                        <h2 className="text-2xl font-bold text-text-light mb-6 flex items-center gap-4">
                            <span className="flex items-center justify-center w-10 h-10 rounded-xl bg-primary/10 text-primary text-lg font-black">3</span>
                            How We Use Data
                        </h2>
                        <div className="grid md:grid-cols-2 gap-6 mt-4">
                            <div className="flex gap-4 p-4 rounded-2xl bg-dark-bg/5 border border-border-dark">
                                <span className="material-symbols-outlined text-primary">analytics</span>
                                <div>
                                    <h4 className="font-bold text-text-light text-sm">Optimization</h4>
                                    <p className="text-xs text-text-light-muted mt-1">To improve our agency website and service offerings.</p>
                                </div>
                            </div>
                            <div className="flex gap-4 p-4 rounded-2xl bg-dark-bg/5 border border-border-dark">
                                <span className="material-symbols-outlined text-primary">verified_user</span>
                                <div>
                                    <h4 className="font-bold text-text-light text-sm">Security</h4>
                                    <p className="text-xs text-text-light-muted mt-1">To detect and prevent fraudulent technical activities.</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Section 4 */}
                    <div className="group/section bg-dark-surface p-8 md:p-10 rounded-3xl shadow-soft border border-border-dark hover:border-primary/20 transition-colors">
                        <h2 className="text-2xl font-bold text-text-light mb-6 flex items-center gap-4">
                            <span className="flex items-center justify-center w-10 h-10 rounded-xl bg-primary/10 text-primary text-lg font-black">4</span>
                            Data Protection & Retention
                        </h2>
                        <div className="text-text-light-muted leading-relaxed space-y-4">
                            <p>
                                Aasi Tech implements industry-standard encryption (AES-256) for data at rest and TLS for data in transit. We retain your personal information only for as long as is necessary for the purposes set out in this Privacy Policy.
                            </p>
                        </div>
                    </div>

                    {/* Section 5 */}
                    <div className="group/section bg-dark-surface p-8 md:p-10 rounded-3xl shadow-soft border border-border-dark hover:border-primary/20 transition-colors">
                        <h2 className="text-2xl font-bold text-text-light mb-6 flex items-center gap-4">
                            <span className="flex items-center justify-center w-10 h-10 rounded-xl bg-primary/10 text-primary text-lg font-black">5</span>
                            Your Privacy Rights
                        </h2>
                        <p className="text-text-light-muted mb-6">Depending on your jurisdiction (such as under GDPR or CCPA), you have the following rights:</p>
                        <div className="grid sm:grid-cols-3 gap-4">
                            <div className="p-4 rounded-2xl border border-border-dark text-center hover:shadow-md transition-shadow">
                                <span className="material-symbols-outlined text-primary text-2xl mb-2">visibility</span>
                                <h4 className="text-xs font-bold text-text-light">Right to Access</h4>
                            </div>
                            <div className="p-4 rounded-2xl border border-border-dark text-center hover:shadow-md transition-shadow">
                                <span className="material-symbols-outlined text-primary text-2xl mb-2">edit_note</span>
                                <h4 className="text-xs font-bold text-text-light">Right to Rectify</h4>
                            </div>
                            <div className="p-4 rounded-2xl border border-border-dark text-center hover:shadow-md transition-shadow">
                                <span className="material-symbols-outlined text-primary text-2xl mb-2">delete</span>
                                <h4 className="text-xs font-bold text-text-light">Right to Erasure</h4>
                            </div>
                        </div>
                    </div>
                </div>

                {/* Contact Block */}
                <div className="mt-16 bg-section-dark rounded-3xl p-10 flex flex-col md:flex-row items-center justify-between gap-8 relative overflow-hidden group">
                    <div className="absolute top-0 right-0 w-64 h-64 bg-primary/20 rounded-full blur-[60px] pointer-events-none group-hover:bg-primary/30 transition-colors duration-700" />
                    <div className="relative z-10 text-center md:text-left">
                        <h3 className="text-2xl font-bold text-white mb-2">Data Privacy Inquiries?</h3>
                        <p className="text-text-light-muted text-lg max-w-lg">Contact our data protection officer for questions regarding your personal information.</p>
                    </div>
                    <div className="relative z-10 flex-shrink-0">
                        <Link className="btn-primary inline-flex items-center justify-center rounded-full px-8 py-4 text-white font-bold shadow-glow-green hover:shadow-lg transition-all btn-hover-lift" href="/contact">
                            Contact Privacy Team
                            <span className="material-symbols-outlined ml-2">shield_person</span>
                        </Link>
                    </div>
                </div>
            </div>
        </div>
    );
}
