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

export const metadata = {
  title: "À Propos - ManoonOils",
  description: "Découvrez ManoonOils - notre histoire, notre mission et notre engagement pour la beauté naturelle.",
};

export default function AboutPage() {
  return (
    <>
      <Header />
      <main className="min-h-screen bg-white">
        <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">Notre Histoire</span>
              <h1 className="text-4xl md:text-5xl font-medium tracking-tight">À Propos de ManoonOils</h1>
            </div>
          </div>
        </div>
        <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="Production d'huiles naturelles" className="w-full h-full object-cover" />
          <div className="absolute inset-0 bg-black/20" />
        </div>
        <section className="py-16 md:py-24">
          <div className="container">
            <div className="max-w-3xl mx-auto">
              <div className="mb-16">
                <p className="text-xl md:text-2xl text-[#1a1a1a] leading-relaxed mb-8">ManoonOils est né d'une passion pour la beauté naturelle et de la conviction que les meilleurs soins Cutanee viennent de la nature elle-même.</p>
                <p className="text-[#666666] leading-relaxed">Nous croyons en le pouvoir des ingrédients naturels. Chaque huile de notre collection est soigneusement sélectionnée pour ses propriétés et bienfaits uniques. Des huiles nourrissantes qui restaurent la vitalité des cheveux aux sérums qui rajeunissent la peau, nous élaborons chaque produit avec amour et attention aux détails.</p>
              </div>
              <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">Ingrédients Naturels</h3><p className="text-[#666666] text-sm leading-relaxed">Nous utilisons uniquement les meilleurs ingrédients naturels, sourcés de manière éthique et durable auprès de fournisseurs de confiance du monde entier.</p></div>
                <div className="p-6 bg-[#f8f9fa]"><h3 className="text-lg font-medium mb-3">Non Testé sur Animaux</h3><p className="text-[#666666] text-sm leading-relaxed">Nos produits ne sont jamais testés sur les animaux. Nous croyons en la beauté sans compromis.</p></div>
                <div className="p-6 bg-[#f8f9fa]"><h3 className="text-lg font-medium mb-3">Emballage Durable</h3><p className="text-[#666666] text-sm leading-relaxed">Nous utilisons des matériaux d'emballage écologiques et minimisons les déchets tout au long de notre processus de production.</p></div>
                <div className="p-6 bg-[#f8f9fa]"><h3 className="text-lg font-medium mb-3">Qualité Artisanale</h3><p className="text-[#666666] text-sm leading-relaxed">Chaque flacon est fabriqué à la main en petites quantités pour garantir la plus haute qualité et fraîcheur.</p></div>
              </div>
              <div className="text-center py-12 border-t border-b border-[#e5e5e5]"><span className="text-caption text-[#666666] mb-4 block">Notre Mission</span><blockquote className="text-2xl md:text-3xl font-medium tracking-tight">&ldquo;Fournir des produits naturels de qualité premium qui améliorent votre routine beauté quotidienne.&rdquo;</blockquote></div>
              <div className="mt-16"><h2 className="text-2xl font-medium mb-6">Fait Main avec Amour</h2><p className="text-[#666666] leading-relaxed mb-6">Chaque flacon de ManoonOils est fabriqué avec soin. Nous produisons nos produits en petites quantités pour garantir la plus haute qualité et fraîcheur. Lorsque vous utilisez ManoonOils, vous pouvez être sûr d'utiliser quelque chose fait avec un véritable soin et expertise.</p><p className="text-[#666666] leading-relaxed">Notre voyage a commencé par une simple question: comment créer des produits qui soignent vraiment les cheveux et la peau? Aujourd'hui, nous continuons à innover tout en restant fidèles à notre engagement envers des solutions beauté naturelles et efficaces.</p></div>
            </div>
          </div>
        </section>
      </main>
      <div className="pt-16"><Footer /></div>
    </>
  );
}