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

const Returns: React.FC = () => {
    const returnSteps = [
        {
            step: "01",
            title: "Contact Us",
            description: "Email support@knuthceramics.com within 14 days of delivery with your order number and photos of the item and packaging."
        },
        {
            step: "02",
            title: "Receive Instructions",
            description: "Our team will review your request and provide detailed return instructions and a return authorization if approved."
        },
        {
            step: "03",
            title: "Ship Back",
            description: "Carefully package the item with at least 1\" of padding around each piece. Use insured shipping and retain your tracking number."
        },
        {
            step: "04",
            title: "Get Refund",
            description: "Once we receive and inspect the returned item, we'll process your exchange or refund within 5–7 business days."
        }
    ];

    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"
                    >
                        Customer Care
                    </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"
                    >
                        Returns &<br />Exchanges
                    </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"
                    >
                        We understand that buying handmade ceramics is different than buying mass-produced goods. Because each piece is made just for you, returns are limited. Please review our policy carefully.
                    </motion.p>
                </div>

                {/* Policy Details */}
                <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-24">
                    <motion.div
                        initial={{ y: 20, opacity: 0 }}
                        animate={{ y: 0, opacity: 1 }}
                        transition={{ delay: 0.5, duration: 0.6 }}
                        className="p-8 bg-white dark:bg-black border border-stone-200 dark:border-stone-800"
                    >
                        <h3 className="font-display text-2xl mb-4 text-text-main dark:text-white">Eligibility</h3>
                        <p className="font-body font-light text-stone-600 dark:text-stone-400 leading-relaxed">
                            We only accept returns for items that are <strong>defective, damaged, or incorrect</strong>. If your item arrived damaged, see the Damaged Items section below. For a refund or exchange, contact us within 14 days of delivery.
                        </p>
                    </motion.div>

                    <motion.div
                        initial={{ y: 20, opacity: 0 }}
                        animate={{ y: 0, opacity: 1 }}
                        transition={{ delay: 0.6, duration: 0.6 }}
                        className="p-8 bg-white dark:bg-black border border-stone-200 dark:border-stone-800"
                    >
                        <h3 className="font-display text-2xl mb-4 text-text-main dark:text-white">Condition</h3>
                        <p className="font-body font-light text-stone-600 dark:text-stone-400 leading-relaxed">
                            Returned items must be <strong>unused and in their original packaging</strong> (minus the damage, if any). We reserve the right to refuse returns for pieces showing signs of use or abuse.
                        </p>
                    </motion.div>

                    <motion.div
                        initial={{ y: 20, opacity: 0 }}
                        animate={{ y: 0, opacity: 1 }}
                        transition={{ delay: 0.7, duration: 0.6 }}
                        className="p-8 bg-white dark:bg-black border border-stone-200 dark:border-stone-800"
                    >
                        <h3 className="font-display text-2xl mb-4 text-text-main dark:text-white">Return Shipping</h3>
                        <p className="font-body font-light text-stone-600 dark:text-stone-400 leading-relaxed">
                            The customer is responsible for return shipping costs, <strong>except in the case of our error or damage</strong>. We strongly recommend insured shipping and adequate packaging.
                        </p>
                    </motion.div>

                    <motion.div
                        initial={{ y: 20, opacity: 0 }}
                        animate={{ y: 0, opacity: 1 }}
                        transition={{ delay: 0.8, duration: 0.6 }}
                        className="p-8 bg-white dark:bg-black border border-stone-200 dark:border-stone-800"
                    >
                        <h3 className="font-display text-2xl mb-4 text-text-main dark:text-white">Exchanges & Refunds</h3>
                        <p className="font-body font-light text-stone-600 dark:text-stone-400 leading-relaxed">
                            Once we receive and inspect the returned item, we will process an exchange or refund promptly. Refunds are issued to the original payment method. Please allow 5–7 business days for the credit to appear.
                        </p>
                    </motion.div>
                </div>

                {/* Return Process */}
                <div className="mb-24">
                    <h2 className="font-display text-4xl md:text-5xl mb-12 text-text-main dark:text-white">
                        Return Process
                    </h2>
                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                        {returnSteps.map((item, index) => (
                            <motion.div
                                key={item.step}
                                initial={{ y: 20, opacity: 0 }}
                                animate={{ y: 0, opacity: 1 }}
                                transition={{ delay: 0.9 + index * 0.1, duration: 0.6 }}
                                className="relative"
                            >
                                <div className="absolute top-0 left-0 font-display text-6xl text-stone-200 dark:text-stone-800 -z-10">
                                    {item.step}
                                </div>
                                <div className="pt-16">
                                    <h4 className="font-display text-xl mb-3 text-text-main dark:text-white">
                                        {item.title}
                                    </h4>
                                    <p className="font-body font-light text-stone-600 dark:text-stone-400 leading-relaxed text-sm">
                                        {item.description}
                                    </p>
                                </div>
                            </motion.div>
                        ))}
                    </div>
                </div>

                {/* Damaged Items */}
                <motion.div
                    initial={{ y: 30, opacity: 0 }}
                    animate={{ y: 0, opacity: 1 }}
                    transition={{ delay: 1.3, duration: 0.8 }}
                    className="p-8 md:p-12 bg-primary dark:bg-black text-white border border-stone-800"
                >
                    <h3 className="font-display text-3xl mb-4">Damaged Items</h3>
                    <p className="font-body font-light text-stone-300 leading-relaxed max-w-3xl mb-6">
                        If your item arrived broken, please contact us immediately. Take a photo of the damage (and packaging, if possible), and email us within 7 days of receipt. All orders are fully insured during transit. We will cover shipping costs to replace or refund damaged goods.
                    </p>
                    <Link
                        to="/contact"
                        className="inline-block bg-white text-black px-8 py-3 text-xs font-bold uppercase tracking-widest hover:bg-stone-200 transition-colors"
                    >
                        Report Damage
                    </Link>
                </motion.div>
            </div>
        </div>
    );
};

export default Returns;