"use client";

import { useLanguage } from "@/contexts/LanguageContext";
import { Heart, Award, Sparkles } from "lucide-react";

export default function About() {
  const { t } = useLanguage();

  return (
    <div className="min-h-screen">
      {/* Hero */}
      <section className="relative h-[50vh] flex items-center overflow-hidden">
        <div className="absolute inset-0">
          <img
            src="https://images.unsplash.com/photo-1492106087820-71f1a00d2b11?w=1600&h=600&fit=crop"
            alt="À propos"
            className="w-full h-full object-cover"
          />
          <div className="absolute inset-0 bg-foreground/40" />
        </div>
        <div className="relative container mx-auto px-4 lg:px-8 text-center">
          <h1 className="font-serif text-4xl lg:text-6xl text-background">{t("about.title")}</h1>
        </div>
      </section>

      {/* Story */}
      <section className="py-16 lg:py-24 container mx-auto px-4 lg:px-8 max-w-3xl">
        <p className="text-lg text-muted-foreground leading-relaxed mb-6">
          Passionnée par la beauté et le bien-être capillaire depuis toujours, j'ai créé BADO HAIR pour offrir à chaque femme la possibilité de sublimer sa chevelure avec des extensions de qualité exceptionnelle.
        </p>
        <p className="text-lg text-muted-foreground leading-relaxed mb-6">
          Chaque produit est sélectionné avec soin : des cheveux 100% naturels Remy, sourcés de manière éthique, traités avec les technologies les plus avancées pour garantir douceur, brillance et longévité.
        </p>
        <p className="text-lg text-muted-foreground leading-relaxed">
          Mon objectif est simple : vous aider à vous sentir belle et confiante, que ce soit pour un événement spécial ou au quotidien. Chaque cliente mérite une expérience personnalisée et des conseils adaptés à ses besoins.
        </p>
      </section>

      {/* Values */}
      <section className="py-16 bg-muted/50">
        <div className="container mx-auto px-4 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-4xl mx-auto">
            <div className="text-center">
              <Heart className="h-8 w-8 mx-auto mb-4 text-primary" />
              <h3 className="font-serif text-lg mb-2">Passion</h3>
              <p className="text-sm text-muted-foreground">Chaque produit est choisi avec amour et expertise pour garantir votre satisfaction.</p>
            </div>
            <div className="text-center">
              <Award className="h-8 w-8 mx-auto mb-4 text-primary" />
              <h3 className="font-serif text-lg mb-2">Qualité Premium</h3>
              <p className="text-sm text-muted-foreground">100% cheveux naturels Remy, sourcés éthiquement et contrôlés rigoureusement.</p>
            </div>
            <div className="text-center">
              <Sparkles className="h-8 w-8 mx-auto mb-4 text-primary" />
              <h3 className="font-serif text-lg mb-2">Expertise</h3>
              <p className="text-sm text-muted-foreground">Conseils personnalisés et pose professionnelle pour un résultat naturel.</p>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};