import Link from 'next/link';
import { WORKSHOPS, getSessionsTabUrl } from '@/lib/workshops';

export default function Home() {
  return (
    <>
      <main className="mx-auto max-w-7xl px-4 py-12">
        {/* Hero Section */}
        <section className="mb-16 text-center">
          <h1 className="mb-4 text-5xl font-bold text-foreground">
            Vos ateliers, <span className="text-primary">réinventés</span>
          </h1>
          <p className="mx-auto mb-8 max-w-2xl text-lg text-muted">
            Des outils interactifs et collaboratifs pour accompagner vos équipes. Analysez,
            comprenez et faites progresser vos collaborateurs avec des ateliers modernes.
          </p>
        </section>

        {/* Workshops Grid */}
        <section className="mb-16">
          <h2 className="mb-8 text-center text-2xl font-bold text-foreground">
            Choisissez votre atelier
          </h2>
          <div className="grid gap-8 md:grid-cols-2 lg:grid-cols-3 max-w-6xl mx-auto">
            {WORKSHOPS.map((w) => (
              <WorkshopCard
                key={w.id}
                href={getSessionsTabUrl(w.id)}
                icon={w.icon}
                title={w.cardLabel}
                tagline={w.home.tagline}
                description={w.home.description}
                features={w.home.features}
                accentColor={w.accentColor}
                newHref={w.newPath}
              />
            ))}
          </div>
        </section>

        {/* SWOT Deep Dive Section */}
        <section className="mb-16">
          <div className="flex items-center gap-3 mb-8">
            <span className="text-4xl">📊</span>
            <div>
              <h2 className="text-3xl font-bold text-foreground">L&apos;Analyse SWOT</h2>
              <p className="text-primary font-medium">Un outil stratégique incontournable</p>
            </div>
          </div>

          <div className="grid gap-8 lg:grid-cols-2">
            {/* Why */}
            <div className="rounded-xl border border-border bg-card p-6">
              <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
                <span className="text-2xl">🎯</span>
                Pourquoi faire un SWOT ?
              </h3>
              <p className="text-muted mb-4">
                L&apos;analyse SWOT est un outil puissant pour prendre du recul sur une situation
                professionnelle. Elle permet de dresser un portrait objectif et structuré, base
                indispensable pour définir des actions pertinentes.
              </p>
              <ul className="space-y-2 text-sm text-muted">
                <li className="flex items-start gap-2">
                  <span className="text-primary">•</span>
                  Identifier clairement les atouts sur lesquels capitaliser
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-primary">•</span>
                  Reconnaître les axes d&apos;amélioration prioritaires
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-primary">•</span>
                  Anticiper les risques et les transformer en opportunités
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-primary">•</span>
                  Créer un plan d&apos;action concret et partagé
                </li>
              </ul>
            </div>

            {/* What we look for */}
            <div className="rounded-xl border border-border bg-card p-6">
              <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
                <span className="text-2xl">🔍</span>
                Ce qu&apos;on cherche
              </h3>
              <div className="grid grid-cols-2 gap-4">
                <div className="rounded-lg bg-green-500/10 p-3 border border-green-500/20">
                  <p className="font-semibold text-green-600 text-sm mb-1">💪 Forces</p>
                  <p className="text-xs text-muted">
                    Compétences, talents, réussites, qualités distinctives
                  </p>
                </div>
                <div className="rounded-lg bg-orange-500/10 p-3 border border-orange-500/20">
                  <p className="font-semibold text-orange-600 text-sm mb-1">⚠️ Faiblesses</p>
                  <p className="text-xs text-muted">
                    Lacunes, difficultés récurrentes, axes de progression
                  </p>
                </div>
                <div className="rounded-lg bg-blue-500/10 p-3 border border-blue-500/20">
                  <p className="font-semibold text-blue-600 text-sm mb-1">🚀 Opportunités</p>
                  <p className="text-xs text-muted">
                    Projets, formations, évolutions, nouveaux défis
                  </p>
                </div>
                <div className="rounded-lg bg-red-500/10 p-3 border border-red-500/20">
                  <p className="font-semibold text-red-600 text-sm mb-1">🛡️ Menaces</p>
                  <p className="text-xs text-muted">Risques, obstacles, changements défavorables</p>
                </div>
              </div>
            </div>

            {/* How it works */}
            <div className="rounded-xl border border-border bg-card p-6 lg:col-span-2">
              <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
                <span className="text-2xl">⚙️</span>
                Comment ça marche ?
              </h3>
              <div className="grid md:grid-cols-4 gap-4">
                <StepCard
                  number={1}
                  title="Remplir la matrice"
                  description="Identifiez ensemble les éléments de chaque quadrant lors d'un échange constructif"
                />
                <StepCard
                  number={2}
                  title="Prioriser"
                  description="Classez les éléments par importance et impact pour concentrer les efforts"
                />
                <StepCard
                  number={3}
                  title="Croiser"
                  description="Reliez les forces aux opportunités, anticipez les menaces avec les atouts"
                />
                <StepCard
                  number={4}
                  title="Agir"
                  description="Définissez des actions concrètes avec des échéances et des responsables"
                />
              </div>
            </div>
          </div>
        </section>

        {/* Moving Motivators Deep Dive Section */}
        <section className="mb-16">
          <div className="flex items-center gap-3 mb-8">
            <span className="text-4xl">🎯</span>
            <div>
              <h2 className="text-3xl font-bold text-foreground">Moving Motivators</h2>
              <p className="text-purple-500 font-medium">Comprendre ce qui nous anime vraiment</p>
            </div>
          </div>

          <div className="grid gap-8 lg:grid-cols-2">
            {/* Why */}
            <div className="rounded-xl border border-border bg-card p-6">
              <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
                <span className="text-2xl">💡</span>
                Pourquoi explorer ses motivations ?
              </h3>
              <p className="text-muted mb-4">
                Créé par Jurgen Appelo (Management 3.0), cet exercice révèle les motivations
                intrinsèques qui nous animent. Comprendre ce qui nous motive permet de mieux
                s&apos;épanouir et d&apos;aligner nos missions avec nos aspirations profondes.
              </p>
              <ul className="space-y-2 text-sm text-muted">
                <li className="flex items-start gap-2">
                  <span className="text-purple-500">•</span>
                  Prendre conscience de ses moteurs profonds
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-purple-500">•</span>
                  Anticiper l&apos;impact d&apos;un changement sur sa motivation
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-purple-500">•</span>
                  Faciliter les discussions sur l&apos;engagement et le bien-être
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-purple-500">•</span>
                  Adapter les missions aux aspirations individuelles
                </li>
              </ul>
            </div>

            {/* The 10 motivators */}
            <div className="rounded-xl border border-border bg-card p-6">
              <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
                <span className="text-2xl">🃏</span>
                Les 10 motivations intrinsèques
              </h3>
              <div className="grid grid-cols-2 gap-2 text-sm">
                <MotivatorPill icon="👑" name="Statut" color="#8b5cf6" />
                <MotivatorPill icon="⚡" name="Pouvoir" color="#ef4444" />
                <MotivatorPill icon="📋" name="Ordre" color="#6b7280" />
                <MotivatorPill icon="🤝" name="Acceptation" color="#f59e0b" />
                <MotivatorPill icon="🏅" name="Honneur" color="#eab308" />
                <MotivatorPill icon="🎯" name="Maîtrise" color="#22c55e" />
                <MotivatorPill icon="👥" name="Relations" color="#ec4899" />
                <MotivatorPill icon="🦅" name="Liberté" color="#06b6d4" />
                <MotivatorPill icon="🔍" name="Curiosité" color="#3b82f6" />
                <MotivatorPill icon="🧭" name="But" color="#14b8a6" />
              </div>
            </div>

            {/* How it works */}
            <div className="rounded-xl border border-border bg-card p-6 lg:col-span-2">
              <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
                <span className="text-2xl">⚙️</span>
                Comment ça marche ?
              </h3>
              <div className="grid md:grid-cols-3 gap-4">
                <StepCard
                  number={1}
                  title="Classer par importance"
                  description="Ordonnez les 10 cartes de la moins importante (gauche) à la plus importante (droite) pour vous"
                />
                <StepCard
                  number={2}
                  title="Évaluer l'influence"
                  description="Pour chaque motivation, indiquez si votre situation actuelle l'impacte positivement ou négativement"
                />
                <StepCard
                  number={3}
                  title="Analyser et discuter"
                  description="Le récapitulatif révèle les motivations clés et les points de vigilance pour un échange constructif"
                />
              </div>
            </div>
          </div>
        </section>

        {/* Year Review Deep Dive Section */}
        <section className="mb-16">
          <div className="flex items-center gap-3 mb-8">
            <span className="text-4xl">📅</span>
            <div>
              <h2 className="text-3xl font-bold text-foreground">Year Review</h2>
              <p className="text-amber-500 font-medium">Faites le bilan de l&apos;année écoulée</p>
            </div>
          </div>

          <div className="grid gap-8 lg:grid-cols-2">
            {/* Why */}
            <div className="rounded-xl border border-border bg-card p-6">
              <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
                <span className="text-2xl">💭</span>
                Pourquoi faire un bilan annuel ?
              </h3>
              <p className="text-muted mb-4">
                Le Year Review est un exercice de réflexion structuré qui permet de prendre du recul
                sur l&apos;année écoulée. Il aide à identifier les patterns, célébrer les réussites,
                apprendre des défis et préparer l&apos;avenir avec clarté.
              </p>
              <ul className="space-y-2 text-sm text-muted">
                <li className="flex items-start gap-2">
                  <span className="text-amber-500">•</span>
                  Prendre conscience de ses accomplissements et les célébrer
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-amber-500">•</span>
                  Identifier les apprentissages et compétences développées
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-amber-500">•</span>
                  Comprendre les défis rencontrés pour mieux les anticiper
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-amber-500">•</span>
                  Définir des objectifs clairs et motivants pour l&apos;année à venir
                </li>
              </ul>
            </div>

            {/* The 5 categories */}
            <div className="rounded-xl border border-border bg-card p-6">
              <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
                <span className="text-2xl">📋</span>
                Les 5 catégories du bilan
              </h3>
              <div className="space-y-3">
                <CategoryPill icon="🏆" name="Réalisations" color="#22c55e" description="Ce que vous avez accompli" />
                <CategoryPill icon="⚔️" name="Défis" color="#ef4444" description="Les difficultés rencontrées" />
                <CategoryPill icon="📚" name="Apprentissages" color="#3b82f6" description="Ce que vous avez appris" />
                <CategoryPill icon="🎯" name="Objectifs" color="#8b5cf6" description="Vos ambitions pour l'année prochaine" />
                <CategoryPill icon="⭐" name="Moments" color="#f59e0b" description="Les moments forts et marquants" />
              </div>
            </div>

            {/* How it works */}
            <div className="rounded-xl border border-border bg-card p-6 lg:col-span-2">
              <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
                <span className="text-2xl">⚙️</span>
                Comment ça marche ?
              </h3>
              <div className="grid md:grid-cols-4 gap-4">
                <StepCard
                  number={1}
                  title="Réfléchir"
                  description="Prenez le temps de revenir sur l'année écoulée, consultez votre agenda, vos notes, vos projets"
                />
                <StepCard
                  number={2}
                  title="Catégoriser"
                  description="Organisez vos réflexions dans les 5 catégories : réalisations, défis, apprentissages, objectifs et moments"
                />
                <StepCard
                  number={3}
                  title="Prioriser"
                  description="Classez les éléments par importance et impact pour identifier ce qui compte vraiment"
                />
                <StepCard
                  number={4}
                  title="Planifier"
                  description="Utilisez ce bilan pour définir vos objectifs et actions pour l'année à venir"
                />
              </div>
            </div>
          </div>
        </section>

        {/* Weekly Check-in Deep Dive Section */}
        <section className="mb-16">
          <div className="flex items-center gap-3 mb-8">
            <span className="text-4xl">📝</span>
            <div>
              <h2 className="text-3xl font-bold text-foreground">Weekly Check-in</h2>
              <p className="text-green-500 font-medium">Le point hebdomadaire avec vos collaborateurs</p>
            </div>
          </div>

          <div className="grid gap-8 lg:grid-cols-2">
            {/* Why */}
            <div className="rounded-xl border border-border bg-card p-6">
              <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
                <span className="text-2xl">💡</span>
                Pourquoi faire un check-in hebdomadaire ?
              </h3>
              <p className="text-muted mb-4">
                Le Weekly Check-in est un rituel de management qui permet de maintenir un lien régulier
                avec vos collaborateurs. Il favorise la communication, l&apos;alignement et la détection
                précoce des problèmes ou opportunités.
              </p>
              <ul className="space-y-2 text-sm text-muted">
                <li className="flex items-start gap-2">
                  <span className="text-green-500">•</span>
                  Maintenir un suivi régulier et structuré avec chaque collaborateur
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-green-500">•</span>
                  Identifier rapidement les points positifs et les difficultés rencontrées
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-green-500">•</span>
                  Comprendre les priorités et enjeux du moment pour mieux accompagner
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-green-500">•</span>
                  Créer un espace d&apos;échange ouvert où les émotions peuvent être exprimées
                </li>
              </ul>
            </div>

            {/* The 4 categories */}
            <div className="rounded-xl border border-border bg-card p-6">
              <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
                <span className="text-2xl">📋</span>
                Les 4 catégories du check-in
              </h3>
              <div className="space-y-3">
                <CategoryPill icon="✅" name="Ce qui s'est bien passé" color="#22c55e" description="Les réussites et points positifs" />
                <CategoryPill icon="⚠️" name="Ce qui s'est mal passé" color="#ef4444" description="Les difficultés et points d'amélioration" />
                <CategoryPill icon="🎯" name="Enjeux du moment" color="#3b82f6" description="Sur quoi je me concentre actuellement" />
                <CategoryPill icon="🚀" name="Prochains enjeux" color="#8b5cf6" description="Ce sur quoi je vais me concentrer prochainement" />
              </div>
            </div>

            {/* How it works */}
            <div className="rounded-xl border border-border bg-card p-6 lg:col-span-2">
              <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
                <span className="text-2xl">⚙️</span>
                Comment ça marche ?
              </h3>
              <div className="grid md:grid-cols-4 gap-4">
                <StepCard
                  number={1}
                  title="Créer le check-in"
                  description="Créez un nouveau check-in pour la semaine avec votre collaborateur"
                />
                <StepCard
                  number={2}
                  title="Remplir les catégories"
                  description="Pour chaque catégorie, ajoutez les éléments pertinents de la semaine"
                />
                <StepCard
                  number={3}
                  title="Ajouter des émotions"
                  description="Associez une émotion à chaque item pour mieux exprimer votre ressenti"
                />
                <StepCard
                  number={4}
                  title="Partager et discuter"
                  description="Partagez le check-in avec votre collaborateur pour un échange constructif"
                />
              </div>
            </div>
          </div>
        </section>

        {/* Weather Deep Dive Section */}
        <section className="mb-16">
          <div className="flex items-center gap-3 mb-8">
            <span className="text-4xl">🌤️</span>
            <div>
              <h2 className="text-3xl font-bold text-foreground">Météo</h2>
              <p className="text-blue-500 font-medium">Votre état en un coup d&apos;œil</p>
            </div>
          </div>

          <div className="grid gap-8 lg:grid-cols-2">
            {/* Why */}
            <div className="rounded-xl border border-border bg-card p-6">
              <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
                <span className="text-2xl">💡</span>
                Pourquoi créer une météo personnelle ?
              </h3>
              <p className="text-muted mb-4">
                La météo est un outil simple et visuel pour exprimer rapidement votre état sur 4 axes clés.
                En la partageant avec votre équipe, vous créez de la transparence et facilitez la communication
                sur votre bien-être et votre performance.
              </p>
              <ul className="space-y-2 text-sm text-muted">
                <li className="flex items-start gap-2">
                  <span className="text-blue-500">•</span>
                  Exprimer rapidement votre état avec des emojis météo intuitifs
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-blue-500">•</span>
                  Partager votre météo avec votre équipe pour une meilleure visibilité
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-blue-500">•</span>
                  Créer un espace de dialogue ouvert sur votre performance et votre moral
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-blue-500">•</span>
                  Suivre l&apos;évolution de votre état dans le temps
                </li>
              </ul>
            </div>

            {/* The 4 axes */}
            <div className="rounded-xl border border-border bg-card p-6">
              <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
                <span className="text-2xl">📋</span>
                Les 4 axes de la météo
              </h3>
              <div className="space-y-3">
                <CategoryPill icon="☀️" name="Performance" color="#f59e0b" description="Votre performance personnelle et l'atteinte de vos objectifs" />
                <CategoryPill icon="😊" name="Moral" color="#22c55e" description="Votre moral actuel et votre ressenti" />
                <CategoryPill icon="🌊" name="Flux" color="#3b82f6" description="Votre flux de travail personnel et les blocages éventuels" />
                <CategoryPill icon="💎" name="Création de valeur" color="#8b5cf6" description="Votre création de valeur et votre apport" />
              </div>
            </div>

            {/* How it works */}
            <div className="rounded-xl border border-border bg-card p-6 lg:col-span-2">
              <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
                <span className="text-2xl">⚙️</span>
                Comment ça marche ?
              </h3>
              <div className="grid md:grid-cols-4 gap-4">
                <StepCard
                  number={1}
                  title="Créer votre météo"
                  description="Créez une nouvelle météo personnelle avec un titre et une date"
                />
                <StepCard
                  number={2}
                  title="Choisir vos emojis"
                  description="Pour chaque axe, sélectionnez un emoji météo qui reflète votre état"
                />
                <StepCard
                  number={3}
                  title="Ajouter des notes"
                  description="Complétez avec des notes globales pour détailler votre ressenti"
                />
                <StepCard
                  number={4}
                  title="Partager avec l'équipe"
                  description="Partagez votre météo avec votre équipe ou une équipe entière pour qu'ils puissent voir votre état"
                />
              </div>
            </div>
          </div>
        </section>

        {/* OKRs Deep Dive Section */}
        <section className="mb-16">
          <div className="flex items-center gap-3 mb-8">
            <span className="text-4xl">🎯</span>
            <div>
              <h2 className="text-3xl font-bold text-foreground">OKRs & Équipes</h2>
              <p className="text-purple-500 font-medium">Définissez et suivez les objectifs de votre équipe</p>
            </div>
          </div>

          <div className="grid gap-8 lg:grid-cols-2">
            {/* Why */}
            <div className="rounded-xl border border-border bg-card p-6">
              <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
                <span className="text-2xl">💡</span>
                Pourquoi utiliser les OKRs ?
              </h3>
              <p className="text-muted mb-4">
                Les OKRs (Objectives and Key Results) sont un cadre de gestion d&apos;objectifs qui permet
                d&apos;aligner les efforts de l&apos;équipe autour d&apos;objectifs communs et mesurables.
                Cette méthode favorise la transparence, la responsabilisation et la performance collective.
              </p>
              <ul className="space-y-2 text-sm text-muted">
                <li className="flex items-start gap-2">
                  <span className="text-purple-500">•</span>
                  Aligner les objectifs individuels avec ceux de l&apos;équipe
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-purple-500">•</span>
                  Suivre la progression en temps réel avec des métriques claires
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-purple-500">•</span>
                  Favoriser la transparence et la visibilité des objectifs de chacun
                </li>
                <li className="flex items-start gap-2">
                  <span className="text-purple-500">•</span>
                  Créer une culture de responsabilisation et de résultats
                </li>
              </ul>
            </div>

            {/* Features */}
            <div className="rounded-xl border border-border bg-card p-6">
              <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
                <span className="text-2xl">✨</span>
                Fonctionnalités principales
              </h3>
              <div className="space-y-3">
                <FeaturePill 
                  icon="👥" 
                  name="Gestion d'équipes" 
                  color="#8b5cf6" 
                  description="Créez des équipes et gérez les membres avec des rôles admin/membre" 
                />
                <FeaturePill 
                  icon="🎯" 
                  name="OKRs par période" 
                  color="#3b82f6" 
                  description="Définissez des OKRs pour des trimestres ou périodes personnalisées" 
                />
                <FeaturePill 
                  icon="📊" 
                  name="Key Results mesurables" 
                  color="#10b981" 
                  description="Suivez la progression de chaque Key Result avec des valeurs et pourcentages" 
                />
                <FeaturePill 
                  icon="👁️" 
                  name="Visibilité transparente" 
                  color="#f59e0b" 
                  description="Tous les membres de l'équipe peuvent voir les OKRs de chacun" 
                />
              </div>
            </div>

            {/* How it works */}
            <div className="rounded-xl border border-border bg-card p-6 lg:col-span-2">
              <h3 className="text-lg font-semibold text-foreground mb-4 flex items-center gap-2">
                <span className="text-2xl">⚙️</span>
                Comment ça marche ?
              </h3>
              <div className="grid md:grid-cols-4 gap-4">
                <StepCard
                  number={1}
                  title="Créer une équipe"
                  description="Formez votre équipe et ajoutez les membres avec leurs rôles (admin ou membre)"
                />
                <StepCard
                  number={2}
                  title="Définir les OKRs"
                  description="Pour chaque membre, créez un Objectif avec plusieurs Key Results mesurables"
                />
                <StepCard
                  number={3}
                  title="Suivre la progression"
                  description="Mettez à jour régulièrement les valeurs des Key Results pour suivre l'avancement"
                />
                <StepCard
                  number={4}
                  title="Visualiser et analyser"
                  description="Consultez les OKRs par membre ou en grille, avec les progressions et statuts colorés"
                />
              </div>
            </div>
          </div>
        </section>

        {/* Benefits Section */}
        <section className="rounded-2xl border border-border bg-card p-8">
          <h2 className="mb-8 text-center text-2xl font-bold text-foreground">
            Pourquoi nos ateliers ?
          </h2>
          <div className="grid gap-6 md:grid-cols-3">
            <BenefitCard
              icon="🤝"
              title="Collaboratif"
              description="Travaillez ensemble en temps réel avec vos collaborateurs et partagez facilement vos sessions."
            />
            <BenefitCard
              icon="💾"
              title="Historique sauvegardé"
              description="Retrouvez vos ateliers passés, suivez l'évolution et mesurez les progrès dans le temps."
            />
            <BenefitCard
              icon="✨"
              title="Interface intuitive"
              description="Des outils modernes avec drag & drop, pensés pour une utilisation simple et agréable."
            />
          </div>
        </section>
      </main>

      {/* Footer */}
      <footer className="border-t border-border py-6 text-center text-sm text-muted">
        Workshop Manager — Vos ateliers en ligne
      </footer>
    </>
  );
}

