"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">{t("about.p1")}</p>
        <p className="text-lg text-muted-foreground leading-relaxed mb-6">{t("about.p2")}</p>
        <p className="text-lg text-muted-foreground leading-relaxed">{t("about.p3")}</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">{t("about.value1_title")}</h3>
              <p className="text-sm text-muted-foreground">{t("about.value1_desc")}</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">{t("about.value2_title")}</h3>
              <p className="text-sm text-muted-foreground">{t("about.value2_desc")}</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">{t("about.value3_title")}</h3>
              <p className="text-sm text-muted-foreground">{t("about.value3_desc")}</p>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
};