// Blog + Contacto + Footer
function Blog() {
  const posts = [
    {
      tag: 'Guía',
      title: 'Documentos que necesitas para tu visa americana en 2026',
      desc: 'Una lista detallada y actualizada con todo lo que debes llevar a tu entrevista consular según tu perfil.',
      read: '6 min',
      thumb: 't1',
      art: (
        <svg viewBox="0 0 400 250" preserveAspectRatio="xMidYMid slice">
          <defs>
            <pattern id="b1grid" width="22" height="22" patternUnits="userSpaceOnUse">
              <path d="M22 0H0V22" fill="none" stroke="rgba(255,255,255,0.08)" strokeWidth="1"/>
            </pattern>
          </defs>
          <rect width="400" height="250" fill="url(#b1grid)"/>
          <rect x="120" y="60" width="160" height="130" rx="12" fill="#fff" opacity=".95"/>
          <rect x="140" y="86" width="120" height="6" rx="3" fill="#0A2463"/>
          <rect x="140" y="100" width="80" height="4" rx="2" fill="#94A3B8"/>
          <rect x="140" y="115" width="100" height="4" rx="2" fill="#94A3B8"/>
          <circle cx="240" cy="148" r="20" fill="none" stroke="#E11D2E" strokeWidth="2"/>
          <text x="240" y="153" textAnchor="middle" fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="14" fill="#E11D2E">2026</text>
          <path d="M150 175h80" stroke="#0A2463" strokeWidth="2" strokeLinecap="round"/>
        </svg>
      ),
    },
    {
      tag: 'Entrevista',
      title: 'Las 10 preguntas más comunes en la entrevista consular',
      desc: 'Cómo responderlas con confianza, qué evitar decir y por qué el cónsul te pregunta lo que te pregunta.',
      read: '8 min',
      thumb: 't2',
      art: (
        <svg viewBox="0 0 400 250" preserveAspectRatio="xMidYMid slice">
          <rect width="400" height="250" fill="none"/>
          <circle cx="200" cy="125" r="80" fill="none" stroke="rgba(255,255,255,0.25)" strokeWidth="1.5"/>
          <circle cx="200" cy="125" r="55" fill="rgba(255,255,255,0.12)"/>
          <text x="200" y="138" textAnchor="middle" fontFamily="Instrument Serif, serif" fontStyle="italic" fontSize="58" fill="#fff">?</text>
          <g fill="#fff" opacity=".5">
            <circle cx="120" cy="60" r="3"/>
            <circle cx="305" cy="80" r="2.5"/>
            <circle cx="320" cy="190" r="3.5"/>
            <circle cx="90" cy="190" r="2.5"/>
          </g>
        </svg>
      ),
    },
    {
      tag: 'Citas',
      title: 'Cómo conseguir un adelanto de cita en el consulado',
      desc: 'Te explicamos qué es un adelanto, cuándo conviene y cómo aumentar tus probabilidades de conseguir una fecha cercana.',
      read: '5 min',
      thumb: 't3',
      art: (
        <svg viewBox="0 0 400 250" preserveAspectRatio="xMidYMid slice">
          <defs>
            <pattern id="b3lines" width="14" height="14" patternUnits="userSpaceOnUse">
              <path d="M0 14L14 0" stroke="rgba(255,255,255,0.06)" strokeWidth="1"/>
            </pattern>
          </defs>
          <rect width="400" height="250" fill="url(#b3lines)"/>
          <rect x="100" y="55" width="200" height="140" rx="14" fill="#fff"/>
          <rect x="100" y="55" width="200" height="34" rx="14" fill="#0A2463"/>
          <rect x="100" y="80" width="200" height="9" fill="#0A2463"/>
          <circle cx="135" cy="72" r="4" fill="#fff"/>
          <circle cx="265" cy="72" r="4" fill="#fff"/>
          <g fill="#94A3B8">
            {[0,1,2,3,4,5,6].map((c) => (
              <circle key={'h'+c} cx={120 + c*27} cy="106" r="3"/>
            ))}
            {[0,1,2,3,4].map((r) => (
              [0,1,2,3,4,5,6].map((c) => (
                <circle key={r+'-'+c} cx={120 + c*27} cy={125 + r*15} r="3"/>
              ))
            ))}
          </g>
          <circle cx="174" cy="155" r="11" fill="#E11D2E"/>
          <text x="174" y="159" textAnchor="middle" fontFamily="Geist, sans-serif" fontSize="11" fontWeight="600" fill="#fff">15</text>
        </svg>
      ),
    },
  ];

  return (
    <section className="section blog" id="blog">
      <div className="container">
        <div className="section-head reveal" style={{display:'flex', justifyContent:'space-between', alignItems:'flex-end', flexWrap:'wrap', gap:24, maxWidth:'none'}}>
          <div style={{maxWidth:680}}>
            <span className="eyebrow"><span className="dot"></span> Blog</span>
            <h2 style={{margin:'16px 0 16px'}}>Aprende todo sobre tu <span className="serif-italic">visa americana.</span></h2>
            <p>Guías prácticas, actualizaciones consulares y consejos reales escritos por nuestros asesores.</p>
          </div>
          <a className="btn btn-ghost btn-sm" href="#">Ver todos los artículos <Icon.arrow/></a>
        </div>
        <div className="blog-grid">
          {posts.map((p, i) => (
            <a key={i} href="#" className="blog-card reveal" style={{'--delay': (i*100)+'ms'}}>
              <div className={'thumb ' + p.thumb}>{p.art}</div>
              <div className="body">
                <span className="tag">{p.tag}</span>
                <h3>{p.title}</h3>
                <p>{p.desc}</p>
                <div className="meta">
                  <span>{p.read} de lectura</span>
                  <span className="read">Leer <Icon.arrow size={14}/></span>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Contacto() {
  const [tramite, setTramite] = React.useState('Primera vez');
  const [form, setForm] = React.useState({ nombre: '', email: '', tel: '' });
  const [sent, setSent] = React.useState(false);
  const [touched, setTouched] = React.useState({});

  const submit = (e) => {
    e.preventDefault();
    setTouched({ nombre: true, email: true, tel: true });
    if (!form.nombre || !form.email || !form.tel) return;
    setSent(true);
  };

  return (
    <section className="section contacto" id="contacto">
      <div className="container contact-grid">
        <div className="contact-info reveal">
          <span className="eyebrow"><span className="dot"></span> Contacto</span>
          <h2 style={{marginTop:16}}>Hablemos sobre tu <span className="serif-italic">visa.</span></h2>
          <p>Agenda una asesoría gratuita y resolvemos todas tus dudas antes de iniciar cualquier trámite.</p>

          <div className="info-block">
            <div className="icon"><Icon.whatsapp size={20}/></div>
            <div>
              <h4>WhatsApp</h4>
              <a href="https://wa.me/528126381417" target="_blank" rel="noreferrer">+52 81 2638 1417</a>
            </div>
          </div>
          <div className="info-block">
            <div className="icon"><Icon.mail size={18}/></div>
            <div>
              <h4>Correo</h4>
              <a href="mailto:hola@visaspro.mx">hola@visaspro.mx</a>
            </div>
          </div>
          <div className="info-block">
            <div className="icon"><Icon.mapPin size={18}/></div>
            <div>
              <h4>Cobertura</h4>
              <p>Atención remota en toda la república mexicana</p>
            </div>
          </div>
          <div className="info-block">
            <div className="icon"><Icon.clock size={18}/></div>
            <div>
              <h4>Horario</h4>
              <p>Lun – Sáb · 9:00 a 19:00 hrs</p>
            </div>
          </div>
        </div>

        <form className="contact-form reveal" style={{'--delay':'150ms'}} onSubmit={submit} noValidate>
          {sent ? (
            <div>
              <div className="success">
                <div style={{width:36, height:36, borderRadius:'50%', background:'#10B981', color:'#fff', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0}}>
                  <Icon.check size={18}/>
                </div>
                <div>
                  <div style={{fontWeight:600, fontSize:16, color:'#065F46', marginBottom:4}}>¡Mensaje recibido!</div>
                  Te contactaremos por WhatsApp en menos de una hora hábil para agendar tu asesoría gratis.
                </div>
              </div>
              <button type="button" className="btn btn-ghost btn-sm" style={{marginTop:18}} onClick={() => { setSent(false); setForm({nombre:'',email:'',tel:''}); setTouched({}); }}>
                Enviar otra solicitud
              </button>
            </div>
          ) : (
            <>
              <h3>Agenda tu asesoría gratis</h3>
              <div className="sub">Te respondemos por WhatsApp en menos de una hora hábil.</div>

              <div className="field">
                <label>¿Qué trámite te interesa?</label>
                <div className="tramite-options" role="radiogroup">
                  {['Primera vez', 'Renovación', 'Adelanto de cita'].map(t => (
                    <label key={t} className={tramite === t ? 'active' : ''}>
                      <input type="radio" name="tramite" value={t} checked={tramite === t} onChange={() => setTramite(t)}/>
                      {t}
                    </label>
                  ))}
                </div>
              </div>

              <div className="field">
                <label>Nombre completo</label>
                <input
                  type="text" className="input" placeholder="Ana María González"
                  value={form.nombre}
                  onChange={e => setForm({...form, nombre: e.target.value})}
                  onBlur={() => setTouched({...touched, nombre: true})}
                  style={touched.nombre && !form.nombre ? {borderColor:'var(--red-500)'} : {}}
                />
              </div>

              <div className="row-2">
                <div className="field">
                  <label>WhatsApp</label>
                  <input
                    type="tel" className="input" placeholder="+52 81 1234 5678"
                    value={form.tel}
                    onChange={e => setForm({...form, tel: e.target.value})}
                    onBlur={() => setTouched({...touched, tel: true})}
                    style={touched.tel && !form.tel ? {borderColor:'var(--red-500)'} : {}}
                  />
                </div>
                <div className="field">
                  <label>Correo electrónico</label>
                  <input
                    type="email" className="input" placeholder="ana@correo.com"
                    value={form.email}
                    onChange={e => setForm({...form, email: e.target.value})}
                    onBlur={() => setTouched({...touched, email: true})}
                    style={touched.email && !form.email ? {borderColor:'var(--red-500)'} : {}}
                  />
                </div>
              </div>

              <div className="submit-row" style={{marginTop:8, alignItems:'stretch', flexDirection:'column', gap:14}}>
                <button type="submit" className="btn btn-primary" style={{width:'100%'}}>
                  Quiero mi asesoría gratis <Icon.arrow/>
                </button>
                <div className="legal">
                  Al enviar aceptas que te contactemos por WhatsApp o correo. No compartimos tus datos con terceros.
                </div>
              </div>
            </>
          )}
        </form>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="logo"><img src="assets/visaspro-logo.png" alt="VisasPro"/></div>
            <p>Asesoría profesional en trámites de visa americana para clientes en toda la república mexicana.</p>
            <a className="wa" href="https://wa.me/528126381417" target="_blank" rel="noreferrer" style={{display:'inline-flex', alignItems:'center', gap:8, marginTop:18, color:'#fff', fontSize:14.5}}>
              <Icon.whatsapp size={16}/> +52 81 2638 1417
            </a>
          </div>
          <div>
            <h5>Servicios</h5>
            <ul>
              <li><a href="#servicios">Visa por primera vez</a></li>
              <li><a href="#servicios">Renovación de visa</a></li>
              <li><a href="#servicios">Adelanto de citas</a></li>
              <li><a href="#contacto">Asesoría gratuita</a></li>
            </ul>
          </div>
          <div>
            <h5>Empresa</h5>
            <ul>
              <li><a href="#nosotros">Nosotros</a></li>
              <li><a href="#blog">Blog</a></li>
              <li><a href="#contacto">Contacto</a></li>
              <li><a href="#">Aviso de privacidad</a></li>
            </ul>
          </div>
          <div>
            <h5>Síguenos</h5>
            <ul>
              <li><a href="#">Instagram</a></li>
              <li><a href="#">Facebook</a></li>
              <li><a href="#">TikTok</a></li>
              <li><a href="#">YouTube</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 VisasPro. Todos los derechos reservados.</div>
          <div>VisasPro no es una agencia gubernamental ni está afiliada al gobierno de Estados Unidos.</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Blog, Contacto, Footer });