// Section 09 — Cooperation formats for influencers
function SectionPartner() {
  const formats = window.MINDME_PARTNER_FORMATS;

  // Highlight numbers/percentages/currency in perks to make the value visible
  const highlight = (text) => {
    // Match: −15%, +20%, 50%, 5 000 грн, 5000 грн, 3 місяці etc.
    const regex = /(−|-|\+)?\d+(?:[\s\u00A0]?\d{3})*[%]?(?:\s*грн)?(?:\s*місяц(?:ів|я|і))?/g;
    const parts = [];
    let lastIdx = 0;
    let match;
    while ((match = regex.exec(text)) !== null) {
      // Skip lone tiny digits without context
      if (!/[%грнмісяц]/.test(match[0]) && !/[+\-−]/.test(match[0])) continue;
      if (match.index > lastIdx) parts.push(text.slice(lastIdx, match.index));
      parts.push(<mark key={match.index} style={{
        background: 'transparent',
        color: 'var(--accent)',
        fontWeight: 700,
        fontFamily: 'var(--font-display)',
        letterSpacing: '-0.01em',
        padding: 0,
      }}>{match[0]}</mark>);
      lastIdx = match.index + match[0].length;
    }
    if (lastIdx < text.length) parts.push(text.slice(lastIdx));
    return parts.length ? parts : text;
  };

  return (
    <section className="section section--alt" data-screen-label="07 Partner">
      <SectionMeta num="07" label="Формати співпраці з інфлюєнсерами" />
      <div className="shell">

        {/* Headline */}
        <Reveal>
          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.2fr)', gap: 'var(--gap-wide)', alignItems: 'end', marginBottom: 'clamp(16px, 2vw, 24px)' }}>
            <h2 className="display h-3" style={{ maxWidth: '20ch', lineHeight: 1.05, letterSpacing: '-0.02em' }}>
              Дві <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400 }}>програми</span> партнерства з інфлюєнсерами.
            </h2>
            <p style={{ maxWidth: '54ch', fontSize: 14, lineHeight: 1.5, color: 'var(--ink-soft)' }}>
              Обери формат, ближчий тобі за залученням: легка співпраця без контракту або довгострокове партнерство бренд-амбасадора.
            </p>
          </div>
        </Reveal>

        {/* Two format columns */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 'var(--gap-wide)', alignItems: 'stretch' }}>
          {formats.map((f, i) => {
            const featured = f.id === 'ambassador';
            return (
              <Reveal key={f.id} delay={0} style={{ height: '100%' }}>
                <div style={{
                  background: featured ? 'var(--ink)' : 'var(--bg)',
                  color: featured ? 'var(--bg)' : 'var(--ink)',
                  border: '1px solid ' + (featured ? 'var(--ink)' : 'var(--line)'),
                  padding: 'clamp(20px, 2.5vw, 32px)',
                  display: 'flex',
                  flexDirection: 'column',
                  gap: 'clamp(14px, 1.8vw, 22px)',
                  height: '100%',
                  position: 'relative',
                }}>
                  {/* Header */}
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', borderBottom: '1px solid ' + (featured ? 'rgba(245,241,234,0.18)' : 'var(--line)'), paddingBottom: 12 }}>
                    <span style={{ fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', opacity: featured ? 0.75 : 0.6, fontWeight: 600 }}>{f.eyebrow}</span>
                    <span style={{ fontFamily: 'var(--font-display)', fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: featured ? 'var(--accent)' : 'var(--ink-mute)' }}>
                      {featured ? '★ Featured' : 'Open'}
                    </span>
                  </div>

                  {/* Title */}
                  <div>
                    <h3 className="display" style={{ fontSize: 'clamp(24px, 2.4vw, 36px)', fontWeight: 700, lineHeight: 1.0, letterSpacing: '-0.025em', marginBottom: 8 }}>
                      {f.label}
                    </h3>
                    <p style={{ fontSize: 14, lineHeight: 1.45, opacity: featured ? 0.8 : 0.7, maxWidth: '40ch' }}>{f.sub}</p>
                  </div>

                  {/* Perks + Duties grid */}
                  <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1.4fr) minmax(0, 1fr)', gap: 'clamp(16px, 2vw, 28px)', flex: 1 }}>
                    {/* Perks */}
                    <div>
                      <div style={{ fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 700, color: featured ? 'var(--accent)' : 'var(--accent)', marginBottom: 10 }}>
                        Ти отримуєш
                      </div>
                      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 7 }}>
                        {f.perks.map((perk, idx) => {
                          const t = typeof perk === 'string' ? perk : perk.t;
                          const d = typeof perk === 'string' ? null : perk.d;
                          const sub = typeof perk === 'string' ? null : perk.sub;
                          return (
                            <li key={idx} style={{ display: 'grid', gridTemplateColumns: '14px 1fr', gap: 8, fontSize: 12.5, lineHeight: 1.4, alignItems: 'baseline' }}>
                              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 10, opacity: 0.55 }}>{String(idx + 1).padStart(2, '0')}</span>
                              <span>
                                {highlight(t)}{d && <span style={{ opacity: 0.6 }}> — {d}</span>}
                                {sub && (
                                  <span style={{ display: 'flex', flexDirection: 'column', gap: 4, marginTop: 6 }}>
                                    {sub.map((s, k) => (
                                      <span key={k} style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 8, alignItems: 'baseline' }}>
                                        <span style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 13, letterSpacing: '-0.01em', color: 'var(--accent)' }}>{s.big}</span>
                                        <span style={{ fontSize: 11.5, lineHeight: 1.35, opacity: featured ? 0.85 : 0.7 }}>{s.d}</span>
                                      </span>
                                    ))}
                                  </span>
                                )}
                              </span>
                            </li>
                          );
                        })}
                      </ul>
                    </div>

                    {/* Duties */}
                    <div>
                      <div style={{ fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 700, opacity: featured ? 0.8 : 0.6, marginBottom: 10 }}>
                        Від тебе очікуємо
                      </div>
                      <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 7 }}>
                        {f.duties.map((duty, idx) => {
                          const t = typeof duty === 'string' ? duty : duty.t;
                          const d = typeof duty === 'string' ? null : duty.d;
                          return (
                            <li key={idx} style={{ display: 'grid', gridTemplateColumns: '14px 1fr', gap: 8, fontSize: 12.5, lineHeight: 1.4, alignItems: 'baseline' }}>
                              <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 10, opacity: 0.55 }}>{String(idx + 1).padStart(2, '0')}</span>
                              <span>{t}{d && <span style={{ opacity: 0.6 }}> — {d}</span>}</span>
                            </li>
                          );
                        })}
                      </ul>
                    </div>
                  </div>

                  {/* Earnings plaque — highlighted at bottom */}
                  {f.earn && (
                    <div className="earn-plaque" style={{
                      position: 'relative',
                      order: 2,
                      border: '1px solid var(--accent)',
                      background: featured ? 'rgba(201,68,42,0.28)' : 'color-mix(in srgb, var(--accent) 10%, var(--bg))',
                      padding: 'clamp(13px, 1.5vw, 18px)',
                      minHeight: 148,
                      cursor: f.earn.example ? 'help' : 'default',
                    }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 10, marginBottom: 11 }}>
                        <span style={{ fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 700, color: 'var(--accent)' }}>{f.earn.title}</span>
                        {f.earn.example && <span style={{ fontSize: 9.5, letterSpacing: '0.04em', textTransform: 'uppercase', fontWeight: 700, color: 'var(--accent)', display: 'inline-flex', alignItems: 'center', gap: 5, opacity: 0.85 }}>розрахунок <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 14, height: 14, borderRadius: '50%', background: 'var(--accent)', color: '#fff', fontSize: 9, fontFamily: 'var(--font-serif)', fontStyle: 'italic' }}>i</span></span>}
                      </div>
                      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(14px, 2vw, 24px)' }}>
                        {[f.earn.a, f.earn.b].map((row, k) => (
                          <div key={k} style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 10, alignItems: 'start' }}>
                            <span style={{ fontFamily: 'var(--font-display)', fontSize: 'clamp(22px, 2.2vw, 30px)', fontWeight: 800, letterSpacing: '-0.02em', color: 'var(--accent)', lineHeight: 0.9 }}>{row.big}</span>
                            <span>
                              <span style={{ display: 'block', fontFamily: 'var(--font-display)', fontSize: 13, fontWeight: 700, letterSpacing: '-0.01em', lineHeight: 1.1, marginBottom: 3 }}>{row.label}</span>
                              <span style={{ display: 'block', fontSize: 11, lineHeight: 1.35, opacity: featured ? 0.82 : 0.66 }}>{row.d}</span>
                            </span>
                          </div>
                        ))}
                      </div>

                      {/* Hover: full calculation */}
                      {f.earn.example && (
                        <div className="earn-detail" style={{
                          position: 'absolute', left: 0, right: 0, bottom: 'calc(100% + 8px)', zIndex: 30,
                          background: featured ? 'var(--bg)' : 'var(--ink)', color: featured ? 'var(--ink)' : '#F5F1EA', padding: '15px 16px',
                          border: featured ? '1px solid var(--ink)' : 'none',
                          boxShadow: '0 -24px 48px -12px rgba(10,10,10,0.5)',
                          opacity: 0, visibility: 'hidden', transform: 'translateY(6px)',
                          transition: 'opacity var(--t-fast), transform var(--t-fast), visibility var(--t-fast)',
                        }}>
                          <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0, 1fr) minmax(0, 1.05fr)', gap: 'clamp(16px, 2vw, 26px)', alignItems: 'start' }}>
                            <div>
                              <div style={{ fontSize: 9.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--accent)', fontWeight: 700, marginBottom: 7 }}>Приклад одного замовлення</div>
                              <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
                                {f.earn.example.map((row, k) => {
                                  const last = k === f.earn.example.length - 1;
                                  return (
                                    <div key={k} style={{ display: 'flex', justifyContent: 'space-between', gap: 12, fontSize: 11.5, lineHeight: 1.3, borderBottom: last ? 'none' : (featured ? '1px solid var(--line)' : '1px solid rgba(245,241,234,0.14)'), paddingBottom: 3 }}>
                                      <span style={{ opacity: 0.75 }}>{row.k}</span>
                                      <span style={{ fontWeight: 700, fontFamily: 'var(--font-display)', color: last ? 'var(--accent)' : (featured ? 'var(--ink)' : '#F5F1EA') }}>{row.v}</span>
                                    </div>
                                  );
                                })}
                              </div>
                            </div>
                            <div>
                              <div style={{ fontSize: 9.5, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--accent)', fontWeight: 700, marginBottom: 7 }}>Сценарії заробітку</div>
                              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 6 }}>
                                {f.earn.scenarios.map((row, k) => (
                                  <div key={k} style={{ border: featured ? '1px solid var(--line)' : '1px solid rgba(245,241,234,0.16)', padding: '6px 8px' }}>
                                    <div style={{ fontSize: 9, opacity: 0.7, marginBottom: 2 }}>{row.k}</div>
                                    <div style={{ fontFamily: 'var(--font-display)', fontSize: 14, fontWeight: 800, letterSpacing: '-0.01em', color: 'var(--accent)' }}>{row.v}</div>
                                  </div>
                                ))}
                              </div>
                            </div>
                          </div>
                        </div>
                      )}
                    </div>
                  )}

                  {/* Format footer */}
                  <div style={{ order: 1, borderTop: '1px solid ' + (featured ? 'rgba(245,241,234,0.18)' : 'var(--line)'), paddingTop: 12, display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 12, alignItems: 'baseline' }}>
                    <span style={{ fontSize: 10, letterSpacing: '0.1em', textTransform: 'uppercase', fontWeight: 700, opacity: featured ? 0.75 : 0.55 }}>Формат</span>
                    <span style={{ fontFamily: 'var(--font-display)', fontSize: 13, fontWeight: 600, letterSpacing: '-0.01em', lineHeight: 1.3 }}>{f.format}</span>
                  </div>
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>

      <style>{`
        .earn-plaque:hover .earn-detail,
        .earn-plaque:focus-within .earn-detail {
          opacity: 1 !important;
          visibility: visible !important;
          transform: translateY(0) !important;
        }
      `}</style>
    </section>
  );
}

window.SectionPartner = SectionPartner;
