import React,{useMemo,useState} from 'react';
import{createRoot}from'react-dom/client';
import{Home,GraduationCap,Calculator,Download,ClipboardCheck,Trophy,BookOpen,ShoppingBag,Users,User,Volume2,VolumeX,Bell,Coins,Gem,Play,ChevronRight,RotateCcw,Save,Lock,CheckCircle2,Flame,Map,Menu,X,ArrowLeft,Languages,Building2,Wrench,ChartNoAxesCombined,Target,Handshake,House,FileText}from'lucide-react';
import'./styles.css';
import'./approved.css';

const A='./assets/';
const es={brand:'FIX & FLIP',tag:'DE CONTRATISTA A INVERSIONISTA',hello:'¡Hola, Inversionista!',home:'Misión Principal',course:'Curso',calc:'Calculadoras',downloads:'Descargas',lists:'Listas y Checklists',community:'Comunidad',ach:'Logros',book:'Libro',store:'Tienda',profile:'Mi Perfil',mission:'TU MISIÓN ACTUAL',missionTitle:'Encuentra tu próximo deal',missionText:'Completa las lecciones y tareas para desbloquear la siguiente zona.',continue:'CONTINUAR MISIÓN',progress:'Progreso de misión',map:'MAPA DE PROGRESO',learn:'CONTINÚA APRENDIENDO',quick:'HERRAMIENTAS RÁPIDAS',stats:'TUS ESTADÍSTICAS',daily:'MISIONES DIARIAS'};
const en={brand:'FIX & FLIP',tag:'FROM CONTRACTOR TO INVESTOR',hello:'Hello, Investor!',home:'Main Mission',course:'Course',calc:'Calculators',downloads:'Downloads',lists:'Lists & Checklists',community:'Community',ach:'Achievements',book:'Book',store:'Store',profile:'My Profile',mission:'YOUR CURRENT MISSION',missionTitle:'Find your next deal',missionText:'Complete lessons and tasks to unlock the next zone.',continue:'CONTINUE MISSION',progress:'Mission progress',map:'PROGRESS MAP',learn:'KEEP LEARNING',quick:'QUICK TOOLS',stats:'YOUR STATS',daily:'DAILY MISSIONS'};
const nav=[['home',Home],['course',GraduationCap],['calc',Calculator],['downloads',Download],['lists',ClipboardCheck],['community',Users],['ach',Trophy],['book',BookOpen],['store',ShoppingBag],['profile',User]];
const lessons=['Mentalidad','Encontrar Deals','Análisis','Comprar','Remodelar','Vender y Escalar'];
const course=['La importancia de un mentor','¿Sin dinero y sin crédito?','Motivación del vendedor','Vendedores no realistas','Encontrar un deal','Entender al vendedor','Caminar la propiedad','Construir el presupuesto','Calcular el ARV','Determinar la oferta máxima','Asegurar y verificar','Financiar y cerrar','Remodelar la propiedad','Vender la propiedad'];

