// page-chisiamo.jsx — Chi siamo: manifesto, team, community, volontari form

function Manifesto({ onSeen }) {
  const { isMobile } = useViewport();
  return (
    <Reveal as="section" sectionId="chisiamo" onSeen={onSeen} style={{ padding: isMobile ? '72px 20px' : '120px 48px', background: C.ink, color: C.white }}>
      <div id="chisiamo"/>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <Eyebrow color={C.red} style={{ color: C.red, justifyContent: 'center' }}>Manifesto · FaventiaX APS</Eyebrow>
        <p style={{ fontFamily: FONT.serif, fontSize: 'clamp(28px,3.6vw,48px)', lineHeight: 1.3, fontWeight: 400, textAlign: 'center', marginTop: 32, letterSpacing: '-0.01em' }}>
          Siamo FaventiaX, un'associazione di promozione sociale fatta di <em style={{ color: C.red }}>giovani del territorio</em>. L'idea da cui siamo partiti è semplice: le idee di Faenza meritano un <em style={{ color: C.red }}>palco grande quanto loro</em>.
        </p>
        <p style={{ fontFamily: FONT.sans, fontSize: 17, lineHeight: 1.65, textAlign: 'center', marginTop: 28, opacity: 0.7, maxWidth: 760, marginLeft: 'auto', marginRight: 'auto' }}>
          Per questo abbiamo ottenuto la licenza ufficiale per portare TEDx in città. Crediamo che mettere nella stessa sala imprese, giovani e istituzioni sia il modo più rapido per far nascere qualcosa di nuovo. TEDxFaenza è il nostro primo passo. E vogliamo farlo bene.
        </p>
        <div style={{ marginTop: 48, display: 'grid', gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(4, 1fr)', gap: 1, background: 'rgba(255,255,255,0.14)', border: '1px solid rgba(255,255,255,0.14)' }}>
          {[
            ['Eventi', 'incontri e iniziative dedicate al territorio'],
            ['Confronto', 'diretto tra cittadini, imprese e istituzioni'],
            ['Community', 'partecipativa: i membri scelgono temi e ospiti'],
            ['Licenza', 'ufficiale TEDx · standard internazionali'],
          ].map(([t, s]) => (
            <div key={t} style={{ background: C.ink, padding: '28px 24px' }}>
              <div style={{ fontFamily: FONT.serif, fontStyle: 'italic', fontSize: 24, color: C.red }}>{t}</div>
              <div style={{ fontFamily: FONT.sans, fontSize: 13, lineHeight: 1.5, opacity: 0.7, marginTop: 8 }}>{s}</div>
            </div>
          ))}
        </div>
      </div>
    </Reveal>
  );
}

function Team({ onSeen, incMetric }) {
  // Placeholder team — fill identikit + real LinkedIn/Instagram links
  const team = [
    { name: 'Sara Briccoli', role: 'Licensee · Curatrice', tag: 'Organizer' },
    { name: 'Nome Cognome', role: 'Co-organizer · Produzione', tag: 'Team' },
    { name: 'Nome Cognome', role: 'Partnership & sponsor', tag: 'Team' },
    { name: 'Nome Cognome', role: 'Comunicazione & social', tag: 'Team' },
    { name: 'Nome Cognome', role: 'Speaker coach', tag: 'Team' },
    { name: 'Nome Cognome', role: 'Logistica & venue', tag: 'Team' },
  ];
  const { isMobile } = useViewport();
  return (
    <Reveal as="section" sectionId="team" onSeen={onSeen} style={{ padding: isMobile ? '64px 20px' : '96px 48px', borderBottom: `1px solid ${C.rule}` }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '200px 1fr', gap: isMobile ? 24 : 56, marginBottom: 48 }}>
          <Eyebrow>Il team</Eyebrow>
          <div>
            <h2 style={{ margin: 0, fontFamily: FONT.serif, fontSize: 'clamp(36px,4.5vw,60px)', lineHeight: 1, fontWeight: 400, letterSpacing: '-0.02em' }}>
              <em>Le persone</em> dietro l'idea.
            </h2>
            <p style={{ fontFamily: FONT.sans, fontSize: 15, lineHeight: 1.6, marginTop: 16, opacity: 0.7, maxWidth: 560 }}>
              Volontari e volontarie del territorio, ognuno con un mestiere vero e qualche ora rubata alla settimana per costruire questa cosa.
            </p>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 24 }}>
          {team.map((m, i) => (
            <div key={i} data-cursor data-cursor-label="PROFILO"
              onMouseEnter={() => incMetric && incMetric('hovers')}
              style={{ border: `1px solid ${C.rule}`, background: C.white, overflow: 'hidden', transition: 'transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s' }}
              onMouseOver={(e) => { e.currentTarget.style.transform = 'translateY(-4px)'; e.currentTarget.style.boxShadow = '0 16px 36px rgba(10,10,10,0.10)'; }}
              onMouseOut={(e) => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}>
              <image-slot id={`team-${i}`} shape="rect" fit="cover" placeholder="Foto"
                style={{ width: '100%', height: 280, display: 'block', background: C.paperDeep }}></image-slot>
              <div style={{ padding: '22px 24px' }}>
                <div style={{ fontFamily: FONT.mono, fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: C.red, marginBottom: 10 }}>{m.tag}</div>
                <div style={{ fontFamily: FONT.serif, fontSize: 26, fontStyle: 'italic', color: C.ink }}>{m.name}</div>
                <div style={{ fontFamily: FONT.sans, fontSize: 13, opacity: 0.65, marginTop: 4 }}>{m.role}</div>
                <div style={{ display: 'flex', gap: 16, marginTop: 16 }}>
                  <a href="#" data-cursor className="ulink" style={{ fontFamily: FONT.sans, fontSize: 12, fontWeight: 600, color: C.ink, textDecoration: 'none' }}>LinkedIn ↗</a>
                  <a href="#" data-cursor className="ulink" style={{ fontFamily: FONT.sans, fontSize: 12, fontWeight: 600, color: C.ink, textDecoration: 'none' }}>Instagram ↗</a>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </Reveal>
  );
}

function Community({ onSeen }) {
  const { isMobile } = useViewport();
  const tags = ['Imprenditori', 'Professionisti', 'Sportivi', 'Autori', 'Artisti', 'Innovatori', 'Giovani talenti'];
  return (
    <Reveal as="section" sectionId="community" onSeen={onSeen} style={{ padding: isMobile ? '64px 20px' : '96px 48px', background: C.paper, borderBottom: `1px solid ${C.rule}` }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', textAlign: 'center' }}>
        <Eyebrow style={{ justifyContent: 'center' }}>La nostra community</Eyebrow>
        <h2 style={{ margin: '18px 0 0', fontFamily: FONT.serif, fontSize: 'clamp(34px,4.5vw,60px)', lineHeight: 1.05, fontWeight: 400, letterSpacing: '-0.02em' }}>
          Persone diverse, <em style={{ color: C.red }}>un desiderio comune</em>:<br/>costruire e condividere.
        </h2>
        <p style={{ fontFamily: FONT.sans, fontSize: 16, lineHeight: 1.6, marginTop: 22, opacity: 0.7, maxWidth: 680, margin: '22px auto 0' }}>
          Ci tiene insieme la voglia di fare qualcosa per il territorio. E i prossimi temi, ospiti e iniziative li scegliamo insieme.
        </p>
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, justifyContent: 'center', marginTop: 36 }}>
          {tags.map((t) => (
            <span key={t} data-cursor style={{ fontFamily: FONT.sans, fontSize: 15, fontWeight: 500, padding: '12px 22px', border: `1px solid ${C.rule}`, borderRadius: 999, background: C.white, transition: 'background .2s, color .2s, border-color .2s', cursor: 'pointer' }}
              onMouseOver={(e) => { e.currentTarget.style.background = C.ink; e.currentTarget.style.color = C.white; e.currentTarget.style.borderColor = C.ink; }}
              onMouseOut={(e) => { e.currentTarget.style.background = C.white; e.currentTarget.style.color = C.ink; e.currentTarget.style.borderColor = C.rule; }}>
              {t}
            </span>
          ))}
        </div>
      </div>
    </Reveal>
  );
}

function StandardTEDx({ onSeen }) {
  const { isMobile } = useViewport();
  const principi = [
    ['Contenuti veri', 'Idee originali, mai promozionali. Un talk non è uno spot.'],
    ['Indipendenza', 'Le scelte sul palco sono nostre. Non si comprano.'],
    ['Niente bandiere', 'Né politica né religione. Restano le idee.'],
    ['Impatto positivo', 'Spazio a chi lascia qualcosa di buono al territorio.'],
  ];
  return (
    <Reveal as="section" sectionId="standard" onSeen={onSeen} style={{ padding: isMobile ? '64px 20px' : '96px 48px', borderBottom: `1px solid ${C.rule}` }}>
      <div id="standard"/>
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '200px 1fr', gap: isMobile ? 24 : 56, marginBottom: 48 }}>
          <Eyebrow>Gli standard TEDx</Eyebrow>
          <div>
            <h2 style={{ margin: 0, fontFamily: FONT.serif, fontSize: 'clamp(34px,4.5vw,56px)', lineHeight: 1, fontWeight: 400, letterSpacing: '-0.02em' }}>
              Le stesse regole<br/>di <em style={{ color: C.red }}>ogni TEDx nel mondo</em>.
            </h2>
            <p style={{ fontFamily: FONT.sans, fontSize: 15, lineHeight: 1.6, marginTop: 16, opacity: 0.7, maxWidth: 560 }}>
              Sono linee guida ufficiali di TED, uguali ovunque. A Faenza le seguiamo alla lettera.
            </p>
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(4, 1fr)', gap: 1, background: C.rule, border: `1px solid ${C.rule}` }}>
          {principi.map(([t, s], i) => (
            <div key={t} style={{ background: C.white, padding: isMobile ? '28px 24px' : '32px 26px' }}>
              <div style={{ fontFamily: FONT.mono, fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: C.red, marginBottom: 14 }}>{String(i+1).padStart(2,'0')}</div>
              <div style={{ fontFamily: FONT.serif, fontSize: 24, fontStyle: 'italic', color: C.ink }}>{t}</div>
              <div style={{ fontFamily: FONT.sans, fontSize: 13.5, lineHeight: 1.55, opacity: 0.7, marginTop: 10 }}>{s}</div>
            </div>
          ))}
        </div>
      </div>
    </Reveal>
  );
}
window.StandardTEDx = StandardTEDx;

