// Header + Hero + Trustbar
function Header({ scrolled, currentPage = 'home' }) {
  const base = currentPage === 'home' ? '' : 'VisasPro Web Page.html';
  const links = [
    { href: base + '#inicio', label: 'Inicio' },
    { href: currentPage === 'servicios' ? '#top' : base + '#servicios', label: 'Servicios', active: currentPage === 'servicios' },
    { href: currentPage === 'nosotros' ? '#top' : base + '#nosotros', label: 'Nosotros', active: currentPage === 'nosotros' },
    { href: base + '#blog', label: 'Blog' },
    { href: base + '#contacto', label: 'Contacto' },
  ];
  const landingHome = currentPage === 'home' ? '#inicio' : 'VisasPro Web Page.html';
  return (
    <header className={'header' + (scrolled ? ' scrolled' : '')}>
      <div className="container header-inner">
        <a href={landingHome} className="logo" aria-label="VisasPro inicio">
          <img src="assets/visaspro-logo.png" alt="VisasPro" />
        </a>
        <nav className="nav">
          {links.map(l => (
            <a key={l.label} href={l.href} className={l.active ? 'is-active' : ''}>{l.label}</a>
          ))}
        </nav>
        <div className="header-cta">
          <a className="wa" href="https://wa.me/528126381417" target="_blank" rel="noreferrer">
            <Icon.whatsapp size={16}/> +52 81 2638 1417
          </a>
          <a className="btn btn-dark btn-sm" href={base + '#contacto'}>
            Agenda asesoría <Icon.arrow/>
          </a>
        </div>
      </div>
    </header>
  );
}

