the-tip-top-frontend/app/about/page.tsx

'use client';

import type { Metadata } from "next";
import Link from "next/link";
import Image from "next/image";
import { useState } from "react";
import { Leaf } from "lucide-react";

export default function AboutPage() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-[#f5f5f0] via-[#faf9f5] to-[#f5f5f0]">
       {/* Hero Section */}
      <section className="bg-gradient-to-r from-white to-[#faf9f5] py-12 border-b-2 border-[#e5e4dc]">
        <div className="container mx-auto px-4">
          <div className="max-w-4xl mx-auto text-center">
            <h1 className="text-4xl md:text-5xl font-bold text-[#5a5a4e] mb-4">
             À propos de Thé Tip Top à Nice
            </h1>
            <p className="text-lg text-[#8a8a7a]">
              Notre passion pour le thé d'exception et nos événements uniques à Nice
            </p>
          </div>
        </div>
      </section>
      {/* About Us our story*/}
       <section className="py-20 bg-white/50 backdrop-blur-sm">
      <div className="container mx-auto px-4">
        <div className="max-w-7xl mx-auto">
          <div className="grid md:grid-cols-2 gap-16 items-center">
            {/* Texte */}
            <div className="order-2 md:order-1 space-y-6">
              <h2 className="text-4xl md:text-5xl font-bold text-[#5a5a4e] leading-tight">
                Notre Histoire
                <span className="block text-3xl md:text-4xl text-[#d4a574] mt-2">
                  Thé Tip Top Nice
                </span>
              </h2>

              <div className="space-y-4 text-lg text-gray-700">
                <p className="leading-relaxed">
                 Depuis plus de 15 ans, Thé Tip Top perpétue l'art du thé haut de gamme avec passion et authenticité. Inspirée par l'amour des saveurs authentiques et des traditions séculaires, notre marque s'engage à vous faire découvrir les meilleurs thés du monde dans notre boutique à Nice. Chaque thé de notre collection est soigneusement choisi auprès de producteurs respectueux de l'environnement et du commerce équitable.
                </p>
                <p className="leading-relaxed">
                Nous privilégions les méthodes artisanales et biologiques pour préserver la richesse des arômes naturels de nos thés premium. Aujourd'hui, à l'occasion de l'ouverture de notre 10e boutique à Nice, nous célébrons cette aventure en organisant des événements uniques et des concours afin de partager notre passion du thé                </p>
              </div>
            </div>

            {/* Image */}
            <div className="order-1 md:order-2">
              <div className="relative rounded-2xl overflow-hidden shadow-2xl h-full min-h-[500px]">
                <Image
                  src="/images/lots/about-img.jpg"
                  alt="Thé Tip Top Nice - Notre boutique de thé"
                  fill
                  className="object-cover"
                  priority
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
   {/* notre engagement  Section */}
      <section className="py-16 bg-white/50 backdrop-blur-sm">
        <div className="container mx-auto px-4">
          <div className="max-w-5xl mx-auto">
            <div className="text-center mb-8">
              <h2 className="text-3xl font-bold text-[#5a5a4e] mb-2">Notre Engagement - Thé Tip Top </h2>
              <p className="text-[#8a8a7a]">Qualité, Durabilité et Respect au Cœur de Chaque Thé</p>
            </div>
            <div className="grid md:grid-cols-3 gap-4">
              <div className="bg-gradient-to-br from-[#d4a574]/10 to-[#c4956a]/10 rounded-lg p-6 text-center border border-[#d4a574]/20 hover:shadow-lg transition-shadow">
                <div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center shadow-lg">
                  <Leaf className="w-8 h-8 text-white" />
                </div>
                <div className="text-2xl font-bold text-[#5a5a4e] mb-2">Thé bio</div>
                <p className="text-sm text-[#8a8a7a]">
                  Tous nos thés sont certifiés biologiques et cultivés dans le respect de l'environnement.
                </p>
              </div>
              <div className="bg-gradient-to-br from-[#d4a574]/10 to-[#c4956a]/10 rounded-lg p-6 text-center border border-[#d4a574]/20 hover:shadow-lg transition-shadow">
                <div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-3xl shadow-lg">🌍</div>
                <div className="text-2xl font-bold text-[#5a5a4e] mb-2">Commerce équitable </div>
                <p className="text-sm text-[#8a8a7a]">
                  Nous soutenons les producteurs locaux en collaborant avec des partenaires engagés dans des pratiques durables et équitables
                </p>
              </div>
              <div className="bg-gradient-to-br from-[#d4a574]/10 to-[#c4956a]/10 rounded-lg p-6 text-center border border-[#d4a574]/20 hover:shadow-lg transition-shadow">
                <div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-[#d4a574] to-[#c4956a] rounded-full flex items-center justify-center text-3xl shadow-lg">📦</div>
                <div className="text-2xl font-bold text-[#5a5a4e] mb-2">Livraison rapide</div>
                <p className="text-sm text-[#8a8a7a]">
                  Expédition sous 24h pour que vous puissiez savourer rapidement vos thés
                </p>
              </div>
            </div>
            </div>
          </div>
      </section>
     {/* notre  philosophie  Section */}
      <section className="py-16 bg-white/50 backdrop-blur-sm">
        <div className="container mx-auto px-4">
          <div className="max-w-5xl mx-auto">
            <div className="text-center mb-8">
              <h2 className="text-2xl italic text-[#5a5a4e] mb-4">
                "Le thé, un art de vivre, une invitation à la découverte."
              </h2>
               <p className="text-[#8a8a7a]">Philosophie de Thé Tip Top</p>
            </div>
            </div>
          </div>
      </section>

      {/* Contact Section */}
      <section className="py-12 bg-gradient-to-br from-[#d4a574]/10 to-[#c4956a]/10">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center">
            <h3 className="text-2xl font-bold text-[#5a5a4e] mb-4">Contactez-nous</h3>
            <p className="text-[#8a8a7a] mb-4">
              Une question sur notre histoire ou nos thés ? N'hésitez pas à nous écrire !
            </p>
            <a
              href="mailto:thetiptopgr3@gmail.com"
              className="inline-flex items-center gap-2 text-[#d4a574] hover:text-[#c4956a] font-semibold transition-colors"
            >
              <span>✉️</span>
              thetiptopgr3@gmail.com
            </a>
          </div>
        </div>
      </section>
    </div>
  );
}