// page-speaker.jsx — I nostri speaker (tedxbologna-style grid) + candidatura form

const SPEAKER_EMAIL = 'sara.briccoli@tedxfaenza.it';

function SpeakerGrid({ phase, incMetric }) {
  const { isMobile, isTablet } = useViewport();
  // tedxbologna-inspired: big portrait cards, name + talk title on hover
  const slots = phase === 'public'
    ? Array(8).fill(0).map((_, i) => ({ n: i }))
    : Array(4).fill(0).map((_, i) => ({ n: i }));
  const cols = isMobile ? 2 : isTablet ? 3 : 4;
  return (
    <div style={{ display: 'grid', gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: isMobile ? 10 : 16, marginBottom: isMobile ? 56 : 88 }}>
      {slots.map((s, i) => (
        <div key={i} data-cursor data-cursor-label={phase === 'public' ? 'TALK' : 'PRESTO'}
          onMouseEnter={() => incMetric && incMetric('hovers')}
          style={{ position: 'relative', overflow: 'hidden', border: `1px solid ${C.rule}`, background: C.ink, aspectRatio: '3/4', cursor: 'pointer' }}>
          <image-slot id={`speaker-${i}`} shape="rect" fit="cover" placeholder={phase === 'public' ? 'Foto speaker' : ''}
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', display: 'block', opacity: phase === 'public' ? 1 : 0.25 }}></image-slot>
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(10,10,10,0) 45%, rgba(10,10,10,0.85) 100%)', pointerEvents: 'none' }}/>
          <div style={{ position: 'absolute', left: 18, right: 18, bottom: 18, color: C.white }}>
            <div style={{ fontFamily: FONT.mono, fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: C.red }}>Speaker {String(i+1).padStart(2,'0')}</div>
            <div style={{ fontFamily: FONT.serif, fontSize: 22, fontStyle: 'italic', marginTop: 6, lineHeight: 1.1 }}>
              {phase === 'public' ? 'Nome Cognome' : 'In arrivo'}
            </div>
            {phase === 'public' ? <div style={{ fontFamily: FONT.sans, fontSize: 12, opacity: 0.8, marginTop: 4 }}>Titolo del talk in arrivo</div> : null}
          </div>
        </div>
      ))}
    </div>
  );
}