function Hero() {
  return (
    <section className="hero" id="inicio">
      <div className="container hero-grid">
        <div className="hero-text reveal">
          <span className="eyebrow">
            <span className="dot"></span>
            Expertos en visa americana · México
          </span>
          <h1>
            Tu visa a <span className="accent">Estados Unidos,</span>{' '}
            <span className="serif-italic" style={{color:'var(--ink-900)'}}>sin estrés</span>{' '}
            ni vueltas innecesarias.
          </h1>
          <p className="hero-lead">
            Asesoría profesional de principio a fin para tramitar tu visa por primera vez,
            renovarla o conseguir un adelanto de cita. Te acompañamos en cada paso del proceso
            con experiencia comprobada en toda la república mexicana.
          </p>
          <div className="hero-actions">
            <a className="btn btn-primary" href="#contacto">
              Agenda tu asesoría gratis <Icon.arrow/>
            </a>
            <a className="btn btn-ghost" href="#servicios">
              Conoce nuestros servicios
            </a>
          </div>
          <div className="hero-meta">
            <div className="stat"><div className="num">+5,800</div><div className="lbl">Trámites realizados</div></div>
            <div className="stat"><div className="num">97%</div><div className="lbl">Tasa de aprobación</div></div>
            <div className="stat"><div className="num">+5</div><div className="lbl">Años de experiencia</div></div>
          </div>
        </div>

        <div className="hero-visual reveal" style={{'--delay':'150ms'}}>
          {/* Decorative background */}
          <svg className="bg-svg" viewBox="0 0 500 550" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
            <defs>
              <pattern id="dots" width="22" height="22" patternUnits="userSpaceOnUse">
                <circle cx="1.5" cy="1.5" r="1.2" fill="rgba(10,36,99,0.10)"/>
              </pattern>
              <linearGradient id="ringGrad" x1="0" y1="0" x2="1" y2="1">
                <stop offset="0" stopColor="#2563EB" stopOpacity=".28"/>
                <stop offset="1" stopColor="#2563EB" stopOpacity="0"/>
              </linearGradient>
              <radialGradient id="glow" cx="50%" cy="50%" r="50%">
                <stop offset="0" stopColor="#3B82F6" stopOpacity=".10"/>
                <stop offset="1" stopColor="#3B82F6" stopOpacity="0"/>
              </radialGradient>
            </defs>
            <rect x="0" y="0" width="500" height="550" fill="url(#dots)"/>
            <circle cx="250" cy="280" r="200" fill="url(#glow)"/>
            <circle cx="430" cy="60" r="80" fill="none" stroke="url(#ringGrad)" strokeWidth="1.4"/>
            <circle cx="430" cy="60" r="140" fill="none" stroke="url(#ringGrad)" strokeWidth="1"/>
            <g fill="#E11D2E" opacity=".7">
              <path d="M42 480l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/>
            </g>
            <g fill="#2563EB" opacity=".55">
              <path d="M468 478l2 4 5 .7-3.5 3.5.8 5-4.3-2.2-4.3 2.2.8-5L460 482.7l5-.7z"/>
            </g>
          </svg>

          {/* Boarding pass behind */}
          <div className="boarding-pass" aria-hidden="true">
            <div className="bp-row">
              <div className="bp-airline">Boarding Pass</div>
              <div className="bp-class">Class B1/B2</div>
            </div>
            <div className="bp-route">
              <div className="bp-city">
                <div className="code">MEX</div>
                <div className="city">Monterrey</div>
              </div>
              <div className="bp-arc"></div>
              <div className="bp-city" style={{textAlign:'right'}}>
                <div className="code">USA</div>
                <div className="city">Estados Unidos</div>
              </div>
            </div>
            <div className="bp-meta">
              <div>
                <div className="k">Pasajero</div>
                <div className="v">A. González</div>
              </div>
              <div>
                <div className="k">Trámite</div>
                <div className="v">Primera vez</div>
              </div>
              <div>
                <div className="k">Asesor</div>
                <div className="v">VisasPro</div>
              </div>
            </div>
          </div>

          {/* Visa card front */}
          <div className="visa-card" data-comment-anchor="cc-1">
            <div className="v-banner">
              <span className="country">United States of America</span>
              <span className="stars" aria-hidden="true">
                {[0,1,2,3,4].map(i => (
                  <svg key={i} viewBox="0 0 24 24" fill="#fff">
                    <path d="M12 2l3 6.5 7 1-5 4.8 1.3 7L12 18l-6.3 3.3L7 14.3l-5-4.8 7-1L12 2z"/>
                  </svg>
                ))}
              </span>
            </div>
            <div className="v-stripe" aria-hidden="true"></div>

            <div className="v-title-row">
              <div>
                <div className="pretitle">Nonimmigrant Visa</div>
                <div className="title">Visa Americana</div>
              </div>
              <div className="seal" aria-hidden="true">
                <span className="eagle">★</span>
              </div>
            </div>

            <div className="v-body">
              <div className="photo" aria-hidden="true">
                <svg viewBox="0 0 84 112" preserveAspectRatio="xMidYMid slice">
                  <defs>
                    <linearGradient id="photoBg" x1="0" y1="0" x2="0" y2="1">
                      <stop offset="0" stopColor="#DBE3F1"/>
                      <stop offset="1" stopColor="#B8C5DD"/>
                    </linearGradient>
                  </defs>
                  <rect width="84" height="112" fill="url(#photoBg)"/>
                  <circle cx="42" cy="44" r="16" fill="#94A3B8" opacity=".75"/>
                  <path d="M16 112c0-14.4 11.6-26 26-26s26 11.6 26 26" fill="#94A3B8" opacity=".75"/>
                </svg>
              </div>
              <div className="fields">
                <div className="field-row">
                  <div className="k">Apellidos · Surname</div>
                  <div className="v">GONZÁLEZ MARTÍNEZ</div>
                </div>
                <div className="field-row">
                  <div className="k">Nombre · Given name</div>
                  <div className="v">ANA MARÍA</div>
                </div>
                <div className="field-row duo">
                  <div>
                    <div className="k">Tipo</div>
                    <div className="v">B1 / B2</div>
                  </div>
                  <div>
                    <div className="k">Vigencia</div>
                    <div className="v">10 años</div>
                  </div>
                </div>
                <div className="field-row duo">
                  <div>
                    <div className="k">Emitida</div>
                    <div className="v">14 MAY 2026</div>
                  </div>
                  <div>
                    <div className="k">Expira</div>
                    <div className="v">13 MAY 2036</div>
                  </div>
                </div>
              </div>
            </div>

            <div className="v-foot">
              VISA&lt;USAGONZALEZ&lt;&lt;ANA&lt;MARIA&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;&lt;<br/>
              AB1234567&lt;9MEX9001017F3605134
            </div>

            <div className="approved" aria-hidden="true">
              <div className="stamp">Aprobada</div>
              <div className="sub">VisasPro · 2026</div>
            </div>
          </div>

          {/* Floating chips */}
          <div className="floating-chip fc-1">
            <div className="badge"><Icon.check size={14}/></div>
            <div>
              <div style={{fontSize:12, color:'var(--ink-400)', fontWeight:400}}>Cita CAS</div>
              <div>Confirmada · 14 oct</div>
            </div>
          </div>
          <div className="floating-chip fc-2">
            <div className="badge" style={{background:'#FDECEE', color:'var(--red-500)'}}>
              <Icon.spark size={14}/>
            </div>
            <div>
              <div style={{fontSize:12, color:'var(--ink-400)', fontWeight:400}}>Adelanto disponible</div>
              <div>Monterrey · Nov 2025</div>
            </div>
          </div>
          <div className="floating-chip fc-3">
            <div className="badge"><Icon.shield size={14}/></div>
            <div>Asesoría 1:1</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function TrustBar() {
  return (
    <div className="trustbar">
      <div className="container trustbar-inner">
        <div className="pill"><span className="dot"></span> Atención en toda la república</div>
        <div>Asesoría 100% remota o presencial · Acompañamiento DS-160 incluido</div>
        <div>★ 4.9/5 en reseñas de clientes</div>
      </div>
    </div>
  );
}

Object.assign(window, { Header, Hero, TrustBar });