import React, { useState, useEffect } from 'react';
import { Calendar, CheckCircle, Clock, BookOpen, Star, Sparkles, Filter, ChevronRight, GraduationCap, Globe } from 'lucide-react';
// Hora base: 14:00 CDMX (UTC-6)
// Se agrega la hora exacta a las fechas para poder convertir zonas horarias
const TIME_OFFSET = 'T14:00:00-06:00';
const scheduleData = [
// Reiki Usui Nivel 1
{ id: 1, date: `2026-01-20${TIME_OFFSET}`, title: 'Reiki, Características y Beneficios', module: 'Reiki Usui Nivel 1', type: 'class' },
{ id: 2, date: `2026-01-27${TIME_OFFSET}`, title: 'Canalización y Autorreiki', module: 'Reiki Usui Nivel 1', type: 'class' },
{ id: 3, date: `2026-02-03${TIME_OFFSET}`, title: 'Historia y linaje del Reiki', module: 'Reiki Usui Nivel 1', type: 'class' },
{ id: 4, date: `2026-02-10${TIME_OFFSET}`, title: 'Principios del Reiki y técnicas fundamentales', module: 'Reiki Usui Nivel 1', type: 'class' },
{ id: 5, date: `2026-02-17${TIME_OFFSET}`, title: 'Reiki a otras personas', module: 'Reiki Usui Nivel 1', type: 'class' },
{ id: 6, date: `2026-02-24${TIME_OFFSET}`, title: 'Símbolo 1 y sus usos', module: 'Reiki Usui Nivel 1', type: 'class' },
// Reiki Usui Nivel 2
{ id: 7, date: `2026-03-03${TIME_OFFSET}`, title: 'Símbolo 2, Sanación Mental y Emocional', module: 'Reiki Usui Nivel 2', type: 'class' },
{ id: 8, date: `2026-03-10${TIME_OFFSET}`, title: 'Símbolo 3, Sanación a Distancia, al Pasado y al Futuro', module: 'Reiki Usui Nivel 2', type: 'class' },
// Reiki Usui Nivel Master
{ id: 9, date: `2026-03-17${TIME_OFFSET}`, title: 'Ser Reiki Master Hoy', module: 'Reiki Usui Nivel Master', type: 'class' },
{ id: 10, date: `2026-03-24${TIME_OFFSET}`, title: 'Receso (Descanso)', module: 'Reiki Usui Nivel Master', type: 'break' },
{ id: 11, date: `2026-03-31${TIME_OFFSET}`, title: 'Símbolo Maestro: Auto realización e iluminación', module: 'Reiki Usui Nivel Master', type: 'class' },
{ id: 12, date: `2026-04-07${TIME_OFFSET}`, title: 'Técnicas Avanzadas', module: 'Reiki Usui Nivel Master', type: 'class' },
{ id: 13, date: `2026-04-14${TIME_OFFSET}`, title: 'Todas las sintonizaciones del Reiki Usui', module: 'Reiki Usui Nivel Master', type: 'class' },
// Técnicas Japonesas
{ id: 14, date: `2026-04-21${TIME_OFFSET}`, title: 'Técnicas japonesas Básicas', module: 'Técnicas Japonesas', type: 'class' },
{ id: 15, date: `2026-04-28${TIME_OFFSET}`, title: 'Técnicas japonesas intermedias', module: 'Técnicas Japonesas', type: 'class' },
{ id: 16, date: `2026-05-05${TIME_OFFSET}`, title: 'Reiki Japones Avanzado', module: 'Técnicas Japonesas', type: 'class' },
];
const modules = [
'Todos',
'Reiki Usui Nivel 1',
'Reiki Usui Nivel 2',
'Reiki Usui Nivel Master',
'Técnicas Japonesas'
];
export default function App() {
const [filter, setFilter] = useState('Todos');
// MODIFICACIÓN: Inicializar estado leyendo de localStorage si existe
const [completed, setCompleted] = useState(() => {
try {
const saved = localStorage.getItem('reiki-diplomado-progress');
return saved ? JSON.parse(saved) : [];
} catch (e) {
return [];
}
});
const [nextClass, setNextClass] = useState(null);
const [userTimeZone, setUserTimeZone] = useState('');
// MODIFICACIÓN: Guardar en localStorage cada vez que completed cambie
useEffect(() => {
localStorage.setItem('reiki-diplomado-progress', JSON.stringify(completed));
}, [completed]);
// Calcular progreso, próxima clase y detectar zona horaria
useEffect(() => {
// Detectar zona horaria del usuario
const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
setUserTimeZone(tz);
// Simular fecha actual para demo (digamos que es 15 de Enero 2026)
const today = new Date('2026-01-15T00:00:00');
const upcoming = scheduleData.find(item => new Date(item.date) >= today);
setNextClass(upcoming);
}, []);
const toggleComplete = (id: number) => {
if (completed.includes(id)) {
setCompleted(completed.filter(c => c !== id));
} else {
setCompleted([...completed, id]);
}
};
const filteredData = filter === 'Todos'
? scheduleData
: scheduleData.filter(item => item.module === filter);
const progress = Math.round((completed.length / scheduleData.filter(d => d.type === 'class').length) * 100);
const getModuleColor = (mod: string) => {
switch(mod) {
case 'Reiki Usui Nivel 1': return 'bg-emerald-100 text-emerald-800 border-emerald-200';
case 'Reiki Usui Nivel 2': return 'bg-blue-100 text-blue-800 border-blue-200';
case 'Reiki Usui Nivel Master': return 'bg-orange-100 text-[#ec7520] border-orange-200'; // Actualizado a Naranja
case 'Técnicas Japonesas': return 'bg-rose-100 text-rose-800 border-rose-200';
default: return 'bg-gray-100 text-gray-800';
}
};
const formatDate = (dateStr: string) => {
const date = new Date(dateStr);
return new Intl.DateTimeFormat('es-MX', { day: 'numeric', month: 'long' }).format(date);
};
const formatLocalTime = (dateStr: string) => {
const date = new Date(dateStr);
// Formato de hora local del usuario
return new Intl.DateTimeFormat('es-MX', {
hour: '2-digit',
minute: '2-digit',
hour12: true
}).format(date);
};
// Color principal naranja
const primaryColor = '#ec7520';
return (
{/* Header Banner */}
);
} Diplomado Reiki Master
Progreso del curso
{progress}%
Próxima sesión
{formatDate(nextClass.date)}
{nextClass.title}
{/* Navigation Tabs */}
{modules.map((mod) => (
))}
{/* Content Grid */}
{filteredData.map((item) => {
const localTime = formatLocalTime(item.date);
const isMexicoTime = userTimeZone.includes('Mexico'); // Simple check, usually handled by user recognizing time
return (
);
})}
{/* Footer Summary */}
{/* Date Badge */}
Martes
{item.type === 'class' && (
<>
|
{new Date(item.date).toLocaleString('es-MX', { month: 'short' })}
{new Date(item.date).getDate()}
{item.type !== 'break' && (
{localTime}
)}
{/* Content */}
{item.module}
{item.type === 'break' && (
Receso
)}
{item.title}
{scheduleData.filter(i => i.type === 'class').length}
Clases Totales
{scheduleData.filter(i => i.module === 'Técnicas Japonesas').length}
Técnicas Japonesas
3
Niveles Usui
*Horarios mostrados en tu zona horaria local: {userTimeZone}