import React, { useState, useEffect } from 'react';
import { BarChart, LineChart, Line, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
import { Calendar, Clock, Heart, Droplet, Moon, Activity, User, Settings, BookOpen, MessageCircle, Bell, Menu, X, ChevronRight, Plus, Check, ChevronDown, ChevronUp, Info, AlertCircle, Thermometer, Smile, Frown, Zap, Coffee, Utensils, Edit, ArrowLeft, ArrowRight, Trash2, Save } from 'lucide-react';

// Mock data for demonstration
const mockSleepData = [
  { day: 'Pon', hours: 7.5 },
  { day: 'Wt', hours: 6.8 },
  { day: 'Śr', hours: 7.2 },
  { day: 'Czw', hours: 8.0 },
  { day: 'Pt', hours: 6.5 },
  { day: 'Sob', hours: 7.8 },
  { day: 'Ndz', hours: 8.5 },
];

const mockMoodData = [
  { day: 'Pon', level: 7 },
  { day: 'Wt', level: 6 },
  { day: 'Śr', level: 8 },
  { day: 'Czw', level: 7 },
  { day: 'Pt', level: 5 },
  { day: 'Sob', level: 9 },
  { day: 'Ndz', level: 8 },
];

const mockCycleData = {
  cycleLength: 28,
  currentDay: 14,
  periodLength: 5,
  nextPeriod: '15.06.2024',
  fertility: 'wysoka',
  symptoms: ['wrażliwość piersi', 'zmiany nastroju'],
  lastPeriodDate: '18.05.2024',
  currentPhase: 'owulacyjna',
  phaseDay: 2,
  predictedPhases: [
    { name: 'menstruacyjna', start: 1, end: 5, color: '#F87171' },
    { name: 'folikularna', start: 6, end: 13, color: '#60A5FA' },
    { name: 'owulacyjna', start: 14, end: 16, color: '#34D399' },
    { name: 'lutealna', start: 17, end: 28, color: '#A78BFA' }
  ],
  historicalCycles: [
    { startDate: '20.04.2024', length: 29 },
    { startDate: '23.03.2024', length: 28 },
    { startDate: '24.02.2024', length: 27 },
    { startDate: '28.01.2024', length: 28 },
    { startDate: '31.12.2023', length: 28 },
    { startDate: '03.12.2023', length: 29 }
  ],
  symptomHistory: [
    { date: '18.05.2024', symptoms: ['ból brzucha', 'zmęczenie'], flow: 'średnie', mood: 'zmęczona' },
    { date: '19.05.2024', symptoms: ['ból brzucha', 'ból głowy'], flow: 'obfite', mood: 'rozdrażniona' },
    { date: '20.05.2024', symptoms: ['ból brzucha'], flow: 'średnie', mood: 'neutralna' },
    { date: '21.05.2024', symptoms: [], flow: 'skąpe', mood: 'neutralna' },
    { date: '22.05.2024', symptoms: [], flow: 'skąpe', mood: 'spokojna' },
    { date: '28.05.2024', symptoms: ['wrażliwość piersi'], flow: null, mood: 'energiczna' },
    { date: '01.06.2024', symptoms: ['wrażliwość piersi', 'zwiększone libido'], flow: null, mood: 'energiczna' }
  ]
};

const mockHabits = [
  { id: 1, name: 'Woda', icon: 'Droplet', target: 8, current: 5, unit: 'szklanek' },
  { id: 2, name: 'Aktywność', icon: 'Activity', target: 30, current: 15, unit: 'minut' },
  { id: 3, name: 'Sen', icon: 'Moon', target: 8, current: 7, unit: 'godzin' },
  { id: 4, name: 'Medytacja', icon: 'Heart', target: 10, current: 5, unit: 'minut' },
];

const mockReminders = [
  { id: 1, time: '10:00', text: 'Wypij szklankę wody', completed: true },
  { id: 2, time: '12:30', text: 'Zrób przerwę od komputera', completed: false },
  { id: 3, time: '15:00', text: 'Krótki spacer', completed: false },
  { id: 4, time: '18:00', text: 'Ćwiczenia mięśni dna miednicy', completed: false },
];

const mockPreventiveExams = [
  { id: 1, name: 'Cytologia', date: '15.07.2024', priority: 'wysoki' },
  { id: 2, name: 'Badanie krwi', date: '03.08.2024', priority: 'średni' },
  { id: 3, name: 'USG piersi', date: '22.09.2024', priority: 'średni' },
];

// New mock data for expanded cycle tracking
const mockSymptoms = [
  { id: 1, category: 'Samopoczucie', options: ['Zmęczenie', 'Zawroty głowy', 'Ból głowy', 'Bezsenność', 'Mdłości'] },
  { id: 2, category: 'Emocje', options: ['Drażliwość', 'Smutek', 'Niepokój', 'Wahania nastroju', 'Euforia'] },
  { id: 3, category: 'Ciało', options: ['Ból brzucha', 'Wrażliwość piersi', 'Wzdęcia', 'Bóle pleców', 'Opuchlizna'] },
  { id: 4, category: 'Skóra', options: ['Trądzik', 'Suchość', 'Zaczerwienienie', 'Świąd', 'Nadmierna potliwość'] },
  { id: 5, category: 'Libido', options: ['Zwiększone', 'Zmniejszone'] },
  { id: 6, category: 'Inne', options: ['Apetyt ↑', 'Apetyt ↓', 'Pragnienie słodyczy', 'Zatrzymanie wody'] }
];

const mockFlowOptions = [
  { id: 1, label: 'Skąpe', color: '#FECACA' },
  { id: 2, label: 'Średnie', color: '#EF4444' },
  { id: 3, label: 'Obfite', color: '#B91C1C' },
  { id: 4, label: 'Bardzo obfite', color: '#7F1D1D' }
];

const mockPhaseRecommendations = {
  menstruacyjna: {
    info: 'To czas krwawienia, kiedy poziom hormonów, zwłaszcza estrogenu i progesteronu, jest niski. Możesz odczuwać zmęczenie, wrażliwość emocjonalną i podatność na stres.',
    selfCare: [
      'Daj sobie czas na odpoczynek, jeśli czujesz zmęczenie',
      'Pij ciepłe napary (np. z imbiru, rumianku) dla ukojenia',
      'Jedz lekkostrawne, bogate w żelazo potrawy',
      'Używaj ciepłych termoforów w celu łagodzenia bólu brzucha'
    ],
    emotional: [
      'Daj sobie przestrzeń na emocje, bez ich oceniania',
      'Porozmawiaj z bliskimi i poproś o wsparcie w razie potrzeby',
      'Praktykuj krótkie ćwiczenia mindfulness'
    ]
  },
  folikularna: {
    info: 'Twój organizm przygotowuje się do owulacji, a poziom estrogenu rośnie. Możesz odczuwać więcej energii, kreatywności i motywacji.',
    selfCare: [
      'Wykorzystaj przypływ energii na aktywność fizyczną (joga, bieganie, siłownia)',
      'Jedz pełnowartościowe posiłki, bogate w białko i zdrowe tłuszcze',
      'Planuj i realizuj wyzwania wymagające kreatywności i koncentracji'
    ],
    emotional: [
      'Wykorzystaj ten czas na realizację ważnych zadań i spotkania',
      'Dziel się pomysłami i inspiruj innych swoją energią',
      'Podejmuj się bardziej wymagających projektów'
    ]
  },
  owulacyjna: {
    info: 'To moment największej płodności. Wysoki poziom estrogenu i testosteronu może przekładać się na lepsze samopoczucie i pewność siebie.',
    selfCare: [
      'Ciesz się swoim ciałem poprzez aktywność fizyczną, taniec czy spacer w naturze',
      'Dbaj o nawilżenie organizmu i zdrową dietę',
      'Spędzaj czas z bliskimi - to dobry moment na budowanie relacji'
    ],
    emotional: [
      'Wykorzystaj swoją towarzyskość i otwartość na głębsze rozmowy i relacje',
      'Celebruj swoją kobiecość i pewność siebie',
      'Podejmuj aktywności społeczne lub budujące pewność siebie'
    ]
  },
  lutealna: {
    info: 'Po owulacji poziom progesteronu wzrasta. Możesz odczuwać większą wrażliwość emocjonalną, zmiany nastroju i objawy zespołu napięcia przedmiesiączkowego (PMS).',
    selfCare: [
      'Słuchaj swojego ciała i zwolnij tempo w przypadku zmęczenia',
      'Unikaj nadmiaru kofeiny i cukru, które mogą nasilać wahania nastroju',
      'Praktykuj relaksujące aktywności (medytacja, czytanie, ciepła kąpiel)'
    ],
    emotional: [
      'Bądź dla siebie łagodna i nie wymagaj od siebie więcej niż możesz dać',
      'Komunikuj bliskim swoje odczucia, by mogli okazać więcej zrozumienia',
      'Stosuj proste techniki zarządzania stresem i napięciem'
    ]
  }
};

// Special sections data
const mockTransWomenContent = {
  hormonalChanges: {
    title: 'Świadomość zmian hormonalnych',
    info: 'Hormonalna terapia zastępcza (HTZ) wpływa na Twój organizm, nastrój, poziom energii i retencję wody. Regularne monitorowanie jest kluczowe dla Twojego zdrowia.',
    recommendations: [
      'Prowadź dziennik objawów związanych z HTZ',
      'Monitoruj zmiany nastroju i poziomu energii',
      'Pamiętaj o regularnych konsultacjach lekarskich',
      'Zwracaj uwagę na retencję wody i zmiany wagi'
    ]
  },
  mentalHealth: {
    title: 'Zdrowie psychiczne i emocjonalne',
    info: 'Dbanie o zdrowie psychiczne jest równie ważne jak dbanie o zdrowie fizyczne. Praktyki wspierające samoakceptację mogą znacząco poprawić Twoje samopoczucie.',
    recommendations: [
      'Praktykuj codzienne afirmacje i ćwiczenia wspierające samoakceptację',
      'Rozważ dołączenie do grup wsparcia LGBTQ+',
      'Stosuj techniki mindfulness pomagające w radzeniu sobie ze stresem',
      'Celebruj małe i duże sukcesy w swojej podróży'
    ]
  },
  physicalActivity: {
    title: 'Ruch i aktywność fizyczna',
    info: 'Aktywność fizyczna wspiera nie tylko zdrowie fizyczne, ale także psychiczne. Odpowiednio dobrane ćwiczenia mogą wspierać Twoje cele związane z tranzycją.',
    recommendations: [
      'Wybieraj ćwiczenia wspierające feminizację sylwetki',
      'Poszukaj przyjaznych przestrzeni treningowych',
      'Dostosuj intensywność treningu do swojego samopoczucia',
      'Pamiętaj o odpowiedniej regeneracji po treningu'
    ]
  },
  nutrition: {
    title: 'Zdrowe odżywianie',
    info: 'Odpowiednia dieta może wspierać efekty HTZ i ogólne zdrowie. Szczególnie ważne są produkty bogate w wapń i witaminę D dla zdrowia kości.',
    recommendations: [
      'Jedz produkty bogate w wapń i witaminę D',
      'Dbaj o odpowiednią ilość białka w diecie',
      'Pij dużo wody, szczególnie przy zatrzymaniu wody',
      'Ogranicz spożycie alkoholu i kofeiny'
    ]
  },
  bodyAcceptance: {
    title: 'Seksualność i akceptacja ciała',
    info: 'Akceptacja własnego ciała to proces. Praktyki afirmujące mogą pomóc w budowaniu pozytywnego stosunku do własnego ciała i seksualności.',
    recommendations: [
      'Praktykuj ćwiczenia afirmujące ciało',
      'Eksperymentuj z ubiorem i stylem, który sprawia, że czujesz się dobrze',
      'Bądź cierpliwa wobec zmian zachodzących w Twoim ciele',
      'Komunikuj swoje potrzeby i granice partnerowi/partnerce'
    ]
  },
  sexualHealth: {
    title: 'Zdrowie seksualne i reprodukcyjne',
    info: 'Regularne badania profilaktyczne są kluczowe dla Twojego zdrowia. Znajdź przyjaznych specjalistów, którzy rozumieją Twoje potrzeby.',
    recommendations: [
      'Regularnie wykonuj badania profilaktyczne',
      'Zapoznaj się z informacjami o zdrowiu intymnym po operacjach affirming',
      'Znajdź przyjaznych specjalistów zdrowia seksualnego',
      'Edukuj się na temat profilaktyki infekcji intymnych'
    ]
  }
};

const mockPostMenopausalContent = {
  hormonalHealth: {
    title: 'Zdrowie hormonalne i ogólne samopoczucie',
    info: 'Po menopauzie poziom estrogenów i progesteronu znacząco spada, co może wpływać na wiele aspektów zdrowia. Regularne monitorowanie i odpowiednie wsparcie mogą złagodzić objawy.',
    recommendations: [
      'Monitoruj objawy takie jak uderzenia gorąca, nocne poty, bezsenność',
      'Rozważ naturalne metody łagodzenia objawów (fitoestrogeny, techniki relaksacyjne)',
      'Konsultuj się regularnie z lekarzem w sprawie hormonalnej terapii zastępczej',
      'Praktykuj techniki relaksacyjne wspierające równowagę emocjonalną'
    ]
  },
  boneHealth: {
    title: 'Zdrowie kości i stawów',
    info: 'Spadek poziomu estrogenów po menopauzie przyspiesza utratę masy kostnej, zwiększając ryzyko osteoporozy. Odpowiednia dieta i aktywność fizyczna mogą pomóc w utrzymaniu zdrowia kości.',
    recommendations: [
      'Wykonuj regularnie badania densytometryczne',
      'Jedz produkty bogate w wapń i witaminę D',
      'Praktykuj ćwiczenia z obciążeniem (spacery, pilates, trening siłowy)',
      'Unikaj palenia i nadmiernego spożycia alkoholu'
    ]
  },
  heartHealth: {
    title: 'Zdrowie serca',
    info: 'Po menopauzie ryzyko chorób sercowo-naczyniowych wzrasta. Regularne badania i zdrowy styl życia mogą pomóc w utrzymaniu zdrowia serca.',
    recommendations: [
      'Monitoruj ciśnienie krwi i poziom cholesterolu',
      'Stosuj dietę śródziemnomorską bogatą w oliwę z oliwek, ryby i warzywa',
      'Bądź aktywna fizycznie przez co najmniej 30 minut dziennie',
      'Praktykuj techniki redukcji stresu'
    ]
  },
  skinHair: {
    title: 'Skóra, włosy i ogólne samopoczucie',
    info: 'Spadek poziomu estrogenów wpływa na skórę, włosy i paznokcie. Odpowiednia pielęgnacja może pomóc w utrzymaniu ich w dobrej kondycji.',
    recommendations: [
      'Stosuj kremy nawilżające i ochronę przeciwsłoneczną',
      'Używaj olejów naturalnych (z wiesiołka, arganowy) dla zdrowej cery i włosów',
      'Pij dużo wody dla nawilżenia od wewnątrz',
      'Praktykuj masaż twarzy i ciała poprawiający krążenie'
    ]
  },
  intimateHealth: {
    title: 'Zdrowie intymne i libido',
    info: 'Zmiany hormonalne po menopauzie mogą prowadzić do suchości pochwy i zmian w libido. Odpowiednie produkty i ćwiczenia mogą pomóc w utrzymaniu zdrowia intymnego.',
    recommendations: [
      'Stosuj lubrykanty i produkty nawilżające na bazie wody lub olejków',
      'Wykonuj regularnie ćwiczenia mięśni dna miednicy (Kegla)',
      'Komunikuj swoje potrzeby partnerowi',
      'Rozważ konsultację z seksuologiem lub ginekologiem'
    ]
  },
  mentalEmotional: {
    title: 'Zdrowie psychiczne i emocjonalne',
    info: 'Menopauza to czas zmian nie tylko fizycznych, ale i emocjonalnych. Dbanie o zdrowie psychiczne jest równie ważne jak dbanie o zdrowie fizyczne.',
    recommendations: [
      'Rozwijaj nowe pasje i zainteresowania',
      'Utrzymuj aktywne życie społeczne',
      'Praktykuj mindfulness, afirmacje i wdzięczność',
      'Prowadź dziennik refleksji i celebruj nowy etap życia'
    ]
  }
};

export default function WellnessApp() {
  const [activeTab, setActiveTab] = useState('dashboard');
  const [showMenu, setShowMenu] = useState(false);
  const [waterIntake, setWaterIntake] = useState(5);
  const [showOnboarding, setShowOnboarding] = useState(false);
  const [onboardingStep, setOnboardingStep] = useState(1);
  const [userData, setUserData] = useState({
    name: 'Anna',
    age: '26-35',
    goals: ['Lepszy sen', 'Więcej ruchu', 'Zdrowie reprodukcyjne'],
    trackPeriod: true,
    sleepHours: '7-8',
    activityLevel: 'Średni - czasem ćwiczę',
    userType: 'regular' // 'regular', 'trans', 'postmenopausal'
  });
  const [userPreferences, setUserPreferences] = useState({
    theme: 'light',
    notifications: true,
    privacyMode: false,
    language: 'polski'
  });
  
  // New state for expanded cycle tracking
  const [activeCycleSection, setActiveCycleSection] = useState('overview');
  const [selectedDate, setSelectedDate] = useState(new Date());
  const [showSymptomTracker, setShowSymptomTracker] = useState(false);
  const [selectedSymptoms, setSelectedSymptoms] = useState([]);
  const [selectedFlow, setSelectedFlow] = useState(null);
  const [selectedMood, setSelectedMood] = useState(null);
  const [showPhaseInfo, setShowPhaseInfo] = useState(false);
  const [cycleSettings, setCycleSettings] = useState({
    averageCycleLength: 28,
    averagePeriodLength: 5,
    trackFertility: true,
    notifyBeforePeriod: true,
    notifyPhaseChange: true,
    privacyLevel: 'standard' // 'standard', 'high', 'maximum'
  });
  const [showCycleSettings, setShowCycleSettings] = useState(false);
  const [showSpecialSection, setShowSpecialSection] = useState(false);
  const [activeSpecialSection, setActiveSpecialSection] = useState(null);

  const handleOnboardingNext = () => {
    if (onboardingStep < 5) {
      setOnboardingStep(onboardingStep + 1);
    } else {
      setShowOnboarding(false);
      // Here we would normally save the user data to the backend
      console.log("User data collected:", userData);
    }
  };

  const handleGoalToggle = (goal) => {
    if (userData.goals.includes(goal)) {
      setUserData({
        ...userData,
        goals: userData.goals.filter(g => g !== goal)
      });
    } else {
      setUserData({
        ...userData,
        goals: [...userData.goals, goal]
      });
    }
  };

  const incrementWater = () => {
    if (waterIntake < 8) {
      setWaterIntake(waterIntake + 1);
      // Update the mock habits data
      const updatedHabits = [...mockHabits];
      const waterHabit = updatedHabits.find(h => h.name === 'Woda');
      if (waterHabit) {
        waterHabit.current = waterIntake + 1;
      }
    }
  };

  const toggleReminder = (id) => {
    const updatedReminders = mockReminders.map(reminder => 
      reminder.id === id ? { ...reminder, completed: !reminder.completed } : reminder
    );
    // In a real app, we would update the state here
    console.log("Updated reminders:", updatedReminders);
  };

  const handleSymptomToggle = (symptom) => {
    if (selectedSymptoms.includes(symptom)) {
      setSelectedSymptoms(selectedSymptoms.filter(s => s !== symptom));
    } else {
      setSelectedSymptoms([...selectedSymptoms, symptom]);
    }
  };

  const saveSymptomData = () => {
    // In a real app, we would save this data to the backend
    console.log("Saving symptom data:", {
      date: selectedDate,
      symptoms: selectedSymptoms,
      flow: selectedFlow,
      mood: selectedMood
    });
    setShowSymptomTracker(false);
  };

  const handleUserTypeChange = (type) => {
    setUserData({
      ...userData,
      userType: type
    });
    
    // Reset special section if changing user type
    setShowSpecialSection(false);
    setActiveSpecialSection(null);
  };

  const toggleSpecialSection = (section) => {
    if (activeSpecialSection === section) {
      setActiveSpecialSection(null);
    } else {
      setActiveSpecialSection(section);
    }
  };

  // Onboarding component
  const Onboarding = () => {
    return (
      <div className="fixed inset-0 bg-white z-50 flex flex-col items-center justify-between p-6">
        <div className="w-full max-w-md">
          <div className="flex justify-between items-center mb-8">
            <div className="h-1 bg-gray-200 flex-grow rounded-full">
              <div 
                className="h-1 bg-purple-500 rounded-full" 
                style={{ width: `${onboardingStep * 20}%` }}
              ></div>
            </div>
            <span className="ml-3 text-sm text-gray-500">{onboardingStep}/5</span>
          </div>

          {onboardingStep === 1 && (
            <div className="space-y-6">
              <h2 className="text-2xl font-semibold text-purple-800">Witaj w Wellness Asystentce!</h2>
              <p className="text-gray-600">Pomożemy Ci stworzyć spersonalizowane doświadczenie wellness. Zacznijmy od podstawowych informacji.</p>
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Jak mamy się do Ciebie zwracać?</label>
                  <input 
                    type="text" 
                    className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                    placeholder="Twoje imię"
                    value={userData.name}
                    onChange={(e) => setUserData({...userData, name: e.target.value})}
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Twój wiek</label>
                  <select 
                    className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                    value={userData.age}
                    onChange={(e) => setUserData({...userData, age: e.target.value})}
                  >
                    <option value="">Wybierz przedział</option>
                    <option value="18-25">18-25</option>
                    <option value="26-35">26-35</option>
                    <option value="36-45">36-45</option>
                    <option value="46-55">46-55</option>
                    <option value="56-65">56-65</option>
                    <option value="65+">65+</option>
                  </select>
                </div>
              </div>
            </div>
          )}

          {onboardingStep === 2 && (
            <div className="space-y-6">
              <h2 className="text-2xl font-semibold text-purple-800">Twoje cele wellness</h2>
              <p className="text-gray-600">Wybierz obszary, na których najbardziej Ci zależy:</p>
              <div className="space-y-3">
                {['Lepszy sen', 'Więcej ruchu', 'Zdrowe odżywianie', 'Redukcja stresu', 'Zdrowie reprodukcyjne', 'Zdrowie seksualne', 'Profilaktyka zdrowotna'].map((goal) => (
                  <div 
                    key={goal}
                    className={`p-3 border rounded-lg flex items-center justify-between cursor-pointer ${userData.goals.includes(goal) ? 'border-purple-500 bg-purple-50' : 'border-gray-300'}`}
                    onClick={() => handleGoalToggle(goal)}
                  >
                    <span>{goal}</span>
                    {userData.goals.includes(goal) && <Check size={20} className="text-purple-500" />}
                  </div>
                ))}
              </div>
            </div>
          )}

          {onboardingStep === 3 && (
            <div className="space-y-6">
              <h2 className="text-2xl font-semibold text-purple-800">Zdrowie reprodukcyjne</h2>
              <p className="text-gray-600">Wybierz opcję, która najlepiej do Ciebie pasuje:</p>
              <div className="space-y-3">
                <div 
                  className={`p-3 border rounded-lg flex items-center justify-between cursor-pointer ${userData.userType === 'regular' && userData.trackPeriod === true ? 'border-purple-500 bg-purple-50' : 'border-gray-300'}`}
                  onClick={() => {
                    setUserData({...userData, trackPeriod: true, userType: 'regular'});
                  }}
                >
                  <span>Chcę śledzić cykl menstruacyjny</span>
                  {userData.userType === 'regular' && userData.trackPeriod === true && <Check size={20} className="text-purple-500" />}
                </div>
                <div 
                  className={`p-3 border rounded-lg flex items-center justify-between cursor-pointer ${userData.userType === 'postmenopausal' ? 'border-purple-500 bg-purple-50' : 'border-gray-300'}`}
                  onClick={() => {
                    setUserData({...userData, trackPeriod: false, userType: 'postmenopausal'});
                  }}
                >
                  <span>Jestem po menopauzie</span>
                  {userData.userType === 'postmenopausal' && <Check size={20} className="text-purple-500" />}
                </div>
                <div 
                  className={`p-3 border rounded-lg flex items-center justify-between cursor-pointer ${userData.userType === 'trans' ? 'border-purple-500 bg-purple-50' : 'border-gray-300'}`}
                  onClick={() => {
                    setUserData({...userData, trackPeriod: false, userType: 'trans'});
                  }}
                >
                  <span>Jestem kobietą trans</span>
                  {userData.userType === 'trans' && <Check size={20} className="text-purple-500" />}
                </div>
                <div 
                  className={`p-3 border rounded-lg flex items-center justify-between cursor-pointer ${userData.userType === 'regular' && userData.trackPeriod === false ? 'border-purple-500 bg-purple-50' : 'border-gray-300'}`}
                  onClick={() => {
                    setUserData({...userData, trackPeriod: false, userType: 'regular'});
                  }}
                >
                  <span>Nie chcę śledzić cyklu</span>
                  {userData.userType === 'regular' && userData.trackPeriod === false && <Check size={20} className="text-purple-500" />}
                </div>
              </div>
            </div>
          )}

          {onboardingStep === 4 && (
            <div className="space-y-6">
              <h2 className="text-2xl font-semibold text-purple-800">Twoje nawyki snu</h2>
              <p className="text-gray-600">Ile godzin snu potrzebujesz, aby czuć się wypoczęta?</p>
              <div>
                <select 
                  className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                  value={userData.sleepHours}
                  onChange={(e) => setUserData({...userData, sleepHours: e.target.value})}
                >
                  <option value="">Wybierz liczbę godzin</option>
                  <option value="5-6">5-6 godzin</option>
                  <option value="7-8">7-8 godzin</option>
                  <option value="9+">9+ godzin</option>
                </select>
              </div>
            </div>
          )}

          {onboardingStep === 5 && (
            <div className="space-y-6">
              <h2 className="text-2xl font-semibold text-purple-800">Poziom aktywności</h2>
              <p className="text-gray-600">Jak oceniasz swój obecny poziom aktywności fizycznej?</p>
              <div className="space-y-3">
                {['Niski - mało się ruszam', 'Średni - czasem ćwiczę', 'Wysoki - regularnie trenuję'].map((level) => (
                  <div 
                    key={level}
                    className={`p-3 border rounded-lg flex items-center justify-between cursor-pointer ${userData.activityLevel === level ? 'border-purple-500 bg-purple-50' : 'border-gray-300'}`}
                    onClick={() => setUserData({...userData, activityLevel: level})}
                  >
                    <span>{level}</span>
                    {userData.activityLevel === level && <Check size={20} className="text-purple-500" />}
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>

        <button 
          className="w-full max-w-md mt-8 bg-purple-600 text-white py-3 px-6 rounded-lg font-medium hover:bg-purple-700 transition-colors"
          onClick={handleOnboardingNext}
        >
          {onboardingStep === 5 ? 'Rozpocznij' : 'Dalej'}
        </button>
      </div>
    );
  };

  // Side menu component
  const SideMenu = () => {
    return (
      <div className={`fixed inset-0 bg-black bg-opacity-50 z-40 transition-opacity ${showMenu ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}>
        <div className={`absolute top-0 left-0 h-full w-3/4 max-w-xs bg-white shadow-xl transform transition-transform ${showMenu ? 'translate-x-0' : '-translate-x-full'}`}>
          <div className="p-4 border-b flex justify-between items-center">
            <h2 className="text-xl font-semibold text-purple-800">Menu</h2>
            <button onClick={() => setShowMenu(false)} className="text-gray-500">
              <X size={24} />
            </button>
          </div>
          
          <div className="p-4">
            <div className="flex items-center space-x-3 mb-6">
              <div className="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center">
                <User size={24} className="text-purple-600" />
              </div>
              <div>
                <p className="font-medium">{userData.name || 'Użytkowniczka'}</p>
                <p className="text-sm text-gray-500">{userData.age || '26-35'} lat</p>
              </div>
            </div>
            
            <nav className="space-y-1">
              {[
                { icon: <Activity size={20} />, label: 'Dashboard', id: 'dashboard' },
                { icon: <Calendar size={20} />, label: 'Kalendarz cyklu', id: 'cycle', hidden: !userData.trackPeriod && userData.userType === 'regular' },
                { icon: <Heart size={20} />, label: 'Zdrowie seksualne', id: 'sexual-health' },
                { icon: <BookOpen size={20} />, label: 'Profilaktyka', id: 'prevention' },
                { icon: <MessageCircle size={20} />, label: 'Społeczność', id: 'community' },
                { icon: <Settings size={20} />, label: 'Ustawienia', id: 'settings' },
              ].filter(item => !item.hidden).map((item) => (
                <button
                  key={item.id}
                  className={`flex items-center space-x-3 w-full p-3 rounded-lg ${activeTab === item.id ? 'bg-purple-100 text-purple-800' : 'text-gray-700 hover:bg-gray-100'}`}
                  onClick={() => {
                    setActiveTab(item.id);
                    setShowMenu(false);
                  }}
                >
                  <span className={activeTab === item.id ? 'text-purple-600' : 'text-gray-500'}>
                    {item.icon}
                  </span>
                  <span>{item.label}</span>
                </button>
              ))}
              
              {userData.userType === 'trans' && (
                <button
                  className={`flex items-center space-x-3 w-full p-3 rounded-lg ${activeTab === 'trans-health' ? 'bg-purple-100 text-purple-800' : 'text-gray-700 hover:bg-gray-100'}`}
                  onClick={() => {
                    setActiveTab('trans-health');
                    setShowMenu(false);
                  }}
                >
                  <span className={activeTab === 'trans-health' ? 'text-purple-600' : 'text-gray-500'}>
                    <Heart size={20} />
                  </span>
                  <span>Zdrowie kobiet trans</span>
                </button>
              )}
              
              {userData.userType === 'postmenopausal' && (
                <button
                  className={`flex items-center space-x-3 w-full p-3 rounded-lg ${activeTab === 'menopause-health' ? 'bg-purple-100 text-purple-800' : 'text-gray-700 hover:bg-gray-100'}`}
                  onClick={() => {
                    setActiveTab('menopause-health');
                    setShowMenu(false);
                  }}
                >
                  <span className={activeTab === 'menopause-health' ? 'text-purple-600' : 'text-gray-500'}>
                    <Heart size={20} />
                  </span>
                  <span>Zdrowie po menopauzie</span>
                </button>
              )}
            </nav>
          </div>
        </div>
      </div>
    );
  };

  // Dashboard tab content
  const DashboardTab = () => {
    return (
      <div className="space-y-6">
        <div className="bg-gradient-to-r from-purple-500 to-indigo-600 rounded-xl p-4 text-white">
          <p className="text-sm opacity-90">Dzień dobry,</p>
          <h2 className="text-xl font-semibold mb-2">{userData.name || 'Użytkowniczko'}!</h2>
          <p className="text-sm opacity-90">Dziś jest dobry dzień, aby zadbać o siebie.</p>
        </div>

        {userData.trackPeriod && (
          <div className="bg-white rounded-xl shadow-sm p-4">
            <div className="flex justify-between items-center mb-3">
              <h3 className="font-medium">Twój cykl</h3>
              <button 
                className="text-purple-600 text-sm"
                onClick={() => setActiveTab('cycle')}
              >
                Szczegóły
              </button>
            </div>
            <div className="flex items-center justify-between mb-3">
              <div>
                <p className="text-sm text-gray-600">Dzień cyklu</p>
                <p className="text-2xl font-bold">{mockCycleData.currentDay}</p>
              </div>
              <div>
                <p className="text-sm text-gray-600">Faza</p>
                <p className="text-lg font-medium capitalize">{mockCycleData.currentPhase}</p>
              </div>
              <div>
                <p className="text-sm text-gray-600">Następna miesiączka</p>
                <p className="text-lg font-medium">{mockCycleData.nextPeriod}</p>
              </div>
            </div>
            <div className="relative h-4 mb-1 rounded-full bg-gray-200">
              {mockCycleData.predictedPhases.map((phase) => (
                <div 
                  key={phase.name}
                  className="absolute top-0 bottom-0 rounded-full"
                  style={{ 
                    left: `${((phase.start - 1) / mockCycleData.cycleLength) * 100}%`,
                    width: `${((phase.end - phase.start + 1) / mockCycleData.cycleLength) * 100}%`,
                    backgroundColor: phase.color
                  }}
                ></div>
              ))}
              <div 
                className="absolute top-0 bottom-0 w-2 bg-white border-2 border-purple-600 rounded-full"
                style={{ left: `${((mockCycleData.currentDay - 1) / mockCycleData.cycleLength) * 100}%` }}
              ></div>
            </div>
            <div className="flex justify-between text-xs text-gray-500 px-1">
              <span>Dzień 1</span>
              <span>Dzień {mockCycleData.cycleLength}</span>
            </div>
          </div>
        )}

        <div className="bg-white rounded-xl shadow-sm p-4">
          <div className="flex justify-between items-center mb-3">
            <h3 className="font-medium">Twoje dzisiejsze nawyki</h3>
            <button className="text-purple-600 text-sm">Edytuj</button>
          </div>
          <div className="space-y-4">
            {mockHabits.map((habit) => (
              <div key={habit.id} className="flex items-center">
                <div className="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
                  {habit.icon === 'Droplet' && <Droplet size={20} className="text-blue-500" />}
                  {habit.icon === 'Activity' && <Activity size={20} className="text-green-500" />}
                  {habit.icon === 'Moon' && <Moon size={20} className="text-indigo-500" />}
                  {habit.icon === 'Heart' && <Heart size={20} className="text-red-500" />}
                </div>
                <div className="flex-grow">
                  <div className="flex justify-between">
                    <span className="text-sm font-medium">{habit.name}</span>
                    <span className="text-sm text-gray-500">{habit.current}/{habit.target} {habit.unit}</span>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2 mt-1">
                    <div 
                      className={`h-2 rounded-full ${
                        habit.icon === 'Droplet' ? 'bg-blue-500' : 
                        habit.icon === 'Activity' ? 'bg-green-500' : 
                        habit.icon === 'Moon' ? 'bg-indigo-500' : 
                        'bg-red-500'
                      }`}
                      style={{ width: `${(habit.current / habit.target) * 100}%` }}
                    ></div>
                  </div>
                </div>
                {habit.name === 'Woda' && (
                  <button 
                    onClick={incrementWater}
                    className="ml-2 w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-500"
                  >
                    <Plus size={16} />
                  </button>
                )}
              </div>
            ))}
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-sm p-4">
          <div className="flex justify-between items-center mb-3">
            <h3 className="font-medium">Twój sen w tym tygodniu</h3>
            <button className="text-purple-600 text-sm">Szczegóły</button>
          </div>
          <div className="h-40">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={mockSleepData} margin={{ top: 5, right: 5, bottom: 5, left: 0 }}>
                <CartesianGrid strokeDasharray="3 3" vertical={false} />
                <XAxis dataKey="day" axisLine={false} tickLine={false} />
                <YAxis hide={true} domain={[0, 10]} />
                <Tooltip 
                  formatter={(value) => [`${value} godz`, 'Sen']}
                  contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' }}
                />
                <Bar dataKey="hours" fill="#8884d8" radius={[4, 4, 0, 0]} />
              </BarChart>
            </ResponsiveContainer>
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-sm p-4">
          <div className="flex justify-between items-center mb-3">
            <h3 className="font-medium">Dzisiejsze przypomnienia</h3>
            <button className="text-purple-600 text-sm">Wszystkie</button>
          </div>
          <div className="space-y-3">
            {mockReminders.map((reminder) => (
              <div 
                key={reminder.id} 
                className={`flex items-center p-3 rounded-lg border ${reminder.completed ? 'border-gray-200 bg-gray-50' : 'border-purple-200 bg-purple-50'}`}
                onClick={() => toggleReminder(reminder.id)}
              >
                <div className={`w-5 h-5 rounded-full border flex items-center justify-center mr-3 ${reminder.completed ? 'border-gray-400 bg-gray-200' : 'border-purple-500'}`}>
                  {reminder.completed && <Check size={12} className="text-gray-500" />}
                </div>
                <div className="flex-grow">
                  <p className={`text-sm ${reminder.completed ? 'text-gray-500 line-through' : 'text-gray-800'}`}>{reminder.text}</p>
                </div>
                <div className="text-xs text-gray-500 flex items-center">
                  <Clock size={12} className="mr-1" />
                  {reminder.time}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  };

  // Enhanced Cycle tracking tab content
  const CycleTab = () => {
    // Symptom tracker modal
    const SymptomTracker = () => {
      return (
        <div className="fixed inset-0 bg-black bg-opacity-50 z-40 flex items-center justify-center p-4">
          <div className="bg-white rounded-xl w-full max-w-md max-h-[90vh] overflow-y-auto">
            <div className="p-4 border-b sticky top-0 bg-white z-10 flex justify-between items-center">
              <h3 className="font-medium">Dodaj objawy</h3>
              <button onClick={() => setShowSymptomTracker(false)} className="text-gray-500">
                <X size={20} />
              </button>
            </div>
            
            <div className="p-4 space-y-6">
              <div>
                <p className="text-sm font-medium mb-2">Data</p>
                <input 
                  type="date" 
                  className="w-full p-3 border border-gray-300 rounded-lg"
                  value={selectedDate.toISOString().split('T')[0]}
                  onChange={(e) => setSelectedDate(new Date(e.target.value))}
                />
              </div>
              
              {mockSymptoms.map((category) => (
                <div key={category.id}>
                  <p className="text-sm font-medium mb-2">{category.category}</p>
                  <div className="flex flex-wrap gap-2">
                    {category.options.map((symptom) => (
                      <button
                        key={symptom}
                        className={`px-3 py-1 rounded-full text-xs ${
                          selectedSymptoms.includes(symptom)
                            ? 'bg-purple-500 text-white'
                            : 'bg-gray-100 text-gray-800'
                        }`}
                        onClick={() => handleSymptomToggle(symptom)}
                      >
                        {symptom}
                      </button>
                    ))}
                  </div>
                </div>
              ))}
              
              {/* Flow intensity selector (only shown if date is within period) */}
              <div>
                <p className="text-sm font-medium mb-2">Intensywność krwawienia</p>
                <div className="flex space-x-2">
                  {mockFlowOptions.map((option) => (
                    <button
                      key={option.id}
                      className={`flex-1 py-2 rounded-lg text-xs ${
                        selectedFlow === option.label
                          ? 'text-white'
                          : 'bg-gray-100 text-gray-800'
                      }`}
                      style={{ 
                        backgroundColor: selectedFlow === option.label ? option.color : '' 
                      }}
                      onClick={() => setSelectedFlow(option.label)}
                    >
                      {option.label}
                    </button>
                  ))}
                </div>
              </div>
              
              {/* Mood selector */}
              <div>
                <p className="text-sm font-medium mb-2">Nastrój</p>
                <div className="grid grid-cols-4 gap-2">
                  {['Spokojna', 'Energiczna', 'Zmęczona', 'Rozdrażniona', 'Smutna', 'Szczęśliwa', 'Zestresowana', 'Neutralna'].map((mood) => (
                    <button
                      key={mood}
                      className={`py-2 px-1 rounded-lg text-xs ${
                        selectedMood === mood
                          ? 'bg-purple-500 text-white'
                          : 'bg-gray-100 text-gray-800'
                      }`}
                      onClick={() => setSelectedMood(mood)}
                    >
                      {mood}
                    </button>
                  ))}
                </div>
              </div>
              
              <button 
                className="w-full bg-purple-600 text-white py-3 rounded-lg font-medium"
                onClick={saveSymptomData}
              >
                Zapisz
              </button>
            </div>
          </div>
        </div>
      );
    };
    
    // Phase info modal
    const PhaseInfoModal = () => {
      const phase = mockCycleData.currentPhase;
      const phaseInfo = mockPhaseRecommendations[phase];
      
      return (
        <div className="fixed inset-0 bg-black bg-opacity-50 z-40 flex items-center justify-center p-4">
          <div className="bg-white rounded-xl w-full max-w-md max-h-[90vh] overflow-y-auto">
            <div className="p-4 border-b sticky top-0 bg-white z-10 flex justify-between items-center">
              <h3 className="font-medium capitalize">Faza {phase}</h3>
              <button onClick={() => setShowPhaseInfo(false)} className="text-gray-500">
                <X size={20} />
              </button>
            </div>
            
            <div className="p-4 space-y-6">
              <div className="bg-purple-50 p-4 rounded-lg">
                <p className="text-sm">{phaseInfo.info}</p>
              </div>
              
              <div>
                <h4 className="font-medium mb-2">Rekomendacje dbania o siebie</h4>
                <ul className="space-y-2">
                  {phaseInfo.selfCare.map((item, index) => (
                    <li key={index} className="flex items-start">
                      <Check size={16} className="text-green-500 mr-2 mt-0.5" />
                      <span className="text-sm">{item}</span>
                    </li>
                  ))}
                </ul>
              </div>
              
              <div>
                <h4 className="font-medium mb-2">Wsparcie emocjonalne</h4>
                <ul className="space-y-2">
                  {phaseInfo.emotional.map((item, index) => (
                    <li key={index} className="flex items-start">
                      <Heart size={16} className="text-pink-500 mr-2 mt-0.5" />
                      <span className="text-sm">{item}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          </div>
        </div>
      );
    };
    
    // Cycle settings modal
    const CycleSettingsModal = () => {
      return (
        <div className="fixed inset-0 bg-black bg-opacity-50 z-40 flex items-center justify-center p-4">
          <div className="bg-white rounded-xl w-full max-w-md max-h-[90vh] overflow-y-auto">
            <div className="p-4 border-b sticky top-0 bg-white z-10 flex justify-between items-center">
              <h3 className="font-medium">Ustawienia cyklu</h3>
              <button onClick={() => setShowCycleSettings(false)} className="text-gray-500">
                <X size={20} />
              </button>
            </div>
            
            <div className="p-4 space-y-6">
              <div>
                <label className="block text-sm font-medium mb-2">Data ostatniej miesiączki</label>
                <input 
                  type="date" 
                  className="w-full p-3 border border-gray-300 rounded-lg"
                  value="2024-05-18"
                />
              </div>
              
              <div>
                <label className="block text-sm font-medium mb-2">Średnia długość cyklu</label>
                <div className="flex items-center">
                  <input 
                    type="range" 
                    min="21" 
                    max="35" 
                    value={cycleSettings.averageCycleLength}
                    onChange={(e) => setCycleSettings({...cycleSettings, averageCycleLength: parseInt(e.target.value)})}
                    className="flex-grow mr-3"
                  />
                  <span className="text-sm font-medium">{cycleSettings.averageCycleLength} dni</span>
                </div>
              </div>
              
              <div>
                <label className="block text-sm font-medium mb-2">Średnia długość miesiączki</label>
                <div className="flex items-center">
                  <input 
                    type="range" 
                    min="2" 
                    max="10" 
                    value={cycleSettings.averagePeriodLength}
                    onChange={(e) => setCycleSettings({...cycleSettings, averagePeriodLength: parseInt(e.target.value)})}
                    className="flex-grow mr-3"
                  />
                  <span className="text-sm font-medium">{cycleSettings.averagePeriodLength} dni</span>
                </div>
              </div>
              
              <div className="space-y-4">
                <div className="flex items-center justify-between">
                  <label className="text-sm font-medium">Śledzenie płodności</label>
                  <div 
                    className={`w-12 h-6 rounded-full flex items-center p-1 cursor-pointer ${cycleSettings.trackFertility ? 'bg-purple-500 justify-end' : 'bg-gray-300 justify-start'}`}
                    onClick={() => setCycleSettings({...cycleSettings, trackFertility: !cycleSettings.trackFertility})}
                  >
                    <div className="w-4 h-4 rounded-full bg-white"></div>
                  </div>
                </div>
                
                <div className="flex items-center justify-between">
                  <label className="text-sm font-medium">Powiadomienia przed miesiączką</label>
                  <div 
                    className={`w-12 h-6 rounded-full flex items-center p-1 cursor-pointer ${cycleSettings.notifyBeforePeriod ? 'bg-purple-500 justify-end' : 'bg-gray-300 justify-start'}`}
                    onClick={() => setCycleSettings({...cycleSettings, notifyBeforePeriod: !cycleSettings.notifyBeforePeriod})}
                  >
                    <div className="w-4 h-4 rounded-full bg-white"></div>
                  </div>
                </div>
                
                <div className="flex items-center justify-between">
                  <label className="text-sm font-medium">Powiadomienia o zmianie fazy</label>
                  <div 
                    className={`w-12 h-6 rounded-full flex items-center p-1 cursor-pointer ${cycleSettings.notifyPhaseChange ? 'bg-purple-500 justify-end' : 'bg-gray-300 justify-start'}`}
                    onClick={() => setCycleSettings({...cycleSettings, notifyPhaseChange: !cycleSettings.notifyPhaseChange})}
                  >
                    <div className="w-4 h-4 rounded-full bg-white"></div>
                  </div>
                </div>
              </div>
              
              <div>
                <label className="block text-sm font-medium mb-2">Poziom prywatności</label>
                <select 
                  className="w-full p-3 border border-gray-300 rounded-lg"
                  value={cycleSettings.privacyLevel}
                  onChange={(e) => setCycleSettings({...cycleSettings, privacyLevel: e.target.value})}
                >
                  <option value="standard">Standardowy</option>
                  <option value="high">Wysoki (dyskretne powiadomienia)</option>
                  <option value="maximum">Maksymalny (dodatkowe zabezpieczenie)</option>
                </select>
              </div>
              
              <button 
                className="w-full bg-purple-600 text-white py-3 rounded-lg font-medium"
                onClick={() => setShowCycleSettings(false)}
              >
                Zapisz ustawienia
              </button>
            </div>
          </div>
        </div>
      );
    };
    
    // Cycle Overview Section
    const CycleOverview = () => {
      return (
        <div className="space-y-6">
          <div className="bg-gradient-to-r from-pink-500 to-purple-600 rounded-xl p-4 text-white">
            <div className="flex justify-between items-center mb-2">
              <h2 className="text-xl font-semibold">Twój cykl</h2>
              <button 
                onClick={() => setShowCycleSettings(true)}
                className="bg-white bg-opacity-20 p-2 rounded-full"
              >
                <Settings size={18} className="text-white" />
              </button>
            </div>
            <div className="flex justify-between items-center">
              <div>
                <p className="text-sm opacity-90">Dzień cyklu</p>
                <p className="text-2xl font-bold">{mockCycleData.currentDay}</p>
              </div>
              <div>
                <p className="text-sm opacity-90">Faza</p>
                <div className="flex items-center">
                  <p className="text-lg font-semibold capitalize">{mockCycleData.currentPhase}</p>
                  <button 
                    className="ml-1 opacity-80"
                    onClick={() => setShowPhaseInfo(true)}
                  >
                    <Info size={16} />
                  </button>
                </div>
              </div>
              <div>
                <p className="text-sm opacity-90">Następna miesiączka</p>
                <p className="text-lg font-semibold">{mockCycleData.nextPeriod}</p>
              </div>
            </div>
          </div>

          <div className="bg-white rounded-xl shadow-sm p-4">
            <h3 className="font-medium mb-4">Twój kalendarz cyklu</h3>
            <div className="relative h-16 mb-6">
              <div className="absolute inset-0 bg-gray-200 rounded-full"></div>
              {mockCycleData.predictedPhases.map((phase) => (
                <div 
                  key={phase.name}
                  className="absolute top-0 bottom-0 rounded-full"
                  style={{ 
                    left: `${((phase.start - 1) / mockCycleData.cycleLength) * 100}%`,
                    width: `${((phase.end - phase.start + 1) / mockCycleData.cycleLength) * 100}%`,
                    backgroundColor: phase.color
                  }}
                ></div>
              ))}
              <div className="absolute inset-0 flex items-center justify-between px-3">
                <span className="text-xs font-medium text-white">1</span>
                <div className="flex flex-col items-center">
                  <div className="w-6 h-6 rounded-full bg-white border-2 border-purple-600 flex items-center justify-center text-xs font-bold text-purple-600">
                    {mockCycleData.currentDay}
                  </div>
                  <span className="text-xs mt-1">Dziś</span>
                </div>
                <span className="text-xs font-medium">{mockCycleData.cycleLength}</span>
              </div>
            </div>
            
            <div className="flex space-x-2 mb-4">
              <div className="flex-1 bg-pink-100 rounded-lg p-3">
                <p className="text-xs text-pink-800 mb-1">Płodność</p>
                <p className="font-medium text-pink-900 capitalize">{mockCycleData.fertility}</p>
              </div>
              <div className="flex-1 bg-purple-100 rounded-lg p-3">
                <p className="text-xs text-purple-800 mb-1">Długość cyklu</p>
                <p className="font-medium text-purple-900">{mockCycleData.cycleLength} dni</p>
              </div>
            </div>
            
            <div className="space-y-3">
              <div className="flex justify-between items-center">
                <h4 className="text-sm font-medium">Fazy cyklu</h4>
              </div>
              <div className="space-y-2">
                {mockCycleData.predictedPhases.map((phase) => (
                  <div key={phase.name} className="flex items-center">
                    <div 
                      className="w-3 h-3 rounded-full mr-2"
                      style={{ backgroundColor: phase.color }}
                    ></div>
                    <span className="text-sm capitalize">{phase.name}</span>
                    <span className="text-xs text-gray-500 ml-auto">Dni {phase.start}-{phase.end}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <div className="bg-white rounded-xl shadow-sm p-4">
            <div className="flex justify-between items-center mb-3">
              <h3 className="font-medium">Rekomendacje dla Twojej fazy</h3>
              <button 
                className="text-purple-600 text-sm"
                onClick={() => setShowPhaseInfo(true)}
              >
                Więcej
              </button>
            </div>
            
            <div className="bg-purple-50 p-4 rounded-lg mb-4">
              <p className="text-sm">{mockPhaseRecommendations[mockCycleData.currentPhase].info}</p>
            </div>
            
            <div className="space-y-3">
              {mockPhaseRecommendations[mockCycleData.currentPhase].selfCare.slice(0, 3).map((rec, index) => (
                <div key={index} className="flex items-start">
                  <div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-3 flex-shrink-0">
                    <Check size={16} className="text-green-600" />
                  </div>
                  <p className="text-sm">{rec}</p>
                </div>
              ))}
            </div>
          </div>

          <div className="bg-white rounded-xl shadow-sm p-4">
            <div className="flex justify-between items-center mb-3">
              <h3 className="font-medium">Zaobserwowane objawy</h3>
              <button 
                className="text-purple-600 text-sm flex items-center"
                onClick={() => setShowSymptomTracker(true)}
              >
                <Plus size={16} className="mr-1" />
                Dodaj
              </button>
            </div>
            
            <div className="flex flex-wrap gap-2 mb-4">
              {mockCycleData.symptoms.map((symptom, index) => (
                <span key={index} className="bg-gray-100 text-gray-800 text-xs px-3 py-1 rounded-full">
                  {symptom}
                </span>
              ))}
              {mockCycleData.symptoms.length === 0 && (
                <p className="text-sm text-gray-500">Brak objawów na dziś. Dodaj swoje obserwacje.</p>
              )}
            </div>
            
            <div className="flex justify-between items-center">
              <h4 className="text-sm font-medium">Ostatnie wpisy</h4>
              <button className="text-purple-600 text-xs">Zobacz wszystkie</button>
            </div>
            
            <div className="space-y-2 mt-2">
              {mockCycleData.symptomHistory.slice(0, 3).map((entry, index) => (
                <div key={index} className="border border-gray-200 rounded-lg p-2">
                  <div className="flex justify-between items-center mb-1">
                    <span className="text-xs font-medium">{entry.date}</span>
                    {entry.flow && (
                      <span className="text-xs bg-red-100 text-red-800 px-2 py-0.5 rounded-full">
                        {entry.flow}
                      </span>
                    )}
                  </div>
                  <div className="flex flex-wrap gap-1">
                    {entry.symptoms.map((symptom, i) => (
                      <span key={i} className="text-xs bg-gray-100 px-2 py-0.5 rounded-full">
                        {symptom}
                      </span>
                    ))}
                    {entry.mood && (
                      <span className="text-xs bg-purple-100 text-purple-800 px-2 py-0.5 rounded-full ml-auto">
                        {entry.mood}
                      </span>
                    )}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      );
    };
    
    // Cycle Analysis Section
    const CycleAnalysis = () => {
      return (
        <div className="space-y-6">
          <div className="bg-gradient-to-r from-indigo-500 to-purple-600 rounded-xl p-4 text-white">
            <h2 className="text-xl font-semibold mb-2">Analiza Twojego cyklu</h2>
            <p className="text-sm opacity-90">Poznaj wzorce swojego organizmu</p>
          </div>

          <div className="bg-white rounded-xl shadow-sm p-4">
            <h3 className="font-medium mb-3">Statystyki cyklu</h3>
            <div className="grid grid-cols-2 gap-3 mb-4">
              <div className="bg-purple-50 p-3 rounded-lg">
                <p className="text-xs text-purple-800 mb-1">Średnia długość cyklu</p>
                <p className="font-medium text-purple-900">28.2 dni</p>
              </div>
              <div className="bg-pink-50 p-3 rounded-lg">
                <p className="text-xs text-pink-800 mb-1">Średnia długość miesiączki</p>
                <p className="font-medium text-pink-900">5.1 dni</p>
              </div>
              <div className="bg-blue-50 p-3 rounded-lg">
                <p className="text-xs text-blue-800 mb-1">Regularność cyklu</p>
                <p className="font-medium text-blue-900">Wysoka (±1 dzień)</p>
              </div>
              <div className="bg-green-50 p-3 rounded-lg">
                <p className="text-xs text-green-800 mb-1">Śledzenie od</p>
                <p className="font-medium text-green-900">6 miesięcy</p>
              </div>
            </div>
            
            <h4 className="text-sm font-medium mb-2">Historia długości cyklu</h4>
            <div className="h-40 mb-4">
              <ResponsiveContainer width="100%" height="100%">
                <BarChart data={mockCycleData.historicalCycles.map((cycle, index) => ({
                  month: cycle.startDate.split('.')[1] + '/' + cycle.startDate.split('.')[2].substring(2),
                  length: cycle.length
                }))} margin={{ top: 5, right: 5, bottom: 5, left: 0 }}>
                  <CartesianGrid strokeDasharray="3 3" vertical={false} />
                  <XAxis dataKey="month" axisLine={false} tickLine={false} />
                  <YAxis domain={[20, 35]} axisLine={false} tickLine={false} />
                  <Tooltip 
                    formatter={(value) => [`${value} dni`, 'Długość cyklu']}
                    contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' }}
                  />
                  <Bar dataKey="length" fill="#8884d8" radius={[4, 4, 0, 0]} />
                </BarChart>
              </ResponsiveContainer>
            </div>
          </div>

          <div className="bg-white rounded-xl shadow-sm p-4">
            <h3 className="font-medium mb-3">Najczęstsze objawy</h3>
            
            <div className="space-y-4">
              <div>
                <h4 className="text-sm font-medium mb-2">Faza menstruacyjna</h4>
                <div className="flex flex-wrap gap-2">
                  <span className="bg-red-100 text-red-800 text-xs px-3 py-1 rounded-full">ból brzucha (80%)</span>
                  <span className="bg-red-100 text-red-800 text-xs px-3 py-1 rounded-full">zmęczenie (65%)</span>
                  <span className="bg-red-100 text-red-800 text-xs px-3 py-1 rounded-full">ból głowy (40%)</span>
                </div>
              </div>
              
              <div>
                <h4 className="text-sm font-medium mb-2">Faza folikularna</h4>
                <div className="flex flex-wrap gap-2">
                  <span className="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">energia (70%)</span>
                  <span className="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">dobry nastrój (60%)</span>
                </div>
              </div>
              
              <div>
                <h4 className="text-sm font-medium mb-2">Faza owulacyjna</h4>
                <div className="flex flex-wrap gap-2">
                  <span className="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">zwiększone libido (75%)</span>
                  <span className="bg-green-100 text-green-800 text-xs px-3 py-1 rounded-full">wrażliwość piersi (50%)</span>
                </div>
              </div>
              
              <div>
                <h4 className="text-sm font-medium mb-2">Faza lutealna</h4>
                <div className="flex flex-wrap gap-2">
                  <span className="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">wzdęcia (65%)</span>
                  <span className="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">drażliwość (60%)</span>
                  <span className="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full">apetyt na słodycze (55%)</span>
                </div>
              </div>
            </div>
          </div>

          <div className="bg-white rounded-xl shadow-sm p-4">
            <h3 className="font-medium mb-3">Korelacje</h3>
            <p className="text-sm text-gray-600 mb-4">Zauważyliśmy następujące zależności w Twoich danych:</p>
            
            <div className="space-y-3">
              <div className="flex items-start">
                <div className="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-3 flex-shrink-0">
                  <Zap size={16} className="text-purple-600" />
                </div>
                <div>
                  <p className="text-sm font-medium">Aktywność fizyczna a nastrój</p>
                  <p className="text-xs text-gray-600">W dni, kiedy ćwiczysz, Twój nastrój jest lepszy, szczególnie w fazie lutealnej.</p>
                </div>
              </div>
              
              <div className="flex items-start">
                <div className="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3 flex-shrink-0">
                  <Coffee size={16} className="text-blue-600" />
                </div>
                <div>
                  <p className="text-sm font-medium">Kofeina a objawy PMS</p>
                  <p className="text-xs text-gray-600">Dni z wysokim spożyciem kofeiny korelują z silniejszymi objawami PMS w fazie lutealnej.</p>
                </div>
              </div>
              
              <div className="flex items-start">
                <div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-3 flex-shrink-0">
                  <Moon size={16} className="text-green-600" />
                </div>
                <div>
                  <p className="text-sm font-medium">Sen a energia</p>
                  <p className="text-xs text-gray-600">Dni z 7+ godzinami snu wiążą się z wyższym poziomem energii, szczególnie w fazie folikularnej.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      );
    };
    
    // Calendar Section
    const CycleCalendar = () => {
      const currentMonth = new Date().toLocaleString('pl-PL', { month: 'long', year: 'numeric' });
      const daysInMonth = 30; // Simplified for demo
      
      // Generate calendar days
      const calendarDays = Array.from({ length: daysInMonth }, (_, i) => {
        const day = i + 1;
        let phase = '';
        let phaseColor = '';
        
        // Determine phase for each day
        mockCycleData.predictedPhases.forEach(p => {
          if (day >= p.start && day <= p.end) {
            phase = p.name;
            phaseColor = p.color;
          }
        });
        
        // Check if there are symptoms for this day
        const daySymptoms = mockCycleData.symptomHistory.find(s => 
          parseInt(s.date.split('.')[0]) === day && 
          parseInt(s.date.split('.')[1]) === 6 // June
        );
        
        return { day, phase, phaseColor, hasSymptoms: !!daySymptoms, flow: daySymptoms?.flow };
      });
      
      return (
        <div className="space-y-6">
          <div className="bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl p-4 text-white">
            <h2 className="text-xl font-semibold mb-2">Kalendarz cyklu</h2>
            <p className="text-sm opacity-90">Planuj z wyprzedzeniem</p>
          </div>

          <div className="bg-white rounded-xl shadow-sm p-4">
            <div className="flex justify-between items-center mb-4">
              <button className="text-gray-500">
                <ArrowLeft size={20} />
              </button>
              <h3 className="font-medium">{currentMonth}</h3>
              <button className="text-gray-500">
                <ArrowRight size={20} />
              </button>
            </div>
            
            <div className="grid grid-cols-7 gap-1 mb-2">
              {['Pn', 'Wt', 'Śr', 'Cz', 'Pt', 'Sb', 'Nd'].map(day => (
                <div key={day} className="text-center text-xs font-medium text-gray-500">
                  {day}
                </div>
              ))}
            </div>
            
            <div className="grid grid-cols-7 gap-1">
              {/* Empty cells for days before month start (simplified) */}
              {[...Array(3)].map((_, i) => (
                <div key={`empty-${i}`} className="h-10"></div>
              ))}
              
              {calendarDays.map((day) => (
                <div 
                  key={day.day} 
                  className="h-10 rounded-lg flex items-center justify-center relative"
                  style={{ backgroundColor: day.phaseColor + '30' }} // Adding transparency
                >
                  <span className={`text-sm ${day.day === 14 ? 'font-bold' : ''}`}>
                    {day.day}
                  </span>
                  
                  {day.flow && (
                    <div 
                      className="absolute bottom-1 left-1/2 transform -translate-x-1/2 w-1.5 h-1.5 rounded-full"
                      style={{ backgroundColor: 
                        day.flow === 'Skąpe' ? '#FECACA' : 
                        day.flow === 'Średnie' ? '#EF4444' : 
                        day.flow === 'Obfite' ? '#B91C1C' : 
                        '#7F1D1D' // Bardzo obfite
                      }}
                    ></div>
                  )}
                  
                  {day.hasSymptoms && !day.flow && (
                    <div className="absolute bottom-1 left-1/2 transform -translate-x-1/2 w-1.5 h-1.5 rounded-full bg-gray-400"></div>
                  )}
                  
                  {day.day === 14 && (
                    <div className="absolute top-0 right-0 w-2 h-2 bg-purple-500 rounded-full"></div>
                  )}
                </div>
              ))}
            </div>
            
            <div className="mt-4 space-y-2">
              <div className="flex flex-wrap gap-x-4 gap-y-2">
                {mockCycleData.predictedPhases.map((phase) => (
                  <div key={phase.name} className="flex items-center">
                    <div 
                      className="w-3 h-3 rounded-full mr-1"
                      style={{ backgroundColor: phase.color }}
                    ></div>
                    <span className="text-xs capitalize">{phase.name}</span>
                  </div>
                ))}
              </div>
              
              <div className="flex flex-wrap gap-x-4 gap-y-2">
                <div className="flex items-center">
                  <div className="w-3 h-3 rounded-full mr-1 bg-red-500"></div>
                  <span className="text-xs">Miesiączka</span>
                </div>
                <div className="flex items-center">
                  <div className="w-3 h-3 rounded-full mr-1 bg-gray-400"></div>
                  <span className="text-xs">Objawy</span>
                </div>
                <div className="flex items-center">
                  <div className="w-3 h-3 rounded-full mr-1 bg-purple-500"></div>
                  <span className="text-xs">Dziś</span>
                </div>
              </div>
            </div>
          </div>

          <div className="bg-white rounded-xl shadow-sm p-4">
            <h3 className="font-medium mb-3">Nadchodzące wydarzenia</h3>
            
            <div className="space-y-3">
              <div className="border-l-4 border-red-500 pl-3 py-1">
                <p className="text-sm font-medium">Spodziewana miesiączka</p>
                <p className="text-xs text-gray-500">15 czerwca (za 10 dni)</p>
              </div>
              
              <div className="border-l-4 border-purple-500 pl-3 py-1">
                <p className="text-sm font-medium">Zmiana fazy: Lutealna</p>
                <p className="text-xs text-gray-500">5 czerwca (za 1 dzień)</p>
              </div>
              
              <div className="border-l-4 border-green-500 pl-3 py-1">
                <p className="text-sm font-medium">Badanie ginekologiczne</p>
                <p className="text-xs text-gray-500">20 czerwca (za 15 dni)</p>
              </div>
            </div>
            
            <button className="mt-4 border border-purple-500 text-purple-600 text-sm py-2 px-4 rounded-lg w-full flex items-center justify-center">
              <Plus size={16} className="mr-1" />
              Dodaj wydarzenie
            </button>
          </div>
        </div>
      );
    };
    
    // Symptom Tracker Section
    const SymptomTrackerSection = () => {
      return (
        <div className="space-y-6">
          <div className="bg-gradient-to-r from-green-500 to-teal-600 rounded-xl p-4 text-white">
            <h2 className="text-xl font-semibold mb-2">Śledzenie objawów</h2>
            <p className="text-sm opacity-90">Monitoruj swoje samopoczucie</p>
          </div>

          <div className="bg-white rounded-xl shadow-sm p-4">
            <div className="flex justify-between items-center mb-4">
              <h3 className="font-medium">Dodaj dzisiejsze objawy</h3>
              <button 
                className="bg-green-100 text-green-800 text-sm px-3 py-1 rounded-lg flex items-center"
                onClick={() => setShowSymptomTracker(true)}
              >
                <Plus size={16} className="mr-1" />
                Dodaj
              </button>
            </div>
            
            <div className="space-y-4">
              {mockSymptoms.map((category) => (
                <div key={category.id}>
                  <h4 className="text-sm font-medium mb-2">{category.category}</h4>
                  <div className="flex flex-wrap gap-2">
                    {category.options.map((symptom) => (
                      <button
                        key={symptom}
                        className="px-3 py-1 rounded-full text-xs bg-gray-100 text-gray-800"
                      >
                        {symptom}
                      </button>
                    ))}
                  </div>
                </div>
              ))}
              
              <div>
                <h4 className="text-sm font-medium mb-2">Intensywność krwawienia</h4>
                <div className="flex space-x-2">
                  {mockFlowOptions.map((option) => (
                    <button
                      key={option.id}
                      className="flex-1 py-2 rounded-lg text-xs bg-gray-100 text-gray-800"
                    >
                      {option.label}
                    </button>
                  ))}
                </div>
              </div>
              
              <div>
                <h4 className="text-sm font-medium mb-2">Nastrój</h4>
                <div className="grid grid-cols-4 gap-2">
                  {['Spokojna', 'Energiczna', 'Zmęczona', 'Rozdrażniona', 'Smutna', 'Szczęśliwa', 'Zestresowana', 'Neutralna'].map((mood) => (
                    <button
                      key={mood}
                      className="py-2 px-1 rounded-lg text-xs bg-gray-100 text-gray-800"
                    >
                      {mood}
                    </button>
                  ))}
                </div>
              </div>
            </div>
          </div>

          <div className="bg-white rounded-xl shadow-sm p-4">
            <h3 className="font-medium mb-3">Historia objawów</h3>
            
            <div className="space-y-3">
              {mockCycleData.symptomHistory.map((entry, index) => (
                <div key={index} className="border border-gray-200 rounded-lg p-3">
                  <div className="flex justify-between items-center mb-2">
                    <span className="text-sm font-medium">{entry.date}</span>
                    <div className="flex items-center space-x-2">
                      <button className="text-gray-500">
                        <Edit size={14} />
                      </button>
                      <button className="text-gray-500">
                        <Trash2 size={14} />
                      </button>
                    </div>
                  </div>
                  
                  <div className="grid grid-cols-2 gap-2 mb-2">
                    {entry.flow && (
                      <div>
                        <p className="text-xs text-gray-500">Krwawienie</p>
                        <p className="text-sm">{entry.flow}</p>
                      </div>
                    )}
                    
                    {entry.mood && (
                      <div>
                        <p className="text-xs text-gray-500">Nastrój</p>
                        <p className="text-sm">{entry.mood}</p>
                      </div>
                    )}
                  </div>
                  
                  {entry.symptoms.length > 0 && (
                    <div>
                      <p className="text-xs text-gray-500 mb-1">Objawy</p>
                      <div className="flex flex-wrap gap-1">
                        {entry.symptoms.map((symptom, i) => (
                          <span key={i} className="text-xs bg-gray-100 px-2 py-0.5 rounded-full">
                            {symptom}
                          </span>
                        ))}
                      </div>
                    </div>
                  )}
                </div>
              ))}
            </div>
          </div>
        </div>
      );
    };
    
    return (
      <div className="space-y-6">
        {/* Navigation tabs */}
        <div className="bg-white rounded-xl shadow-sm overflow-x-auto">
          <div className="flex min-w-max">
            <button 
              className={`px-4 py-3 text-sm font-medium ${activeCycleSection === 'overview' ? 'text-purple-600 border-b-2 border-purple-600' : 'text-gray-600'}`}
              onClick={() => setActiveCycleSection('overview')}
            >
              Przegląd
            </button>
            <button 
              className={`px-4 py-3 text-sm font-medium ${activeCycleSection === 'analysis' ? 'text-purple-600 border-b-2 border-purple-600' : 'text-gray-600'}`}
              onClick={() => setActiveCycleSection('analysis')}
            >
              Analiza
            </button>
            <button 
              className={`px-4 py-3 text-sm font-medium ${activeCycleSection === 'calendar' ? 'text-purple-600 border-b-2 border-purple-600' : 'text-gray-600'}`}
              onClick={() => setActiveCycleSection('calendar')}
            >
              Kalendarz
            </button>
            <button 
              className={`px-4 py-3 text-sm font-medium ${activeCycleSection === 'symptoms' ? 'text-purple-600 border-b-2 border-purple-600' : 'text-gray-600'}`}
              onClick={() => setActiveCycleSection('symptoms')}
            >
              Objawy
            </button>
          </div>
        </div>
        
        {/* Section content */}
        {activeCycleSection === 'overview' && <CycleOverview />}
        {activeCycleSection === 'analysis' && <CycleAnalysis />}
        {activeCycleSection === 'calendar' && <CycleCalendar />}
        {activeCycleSection === 'symptoms' && <SymptomTrackerSection />}
        
        {/* Modals */}
        {showSymptomTracker && <SymptomTracker />}
        {showPhaseInfo && <PhaseInfoModal />}
        {showCycleSettings && <CycleSettingsModal />}
      </div>
    );
  };

  // Sexual health tab content
  const SexualHealthTab = () => {
    return (
      <div className="space-y-6">
        <div className="bg-gradient-to-r from-red-400 to-pink-500 rounded-xl p-4 text-white">
          <h2 className="text-xl font-semibold mb-2">Zdrowie seksualne</h2>
          <p className="text-sm opacity-90">Zadbaj o swoją seksualność i dobre samopoczucie</p>
        </div>

        <div className="bg-white rounded-xl shadow-sm p-4">
          <h3 className="font-medium mb-3">Program odbudowy libido</h3>
          <p className="text-sm text-gray-600 mb-4">Codzienny program ćwiczeń i technik, które pomogą Ci odbudować libido i poprawić satysfakcję z życia seksualnego.</p>
          <div className="bg-pink-50 rounded-lg p-4 mb-4">
            <h4 className="text-sm font-medium text-pink-800 mb-2">Dzisiejsze ćwiczenie</h4>
            <p className="text-sm mb-3">Mindfulness ciała - 10-minutowa medytacja skupiona na odczuwaniu własnego ciała i akceptacji.</p>
            <button className="bg-pink-500 text-white text-sm py-2 px-4 rounded-lg w-full">Rozpocznij ćwiczenie</button>
          </div>
          <div className="flex justify-between">
            <button className="text-pink-600 text-sm flex items-center">
              <BookOpen size={16} className="mr-1" />
              Materiały edukacyjne
            </button>
            <button className="text-pink-600 text-sm flex items-center">
              Pełny program
              <ChevronRight size={16} className="ml-1" />
            </button>
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-sm p-4">
          <h3 className="font-medium mb-3">Ćwiczenia mięśni dna miednicy</h3>
          <div className="flex items-center justify-between mb-4">
            <div>
              <p className="text-sm text-gray-600">Twój postęp w tym tygodniu</p>
              <div className="flex items-center mt-1">
                <div className="w-full bg-gray-200 rounded-full h-2 mr-2 max-w-[120px]">
                  <div className="h-2 rounded-full bg-purple-500" style={{ width: '60%' }}></div>
                </div>
                <span className="text-sm font-medium">3/5 dni</span>
              </div>
            </div>
            <button className="bg-purple-100 text-purple-800 py-2 px-4 rounded-lg text-sm">Ćwicz teraz</button>
          </div>
          <p className="text-xs text-gray-500">Regularne ćwiczenia mięśni dna miednicy mogą pomóc w zapobieganiu problemom z nietrzymaniem moczu oraz poprawić doznania seksualne.</p>
        </div>

        <div className="bg-white rounded-xl shadow-sm p-4">
          <h3 className="font-medium mb-3">Materiały edukacyjne</h3>
          <div className="space-y-3">
            <div className="border border-gray-200 rounded-lg p-3">
              <h4 className="text-sm font-medium mb-1">Anatomia kobiecej przyjemności</h4>
              <p className="text-xs text-gray-600 mb-2">Poznaj swoje ciało i odkryj, co sprawia Ci przyjemność.</p>
              <button className="text-purple-600 text-xs flex items-center">
                Czytaj więcej
                <ChevronRight size={14} className="ml-1" />
              </button>
            </div>
            <div className="border border-gray-200 rounded-lg p-3">
              <h4 className="text-sm font-medium mb-1">Komunikacja w sypialni</h4>
              <p className="text-xs text-gray-600 mb-2">Jak rozmawiać o swoich potrzebach i preferencjach z partnerem.</p>
              <button className="text-purple-600 text-xs flex items-center">
                Czytaj więcej
                <ChevronRight size={14} className="ml-1" />
              </button>
            </div>
            <div className="border border-gray-200 rounded-lg p-3">
              <h4 className="text-sm font-medium mb-1">Wpływ hormonów na libido</h4>
              <p className="text-xs text-gray-600 mb-2">Zrozum, jak hormony wpływają na Twoje pożądanie seksualne.</p>
              <button className="text-purple-600 text-xs flex items-center">
                Czytaj więcej
                <ChevronRight size={14} className="ml-1" />
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  };

  // Prevention tab content
  const PreventionTab = () => {
    return (
      <div className="space-y-6">
        <div className="bg-gradient-to-r from-green-500 to-teal-600 rounded-xl p-4 text-white">
          <h2 className="text-xl font-semibold mb-2">Profilaktyka zdrowotna</h2>
          <p className="text-sm opacity-90">Regularne badania to klucz do zdrowia</p>
        </div>

        <div className="bg-white rounded-xl shadow-sm p-4">
          <h3 className="font-medium mb-3">Nadchodzące badania</h3>
          <div className="space-y-3">
            {mockPreventiveExams.map((exam) => (
              <div key={exam.id} className="border border-gray-200 rounded-lg p-3 flex items-center">
                <div className={`w-2 h-10 rounded-full mr-3 ${
                  exam.priority === 'wysoki' ? 'bg-red-500' : 
                  exam.priority === 'średni' ? 'bg-yellow-500' : 
                  'bg-green-500'
                }`}></div>
                <div className="flex-grow">
                  <h4 className="text-sm font-medium">{exam.name}</h4>
                  <p className="text-xs text-gray-500">Zaplanowane na: {exam.date}</p>
                </div>
                <button className="text-teal-600 text-xs">Szczegóły</button>
              </div>
            ))}
          </div>
          <button className="mt-4 border border-teal-500 text-teal-600 text-sm py-2 px-4 rounded-lg w-full flex items-center justify-center">
            <Plus size={16} className="mr-1" />
            Dodaj badanie
          </button>
        </div>

        <div className="bg-white rounded-xl shadow-sm p-4">
          <h3 className="font-medium mb-3">Rekomendowane badania dla Twojego wieku</h3>
          <div className="space-y-3">
            <div className="bg-green-50 border border-green-200 rounded-lg p-3">
              <div className="flex justify-between items-start mb-2">
                <h4 className="text-sm font-medium text-green-800">Cytologia</h4>
                <span className="text-xs bg-green-200 text-green-800 px-2 py-1 rounded-full">Co 3 lata</span>
              </div>
              <p className="text-xs text-gray-600 mb-2">Badanie pozwalające wykryć zmiany przedrakowe i raka szyjki macicy we wczesnym stadium.</p>
              <button className="text-green-600 text-xs flex items-center">
                Dowiedz się więcej
                <ChevronRight size={14} className="ml-1" />
              </button>
            </div>
            <div className="bg-green-50 border border-green-200 rounded-lg p-3">
              <div className="flex justify-between items-start mb-2">
                <h4 className="text-sm font-medium text-green-800">Badanie piersi</h4>
                <span className="text-xs bg-green-200 text-green-800 px-2 py-1 rounded-full">Co rok</span>
              </div>
              <p className="text-xs text-gray-600 mb-2">USG lub mammografia w zależności od wieku. Kluczowe dla wczesnego wykrywania raka piersi.</p>
              <button className="text-green-600 text-xs flex items-center">
                Dowiedz się więcej
                <ChevronRight size={14} className="ml-1" />
              </button>
            </div>
            <div className="bg-green-50 border border-green-200 rounded-lg p-3">
              <div className="flex justify-between items-start mb-2">
                <h4 className="text-sm font-medium text-green-800">Morfologia krwi</h4>
                <span className="text-xs bg-green-200 text-green-800 px-2 py-1 rounded-full">Co rok</span>
              </div>
              <p className="text-xs text-gray-600 mb-2">Podstawowe badanie krwi pozwalające ocenić ogólny stan zdrowia i wykryć wiele chorób.</p>
              <button className="text-green-600 text-xs flex items-center">
                Dowiedz się więcej
                <ChevronRight size={14} className="ml-1" />
              </button>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-sm p-4">
          <h3 className="font-medium mb-3">Historia badań</h3>
          <p className="text-sm text-gray-600 mb-3">Tutaj możesz przechowywać wyniki swoich badań i obserwować trendy zdrowotne.</p>
          <button className="border border-gray-300 text-gray-700 text-sm py-2 px-4 rounded-lg w-full flex items-center justify-center">
            <Plus size={16} className="mr-1" />
            Dodaj wyniki badań
          </button>
        </div>
      </div>
    );
  };

  // Settings tab content
  const SettingsTab = () => {
    return (
      <div className="space-y-6">
        <div className="bg-gradient-to-r from-gray-700 to-gray-900 rounded-xl p-4 text-white">
          <h2 className="text-xl font-semibold mb-2">Ustawienia</h2>
          <p className="text-sm opacity-90">Dostosuj aplikację do swoich potrzeb</p>
        </div>

        <div className="bg-white rounded-xl shadow-sm p-4">
          <h3 className="font-medium mb-3">Preferencje aplikacji</h3>
          <div className="space-y-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium">Motyw</p>
                <p className="text-xs text-gray-500">Jasny / Ciemny</p>
              </div>
              <select 
                className="bg-gray-100 border-0 rounded-lg text-sm p-2"
                value={userPreferences.theme}
                onChange={(e) => setUserPreferences({...userPreferences, theme: e.target.value})}
              >
                <option value="light">Jasny</option>
                <option value="dark">Ciemny</option>
                <option value="system">Systemowy</option>
              </select>
            </div>
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium">Powiadomienia</p>
                <p className="text-xs text-gray-500">Włącz/wyłącz powiadomienia</p>
              </div>
              <div 
                className={`w-12 h-6 rounded-full flex items-center p-1 cursor-pointer ${userPreferences.notifications ? 'bg-purple-500 justify-end' : 'bg-gray-300 justify-start'}`}
                onClick={() => setUserPreferences({...userPreferences, notifications: !userPreferences.notifications})}
              >
                <div className="w-4 h-4 rounded-full bg-white"></div>
              </div>
            </div>
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium">Tryb prywatny</p>
                <p className="text-xs text-gray-500">Ukryj wrażliwe informacje</p>
              </div>
              <div 
                className={`w-12 h-6 rounded-full flex items-center p-1 cursor-pointer ${userPreferences.privacyMode ? 'bg-purple-500 justify-end' : 'bg-gray-300 justify-start'}`}
                onClick={() => setUserPreferences({...userPreferences, privacyMode: !userPreferences.privacyMode})}
              >
                <div className="w-4 h-4 rounded-full bg-white"></div>
              </div>
            </div>
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium">Język</p>
                <p className="text-xs text-gray-500">Wybierz język aplikacji</p>
              </div>
              <select 
                className="bg-gray-100 border-0 rounded-lg text-sm p-2"
                value={userPreferences.language}
                onChange={(e) => setUserPreferences({...userPreferences, language: e.target.value})}
              >
                <option value="polski">Polski</option>
                <option value="english">English</option>
              </select>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-sm p-4">
          <h3 className="font-medium mb-3">Profil użytkownika</h3>
          <div className="space-y-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium">Typ użytkownika</p>
                <p className="text-xs text-gray-500">Dostosuj funkcje do swoich potrzeb</p>
              </div>
              <select 
                className="bg-gray-100 border-0 rounded-lg text-sm p-2"
                value={userData.userType}
                onChange={(e) => handleUserTypeChange(e.target.value)}
              >
                <option value="regular">Standardowy</option>
                <option value="trans">Kobieta trans</option>
                <option value="postmenopausal">Po menopauzie</option>
              </select>
            </div>
            
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium">Śledzenie cyklu</p>
                <p className="text-xs text-gray-500">Włącz/wyłącz funkcje cyklu</p>
              </div>
              <div 
                className={`w-12 h-6 rounded-full flex items-center p-1 cursor-pointer ${userData.trackPeriod ? 'bg-purple-500 justify-end' : 'bg-gray-300 justify-start'}`}
                onClick={() => setUserData({...userData, trackPeriod: !userData.trackPeriod})}
              >
                <div className="w-4 h-4 rounded-full bg-white"></div>
              </div>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-sm p-4">
          <h3 className="font-medium mb-3">Konto i prywatność</h3>
          <div className="space-y-3">
            <button className="flex items-center justify-between w-full p-3 border border-gray-200 rounded-lg">
              <span className="text-sm">Edytuj profil</span>
              <ChevronRight size={16} className="text-gray-500" />
            </button>
            <button className="flex items-center justify-between w-full p-3 border border-gray-200 rounded-lg">
              <span className="text-sm">Zmień hasło</span>
              <ChevronRight size={16} className="text-gray-500" />
            </button>
            <button className="flex items-center justify-between w-full p-3 border border-gray-200 rounded-lg">
              <span className="text-sm">Eksportuj dane</span>
              <ChevronRight size={16} className="text-gray-500" />
            </button>
            <button className="flex items-center justify-between w-full p-3 border border-gray-200 rounded-lg">
              <span className="text-sm text-red-500">Usuń konto</span>
              <ChevronRight size={16} className="text-gray-500" />
            </button>
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-sm p-4">
          <h3 className="font-medium mb-3">O aplikacji</h3>
          <div className="space-y-3">
            <button className="flex items-center justify-between w-full p-3 border border-gray-200 rounded-lg">
              <span className="text-sm">Warunki korzystania</span>
              <ChevronRight size={16} className="text-gray-500" />
            </button>
            <button className="flex items-center justify-between w-full p-3 border border-gray-200 rounded-lg">
              <span className="text-sm">Polityka prywatności</span>
              <ChevronRight size={16} className="text-gray-500" />
            </button>
            <button className="flex items-center justify-between w-full p-3 border border-gray-200 rounded-lg">
              <span className="text-sm">Pomoc i wsparcie</span>
              <ChevronRight size={16} className="text-gray-500" />
            </button>
            <div className="p-3 text-center">
              <p className="text-xs text-gray-500">Wellness Asystentka v1.0.0</p>
            </div>
          </div>
        </div>
      </div>
    );
  };

  // Community tab content
  const CommunityTab = () => {
    return (
      <div className="space-y-6">
        <div className="bg-gradient-to-r from-blue-500 to-indigo-600 rounded-xl p-4 text-white">
          <h2 className="text-xl font-semibold mb-2">Społeczność</h2>
          <p className="text-sm opacity-90">Połącz się z innymi kobietami i znajdź wsparcie</p>
        </div>

        <div className="bg-white rounded-xl shadow-sm p-4">
          <h3 className="font-medium mb-3">Popularne grupy</h3>
          <div className="space-y-3">
            <div className="border border-gray-200 rounded-lg p-3">
              <h4 className="text-sm font-medium mb-1">Zdrowie hormonalne</h4>
              <p className="text-xs text-gray-600 mb-2">Dyskusje o równowadze hormonalnej, PCOS, endometriozie i innych zagadnieniach.</p>
              <div className="flex justify-between items-center">
                <span className="text-xs text-gray-500">1.2k członkiń</span>
                <button className="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Dołącz</button>
              </div>
            </div>
            <div className="border border-gray-200 rounded-lg p-3">
              <h4 className="text-sm font-medium mb-1">Menopauza i perimenopausa</h4>
              <p className="text-xs text-gray-600 mb-2">Wsparcie i porady dla kobiet przechodzących menopauzę.</p>
              <div className="flex justify-between items-center">
                <span className="text-xs text-gray-500">856 członkiń</span>
                <button className="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Dołącz</button>
              </div>
            </div>
            <div className="border border-gray-200 rounded-lg p-3">
              <h4 className="text-sm font-medium mb-1">Zdrowe odżywianie</h4>
              <p className="text-xs text-gray-600 mb-2">Przepisy, porady i wsparcie w zdrowym odżywianiu.</p>
              <div className="flex justify-between items-center">
                <span className="text-xs text-gray-500">2.3k członkiń</span>
                <button className="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Dołącz</button>
              </div>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-sm p-4">
          <h3 className="font-medium mb-3">Eksperci</h3>
          <p className="text-sm text-gray-600 mb-3">Zweryfikowani specjaliści, którzy odpowiadają na pytania społeczności</p>
          <div className="space-y-3">
            <div className="flex items-center p-3 border border-gray-200 rounded-lg">
              <div className="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-3">
                <User size={24} className="text-purple-600" />
              </div>
              <div className="flex-grow">
                <h4 className="text-sm font-medium">dr Anna Kowalska</h4>
                <p className="text-xs text-gray-500">Ginekolog, specjalistka zdrowia kobiet</p>
              </div>
              <button className="text-purple-600 text-xs">Profil</button>
            </div>
            <div className="flex items-center p-3 border border-gray-200 rounded-lg">
              <div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                <User size={24} className="text-blue-600" />
              </div>
              <div className="flex-grow">
                <h4 className="text-sm font-medium">mgr Joanna Nowak</h4>
                <p className="text-xs text-gray-500">Dietetyk kliniczny, specjalistka żywienia kobiet</p>
              </div>
              <button className="text-purple-600 text-xs">Profil</button>
            </div>
            <div className="flex items-center p-3 border border-gray-200 rounded-lg">
              <div className="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mr-3">
                <User size={24} className="text-green-600" />
              </div>
              <div className="flex-grow">
                <h4 className="text-sm font-medium">dr Marek Wiśniewski</h4>
                <p className="text-xs text-gray-500">Endokrynolog, specjalista zdrowia hormonalnego</p>
              </div>
              <button className="text-purple-600 text-xs">Profil</button>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-sm p-4">
          <h3 className="font-medium mb-3">Ostatnie dyskusje</h3>
          <div className="space-y-3">
            <div className="p-3 border border-gray-200 rounded-lg">
              <h4 className="text-sm font-medium mb-1">Jak radzicie sobie z bezsennością w okresie menopauzy?</h4>
              <div className="flex justify-between items-center mb-2">
                <span className="text-xs text-gray-500">Grupa: Menopauza i perimenopausa</span>
                <span className="text-xs text-gray-500">23 odpowiedzi</span>
              </div>
              <button className="text-purple-600 text-xs flex items-center">
                Zobacz dyskusję
                <ChevronRight size={14} className="ml-1" />
              </button>
            </div>
            <div className="p-3 border border-gray-200 rounded-lg">
              <h4 className="text-sm font-medium mb-1">Polecane suplementy na poprawę libido?</h4>
              <div className="flex justify-between items-center mb-2">
                <span className="text-xs text-gray-500">Grupa: Zdrowie seksualne</span>
                <span className="text-xs text-gray-500">17 odpowiedzi</span>
              </div>
              <button className="text-purple-600 text-xs flex items-center">
                Zobacz dyskusję
                <ChevronRight size={14} className="ml-1" />
              </button>
            </div>
          </div>
          <button className="mt-4 border border-purple-500 text-purple-600 text-sm py-2 px-4 rounded-lg w-full flex items-center justify-center">
            <Plus size={16} className="mr-1" />
            Rozpocznij nową dyskusję
          </button>
        </div>
      </div>
    );
  };
  
  // Trans Women Health Tab
  const TransHealthTab = () => {
    return (
      <div className="space-y-6">
        <div className="bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl p-4 text-white">
          <h2 className="text-xl font-semibold mb-2">Zdrowie kobiet trans</h2>
          <p className="text-sm opacity-90">Spersonalizowane wsparcie dla Twojego zdrowia i dobrostanu</p>
        </div>
        
        <div className="bg-white rounded-xl shadow-sm p-4">
          <div className="flex justify-between items-center mb-4">
            <h3 className="font-medium">Twoje sekcje</h3>
            <p className="text-xs text-gray-500">Dostosowane do Twoich potrzeb</p>
          </div>
          
          <div className="space-y-3">
            {Object.keys(mockTransWomenContent).map((key) => {
              const section = mockTransWomenContent[key];
              return (
                <div key={key} className="border border-gray-200 rounded-lg overflow-hidden">
                  <button 
                    className="w-full p-3 flex justify-between items-center"
                    onClick={() => toggleSpecialSection(key)}
                  >
                    <span className="font-medium text-sm">{section.title}</span>
                    {activeSpecialSection === key ? 
                      <ChevronUp size={18} className="text-purple-500" /> : 
                      <ChevronDown size={18} className="text-gray-500" />
                    }
                  </button>
                  
                  {activeSpecialSection === key && (
                    <div className="p-3 pt-0 border-t border-gray-200">
                      <p className="text-sm text-gray-600 mb-3">{section.info}</p>
                      <h4 className="text-xs font-medium text-gray-700 mb-2">Rekomendacje:</h4>
                      <ul className="space-y-2">
                        {section.recommendations.map((rec, index) => (
                          <li key={index} className="flex items-start">
                            <Check size={14} className="text-green-500 mr-2 mt-0.5 flex-shrink-0" />
                            <span className="text-xs">{rec}</span>
                          </li>
                        ))}
                      </ul>
                      <button className="mt-3 text-purple-600 text-xs flex items-center">
                        Dowiedz się więcej
                        <ChevronRight size={14} className="ml-1" />
                      </button>
                    </div>
                  )}
                </div>
              );
            })}
          </div>
        </div>
        
        <div className="bg-white rounded-xl shadow-sm p-4">
          <h3 className="font-medium mb-3">Twój dziennik zdrowia</h3>
          <p className="text-sm text-gray-600 mb-3">Monitoruj swoje samopoczucie i zmiany związane z HTZ</p>
          
          <div className="space-y-3">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium">Dzisiejszy nastrój</p>
                <div className="flex mt-1">
                  <button className="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-1">
                    <Smile size={18} className="text-purple-600" />
                  </button>
                  <button className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mr-1">
                    <Frown size={18} className="text-gray-400" />
                  </button>
                </div>
              </div>
              <div>
                <p className="text-sm font-medium">Poziom energii</p>
                <div className="flex mt-1">
                  <button className="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mr-1">
                    <Zap size={18} className="text-gray-400" />
                  </button>
                  <button className="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center mr-1">
                    <Zap size={18} className="text-yellow-600" />
                  </button>
                </div>
              </div>
              <div>
                <p className="text-sm font-medium">Stres</p>
                <div className="flex mt-1">
                  <button className="w-8 h-8<ant_artifact identifier="ant_001" title="Updated Wellness App React Component">
import React, { useState, useEffect } from 'react';
import { BarChart, LineChart, Line, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
import { Calendar, Clock, Heart, Droplet, Moon, Activity, User, Settings, BookOpen, MessageCircle, Bell, Menu, X, ChevronRight, Plus, Check } from 'lucide-react';

// Mock data for demonstration
const mockSleepData = [
  { day: 'Pon', hours: 7.5 },
  { day: 'Wt', hours: 6.8 },
  { day: 'Śr', hours: 7.2 },
  { day: 'Czw', hours: 8.0 },
  { day: 'Pt', hours: 6.5 },
  { day: 'Sob', hours: 7.8 },
  { day: 'Ndz', hours: 8.5 },
];

const mockMoodData = [
  { day: 'Pon', level: 7 },
  { day: 'Wt', level: 6 },
  { day: 'Śr', level: 8 },
  { day: 'Czw', level: 7 },
  { day: 'Pt', level: 5 },
  { day: 'Sob', level: 9 },
  { day: 'Ndz', level: 8 },
];

const mockCycleData = {
  cycleLength: 28,
  currentDay: 14,
  periodLength: 5,
  nextPeriod: '15.06.2024',
  fertility: 'wysoka',
  symptoms: ['wrażliwość piersi', 'zmiany nastroju']
};

const mockHabits = [
  { id: 1, name: 'Woda', icon: 'Droplet', target: 8, current: 5, unit: 'szklanek' },
  { id: 2, name: 'Aktywność', icon: 'Activity', target: 30, current: 15, unit: 'minut' },
  { id: 3, name: 'Sen', icon: 'Moon', target: 8, current: 7, unit: 'godzin' },
  { id: 4, name: 'Medytacja', icon: 'Heart', target: 10, current: 5, unit: 'minut' },
];

const mockReminders = [
  { id: 1, time: '10:00', text: 'Wypij szklankę wody', completed: true },
  { id: 2, time: '12:30', text: 'Zrób przerwę od komputera', completed: false },
  { id: 3, time: '15:00', text: 'Krótki spacer', completed: false },
  { id: 4, time: '18:00', text: 'Ćwiczenia mięśni dna miednicy', completed: false },
];

const mockPreventiveExams = [
  { id: 1, name: 'Cytologia', date: '15.07.2024', priority: 'wysoki' },
  { id: 2, name: 'Badanie krwi', date: '03.08.2024', priority: 'średni' },
  { id: 3, name: 'USG piersi', date: '22.09.2024', priority: 'średni' },
];

export default function WellnessApp() {
  const [activeTab, setActiveTab] = useState('dashboard');
  const [showMenu, setShowMenu] = useState(false);
  const [waterIntake, setWaterIntake] = useState(5);
  const [showOnboarding, setShowOnboarding] = useState(true);
  const [onboardingStep, setOnboardingStep] = useState(1);
  const [userData, setUserData] = useState({
    name: '',
    age: '',
    goals: [],
    trackPeriod: null,
    sleepHours: '',
    activityLevel: ''
  });
  const [userPreferences, setUserPreferences] = useState({
    theme: 'light',
    notifications: true,
    privacyMode: false,
    language: 'polski'
  });

  const handleOnboardingNext = () => {
    if (onboardingStep < 5) {
      setOnboardingStep(onboardingStep + 1);
    } else {
      setShowOnboarding(false);
      // Here we would normally save the user data to the backend
      console.log("User data collected:", userData);
    }
  };

  const handleGoalToggle = (goal) => {
    if (userData.goals.includes(goal)) {
      setUserData({
        ...userData,
        goals: userData.goals.filter(g => g !== goal)
      });
    } else {
      setUserData({
        ...userData,
        goals: [...userData.goals, goal]
      });
    }
  };

  const incrementWater = () => {
    if (waterIntake < 8) {
      setWaterIntake(waterIntake + 1);
      // Update the mock habits data
      const updatedHabits = [...mockHabits];
      const waterHabit = updatedHabits.find(h => h.name === 'Woda');
      if (waterHabit) {
        waterHabit.current = waterIntake + 1;
      }
    }
  };

  const toggleReminder = (id) => {
    const updatedReminders = mockReminders.map(reminder => 
      reminder.id === id ? { ...reminder, completed: !reminder.completed } : reminder
    );
    // In a real app, we would update the state here
    console.log("Updated reminders:", updatedReminders);
  };

  // Onboarding component
  const Onboarding = () => {
    return (
      <div className="fixed inset-0 bg-white z-50 flex flex-col items-center justify-between p-6">
        <div className="w-full max-w-md">
          <div className="flex justify-between items-center mb-8">
            <div className="h-1 bg-gray-200 flex-grow rounded-full">
              <div 
                className="h-1 bg-purple-500 rounded-full" 
                style={{ width: `${onboardingStep * 20}%` }}
              ></div>
            </div>
            <span className="ml-3 text-sm text-gray-500">{onboardingStep}/5</span>
          </div>

          {onboardingStep === 1 && (
            <div className="space-y-6">
              <h2 className="text-2xl font-semibold text-purple-800">Witaj w Wellness Asystentce!</h2>
              <p className="text-gray-600">Pomożemy Ci stworzyć spersonalizowane doświadczenie wellness. Zacznijmy od podstawowych informacji.</p>
              <div className="space-y-4">
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Jak mamy się do Ciebie zwracać?</label>
                  <input 
                    type="text" 
                    className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                    placeholder="Twoje imię"
                    value={userData.name}
                    onChange={(e) => setUserData({...userData, name: e.target.value})}
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-1">Twój wiek</label>
                  <select 
                    className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                    value={userData.age}
                    onChange={(e) => setUserData({...userData, age: e.target.value})}
                  >
                    <option value="">Wybierz przedział</option>
                    <option value="18-25">18-25</option>
                    <option value="26-35">26-35</option>
                    <option value="36-45">36-45</option>
                    <option value="46-55">46-55</option>
                    <option value="56-65">56-65</option>
                    <option value="65+">65+</option>
                  </select>
                </div>
              </div>
            </div>
          )}

          {onboardingStep === 2 && (
            <div className="space-y-6">
              <h2 className="text-2xl font-semibold text-purple-800">Twoje cele wellness</h2>
              <p className="text-gray-600">Wybierz obszary, na których najbardziej Ci zależy:</p>
              <div className="space-y-3">
                {['Lepszy sen', 'Więcej ruchu', 'Zdrowe odżywianie', 'Redukcja stresu', 'Zdrowie reprodukcyjne', 'Zdrowie seksualne', 'Profilaktyka zdrowotna'].map((goal) => (
                  <div 
                    key={goal}
                    className={`p-3 border rounded-lg flex items-center justify-between cursor-pointer ${userData.goals.includes(goal) ? 'border-purple-500 bg-purple-50' : 'border-gray-300'}`}
                    onClick={() => handleGoalToggle(goal)}
                  >
                    <span>{goal}</span>
                    {userData.goals.includes(goal) && <Check size={20} className="text-purple-500" />}
                  </div>
                ))}
              </div>
            </div>
          )}

          {onboardingStep === 3 && (
            <div className="space-y-6">
              <h2 className="text-2xl font-semibold text-purple-800">Zdrowie reprodukcyjne</h2>
              <p className="text-gray-600">Czy chcesz śledzić swój cykl menstruacyjny?</p>
              <div className="space-y-3">
                <div 
                  className={`p-3 border rounded-lg flex items-center justify-between cursor-pointer ${userData.trackPeriod === true ? 'border-purple-500 bg-purple-50' : 'border-gray-300'}`}
                  onClick={() => setUserData({...userData, trackPeriod: true})}
                >
                  <span>Tak, chcę śledzić cykl</span>
                  {userData.trackPeriod === true && <Check size={20} className="text-purple-500" />}
                </div>
                <div 
                  className={`p-3 border rounded-lg flex items-center justify-between cursor-pointer ${userData.trackPeriod === false ? 'border-purple-500 bg-purple-50' : 'border-gray-300'}`}
                  onClick={() => setUserData({...userData, trackPeriod: false})}
                >
                  <span>Nie, pomińmy tę funkcję</span>
                  {userData.trackPeriod === false && <Check size={20} className="text-purple-500" />}
                </div>
              </div>
            </div>
          )}

          {onboardingStep === 4 && (
            <div className="space-y-6">
              <h2 className="text-2xl font-semibold text-purple-800">Twoje nawyki snu</h2>
              <p className="text-gray-600">Ile godzin snu potrzebujesz, aby czuć się wypoczęta?</p>
              <div>
                <select 
                  className="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
                  value={userData.sleepHours}
                  onChange={(e) => setUserData({...userData, sleepHours: e.target.value})}
                >
                  <option value="">Wybierz liczbę godzin</option>
                  <option value="5-6">5-6 godzin</option>
                  <option value="7-8">7-8 godzin</option>
                  <option value="9+">9+ godzin</option>
                </select>
              </div>
            </div>
          )}

          {onboardingStep === 5 && (
            <div className="space-y-6">
              <h2 className="text-2xl font-semibold text-purple-800">Poziom aktywności</h2>
              <p className="text-gray-600">Jak oceniasz swój obecny poziom aktywności fizycznej?</p>
              <div className="space-y-3">
                {['Niski - mało się ruszam', 'Średni - czasem ćwiczę', 'Wysoki - regularnie trenuję'].map((level) => (
                  <div 
                    key={level}
                    className={`p-3 border rounded-lg flex items-center justify-between cursor-pointer ${userData.activityLevel === level ? 'border-purple-500 bg-purple-50' : 'border-gray-300'}`}
                    onClick={() => setUserData({...userData, activityLevel: level})}
                  >
                    <span>{level}</span>
                    {userData.activityLevel === level && <Check size={20} className="text-purple-500" />}
                  </div>
                ))}
              </div>
            </div>
          )}
        </div>

        <button 
          className="w-full max-w-md mt-8 bg-purple-600 text-white py-3 px-6 rounded-lg font-medium hover:bg-purple-700 transition-colors"
          onClick={handleOnboardingNext}
        >
          {onboardingStep === 5 ? 'Rozpocznij' : 'Dalej'}
        </button>
      </div>
    );
  };

  // Side menu component
  const SideMenu = () => {
    return (
      <div className={`fixed inset-0 bg-black bg-opacity-50 z-40 transition-opacity ${showMenu ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}>
        <div className={`absolute top-0 left-0 h-full w-3/4 max-w-xs bg-white shadow-xl transform transition-transform ${showMenu ? 'translate-x-0' : '-translate-x-full'}`}>
          <div className="p-4 border-b flex justify-between items-center">
            <h2 className="text-xl font-semibold text-purple-800">Menu</h2>
            <button onClick={() => setShowMenu(false)} className="text-gray-500">
              <X size={24} />
            </button>
          </div>
          
          <div className="p-4">
            <div className="flex items-center space-x-3 mb-6">
              <div className="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center">
                <User size={24} className="text-purple-600" />
              </div>
              <div>
                <p className="font-medium">{userData.name || 'Użytkowniczka'}</p>
                <p className="text-sm text-gray-500">{userData.age || '26-35'} lat</p>
              </div>
            </div>
            
            <nav className="space-y-1">
              {[
                { icon: <Activity size={20} />, label: 'Dashboard', id: 'dashboard' },
                { icon: <Calendar size={20} />, label: 'Kalendarz cyklu', id: 'cycle' },
                { icon: <Heart size={20} />, label: 'Zdrowie seksualne', id: 'sexual-health' },
                { icon: <BookOpen size={20} />, label: 'Profilaktyka', id: 'prevention' },
                { icon: <MessageCircle size={20} />, label: 'Społeczność', id: 'community' },
                { icon: <Settings size={20} />, label: 'Ustawienia', id: 'settings' },
              ].map((item) => (
                <button
                  key={item.id}
                  className={`flex items-center space-x-3 w-full p-3 rounded-lg ${activeTab === item.id ? 'bg-purple-100 text-purple-800' : 'text-gray-700 hover:bg-gray-100'}`}
                  onClick={() => {
                    setActiveTab(item.id);
                    setShowMenu(false);
                  }}
                >
                  <span className={activeTab === item.id ? 'text-purple-600' : 'text-gray-500'}>
                    {item.icon}
                  </span>
                  <span>{item.label}</span>
                </button>
              ))}
            </nav>
          </div>
        </div>
      </div>
    );
  };

  // Dashboard tab content
  const DashboardTab = () => {
    return (
      <div className="space-y-6">
        <div className="bg-gradient-to-r from-purple-500 to-indigo-600 rounded-xl p-4 text-white">
          <p className="text-sm opacity-90">Dzień dobry,</p>
          <h2 className="text-xl font-semibold mb-2">{userData.name || 'Użytkowniczko'}!</h2>
          <p className="text-sm opacity-90">Dziś jest dobry dzień, aby zadbać o siebie.</p>
        </div>

        <div className="bg-white rounded-xl shadow-sm p-4">
          <div className="flex justify-between items-center mb-3">
            <h3 className="font-medium">Twoje dzisiejsze nawyki</h3>
            <button className="text-purple-600 text-sm">Edytuj</button>
          </div>
          <div className="space-y-4">
            {mockHabits.map((habit) => (
              <div key={habit.id} className="flex items-center">
                <div className="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center mr-3">
                  {habit.icon === 'Droplet' && <Droplet size={20} className="text-blue-500" />}
                  {habit.icon === 'Activity' && <Activity size={20} className="text-green-500" />}
                  {habit.icon === 'Moon' && <Moon size={20} className="text-indigo-500" />}
                  {habit.icon === 'Heart' && <Heart size={20} className="text-red-500" />}
                </div>
                <div className="flex-grow">
                  <div className="flex justify-between">
                    <span className="text-sm font-medium">{habit.name}</span>
                    <span className="text-sm text-gray-500">{habit.current}/{habit.target} {habit.unit}</span>
                  </div>
                  <div className="w-full bg-gray-200 rounded-full h-2 mt-1">
                    <div 
                      className={`h-2 rounded-full ${
                        habit.icon === 'Droplet' ? 'bg-blue-500' : 
                        habit.icon === 'Activity' ? 'bg-green-500' : 
                        habit.icon === 'Moon' ? 'bg-indigo-500' : 
                        'bg-red-500'
                      }`}
                      style={{ width: `${(habit.current / habit.target) * 100}%` }}
                    ></div>
                  </div>
                </div>
                {habit.name === 'Woda' && (
                  <button 
                    onClick={incrementWater}
                    className="ml-2 w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-500"
                  >
                    <Plus size={16} />
                  </button>
                )}
              </div>
            ))}
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-sm p-4">
          <div className="flex justify-between items-center mb-3">
            <h3 className="font-medium">Twój sen w tym tygodniu</h3>
            <button className="text-purple-600 text-sm">Szczegóły</button>
          </div>
          <div className="h-40">
            <ResponsiveContainer width="100%" height="100%">
              <BarChart data={mockSleepData} margin={{ top: 5, right: 5, bottom: 5, left: 0 }}>
                <CartesianGrid strokeDasharray="3 3" vertical={false} />
                <XAxis dataKey="day" axisLine={false} tickLine={false} />
                <YAxis hide={true} domain={[0, 10]} />
                <Tooltip 
                  formatter={(value) => [`${value} godz`, 'Sen']}
                  contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' }}
                />
                <Bar dataKey="hours" fill="#8884d8" radius={[4, 4, 0, 0]} />
              </BarChart>
            </ResponsiveContainer>
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-sm p-4">
          <div className="flex justify-between items-center mb-3">
            <h3 className="font-medium">Dzisiejsze przypomnienia</h3>
            <button className="text-purple-600 text-sm">Wszystkie</button>
          </div>
          <div className="space-y-3">
            {mockReminders.map((reminder) => (
              <div 
                key={reminder.id} 
                className={`flex items-center p-3 rounded-lg border ${reminder.completed ? 'border-gray-200 bg-gray-50' : 'border-purple-200 bg-purple-50'}`}
                onClick={() => toggleReminder(reminder.id)}
              >
                <div className={`w-5 h-5 rounded-full border flex items-center justify-center mr-3 ${reminder.completed ? 'border-gray-400 bg-gray-200' : 'border-purple-500'}`}>
                  {reminder.completed && <Check size={12} className="text-gray-500" />}
                </div>
                <div className="flex-grow">
                  <p className={`text-sm ${reminder.completed ? 'text-gray-500 line-through' : 'text-gray-800'}`}>{reminder.text}</p>
                </div>
                <div className="text-xs text-gray-500 flex items-center">
                  <Clock size={12} className="mr-1" />
                  {reminder.time}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  };

  // Cycle tracking tab content
  const CycleTab = () => {
    return (
      <div className="space-y-6">
        <div className="bg-gradient-to-r from-pink-500 to-purple-600 rounded-xl p-4 text-white">
          <h2 className="text-xl font-semibold mb-2">Twój cykl</h2>
          <div className="flex justify-between items-center">
            <div>
              <p className="text-sm opacity-90">Dzień cyklu</p>
              <p className="text-2xl font-bold">{mockCycleData.currentDay}</p>
            </div>
            <div>
              <p className="text-sm opacity-90">Następna miesiączka</p>
              <p className="text-lg font-semibold">{mockCycleData.nextPeriod}</p>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-sm p-4">
          <h3 className="font-medium mb-3">Twój kalendarz cyklu</h3>
          <div className="relative h-16 mb-4">
            <div className="absolute inset-0 bg-gray-200 rounded-full"></div>
            <div 
              className="absolute top-0 bottom-0 left-0 bg-pink-500 rounded-full"
              style={{ width: `${(mockCycleData.currentDay / mockCycleData.cycleLength) * 100}%` }}
            ></div>
            <div className="absolute inset-0 flex items-center justify-between px-3">
              <span className="text-xs font-medium text-white">1</span>
              <div className="flex flex-col items-center">
                <div className="w-6 h-6 rounded-full bg-white border-2 border-pink-500 flex items-center justify-center text-xs font-bold text-pink-500">
                  {mockCycleData.currentDay}
                </div>
                <span className="text-xs mt-1">Dziś</span>
              </div>
              <span className="text-xs font-medium">{mockCycleData.cycleLength}</span>
            </div>
          </div>
          <div className="flex space-x-2 mb-4">
            <div className="flex-1 bg-pink-100 rounded-lg p-3">
              <p className="text-xs text-pink-800 mb-1">Płodność</p>
              <p className="font-medium text-pink-900 capitalize">{mockCycleData.fertility}</p>
            </div>
            <div className="flex-1 bg-purple-100 rounded-lg p-3">
              <p className="text-xs text-purple-800 mb-1">Długość cyklu</p>
              <p className="font-medium text-purple-900">{mockCycleData.cycleLength} dni</p>
            </div>
          </div>
          <h4 className="text-sm font-medium mb-2">Zaobserwowane objawy</h4>
          <div className="flex flex-wrap gap-2">
            {mockCycleData.symptoms.map((symptom, index) => (
              <span key={index} className="bg-gray-100 text-gray-800 text-xs px-3 py-1 rounded-full">
                {symptom}
              </span>
            ))}
            <button className="bg-purple-100 text-purple-800 text-xs px-3 py-1 rounded-full flex items-center">
              <Plus size={12} className="mr-1" />
              Dodaj
            </button>
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-sm p-4">
          <h3 className="font-medium mb-3">Twój nastrój w tym cyklu</h3>
          <div className="h-40">
            <ResponsiveContainer width="100%" height="100%">
              <LineChart data={mockMoodData} margin={{ top: 5, right: 5, bottom: 5, left: 0 }}>
                <CartesianGrid strokeDasharray="3 3" vertical={false} />
                <XAxis dataKey="day" axisLine={false} tickLine={false} />
                <YAxis hide={true} domain={[0, 10]} />
                <Tooltip 
                  formatter={(value) => [`${value}/10`, 'Nastrój']}
                  contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' }}
                />
                <Line type="monotone" dataKey="level" stroke="#8884d8" strokeWidth={2} dot={{ r: 4 }} activeDot={{ r: 6 }} />
              </LineChart>
            </ResponsiveContainer>
          </div>
        </div>
      </div>
    );
  };

  // Sexual health tab content
  const SexualHealthTab = () => {
    return (
      <div className="space-y-6">
        <div className="bg-gradient-to-r from-red-400 to-pink-500 rounded-xl p-4 text-white">
          <h2 className="text-xl font-semibold mb-2">Zdrowie seksualne</h2>
          <p className="text-sm opacity-90">Zadbaj o swoją seksualność i dobre samopoczucie</p>
        </div>

        <div className="bg-white rounded-xl shadow-sm p-4">
          <h3 className="font-medium mb-3">Program odbudowy libido</h3>
          <p className="text-sm text-gray-600 mb-4">Codzienny program ćwiczeń i technik, które pomogą Ci odbudować libido i poprawić satysfakcję z życia seksualnego.</p>
          <div className="bg-pink-50 rounded-lg p-4 mb-4">
            <h4 className="text-sm font-medium text-pink-800 mb-2">Dzisiejsze ćwiczenie</h4>
            <p className="text-sm mb-3">Mindfulness ciała - 10-minutowa medytacja skupiona na odczuwaniu własnego ciała i akceptacji.</p>
            <button className="bg-pink-500 text-white text-sm py-2 px-4 rounded-lg w-full">Rozpocznij ćwiczenie</button>
          </div>
          <div className="flex justify-between">
            <button className="text-pink-600 text-sm flex items-center">
              <BookOpen size={16} className="mr-1" />
              Materiały edukacyjne
            </button>
            <button className="text-pink-600 text-sm flex items-center">
              Pełny program
              <ChevronRight size={16} className="ml-1" />
            </button>
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-sm p-4">
          <h3 className="font-medium mb-3">Ćwiczenia mięśni dna miednicy</h3>
          <div className="flex items-center justify-between mb-4">
            <div>
              <p className="text-sm text-gray-600">Twój postęp w tym tygodniu</p>
              <div className="flex items-center mt-1">
                <div className="w-full bg-gray-200 rounded-full h-2 mr-2 max-w-[120px]">
                  <div className="h-2 rounded-full bg-purple-500" style={{ width: '60%' }}></div>
                </div>
                <span className="text-sm font-medium">3/5 dni</span>
              </div>
            </div>
            <button className="bg-purple-100 text-purple-800 py-2 px-4 rounded-lg text-sm">Ćwicz teraz</button>
          </div>
          <p className="text-xs text-gray-500">Regularne ćwiczenia mięśni dna miednicy mogą pomóc w zapobieganiu problemom z nietrzymaniem moczu oraz poprawić doznania seksualne.</p>
        </div>

        <div className="bg-white rounded-xl shadow-sm p-4">
          <h3 className="font-medium mb-3">Materiały edukacyjne</h3>
          <div className="space-y-3">
            <div className="border border-gray-200 rounded-lg p-3">
              <h4 className="text-sm font-medium mb-1">Anatomia kobiecej przyjemności</h4>
              <p className="text-xs text-gray-600 mb-2">Poznaj swoje ciało i odkryj, co sprawia Ci przyjemność.</p>
              <button className="text-purple-600 text-xs flex items-center">
                Czytaj więcej
                <ChevronRight size={14} className="ml-1" />
              </button>
            </div>
            <div className="border border-gray-200 rounded-lg p-3">
              <h4 className="text-sm font-medium mb-1">Komunikacja w sypialni</h4>
              <p className="text-xs text-gray-600 mb-2">Jak rozmawiać o swoich potrzebach i preferencjach z partnerem.</p>
              <button className="text-purple-600 text-xs flex items-center">
                Czytaj więcej
                <ChevronRight size={14} className="ml-1" />
              </button>
            </div>
            <div className="border border-gray-200 rounded-lg p-3">
              <h4 className="text-sm font-medium mb-1">Wpływ hormonów na libido</h4>
              <p className="text-xs text-gray-600 mb-2">Zrozum, jak hormony wpływają na Twoje pożądanie seksualne.</p>
              <button className="text-purple-600 text-xs flex items-center">
                Czytaj więcej
                <ChevronRight size={14} className="ml-1" />
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  };

  // Prevention tab content
  const PreventionTab = () => {
    return (
      <div className="space-y-6">
        <div className="bg-gradient-to-r from-green-500 to-teal-600 rounded-xl p-4 text-white">
          <h2 className="text-xl font-semibold mb-2">Profilaktyka zdrowotna</h2>
          <p className="text-sm opacity-90">Regularne badania to klucz do zdrowia</p>
        </div>

        <div className="bg-white rounded-xl shadow-sm p-4">
          <h3 className="font-medium mb-3">Nadchodzące badania</h3>
          <div className="space-y-3">
            {mockPreventiveExams.map((exam) => (
              <div key={exam.id} className="border border-gray-200 rounded-lg p-3 flex items-center">
                <div className={`w-2 h-10 rounded-full mr-3 ${
                  exam.priority === 'wysoki' ? 'bg-red-500' : 
                  exam.priority === 'średni' ? 'bg-yellow-500' : 
                  'bg-green-500'
                }`}></div>
                <div className="flex-grow">
                  <h4 className="text-sm font-medium">{exam.name}</h4>
                  <p className="text-xs text-gray-500">Zaplanowane na: {exam.date}</p>
                </div>
                <button className="text-teal-600 text-xs">Szczegóły</button>
              </div>
            ))}
          </div>
          <button className="mt-4 border border-teal-500 text-teal-600 text-sm py-2 px-4 rounded-lg w-full flex items-center justify-center">
            <Plus size={16} className="mr-1" />
            Dodaj badanie
          </button>
        </div>

        <div className="bg-white rounded-xl shadow-sm p-4">
          <h3 className="font-medium mb-3">Rekomendowane badania dla Twojego wieku</h3>
          <div className="space-y-3">
            <div className="bg-green-50 border border-green-200 rounded-lg p-3">
              <div className="flex justify-between items-start mb-2">
                <h4 className="text-sm font-medium text-green-800">Cytologia</h4>
                <span className="text-xs bg-green-200 text-green-800 px-2 py-1 rounded-full">Co 3 lata</span>
              </div>
              <p className="text-xs text-gray-600 mb-2">Badanie pozwalające wykryć zmiany przedrakowe i raka szyjki macicy we wczesnym stadium.</p>
              <button className="text-green-600 text-xs flex items-center">
                Dowiedz się więcej
                <ChevronRight size={14} className="ml-1" />
              </button>
            </div>
            <div className="bg-green-50 border border-green-200 rounded-lg p-3">
              <div className="flex justify-between items-start mb-2">
                <h4 className="text-sm font-medium text-green-800">Badanie piersi</h4>
                <span className="text-xs bg-green-200 text-green-800 px-2 py-1 rounded-full">Co rok</span>
              </div>
              <p className="text-xs text-gray-600 mb-2">USG lub mammografia w zależności od wieku. Kluczowe dla wczesnego wykrywania raka piersi.</p>
              <button className="text-green-600 text-xs flex items-center">
                Dowiedz się więcej
                <ChevronRight size={14} className="ml-1" />
              </button>
            </div>
            <div className="bg-green-50 border border-green-200 rounded-lg p-3">
              <div className="flex justify-between items-start mb-2">
                <h4 className="text-sm font-medium text-green-800">Morfologia krwi</h4>
                <span className="text-xs bg-green-200 text-green-800 px-2 py-1 rounded-full">Co rok</span>
              </div>
              <p className="text-xs text-gray-600 mb-2">Podstawowe badanie krwi pozwalające ocenić ogólny stan zdrowia i wykryć wiele chorób.</p>
              <button className="text-green-600 text-xs flex items-center">
                Dowiedz się więcej
                <ChevronRight size={14} className="ml-1" />
              </button>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-sm p-4">
          <h3 className="font-medium mb-3">Historia badań</h3>
          <p className="text-sm text-gray-600 mb-3">Tutaj możesz przechowywać wyniki swoich badań i obserwować trendy zdrowotne.</p>
          <button className="border border-gray-300 text-gray-700 text-sm py-2 px-4 rounded-lg w-full flex items-center justify-center">
            <Plus size={16} className="mr-1" />
            Dodaj wyniki badań
          </button>
        </div>
      </div>
    );
  };

  // Settings tab content
  const SettingsTab = () => {
    return (
      <div className="space-y-6">
        <div className="bg-gradient-to-r from-gray-700 to-gray-900 rounded-xl p-4 text-white">
          <h2 className="text-xl font-semibold mb-2">Ustawienia</h2>
          <p className="text-sm opacity-90">Dostosuj aplikację do swoich potrzeb</p>
        </div>

        <div className="bg-white rounded-xl shadow-sm p-4">
          <h3 className="font-medium mb-3">Preferencje aplikacji</h3>
          <div className="space-y-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium">Motyw</p>
                <p className="text-xs text-gray-500">Jasny / Ciemny</p>
              </div>
              <select 
                className="bg-gray-100 border-0 rounded-lg text-sm p-2"
                value={userPreferences.theme}
                onChange={(e) => setUserPreferences({...userPreferences, theme: e.target.value})}
              >
                <option value="light">Jasny</option>
                <option value="dark">Ciemny</option>
                <option value="system">Systemowy</option>
              </select>
            </div>
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium">Powiadomienia</p>
                <p className="text-xs text-gray-500">Włącz/wyłącz powiadomienia</p>
              </div>
              <div 
                className={`w-12 h-6 rounded-full flex items-center p-1 cursor-pointer ${userPreferences.notifications ? 'bg-purple-500 justify-end' : 'bg-gray-300 justify-start'}`}
                onClick={() => setUserPreferences({...userPreferences, notifications: !userPreferences.notifications})}
              >
                <div className="w-4 h-4 rounded-full bg-white"></div>
              </div>
            </div>
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium">Tryb prywatny</p>
                <p className="text-xs text-gray-500">Ukryj wrażliwe informacje</p>
              </div>
              <div 
                className={`w-12 h-6 rounded-full flex items-center p-1 cursor-pointer ${userPreferences.privacyMode ? 'bg-purple-500 justify-end' : 'bg-gray-300 justify-start'}`}
                onClick={() => setUserPreferences({...userPreferences, privacyMode: !userPreferences.privacyMode})}
              >
                <div className="w-4 h-4 rounded-full bg-white"></div>
              </div>
            </div>
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm font-medium">Język</p>
                <p className="text-xs text-gray-500">Wybierz język aplikacji</p>
              </div>
              <select 
                className="bg-gray-100 border-0 rounded-lg text-sm p-2"
                value={userPreferences.language}
                onChange={(e) => setUserPreferences({...userPreferences, language: e.target.value})}
              >
                <option value="polski">Polski</option>
                <option value="english">English</option>
              </select>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-sm p-4">
          <h3 className="font-medium mb-3">Konto i prywatność</h3>
          <div className="space-y-3">
            <button className="flex items-center justify-between w-full p-3 border border-gray-200 rounded-lg">
              <span className="text-sm">Edytuj profil</span>
              <ChevronRight size={16} className="text-gray-500" />
            </button>
            <button className="flex items-center justify-between w-full p-3 border border-gray-200 rounded-lg">
              <span className="text-sm">Zmień hasło</span>
              <ChevronRight size={16} className="text-gray-500" />
            </button>
            <button className="flex items-center justify-between w-full p-3 border border-gray-200 rounded-lg">
              <span className="text-sm">Eksportuj dane</span>
              <ChevronRight size={16} className="text-gray-500" />
            </button>
            <button className="flex items-center justify-between w-full p-3 border border-gray-200 rounded-lg">
              <span className="text-sm text-red-500">Usuń konto</span>
              <ChevronRight size={16} className="text-gray-500" />
            </button>
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-sm p-4">
          <h3 className="font-medium mb-3">O aplikacji</h3>
          <div className="space-y-3">
            <button className="flex items-center justify-between w-full p-3 border border-gray-200 rounded-lg">
              <span className="text-sm">Warunki korzystania</span>
              <ChevronRight size={16} className="text-gray-500" />
            </button>
            <button className="flex items-center justify-between w-full p-3 border border-gray-200 rounded-lg">
              <span className="text-sm">Polityka prywatności</span>
              <ChevronRight size={16} className="text-gray-500" />
            </button>
            <button className="flex items-center justify-between w-full p-3 border border-gray-200 rounded-lg">
              <span className="text-sm">Pomoc i wsparcie</span>
              <ChevronRight size={16} className="text-gray-500" />
            </button>
            <div className="p-3 text-center">
              <p className="text-xs text-gray-500">Wellness Asystentka v1.0.0</p>
            </div>
          </div>
        </div>
      </div>
    );
  };

  // Community tab content
  const CommunityTab = () => {
    return (
      <div className="space-y-6">
        <div className="bg-gradient-to-r from-blue-500 to-indigo-600 rounded-xl p-4 text-white">
          <h2 className="text-xl font-semibold mb-2">Społeczność</h2>
          <p className="text-sm opacity-90">Połącz się z innymi kobietami i znajdź wsparcie</p>
        </div>

        <div className="bg-white rounded-xl shadow-sm p-4">
          <h3 className="font-medium mb-3">Popularne grupy</h3>
          <div className="space-y-3">
            <div className="border border-gray-200 rounded-lg p-3">
              <h4 className="text-sm font-medium mb-1">Zdrowie hormonalne</h4>
              <p className="text-xs text-gray-600 mb-2">Dyskusje o równowadze hormonalnej, PCOS, endometriozie i innych zagadnieniach.</p>
              <div className="flex justify-between items-center">
                <span className="text-xs text-gray-500">1.2k członkiń</span>
                <button className="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Dołącz</button>
              </div>
            </div>
            <div className="border border-gray-200 rounded-lg p-3">
              <h4 className="text-sm font-medium mb-1">Menopauza i perimenopausa</h4>
              <p className="text-xs text-gray-600 mb-2">Wsparcie i porady dla kobiet przechodzących menopauzę.</p>
              <div className="flex justify-between items-center">
                <span className="text-xs text-gray-500">856 członkiń</span>
                <button className="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Dołącz</button>
              </div>
            </div>
            <div className="border border-gray-200 rounded-lg p-3">
              <h4 className="text-sm font-medium mb-1">Zdrowe odżywianie</h4>
              <p className="text-xs text-gray-600 mb-2">Przepisy, porady i wsparcie w zdrowym odżywianiu.</p>
              <div className="flex justify-between items-center">
                <span className="text-xs text-gray-500">2.3k członkiń</span>
                <button className="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Dołącz</button>
              </div>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-sm p-4">
          <h3 className="font-medium mb-3">Eksperci</h3>
          <p className="text-sm text-gray-600 mb-3">Zweryfikowani specjaliści, którzy odpowiadają na pytania społeczności</p>
          <div className="space-y-3">
            <div className="flex items-center p-3 border border-gray-200 rounded-lg">
              <div className="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center mr-3">
                <User size={24} className="text-purple-600" />
              </div>
              <div className="flex-grow">
                <h4 className="text-sm font-medium">dr Anna Kowalska</h4>
                <p className="text-xs text-gray-500">Ginekolog, specjalistka zdrowia kobiet</p>
              </div>
              <button className="text-purple-600 text-xs">Profil</button>
            </div>
            <div className="flex items-center p-3 border border-gray-200 rounded-lg">
              <div className="w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                <User size={24} className="text-blue-600" />
              </div>
              <div className="flex-grow">
                <h4 className="text-sm font-medium">mgr Joanna Nowak</h4>
                <p className="text-xs text-gray-500">Dietetyk kliniczny, specjalistka żywienia kobiet</p>
              </div>
              <button className="text-purple-600 text-xs">Profil</button>
            </div>
            <div className="flex items-center p-3 border border-gray-200 rounded-lg">
              <div className="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center mr-3">
                <User size={24} className="text-green-600" />
              </div>
              <div className="flex-grow">
                <h4 className="text-sm font-medium">dr Marek Wiśniewski</h4>
                <p className="text-xs text-gray-500">Endokrynolog, specjalista zdrowia hormonalnego</p>
              </div>
              <button className="text-purple-600 text-xs">Profil</button>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-xl shadow-sm p-4">
          <h3 className="font-medium mb-3">Ostatnie dyskusje</h3>
          <div className="space-y-3">
            <div className="p-3 border border-gray-200 rounded-lg">
              <h4 className="text-sm font-medium mb-1">Jak radzicie sobie z bezsennością w okresie menopauzy?</h4>
              <div className="flex justify-between items-center mb-2">
                <span className="text-xs text-gray-500">Grupa: Menopauza i perimenopausa</span>
                <span className="text-xs text-gray-500">23 odpowiedzi</span>
              </div>
              <button className="text-purple-600 text-xs flex items-center">
                Zobacz dyskusję
                <ChevronRight size={14} className="ml-1" />
              </button>
            </div>
            <div className="p-3 border border-gray-200 rounded-lg">
              <h4 className="text-sm font-medium mb-1">Polecane suplementy na poprawę libido?</h4>
              <div className="flex justify-between items-center mb-2">
                <span className="text-xs text-gray-500">Grupa: Zdrowie seksualne</span>
                <span className="text-xs text-gray-500">17 odpowiedzi</span>
              </div>
              <button className="text-purple-600 text-xs flex items-center">
                Zobacz dyskusję
                <ChevronRight size={14} className="ml-1" />
              </button>
            </div>
          </div>
          <button className="mt-4 border border-purple-500 text-purple-600 text-sm py-2 px-4 rounded-lg w-full flex items-center justify-center">
            <Plus size={16} className="mr-1" />
            Rozpocznij nową dyskusję
          </button>
        </div>
      </div>
    );
  };

  return (
    <div className="bg-gray-100 min-h-screen text-gray-800 font-sans">
      {showOnboarding && <Onboarding />}
      
      <SideMenu />
      
      <header className="bg-white p-4 flex justify-between items-center sticky top-0 z-10 shadow-sm">
        <button onClick={() => setShowMenu(true)} className="text-gray-700">
          <Menu size={24} />
        </button>
        <h1 className="text-lg font-semibold text-purple-800">Wellness Asystentka</h1>
        <button className="text-gray-700">
          <Bell size={24} />
        </button>
      </header>
      
      <main className="p-4 pb-20">
        {activeTab === 'dashboard' && <DashboardTab />}
        {activeTab === 'cycle' && <CycleTab />}
        {activeTab === 'sexual-health' && <SexualHealthTab />}
        {activeTab === 'prevention' && <PreventionTab />}
        {activeTab === 'settings' && <SettingsTab />}
        {activeTab === 'community' && <CommunityTab />}
      </main>
      
      <nav className="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 flex justify-around items-center p-2 z-10">
        <button 
          onClick={() => setActiveTab('dashboard')} 
          className={`p-2 rounded-lg flex flex-col items-center ${activeTab === 'dashboard' ? 'text-purple-600' : 'text-gray-500'}`}
        >
          <Activity size={20} />
          <span className="text-xs mt-1">Dashboard</span>
        </button>
        <button 
          onClick={() => setActiveTab('cycle')} 
          className={`p-2 rounded-lg flex flex-col items-center ${activeTab === 'cycle' ? 'text-purple-600' : 'text-gray-500'}`}
        >
          <Calendar size={20} />
          <span className="text-xs mt-1">Cykl</span>
        </button>
        <button 
          onClick={() => setActiveTab('sexual-health')} 
          className={`p-2 rounded-lg flex flex-col items-center ${activeTab === 'sexual-health' ? 'text-purple-600' : 'text-gray-500'}`}
        >
          <Heart size={20} />
          <span className="text-xs mt-1">Seksualność</span>
        </button>
        <button 
          onClick={() => setActiveTab('prevention')} 
          className={`p-2 rounded-lg flex flex-col items-center ${activeTab === 'prevention' ? 'text-purple-600' : 'text-gray-500'}`}
        >
          <BookOpen size={20} />
          <span className="text-xs mt-1">Profilaktyka</span>
        </button>
        <button 
          onClick={() => setActiveTab('community')} 
          className={`p-2 rounded-lg flex flex-col items-center ${activeTab === 'community' ? 'text-purple-600' : 'text-gray-500'}`}
        >
          <MessageCircle size={20} />
          <span className="text-xs mt-1">Społeczność</span>
        </button>
      </nav>
    </div>
  );
}