const ContactForm = () => {
  const [data, setData] = React.useState({
    nombre: '', whatsapp: '', email: '',
    tipo: 'hogar', factura: '', ciudad: 'Barranquilla', mensaje: '',
  });
  const [sent, setSent] = React.useState(false);
  const set = (k, v) => setData(d => ({ ...d, [k]: v }));

  const labelStyle = {
    fontSize: 11, fontWeight: 700, letterSpacing: '.12em',
    textTransform: 'uppercase', color: '#C4A84F', marginBottom: 8,
    display: 'block', fontFamily: 'Inter',
  };
  const inputStyle = {
    width: '100%', boxSizing: 'border-box',
    fontFamily: 'Inter', fontSize: 15, padding: '14px 16px',
    border: '1.5px solid rgba(255,255,255,0.18)', borderRadius: 12,
    background: 'rgba(255,255,255,0.04)', color: '#fff',
    outline: 'none', transition: 'border .2s, box-shadow .2s, background .2s',
  };
  const onFocus = e => {
    e.target.style.borderColor = '#C4A84F';
    e.target.style.boxShadow = '0 0 0 4px rgba(196,168,79,0.18)';
    e.target.style.background = 'rgba(255,255,255,0.07)';
  };
  const onBlur = e => {
    e.target.style.borderColor = 'rgba(255,255,255,0.18)';
    e.target.style.boxShadow = 'none';
    e.target.style.background = 'rgba(255,255,255,0.04)';
  };

  const segBtn = (id, label) => (
    <button key={id} onClick={() => set('tipo', id)} style={{
      flex: 1, padding: '14px 8px', fontSize: 13, fontWeight: 700, fontFamily: 'Inter',
      border: '1.5px solid', borderColor: data.tipo === id ? '#C4A84F' : 'rgba(255,255,255,0.18)',
      borderRadius: 12, cursor: 'pointer',
      background: data.tipo === id ? 'rgba(196,168,79,0.16)' : 'transparent',
      color: data.tipo === id ? '#C4A84F' : 'rgba(255,255,255,0.7)',
      transition: 'all .2s',
    }}>{label}</button>
  );

  const submit = () => {
    if (!data.nombre || !data.whatsapp) { alert('Completa nombre y WhatsApp'); return; }
    setSent(true);
  };

  return (
    <section id="diagnostico" style={{
      padding: '96px 48px', background: '#0F3518', position: 'relative', overflow: 'hidden',
    }} className="amp-px amp-py">
      <div style={{ position: 'absolute', bottom: -300, left: -200, width: 700, height: 700,
        border: '1px solid rgba(196,168,79,0.08)', borderRadius: '50%', pointerEvents: 'none' }}/>
      <div className="amp-g2" style={{ maxWidth: 1200, margin: '0 auto', display: 'grid',
        gridTemplateColumns: '5fr 7fr', gap: 64, position: 'relative', alignItems: 'start' }}>

        <div className="amp-unsticky" style={{ color: '#fff', position: 'sticky', top: 100 }}>
          <Eyebrow dark>Solicita tu diagnóstico</Eyebrow>
          <h2 style={{ fontFamily: 'Inter', fontSize: 48, fontWeight: 600, lineHeight: 1.15,
            color: '#fff', margin: '16px 0 24px', letterSpacing: '-.01em', textWrap: 'balance' }}>
            Hablemos de tu proyecto <span style={{ color: '#C4A84F' }}>energético</span>
          </h2>
          <p style={{ color: 'rgba(255,255,255,0.7)', margin: '0 0 32px', fontSize: 16, lineHeight: 1.65 }}>
            Un asesor especializado te contactará en menos de 24h para entender tu consumo y proponer la mejor solución.
          </p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {[
              { icon: 'schedule', label: 'Respuesta en menos de 24h' },
              { icon: 'verified', label: 'Asesoría sin costo ni compromiso' },
              { icon: 'engineering', label: 'Diagnóstico realizado por ingenieros certificados' },
            ].map(b => (
              <div key={b.label} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{
                  width: 40, height: 40, borderRadius: 12,
                  background: 'rgba(196,168,79,0.16)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  flexShrink: 0,
                }}>
                  <Icon name={b.icon} size={20} color="#C4A84F"/>
                </div>
                <span style={{ fontSize: 15, color: 'rgba(255,255,255,0.85)' }}>{b.label}</span>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 40, paddingTop: 32, borderTop: '1px solid rgba(255,255,255,0.10)' }}>
            <Eyebrow dark>O escríbenos directo</Eyebrow>
            <div style={{ display: 'flex', gap: 12, marginTop: 12 }}>
              <a href="https://wa.me/573017859742" target="_blank" rel="noopener noreferrer" style={{ display: 'inline-flex', alignItems: 'center', gap: 8,
                color: '#C4A84F', textDecoration: 'none', fontSize: 14, fontWeight: 600 }}>
                <Icon name="chat" size={18} color="#C4A84F"/>WhatsApp
              </a>
              <span style={{ color: 'rgba(255,255,255,0.2)' }}>·</span>
              <a href="mailto:comercial@amperaenergy.co" style={{ display: 'inline-flex', alignItems: 'center', gap: 8,
                color: '#C4A84F', textDecoration: 'none', fontSize: 14, fontWeight: 600 }}>
                <Icon name="mail" size={18} color="#C4A84F"/>comercial@amperaenergy.co
              </a>
            </div>
          </div>
        </div>

        {sent ? (
          <div style={{
            background: 'rgba(255,255,255,0.04)', borderRadius: 24, padding: 56,
            border: '1px solid rgba(196,168,79,0.24)', textAlign: 'center',
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 20,
          }}>
            <div style={{ width: 72, height: 72, borderRadius: '50%',
              background: 'rgba(196,168,79,0.18)', display: 'flex',
              alignItems: 'center', justifyContent: 'center' }}>
              <Icon name="check_circle" size={40} color="#C4A84F"/>
            </div>
            <h3 style={{ fontFamily: 'Inter', fontSize: 28, fontWeight: 600, color: '#fff',
              margin: 0, letterSpacing: '-.01em' }}>Solicitud enviada</h3>
            <p style={{ color: 'rgba(255,255,255,0.7)', maxWidth: 420, lineHeight: 1.6, margin: 0 }}>
              Gracias, <span style={{ color: '#C4A84F', fontWeight: 600 }}>{data.nombre || 'amigo'}</span>.
              Un asesor energético te contactará al WhatsApp <strong style={{ color: '#fff' }}>{data.whatsapp}</strong> en menos de 24h con tu diagnóstico preliminar.
            </p>
            <Button variant="primary" onClick={() => { setSent(false); setData({...data, nombre:'', whatsapp:'', email:'', mensaje:''}); }}>
              Enviar otra solicitud
            </Button>
          </div>
        ) : (
          <div style={{
            background: 'rgba(255,255,255,0.04)', borderRadius: 24, padding: 40,
            border: '1px solid rgba(255,255,255,0.10)',
            backdropFilter: 'blur(20px)',
          }}>
            <div className="amp-g2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginBottom: 20 }}>
              <div>
                <label style={labelStyle}>Nombre completo *</label>
                <input type="text" placeholder="María Rivera" style={inputStyle}
                  value={data.nombre} onChange={e => set('nombre', e.target.value)}
                  onFocus={onFocus} onBlur={onBlur}/>
              </div>
              <div>
                <label style={labelStyle}>WhatsApp *</label>
                <input type="tel" placeholder="+57 300 123 4567" style={inputStyle}
                  value={data.whatsapp} onChange={e => set('whatsapp', e.target.value)}
                  onFocus={onFocus} onBlur={onBlur}/>
              </div>
            </div>
            <div style={{ marginBottom: 20 }}>
              <label style={labelStyle}>Email</label>
              <input type="email" placeholder="maria@correo.com" style={inputStyle}
                value={data.email} onChange={e => set('email', e.target.value)}
                onFocus={onFocus} onBlur={onBlur}/>
            </div>
            <div style={{ marginBottom: 20 }}>
              <label style={labelStyle}>Tipo de proyecto</label>
              <div style={{ display: 'flex', gap: 8 }}>
                {segBtn('hogar', 'Hogar')}
                {segBtn('negocio', 'Negocio')}
                {segBtn('empresa', 'Empresa')}
              </div>
            </div>
            <div className="amp-g2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginBottom: 20 }}>
              <div>
                <label style={labelStyle}>Factura mensual (COP)</label>
                <input type="text" placeholder="$500.000" style={inputStyle}
                  value={data.factura} onChange={e => set('factura', e.target.value)}
                  onFocus={onFocus} onBlur={onBlur}/>
              </div>
              <div>
                <label style={labelStyle}>Ciudad</label>
                <select style={{...inputStyle, appearance: 'none',
                  backgroundImage: 'url("data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22><path d=%22M2 4l4 4 4-4%22 stroke=%22%23C4A84F%22 stroke-width=%221.5%22 fill=%22none%22/></svg>")',
                  backgroundRepeat: 'no-repeat', backgroundPosition: 'right 16px center', paddingRight: 40,
                }}
                  value={data.ciudad} onChange={e => set('ciudad', e.target.value)}
                  onFocus={onFocus} onBlur={onBlur}>
                  {['Barranquilla','Puerto Colombia','Santa Marta','Cartagena','Valledupar','Montería','Sincelejo','Riohacha','Otra'].map(c =>
                    <option key={c} style={{background: '#0F3518'}}>{c}</option>)}
                </select>
              </div>
            </div>
            <div style={{ marginBottom: 28 }}>
              <label style={labelStyle}>Cuéntanos sobre tu proyecto (opcional)</label>
              <textarea rows={4} placeholder="Tipo de cubierta, área disponible, consumo principal..."
                style={{...inputStyle, resize: 'vertical', minHeight: 100, fontFamily: 'Inter'}}
                value={data.mensaje} onChange={e => set('mensaje', e.target.value)}
                onFocus={onFocus} onBlur={onBlur}/>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, flexWrap: 'wrap' }}>
              <p style={{ fontSize: 11, color: 'rgba(255,255,255,0.45)', margin: 0, maxWidth: 320, lineHeight: 1.5 }}>
                Al enviar aceptas nuestra{' '}
                <a href="/politica-de-datos/" target="_blank" rel="noopener noreferrer" style={{ color: 'rgba(196,168,79,0.7)', textDecoration: 'underline' }}>política de tratamiento de datos</a>
                {' '}(Ley 1581/2012). No compartimos tu información.
              </p>
              <Button variant="primary" icon="arrow_forward" onClick={submit}
                style={{ padding: '16px 32px' }}>
                Enviar solicitud
              </Button>
            </div>
          </div>
        )}
      </div>
    </section>
  );
};

window.ContactForm = ContactForm;