import { Metadata } from "next";
import { Truck, RotateCcw, Clock, MapPin, Shield, CheckCircle } from "lucide-react";

export const metadata: Metadata = {
  title: "Shipping & Returns – Americas.Pet",
  description: "Free shipping on orders over $75. Easy 30-day returns. Learn about our shipping options and return policy.",
};

export default function ShippingPage() {
  return (
    <div className="min-h-screen bg-gray-50">
      {/* Hero */}
      <div className="bg-primary-600 text-white py-14">
        <div className="max-w-4xl mx-auto px-4 text-center">
          <h1 className="text-4xl font-bold mb-3">Shipping & Returns</h1>
          <p className="text-primary-100 text-lg">Fast, reliable delivery and hassle-free returns. Because your pet shouldn't have to wait.</p>
        </div>
      </div>

      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        {/* Shipping Options */}
        <section className="mb-16">
          <div className="flex items-center gap-3 mb-8">
            <Truck className="h-7 w-7 text-primary-600" />
            <h2 className="text-2xl font-bold text-gray-900">Shipping Options</h2>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-5 mb-8">
            <div className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
              <p className="font-bold text-gray-900 mb-1">Standard Shipping</p>
              <p className="text-2xl font-bold text-primary-600">FREE</p>
              <p className="text-sm text-gray-500 mt-1">Orders over $75</p>
              <p className="text-xs text-gray-400 mt-2">5-7 business days</p>
            </div>
            <div className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
              <p className="font-bold text-gray-900 mb-1">Standard Shipping</p>
              <p className="text-2xl font-bold text-gray-700">$9.99</p>
              <p className="text-sm text-gray-500 mt-1">Orders under $75</p>
              <p className="text-xs text-gray-400 mt-2">5-7 business days</p>
            </div>
            <div className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100 border-primary-200">
              <p className="font-bold text-gray-900 mb-1">Express Shipping</p>
              <p className="text-2xl font-bold text-gray-700">$14.99</p>
              <p className="text-sm text-gray-500 mt-1">Any order size</p>
              <p className="text-xs text-gray-400 mt-2">2-3 business days</p>
            </div>
          </div>

          <div className="bg-white rounded-2xl p-8 shadow-sm border border-gray-100 space-y-4">
            <h3 className="font-bold text-gray-900 text-lg">Shipping Details</h3>
            <div className="space-y-3 text-sm text-gray-600">
              <div className="flex items-start gap-3">
                <CheckCircle className="h-5 w-5 text-green-500 shrink-0 mt-0.5" />
                <p>We ship to all 50 US states, Puerto Rico, and US territories. International shipping is not available at this time.</p>
              </div>
              <div className="flex items-start gap-3">
                <CheckCircle className="h-5 w-5 text-green-500 shrink-0 mt-0.5" />
                <p>Orders placed before 2:00 PM EST on business days are processed the same day.</p>
              </div>
              <div className="flex items-start gap-3">
                <CheckCircle className="h-5 w-5 text-green-500 shrink-0 mt-0.5" />
                <p>You'll receive a tracking number via email once your order ships. Track your package anytime through your account dashboard.</p>
              </div>
              <div className="flex items-start gap-3">
                <CheckCircle className="h-5 w-5 text-green-500 shrink-0 mt-0.5" />
                <p>Heavy or oversized items (over 50 lbs) may require additional shipping fees. You'll be notified before your order is processed.</p>
              </div>
              <div className="flex items-start gap-3">
                <CheckCircle className="h-5 w-5 text-green-500 shrink-0 mt-0.5" />
                <p>Delivery times are estimates and do not include weekends or holidays. Delays may occur during peak seasons.</p>
              </div>
            </div>
          </div>
        </section>

        {/* Returns */}
        <section className="mb-16">
          <div className="flex items-center gap-3 mb-8">
            <RotateCcw className="h-7 w-7 text-primary-600" />
            <h2 className="text-2xl font-bold text-gray-900">Return Policy</h2>
          </div>

          <div className="bg-white rounded-2xl p-8 shadow-sm border border-gray-100 space-y-6">
            <div className="bg-primary-50 rounded-xl p-5 border border-primary-100">
              <p className="font-bold text-primary-800 text-lg mb-1">30-Day Hassle-Free Returns</p>
              <p className="text-sm text-primary-700">Not satisfied? Return any unused item within 30 days for a full refund or exchange.</p>
            </div>

            <div>
              <h3 className="font-bold text-gray-900 mb-3">How to Return an Item</h3>
              <ol className="space-y-3 text-sm text-gray-600">
                <li className="flex gap-3">
                  <span className="w-6 h-6 bg-primary-100 text-primary-700 rounded-full flex items-center justify-center text-xs font-bold shrink-0">1</span>
                  <span>Log into your account and go to "My Orders" to initiate a return request.</span>
                </li>
                <li className="flex gap-3">
                  <span className="w-6 h-6 bg-primary-100 text-primary-700 rounded-full flex items-center justify-center text-xs font-bold shrink-0">2</span>
                  <span>Select the item(s) you'd like to return and choose your reason.</span>
                </li>
                <li className="flex gap-3">
                  <span className="w-6 h-6 bg-primary-100 text-primary-700 rounded-full flex items-center justify-center text-xs font-bold shrink-0">3</span>
                  <span>Print the prepaid return label and ship the item back to us.</span>
                </li>
                <li className="flex gap-3">
                  <span className="w-6 h-6 bg-primary-100 text-primary-700 rounded-full flex items-center justify-center text-xs font-bold shrink-0">4</span>
                  <span>Once received and inspected, your refund will be processed within 3-5 business days.</span>
                </li>
              </ol>
            </div>

            <div>
              <h3 className="font-bold text-gray-900 mb-3">Non-Returnable Items</h3>
              <ul className="space-y-2 text-sm text-gray-600">
                <li className="flex items-center gap-2"><span className="text-red-400">✕</span> Opened food, treats, or supplements</li>
                <li className="flex items-center gap-2"><span className="text-red-400">✕</span> Used bedding, litter, or grooming tools</li>
                <li className="flex items-center gap-2"><span className="text-red-400">✕</span> Custom or personalized items</li>
                <li className="flex items-center gap-2"><span className="text-red-400">✕</span> Gift cards</li>
                <li className="flex items-center gap-2"><span className="text-red-400">✕</span> Items damaged due to misuse</li>
              </ul>
            </div>

            <div>
              <h3 className="font-bold text-gray-900 mb-3">Damaged or Defective Items</h3>
              <p className="text-sm text-gray-600">If your item arrives damaged or defective, contact us within 48 hours of delivery with photos. We'll send a free replacement or issue a full refund immediately — no return required.</p>
            </div>
          </div>
        </section>

        {/* FAQ */}
        <section>
          <div className="flex items-center gap-3 mb-6">
            <Clock className="h-7 w-7 text-primary-600" />
            <h2 className="text-2xl font-bold text-gray-900">Common Questions</h2>
          </div>
          <div className="space-y-4">
            {[
              { q: "Can I change my shipping address after placing an order?", a: "If your order hasn't shipped yet, contact us immediately and we'll update the address. Once shipped, we cannot redirect packages." },
              { q: "Do you offer same-day delivery?", a: "Same-day delivery is not currently available. Express shipping (2-3 business days) is our fastest option." },
              { q: "What if my package is lost?", a: "If tracking shows no movement for 7+ days, contact us. We'll file a claim with the carrier and send a replacement or refund." },
              { q: "Is return shipping free?", a: "Yes! We provide a prepaid return label for all eligible returns within the continental US." },
            ].map((item) => (
              <div key={item.q} className="bg-white rounded-2xl p-6 shadow-sm border border-gray-100">
                <h4 className="font-semibold text-gray-900 mb-2">{item.q}</h4>
                <p className="text-sm text-gray-500">{item.a}</p>
              </div>
            ))}
          </div>
        </section>
      </div>
    </div>
  );
}