function VolunteerForm({ onSeen, magneticStrength, incMetric }) {
  const [picks, setPicks] = React.useState([]);
  const options = ['Logistica', 'Accoglienza', 'Servizio catering', 'Sicurezza', 'Mi va bene tutto'];
  const toggle = (o) => {
    incMetric && incMetric('clicks');
    setPicks((p) => p.includes(o) ? p.filter(x => x !== o) : [...p, o]);
  };
  const submit = (e) => {
    e.preventDefault();
    incMetric && incMetric('clicks');
    const f = e.target;
    const subject = 'Candidatura volontari · TEDxFaenza Day Event';
    const body =
      `Nome e cognome: ${f.name.value}\r\n` +
      `Email: ${f.email.value}\r\n` +
      `Telefono: ${f.phone.value || '-'}\r\n` +
      `Disponibilità: ${f.avail.value || '-'}\r\n\r\n` +
      `Aree di interesse: ${picks.length ? picks.join(', ') : '-'}\r\n\r\n` +
      `Note:\r\n${f.notes.value || ''}`;
    window.location.href = `mailto:${MAIL.staff}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
  };
  const { isMobile } = useViewport();
  const tid = tallyId('volunteer');
  return (
    <Reveal as="section" sectionId="volontari" onSeen={onSeen} style={{ padding: isMobile ? '64px 20px' : '96px 48px', borderBottom: `1px solid ${C.rule}` }}>
      <div id="volontari"/>
      <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.4fr', gap: isMobile ? 40 : 64 }}>
        <div>
          <Eyebrow>Volontari · Day event</Eyebrow>
          <h2 style={{ margin: '18px 0 0', fontFamily: FONT.serif, fontSize: 'clamp(34px,4vw,56px)', lineHeight: 1, fontWeight: 400, letterSpacing: '-0.02em' }}>
            <em>Dai una mano</em><br/>il giorno dell'evento.
          </h2>
          <p style={{ fontFamily: FONT.sans, fontSize: 15, lineHeight: 1.6, marginTop: 20, opacity: 0.7, maxWidth: 380 }}>
            L'edizione zero si fa con le mani di chi ci crede. Scegli dove vuoi dare il tuo contributo: ti ricontattiamo da <strong>{MAIL.staff}</strong>.
          </p>
        </div>
        {tid ? <TallyEmbed formId={tid} title="Candidatura volontari · TEDxFaenza" minHeight={620}/> : <form onSubmit={submit}>
          <div style={{ fontFamily: FONT.mono, fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', opacity: 0.55, marginBottom: 14 }}>Cosa ti interessa? (scelta multipla)</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10, marginBottom: 32 }}>
            {options.map((o) => {
              const on = picks.includes(o);
              return (
                <button type="button" key={o} data-cursor onClick={() => toggle(o)}
                  style={{ fontFamily: FONT.sans, fontSize: 14, fontWeight: 500, padding: '12px 20px', borderRadius: 999, cursor: 'pointer',
                    border: `1px solid ${on ? C.ink : C.rule}`, background: on ? C.ink : C.white, color: on ? C.white : C.ink,
                    transition: 'all .2s', display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                  <span style={{ color: on ? C.red : C.ink40 }}>{on ? '✓' : '+'}</span>{o}
                </button>
              );
            })}
          </div>
          <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"><label>Telefono</label><input name="phone"/></div>
            <div className="field"><label>Disponibilità</label><input name="avail" placeholder="Es. tutta la giornata"/></div>
            <div className="field" style={{ gridColumn: '1 / -1' }}><label>Note</label><textarea name="notes" placeholder="Esperienze, vincoli, domande…"/></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.red, 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 }}>
              Candidati come volontario <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 "candidati" si apre il tuo client mail · nessun dato è salvato
          </div>
        </form>}
      </div>
    </Reveal>
  );
}

// Chi siamo page — everything about the association (FaventiaX) lives here.
function ChiSiamoPage({ phase, magneticStrength, onSeen, incMetric }) {
  return (
    <>
      <Manifesto onSeen={onSeen}/>
      <Team onSeen={onSeen} incMetric={incMetric}/>
      <Community onSeen={onSeen}/>
      <StandardTEDx onSeen={onSeen}/>
      <VolunteerForm onSeen={onSeen} magneticStrength={magneticStrength} incMetric={incMetric}/>
    </>
  );
}

window.Manifesto = Manifesto;
window.Team = Team;
window.Community = Community;
window.VolunteerForm = VolunteerForm;
window.ChiSiamoPage = ChiSiamoPage;