// ─── Bolivia Joven — Página de Proyectos ─────────────────────────────────────
const { useRef } = React;
const {
  Navbar, Footer, useReveal,
  UsersIcon, SproutIcon, ZapIcon, ArrowRightIcon, MapPinIcon, AwardIcon,
  TrendingUpIcon, HandshakeIcon, SparklesIcon, GraduationIcon,
} = window;

// ═══════════════════════════════════════════════════════════════════
// 1 · HERO DE PROYECTOS
// ═══════════════════════════════════════════════════════════════════
const ProjectsHero = () => (
  <section id="top" style={{position:'relative',display:'flex',alignItems:'center',justifyContent:'center',overflow:'hidden',background:'#0e0e0e',padding:'180px 24px 120px',minHeight:'70vh'}}>
    <div style={{position:'absolute',inset:0,overflow:'hidden'}}>
      <div style={{position:'absolute',width:'60vw',height:'60vw',top:'-25%',left:'-12%',background:'radial-gradient(circle, rgba(162,0,50,0.32) 0%, transparent 65%)',animation:'blob1 9s ease-in-out infinite'}}/>
      <div style={{position:'absolute',width:'45vw',height:'45vw',bottom:'-20%',right:'-8%',background:'radial-gradient(circle, rgba(233,211,108,0.1) 0%, transparent 65%)',animation:'blob2 11s ease-in-out infinite'}}/>
      <div style={{position:'absolute',width:520,height:520,right:-120,top:'50%',marginTop:-260,border:'1px solid rgba(162,0,50,0.12)',transform:'rotate(45deg)',animation:'floatGeo 8s ease-in-out infinite'}}/>
      <div style={{position:'absolute',inset:0,backgroundImage:'linear-gradient(rgba(255,255,255,0.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.02) 1px,transparent 1px)',backgroundSize:'80px 80px'}}/>
      <div style={{position:'absolute',inset:0,background:'linear-gradient(180deg,rgba(10,10,10,0.25) 0%,rgba(10,10,10,0.5) 55%,rgba(20,20,20,0.95) 100%)'}}/>
    </div>
    <div style={{position:'relative',zIndex:2,textAlign:'center',maxWidth:880,margin:'0 auto'}}>
      <h1 className="font-anton hero-t1" style={{fontSize:'clamp(2.6rem,8vw,6rem)',lineHeight:1,letterSpacing:'0.02em',textTransform:'uppercase',color:'#fff',marginBottom:28}}>
        Grandes acciones,<br/><span style={{color:'var(--gold)'}}>grandes</span> impactos
      </h1>
      <p className="hero-t2" style={{fontSize:'clamp(1rem,2.5vw,1.2rem)',color:'rgba(255,255,255,0.7)',lineHeight:1.75,maxWidth:600,margin:'0 auto'}}>
        Conoce los programas insignia y las iniciativas más ambiciosas con las que Bolivia Joven está transformando el presente y el futuro del país.
      </p>
    </div>
  </section>
);

