import React from 'react';
import { Link } from 'react-router-dom';
import { motion } from 'framer-motion';

const Cookies: React.FC = () => {
    const cookieTypes = [
        {
            type: "Essential Cookies",
            icon: "🔒",
            description: "These are necessary for basic site functions (like keeping items in your cart, secure login, etc.) and cannot be turned off without affecting the site.",
            canDisable: false
        },
        {
            type: "Analytics Cookies",
            icon: "📊",
            description: "We use Google Analytics to learn how customers find and use our site. These cookies help us improve content, layout, and functionality.",
            canDisable: true,
            example: "Google Analytics"
        },
        {
            type: "Marketing Cookies",
            icon: "🎯",
            description: "If you opt-in, we may use cookies to show you personalized ads or to measure ad performance (e.g. Facebook Pixel, Google AdWords). No personal information is stored – just anonymous data to track which ads work best.",
            canDisable: true,
            example: "Facebook Pixel, Google AdWords"
        }
    ];

    return (
        <div className="bg-stone-50 dark:bg-stone-900 min-h-screen pt-32 pb-24">
            <div className="max-w-[1200px] mx-auto px-6 md:px-12">
                {/* Header */}
                <div className="mb-24">
                    <motion.span
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        transition={{ duration: 1 }}
                        className="block text-xs uppercase tracking-[0.3em] text-stone-400 mb-6"
                    >
                        Legal Information
                    </motion.span>
                    <motion.h1
                        initial={{ y: 30, opacity: 0 }}
                        animate={{ y: 0, opacity: 1 }}
                        transition={{ delay: 0.2, duration: 0.8 }}
                        className="font-display text-5xl md:text-7xl lg:text-8xl leading-none text-text-main dark:text-white mb-8"
                    >
                        Cookie<br />Policy
                    </motion.h1>
                    <motion.p
                        initial={{ y: 30, opacity: 0 }}
                        animate={{ y: 0, opacity: 1 }}
                        transition={{ delay: 0.4, duration: 0.8 }}
                        className="font-body text-lg font-light text-stone-500 leading-relaxed max-w-3xl"
                    >
                        We use cookies and similar technologies to make our website work better for you. Cookies are small text files stored on your device. Here's how we use them and how you can control them.
                    </motion.p>
                    <motion.p
                        initial={{ y: 30, opacity: 0 }}
                        animate={{ y: 0, opacity: 1 }}
                        transition={{ delay: 0.5, duration: 0.8 }}
                        className="font-body text-sm font-light text-stone-400 mt-4"
                    >
                        Last Updated: February 2, 2025
                    </motion.p>
                </div>

                {/* What Are Cookies */}
                <motion.div
                    initial={{ y: 30, opacity: 0 }}
                    animate={{ y: 0, opacity: 1 }}
                    transition={{ delay: 0.6, duration: 0.6 }}
                    className="mb-16 p-8 bg-amber-50 dark:bg-amber-900/10 border-l-4 border-amber-500"
                >
                    <h2 className="font-display text-2xl mb-4 text-text-main dark:text-white">
                        What Are Cookies?
                    </h2>
                    <p className="font-body font-light text-stone-700 dark:text-stone-300 leading-relaxed">
                        Cookies are small text files that websites store on your computer or mobile device when you visit them. They help the website remember information about your visit, like your preferred language, items in your shopping cart, and other settings. This makes your next visit easier and the site more useful to you.
                    </p>
                </motion.div>

                {/* Cookie Types */}
                <div className="mb-24">
                    <h2 className="font-display text-4xl md:text-5xl mb-12 text-text-main dark:text-white">
                        Types of Cookies We Use
                    </h2>
                    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                        {cookieTypes.map((cookie, index) => (
                            <motion.div
                                key={cookie.type}
                                initial={{ y: 20, opacity: 0 }}
                                animate={{ y: 0, opacity: 1 }}
                                transition={{ delay: 0.7 + index * 0.1, duration: 0.6 }}
                                className="p-8 bg-white dark:bg-black border border-stone-200 dark:border-stone-800"
                            >
                                <div className="text-5xl mb-6">{cookie.icon}</div>
                                <h3 className="font-display text-2xl mb-4 text-text-main dark:text-white">
                                    {cookie.type}
                                </h3>
                                <p className="font-body font-light text-stone-600 dark:text-stone-400 leading-relaxed mb-4">
                                    {cookie.description}
                                </p>
                                {cookie.example && (
                                    <p className="font-body text-sm text-stone-500 italic">
                                        Examples: {cookie.example}
                                    </p>
                                )}
                                <div className="mt-6 pt-6 border-t border-stone-200 dark:border-stone-800">
                                    <span className={`inline-block px-4 py-2 text-xs font-bold uppercase tracking-widest ${cookie.canDisable ? 'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-400' : 'bg-stone-200 dark:bg-stone-800 text-stone-600 dark:text-stone-400'}`}>
                                        {cookie.canDisable ? 'Can be disabled' : 'Always active'}
                                    </span>
                                </div>
                            </motion.div>
                        ))}
                    </div>
                </div>

                {/* Managing Cookies */}
                <motion.div
                    initial={{ y: 30, opacity: 0 }}
                    animate={{ y: 0, opacity: 1 }}
                    transition={{ delay: 1, duration: 0.6 }}
                    className="mb-16 border-l-2 border-stone-300 dark:border-stone-700 pl-8"
                >
                    <h2 className="font-display text-3xl md:text-4xl mb-6 text-text-main dark:text-white">
                        Managing Your Cookie Preferences
                    </h2>
                    <div className="space-y-4 font-body font-light text-stone-600 dark:text-stone-400 leading-relaxed">
                        <p>
                            You can control or disable cookies in your browser settings. However, disabling cookies may limit your ability to use some features (like staying logged in or completing a purchase).
                        </p>
                        <p>
                            By continuing to use our site without changing your settings, you consent to the use of cookies as described in this policy.
                        </p>
                        <p className="font-semibold text-text-main dark:text-white">
                            Browser Cookie Settings:
                        </p>
                        <ul className="list-disc list-inside space-y-2 ml-4">
                            <li><strong>Chrome:</strong> Settings → Privacy and security → Cookies and other site data</li>
                            <li><strong>Firefox:</strong> Preferences → Privacy & Security → Cookies and Site Data</li>
                            <li><strong>Safari:</strong> Preferences → Privacy → Manage Website Data</li>
                            <li><strong>Edge:</strong> Settings → Cookies and site permissions → Manage and delete cookies</li>
                        </ul>
                    </div>
                </motion.div>

                {/* Third-Party Cookies */}
                <motion.div
                    initial={{ y: 30, opacity: 0 }}
                    animate={{ y: 0, opacity: 1 }}
                    transition={{ delay: 1.2, duration: 0.6 }}
                    className="mb-16 p-8 bg-white dark:bg-black border border-stone-200 dark:border-stone-800"
                >
                    <h2 className="font-display text-3xl mb-4 text-text-main dark:text-white">
                        Third-Party Cookies
                    </h2>
                    <p className="font-body font-light text-stone-600 dark:text-stone-400 leading-relaxed mb-4">
                        Some cookies on our site are set by third-party services we use, such as:
                    </p>
                    <ul className="list-disc list-inside space-y-2 font-body font-light text-stone-600 dark:text-stone-400 ml-4">
                        <li><strong>Google Analytics:</strong> To understand how visitors use our site</li>
                        <li><strong>Payment Processors:</strong> To securely process transactions</li>
                        <li><strong>Social Media Platforms:</strong> If you interact with embedded social media content</li>
                    </ul>
                    <p className="font-body font-light text-stone-600 dark:text-stone-400 leading-relaxed mt-4">
                        These third parties have their own privacy policies governing their use of your information. We recommend reviewing their policies to understand how they use cookies.
                    </p>
                </motion.div>

                {/* Contact */}
                <motion.div
                    initial={{ y: 30, opacity: 0 }}
                    animate={{ y: 0, opacity: 1 }}
                    transition={{ delay: 1.4, duration: 0.8 }}
                    className="p-12 bg-primary dark:bg-black text-white text-center border border-stone-800"
                >
                    <h2 className="font-display text-3xl mb-4">Questions About Cookies?</h2>
                    <p className="font-body font-light text-stone-300 mb-8 max-w-2xl mx-auto">
                        For any questions about cookies or to opt-out of analytics tracking, please contact us at <strong>support@hotchpotshceramics.com</strong>
                    </p>
                    <Link
                        to="/contact"
                        className="inline-block bg-white text-black px-10 py-4 text-xs font-bold uppercase tracking-widest hover:bg-stone-200 transition-colors"
                    >
                        Contact Us
                    </Link>
                </motion.div>
            </div>
        </div>
    );
};

export default Cookies;