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-beige-100 via-beige-50 to-beige-100">
       {/* Hero Section */}
      <section className="bg-gradient-to-r from-white to-beige-50 py-12 border-b-2 border-beige-300">
        <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-primary-300 mb-4">
             À propos de Thé Tip Top à Nice
            </h1>
            <p className="text-lg text-gray-600">
              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-primary-300 leading-tight">
                Notre Histoire
                <span className="block text-3xl md:text-4xl text-primary-500 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-primary-300 mb-2">Notre Engagement - Thé Tip Top </h2>
              <p className="text-gray-600">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-primary-50 to-primary-100 rounded-lg p-6 text-center border border-primary-200 hover:shadow-lg transition-shadow">
                <div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-primary-500 to-primary-600 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-gray-800 mb-2">Thé bio</div>
                <p className="text-sm text-gray-600">
                  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-primary-50 to-primary-100 rounded-lg p-6 text-center border border-primary-200 hover:shadow-lg transition-shadow">
                <div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-primary-500 to-primary-600 rounded-full flex items-center justify-center text-3xl shadow-lg">🌍</div>
                <div className="text-2xl font-bold text-gray-800 mb-2">Commerce équitable </div>
                <p className="text-sm text-gray-600">
                  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-primary-50 to-primary-100 rounded-lg p-6 text-center border border-primary-200 hover:shadow-lg transition-shadow">
                <div className="w-16 h-16 mx-auto mb-4 bg-gradient-to-br from-primary-500 to-primary-600 rounded-full flex items-center justify-center text-3xl shadow-lg">📦</div>
                <div className="text-2xl font-bold text-gray-800 mb-2">Livraison rapide</div>
                <p className="text-sm text-gray-600">
                  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-gray-800 mb-4">
                "Le thé, un art de vivre, une invitation à la découverte."
              </h2>
               <p className="text-gray-600">Philosophie de Thé Tip Top</p>
            </div>
            </div>
          </div>
      </section>

      {/* Contact Section */}
      <section className="py-12 bg-gradient-to-br from-primary-50 to-primary-100">
        <div className="container mx-auto px-4">
          <div className="max-w-3xl mx-auto text-center">
            <h3 className="text-2xl font-bold text-gray-800 mb-4">Contactez-nous</h3>
            <p className="text-gray-600 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-primary-500 hover:text-primary-600 font-semibold transition-colors"
            >
              <span>✉️</span>
              thetiptopgr3@gmail.com
            </a>
          </div>
        </div>
      </section>
    </div>
  );
}