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

const Privacy: React.FC = () => {
    const sections = [
        {
            title: "Information We Collect",
            content: [
                {
                    subtitle: "Account & Order Information",
                    text: "When you make a purchase or create an account, we collect your name, billing and shipping address, email, phone number, and payment information (handled securely by our payment processor)."
                },
                {
                    subtitle: "Site Usage",
                    text: "We may collect data about how you use our website (such as pages visited, items viewed) through cookies and analytics tools. This is non-identifying information to help us improve our site."
                },
                {
                    subtitle: "Communications",
                    text: "If you contact us by email or fill out our contact form, we collect your message and contact details to respond to you."
                }
            ]
        },
        {
            title: "How We Use Information",
            content: [
                {
                    subtitle: "To fulfill orders",
                    text: "Processing payments, shipping purchases, and sending order confirmations and updates."
                },
                {
                    subtitle: "Customer service",
                    text: "Answering your inquiries, providing support, and improving our products and services."
                },
                {
                    subtitle: "Marketing (with consent)",
                    text: "Sending you newsletters or promotional offers if you opt-in. You can unsubscribe at any time."
                },
                {
                    subtitle: "Site improvement",
                    text: "Analyzing site usage trends to enhance our website and customer experience."
                }
            ]
        },
        {
            title: "Sharing & Third Parties",
            content: [
                {
                    subtitle: "We do not sell your personal information",
                    text: "However, we share limited data with trusted third parties as needed:"
                },
                {
                    subtitle: "Shipping and Fulfillment",
                    text: "We provide your address and order details to USPS or other carriers to deliver your items."
                },
                {
                    subtitle: "Payment Processors",
                    text: "Secure payment details (e.g. credit card) are handled by Stripe/PayPal (your full card number is not stored on our site)."
                },
                {
                    subtitle: "Marketing Services",
                    text: "If you subscribe to our newsletter, we use email marketing platforms (e.g. Mailchimp) to send updates."
                },
                {
                    subtitle: "Analytics",
                    text: "We use Google Analytics to understand website traffic. This service may set cookies and collect usage data, but it does not identify you personally."
                }
            ]
        },
        {
            title: "Your Rights",
            content: [
                {
                    subtitle: "Data Access & Control",
                    text: "Depending on where you live (such as California), you may have certain rights regarding your data. Generally, you can: Access or correct the personal information we hold about you; Request deletion of your data (for example, if you delete your account or unsubscribe from communications); Opt-out of certain uses of your data, like marketing emails."
                },
                {
                    subtitle: "Exercise Your Rights",
                    text: "To exercise any of these rights or with questions about your data, contact us at privacy@hotchpotshceramics.com. We will respond within 30 days."
                }
            ]
        },
        {
            title: "Data Security",
            content: [
                {
                    subtitle: "Protection Measures",
                    text: "We take data security seriously. We use HTTPS/SSL for secure data transmission and follow industry-standard practices to protect your data. Only authorized staff have access to order details, and we never store sensitive payment data on our servers. If a data breach occurs, we will notify affected users in accordance with applicable laws."
                }
            ]
        },
        {
            title: "Children's Privacy",
            content: [
                {
                    subtitle: "Age Restrictions",
                    text: "Our site and products are not intended for children under 13. We do not knowingly collect information from children under 13. If we learn that we have collected such data, we will promptly delete it. If you are a parent or guardian and believe we have information about your child, please contact us."
                }
            ]
        }
    ];

    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"
                    >
                        Privacy<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"
                    >
                        At HOTCHPOTSH Ceramics, your privacy and trust are important to us. We collect and handle your information responsibly, because 60% of people are more likely to trust brands that protect their data. This policy explains what data we collect, how we use it, and your rights.
                    </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>

                {/* Policy Sections */}
                <div className="space-y-16">
                    {sections.map((section, index) => (
                        <motion.div
                            key={section.title}
                            initial={{ y: 30, opacity: 0 }}
                            animate={{ y: 0, opacity: 1 }}
                            transition={{ delay: 0.6 + index * 0.1, duration: 0.6 }}
                            className="border-l-2 border-stone-300 dark:border-stone-700 pl-8"
                        >
                            <h2 className="font-display text-3xl md:text-4xl mb-8 text-text-main dark:text-white">
                                {section.title}
                            </h2>
                            <div className="space-y-6">
                                {section.content.map((item, idx) => (
                                    <div key={idx}>
                                        <h3 className="font-body font-semibold text-lg text-text-main dark:text-white mb-2">
                                            {item.subtitle}
                                        </h3>
                                        <p className="font-body font-light text-stone-600 dark:text-stone-400 leading-relaxed">
                                            {item.text}
                                        </p>
                                    </div>
                                ))}
                            </div>
                        </motion.div>
                    ))}
                </div>

                {/* Contact & Updates */}
                <motion.div
                    initial={{ y: 30, opacity: 0 }}
                    animate={{ y: 0, opacity: 1 }}
                    transition={{ delay: 1.2, duration: 0.8 }}
                    className="mt-24 p-12 bg-primary dark:bg-black text-white border border-stone-800"
                >
                    <h2 className="font-display text-3xl mb-4">Contact & Updates</h2>
                    <p className="font-body font-light text-stone-300 leading-relaxed mb-6 max-w-3xl">
                        If you have any privacy questions, or if you want to request or update your personal data, please contact us at <strong>privacy@hotchpotshceramics.com</strong> or use our contact page. We may update this Privacy Policy occasionally to reflect changes in our practices; the latest version will always be posted here with an updated date.
                    </p>
                    <p className="font-body font-light text-stone-400 text-sm">
                        By shopping with us, you acknowledge you have read and agree to this Privacy Policy.
                    </p>
                </motion.div>

                {/* Additional Contact */}
                <motion.div
                    initial={{ y: 30, opacity: 0 }}
                    animate={{ y: 0, opacity: 1 }}
                    transition={{ delay: 1.4, duration: 0.8 }}
                    className="mt-12 text-center"
                >
                    <Link
                        to="/contact"
                        className="inline-block bg-white dark:bg-stone-800 text-black dark:text-white px-10 py-4 text-xs font-bold uppercase tracking-widest border border-stone-300 dark:border-stone-700 hover:bg-stone-100 dark:hover:bg-stone-700 transition-colors"
                    >
                        Contact Us
                    </Link>
                </motion.div>
            </div>
        </div>
    );
};

export default Privacy;