banyaro/backend/static/js/pages/partner.js

/* ============================================================
   BAN YARO — Partner-Seite
   Showcase der offiziellen Ban Yaro Partner.
   ============================================================ */

window.Page_partner = (() => {

  let _container = null;

  async function init(container) {
    _container = container;
    _render();
    _load();
  }

  function refresh() { _load(); }
  function onDogChange() {}

  function _render() {
    _container.innerHTML = `
      <div style="max-width:680px;margin:0 auto;padding:var(--space-4)">
        <div style="text-align:center;margin-bottom:var(--space-6)">
          <div style="font-size:48px;margin-bottom:var(--space-2)">🤝</div>
          <h1 style="font-size:var(--text-2xl);font-weight:800;margin:0 0 var(--space-2)">
            Unsere Partner
          </h1>
          <p style="color:var(--c-text-secondary);font-size:var(--text-sm);max-width:480px;margin:0 auto">
            Diese Menschen glauben an Ban Yaro — und helfen uns, die Community zu wachsen.
            Über ihre persönlichen Einladungscodes können sie neue Gründer vermitteln.
          </p>
        </div>
        <div id="partner-content">
          <div style="text-align:center;padding:var(--space-8);color:var(--c-text-muted)">Lade…</div>
        </div>
      </div>
    `;
  }

  async function _load() {
    const el = _container.querySelector('#partner-content');
    try {
      const d = await API.get('/partners/public');
      if (!d?.partners) throw new Error('Keine Daten.');
      el.innerHTML = _renderPartners(d.partners);
    } catch (e) {
      el.innerHTML = `<p style="color:var(--c-text-muted);text-align:center">${e.message || 'Fehler beim Laden.'}</p>`;
    }
  }

  function _renderPartners(partners) {
    if (!partners.length) {
      return `
        <div class="by-card" style="padding:var(--space-6);text-align:center">
          <p class="text-sm-muted">
            Noch keine Partner — das könnte schon bald du sein.
          </p>
        </div>
        ${_cta()}
      `;
    }

    const COLORS = [
      'linear-gradient(135deg,#7c3aed,#a855f7)',
      'linear-gradient(135deg,#2563eb,#3b82f6)',
      'linear-gradient(135deg,#059669,#10b981)',
      'linear-gradient(135deg,#d97706,#f59e0b)',
      'linear-gradient(135deg,#db2777,#ec4899)',
    ];

    return `
      <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-3);margin-bottom:var(--space-5)">
        ${partners.map((p, i) => {
          const initial = (p.name || '?')[0].toUpperCase();
          const grad    = COLORS[i % COLORS.length];
          return `
            <div class="by-card" style="padding:var(--space-4);position:relative;overflow:hidden">
              <div style="position:absolute;top:0;left:0;right:0;height:3px;background:${grad}"></div>
              <div style="display:flex;align-items:center;gap:var(--space-3)">
                        ${p.logo_url
                  ? `<img src="${_esc(p.logo_url)}" alt=""
                          style="width:56px;height:56px;border-radius:var(--radius-md);object-fit:contain;flex-shrink:0;background:var(--c-surface-2);padding:4px">`
                  : p.avatar_url
                  ? `<img src="${_esc(p.avatar_url)}" alt=""
                          style="width:56px;height:56px;border-radius:50%;object-fit:cover;flex-shrink:0">`
                  : `<div style="width:56px;height:56px;border-radius:50%;flex-shrink:0;
                                 background:${grad};display:flex;align-items:center;
                                 justify-content:center;font-size:24px;font-weight:800;color:#fff">
                       ${initial}
                     </div>`
                }
                <div class="flex-1-min">
                  <div style="font-weight:700;font-size:var(--text-base)">${_esc(p.display_name || p.name)}</div>
                  ${p.tagline ? `<div style="font-size:var(--text-xs);color:var(--c-text-muted);margin-top:1px">${_esc(p.tagline)}</div>` : ''}
                  <div style="display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-1)">
                    ${p.website ? `<a href="${_esc(p.website)}" target="_blank" rel="noopener"
                       style="font-size:var(--text-xs);color:var(--c-primary)">
                       🌐 ${_esc(p.website.replace(/^https?:\/\//, ''))}</a>` : ''}
                    ${p.instagram ? `<span class="text-xs-muted">📸 ${_esc(p.instagram)}</span>` : ''}
                  </div>
                </div>
              </div>
              ${p.pp_bio || p.bio ? `<p style="margin:var(--space-3) 0 0;font-size:var(--text-sm);
                                   color:var(--c-text-secondary);line-height:1.5">
                           ${_esc(p.pp_bio || p.bio)}
                         </p>` : ''}
              ${p.photos?.length ? `
              <div style="display:grid;grid-template-columns:repeat(${Math.min(p.photos.length,3)},1fr);
                           gap:var(--space-1);margin-top:var(--space-3);border-radius:var(--radius-md);overflow:hidden">
                ${p.photos.slice(0,3).map(url => {
                  const isVid = url.endsWith('.mp4') || url.endsWith('.webm');
                  return isVid
                    ? `<video src="${_esc(url)}" style="width:100%;aspect-ratio:1;object-fit:cover"
                              muted playsinline loop autoplay></video>`
                    : `<img src="${_esc(url)}" style="width:100%;aspect-ratio:1;object-fit:cover">`;
                }).join('')}
              </div>` : ''}
            </div>
          `;
        }).join('')}
      </div>
      ${_cta()}
    `;
  }

  function _cta() {
    return `
      <div class="by-card" style="padding:var(--space-5);text-align:center;
           background:linear-gradient(135deg,rgba(124,58,237,.08),rgba(168,85,247,.08));
           border:1px solid rgba(124,58,237,.2)">
        <div style="font-size:var(--text-base);font-weight:700;margin-bottom:var(--space-2)">
          Du möchtest Partner werden?
        </div>
        <p style="font-size:var(--text-sm);color:var(--c-text-secondary);margin:0 0 var(--space-3)">
          Schreib uns — wir richten deinen persönlichen Einladungscode ein.
        </p>
        <a href="mailto:partner@banyaro.app?subject=Ban Yaro Partner"
           style="display:inline-block;padding:10px 24px;background:linear-gradient(135deg,#7c3aed,#a855f7);
                  color:#fff;border-radius:var(--radius-full);font-weight:700;
                  font-size:var(--text-sm);text-decoration:none">
          📧 partner@banyaro.app
        </a>
      </div>
    `;
  }

  function _esc(s) {
    return String(s || '').replace(/[&<>"']/g, c =>
      ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
  }

  return { init, refresh, onDogChange };

})();