"use client";

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

const BENEFITS = [
  { icon: "🤸", title: "Mobilité", desc: "Améliorer votre flexibilité articulaire" },
  { icon: "🔄", title: "Récupération", desc: "Optimiser la récupération après l'effort" },
  { icon: "🧘", title: "Souplesse", desc: "Développer votre amplitude de mouvement" },
  { icon: "🛡️", title: "Prévention", desc: "Prévenir les blessures" },
];

export default function Yog4FightPage() {
  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-emerald-600 text-4xl">
            🧘
          </div>
          <h1 className="text-3xl font-extrabold text-emerald-300">
            Juanito Yog 4 Fight
          </h1>
          <p className="mt-2 text-white/60">
            Une approche plus technique du yoga
          </p>
        </div>

        <section className="card mb-6">
          <h2 className="mb-3 text-xl font-bold">À propos</h2>
          <p className="text-white/80">
            Une approche plus technique du yoga, pensée pour les
            sportifs et les combattants.
          </p>
          <p className="mt-3 rounded-xl border border-emerald-500/30 bg-emerald-500/10 px-4 py-3 text-center font-bold text-emerald-300">
            #mobilité égale performance
          </p>
        </section>

        <section className="card mb-6">
          <h2 className="mb-3 text-xl font-bold">💪 Les bénéfices</h2>
          <div className="grid grid-cols-2 gap-3">
            {BENEFITS.map((b) => (
              <div
                key={b.title}
                className="rounded-xl bg-white/5 p-4 text-center"
              >
                <span className="mb-1 block text-2xl">{b.icon}</span>
                <span className="block font-semibold text-emerald-300">
                  {b.title}
                </span>
                <span className="mt-1 block text-xs text-white/60">
                  {b.desc}
                </span>
              </div>
            ))}
          </div>
        </section>

        <section className="card mb-6">
          <h2 className="mb-3 text-xl font-bold">📅 Horaires</h2>
          <div className="mb-2 overflow-hidden rounded-xl border border-white/10">
            <div className="flex items-center justify-between px-4 py-3">
              <span className="font-semibold">Lundi</span>
              <span className="tabular-nums text-emerald-300">
                19h30 – 20h30
              </span>
            </div>
          </div>
          <p className="text-sm text-white/50">
            Dans la salle «&nbsp;L&apos;atelier&nbsp;» à Bazainville
          </p>
        </section>

        <section className="card mb-6">
          <h2 className="mb-3 text-xl font-bold">💰 Tarif</h2>
          <div className="mb-3 flex items-center justify-between rounded-xl bg-emerald-500/10 px-4 py-3">
            <span className="font-semibold">Séance</span>
            <span className="text-2xl font-bold text-emerald-300">9 € TTC</span>
          </div>
          <p className="text-sm text-white/60">
            💡 Tarif dégressif pour les plus assidus — renseignez-vous auprès
            de Juanito
          </p>
        </section>

        <section className="card mb-6">
          <h2 className="mb-3 text-xl font-bold">🎒 À ramener</h2>
          <div className="flex flex-wrap gap-3">
            <span className="rounded-xl bg-white/5 px-4 py-2 text-sm">
              🧘 Tapis de yoga
            </span>
            <span className="rounded-xl bg-white/5 px-4 py-2 text-sm">
              💧 Bouteille d&apos;eau
            </span>
          </div>
        </section>

        <section className="card mb-6">
          <h2 className="mb-3 text-xl font-bold">📞 Contact</h2>
          <p className="text-white/80">
            ✉️ <a href="mailto:contact@yogafight.fr" className="text-emerald-300">contact@yogafight.fr</a>
          </p>
          <a
            href="https://www.instagram.com/yog4fight/"
            target="_blank"
            rel="noopener noreferrer"
            className="btn-secondary mt-4 w-full"
          >
            📸 Suivre sur Instagram
          </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>
  );
}