import Header from "@/components/layout/Header";
import Footer from "@/components/layout/Footer";

export const metadata = {
  title: "About - ManoonOils",
  description: "Learn about ManoonOils - our story, mission, and commitment to natural beauty.",
};

export default function AboutPage() {
  return (
    <>
      <Header />
      <main className="min-h-screen bg-white">
        {/* Page Header */}
        <div className="pt-[104px]">
        <div className="container py-12 md:py-16">
          <div className="max-w-2xl mx-auto text-center">
            <span className="text-xs uppercase tracking-[0.2em] text-[#666666] mb-3 block">Our Story</span>
            <h1 className="text-4xl md:text-5xl font-medium tracking-tight">
              About ManoonOils
            </h1>
          </div>
        </div>
      </div>

      {/* Hero Image */}
      <div className="relative h-[400px] md:h-[500px] overflow-hidden">
        <img
          src="https://images.unsplash.com/photo-1608571423902-eed4a5ad8108?q=80&w=2000&auto=format&fit=crop"
          alt="Natural oils production"
          className="w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-black/20" />
      </div>

      {/* Content */}
      <section className="py-16 md:py-24">
        <div className="container">
          <div className="max-w-3xl mx-auto">
            {/* Introduction */}
            <div className="mb-16">
              <p className="text-xl md:text-2xl text-[#1a1a1a] leading-relaxed mb-8">
                ManoonOils was born from a passion for natural beauty and the belief 
                that the best skincare comes from nature itself.
              </p>
              <p className="text-[#666666] leading-relaxed">
                We believe in the power of natural ingredients. Every oil in our 
                collection is carefully selected for its unique properties and 
                benefits. From nourishing oils that restore hair vitality to serums 
                that rejuvenate skin, we craft each product with love and attention 
                to detail.
              </p>
            </div>

            {/* Values Grid */}
            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-12 mb-16">
              <div className="p-6 bg-[#f8f9fa]">
                <h3 className="text-lg font-medium mb-3">Natural Ingredients</h3>
                <p className="text-[#666666] text-sm leading-relaxed">
                  We use only the finest natural ingredients, sourced ethically and sustainably 
                  from trusted suppliers around the world.
                </p>
              </div>
              <div className="p-6 bg-[#f8f9fa]">
                <h3 className="text-lg font-medium mb-3">Cruelty-Free</h3>
                <p className="text-[#666666] text-sm leading-relaxed">
                  Our products are never tested on animals. We believe in beauty 
                  without compromise.
                </p>
              </div>
              <div className="p-6 bg-[#f8f9fa]">
                <h3 className="text-lg font-medium mb-3">Sustainable Packaging</h3>
                <p className="text-[#666666] text-sm leading-relaxed">
                  We use eco-friendly packaging materials and minimize waste 
                  throughout our production process.
                </p>
              </div>
              <div className="p-6 bg-[#f8f9fa]">
                <h3 className="text-lg font-medium mb-3">Handcrafted Quality</h3>
                <p className="text-[#666666] text-sm leading-relaxed">
                  Every bottle is handcrafted in small batches to ensure 
                  the highest quality and freshness.
                </p>
              </div>
            </div>

            {/* Mission */}
            <div className="text-center py-12 border-t border-b border-[#e5e5e5]">
              <span className="text-caption text-[#666666] mb-4 block">Our Mission</span>
              <blockquote className="text-2xl md:text-3xl font-medium tracking-tight">
                &ldquo;To provide premium quality, natural products that enhance 
                your daily beauty routine.&rdquo;
              </blockquote>
            </div>

            {/* Story Section */}
            <div className="mt-16">
              <h2 className="text-2xl font-medium mb-6">Handmade with Love</h2>
              <p className="text-[#666666] leading-relaxed mb-6">
                Every bottle of ManoonOils is handcrafted with care. We small-batch 
                produce our products to ensure the highest quality and freshness. 
                When you use ManoonOils, you can feel confident that you&apos;re using 
                something made with genuine care and expertise.
              </p>
              <p className="text-[#666666] leading-relaxed">
                Our journey began with a simple question: how can we create products 
                that truly nurture both hair and skin? Today, we continue to innovate 
                while staying true to our commitment to natural, effective beauty solutions.
              </p>
            </div>
          </div>
        </div>
      </section>
      
      </main>
      <div className="pt-16">
        <Footer />
      </div>
    </>
  );
}