import { Metadata } from "next";
import Link from "next/link";
import { Heart, Shield, Truck, Award, Users, Globe } from "lucide-react";

export const metadata: Metadata = {
  title: "About Us – Americas.Pet",
  description: "Learn about Americas.Pet — your trusted partner for premium pet products and comprehensive pet health insurance since 2020.",
};

const stats = [
  { label: "Happy Customers", value: "50,000+" },
  { label: "Products Available", value: "2,500+" },
  { label: "Pets Insured", value: "15,000+" },
  { label: "Years in Business", value: "5+" },
];

const values = [
  { icon: Heart, title: "Pet-First Philosophy", description: "Every decision we make starts with one question: is this what's best for the pet? From nutrition to coverage, quality comes first." },
  { icon: Shield, title: "Trusted Protection", description: "Our insurance plans are designed by veterinarians and pet parents to cover what matters most — from accidents to wellness visits." },
  { icon: Truck, title: "Fast & Reliable Delivery", description: "We partner with top logistics providers to deliver your pet essentials quickly, safely, and with real-time tracking." },
  { icon: Award, title: "Quality Guaranteed", description: "We vet every product and brand we carry. If it doesn't meet our standards for safety and nutrition, it doesn't make the cut." },
  { icon: Users, title: "Community Driven", description: "We listen to our customers. Our product line evolves based on real feedback from real pet parents like you." },
  { icon: Globe, title: "Sustainability", description: "We prioritize eco-friendly packaging and partner with brands committed to sustainable, ethical practices." },
];

const team = [
  { name: "Sarah Mitchell", role: "Founder & CEO", bio: "Dog mom of 3 rescue labs. Started Americas.Pet after struggling to find quality products and affordable insurance in one place." },
  { name: "Dr. James Chen", role: "Chief Veterinary Officer", bio: "20+ years of veterinary practice. Oversees product quality standards and insurance plan design." },
  { name: "Maria Rodriguez", role: "Head of Operations", bio: "Former logistics director at a Fortune 500. Ensures every order arrives on time and in perfect condition." },
  { name: "Alex Thompson", role: "Head of Customer Experience", bio: "Passionate about making every interaction delightful. Cat enthusiast with a soft spot for senior rescues." },
];

export default function AboutPage() {
  return (
    <div className="min-h-screen bg-white">
      {/* Hero */}
      <div className="bg-gradient-to-br from-primary-600 to-primary-800 text-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 lg:py-28">
          <div className="max-w-3xl">
            <span className="section-badge bg-white/20 text-white">Our Story</span>
            <h1 className="text-4xl lg:text-5xl font-bold mt-4 mb-6">We believe every pet deserves the best</h1>
            <p className="text-lg text-primary-100 leading-relaxed">
              Americas.Pet was born from a simple frustration: why is it so hard to find premium pet products and reliable insurance in one place? We set out to build the most trusted pet care platform in the Americas — one that puts your pet's health, happiness, and safety above everything else.
            </p>
          </div>
        </div>
      </div>

      {/* Stats */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 -mt-10 relative z-10">
        <div className="bg-white rounded-2xl shadow-lg p-8 grid grid-cols-2 md:grid-cols-4 gap-8">
          {stats.map((stat) => (
            <div key={stat.label} className="text-center">
              <p className="text-3xl font-bold text-primary-600">{stat.value}</p>
              <p className="text-sm text-gray-500 mt-1">{stat.label}</p>
            </div>
          ))}
        </div>
      </div>

      {/* Mission */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
        <div className="max-w-3xl mx-auto text-center">
          <span className="section-badge">Our Mission</span>
          <h2 className="section-title mt-4">Making pet parenthood easier, healthier, and more affordable</h2>
          <p className="section-subtitle mt-4">
            We combine a curated marketplace of premium pet products with comprehensive insurance coverage — all in one seamless experience. Whether you're stocking up on food, finding the perfect toy, or protecting your pet from unexpected vet bills, we've got you covered.
          </p>
        </div>
      </div>

      {/* Values */}
      <div className="bg-gray-50 py-20">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-12">
            <span className="section-badge">Our Values</span>
            <h2 className="section-title mt-4">What drives us every day</h2>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {values.map((value) => (
              <div key={value.title} className="bg-white rounded-2xl p-7 shadow-sm border border-gray-100">
                <div className="w-12 h-12 bg-primary-100 rounded-xl flex items-center justify-center mb-4">
                  <value.icon className="h-6 w-6 text-primary-600" />
                </div>
                <h3 className="text-lg font-bold text-gray-900 mb-2">{value.title}</h3>
                <p className="text-sm text-gray-500 leading-relaxed">{value.description}</p>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Team */}
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
        <div className="text-center mb-12">
          <span className="section-badge">Our Team</span>
          <h2 className="section-title mt-4">Meet the people behind Americas.Pet</h2>
          <p className="section-subtitle">A passionate team of pet lovers, technologists, and veterinary professionals.</p>
        </div>
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {team.map((member) => (
            <div key={member.name} className="text-center bg-gray-50 rounded-2xl p-6 border border-gray-100">
              <div className="w-20 h-20 bg-gradient-to-br from-primary-400 to-primary-600 rounded-full flex items-center justify-center mx-auto mb-4">
                <span className="text-2xl font-bold text-white">{member.name.split(" ").map(n => n[0]).join("")}</span>
              </div>
              <h3 className="font-bold text-gray-900">{member.name}</h3>
              <p className="text-sm text-primary-600 font-medium mb-3">{member.role}</p>
              <p className="text-xs text-gray-500 leading-relaxed">{member.bio}</p>
            </div>
          ))}
        </div>
      </div>

      {/* CTA */}
      <div className="bg-primary-600 text-white py-16">
        <div className="max-w-4xl mx-auto px-4 text-center">
          <h2 className="text-3xl font-bold mb-4">Ready to give your pet the best?</h2>
          <p className="text-primary-100 mb-8 text-lg">Join thousands of pet parents who trust Americas.Pet for quality products and reliable insurance.</p>
          <div className="flex flex-wrap items-center justify-center gap-4">
            <Link href="/shop" className="btn-white">Shop Products</Link>
            <Link href="/insurance" className="border-2 border-white text-white px-6 py-3 rounded-full font-semibold hover:bg-white/10 transition-colors">Get Insurance</Link>
          </div>
        </div>
      </div>
    </div>
  );
}