import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Subheading } from "@/components/subheading";
import { Footer } from "@/components/footer";
import Image from "next/image";

export default function AboutPage() {
  return (
    <main className="min-h-screen pt-32">
      <Container className="pb-24">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center mb-24">
          <div>
            <Heading className="text-5xl mb-8">Crafting Excellence Since 2010</Heading>
            <p className="text-lg text-neutral-600 leading-relaxed mb-6">
              SoleVibe began with a simple mission: to create footwear that doesn't compromise between style and comfort. We believe that the right pair of shoes can transform not just an outfit, but a person's confidence.
            </p>
            <p className="text-lg text-neutral-600 leading-relaxed">
              Every pair of SoleVibe shoes is crafted using premium materials sourced from sustainable tanneries and manufacturers. Our commitment to quality ensures that your shoes aren't just for today, but for years to come.
            </p>
          </div>
          <div className="relative aspect-square rounded-3xl overflow-hidden shadow-xl">
            <Image
              src="https://images.unsplash.com/photo-1664505504065-31f8937d2261?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wyOTY1MDl8MHwxfHNlYXJjaHw0fHxsdXh1cnklMjBzaG9lcyUyMHNuZWFrZXJzJTIwZm9ybWFsJTIwbWVuJTIwd29tZW4lMjBmYXNoaW9ufGVufDB8MHx8fDE3Njg1NDE4MTl8MA&ixlib=rb-4.1.0&q=80&w=1080"
              alt="Shoe Craftsmanship"
              fill
              className="object-cover"
            />
          </div>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-3 gap-12 text-center">
          <div className="p-8 bg-neutral-50 rounded-3xl">
            <h3 className="text-xl font-bold mb-4">Premium Quality</h3>
            <p className="text-neutral-600">We use only the finest leathers and fabrics to ensure durability and luxury.</p>
          </div>
          <div className="p-8 bg-neutral-50 rounded-3xl">
            <h3 className="text-xl font-bold mb-4">Modern Design</h3>
            <p className="text-neutral-600">Our designers stay ahead of trends to bring you contemporary, timeless styles.</p>
          </div>
          <div className="p-8 bg-neutral-50 rounded-3xl">
            <h3 className="text-xl font-bold mb-4">Ethical Sourcing</h3>
            <p className="text-neutral-600">We care about our planet and the people who make our products.</p>
          </div>
        </div>
      </Container>
      <Footer />
    </main>
  );
}