const btnStyle = { background: 'var(--accent)', color: 'var(--ink-900)', border: 'none', borderRadius: 'var(--radius-md)', padding: '11px 22px', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 15, cursor: 'pointer' };
const fieldWrap = { display: 'flex', flexDirection: 'column', gap: 6 };
const labelStyle = { fontFamily: 'var(--font-body)', fontSize: 13, fontWeight: 600, color: 'var(--text-primary)' };
const inputStyle = { fontFamily: 'var(--font-body)', fontSize: 15, padding: '10px 12px', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-default)', background: 'var(--surface-card)', color: 'var(--text-primary)', outline: 'none' };

function SuccessNote({ children }) {
  const { Icon } = window.MarceloCasteloIODesignSystem_5e00d7;
  return <div style={{ display: 'flex', alignItems: 'center', gap: 8, background: 'var(--signal-100)', color: 'var(--signal-600)', borderRadius: 'var(--radius-md)', padding: 'var(--space-4)', fontFamily: 'var(--font-body)', fontSize: 14 }}><Icon name="check-circle-2" size={16} />{children}</div>;
}

/** Modal shell used by the training/mentoring/contact forms. */
function FormModal({ title, onClose, children }) {
  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(0,0,0,.7)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 999, padding: 20 }}>
      <div onClick={(e) => e.stopPropagation()} style={{ background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: 'var(--space-6)', width: 420, maxWidth: '100%', boxShadow: 'var(--shadow-lg)' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 'var(--space-5)' }}>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 20, fontWeight: 600, color: 'var(--text-primary)' }}>{title}</div>
          <span onClick={onClose} style={{ cursor: 'pointer', color: 'var(--text-muted)', fontSize: 20, lineHeight: 1 }}>×</span>
        </div>
        {children}
      </div>
    </div>
  );
}

function TrainingSignupForm({ trainingTitle, onClose }) {
  const [sent, setSent] = React.useState(false);
  if (sent) return <FormModal title="Inscrição confirmada" onClose={onClose}><SuccessNote>Inscrição em "{trainingTitle}" recebida. Você vai receber os detalhes por e-mail.</SuccessNote></FormModal>;
  return (
    <FormModal title={'Inscrever-se: ' + trainingTitle} onClose={onClose}>
      <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
        <div style={fieldWrap}><span style={labelStyle}>Nome</span><input required style={inputStyle} placeholder="Seu nome" /></div>
        <div style={fieldWrap}><span style={labelStyle}>E-mail</span><input required type="email" style={inputStyle} placeholder="voce@empresa.com" /></div>
        <button type="submit" style={btnStyle}>Confirmar inscrição</button>
      </form>
    </FormModal>
  );
}

function MentoringBookingForm({ optionTitle, onClose }) {
  const [sent, setSent] = React.useState(false);
  if (sent) return <FormModal title="Solicitação enviada" onClose={onClose}><SuccessNote>Pedido de "{optionTitle}" recebido. Marcelo entra em contato para agendar.</SuccessNote></FormModal>;
  return (
    <FormModal title={'Agendar: ' + optionTitle} onClose={onClose}>
      <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
        <div style={fieldWrap}><span style={labelStyle}>Nome</span><input required style={inputStyle} placeholder="Seu nome" /></div>
        <div style={fieldWrap}><span style={labelStyle}>E-mail</span><input required type="email" style={inputStyle} placeholder="voce@empresa.com" /></div>
        <div style={fieldWrap}><span style={labelStyle}>O que você quer discutir?</span><textarea required rows={3} style={{ ...inputStyle, resize: 'vertical', fontFamily: 'var(--font-body)' }} placeholder="Breve contexto da decisão ou situação" /></div>
        <button type="submit" style={btnStyle}>Enviar solicitação</button>
      </form>
    </FormModal>
  );
}

function ContactForm({ onClose }) {
  const [sent, setSent] = React.useState(false);
  if (sent) return <FormModal title="Mensagem enviada" onClose={onClose}><SuccessNote>Sua mensagem foi enviada para contato@marcelocastelo.io.</SuccessNote></FormModal>;
  return (
    <FormModal title="Enviar mensagem" onClose={onClose}>
      <form onSubmit={(e) => { e.preventDefault(); setSent(true); }} style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-4)' }}>
        <div style={fieldWrap}><span style={labelStyle}>Nome</span><input required style={inputStyle} placeholder="Seu nome" /></div>
        <div style={fieldWrap}><span style={labelStyle}>E-mail</span><input required type="email" style={inputStyle} placeholder="voce@empresa.com" /></div>
        <div style={fieldWrap}><span style={labelStyle}>Mensagem</span><textarea required rows={4} style={{ ...inputStyle, resize: 'vertical', fontFamily: 'var(--font-body)' }} placeholder="Como posso ajudar?" /></div>
        <button type="submit" style={btnStyle}>Enviar para contato@marcelocastelo.io</button>
      </form>
    </FormModal>
  );
}
Object.assign(window, { TrainingSignupForm, MentoringBookingForm, ContactForm });