import React, { useState } from 'react';
import { ChevronLeft, Heart, Utensils, Dumbbell, Lightbulb, Users } from 'lucide-react';

const CycleFemininWebsite = () => {
  const [currentPhase, setCurrentPhase] = useState(null);
  const [activeTab, setActiveTab] = useState('information');

  // Phase data with comprehensive information
  const phases = {
    menstruelle: {
      name: 'Phase Menstruelle',
      duration: 'Jours 1-5',
      icon: 'https://assets.sitebrew.ai/generated-1754477492785.webp',
      color: '#6366F1',
      bgColor: '#F8FAFC',
      information: {
        title: 'Phase Menstruelle',
        description: 'Durant cette phase, votre corps évacue la muqueuse utérine qui s\'était épaissie le mois précédent. C\'est le moment de prendre soin de vous avec douceur.',
        symptoms: ['Crampes menstruelles', 'Fatigue', 'Sensibilité émotionnelle', 'Maux de tête possibles'],
        hormones: 'Les niveaux d\'œstrogène et de progestérone sont au plus bas, ce qui peut affecter votre énergie et votre humeur.'
      },
      exercices: [
        { name: 'Yoga doux', description: 'Postures relaxantes pour soulager les crampes' },
        { name: 'Marche légère', description: 'Activité douce pour maintenir la circulation' },
        { name: 'Étirements', description: 'Mouvements pour détendre les muscles tendus' },
        { name: 'Méditation', description: 'Pratiques de relaxation et de pleine conscience' }
      ],
      recettes: [
        { 
          name: 'Tisane au gingembre', 
          ingredients: 'Gingembre frais, miel, citron', 
          benefices: 'Le gingembre possède des propriétés anti-inflammatoires naturelles qui aident à réduire les crampes menstruelles. Le miel apporte du réconfort et des glucides facilement assimilables pour combattre la fatigue.' 
        },
        { 
          name: 'Chocolat chaud aux épices', 
          ingredients: 'Cacao, cannelle, cardamome', 
          benefices: 'Le cacao est riche en magnésium, un minéral essentiel qui aide à détendre les muscles et réduire les crampes. Les épices réchauffantes apportent du réconfort émotionnel.' 
        },
        { 
          name: 'Soupe de lentilles', 
          ingredients: 'Lentilles, légumes, curcuma', 
          benefices: 'Les lentilles sont une excellente source de fer végétal pour compenser les pertes sanguines. Le curcuma a des propriétés anti-inflammatoires qui peuvent soulager les douleurs.' 
        }
      ],
      conseils: [
        'Utilisez une bouillotte pour soulager les crampes',
        'Hydratez-vous bien avec des tisanes chaudes',
        'Privilégiez des aliments riches en fer',
        'Accordez-vous du repos supplémentaire',
        'Pratiquez l\'auto-compassion'
      ],
      conjoint: {
        comprendre: 'Votre partenaire traverse une période où son corps travaille intensément. Les hormones sont au plus bas, ce qui peut affecter son énergie et ses émotions.',
        attendre: ['Fatigue plus importante', 'Besoin de réconfort', 'Sensibilité émotionnelle accrue', 'Possible irritabilité', 'Douleurs physiques'],
        besoins: ['Patience et compréhension', 'Aide avec les tâches quotidiennes', 'Gestes tendres sans attentes', 'Respect de son besoin de repos', 'Préparation de boissons chaudes'],
        eviter: ['Minimiser ses douleurs', 'Faire des commentaires sur son humeur', 'Insister pour des activités énergiques', 'Prendre son irritabilité personnellement']
      }
    },
    folliculaire: {
      name: 'Phase Folliculaire',
      duration: 'Jours 1-13',
      icon: 'https://assets.sitebrew.ai/generated-1754477493870.webp',
      color: '#10B981',
      bgColor: '#F0FDF4',
      information: {
        title: 'Phase Folliculaire',
        description: 'Cette phase marque un nouveau début. Votre énergie remonte progressivement et votre corps se prépare à l\'ovulation.',
        symptoms: ['Regain d\'énergie', 'Humeur positive', 'Créativité accrue', 'Motivation croissante'],
        hormones: 'L\'œstrogène augmente progressivement, stimulant votre énergie et votre bien-être général.'
      },
      exercices: [
        { name: 'Cardio modéré', description: 'Course légère ou vélo pour profiter de l\'énergie croissante' },
        { name: 'Pilates', description: 'Renforcement du core et amélioration de la posture' },
        { name: 'Danse', description: 'Expression créative et exercice cardiovasculaire' },
        { name: 'Randonnée', description: 'Connexion avec la nature et exercice complet' }
      ],
      recettes: [
        { 
          name: 'Salade de quinoa aux légumes verts', 
          ingredients: 'Quinoa, épinards, avocat, graines', 
          benefices: 'Le quinoa fournit des protéines complètes nécessaires à la reconstruction cellulaire. Les légumes verts apportent des folates essentiels pour la production d\'énergie et la synthèse des neurotransmetteurs du bien-être.' 
        },
        { 
          name: 'Smoothie vert énergisant', 
          ingredients: 'Épinards, banane, spiruline, lait d\'amande', 
          benefices: 'La spiruline est un super-aliment riche en fer et en vitamines B qui soutiennent la production d\'énergie. La banane apporte du potassium pour l\'équilibre électrolytique et la fonction musculaire.' 
        },
        { 
          name: 'Saumon grillé aux brocolis', 
          ingredients: 'Saumon, brocolis, huile d\'olive', 
          benefices: 'Le saumon est riche en oméga-3 qui favorisent la santé hormonale et cérébrale. Les brocolis contiennent des composés qui aident le foie à métaboliser les hormones efficacement.' 
        }
      ],
      conseils: [
        'Profitez de votre énergie croissante pour de nouveaux projets',
        'C\'est le moment idéal pour planifier et organiser',
        'Augmentez progressivement l\'intensité de vos exercices',
        'Explorez de nouvelles activités créatives',
        'Socialisez et connectez-vous avec les autres'
      ],
      conjoint: {
        comprendre: 'Votre partenaire sort de la phase menstruelle et retrouve progressivement son énergie. C\'est une période de renouveau et d\'optimisme.',
        attendre: ['Regain d\'énergie notable', 'Humeur plus positive', 'Envie de socialiser', 'Motivation pour de nouveaux projets', 'Créativité accrue'],
        besoins: ['Encouragement pour ses nouveaux projets', 'Participation à des activités ensemble', 'Soutien de sa créativité', 'Planification d\'activités sociales', 'Respect de son rythme croissant'],
        eviter: ['Freiner son enthousiasme', 'Imposer un rythme trop lent', 'Décourager ses nouvelles idées', 'Rester dans la routine']
      }
    },
    ovulation: {
      name: 'Phase d\'Ovulation',
      duration: 'Jours 14-16',
      icon: 'https://assets.sitebrew.ai/generated-1754477493692.webp',
      color: '#F59E0B',
      bgColor: '#FFFBEB',
      information: {
        title: 'Phase d\'Ovulation',
        description: 'Votre énergie est à son apogée ! C\'est le moment où vous vous sentez le plus confiante et rayonnante.',
        symptoms: ['Énergie maximale', 'Confiance en soi', 'Libido accrue', 'Communication facilitée'],
        hormones: 'Pic d\'œstrogène et de LH, vous donnant une énergie et une clarté mentale optimales.'
      },
      exercices: [
        { name: 'HIIT', description: 'Entraînement intensif par intervalles' },
        { name: 'Musculation', description: 'Profitez de votre force maximale' },
        { name: 'Sports d\'équipe', description: 'Activités sociales et compétitives' },
        { name: 'Cours de fitness', description: 'Zumba, spinning, ou autres cours énergiques' }
      ],
      recettes: [
        { 
          name: 'Bowl énergétique aux superaliments', 
          ingredients: 'Açaï, granola, fruits frais, graines de chia', 
          benefices: 'L\'açaï est exceptionnellement riche en antioxydants qui protègent les cellules du stress oxydatif. Les graines de chia fournissent des oméga-3 et des fibres pour une énergie stable et durable.' 
        },
        { 
          name: 'Wrap de légumes croquants', 
          ingredients: 'Tortilla complète, légumes colorés, houmous', 
          benefices: 'Les légumes colorés apportent une variété de vitamines et minéraux essentiels. Le houmous, riche en protéines végétales et fibres, maintient la satiété et l\'énergie stable.' 
        },
        { 
          name: 'Thé vert matcha latte', 
          ingredients: 'Matcha, lait végétal, miel', 
          benefices: 'Le matcha contient de la L-théanine qui améliore la concentration et réduit le stress, tout en fournissant une énergie douce et prolongée grâce à sa caféine naturelle.' 
        }
      ],
      conseils: [
        'C\'est le moment parfait pour les présentations importantes',
        'Planifiez vos rendez-vous sociaux et professionnels',
        'Profitez de votre charisme naturel',
        'Osez sortir de votre zone de confort',
        'Exprimez vos idées avec confiance'
      ],
      conjoint: {
        comprendre: 'Votre partenaire est au sommet de son cycle, avec une énergie, une confiance et une libido à leur maximum. C\'est sa période la plus rayonnante.',
        attendre: ['Énergie débordante', 'Confiance en soi maximale', 'Sociabilité accrue', 'Libido élevée', 'Communication excellente', 'Charisme naturel'],
        besoins: ['Admiration et reconnaissance', 'Participation à des activités stimulantes', 'Intimité et connexion', 'Soutien de ses ambitions', 'Activités sociales ensemble'],
        eviter: ['Freiner son élan', 'Ignorer ses besoins d\'intimité', 'Rester passif face à son énergie', 'Minimiser ses réussites']
      }
    },
    luteale: {
      name: 'Phase Lutéale',
      duration: 'Jours 17-28',
      icon: 'https://assets.sitebrew.ai/generated-1754477492632.webp',
      color: '#8B5CF6',
      bgColor: '#FAF5FF',
      information: {
        title: 'Phase Lutéale',
        description: 'Votre corps se prépare soit à une grossesse, soit au prochain cycle. C\'est une période d\'introspection et de préparation.',
        symptoms: ['Énergie qui diminue', 'Besoin de cocooning', 'Sensibilité accrue', 'Envies alimentaires'],
        hormones: 'La progestérone domine, favorisant le calme mais pouvant causer des fluctuations d\'humeur.'
      },
      exercices: [
        { name: 'Yoga restaurateur', description: 'Postures douces et relaxantes' },
        { name: 'Marche en nature', description: 'Exercice doux et connexion avec l\'extérieur' },
        { name: 'Natation', description: 'Activité complète et apaisante' },
        { name: 'Tai chi', description: 'Mouvements lents et méditatifs' }
      ],
      recettes: [
        { 
          name: 'Curry de légumes réconfortant', 
          ingredients: 'Légumes de saison, lait de coco, épices', 
          benefices: 'Le lait de coco fournit des graisses saines qui soutiennent la production hormonale. Les épices comme le curcuma ont des propriétés anti-inflammatoires qui peuvent aider à gérer les symptômes prémenstruels.' 
        },
        { 
          name: 'Porridge aux fruits secs', 
          ingredients: 'Avoine, fruits secs, cannelle, lait végétal', 
          benefices: 'L\'avoine est riche en fibres solubles qui aident à stabiliser la glycémie et réduire les fringales. Les fruits secs apportent du magnésium naturel pour détendre les muscles et calmer le système nerveux.' 
        },
        { 
          name: 'Infusion camomille-lavande', 
          ingredients: 'Camomille, lavande, miel', 
          benefices: 'La camomille contient des composés qui favorisent la relaxation et améliorent la qualité du sommeil. La lavande a des propriétés anxiolytiques naturelles qui aident à gérer le stress et l\'irritabilité.' 
        }
      ],
      conseils: [
        'Écoutez vos besoins de repos et de solitude',
        'Pratiquez la gratitude et la réflexion',
        'Préparez-vous pour le prochain cycle',
        'Créez un environnement cocooning chez vous',
        'Soyez patiente avec vos émotions'
      ],
      conjoint: {
        comprendre: 'Votre partenaire entre dans une phase de transition où la progestérone domine. Elle peut devenir plus sensible et avoir besoin de plus de réconfort et de compréhension.',
        attendre: ['Sensibilité émotionnelle accrue', 'Besoin de cocooning', 'Possible irritabilité', 'Envies alimentaires spécifiques', 'Fatigue croissante', 'Besoin de routine'],
        besoins: ['Patience et empathie', 'Environnement calme et rassurant', 'Aide avec les tâches stressantes', 'Respect de ses envies alimentaires', 'Activités relaxantes ensemble', 'Écoute sans jugement'],
        eviter: ['Critiquer ses émotions', 'Imposer des activités stressantes', 'Ignorer ses besoins de réconfort', 'Faire des remarques sur ses envies alimentaires', 'Planifier trop d\'activités sociales']
      }
    }
  };

  const HomePage = () => (
    <div className="min-h-screen bg-gradient-to-br from-slate-50 to-indigo-50 p-6">
      <div className="max-w-6xl mx-auto">
        {/* Progress bar */}
        <div className="w-full bg-gray-200 rounded-full h-1 mb-8">
          <div className="bg-indigo-600 h-1 rounded-full w-0 transition-all duration-300"></div>
        </div>

        {/* Header */}
        <header className="text-center mb-12">
          <h1 className="text-4xl md:text-5xl font-bold text-slate-800 mb-4">
            Cycle Féminin
          </h1>
          <p className="text-lg text-slate-600 max-w-2xl mx-auto leading-relaxed font-medium">
            Découvrez et comprenez votre cycle menstruel pour optimiser votre bien-être à chaque phase
          </p>
        </header>

        {/* Phase Cards */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
          {Object.entries(phases).map(([key, phase]) => (
            <div
              key={key}
              onClick={() => setCurrentPhase(key)}
              className="bg-white rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 cursor-pointer transform hover:-translate-y-1"
              style={{ borderTop: `4px solid ${phase.color}` }}
            >
              <div className="flex items-center justify-center mb-4">
                <img 
                  src={phase.icon} 
                  alt={phase.name}
                  className="w-12 h-12"
                />
              </div>
              <h3 className="text-xl font-bold text-slate-800 mb-2 text-center">
                {phase.name}
              </h3>
              <p className="text-sm text-slate-500 text-center mb-3 font-semibold">
                {phase.duration}
              </p>
              <p className="text-sm text-slate-600 text-center leading-relaxed">
                {phase.information.description.substring(0, 100)}...
              </p>
            </div>
          ))}
        </div>

        {/* Info Section */}
        <div className="bg-white rounded-2xl p-8 shadow-lg">
          <div className="text-center">
            <Heart className="w-12 h-12 text-indigo-600 mx-auto mb-4" />
            <h2 className="text-2xl font-bold text-slate-800 mb-4">
              Comprendre votre cycle pour mieux vous connaître
            </h2>
            <p className="text-slate-600 max-w-3xl mx-auto leading-relaxed font-medium">
              Chaque phase de votre cycle menstruel apporte ses propres caractéristiques, défis et opportunités. 
              En comprenant ces variations naturelles, vous pouvez adapter votre alimentation, vos exercices et 
              votre mode de vie pour vous sentir au mieux de votre forme tout au long du mois.
            </p>
          </div>
        </div>
      </div>
    </div>
  );

  const PhasePage = ({ phaseKey }) => {
    const phase = phases[phaseKey];
    const phaseIndex = Object.keys(phases).indexOf(phaseKey);
    const progress = ((phaseIndex + 1) / Object.keys(phases).length) * 100;
    
    const tabs = [
      { id: 'information', label: 'Information', icon: Heart },
      { id: 'exercices', label: 'Exercices', icon: Dumbbell },
      { id: 'recettes', label: 'Recettes', icon: Utensils },
      { id: 'conseils', label: 'Conseils', icon: Lightbulb },
      { id: 'conjoint', label: 'Pour le conjoint', icon: Users }
    ];

    const renderTabContent = () => {
      switch (activeTab) {
        case 'information':
          return (
            <div className="space-y-6">
              <div>
                <h3 className="text-xl font-bold text-slate-800 mb-3">Description</h3>
                <p className="text-slate-600 leading-relaxed font-medium">{phase.information.description}</p>
              </div>
              <div>
                <h3 className="text-xl font-bold text-slate-800 mb-3">Symptômes typiques</h3>
                <ul className="space-y-2">
                  {phase.information.symptoms.map((symptom, index) => (
                    <li key={index} className="flex items-center text-slate-600 font-medium">
                      <div className="w-2 h-2 rounded-full mr-3" style={{ backgroundColor: phase.color }}></div>
                      {symptom}
                    </li>
                  ))}
                </ul>
              </div>
              <div>
                <h3 className="text-xl font-bold text-slate-800 mb-3">Hormones</h3>
                <p className="text-slate-600 leading-relaxed font-medium">{phase.information.hormones}</p>
              </div>
            </div>
          );
        
        case 'exercices':
          return (
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {phase.exercices.map((exercise, index) => (
                <div key={index} className="bg-slate-50 rounded-lg p-4">
                  <h4 className="font-bold text-slate-800 mb-2">{exercise.name}</h4>
                  <p className="text-slate-600 text-sm font-medium">{exercise.description}</p>
                </div>
              ))}
            </div>
          );
        
        case 'recettes':
          return (
            <div className="space-y-4">
              {phase.recettes.map((recipe, index) => (
                <div key={index} className="bg-slate-50 rounded-lg p-4">
                  <h4 className="font-bold text-slate-800 mb-2">{recipe.name}</h4>
                  <p className="text-slate-600 text-sm mb-2 font-medium">
                    <strong>Ingrédients :</strong> {recipe.ingredients}
                  </p>
                  <p className="text-slate-600 text-sm font-medium">
                    <strong>Pourquoi cette recette :</strong> {recipe.benefices}
                  </p>
                </div>
              ))}
            </div>
          );
        
        case 'conseils':
          return (
            <div className="space-y-3">
              {phase.conseils.map((tip, index) => (
                <div key={index} className="flex items-start">
                  <div className="w-6 h-6 rounded-full flex items-center justify-center mr-3 mt-1" style={{ backgroundColor: phase.color }}>
                    <span className="text-white text-xs font-bold">{index + 1}</span>
                  </div>
                  <p className="text-slate-600 leading-relaxed font-medium">{tip}</p>
                </div>
              ))}
            </div>
          );

        case 'conjoint':
          return (
            <div className="space-y-6">
              <div>
                <h3 className="text-xl font-bold text-slate-800 mb-3">Comprendre cette phase</h3>
                <p className="text-slate-600 leading-relaxed font-medium">{phase.conjoint.comprendre}</p>
              </div>
              <div>
                <h3 className="text-xl font-bold text-slate-800 mb-3">À quoi s'attendre</h3>
                <ul className="space-y-2">
                  {phase.conjoint.attendre.map((item, index) => (
                    <li key={index} className="flex items-center text-slate-600 font-medium">
                      <div className="w-2 h-2 rounded-full mr-3" style={{ backgroundColor: phase.color }}></div>
                      {item}
                    </li>
                  ))}
                </ul>
              </div>
              <div>
                <h3 className="text-xl font-bold text-slate-800 mb-3">Ce dont elle a besoin</h3>
                <ul className="space-y-2">
                  {phase.conjoint.besoins.map((besoin, index) => (
                    <li key={index} className="flex items-center text-slate-600 font-medium">
                      <div className="w-2 h-2 rounded-full mr-3 bg-green-500"></div>
                      {besoin}
                    </li>
                  ))}
                </ul>
              </div>
              <div>
                <h3 className="text-xl font-bold text-slate-800 mb-3">À éviter</h3>
                <ul className="space-y-2">
                  {phase.conjoint.eviter.map((eviter, index) => (
                    <li key={index} className="flex items-center text-slate-600 font-medium">
                      <div className="w-2 h-2 rounded-full mr-3 bg-red-500"></div>
                      {eviter}
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          );
        
        default:
          return null;
      }
    };

    return (
      <div className="min-h-screen p-6" style={{ backgroundColor: phase.bgColor }}>
        <div className="max-w-4xl mx-auto">
          {/* Progress bar */}
          <div className="w-full bg-gray-200 rounded-full h-1 mb-8">
            <div 
              className="h-1 rounded-full transition-all duration-300" 
              style={{ 
                backgroundColor: phase.color,
                width: `${progress}%`
              }}
            ></div>
          </div>

          {/* Header */}
          <div className="flex items-center mb-8">
            <button
              onClick={() => setCurrentPhase(null)}
              className="flex items-center text-slate-600 hover:text-slate-800 transition-colors mr-6 font-bold"
            >
              <ChevronLeft className="w-5 h-5 mr-1" />
              Retour
            </button>
            <div className="flex items-center">
              <img 
                src={phase.icon} 
                alt={phase.name}
                className="w-10 h-10 mr-4"
              />
              <div>
                <h1 className="text-3xl font-bold" style={{ color: phase.color }}>
                  {phase.name}
                </h1>
                <p className="text-slate-600 font-semibold">{phase.duration}</p>
              </div>
            </div>
          </div>

          {/* Tabs */}
          <div className="bg-white rounded-2xl shadow-lg overflow-hidden">
            <div className="flex border-b overflow-x-auto">
              {tabs.map((tab) => {
                const Icon = tab.icon;
                return (
                  <button
                    key={tab.id}
                    onClick={() => setActiveTab(tab.id)}
                    className={`flex-shrink-0 flex items-center justify-center py-4 px-6 transition-colors font-bold ${
                      activeTab === tab.id
                        ? 'border-b-2 text-slate-800'
                        : 'text-slate-600 hover:text-slate-800'
                    }`}
                    style={{
                      borderBottomColor: activeTab === tab.id ? phase.color : 'transparent'
                    }}
                  >
                    <Icon className="w-5 h-5 mr-2" />
                    <span className="whitespace-nowrap">{tab.label}</span>
                  </button>
                );
              })}
            </div>

            {/* Tab Content */}
            <div className="p-8">
              {renderTabContent()}
            </div>
          </div>
        </div>
      </div>
    );
  };

  return (
    <div className="font-sans">
      {currentPhase ? (
        <PhasePage phaseKey={currentPhase} />
      ) : (
        <HomePage />
      )}
    </div>
  );
};

export default CycleFemininWebsite;