const formStyles = {
  section: {
    background: 'var(--bg-2)',
    borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)',
    textAlign: 'center', maxWidth: '100%',
  },
  inner: { maxWidth: 700, margin: '0 auto', padding: '8rem 2rem' },
  eyebrow: { fontSize: '0.65rem', letterSpacing: '.22em', textTransform: 'uppercase', color: 'var(--gold)', marginBottom: '1.5rem' },
  title: {
    fontFamily: "'Plus Jakarta Sans', sans-serif",
    fontSize: 'clamp(2.5rem, 5vw, 4.5rem)',
    fontWeight: 700, lineHeight: 1.0, letterSpacing: '-0.02em', marginBottom: '16px',
  },
  body: { fontSize: '1rem', color: 'var(--fg-muted)', maxWidth: 460, margin: '0 auto 3rem' },
  form: { display: 'flex', flexDirection: 'column', gap: '1rem', maxWidth: 440, margin: '0 auto' },
  input: {
    background: 'transparent', border: '1px solid var(--border)',
    color: 'var(--fg)', fontFamily: "'Plus Jakarta Sans', sans-serif",
    fontSize: '.9rem', fontWeight: 300, padding: '.9rem 1.2rem',
    outline: 'none', transition: 'border-color .25s', appearance: 'none', width: '100%',
  },
  submit: {
    background: 'var(--gold)', color: 'var(--bg)', border: 'none', cursor: 'pointer',
    fontFamily: "'Plus Jakarta Sans', sans-serif",
    fontSize: '0.78rem', letterSpacing: '.15em', textTransform: 'uppercase',
    fontWeight: 500, padding: '1rem', transition: 'background .25s, transform .2s',
  },
  note: { fontSize: '.78rem', color: 'var(--fg-muted)', marginTop: '1rem', letterSpacing: '.04em' },
};

function FocusInput(props) {
  const [f, setF] = React.useState(false);
  return <input {...props}
    onFocus={(e) => { setF(true); props.onFocus && props.onFocus(e); }}
    onBlur={(e) => { setF(false); props.onBlur && props.onBlur(e); }}
    style={{ ...formStyles.input, borderColor: f ? 'var(--gold)' : 'var(--border)', ...(props.style || {}) }} />;
}

function RegistrationForm() {
  const [submitted, setSubmitted] = React.useState(false);
  const onSubmit = (e) => { e.preventDefault(); setSubmitted(true); };
  return (
    <div style={formStyles.section} id="registrati">
      <div className="form-inner" style={formStyles.inner}>
        <p style={formStyles.eyebrow}>Posti limitati</p>
        <h2 style={formStyles.title}>Prenota il tuo<br/>posto a <em style={{ fontStyle: 'normal', color: 'var(--gold)' }}>Matera</em></h2>
        <p style={formStyles.body}>L'ingresso è gratuito, su registrazione. Compila il form per riservare la tua partecipazione al REnderia Day.</p>
        {submitted ? (
          <p style={{ fontFamily: "'Plus Jakarta Sans', sans-serif", fontSize: '1.6rem', color: 'var(--gold)',  }}>Grazie. Ti contatteremo a breve.</p>
        ) : (
          <form style={formStyles.form} onSubmit={onSubmit}>
            <div className="form-row-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
              <FocusInput type="text" placeholder="Nome" />
              <FocusInput type="text" placeholder="Cognome" />
            </div>
            <FocusInput type="text" placeholder="Ruolo" />
            <FocusInput type="text" placeholder="Azienda" />
            <FocusInput type="text" placeholder="P. IVA" />
            <select style={{ ...formStyles.input, color: 'var(--fg-muted)', cursor: 'pointer' }}>
              <option value="" disabled>Settore di attività</option>
              <option>Agenzia immobiliare</option>
              <option>Costruttore</option>
              <option>Designer</option>
            </select>
            <FocusInput type="email" placeholder="Email" />
            <FocusInput type="tel" placeholder="Cellulare" />
            <button type="submit" style={formStyles.submit}
              onMouseEnter={(e) => { e.currentTarget.style.background = 'var(--gold-light)'; e.currentTarget.style.transform = 'translateY(-1px)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = 'var(--gold)'; e.currentTarget.style.transform = 'translateY(0)'; }}>
              Prenota il posto →
            </button>
          </form>
        )}
        <p style={formStyles.note}>Partecipazione gratuita · 23 giugno 2026 · Matera</p>
      </div>
    </div>
  );
}

window.RegistrationForm = RegistrationForm;