function WorkshopCard({
  href,
  icon,
  title,
  tagline,
  description,
  features,
  accentColor,
  newHref,
}: {
  href: string;
  icon: string;
  title: string;
  tagline: string;
  description: string;
  features: string[];
  accentColor: string;
  newHref: string;
}) {
  return (
    <div className="group relative overflow-hidden rounded-2xl border-2 border-border bg-card p-8 transition-all hover:border-primary/50 hover:shadow-xl">
      {/* Accent gradient */}
      <div
        className="absolute inset-x-0 top-0 h-1 opacity-80"
        style={{ background: `linear-gradient(to right, ${accentColor}, ${accentColor}80)` }}
      />

      {/* Icon & Title */}
      <div className="mb-4 flex items-center gap-3">
        <span className="text-4xl">{icon}</span>
        <div>
          <h3 className="text-xl font-bold text-foreground">{title}</h3>
          <p className="text-sm font-medium" style={{ color: accentColor }}>
            {tagline}
          </p>
        </div>
      </div>

      {/* Description */}
      <p className="mb-6 text-muted">{description}</p>

      {/* Features */}
      <ul className="mb-6 space-y-2">
        {features.map((feature, i) => (
          <li key={i} className="flex items-start gap-2 text-sm text-muted">
            <svg
              className="mt-0.5 h-4 w-4 shrink-0"
              style={{ color: accentColor }}
              fill="none"
              viewBox="0 0 24 24"
              stroke="currentColor"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M5 13l4 4L19 7"
              />
            </svg>
            {feature}
          </li>
        ))}
      </ul>

      {/* Actions */}
      <div className="flex gap-3">
        <Link
          href={newHref}
          className="flex-1 rounded-lg px-4 py-2.5 text-center font-medium text-white transition-colors"
          style={{ backgroundColor: accentColor }}
        >
          Démarrer
        </Link>
        <Link
          href={href}
          className="rounded-lg border border-border px-4 py-2.5 font-medium text-foreground transition-colors hover:bg-card-hover"
        >
          Mes sessions
        </Link>
      </div>
    </div>
  );
}

