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

const Shipping: React.FC = () => {
    const shippingDetails = [
        {
            title: "Order Processing",
            description: "Each item is handcrafted and inspected with care. Please allow up to 3 business days for us to prepare and pack your order.",
            icon: "📦"
        },
        {
            title: "Shipping Methods",
            description: "We offer standard USPS shipping for most orders. For faster delivery, expedited shipping (such as USPS Priority or UPS) is available at checkout. Some oversized or multiple-item orders may ship via UPS Ground.",
            icon: "🚚"
        },
        {
            title: "Delivery Time",
            description: "After processing, expect 3–5 business days transit time for standard domestic delivery. Expedited options can arrive in 1–2 days. Your order confirmation email will include a tracking number.",
            icon: "⏱️"
        },
        {
            title: "Free Shipping",
            description: "We offer flat-rate shipping on orders under $75. Free standard shipping is available on all orders over $75. These promotions are subject to change, so check the cart for current offers.",
            icon: "✨"
        },
        {
            title: "Packaging",
            description: "We reuse packing materials and eco-friendly fillers whenever possible to protect your ceramics and reduce waste. Every package is insured for its full value during transit.",
            icon: "♻️"
        },
        {
            title: "Shipping Restrictions",
            description: "We do not ship to P.O. boxes. Unfortunately, we cannot ship internationally at this time (U.S. addresses only). If you need a rush order, please contact us – we'll do our best to accommodate.",
            icon: "🇺🇸"
        }
    ];

    return (
        <div className="bg-stone-50 dark:bg-stone-900 min-h-screen pt-32 pb-24">
            <div className="max-w-[1400px] mx-auto px-6 md:px-12">
                {/* Header */}
                <div className="mb-24 max-w-3xl">
                    <motion.span
                        initial={{ opacity: 0 }}
                        animate={{ opacity: 1 }}
                        transition={{ duration: 1 }}
                        className="block text-xs uppercase tracking-[0.3em] text-stone-400 mb-6"
                    >
                        Delivery 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"
                    >
                        Shipping<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"
                    >
                        HOTCHPOTSH Ceramics proudly ships nationwide from our Texas studio. We strive to make delivery smooth and transparent for you.
                    </motion.p>
                </div>

                {/* Shipping Details Grid */}
                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-24">
                    {shippingDetails.map((detail, index) => (
                        <motion.div
                            key={detail.title}
                            initial={{ y: 20, opacity: 0 }}
                            animate={{ y: 0, opacity: 1 }}
                            transition={{ delay: index * 0.1, duration: 0.6 }}
                            className="p-8 bg-white dark:bg-black border border-stone-200 dark:border-stone-800 hover:border-stone-400 dark:hover:border-stone-600 transition-colors"
                        >
                            <div className="text-4xl mb-6">{detail.icon}</div>
                            <h3 className="font-display text-2xl mb-4 text-text-main dark:text-white">
                                {detail.title}
                            </h3>
                            <p className="font-body font-light text-stone-600 dark:text-stone-400 leading-relaxed">
                                {detail.description}
                            </p>
                        </motion.div>
                    ))}
                </div>

                {/* Important Notice */}
                <motion.div
                    initial={{ y: 30, opacity: 0 }}
                    animate={{ y: 0, opacity: 1 }}
                    transition={{ delay: 0.8, duration: 0.8 }}
                    className="p-8 md:p-12 bg-amber-50 dark:bg-amber-900/10 border-l-4 border-amber-500"
                >
                    <h3 className="font-display text-2xl mb-4 text-text-main dark:text-white">
                        Peak Season Notice
                    </h3>
                    <p className="font-body font-light text-stone-700 dark:text-stone-300 leading-relaxed">
                        Peak seasons and holidays may add 1–2 extra days to processing. We'll notify you of any anticipated delays. By having a clear, upfront shipping policy, we aim to boost your confidence and reduce checkout surprises.
                    </p>
                </motion.div>

                {/* CTA Section */}
                <motion.div
                    initial={{ y: 30, opacity: 0 }}
                    animate={{ y: 0, opacity: 1 }}
                    transition={{ delay: 1, duration: 0.8 }}
                    className="mt-24 text-center"
                >
                    <h2 className="font-display text-3xl md:text-4xl mb-6 text-text-main dark:text-white">
                        Questions about shipping?
                    </h2>
                    <p className="font-body font-light text-stone-500 mb-8 max-w-xl mx-auto">
                        Contact our team for specific shipping inquiries or rush orders.
                    </p>
                    <Link
                        to="/contact"
                        className="inline-block bg-primary dark:bg-white text-white dark:text-black px-10 py-4 text-xs font-bold uppercase tracking-widest hover:bg-stone-800 dark:hover:bg-stone-200 transition-colors"
                    >
                        Get in Touch
                    </Link>
                </motion.div>
            </div>
        </div>
    );
};

export default Shipping;