// ═══════════════════════════════════════════════════════════════════
// 2 · PROYECTO INSIGNIA (Flagship)
// ═══════════════════════════════════════════════════════════════════
const Flagship = () => {
  const ref = useRef(null);
  useReveal(ref);
  const metrics = [
    {icon:UsersIcon,value:'+1.500',label:'Líderes formados'},
    {icon:MapPinIcon,value:'9',label:'Departamentos'},
    {icon:AwardIcon,value:'48',label:'Talleres ejecutados'},
  ];
  return (
    <section ref={ref} style={{background:'var(--bg2)',borderTop:'1px solid var(--border)',borderBottom:'1px solid var(--border)',position:'relative',overflow:'hidden'}}>
      <div className="flagship-wrap" style={{maxWidth:1280,margin:'0 auto',display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(320px,1fr))',alignItems:'stretch'}}>
        {/* Visual */}
        <div className="reveal" style={{position:'relative',minHeight:420,overflow:'hidden'}}>
          <img className="flagship-img" src="https://images.unsplash.com/photo-1517048676732-d65bc937f952?w=1100&q=80" alt="Cumbre Nacional de Liderazgo"
            style={{position:'absolute',inset:0,width:'100%',height:'100%',objectFit:'cover'}} onError={e=>{e.target.style.background='#222';}}/>
          <div style={{position:'absolute',inset:0,background:'linear-gradient(115deg, rgba(20,20,20,0.1) 0%, rgba(24,24,24,0.55) 70%, var(--bg2) 100%)'}}/>
          <div style={{position:'absolute',top:28,left:28,display:'inline-flex',alignItems:'center',gap:8,background:'rgba(162,0,50,0.9)',backdropFilter:'blur(6px)',padding:'7px 16px',borderRadius:30}}>
            <span style={{width:7,height:7,borderRadius:'50%',background:'#fff'}}/>
            <span style={{fontSize:11,fontWeight:700,letterSpacing:'0.12em',textTransform:'uppercase',color:'#fff'}}>Proyecto Insignia 2026</span>
          </div>
        </div>
        {/* Content */}
        <div className="reveal reveal-d2" style={{padding:'72px 56px',display:'flex',flexDirection:'column',justifyContent:'center'}}>
          <span style={{fontSize:11,fontWeight:600,letterSpacing:'0.18em',textTransform:'uppercase',color:'var(--gold)',marginBottom:16}}>Programa Bandera</span>
          <h2 className="font-anton" style={{fontSize:'clamp(2.2rem,5vw,3.8rem)',textTransform:'uppercase',color:'#fff',lineHeight:1.02,marginBottom:24}}>
            Cumbre Nacional<br/>de <span style={{color:'var(--gold)'}}>Liderazgo</span>
          </h2>
          <p style={{fontSize:'1rem',lineHeight:1.85,color:'rgba(255,255,255,0.65)',marginBottom:36,maxWidth:520}}>
            Nuestra iniciativa más ambiciosa: un programa nacional que reúne, forma y conecta a jóvenes líderes de todo el territorio boliviano. Durante un año de formación intensiva, talleres y proyectos de campo, transformamos potencial en acción concreta — sembrando una red de liderazgo que ya está cambiando comunidades enteras.
          </p>
          {/* Metrics */}
          <div style={{display:'flex',flexWrap:'wrap',gap:32,marginBottom:40}}>
            {metrics.map(m=>(
              <div key={m.label} style={{display:'flex',alignItems:'center',gap:12}}>
                <div style={{width:42,height:42,borderRadius:10,background:'rgba(233,211,108,0.1)',border:'1px solid rgba(233,211,108,0.2)',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
                  <m.icon size={20} style={{color:'var(--gold)'}}/>
                </div>
                <div>
                  <div className="font-anton" style={{fontSize:'1.7rem',color:'#fff',lineHeight:1}}>{m.value}</div>
                  <div style={{fontSize:'0.72rem',letterSpacing:'0.08em',textTransform:'uppercase',color:'rgba(255,255,255,0.45)',marginTop:2}}>{m.label}</div>
                </div>
              </div>
            ))}
          </div>
          <a href="/#unirse" className="btn-primary" style={{width:'fit-content',fontSize:15,padding:'14px 32px'}}>
            Involucrarme en este proyecto <ArrowRightIcon size={16}/>
          </a>
        </div>
      </div>
    </section>
  );
};

// ═══════════════════════════════════════════════════════════════════
// 4 · GALERÍA DE PROYECTOS DESTACADOS
// ═══════════════════════════════════════════════════════════════════
const GALLERY = [
  {title:'Café Líder',badge:'Liderazgo',badgeColor:'var(--gold)',
   image:'https://images.unsplash.com/photo-1529156069898-49953e39b3ac?w=900&q=80',
   desc:'Conferencias, talleres y networking dadas por empresarios reconocidos y líderes internacionales.',
   metric:'Activo desde 2024',
   reveal:'Comunidad en constante crecimiento con eventos presenciales y virtuales a nivel nacional.'},
  {title:'Programa de Embajadores',badge:'Desarrollo',badgeColor:'var(--green)',
   image:'https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=900&q=80',
   desc:'Los embajadores de Bolivia Joven son jóvenes bolivianos de otros países que representan a la organización.',
   metric:'Activo desde 2024',
   reveal:'Red de jóvenes bolivianos en el exterior que difunden la misión de Bolivia Joven en distintos países.'},
  {title:'Clubes Bolivia Joven',badge:'Exclusivo a miembros',badgeColor:'var(--red)',
   image:'https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?w=900&q=80',
   desc:'Los clubes son un espacio de encuentro y desarrollo para los jóvenes, con la mentoría de expertos en diversas áreas.',
   metric:'Activo en 3 departamentos',
   reveal:'Más de 4 líderes activos en La Paz, Santa Cruz y Cochabamba, expertos en sus dominios.'},
  {title:'Apoyo a Senda Verde',badge:'Comunidad',badgeColor:'var(--green)',
   image:'https://images.unsplash.com/photo-1523050854058-8df90110c9f1?w=900&q=80',
   desc:'Un proyecto que busca salvar a los animalitos en peligro por culpa de los bloqueos.',
   metric:'Iniciativa 2026',
   reveal:'Apoyo al santuario Senda Verde, enfocado en rescatar animales afectados por bloqueos y crisis medioambientales.'},
  {title:'Círculo de Médicos Bolivia Joven',badge:'Iniciativa Solidaria',badgeColor:'var(--green)',
   image:'https://images.unsplash.com/photo-1576091160550-2173dba999ef?w=900&q=80',
   desc:'Consultas médicas gratuitas para jóvenes en vulnerabilidad y jornadas de inmersión clínica para estudiantes de medicina.',
   metric:'Activo en 2 departamentos',
   reveal:'Más de 13 especialistas asociados en La Paz y Santa Cruz. Meta: expandirse a los 9 departamentos del país.',
   link:'/proyectos/circulomedicos'},
];

const GalleryCard = ({ p, delay }) => (
  <div className={`gal-card reveal ${delay}`}>
    <div className="gal-imgwrap">
      <img className="gal-img" src={p.image} alt={p.title} onError={e=>{e.target.style.background='#222';}}/>
      <div style={{position:'absolute',inset:0,background:'linear-gradient(180deg, rgba(14,14,14,0.05) 0%, rgba(14,14,14,0.7) 100%)'}}/>
      {/* Badge */}
      <div style={{position:'absolute',top:18,left:18,display:'inline-flex',alignItems:'center',gap:7,background:'rgba(14,14,14,0.82)',backdropFilter:'blur(8px)',border:`1px solid ${p.badgeColor}`,padding:'5px 13px',borderRadius:30}}>
        <span style={{width:6,height:6,borderRadius:'50%',background:p.badgeColor}}/>
        <span style={{fontSize:10.5,fontWeight:700,letterSpacing:'0.1em',textTransform:'uppercase',color:'#fff'}}>{p.badge}</span>
      </div>
      {/* Metric chip */}
      <div style={{position:'absolute',bottom:16,left:18,display:'inline-flex',alignItems:'center',gap:7}}>
        <TrendingUpIcon size={15} style={{color:'var(--gold)'}}/>
        <span style={{fontSize:'0.78rem',fontWeight:600,color:'#fff',letterSpacing:'0.02em'}}>{p.metric}</span>
      </div>
    </div>
    <div style={{padding:'26px 28px 30px'}}>
      <h3 style={{fontSize:'1.2rem',fontWeight:700,color:'#fff',marginBottom:12,fontFamily:"'Poppins',sans-serif",lineHeight:1.25}}>{p.title}</h3>
      <p style={{fontSize:'0.9rem',lineHeight:1.7,color:'rgba(255,255,255,0.58)'}}>{p.desc}</p>
      {/* Hover-revealed extra */}
      <div className="gal-reveal">
        <p style={{fontSize:'0.82rem',lineHeight:1.6,color:'rgba(255,255,255,0.45)',paddingTop:14,marginTop:14,borderTop:'1px solid var(--border)'}}>{p.reveal}</p>
      </div>
      <a href={p.link||'#'} className="gal-btn" style={{marginTop:18}}>
        {p.link ? 'Ver iniciativa' : 'Ver galería / logros'} <ArrowRightIcon size={15}/>
      </a>
    </div>
  </div>
);

const Gallery = () => {
  const ref = useRef(null);
  useReveal(ref);
  return (
    <section ref={ref} className="section-base" style={{background:'var(--bg)'}}>
      <div className="section-inner">
        <div style={{textAlign:'center',maxWidth:600,margin:'0 auto 60px'}}>
          <div className="reveal" style={{display:'flex',justifyContent:'center',marginBottom:12}}><div className="gold-line"/></div>
          <h2 className="reveal reveal-d1 font-anton" style={{fontSize:'clamp(1.8rem,4.5vw,3rem)',textTransform:'uppercase',color:'#fff',lineHeight:1.1,marginBottom:18}}>
            Casos de <span style={{color:'var(--gold)'}}>éxito</span>
          </h2>
          <p className="reveal reveal-d2" style={{fontSize:'0.98rem',lineHeight:1.8,color:'rgba(255,255,255,0.6)'}}>
            Cada proyecto es una historia de impacto real. Estos son algunos de los que más orgullosos nos sienten.
          </p>
        </div>
        <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(300px,1fr))',gap:28}}>
          {GALLERY.map((p,i)=>(
            <GalleryCard key={p.title} p={p} delay={`reveal-d${(i%2)+1}`}/>
          ))}
        </div>
      </div>
    </section>
  );
};

// ═══════════════════════════════════════════════════════════════════
// 5 · CTA CO-CREACIÓN
// ═══════════════════════════════════════════════════════════════════
const CoCreateCTA = () => {
  const ref = useRef(null);
  useReveal(ref);
  return (
    <section ref={ref} style={{position:'relative',overflow:'hidden'}}>
      <div style={{position:'absolute',inset:0,background:'#0e0e0e'}}>
        <div style={{position:'absolute',inset:0,background:'linear-gradient(120deg, rgba(162,0,50,0.9) 0%, rgba(180,14,40,0.72) 38%, rgba(20,20,20,0) 72%)'}}/>
        <div style={{position:'absolute',top:'-30%',right:'-8%',width:'52vw',height:'52vw',background:'radial-gradient(circle, rgba(233,211,108,0.14) 0%, transparent 65%)'}}/>
        <div style={{position:'absolute',inset:0,backgroundImage:'repeating-linear-gradient(-55deg,transparent,transparent 40px,rgba(255,255,255,0.015) 40px,rgba(255,255,255,0.015) 41px)'}}/>
        <div style={{position:'absolute',right:-80,bottom:-80,width:380,height:380,border:'1px solid rgba(233,211,108,0.08)',transform:'rotate(45deg)'}}/>
        <div style={{position:'absolute',inset:0,background:'linear-gradient(180deg,transparent 0%,rgba(10,10,10,0.4) 100%)'}}/>
      </div>
      <div className="section-base" style={{position:'relative',zIndex:2}}>
        <div className="section-inner" style={{textAlign:'center',maxWidth:760,margin:'0 auto'}}>
          <h2 className="reveal reveal-d1 font-anton" style={{fontSize:'clamp(2rem,5.5vw,4rem)',textTransform:'uppercase',color:'#fff',lineHeight:1.02,marginBottom:24,textShadow:'0 4px 40px rgba(0,0,0,0.5)'}}>
            ¿Quieres financiar o <span style={{color:'var(--gold)'}}>co-crear</span> un proyecto con nosotros?
          </h2>
          <p className="reveal reveal-d2" style={{fontSize:'1.1rem',color:'rgba(255,255,255,0.78)',lineHeight:1.75,maxWidth:560,margin:'0 auto 44px'}}>
            En Bolivia Joven potenciamos el alcance de nuestras iniciativas a través de alianzas estratégicas con empresas e instituciones.
          </p>
          <a href="/contacto" className="btn-primary reveal reveal-d3"
            style={{fontSize:'1rem',padding:'15px 38px',background:'var(--gold)',color:'#141414',fontWeight:700,letterSpacing:'0.04em',boxShadow:'0 0 40px rgba(233,211,108,0.35)'}}>
            Escríbenos para aliarse <ArrowRightIcon size={17}/>
          </a>
        </div>
      </div>
    </section>
  );
};

// ═══════════════════════════════════════════════════════════════════
// APP
// ═══════════════════════════════════════════════════════════════════
const ProjectsPage = () => (
  <React.Fragment>
    <Navbar page="projects" />
    <main>
      <ProjectsHero />
      <Flagship />
      <Gallery />
      <CoCreateCTA />
    </main>
    <Footer page="projects" />
  </React.Fragment>
);

ReactDOM.createRoot(document.getElementById('root')).render(<ProjectsPage />);