// Sculty Dog — Pagina "Lavora con noi" / candidature partner

function LavoraConNoi({ onNavigate }) {
  const [form, setForm] = React.useState({
    tipologia: '',
    nome: '',
    attivita: '',
    citta: '',
    email: '',
    telefono: '',
    instagram: '',
    sito: '',
    messaggio: ''
  });
  const [sent, setSent] = React.useState(false);

  const tipologie = [
  { k: 'creator', label: 'Content creator', desc: 'Influencer, fotografi, profili animal-friendly' },
  { k: 'negozio', label: 'Negozio di animali', desc: 'Pet shop, e-commerce, catene di settore' },
  { k: 'toelettatura', label: 'Toelettatura', desc: 'Saloni e centri di toelettatura' },
  { k: 'veterinario', label: 'Veterinario', desc: 'Cliniche e ambulatori veterinari' },
  { k: 'altro', label: 'Altro', desc: 'Hai un\'idea diversa? Raccontacela' }];


  const ruoli = [];


  const update = (k, v) => setForm({ ...form, [k]: v });
  const valid = form.tipologia && form.nome && form.email && form.telefono && form.instagram && form.attivita && form.citta && form.messaggio.length > 10;

  const handleSubmit = () => {
    setSent(true);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  if (sent) {
    return (
      <div style={{ padding: 'clamp(56px, 8vw, 80px) clamp(20px, 4vw, 40px)', maxWidth: 720, margin: '0 auto', textAlign: 'center', minHeight: '60vh' }}>
        <div style={{ fontSize: 64, marginBottom: 16 }}>🤝</div>
        <h1 style={{ fontFamily: 'var(--sd-font-serif)', fontSize: 'clamp(40px, 6.4vw, 64px)', fontWeight: 400, lineHeight: 1.05, letterSpacing: '-0.02em', margin: 0 }}>
          Grazie {form.nome.split(' ')[0]}!
        </h1>
        <p style={{ fontSize: 18, color: 'var(--sd-ink-2)', maxWidth: 520, margin: '24px auto 0', lineHeight: 1.6 }}>
          Abbiamo ricevuto la tua candidatura. La leggeremo con attenzione e ti
          ricontatteremo all&rsquo;indirizzo <strong>{form.email}</strong> entro
          5 giorni lavorativi.
        </p>
        <div style={{ marginTop: 40, display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
          <button onClick={() => onNavigate('home')} style={sdPrimaryBtn}>Torna alla home</button>
          <button onClick={() => onNavigate('galleria')} style={sdSecondaryBtn}>Esplora la galleria</button>
        </div>
      </div>);

  }

  return (
    <div style={{ padding: 'clamp(40px, 6vw, 60px) clamp(20px, 4vw, 40px)', maxWidth: 1080, margin: '0 auto' }}>
      <div style={{ textAlign: 'center', marginBottom: 'clamp(40px, 6vw, 56px)' }}>
        <div className="sd-eyebrow" style={{ marginBottom: 16 }}>LAVORA CON NOI</div>
        <h1 style={{ margin: 0, fontFamily: 'var(--sd-font-serif)', fontSize: 'clamp(44px, 8vw, 88px)', fontWeight: 400, lineHeight: 1, letterSpacing: '-0.025em', color: 'var(--sd-ink)' }}>
          Diventa partner Sculty Dog.
        </h1>
        <p style={{ maxWidth: 620, lineHeight: 1.7, margin: '24px auto 0', fontSize: 18, color: 'var(--sd-ink-2)' }}>
          Se sei content creator, hai un negozio di animali, una toelettatura
          o sei un veterinario e vuoi portare le miniature Sculty Dog nei
          tuoi spazi e ai tuoi clienti, compila il modulo di candidatura.
        </p>
      </div>

      <div style={{ background: 'var(--sd-paper)', borderRadius: 'var(--sd-r-lg)', padding: 'clamp(24px, 4vw, 40px)', boxShadow: 'var(--sd-shadow-card)' }}>

        <SezioneTitolo num="01" titolo="Chi sei?" />
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))', gap: 10, marginBottom: 32 }}>
          {tipologie.map((t) =>
          <CardScelta key={t.k} checked={form.tipologia === t.k} onClick={() => update('tipologia', t.k)}
          title={t.label} desc={t.desc} />
          )}
        </div>

        <SezioneTitolo num="02" titolo="Parlaci di te" />
        <div className="sd-config-grid2" style={{ marginBottom: 16 }}>
          <Input label="Nome e cognome" value={form.nome} onChange={(v) => update('nome', v)} />
          <Input label={form.tipologia === 'creator' ? 'Nome del profilo / brand' : 'Nome attività'} value={form.attivita} onChange={(v) => update('attivita', v)} />
          <Input label="Città" value={form.citta} onChange={(v) => update('citta', v)} />
          <Input label="Email" type="email" value={form.email} onChange={(v) => update('email', v)} />
          <Input label="Telefono / WhatsApp" value={form.telefono} onChange={(v) => update('telefono', v)} />
          <Input label="Instagram" placeholder="@profilo" value={form.instagram} onChange={(v) => update('instagram', v)} />
        </div>
        <div style={{ marginBottom: 16 }}>
          <Input label="Sito web" placeholder="https://…" value={form.sito} onChange={(v) => update('sito', v)} optional full />
        </div>
        <Textarea label="Perché vuoi collaborare con noi?"
        placeholder="Raccontaci cosa ti ha convinto di Sculty Dog, perché pensi che la tua attività e la nostra possano funzionare insieme, e cosa speri di ottenere dalla collaborazione."
        value={form.messaggio} onChange={(v) => update('messaggio', v)} />

        <div style={{ marginTop: 32, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
          <div style={{ fontSize: 12, color: 'var(--sd-ink-3)', maxWidth: 420, lineHeight: 1.5 }}>
            Inviando il modulo accetti che usiamo le informazioni solo per
            valutare la candidatura. Nessuna newsletter, nessuno spam.
          </div>
          <button disabled={!valid} onClick={handleSubmit}
          style={{ ...sdPrimaryBtn, opacity: valid ? 1 : 0.4, cursor: valid ? 'pointer' : 'not-allowed' }}>
            Invia candidatura →
          </button>
        </div>
      </div>
    </div>);

}

// ───────── helpers ─────────

function SezioneTitolo({ num, titolo }) {
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 18 }}>
      <span style={{ fontFamily: 'var(--sd-font-display)', fontSize: 14, color: 'var(--sd-ink-3)', letterSpacing: '0.05em' }}>{num}</span>
      <h2 style={{ margin: 0, fontFamily: 'var(--sd-font-serif)', fontSize: 28, fontWeight: 400, letterSpacing: '-0.01em' }}>{titolo}</h2>
    </div>);

}

