/* eslint-disable react/prop-types */
/**
 * ContactSection · Sección 11 del Home.
 * Brief 1 §3.1 Sección 11.
 *
 * - Claim grande izquierda
 * - Form a la derecha con title + subtitle
 * - Inputs estilo Brief 0.1 (border-bottom navy, focus cobre 2px)
 * - Botón cobre patinado
 * - ID #contacto
 */

const { useState: uS_C } = React;

function Field({ label, type = 'text', name, required, placeholder, ...rest }) {
  const [focused, setFocused] = uS_C(false);
  return (
    <label style={contStyles.field}>
      <span style={contStyles.fieldLabel}>{label}{required && ' *'}</span>
      <input
        type={type}
        name={name}
        required={required}
        placeholder={placeholder}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        style={{
          ...contStyles.input,
          borderBottomColor: focused ? 'var(--color-copper-fallback)' : 'rgba(33,52,64,0.5)',
          borderBottomWidth: focused ? 2 : 1,
        }}
        {...rest}
      />
    </label>
  );
}

function ContactSection() {
  const onSubmit = (e) => {
    e.preventDefault();
    /* En producción: integrar con backend o servicio de form. */
  };

  return (
    <section id="contacto" data-screen-label="11 Contact" style={contStyles.section}>
      <div className="container" style={contStyles.grid}>
        <div style={contStyles.claimCol}>
          <h2 style={contStyles.claim}>
            <span style={contStyles.claimLine}>DEL TERRENO A LA DECISIÓN.</span>
            <span style={contStyles.claimLine}>EN UNA REUNIÓN.</span>
          </h2>
        </div>

        <div style={contStyles.formCol}>
          <h3 style={contStyles.formTitle}>
            ¿Quieres saber qué hay debajo de tu próximo proyecto?
          </h3>
          <p style={contStyles.formSubtitle}>
            Déjanos tus datos y agenda tu diagnóstico inicial sin costo.
          </p>

          <form onSubmit={onSubmit} style={contStyles.form}>
            <div style={contStyles.row2}>
              <Field label="Nombre"   name="nombre"   required />
              <Field label="Apellido" name="apellido" required />
            </div>
            <Field label="Correo" type="email" name="correo" required />
            <div style={contStyles.row2}>
              <Field label="País" name="pais" placeholder="Ej. México" />
              <Field label="Teléfono" type="tel" name="telefono" placeholder="+52 ..." />
            </div>
            <Field label="Ubicación" name="ubicacion" placeholder="Ciudad / Polígono" />

            <label style={contStyles.field}>
              <span style={contStyles.fieldLabel}>¿Qué estás buscando? *</span>
              <select name="busca" required style={contStyles.select}>
                <option value="">Selecciona una opción</option>
                <option>Originación (análisis de demanda + tesis comercial)</option>
                <option>Co-Desarrollo (acompañar la ejecución del proyecto)</option>
                <option>Algoritmo DIGO® (estudio de polígono específico)</option>
                <option>Otro / Hablemos</option>
              </select>
            </label>

            <label style={contStyles.field}>
              <span style={contStyles.fieldLabel}>Mensaje</span>
              <textarea
                name="mensaje"
                rows="4"
                style={contStyles.textarea}
                placeholder="Cuéntanos brevemente del polígono o proyecto"
              />
            </label>

            <button type="submit" className="btn btn-copper" style={contStyles.submitBtn}>
              Enviar
              <window.Icon name="arrow-right" size={16} stroke={1.8} />
            </button>

            <p style={contStyles.disclaimer}>
              Al enviar, aceptas el tratamiento de tus datos según nuestro
              {' '}<a href="/home/Home.html#contacto" style={{ textDecoration: 'underline' }}>Aviso de Privacidad</a>.
            </p>
          </form>
        </div>
      </div>
    </section>
  );
}