function SpeakerForm({ magneticStrength, incMetric }) {
  const submit = (e) => {
    e.preventDefault();
    incMetric && incMetric('clicks');
    const f = e.target;
    const subject = 'Candidatura speaker · TEDxFaenza 2026';
    const body =
      `Nome e cognome: ${f.name.value}\r\nEmail: ${f.email.value}\r\nLink: ${f.link.value || '-'}\r\n\r\n` +
      `Titolo proposto del talk:\r\n${f.title.value}\r\n\r\n` +
      `Idea worth spreading (max 200 parole):\r\n${f.idea.value}\r\n\r\n` +
      `Perché ora, perché Faenza:\r\n${f.why.value || ''}\r\n\r\nBreve bio:\r\n${f.bio.value || ''}`;
    window.location.href = `mailto:${SPEAKER_EMAIL}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
  };
  const { isMobile } = useViewport();
  const tid = tallyId('speaker');
  return (
    <div id="speaker-form" style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.4fr', gap: isMobile ? 36 : 64, padding: isMobile ? '40px 22px' : '72px 56px', background: C.white, border: `1px solid ${C.rule}`, borderRadius: 6 }}>
      <div>
        <Eyebrow>↘ Candidati</Eyebrow>
        <h3 style={{ margin: '18px 0 0', fontFamily: FONT.serif, fontSize: 'clamp(34px,4vw,52px)', lineHeight: 1, fontWeight: 400, letterSpacing: '-0.02em' }}>
          <em>Mandaci</em> la tua idea.
        </h3>
        <p style={{ fontFamily: FONT.sans, fontSize: 14, lineHeight: 1.6, marginTop: 20, opacity: 0.7, maxWidth: 360 }}>
          La leggiamo davvero, una per una. Rispondiamo entro 14 giorni, anche quando è un no.
        </p>
        <ul style={{ listStyle: 'none', padding: 0, margin: '24px 0 0', display: 'flex', flexDirection: 'column', gap: 10, fontFamily: FONT.sans, fontSize: 13 }}>
          {['Talk di max 18 minuti', 'No pitch commerciali, no curriculum', 'Idee originali e non promozionali', 'I migliori talk pubblicati sul canale TEDx Talks'].map((x, i) => (
            <li key={i} style={{ display: 'flex', gap: 10, opacity: 0.85 }}><span style={{ color: C.red, fontFamily: FONT.mono }}>+</span>{x}</li>
          ))}
        </ul>
      </div>
      {tid ? <TallyEmbed formId={tid} title="Candidati come speaker · TEDxFaenza" minHeight={680}/> : <form onSubmit={submit}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 22 : 28 }}>
          <div className="field"><label>Nome e cognome *</label><input name="name" required/></div>
          <div className="field"><label>Email *</label><input name="email" type="email" required/></div>
          <div className="field" style={{ gridColumn: '1 / -1' }}><label>Sito / LinkedIn / video</label><input name="link" placeholder="Un link che ti rappresenta"/></div>
          <div className="field" style={{ gridColumn: '1 / -1' }}><label>Titolo proposto del talk *</label><input name="title" required/></div>
          <div className="field" style={{ gridColumn: '1 / -1' }}><label>Idea worth spreading * (max 200 parole)</label><textarea name="idea" required style={{ minHeight: 120 }}/></div>
          <div className="field" style={{ gridColumn: '1 / -1' }}><label>Perché ora, perché Faenza</label><textarea name="why" style={{ minHeight: 80 }}/></div>
          <div className="field" style={{ gridColumn: '1 / -1' }}><label>Breve bio</label><textarea name="bio" style={{ minHeight: 80 }}/></div>
        </div>
        <Magnetic strength={magneticStrength} onMagnet={() => incMetric && incMetric('magnets')}>
          <button type="submit" data-cursor data-cursor-label="SEND"
            style={{ marginTop: 28, padding: '18px 28px', background: C.ink, color: C.white, border: 'none', borderRadius: 4, fontFamily: FONT.sans, fontSize: 14, fontWeight: 700, letterSpacing: '0.04em', textTransform: 'uppercase', cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 12 }}>
            Invia candidatura <span style={{ fontFamily: FONT.mono }}>→</span>
          </button>
        </Magnetic>
        <div style={{ fontFamily: FONT.mono, fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', opacity: 0.5, marginTop: 14 }}>
          Premendo "invia" si apre il tuo client mail · nessun dato è salvato
        </div>
      </form>}
    </div>
  );
}

function SpeakerPage({ phase, magneticStrength, onSeen, incMetric }) {
  const { isMobile } = useViewport();
  return (
    <Reveal as="section" sectionId="speaker" onSeen={onSeen} style={{ padding: isMobile ? '72px 20px' : '120px 48px', borderTop: `1px solid ${C.rule}` }}>
      <div id="speaker"/>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 24 : 56, alignItems: 'end', marginBottom: isMobile ? 40 : 56 }}>
          <div>
            <Eyebrow>I nostri speaker</Eyebrow>
            <h2 style={{ margin: '20px 0 0', fontFamily: FONT.serif, fontSize: 'clamp(36px,6vw,84px)', lineHeight: 0.92, fontWeight: 400, letterSpacing: '-0.025em' }}>
              {phase === 'public' ? <><em>Le voci</em><br/>dell'edizione zero.</> : <><em>Cerchiamo</em> chi ha<br/>qualcosa da dire.</>}
            </h2>
          </div>
          <p style={{ fontFamily: FONT.sans, fontSize: 16, lineHeight: 1.6, opacity: 0.75, maxWidth: 460 }}>
            {phase === 'public'
              ? 'Il programma è in costruzione. Presto qui i nomi, le facce e le idee che saliranno sul palco dell\'edizione zero.'
              : 'Stiamo costruendo il programma. Cerchiamo idee che meritano di essere diffuse, non curriculum brillanti. Se hai una storia o una pratica che cambia qualcosa, scrivici.'}
          </p>
        </div>

        <SpeakerGrid phase={phase} incMetric={incMetric}/>

        {/* Pillars */}
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 1, background: C.rule, border: `1px solid ${C.rule}`, marginBottom: isMobile ? 56 : 88 }}>
          {[
            ['Idea', 'Una sola, chiara, originale. Non un curriculum.'],
            ['Evidenza', 'Ricerca, esperienza, dati. Cose che reggono il palco.'],
            ['Conseguenza', 'Cosa succede se ti diamo retta. Concretezza, non slogan.'],
          ].map(([t, s], i) => (
            <div key={i} style={{ background: C.white, padding: '36px 32px' }}>
              <div style={{ fontFamily: FONT.mono, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: C.red, marginBottom: 14 }}>{String(i+1).padStart(2,'0')} · cerchiamo</div>
              <h3 style={{ margin: 0, fontFamily: FONT.serif, fontSize: 36, fontStyle: 'italic', fontWeight: 500 }}>{t}</h3>
              <p style={{ fontFamily: FONT.sans, fontSize: 14, lineHeight: 1.55, marginTop: 14, opacity: 0.75 }}>{s}</p>
            </div>
          ))}
        </div>

        <SpeakerForm magneticStrength={magneticStrength} incMetric={incMetric}/>
      </div>
    </Reveal>
  );
}
window.SpeakerPage = SpeakerPage;