// page-partner.jsx — Diventa partner (dual mode: 'partner' acquisition / 'public' showcase)

const TIERS = [
  { key: 'mecenate', name: 'Mecenate', price: '€ 8.000', tagline: 'Main partner dell\'edizione',
    perks: ['Il ruolo più visibile dell\'edizione zero', '4 pass VIP + cena con gli speaker', 'Logo dominante: sito, foyer e materiali', 'Ringraziamento dedicato dal palco', 'Report con i numeri dell\'evento'], featured: true },
  { key: 'visionari', name: 'Visionari', price: '€ 4.000', tagline: 'Partner principale',
    perks: ['2 pass VIP + green room', 'Logo grande: sito e materiali', 'Ringraziamento dal palco', 'Spazio nel foyer', '3 menzioni social dedicate'] },
  { key: 'innovatori', name: 'Innovatori', price: '€ 1.500', tagline: 'Partner di edizione',
    perks: ['1 pass evento', 'Logo medio: sito + stampa', 'Ringraziamento collettivo dal palco', 'Menzione social di gruppo'] },
  { key: 'amici', name: 'Amici', price: '€ 500', tagline: 'Per le realtà locali',
    perks: ['Logo nella pagina partner', 'Ringraziamento nei credit', 'Visibilità social di chiusura'] },
];

function PartnerHero({ phase }) {
  const { isMobile } = useViewport();
  return (
    <div style={{ maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 28 : 64, alignItems: 'end', marginBottom: isMobile ? 48 : 80 }}>
      <div>
        <Eyebrow color={C.red} style={{ color: C.red }}>{phase === 'public' ? 'Le imprese che credono in noi' : 'Diventa partner'}</Eyebrow>
        <h2 style={{ margin: '22px 0 0', fontFamily: FONT.serif, fontSize: 'clamp(42px,9vw,104px)', lineHeight: 0.9, fontWeight: 400, letterSpacing: '-0.025em' }}>
          {phase === 'public' ? <><em>Faenza</em><br/>crede in Faenza.</> : <><em>Faenza investe</em><br/>su Faenza.</>}
        </h2>
      </div>
      <p style={{ fontFamily: FONT.serif, fontSize: 'clamp(18px,2.2vw,24px)', lineHeight: 1.5, fontStyle: 'italic', maxWidth: 520, color: C.ink70 }}>
        {phase === 'public'
          ? <>Queste imprese hanno scelto di costruire con noi l'edizione zero. <strong style={{ fontStyle: 'normal', color: C.red }}>Senza di loro, niente palco.</strong></>
          : <>TEDxFaenza è no-profit. Esiste solo se le imprese del territorio scelgono di costruirla. <strong style={{ fontStyle: 'normal', color: C.red }}>In cambio: visibilità vera, una storia che vale la pena raccontare, e il posto di chi c'era dal primo giorno.</strong></>}
      </p>
    </div>
  );
}

// a) Ringraziamento band
function Ringraziamento() {
  const { isMobile } = useViewport();
  return (
    <div style={{ background: C.ink, color: C.white, padding: isMobile ? '40px 24px' : '64px 48px', marginBottom: isMobile ? 56 : 80, borderRadius: 6 }}>
      <div style={{ maxWidth: 900, margin: '0 auto', textAlign: 'center' }}>
        <div style={{ fontFamily: FONT.serif, fontSize: 'clamp(28px,3.4vw,44px)', lineHeight: 1.35, fontWeight: 400 }}>
          “A chi sceglierà di esserci per primo: <em style={{ color: C.red }}>grazie</em>. I primi partner non sono semplici sponsor: sono i co-fondatori di una storia che Faenza si ricorderà.”
        </div>
        <div style={{ fontFamily: FONT.mono, fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', marginTop: 28, opacity: 0.6 }}>
          Il team di FaventiaX APS
        </div>
      </div>
    </div>
  );
}

// b) Partner honor roll with logo slots + links
function PartnerShowcase({ incMetric }) {
  const { isMobile } = useViewport();
  return (
    <div style={{ marginBottom: isMobile ? 56 : 88 }}>
      {/* TED rule: the TEDxFaenza logo is shown prominently and is larger than
          every sponsor logo on the page. The event lockup here (52–80px tall)
          dominates the sponsor tiles below (40–64px tall). */}
      <div style={{ marginBottom: isMobile ? 36 : 56 }}>
        <div style={{ fontFamily: FONT.mono, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: C.red, marginBottom: 18 }}>↘ I partner di</div>
        <Logo height={isMobile ? 52 : 80}/>
        <p style={{ fontFamily: FONT.sans, fontSize: 13, lineHeight: 1.5, opacity: 0.6, marginTop: 16, maxWidth: 520 }}>
          Le imprese che costruiscono con noi l'edizione zero. Come da linee guida TEDx, ogni logo partner è mostrato più piccolo del logo TEDxFaenza.
        </p>
      </div>
      {TIERS.map((tier, ti) => (
        <div key={tier.key} style={{ borderTop: `1px solid ${C.rule}`, padding: isMobile ? '28px 0' : '36px 0', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '220px 1fr', gap: isMobile ? 18 : 40, alignItems: 'center' }}>
          <div>
            <div style={{ fontFamily: FONT.serif, fontSize: 34, fontStyle: 'italic', color: ti === 0 ? C.red : C.ink }}>{tier.name}</div>
            <div style={{ fontFamily: FONT.mono, fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', opacity: 0.5, marginTop: 4 }}>{tier.tagline}</div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: `repeat(${isMobile ? 2 : (ti === 0 ? 3 : 4)}, 1fr)`, gap: isMobile ? 10 : 16 }}>
            {Array(ti === 0 ? 3 : 4).fill(0).map((_, i) => (
              <a key={i} href="#" data-cursor data-cursor-label="SITO ↗"
                onClick={() => incMetric && incMetric('clicks')}
                style={{ textDecoration: 'none', display: 'block' }}>
                <image-slot id={`partner-${tier.key}-${i}`} shape="rounded" radius="6" fit="contain" placeholder="Logo partner"
                  style={{ width: '100%', height: isMobile ? (ti === 0 ? 44 : 40) : (ti === 0 ? 64 : 52), display: 'block', background: C.paper, border: `1px solid ${C.rule}` }}></image-slot>
              </a>
            ))}
          </div>
        </div>
      ))}
      <div style={{ borderTop: `1px solid ${C.rule}`, paddingTop: 18, fontFamily: FONT.mono, fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', opacity: 0.45 }}>
        I loghi dei partner sono più piccoli del logo TEDxFaenza, come da linee guida · trascina i loghi negli spazi · ogni logo linka al sito del partner
      </div>
    </div>
  );
}

// a) Tiers as packages to join
function PartnerPackages({ incMetric }) {
  const { isMobile, isTablet } = useViewport();
  const [hovered, setHovered] = React.useState(null);
  const cols = isMobile ? 1 : isTablet ? 2 : 4;
  return (
    <div style={{ marginBottom: isMobile ? 64 : 96 }}>
      <div style={{ fontFamily: FONT.mono, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: C.red, marginBottom: 28 }}>↘ Pacchetti partnership</div>
      <div style={{ display: 'grid', gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: 16 }}>
        {TIERS.map((tier) => (
          <div key={tier.key} data-cursor data-cursor-label="DETTAGLI"
            onMouseEnter={() => { setHovered(tier.key); incMetric && incMetric('hovers'); }}
            onMouseLeave={() => setHovered(null)}
            style={{
              background: tier.featured ? C.red : C.white, color: tier.featured ? C.white : C.ink,
              border: `1px solid ${tier.featured ? C.red : C.rule}`, borderRadius: 6, padding: '32px 28px 28px',
              display: 'flex', flexDirection: 'column', gap: 18,
              transition: 'transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s',
              transform: hovered === tier.key ? 'translateY(-6px)' : 'translateY(0)',
              boxShadow: hovered === tier.key ? '0 24px 48px rgba(10,10,10,0.18)' : 'none',
            }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <div style={{ fontFamily: FONT.mono, fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', opacity: 0.7 }}>{tier.name}</div>
              {tier.featured ? <div style={{ fontFamily: FONT.mono, fontSize: 9, letterSpacing: '0.16em', textTransform: 'uppercase', background: C.white, color: C.red, padding: '4px 8px', borderRadius: 999 }}>★ Main</div> : null}
            </div>
            <div>
              <div style={{ fontFamily: FONT.serif, fontSize: 38, fontStyle: 'italic', lineHeight: 1, fontWeight: 500 }}>{tier.price}</div>
              <div style={{ fontFamily: FONT.sans, fontSize: 12, opacity: 0.7, marginTop: 6 }}>{tier.tagline}</div>
            </div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8, fontFamily: FONT.sans, fontSize: 13, lineHeight: 1.45, flex: 1 }}>
              {tier.perks.map((p, i) => (
                <li key={i} style={{ display: 'flex', gap: 10 }}>
                  <span style={{ color: tier.featured ? C.white : C.red, fontFamily: FONT.mono, fontSize: 11, paddingTop: 2 }}>+</span><span>{p}</span>
                </li>
              ))}
            </ul>
            <a href="#partner-form" data-cursor data-cursor-label="GO" onClick={(e) => { scrollToId('partner-form', e); incMetric && incMetric('clicks'); }}
              style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 8, padding: '14px 16px', borderRadius: 4,
                background: tier.featured ? C.white : C.ink, color: tier.featured ? C.red : C.white, textDecoration: 'none', fontFamily: FONT.sans, fontSize: 13, fontWeight: 600 }}>
              <span>Scelgo {tier.name}</span><span>→</span>
            </a>
          </div>
        ))}
      </div>
    </div>
  );
}

// a) Motivi per diventare partner
function PartnerReasons() {
  const reasons = [
    { tag: 'Restituire', t: 'Resta tutto qui', s: 'Siamo no-profit, qui non ci guadagna nessuno. Quello che mettono i partner resta a Faenza e torna alla città: cultura, idee, e ragazzi che hanno un motivo in più per restare.' },
    { tag: 'Una volta sola', t: 'I primi restano i primi', s: 'L\'edizione zero capita una volta sola. Tra qualche anno chi c\'è adesso non verrà ricordato come "uno sponsor", ma come quelli che c\'erano quando era ancora solo un\'idea.' },
    { tag: 'La sala', t: 'Le persone giuste', s: 'Cento posti, Sala Comunale piena: imprenditori, professionisti, giovani, istituzioni. La Faenza che muove le cose, tutta nella stessa sala per una sera.' },
    { tag: 'La rete', t: 'Allo stesso tavolo', s: 'Incontri riservati con gli altri partner e gli speaker.' },
  ];
  const { isMobile } = useViewport();
  return (
    <div style={{ marginBottom: isMobile ? 64 : 96 }}>
      <div style={{ fontFamily: FONT.mono, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: C.red, marginBottom: 28 }}>↘ Perché diventare partner</div>
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(4, 1fr)', gap: 1, background: C.rule, border: `1px solid ${C.rule}` }}>
        {reasons.map((r, i) => (
          <div key={i} style={{ background: C.white, padding: isMobile ? '32px 24px' : '40px 28px', display: 'flex', flexDirection: 'column' }}>
            <div style={{ fontFamily: FONT.mono, fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: C.red, marginBottom: 18 }}>{r.tag}</div>
            <h4 style={{ margin: 0, fontFamily: FONT.serif, fontSize: 'clamp(25px,2.1vw,30px)', fontStyle: 'italic', fontWeight: 500, lineHeight: 1.08, letterSpacing: '-0.01em', color: C.ink }}>{r.t}</h4>
            <p style={{ fontFamily: FONT.sans, fontSize: 13.5, lineHeight: 1.55, opacity: 0.7, marginTop: 14 }}>{r.s}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

// b) Intervista ai partner
function PartnerInterview() {
  const { isMobile } = useViewport();
  return (
    <div style={{ marginBottom: isMobile ? 64 : 96 }}>
      <div style={{ fontFamily: FONT.mono, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: C.red, marginBottom: 28 }}>↘ Cosa significa essere partner</div>
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)', gap: 24 }}>
        {[
          { q: 'Perché avete scelto di sostenere TEDxFaenza?', a: '“Qui, dopo l’evento, le parole di chi ha scelto di esserci dal primo giorno.”', who: 'Azienda partner' },
          { q: 'Cosa avete ottenuto dalla partnership?', a: '“Il racconto del partner: visibilità, contatti, posizionamento sul territorio.”', who: 'Azienda partner' },
        ].map((it, i) => (
          <div key={i} style={{ border: `1px solid ${C.rule}`, borderRadius: 6, padding: '36px 32px', background: C.white }}>
            <div style={{ fontFamily: FONT.sans, fontSize: 13, fontWeight: 600, color: C.red }}>{it.q}</div>
            <p style={{ fontFamily: FONT.serif, fontSize: 24, fontStyle: 'italic', lineHeight: 1.4, margin: '16px 0 0', color: C.ink }}>{it.a}</p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginTop: 22 }}>
              <image-slot id={`interview-${i}`} shape="circle" placeholder="" style={{ width: 48, height: 48, display: 'block', background: C.paperDeep }}></image-slot>
              <div style={{ fontFamily: FONT.mono, fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', opacity: 0.55 }}>{it.who}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

// b) Eventi sponsor e media
function PartnerEvents({ incMetric }) {
  const events = [
    { date: 'Presto', t: 'Aperitivo partner', s: 'Serata riservata: conosci il team e gli altri partner.' },
    { date: 'Presto', t: 'Anteprima speaker', s: 'I partner incontrano gli speaker prima dell\'annuncio pubblico.' },
    { date: 'Fine 2026', t: 'Main event', s: 'L\'edizione zero. I partner sul palco e nei materiali.' },
  ];
  const { isMobile } = useViewport();
  return (
    <div style={{ marginBottom: 40 }}>
      <div style={{ fontFamily: FONT.mono, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: C.red, marginBottom: 28 }}>↘ Eventi & media</div>
      <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 1, background: C.rule, border: `1px solid ${C.rule}` }}>
        {events.map((e, i) => (
          <div key={i} data-cursor data-cursor-label="EVENTO"
            onMouseEnter={() => incMetric && incMetric('hovers')}
            style={{ background: C.white, padding: '36px 32px', transition: 'background .25s' }}
            onMouseOver={(ev) => ev.currentTarget.style.background = C.paper}
            onMouseOut={(ev) => ev.currentTarget.style.background = C.white}>
            <div style={{ fontFamily: FONT.mono, fontSize: 11, letterSpacing: '0.14em', color: C.red }}>{e.date}</div>
            <h4 style={{ margin: '14px 0 0', fontFamily: FONT.serif, fontSize: 28, fontStyle: 'italic', fontWeight: 500 }}>{e.t}</h4>
            <p style={{ fontFamily: FONT.sans, fontSize: 14, lineHeight: 1.55, marginTop: 10, opacity: 0.7 }}>{e.s}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

// a) Contatti / form to become partner
function PartnerForm({ magneticStrength, incMetric }) {
  const submit = (e) => {
    e.preventDefault();
    incMetric && incMetric('clicks');
    const f = e.target;
    const subject = `Interesse partner · TEDxFaenza 2026 (${f.tier.value})`;
    const body =
      `Azienda: ${f.company.value}\r\nReferente: ${f.name.value}\r\nEmail: ${f.email.value}\r\n` +
      `Telefono: ${f.phone.value || '-'}\r\nSettore: ${f.sector.value || '-'}\r\n` +
      `Pacchetto: ${f.tier.value}\r\nBudget indicativo: ${f.budget.value || '-'}\r\n\r\nNote:\r\n${f.notes.value || ''}`;
    window.location.href = `mailto:${MAIL.partner}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
  };
  const { isMobile } = useViewport();
  const tid = tallyId('partner');
  return (
    <div id="partner-form" style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1.4fr', gap: isMobile ? 36 : 64, padding: isMobile ? '40px 22px' : '72px 56px', background: C.ink, color: C.white, borderRadius: 6 }}>
      <style>{`
        #partner-form input, #partner-form select, #partner-form textarea { color: ${C.white}; border-bottom-color: rgba(255,255,255,0.25); }
        #partner-form input:focus, #partner-form select:focus, #partner-form textarea:focus { border-bottom-color: ${C.red}; }
        #partner-form select option { color: ${C.ink}; background: ${C.white}; }
        #partner-form .field label { opacity: 0.6; }
      `}</style>
      <div>
        <Eyebrow color={C.red} style={{ color: C.red }}>↘ Parliamone</Eyebrow>
        <h3 style={{ margin: '18px 0 0', fontFamily: FONT.serif, fontSize: 'clamp(34px,4vw,52px)', lineHeight: 1, fontWeight: 400, letterSpacing: '-0.02em' }}>
          <em>Una mail.</em><br/>Risponde Sara, in 48h.
        </h3>
        <p style={{ fontFamily: FONT.sans, fontSize: 14, lineHeight: 1.6, marginTop: 20, opacity: 0.7, maxWidth: 360 }}>
          {tid
            ? <>Compila il modulo qui sotto. Ti rispondiamo da <strong style={{ color: C.white }}>{MAIL.partner}</strong>, di solito entro 48h.</>
            : <>Compila e invia: il tuo client mail si apre con tutto già scritto verso <strong style={{ color: C.white }}>{MAIL.partner}</strong>. Nessun form, nessun database.</>}
        </p>
      </div>
      {tid ? <TallyEmbed formId={tid} title="Diventa partner · TEDxFaenza" minHeight={640}/> : <form onSubmit={submit}>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 22 : 28 }}>
          <div className="field"><label>Azienda *</label><input name="company" required/></div>
          <div className="field"><label>Settore</label><input name="sector" placeholder="Ceramica, food, manifattura…"/></div>
          <div className="field"><label>Referente *</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>Pacchetto *</label>
            <select name="tier" required defaultValue="Visionari">
              <option>Mecenate</option><option>Visionari</option><option>Innovatori</option><option>Amici</option><option>Da definire</option>
            </select>
          </div>
          <div className="field" style={{ gridColumn: '1 / -1' }}><label>Budget indicativo</label><input name="budget" placeholder="Opzionale"/></div>
          <div className="field" style={{ gridColumn: '1 / -1' }}><label>Note</label><textarea name="notes" placeholder="Cosa vi piacerebbe ottenere dalla partnership?"/></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 }}>
            Invia richiesta partner <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 PartnerPage({ phase, magneticStrength, onSeen, incMetric }) {
  const { isMobile } = useViewport();
  return (
    <Reveal as="section" sectionId="partner" onSeen={onSeen} style={{ padding: isMobile ? '72px 20px' : '120px 48px', borderTop: `1px solid ${C.rule}`, background: C.paper }}>
      <div id="partner"/>
      <PartnerHero phase={phase}/>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        {phase === 'public' ? (
          <>
            <PartnerShowcase incMetric={incMetric}/>
            <PartnerInterview/>
            <PartnerEvents incMetric={incMetric}/>
          </>
        ) : (
          <>
            <Ringraziamento/>
            <PartnerReasons/>
            <PartnerPackages incMetric={incMetric}/>
            <PartnerForm magneticStrength={magneticStrength} incMetric={incMetric}/>
          </>
        )}
      </div>
    </Reveal>
  );
}
window.PartnerPage = PartnerPage;