const contStyles = {
  section: {
    background: '#fff',
    paddingBlock: 'var(--space-3xl)',
  },
  grid: {
    display: 'grid',
    gridTemplateColumns: '1fr',
    gap: 48,
  },
  claimCol: {},
  claim: {
    margin: 0,
    fontWeight: 800,
    fontSize: 'clamp(26px, 3.4vw, 40px)',
    lineHeight: 1.1,
    color: 'var(--color-navy-deep)',
    letterSpacing: '0.005em',
    display: 'flex',
    flexDirection: 'column',
    gap: 2,
  },
  claimLine: {
    whiteSpace: 'nowrap',
    display: 'block',
  },
  formCol: {
    background: 'var(--color-cream)',
    padding: 'clamp(24px, 4vw, 48px)',
    borderRadius: 4,
  },
  formTitle: {
    margin: 0,
    fontSize: 'clamp(18px, 1.8vw, 22px)',
    fontWeight: 700,
    color: 'var(--color-navy-deep)',
    lineHeight: 1.25,
    textWrap: 'pretty',
  },
  formSubtitle: {
    margin: '12px 0 32px',
    fontSize: 17,
    color: 'rgba(33,52,64,0.8)',
    lineHeight: 1.6,
  },
  form: {
    display: 'flex',
    flexDirection: 'column',
    gap: 24,
  },
  row2: {
    display: 'grid',
    gridTemplateColumns: '1fr 1fr',
    gap: 16,
  },
  field: {
    display: 'flex',
    flexDirection: 'column',
    gap: 8,
  },
  fieldLabel: {
    fontWeight: 700,
    fontSize: 12,
    letterSpacing: '0.12em',
    textTransform: 'uppercase',
    color: 'var(--color-navy-medium)',
  },
  input: {
    width: '100%',
    background: 'transparent',
    border: 0,
    borderBottom: '1px solid rgba(33,52,64,0.5)',
    fontFamily: 'inherit',
    fontSize: 16,
    padding: '12px 0',
    color: 'var(--color-navy-deep)',
    outline: 'none',
    transition: 'border-color 200ms ease-out, border-width 200ms ease-out',
  },
  select: {
    width: '100%',
    background: 'transparent',
    border: 0,
    borderBottom: '1px solid rgba(33,52,64,0.5)',
    fontFamily: 'inherit',
    fontSize: 16,
    padding: '12px 0',
    color: 'var(--color-navy-deep)',
    outline: 'none',
    appearance: 'none',
    backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'><path d='M1 1l6 6 6-6' fill='none' stroke='%23213440' stroke-width='1.5'/></svg>")`,
    backgroundRepeat: 'no-repeat',
    backgroundPosition: 'right 4px center',
  },
  textarea: {
    width: '100%',
    background: 'transparent',
    border: 0,
    borderBottom: '1px solid rgba(33,52,64,0.5)',
    fontFamily: 'inherit',
    fontSize: 16,
    padding: '12px 0',
    color: 'var(--color-navy-deep)',
    outline: 'none',
    resize: 'vertical',
    minHeight: 80,
  },
  submitBtn: {
    alignSelf: 'flex-start',
    marginTop: 8,
    padding: '16px 48px',
  },
  disclaimer: {
    margin: 0,
    fontSize: 12,
    color: 'var(--color-navy-medium)',
    lineHeight: 1.5,
  },
};

const contMQ = document.createElement('style');
contMQ.textContent = `
  /* En mobile, las frases del claim pueden romper si son muy largas */
  section[data-screen-label="11 Contact"] h2 > span {
    white-space: normal !important;
  }
  @media (min-width: 1024px) {
    section[data-screen-label="11 Contact"] .container {
      grid-template-columns: 1.2fr 1fr !important;
      gap: 56px !important;
      align-items: start !important;
    }
    /* En desktop, cada frase se mantiene en una sola línea */
    section[data-screen-label="11 Contact"] h2 > span {
      white-space: nowrap !important;
    }
  }
`;
document.head.appendChild(contMQ);

window.ContactSection = ContactSection;