function CardScelta({ checked, onClick, title, desc, full }) {
  return (
    <button onClick={onClick} style={{
      textAlign: 'left', padding: '16px 18px', borderRadius: 'var(--sd-r-md)',
      background: checked ? 'var(--sd-ink)' : 'var(--sd-bg)',
      color: checked ? 'var(--sd-paper)' : 'var(--sd-ink)',
      border: '1px solid ' + (checked ? 'var(--sd-ink)' : 'rgba(26,23,21,0.10)'),
      cursor: 'pointer', display: 'flex', flexDirection: 'column', gap: 4,
      gridColumn: full ? '1 / -1' : 'auto',
      transition: 'all 0.18s'
    }}>
      <span style={{ fontWeight: 600, fontSize: 15 }}>{title}</span>
      <span style={{ fontSize: 13, opacity: 0.78, lineHeight: 1.4 }}>{desc}</span>
    </button>);

}

function Input({ label, value, onChange, type = 'text', placeholder, optional, full }) {
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 6, gridColumn: full ? '1 / -1' : 'auto' }}>
      <span style={{ fontSize: 12, color: 'var(--sd-ink-3)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
        {label} {optional && <span style={{ textTransform: 'none', opacity: 0.6 }}>(opzionale)</span>}
      </span>
      <input type={type} value={value} placeholder={placeholder} onChange={(e) => onChange(e.target.value)}
      style={{
        padding: '12px 14px', borderRadius: 10,
        border: '1px solid rgba(26,23,21,0.12)',
        background: 'var(--sd-bg)', fontFamily: 'inherit', fontSize: 14,
        outline: 'none'
      }} />
    </label>);

}

function Textarea({ label, value, onChange, placeholder }) {
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      <span style={{ fontSize: 12, color: 'var(--sd-ink-3)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>{label}</span>
      <textarea value={value} placeholder={placeholder} onChange={(e) => onChange(e.target.value)}
      rows={5}
      style={{
        padding: '12px 14px', borderRadius: 10,
        border: '1px solid rgba(26,23,21,0.12)',
        background: 'var(--sd-bg)', fontFamily: 'inherit', fontSize: 14,
        resize: 'vertical', outline: 'none', lineHeight: 1.5
      }} />
    </label>);

}

Object.assign(window, { LavoraConNoi });