function Contacto({ onCotizar }) {
  const [form, setForm] = React.useState({
    nombre: '', empresa: '', telefono: '', email: '', mensaje: '',
  });
  const [sent, setSent] = React.useState(false);

  const update = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const submit = (e) => {
    e.preventDefault();
    setSent(true);
    setTimeout(() => setSent(false), 4500);
  };

  return (
    <section id="contacto" data-screen-label="Contacto" style={{
      padding: '120px 0',
      background: 'var(--bg)',
      position: 'relative',
    }}>
      <div className="container">

        <div className="contact-grid" style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1.2fr',
          gap: 80,
          alignItems: 'start',
        }}>

          {/* LEFT */}
          <div>
            <div className="eyebrow" style={{ marginBottom: 24 }}>Contacto</div>

            <h2 className="serif contact-heading" style={{
              fontSize: 'clamp(56px, 7vw, 96px)',
              fontWeight: 700,
              color: 'var(--navy)',
              lineHeight: 1,
              marginBottom: 24,
              letterSpacing: '-0.02em',
            }}>
              Hablemos
            </h2>

            <p style={{
              fontSize: 16,
              color: 'var(--ink-2)',
              lineHeight: 1.6,
              marginBottom: 40,
              maxWidth: 460,
            }}>
              Cuéntanos sobre tu operación y necesidades. Nuestro equipo está listo para encontrar la solución adecuada para ti.
            </p>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 22 }}>
              <ContactRow icon="mail" label="Administrativo" value="administrativo@cmpi.com.co" href="mailto:administrativo@cmpi.com.co" />
              <ContactRow icon="mail" label="Servicio al cliente" value="servicioalcliente@cmpi.com.co" href="mailto:servicioalcliente@cmpi.com.co" />
              <ContactRow icon="phone" label="Teléfono" value="(601) 413 7719" href="tel:+576014137719" />
              <ContactRow icon="pin" label="Dirección" value={<>Calle 14 No. 57-36, Piso 3<br/>Bogotá, Colombia</>} />
            </div>
          </div>

          {/* RIGHT - Form card */}
          <div style={{
            background: 'white',
            borderRadius: 16,
            padding: 4,
            position: 'relative',
            boxShadow: '0 20px 60px rgba(15,27,61,0.10)',
            overflow: 'hidden',
          }}>
            {/* Gradient top border */}
            <div style={{
              position: 'absolute',
              top: 0, left: 0, right: 0,
              height: 4,
              background: 'var(--gradient)',
            }} />

            <div style={{ padding: '36px 36px 36px' }}>
              <h3 className="serif" style={{
                fontSize: 26,
                fontWeight: 700,
                color: 'var(--navy)',
                marginBottom: 28,
                letterSpacing: '-0.01em',
              }}>
                Envíanos un mensaje
              </h3>

              <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
                <div className="form-row modal-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                  <div className="field">
                    <label>Nombre completo <span style={{ color: 'var(--teal)' }}>*</span></label>
                    <input type="text" value={form.nombre} onChange={update('nombre')} required placeholder="Juan García" />
                  </div>
                  <div className="field">
                    <label>Empresa</label>
                    <input type="text" value={form.empresa} onChange={update('empresa')} placeholder="Mi empresa S.A.S." />
                  </div>
                </div>

                <div className="form-row modal-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                  <div className="field">
                    <label>Teléfono</label>
                    <input type="tel" value={form.telefono} onChange={update('telefono')} placeholder="+57 300 000 0000" />
                  </div>
                  <div className="field">
                    <label>Correo electrónico <span style={{ color: 'var(--teal)' }}>*</span></label>
                    <input type="email" value={form.email} onChange={update('email')} required placeholder="juan@empresa.com" />
                  </div>
                </div>

                <div className="field">
                  <label>Mensaje <span style={{ color: 'var(--teal)' }}>*</span></label>
                  <textarea rows="4" value={form.mensaje} onChange={update('mensaje')} required placeholder="Cuéntanos sobre tu necesidad de papel o materia prima..." style={{ resize: 'vertical', minHeight: 110, fontFamily: 'inherit' }} />
                </div>

                <button type="submit" className="btn btn-gradient" style={{
                  marginTop: 6,
                  padding: '16px 24px',
                  fontSize: 13,
                }}>
                  {sent ? '✓ Mensaje enviado' : 'Enviar mensaje'}
                  {!sent && (
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" style={{ marginLeft: 4 }}>
                      <line x1="22" y1="2" x2="11" y2="13"/>
                      <polygon points="22 2 15 22 11 13 2 9 22 2"/>
                    </svg>
                  )}
                </button>
              </form>
            </div>
          </div>

        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .contact-grid { grid-template-columns: 1fr !important; gap: 56px !important; }
        }
        @media (max-width: 540px) {
          .form-row { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

function ContactRow({ icon, label, value, href }) {
  const iconSvg = {
    mail:  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>,
    phone: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>,
    pin:   <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>,
  }[icon];

  const Wrapper = href ? 'a' : 'div';

  return (
    <Wrapper href={href} style={{
      display: 'flex',
      gap: 16,
      alignItems: 'flex-start',
      transition: 'transform .2s',
    }}
    onMouseOver={href ? (e) => e.currentTarget.style.transform = 'translateX(4px)' : undefined}
    onMouseOut={href ? (e) => e.currentTarget.style.transform = 'translateX(0)' : undefined}
    >
      <div style={{
        flexShrink: 0,
        width: 38, height: 38,
        borderRadius: 10,
        background: 'var(--bg-2)',
        color: 'var(--teal)',
        display: 'grid',
        placeItems: 'center',
        border: '1px solid var(--rule)',
      }}>{iconSvg}</div>
      <div>
        <div style={{
          fontSize: 11,
          fontWeight: 700,
          letterSpacing: '0.14em',
          textTransform: 'uppercase',
          color: 'var(--navy)',
          marginBottom: 4,
        }}>{label}</div>
        <div style={{
          fontSize: 15,
          color: 'var(--teal-2)',
          fontWeight: 500,
          lineHeight: 1.4,
        }}>{value}</div>
      </div>
    </Wrapper>
  );
}

window.Contacto = Contacto;