/* RENOVAM — Contacto */
function App() {
  window.useReveal();
  return (
    <>
      <window.SiteNav />
      <window.Crumb items={[{label:'Inicio', href:'index.html'}, {label:'Contacto'}]} />
      <window.PageHero
        eyebrow="Contacto"
        title={<>Hablemos de <em style={{fontStyle:'italic', fontFamily:'Syne, serif', color:'var(--ink-dim)', fontWeight:300}}>tu proyecto.</em></>}
        sub="Cuatro formas de empezar. La más rápida es WhatsApp; la más detallada, una visita técnica."
      />

      <section className="section-pad">
        <div className="container">
          <div className="feature-grid reveal-stagger">
            <a href="https://wa.me/527778297622" target="_blank" rel="noopener" className="feature">
              <div className="feature-icon" style={{background:'#25D366'}}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="white"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51M12.05 22h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26C2.166 6.658 6.601 2.224 12.053 2.224c2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884"/></svg>
              </div>
              <h4>WhatsApp</h4>
              <p>Respuesta en minutos. Comparte tu recibo CFE para una cotización preliminar el mismo día.</p>
              <div style={{marginTop:14, fontFamily:'JetBrains Mono, monospace', fontSize:13, color:'var(--pink)'}}>+52 777 829 7622 →</div>
            </a>

            <a href="tel:+527778297622" className="feature">
              <div className="feature-icon">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M22 16v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 1h3a2 2 0 012 1.72c.13.96.37 1.9.7 2.81a2 2 0 01-.45 2.11L8.09 8.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.91.33 1.85.57 2.81.7A2 2 0 0122 16z" stroke="white" strokeWidth="2" strokeLinejoin="round"/></svg>
              </div>
              <h4>Llamada directa</h4>
              <p>Para clientes técnicos, urgencias y proyectos comerciales. Lunes a viernes 9:00 a 18:00.</p>
              <div style={{marginTop:14, fontFamily:'JetBrains Mono, monospace', fontSize:13, color:'var(--pink)'}}>777 829 7622 →</div>
            </a>

            <a href="mailto:hola@renovam.mx" className="feature">
              <div className="feature-icon">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><rect x="2" y="4" width="20" height="16" rx="2" stroke="white" strokeWidth="2"/><path d="M2 7l10 7L22 7" stroke="white" strokeWidth="2" strokeLinejoin="round"/></svg>
              </div>
              <h4>Email</h4>
              <p>Para cotizaciones detalladas, licitaciones y proyectos comerciales con planos anexos.</p>
              <div style={{marginTop:14, fontFamily:'JetBrains Mono, monospace', fontSize:13, color:'var(--pink)'}}>hola@renovam.mx →</div>
            </a>

            <a href="agenda.html" className="feature">
              <div className="feature-icon">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none"><rect x="3" y="4" width="18" height="18" rx="2" stroke="white" strokeWidth="2"/><path d="M3 10h18M8 2v4M16 2v4" stroke="white" strokeWidth="2" strokeLinecap="round"/></svg>
              </div>
              <h4>Agenda visita técnica</h4>
              <p>Formulario de 5 pasos. Un ingeniero RENOVAM te visita gratis dentro de los siguientes 7 días.</p>
              <div style={{marginTop:14, fontFamily:'JetBrains Mono, monospace', fontSize:13, color:'var(--pink)'}}>Empezar →</div>
            </a>
          </div>
        </div>
      </section>

      <section className="section-pad" style={{background:'#0a1428', borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)'}}>
        <div className="container">
          <div className="section-header reveal">
            <div>
              <div className="eyebrow">Oficinas</div>
              <h2 style={{marginTop:18}}>Encuéntranos en <em>Colonia Obrera.</em></h2>
            </div>
            <p>Nuestra oficina técnica y showroom. Visitas con cita previa para ver inversores, baterías y paneles funcionando.</p>
          </div>
          <div className="reveal" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:32, alignItems:'center'}}>
            <div style={{display:'grid', gap:24}}>
              <div>
                <h5 style={{fontFamily:'JetBrains Mono, monospace', fontSize:11, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--pink)', marginBottom:8}}>Dirección</h5>
                <p style={{fontSize:18, color:'var(--ink)', lineHeight:1.5, margin:0}}>Manuel M. Flores 25<br/>Col. Obrera, 06800<br/>Ciudad de México</p>
              </div>
              <div>
                <h5 style={{fontFamily:'JetBrains Mono, monospace', fontSize:11, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--pink)', marginBottom:8}}>Horario</h5>
                <p style={{fontSize:15, color:'var(--ink-dim)', lineHeight:1.6, margin:0}}>Lunes a viernes · 9:00 – 18:00<br/>Sábado · con cita previa<br/>Domingo · cerrado</p>
              </div>
              <div>
                <h5 style={{fontFamily:'JetBrains Mono, monospace', fontSize:11, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--pink)', marginBottom:8}}>Operación</h5>
                <p style={{fontSize:15, color:'var(--ink-dim)', lineHeight:1.6, margin:0}}>CDMX · Morelos · Naucalpan</p>
              </div>
              <div>
                <h5 style={{fontFamily:'JetBrains Mono, monospace', fontSize:11, letterSpacing:'0.16em', textTransform:'uppercase', color:'var(--pink)', marginBottom:8}}>Datos fiscales</h5>
                <p style={{fontSize:15, color:'var(--ink-dim)', lineHeight:1.6, margin:0}}>RFC: VAMC010629R73<br/>Régimen: RESICO<br/>Facturación CFDI 4.0</p>
              </div>
            </div>
            <div style={{aspectRatio:'4/3', borderRadius:'var(--radius-lg)', background:'linear-gradient(160deg, var(--navy-700), var(--navy-800))', border:'1px solid var(--line)', display:'flex', alignItems:'center', justifyContent:'center', position:'relative', overflow:'hidden'}}>
              <div style={{position:'absolute', inset:0, backgroundImage:'linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px)', backgroundSize:'40px 40px'}}></div>
              <div style={{position:'relative', textAlign:'center'}}>
                <div style={{width:60, height:60, borderRadius:'50%', background:'var(--pink)', display:'flex', alignItems:'center', justifyContent:'center', margin:'0 auto 16px', boxShadow:'0 0 0 8px rgba(196,30,91,0.2)'}}>
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M12 22s8-7 8-13a8 8 0 10-16 0c0 6 8 13 8 13z" stroke="white" strokeWidth="2" strokeLinejoin="round"/><circle cx="12" cy="9" r="3" stroke="white" strokeWidth="2"/></svg>
                </div>
                <div style={{fontFamily:'Syne, sans-serif', fontWeight:600, fontSize:18, color:'var(--ink)'}}>Manuel M. Flores 25</div>
                <div style={{fontSize:13, color:'var(--ink-mute)', marginTop:4}}>Col. Obrera · CDMX</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <window.SiteFooter />
      <window.WaFab />
    </>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />);