import { Container } from "@/components/container";
import { Heading } from "@/components/heading";
import { Footer } from "@/components/footer";
import { BlurImage } from "@/components/blur-image";

export default function AboutPage() {
  return (
    <>
      <section className="py-12 border-b">
        <Container>
          <Heading className="mb-2">About FurniHome</Heading>
          <p className="text-neutral-600 dark:text-neutral-400">
            Your trusted partner in home furnishing
          </p>
        </Container>
      </section>

      <section className="py-20">
        <Container>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-20">
            <div className="relative h-[400px] rounded-2xl overflow-hidden">
              <BlurImage
                src="https://images.unsplash.com/photo-1556912173-46c336c7fd55?w=800&q=80"
                alt="Our showroom"
                fill
                className="object-cover"
              />
            </div>
            <div>
              <h2 className="text-3xl font-bold mb-4">Our Story</h2>
              <p className="text-neutral-600 dark:text-neutral-400 mb-4">
                Founded in 2020, FurniHome was born from a simple belief: everyone deserves beautiful, quality furniture that doesn't break the bank. We've grown from a small local shop to a trusted online destination for modern home furnishing.
              </p>
              <p className="text-neutral-600 dark:text-neutral-400">
                Our team of designers and craftspeople work tirelessly to bring you furniture that combines style, comfort, and durability. Every piece is carefully selected and tested to meet our high standards.
              </p>
            </div>
          </div>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 mb-20">
            <div className="text-center">
              <h3 className="text-4xl font-bold mb-2">500+</h3>
              <p className="text-neutral-600 dark:text-neutral-400">Products</p>
            </div>
            <div className="text-center">
              <h3 className="text-4xl font-bold mb-2">10,000+</h3>
              <p className="text-neutral-600 dark:text-neutral-400">Happy Customers</p>
            </div>
            <div className="text-center">
              <h3 className="text-4xl font-bold mb-2">50+</h3>
              <p className="text-neutral-600 dark:text-neutral-400">Countries Served</p>
            </div>
          </div>

          <div>
            <h2 className="text-3xl font-bold mb-8 text-center">Our Values</h2>
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
              <div>
                <h3 className="text-xl font-semibold mb-2">Quality First</h3>
                <p className="text-neutral-600 dark:text-neutral-400">
                  We never compromise on quality. Every piece is built to last and backed by our satisfaction guarantee.
                </p>
              </div>
              <div>
                <h3 className="text-xl font-semibold mb-2">Sustainable Practices</h3>
                <p className="text-neutral-600 dark:text-neutral-400">
                  We're committed to eco-friendly materials and responsible manufacturing processes.
                </p>
              </div>
              <div>
                <h3 className="text-xl font-semibold mb-2">Customer Focused</h3>
                <p className="text-neutral-600 dark:text-neutral-400">
                  Your satisfaction is our priority. We're here to help you create the home of your dreams.
                </p>
              </div>
              <div>
                <h3 className="text-xl font-semibold mb-2">Fair Pricing</h3>
                <p className="text-neutral-600 dark:text-neutral-400">
                  Premium quality shouldn't mean premium prices. We offer competitive pricing on all our products.
                </p>
              </div>
            </div>
          </div>
        </Container>
      </section>

      <Footer />
    </>
  );
}