import type { Metadata } from "next";
import Link from "next/link";
import Image from "next/image";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
import Button from "@/components/Button";
import { ROUTES } from "@/utils/constants";

export const metadata: Metadata = {
  title: "À propos - Thé Tip Top",
  description: "Découvrez l'histoire et les engagements de notre maison de thé niçoise",
};

export default function AboutPage() {
  return (
    <div className="py-12">
      {/* Hero Section */}
      <section className="text-center mb-16">
        <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
          À propos de Thé Tip Top Nice
        </h1>
        <p className="text-lg md:text-xl text-gray-600 max-w-3xl mx-auto mb-8">
          Depuis Nice, nous célébrons les thés d'exception et les moments à partager.
          Découvrez notre histoire et ce qui guide notre maison au quotidien.
        </p>
        <Link href="#histoire">
          <Button size="lg" className="px-8">
            Explorer notre univers
          </Button>
        </Link>
      </section>

      {/* Histoire Section */}
      <section id="histoire" className="mb-16">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          <div>
            <h2 className="text-3xl font-bold text-gray-900 mb-6">
              Notre histoire
            </h2>
            <p className="text-lg text-gray-700 mb-4 font-semibold">
              Quinze ans de passion infusée.
            </p>
            <p className="text-gray-600 leading-relaxed mb-4">
              Née d'une envie simple — faire (re)découvrir le vrai goût du thé — notre maison
              sélectionne des feuilles remarquables auprès de producteurs engagés. Au fil des années,
              nous avons grandi sans rien céder à nos exigences : traçabilité, fraîcheur, respect des savoir-faire.
            </p>
            <p className="text-gray-600 leading-relaxed">
              Aujourd'hui, notre boutique niçoise est le point de rencontre entre curieux et connaisseurs :
              dégustations, conseils personnalisés et une carte qui évolue au rythme des récoltes.
            </p>
          </div>

          {/* Image Placeholder */}
          <div className="relative">
            <div className="bg-gradient-to-br from-primary-100 to-green-100 rounded-2xl overflow-hidden aspect-square flex items-center justify-center">
              <div className="text-center p-8">
                <div className="mb-4 flex justify-center">
                  <Image
                    src="/logos/logo.svg"
                    alt="Logo Thé Tip Top"
                    width={200}
                    height={200}
                    className="object-contain"
                  />
                </div>
                <p className="text-gray-600 font-medium">Notre boutique à Nice</p>
                <p className="text-sm text-gray-500 mt-2">Image à venir</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Engagements Section */}
      <section className="mb-16">
        <h2 className="text-3xl font-bold text-center text-gray-900 mb-12">
          Nos engagements
        </h2>
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
          {/* Engagement 1 */}
          <Card className="text-center hover:shadow-lg transition-shadow">
            <CardContent className="pt-8">
              <div className="text-5xl mb-4">🌱</div>
              <h3 className="text-xl font-bold mb-3 text-gray-900">
                Agriculture responsable
              </h3>
              <p className="text-gray-600 text-sm">
                Des jardins certifiés et des pratiques respectueuses de la biodiversité,
                pour des thés propres et expressifs.
              </p>
            </CardContent>
          </Card>

          {/* Engagement 2 */}
          <Card className="text-center hover:shadow-lg transition-shadow">
            <CardContent className="pt-8">
              <div className="text-5xl mb-4">🤝</div>
              <h3 className="text-xl font-bold mb-3 text-gray-900">
                Filière équitable
              </h3>
              <p className="text-gray-600 text-sm">
                Des partenariats durables et rémunérateurs pour les fermes qui nous
                confient leurs récoltes.
              </p>
            </CardContent>
          </Card>

          {/* Engagement 3 */}
          <Card className="text-center hover:shadow-lg transition-shadow">
            <CardContent className="pt-8">
              <div className="text-5xl mb-4">❄️</div>
              <h3 className="text-xl font-bold mb-3 text-gray-900">
                Fraîcheur & préparation
              </h3>
              <p className="text-gray-600 text-sm">
                Conditionnement soigné et rotations courtes pour préserver les arômes.
              </p>
            </CardContent>
          </Card>

          {/* Engagement 4 */}
          <Card className="text-center hover:shadow-lg transition-shadow">
            <CardContent className="pt-8">
              <div className="text-5xl mb-4">📚</div>
              <h3 className="text-xl font-bold mb-3 text-gray-900">
                Conseil & transmission
              </h3>
              <p className="text-gray-600 text-sm">
                Ateliers, initiations et fiches pratiques : nous aimons partager nos
                méthodes d'infusion.
              </p>
            </CardContent>
          </Card>
        </div>
      </section>

      {/* CTA Section */}
      <section className="mb-16">
        <Card className="max-w-4xl mx-auto bg-gradient-to-r from-primary-600 to-primary-700 text-white">
          <CardContent className="py-12 text-center">
            <h2 className="text-3xl font-bold mb-4 text-white">
              Participez à notre grand jeu autour du thé !
            </h2>
            <p className="text-lg mb-8 text-white">
              À gagner : sélections premium, accessoires de dégustation et surprises maison.
              Chaque achat vous donne une chance supplémentaire.
            </p>
            <Link href={ROUTES.GAME}>
              <Button variant="outline" size="lg" className="bg-white text-primary-600 hover:bg-primary-50 border-white">
                Découvrir le jeu
              </Button>
            </Link>
          </CardContent>
        </Card>
      </section>

      {/* Quote Section */}
      <section className="mb-16">
        <div className="max-w-3xl mx-auto text-center">
          <blockquote className="text-2xl md:text-3xl font-light text-gray-700 italic mb-4">
            « Un thé bien infusé, c'est une minute pour soi et un souvenir à partager. »
          </blockquote>
          <p className="text-gray-600 font-medium">— L'équipe Thé Tip Top</p>
        </div>
      </section>

      {/* Info Section */}
      <section className="bg-gradient-to-r from-primary-50 to-green-50 py-12 -mx-4 px-4 sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
        <div className="max-w-5xl mx-auto">
          <div className="grid md:grid-cols-3 gap-8 text-center">
            {/* Localisation */}
            <Card>
              <CardHeader>
                <div className="text-4xl mb-2">📍</div>
                <CardTitle className="text-xl">Où nous trouver</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600">
                  18 Avenue Thiers<br />
                  06000 Nice, France
                </p>
                <p className="text-sm text-gray-500 mt-2">
                  Au cœur de Nice, proches des transports.
                </p>
              </CardContent>
            </Card>

            {/* Horaires */}
            <Card>
              <CardHeader>
                <div className="text-4xl mb-2">🕐</div>
                <CardTitle className="text-xl">Horaires</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600">
                  Du mardi au samedi<br />
                  10h – 19h
                </p>
                <p className="text-sm text-gray-500 mt-2">
                  Fermé dimanche et lundi
                </p>
              </CardContent>
            </Card>

            {/* Contact */}
            <Card>
              <CardHeader>
                <div className="text-4xl mb-2">✉️</div>
                <CardTitle className="text-xl">Contact</CardTitle>
              </CardHeader>
              <CardContent>
                <p className="text-gray-600 mb-2">
                  <a href="mailto:contact@thetiptop.fr" className="hover:text-primary-600 transition-colors">
                    contact@thetiptop.fr
                  </a>
                </p>
                <p className="text-gray-600 mb-2">
                  <a href="tel:+33123456789" className="hover:text-primary-600 transition-colors">
                    01 23 45 67 89
                  </a>
                </p>
                <p className="text-sm text-gray-500 mt-2">
                  Conseils personnalisés par e-mail ou en boutique.
                </p>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>
    </div>
  );
}