"use client";

import Header from "@/components/Header";
import Link from "next/link";

const EQUIPMENT = [
  { icon: "🪢", name: "Corde à sauter" },
  { icon: "🛡️", name: "Coquille" },
  { icon: "🦷", name: "Protège-dents" },
  { icon: "🥊", name: "Gants de boxe" },
  { icon: "🦵", name: "Protège-tibias" },
  { icon: "⛑️", name: "Casque (idéalement)" },
  { icon: "💧", name: "Bouteille d'eau" },
];

export default function MuayThaiPage() {
  return (
    <main className="min-h-screen">
      <Header />
      <div className="mx-auto max-w-3xl px-4 py-8">
        <div className="mb-8 text-center">
          <div className="mx-auto mb-4 flex h-24 w-24 items-center justify-center rounded-full bg-primary-600 text-4xl">
            🥊
          </div>
          <h1 className="text-3xl font-extrabold text-primary-300">
            Juanito Muay Thai
          </h1>
          <p className="mt-2 text-white/60">
            🇹🇭 L&apos;authentique Muay Thai dans une ambiance familiale
          </p>
        </div>

        <section className="card mb-6">
          <h2 className="mb-3 text-xl font-bold">À propos</h2>
          <p className="text-white/80">
            Venez pratiquer l&apos;authentique Muay Thai dans une ambiance
            familiale où chacun apprend à son rythme.{" "}
            <strong className="text-primary-300">Cours d&apos;essai gratuit.</strong>{" "}
            🥊🇹🇭
          </p>
        </section>

        <section className="card mb-6">
          <h2 className="mb-3 text-xl font-bold">📅 Horaires</h2>
          <p className="mb-2 text-sm text-white/60">
            Cours de Muay Thai à{" "}
            <strong className="text-white">BAZAINVILLE</strong> (salle
            &quot;l&apos;atelier&quot;)
          </p>
          <div className="mb-4 overflow-hidden rounded-xl border border-white/10">
            <div className="flex items-center justify-between bg-white/5 px-4 py-3">
              <span className="font-semibold">Mardi</span>
              <span className="tabular-nums text-primary-300">
                19h00 – 21h00
              </span>
            </div>
            <div className="flex items-center justify-between border-t border-white/10 px-4 py-3">
              <span className="font-semibold">Vendredi</span>
              <span className="tabular-nums text-primary-300">
                20h00 – 22h00
              </span>
            </div>
          </div>
          <p className="text-sm text-white/50">
            À partir du 12 septembre
          </p>
        </section>

        <section className="card mb-6">
          <h2 className="mb-3 text-xl font-bold">💰 Tarifs</h2>
          <ul className="space-y-2 text-white/80">
            <li>📝 Inscription annuelle : <strong className="text-white">150 €</strong></li>
            <li>✍️ Pré-inscription : <strong className="text-white">130 €</strong></li>
            <li className="pt-2 font-semibold text-primary-300">
              🎉 1er cours d&apos;essai GRATUIT
            </li>
          </ul>
          <p className="mt-4 rounded-xl border border-amber-500/30 bg-amber-500/10 px-4 py-3 text-sm text-amber-300">
            ⚠️ CERTIFICAT MÉDICAL OBLIGATOIRE
          </p>
        </section>

        <section className="card mb-6">
          <h2 className="mb-3 text-xl font-bold">🛡️ Équipement à prévoir</h2>
          <div className="grid grid-cols-2 gap-3">
            {EQUIPMENT.map((item) => (
              <div
                key={item.name}
                className="flex items-center gap-2 rounded-xl bg-white/5 px-3 py-2 text-sm"
              >
                <span>{item.icon}</span>
                <span className="text-white/80">{item.name}</span>
              </div>
            ))}
          </div>
        </section>

        <section className="card mb-6">
          <h2 className="mb-3 text-xl font-bold">📞 Contact</h2>
          <div className="space-y-2 text-white/80">
            <p>📱 <a href="tel:0761175627" className="text-primary-300">07 61 17 56 27</a></p>
            <p>✉️ <a href="mailto:juanitomuaythai@gmail.com" className="text-primary-300">juanitomuaythai@gmail.com</a></p>
          </div>
          <a
            href="https://www.facebook.com/profile.php?id=100057495646143&locale=fr_FR"
            target="_blank"
            rel="noopener noreferrer"
            className="btn-secondary mt-4 w-full"
          >
            📘 Suivre sur Facebook
          </a>
        </section>

        <div className="mt-8 flex flex-col gap-3">
          <Link href="/login" className="btn-primary w-full">
            Espace adhérent
          </Link>
          <Link href="/" className="btn-secondary w-full">
            ← Retour
          </Link>
        </div>
      </div>
    </main>
  );
}