function Sidebar({t,page,setPage,open,setOpen}){return <aside className={'sidebar '+(open?'open':'')}><button className="close" onClick={()=>setOpen(false)}><X/></button><div className="logo"><b>{t.brand}</b><span>ACADEMY</span><small>{t.tag}</small></div><div className="player"><img src={A+'cristian-avatar.png'}/><div><b>{t.hello}</b><span>NVL 14</span><div className="xp"><i/></div><small>1,850 / 2,400 XP</small></div></div><nav>{nav.map(([k,I])=><button key={k} className={page===k?'active':''} onClick={()=>{setPage(k);setOpen(false)}}><I/>{t[k]}<ChevronRight/></button>)}</nav><div className="streak"><Flame/><div><b>7 días seguidos</b><small>¡Sigue así! Cada día te acerca a tu libertad financiera.</small></div></div></aside>}
function Header({lang,setLang,sound,setSound,setOpen}){return <header><button className="menub" onClick={()=>setOpen(true)}><Menu/></button><div/><div className="wallet"><span><Coins/>2,350</span><span><Gem/>120</span><button onClick={()=>setSound(!sound)}>{sound?<Volume2/>:<VolumeX/>}</button><button><Bell/><i>3</i></button><button className="language" onClick={()=>setLang(lang==='es'?'en':'es')}><Languages/>{lang==='es'?'EN':'ES'}</button></div></header>}
function HomePage({t,setPage}){return <><section className="mission"><div className="flag">⚑</div><div><small>{t.mission}</small><h1>{t.missionTitle}</h1><p>{t.missionText}</p></div><div className="mission-progress"><label>{t.progress}<b>60%</b></label><div><i/></div></div><button onClick={()=>setPage('course')}>{t.continue}</button></section><main className="dashboard"><div className="center"><section className="mapcard"><div className="sectionhead"><div><h2>{t.map}</h2><p>Domina cada zona y conviértete en un inversionista experto.</p></div><button>Ver mapa completo <Map/></button></div><div className="mapimg"><img src={A+'progress-map.png'}/><div className="mapfade"/></div></section><h2 className="railtitle">{t.learn}</h2><div className="lessons"><article><div className="thumb phone">📱</div><div><span>EN PROGRESO · Lección 2.5</span><b>La primera llamada</b><small>5 min restantes</small><div className="mini"><i/></div></div><button><Play/></button></article><article><div className="thumb">📝</div><div><span>SIGUIENTE · Lección 2.6</span><b>Cómo calificar al vendedor</b><small>10 min</small></div><button><Play/></button></article><article><div className="thumb">🗓️</div><div><span>Lección 2.7</span><b>Agendando la cita</b><small>8 min</small></div><button><Play/></button></article></div><h2 className="railtitle">{t.quick}</h2><div className="tools"><button onClick={()=>setPage('calc')}><Calculator/>Calculadora de Flips</button><button onClick={()=>setPage('calc')}><FileText/>Hoja de Oferta (MAO)</button><button onClick={()=>setPage('lists')}><Wrench/>Presupuesto de Reparaciones</button><button onClick={()=>setPage('calc')}><ChartNoAxesCombined/>Análisis de ARV</button></div></div><aside className="rightbar"><Panel title={t.stats}><div className="statgrid"><Stat icon={<BookOpen/>} n="27" s="Lecciones completadas"/><Stat icon={<Trophy/>} n="8" s="Logros obtenidos"/><Stat icon={<Flame/>} n="14h" s="Tiempo de aprendizaje"/><Stat icon={<Target/>} n="#4" s="Posición en ranking"/></div></Panel><Panel title={t.daily}><Task done text="Completa 1 lección" reward="50"/><Task text="Usa la calculadora" reward="25"/><Task text="Descarga una lista" reward="25"/></Panel><Panel title="LOGROS RECIENTES"><div className="badges"><span>★<small>Primer Paso</small></span><span>★<small>Llamadas Maestro</small></span><span>★<small>Ojo Entrenado</small></span></div></Panel></aside></main></>}
function Panel({title,children}){return <section className="panel"><h2>{title}</h2>{children}</section>};function Stat({icon,n,s}){return <div className="stat">{icon}<b>{n}</b><small>{s}</small></div>};function Task({done,text,reward}){return <div className="task">{done?<CheckCircle2/>:<ClipboardCheck/>}<div><b>{text}</b><div><i style={{width:done?'100%':'8%'}}/></div></div><span>🪙 {reward}</span></div>}
function Course({setPage}){return <PageTitle icon={<GraduationCap/>} title="Curso completo" sub="Del contratista al inversionista, paso a paso."><div className="coursegrid">{course.map((x,i)=><article className={i<5?'done':''} key={x}><span>{i+1}</span><div><small>{i<4?'ARCO DE ENTRENAMIENTO':`NIVEL ${i-3}`}</small><h3>{x}</h3><p>{i<5?'Lección disponible':'Completa el nivel anterior para desbloquear'}</p></div>{i<5?<button onClick={()=>setPage('home')}><Play/></button>:<Lock/>}</article>)}</div></PageTitle>}
function CalculatorPage(){const[tab,setTab]=useState('arv');return <PageTitle icon={<Calculator/>} title="Calculadoras de inversión" sub="Analiza el deal antes de hacer una oferta."><div className="calctabs"><button className={tab==='arv'?'active':''} onClick={()=>setTab('arv')}>Calculadora ARV</button><button className={tab==='mao'?'active':''} onClick={()=>setTab('mao')}>Calculadora MAO</button></div>{tab==='arv'?<ARV/>:<MAO/>}</PageTitle>}
const N=({value,onChange,prefix='$'})=><label className="num"><span>{prefix}</span><input type="number" value={value} onChange={e=>onChange(+e.target.value)}/></label>;
function ARV(){const[sq,setSq]=useState(1450),[prices,setPrices]=useState([0,0,0]),[sizes,setSizes]=useState([1420,1380,1500]);const arv=Math.round(prices.reduce((a,p,i)=>a+(sizes[i]?p/sizes[i]:0),0)/3*sq)||0;const reset=()=>setPrices([0,0,0]);return <div className="calculatorbox"><CalcHead title="ARV CALCULATOR" subtitle="After Repair Value" reset={reset}/><div className="arvgrid"><section><h3><House/> Propiedad</h3><label>Dirección<input placeholder="123 Maple St, Dallas TX"/></label><label>Pies cuadrados<N value={sq} onChange={setSq} prefix="ft²"/></label><label>Condición<select><option>3 — Promedio</option><option>1 — Original</option><option>5 — Renovada</option></select></label></section>{prices.map((p,i)=><section key={i}><h3><Building2/> Comparable {i+1}</h3><label>Precio de venta<N value={p} onChange={v=>setPrices(x=>x.map((n,j)=>j===i?v:n))}/></label><label>Pies cuadrados<N value={sizes[i]} onChange={v=>setSizes(x=>x.map((n,j)=>j===i?v:n))} prefix="ft²"/></label><label>Ajuste manual<N value={0} onChange={()=>{}}/></label></section>)}</div><div className="result"><small>ARV ESTIMADO</small><b>${arv.toLocaleString()}</b><span>Todos los ajustes comienzan en $0.</span></div></div>}
function MAO(){const[arv,setArv]=useState(0),[rep,setRep]=useState(0),[rule,setRule]=useState(70),[buf,setBuf]=useState(10),[extra,setExtra]=useState(0);const mao=Math.max(0,arv*rule/100-rep-extra),opening=Math.max(0,mao*(1-buf/100)),target=(mao+opening)/2;return <div className="calculatorbox"><CalcHead title="MAO CALCULATOR" subtitle="Maximum Allowable Offer"/><div className="maogrid"><section><h3>Tus números</h3><label>Valor después de reparación<N value={arv} onChange={setArv}/></label><label>Reparaciones<N value={rep} onChange={setRep}/></label></section><section><h3>Regla del inversionista</h3><div className="rules">{[65,70,75,80].map(x=><button onClick={()=>setRule(x)} className={x===rule?'active':''}>{x}%</button>)}</div></section><section><h3>Margen de negociación</h3><label>Porcentaje bajo el MAO<N value={buf} onChange={setBuf} prefix="%"/></label></section><section><h3>Deducciones adicionales</h3><label>Cierre, financiamiento y otros<N value={extra} onChange={setExtra}/></label></section></div><div className="roadmap"><Offer c="red" title="Oferta máxima" n={mao}/><ChevronRight/><Offer c="blue" title="Oferta inicial" n={opening}/><ChevronRight/><Offer c="gold" title="Oferta objetivo" n={target}/><ChevronRight/><Offer c="green" title="Número de salida" n={opening}/></div></div>}
function CalcHead({title,subtitle,reset}){return <div className="calchead"><div><h2>{title}</h2><p>{subtitle}</p></div><div><button><Save/> Guardar análisis</button><button onClick={reset}><RotateCcw/> Reiniciar</button></div></div>};function Offer({c,title,n}){return <div className={'offer '+c}><small>{title}</small><b>${Math.round(n).toLocaleString()}</b></div>}
function Generic({type}){const data={downloads:['Descargas del inversionista','Tus 6 paquetes de herramientas, organizados en español e inglés.',A+'downloads-vault.png'],ach:['Logros','Convierte cada habilidad dominada en una recompensa.',A+'achievements.png'],book:['Fix & Flip sin Adivinar','Lee el libro digital por capítulos y continúa justo donde lo dejaste.',A+'arv-reference.png'],lists:['Listas y Checklists','Organiza leads, llamadas, recorridos, presupuestos y cierres.',null],community:['Comunidad','Próximamente: comparte avances y aprende con otros inversionistas.',null],store:['Tienda','Canjea monedas y gemas por recompensas del curso.',null],profile:['Perfil de Cristian','Nivel 14 · Inversionista en entrenamiento',null]}[type];return <PageTitle icon={<BookOpen/>} title={data[0]} sub={data[1]}>{data[2]?<div className="showcase"><img src={data[2]}/><button>{type==='downloads'?'DESCARGAR VAULT COMPLETO':type==='ach'?'VER TODOS LOS LOGROS':'ABRIR EXPERIENCIA'}<ChevronRight/></button></div>:<div className="empty"><Building2/><h3>{data[0]}</h3><p>Esta sección está conectada al nuevo diseño y lista para recibir tus archivos finales.</p><button>EXPLORAR</button></div>}</PageTitle>}
function PageTitle({icon,title,sub,children}){return <main className="page"><div className="pagetitle"><span>{icon}</span><div><h1>{title}</h1><p>{sub}</p></div></div>{children}</main>}
const approved={home:'approved-home.png',calc:'approved-calculators.png',downloads:'approved-downloads.png',ach:'approved-achievements.png'};
function ApprovedScreen({page,setPage,setTool}){const navItems=[['home',21.5,4],['course',26.2,4],['calc',31.2,8],['downloads',39.2,7],['lists',46.8,4],['ach',51.3,5],['book',56.4,4],['store',61,4]];return <main className="approved-screen"><img src={A+approved[page]} alt="Fix & Flip sin Adivinar"/><div className="approved-nav">{navItems.map(([k,l,w])=><button key={k} aria-label={es[k]} style={{left:l+'%',width:w+'%'}} onClick={()=>setPage(k)}/>)}</div>{page==='home'&&<button className="hotspot start" aria-label="Comenzar proyecto" onClick={()=>setPage('course')}/>} {page==='calc'&&<><button className="hotspot open-arv" aria-label="Abrir calculadora ARV" onClick={()=>setTool('arv')}/><button className="hotspot open-mao" aria-label="Abrir calculadora MAO" onClick={()=>setTool('mao')}/></>}{page==='downloads'&&<div className="download-hotspots">{[0,1,2,3,4,5,6].map(i=><button key={i} aria-label={i===0?'Descargar bóveda completa':`Descargar paquete ${i}`}/>)}</div>}</main>}
function DarkPlaceholder({page,setPage}){const labels={course:'CURSO COMPLETO',lists:'LISTAS',book:'LIBRO DIGITAL',store:'TIENDA'};return <div className="darkpage"><TopNav page={page} setPage={setPage}/><div className="darkempty"><h1>{labels[page]}</h1><p>Esta sección continuará con el mismo estilo moderno de construcción e inversión.</p><button onClick={()=>setPage('home')}>VOLVER AL INICIO</button></div></div>}
function TopNav({page,setPage}){return <div className="topnav"><div className="newlogo">FIX & FLIP<span>SIN ADIVINAR</span></div><div>{[['home','INICIO'],['course','CURSO'],['calc','CALCULADORAS'],['downloads','DESCARGAS'],['lists','LISTA'],['ach','LOGROS'],['book','LIBRO'],['store','TIENDA']].map(([k,x])=><button key={k} className={page===k?'active':''} onClick={()=>setPage(k)}>{x}</button>)}</div><b>Hola, Andrés<br/><span>Nivel 12 · Inversionista</span></b></div>}
function ToolOverlay({tool,setTool}){return <div className="tooloverlay"><div className="toolbar"><button onClick={()=>setTool(null)}><ArrowLeft/> Volver a calculadoras</button></div><div className="toolbody">{tool==='arv'?<ARV/>:<MAO/>}</div></div>}
function App(){const[page,setPage]=useState('home'),[tool,setTool]=useState(null);return tool?<ToolOverlay tool={tool} setTool={setTool}/>:approved[page]?<ApprovedScreen page={page} setPage={setPage} setTool={setTool}/>:<DarkPlaceholder page={page} setPage={setPage}/>}
createRoot(document.getElementById('root')).render(<App/>);