import { Flame, Award, Users, MapPin } from "lucide-react";
import Header from "@/components/Header";
import Footer from "@/components/Footer";
import { IMAGES } from "@/lib/data";

const stats = [
  { value: "15+", label: "Years in Business" },
  { value: "50K+", label: "Happy Customers" },
  { value: "200+", label: "Premium Products" },
  { value: "4.9", label: "Average Rating" },
];

const values = [
  {
    icon: Flame,
    title: "Passion for Fire",
    description: "We live and breathe outdoor cooking. Every product we carry has been tested by our team of pitmasters and grilling enthusiasts.",
  },
  {
    icon: Award,
    title: "Uncompromising Quality",
    description: "We only stock equipment that meets our rigorous standards. If we wouldn't use it in our own backyard, we won't sell it in our store.",
  },
  {
    icon: Users,
    title: "Community First",
    description: "We're more than a store — we're a community of outdoor cooking enthusiasts. From beginner grillers to competition pitmasters, everyone is welcome.",
  },
  {
    icon: MapPin,
    title: "Local Roots",
    description: "Founded in Austin, Texas — the BBQ capital of the world. Our showroom is a destination for grill lovers from across the country.",
  },
];

const team = [
  { name: "Jake Morrison", role: "Founder & Head Pitmaster", bio: "Competition BBQ champion with 20+ years of experience. Jake started GrillMaster Pro from his backyard in Austin." },
  { name: "Sarah Chen", role: "Product Curator", bio: "Former chef turned grill expert. Sarah personally tests every product before it hits our shelves." },
  { name: "Marcus Williams", role: "Customer Experience Lead", bio: "BBQ enthusiast and certified grill technician. Marcus ensures every customer finds their perfect setup." },
];

const About = () => {
  return (
    <div className="min-h-screen bg-[#1a1a1a]">
      <Header />

      {/* Hero */}
      <section className="relative pt-20 lg:pt-24">
        <div className="relative h-[400px] overflow-hidden">
          <img
            src={IMAGES.hero}
            alt="GrillMaster Pro showroom"
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-gradient-to-t from-[#1a1a1a] via-[#1a1a1a]/70 to-[#1a1a1a]/30" />
          <div className="absolute inset-0 flex items-center">
            <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8 w-full">
              <p className="font-oswald text-[#d35400] text-sm uppercase tracking-[0.4em] mb-3">
                Our Story
              </p>
              <h1 className="font-playfair text-4xl sm:text-5xl lg:text-6xl font-bold text-white mb-4">
                About GrillMaster Pro
              </h1>
              <p className="font-inter text-lg text-[#b0b0b0] max-w-2xl">
                Born from a passion for fire and flavor, we've been equipping outdoor cooks with premium gear since 2010.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Stats */}
      <section className="py-16 bg-[#222] border-y border-[#333]">
        <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-2 lg:grid-cols-4 gap-8">
            {stats.map((stat) => (
              <div key={stat.label} className="text-center">
                <p className="font-oswald text-4xl lg:text-5xl font-bold text-[#d35400] mb-1">{stat.value}</p>
                <p className="font-inter text-sm text-[#888]">{stat.label}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Story */}
      <section className="py-20 lg:py-28">
        <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
            <div>
              <p className="font-oswald text-[#d35400] text-sm uppercase tracking-[0.4em] mb-3">
                Est. 2010
              </p>
              <h2 className="font-playfair text-3xl sm:text-4xl font-bold text-white mb-6">
                From Backyard to Business
              </h2>
              <div className="space-y-4 font-inter text-[#b0b0b0] leading-relaxed">
                <p>
                  GrillMaster Pro started in 2010 when founder Jake Morrison couldn't find a single store that carried the quality of equipment he needed for competition BBQ. Frustrated with flimsy grills and unreliable smokers, he decided to create the store he wished existed.
                </p>
                <p>
                  What began as a small online shop operating out of a garage in Austin, Texas has grown into the premier destination for serious outdoor cooks. Our 5,000 sq ft showroom features working displays of every grill and smoker we sell — because we believe you should experience a product before you buy it.
                </p>
                <p>
                  Today, we serve over 50,000 customers nationwide, from weekend grillers to professional pitmasters and restaurant owners. Our commitment remains the same: curate only the best outdoor cooking equipment and back it with expert knowledge and exceptional service.
                </p>
              </div>
            </div>
            <div className="aspect-[4/3] rounded-lg overflow-hidden">
              <img
                src={IMAGES.smoker}
                alt="Our story"
                className="w-full h-full object-cover"
              />
            </div>
          </div>
        </div>
      </section>

      {/* Values */}
      <section className="py-20 lg:py-28 bg-[#222]">
        <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-14">
            <p className="font-oswald text-[#d35400] text-sm uppercase tracking-[0.4em] mb-3">
              What Drives Us
            </p>
            <h2 className="font-playfair text-3xl sm:text-4xl font-bold text-white mb-4">
              Our Values
            </h2>
            <div className="w-20 h-1 bg-[#d35400] mx-auto rounded-full" />
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
            {values.map((item) => (
              <div key={item.title} className="text-center">
                <div className="w-16 h-16 rounded-full bg-[#d35400]/10 border border-[#d35400]/30 flex items-center justify-center mx-auto mb-4">
                  <item.icon className="w-7 h-7 text-[#d35400]" />
                </div>
                <h3 className="font-oswald text-lg font-bold text-white uppercase tracking-wider mb-2">
                  {item.title}
                </h3>
                <p className="font-inter text-sm text-[#888] leading-relaxed">
                  {item.description}
                </p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Team */}
      <section className="py-20 lg:py-28">
        <div className="max-w-[1400px] mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-14">
            <p className="font-oswald text-[#d35400] text-sm uppercase tracking-[0.4em] mb-3">
              The People Behind the Grill
            </p>
            <h2 className="font-playfair text-3xl sm:text-4xl font-bold text-white mb-4">
              Meet Our Team
            </h2>
            <div className="w-20 h-1 bg-[#d35400] mx-auto rounded-full" />
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
            {team.map((member) => (
              <div key={member.name} className="bg-[#2b2b2b] border border-[#444] rounded-lg p-6 text-center hover:border-[#d35400]/40 transition-colors">
                <div className="w-20 h-20 rounded-full bg-[#d35400]/20 flex items-center justify-center mx-auto mb-4">
                  <span className="font-oswald text-2xl font-bold text-[#d35400]">
                    {member.name.split(" ").map((n) => n[0]).join("")}
                  </span>
                </div>
                <h3 className="font-playfair text-xl font-bold text-white mb-1">{member.name}</h3>
                <p className="font-oswald text-sm text-[#d35400] uppercase tracking-wider mb-3">{member.role}</p>
                <p className="font-inter text-sm text-[#888] leading-relaxed">{member.bio}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      <Footer />
    </div>
  );
};

export default About;