@extends('layouts.app')

@section('title', 'Notre Histoire | OraFresh Beauty')

@section('content')
    <div class="bg-gradient-to-b from-rose-50/50 to-white min-h-screen">
        <div class="max-w-4xl mx-auto px-6 py-16 md:py-24 text-center">
            <span class="text-rose-500 uppercase tracking-[0.4em] text-[10px] mb-6 block font-bold">Notre Héritage</span>
            <h1 class="font-brand text-4xl md:text-6xl mb-12 italic text-gray-900 leading-tight">La beauté à l'état pur</h1>
            
            <div class="space-y-8 text-gray-600 leading-loose font-light">
                <p class="text-lg">Fondée en 2024, OraFresh est née d'une volonté simple : révéler l'éclat naturel de chaque peau grâce à des soins d'exception.</p>
                
                <div class="relative rounded-3xl overflow-hidden shadow-2xl shadow-rose-900/10 my-12 group">
                    <div class="absolute inset-0 bg-rose-900/20 group-hover:bg-transparent transition-colors duration-700 z-10"></div>
                    <img src="https://images.unsplash.com/photo-1556228578-0d85b1a4d571?auto=format&fit=crop&q=80&w=1200"
                        class="w-full h-[400px] object-cover scale-100 group-hover:scale-105 transition-transform duration-1000">
                </div>
                
                <p>Tous nos soins sont élaborés en laboratoire avec une exigence absolue de qualité. Nos formules véganes intègrent des actifs naturels puissants, sourcés de manière éthique, pour offrir à votre peau tout ce dont elle a besoin, sans aucun compromis.</p>
                
                <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-16 pt-16 border-t border-rose-100">
                    <div>
                        <div class="bg-rose-50 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 text-rose-500">
                            <i data-lucide="leaf" class="w-6 h-6"></i>
                        </div>
                        <h3 class="font-bold text-gray-900 mb-2">Ingrédients Naturels</h3>
                        <p class="text-sm text-gray-500">99% d'origine naturelle</p>
                    </div>
                    <div>
                        <div class="bg-amber-50 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 text-amber-500">
                            <i data-lucide="shield-check" class="w-6 h-6"></i>
                        </div>
                        <h3 class="font-bold text-gray-900 mb-2">Testé Cliniquement</h3>
                        <p class="text-sm text-gray-500">Pour peaux sensibles</p>
                    </div>
                    <div>
                        <div class="bg-rose-50 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 text-rose-500">
                            <i data-lucide="recycle" class="w-6 h-6"></i>
                        </div>
                        <h3 class="font-bold text-gray-900 mb-2">Éco-responsabilité</h3>
                        <p class="text-sm text-gray-500">Emballages recyclables</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection