// ─── Bolivia Joven — Página "Contacto" ───────────────────────────────────────
const { useRef } = React;
const {
  Navbar, Footer, useReveal,
  MailIcon, PhoneIcon, MapPinIcon, ArrowRightIcon, SparklesIcon,
  FacebookIcon, InstagramIcon, LinkedInIcon, TikTokIcon,
} = window;

// ═══════════════════════════════════════════════════════════════════
// HERO
// ═══════════════════════════════════════════════════════════════════
const ContactHero = () => (
  <section id="top" style={{position:'relative',display:'flex',alignItems:'center',justifyContent:'center',overflow:'hidden',background:'#0e0e0e',padding:'180px 24px 100px',minHeight:'56vh'}}>
    <div style={{position:'absolute',inset:0,overflow:'hidden'}}>
      <div style={{position:'absolute',width:'56vw',height:'56vw',top:'-22%',left:'-10%',background:'radial-gradient(circle, rgba(162,0,50,0.3) 0%, transparent 65%)',animation:'blob1 9s ease-in-out infinite'}}/>
      <div style={{position:'absolute',width:'42vw',height:'42vw',bottom:'-18%',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:500,height:500,right:-130,top:'50%',marginTop:-250,border:'1px solid rgba(162,0,50,0.1)',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:820,margin:'0 auto'}}>
      <h1 className="font-anton hero-t2" style={{fontSize:'clamp(2.8rem,9vw,6.5rem)',lineHeight:0.98,letterSpacing:'0.02em',textTransform:'uppercase',color:'#fff',marginBottom:28}}>
        Conéctate con<br/>el <span style={{color:'var(--gold)'}}>cambio</span>
      </h1>
      <p className="hero-t3" style={{fontSize:'clamp(1rem,2.5vw,1.2rem)',color:'rgba(255,255,255,0.7)',lineHeight:1.75,maxWidth:600,margin:'0 auto'}}>
        ¿Tienes dudas, quieres colaborar o estás listo para dejar tu huella? Ponte en contacto con nuestra sede nacional o únete a nuestra red.
      </p>
    </div>
  </section>
);

// ═══════════════════════════════════════════════════════════════════
// CONTACT + MEMBERSHIP (two columns)
// ═══════════════════════════════════════════════════════════════════
const CONTACTS = [
  { icon:MailIcon,  label:'Correo Electrónico', value:'boliviajnacional@gmail.com', href:'mailto:boliviajnacional@gmail.com',
    accent:'var(--gold)', bg:'rgba(233,211,108,0.1)', brd:'rgba(233,211,108,0.22)' },
  { icon:PhoneIcon, label:'Teléfono / WhatsApp', value:'+591 61013020', href:'https://wa.me/59161013020',
    accent:'var(--green)', bg:'rgba(31,113,67,0.12)', brd:'rgba(31,113,67,0.25)' },
  { icon:MapPinIcon,label:'Sede Nacional', value:'Santa Cruz de la Sierra', href:'#',
    accent:'var(--red)', bg:'rgba(162,0,50,0.12)', brd:'rgba(162,0,50,0.25)' },
];

const SOCIALS = [
  { Icon:FacebookIcon,  cls:'soc-fb', label:'Facebook',  href:'https://www.facebook.com/p/Asociación-Bolivia-Joven-61555223188163/' },
  { Icon:InstagramIcon, cls:'soc-ig', label:'Instagram', href:'https://www.instagram.com/bolivia_joven/' },
  { Icon:LinkedInIcon,  cls:'soc-li', label:'LinkedIn',  href:'https://www.linkedin.com/company/asociación-bolivia-joven' },
  { Icon:TikTokIcon,    cls:'soc-tk', label:'TikTok',    href:'https://www.tiktok.com/@bolivia.joven' },
];

const ContactMain = () => {
  const ref = useRef(null);
  useReveal(ref);
  return (
    <section ref={ref} className="section-base" style={{background:'var(--bg)',borderTop:'1px solid var(--border)'}}>
      <div className="section-inner">
        <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(320px,1fr))',gap:48,alignItems:'start'}}>

          {/* ── COLUMNA A — Datos + Redes ── */}
          <div>
            <div className="reveal gold-line"/>
            <h2 className="reveal reveal-d1 font-anton" style={{fontSize:'clamp(1.7rem,4vw,2.6rem)',textTransform:'uppercase',color:'#fff',lineHeight:1.1,marginBottom:14}}>
              Datos de <span style={{color:'var(--gold)'}}>contacto</span>
            </h2>
            <p className="reveal reveal-d2" style={{fontSize:'0.96rem',lineHeight:1.7,color:'rgba(255,255,255,0.55)',marginBottom:36,maxWidth:440}}>
              Escríbenos por el canal que prefieras. Respondemos a la brevedad posible.
            </p>

            {/* Contact cards */}
            <div style={{display:'flex',flexDirection:'column',gap:16,marginBottom:44}}>
              {CONTACTS.map((c,i)=>(
                <a key={c.label} href={c.href} className={`contact-card reveal reveal-d${i+2}`}
                  target={c.href.startsWith('http')?'_blank':undefined} rel="noopener noreferrer">
                  <div className="contact-ico" style={{background:c.bg,border:`1px solid ${c.brd}`}}>
                    <c.icon size={22} style={{color:c.accent}}/>
                  </div>
                  <div style={{minWidth:0}}>
                    <div style={{fontSize:11,letterSpacing:'0.1em',textTransform:'uppercase',color:'rgba(255,255,255,0.4)',marginBottom:4}}>{c.label}</div>
                    <div style={{fontSize:'1rem',fontWeight:600,color:'#fff',wordBreak:'break-word'}}>{c.value}</div>
                  </div>
                </a>
              ))}
            </div>

            {/* Social row */}
            <div className="reveal reveal-d4">
              <div style={{fontSize:11,letterSpacing:'0.12em',textTransform:'uppercase',color:'rgba(255,255,255,0.4)',marginBottom:18}}>Síguenos en redes</div>
              <div style={{display:'flex',gap:14,flexWrap:'wrap'}}>
                {SOCIALS.map(s=>(
                  <a key={s.label} href={s.href} className={`soc ${s.cls}`} aria-label={s.label} target="_blank" rel="noopener noreferrer">
                    <s.Icon size={20}/>
                  </a>
                ))}
              </div>
            </div>
          </div>

          {/* ── COLUMNA B — Membership CTA ── */}
          <div className="reveal reveal-d3" style={{position:'relative',borderRadius:22,overflow:'hidden',animation:'ctaGlow 4s ease-in-out infinite'}}>
            {/* gradient background */}
            <div style={{position:'absolute',inset:0,background:'linear-gradient(150deg, #a20032 0%, #b40e28 48%, #7d0626 100%)'}}/>
            <div style={{position:'absolute',inset:0,backgroundImage:'repeating-linear-gradient(-50deg,transparent,transparent 38px,rgba(255,255,255,0.04) 38px,rgba(255,255,255,0.04) 39px)'}}/>
            <div style={{position:'absolute',top:'-25%',right:'-15%',width:'70%',height:'70%',background:'radial-gradient(circle, rgba(233,211,108,0.22) 0%, transparent 65%)'}}/>
            <div style={{position:'absolute',right:-60,bottom:-60,width:240,height:240,border:'1px solid rgba(233,211,108,0.18)',transform:'rotate(45deg)'}}/>
            {/* gold border accent */}
            <div style={{position:'absolute',inset:0,borderRadius:22,border:'1.5px solid rgba(233,211,108,0.35)',pointerEvents:'none'}}/>

            <div style={{position:'relative',zIndex:2,padding:'52px 44px'}}>
              <div style={{display:'inline-flex',alignItems:'center',justifyContent:'center',width:56,height:56,borderRadius:14,background:'rgba(233,211,108,0.18)',border:'1px solid rgba(233,211,108,0.4)',marginBottom:28}}>
                <BoliviaIcon size={30} color="#e9d36c"/>
              </div>
              <span style={{display:'block',fontSize:11,fontWeight:600,letterSpacing:'0.18em',textTransform:'uppercase',color:'rgba(255,255,255,0.8)',marginBottom:16}}>Membresía Nacional</span>
              <h3 className="font-anton" style={{fontSize:'clamp(1.9rem,4vw,2.9rem)',textTransform:'uppercase',color:'#fff',lineHeight:1.02,marginBottom:20}}>
                Sé parte de<br/><span style={{color:'var(--gold)'}}>Bolivia Joven</span>
              </h3>
              <p style={{fontSize:'1rem',lineHeight:1.8,color:'rgba(255,255,255,0.82)',marginBottom:36}}>
                Buscamos mentes brillantes y corazones dispuestos a transformar el país. El futuro no se espera, se construye. ¡Postúlate hoy para obtener tu membresía nacional!
              </p>
              <a href="/unete"
                style={{display:'inline-flex',alignItems:'center',gap:10,background:'var(--gold)',color:'#141414',fontWeight:700,fontSize:'1rem',letterSpacing:'0.02em',padding:'15px 34px',borderRadius:8,textDecoration:'none',transition:'all 0.3s ease',boxShadow:'0 10px 30px rgba(0,0,0,0.25)'}}
                onMouseEnter={e=>{e.currentTarget.style.background='#f5e07a';e.currentTarget.style.transform='translateY(-3px)';e.currentTarget.style.boxShadow='0 16px 40px rgba(0,0,0,0.35)';}}
                onMouseLeave={e=>{e.currentTarget.style.background='var(--gold)';e.currentTarget.style.transform='translateY(0)';e.currentTarget.style.boxShadow='0 10px 30px rgba(0,0,0,0.25)';}}>
                Postularme como Miembro <ArrowRightIcon size={17}/>
              </a>
            </div>
          </div>

        </div>
      </div>
    </section>
  );
};

// ═══════════════════════════════════════════════════════════════════
// APP
// ═══════════════════════════════════════════════════════════════════
const ContactPage = () => (
  <React.Fragment>
    <Navbar page="contact" />
    <main>
      <ContactHero />
      <ContactMain />
    </main>
    <Footer page="contact" />
  </React.Fragment>
);

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