function BenefitCard({
  icon,
  title,
  description,
}: {
  icon: string;
  title: string;
  description: string;
}) {
  return (
    <div className="text-center">
      <div className="mb-3 text-3xl">{icon}</div>
      <h3 className="mb-2 font-semibold text-foreground">{title}</h3>
      <p className="text-sm text-muted">{description}</p>
    </div>
  );
}

function StepCard({
  number,
  title,
  description,
}: {
  number: number;
  title: string;
  description: string;
}) {
  return (
    <div className="relative">
      <div className="flex items-center gap-3 mb-2">
        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary text-primary-foreground font-bold text-sm">
          {number}
        </div>
        <h4 className="font-semibold text-foreground">{title}</h4>
      </div>
      <p className="text-sm text-muted pl-11">{description}</p>
    </div>
  );
}

function MotivatorPill({ icon, name, color }: { icon: string; name: string; color: string }) {
  return (
    <div
      className="flex items-center gap-2 px-3 py-1.5 rounded-full"
      style={{ backgroundColor: `${color}15`, border: `1px solid ${color}30` }}
    >
      <span>{icon}</span>
      <span className="font-medium" style={{ color }}>
        {name}
      </span>
    </div>
  );
}

function CategoryPill({
  icon,
  name,
  color,
  description,
}: {
  icon: string;
  name: string;
  color: string;
  description: string;
}) {
  return (
    <div
      className="flex items-start gap-3 px-4 py-3 rounded-lg"
      style={{ backgroundColor: `${color}10`, border: `1px solid ${color}30` }}
    >
      <span className="text-xl">{icon}</span>
      <div className="flex-1">
        <p className="font-semibold text-sm mb-0.5" style={{ color }}>
          {name}
        </p>
        <p className="text-xs text-muted">{description}</p>
      </div>
    </div>
  );
}

function FeaturePill({
  icon,
  name,
  color,
  description,
}: {
  icon: string;
  name: string;
  color: string;
  description: string;
}) {
  return (
    <div
      className="flex items-start gap-3 px-4 py-3 rounded-lg"
      style={{ backgroundColor: `${color}10`, border: `1px solid ${color}30` }}
    >
      <span className="text-xl">{icon}</span>
      <div className="flex-1">
        <p className="font-semibold text-sm mb-0.5" style={{ color }}>
          {name}
        </p>
        <p className="text-xs text-muted">{description}</p>
      </div>
    </div>
  );
}