/* =====================================================================
   ACS — page sections
   ===================================================================== */

function Philosophie({ copy }) {
  return (
    <section className="section" id="philosophie">
      <div className="container">
        <div className="philo">
          <Reveal>
            <div className="philo__quote-wrap">
              <div className="philo__quote-img" style={{ backgroundImage: "url(assets/philo-ball.jpg)" }}></div>
              <div className="philo__quote-overlay"></div>
              <div className="philo__quote">{copy.philo.quote}</div>
            </div>
          </Reveal>
          <Reveal delay={1}>
            <div className="philo__body">
              {copy.philo.body.map((p, i) => <p key={i}>{p}</p>)}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function Services({ copy }) {
  return (
    <section className="section section--ink" id="leistungen">
      <div className="container">
        <Reveal className="section-head">
          <div>
            <div className="section-head__index">{copy.services.index}</div>
            <h2 className="h-section" style={{ marginTop: 24 }}>{copy.services.title}</h2>
          </div>
          <p className="section-head__lead">{copy.services.lead}</p>
        </Reveal>

        <div className="services">
          {copy.services.items.map(([n, t, d], i) => (
            <Reveal key={i} delay={(i % 2) + 1} as="div" className="service">
              <div className="service__num">{n}</div>
              <div>
                <h3 className="service__title">{t}</h3>
                <p className="service__desc">{d}</p>
              </div>
              <div className="service__arrow"><ArrowUR /></div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function BigMark({ copy }) {
  return (
    <section className="bigmark">
      <div className="container">
        <Reveal className="bigmark__row">
          <div className="bigmark__claim" style={{ whiteSpace: 'pre-line' }}>
            {copy.bigmark.claim.split('\n').map((line, i, arr) =>
              <React.Fragment key={i}>
                {i === arr.length - 1 ? <strong>{line}</strong> : line}
                {i < arr.length - 1 && <br />}
              </React.Fragment>
            )}
          </div>
          <div className="bigmark__meta">
            {copy.bigmark.meta.map(([v, l], i) => (
              <div className="item" key={i}>
                <div className="v">{v}</div>
                <div className="l">{l}</div>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
      <Reveal className="bigmark__giant">
        <img src="assets/logo-subline-white.png" alt="ACS Sportsmanagement Berlin" />
      </Reveal>
    </section>
  );
}

function Athletes({ copy, lang }) {
  return (
    <section className="section section--paper2" id="athleten">
      <div className="container">
        <Reveal className="section-head">
          <div>
            <div className="section-head__index">{copy.roster.index}</div>
            <h2 className="h-section" style={{ marginTop: 24, whiteSpace: 'pre-line' }}>{copy.roster.title}</h2>
          </div>
          {copy.roster.lead && <p className="section-head__lead">{copy.roster.lead}</p>}
        </Reveal>

        <div className="roster">
          {ATHLETES.map((a, i) => (
            <Reveal key={a.id} delay={(i % 4) + 1} as="div" className="athlete athlete--static">
              <div className="athlete__bg" style={{ backgroundImage: `url(${a.img})` }}></div>
              <div className="athlete__num">№ {a.no}</div>
              <div className="athlete__info">
                <div className="athlete__name">{a.name}</div>
                <div className="athlete__club">{a.club}</div>
                <div className="athlete__league">{a.league}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Team({ copy, lang }) {
  const saveVCard = async (m) => {
    const email = (m.contact.find((c) => c.includes('@'))) || '';
    const role = lang === 'de' ? m.role_de : m.role_en;
    const parts = m.name.split(' ');

    let photoLine = '';
    if (m.img) {
      try {
        const res = await fetch(m.img);
        const blob = await res.blob();
        const dataUrl = await new Promise((resolve, reject) => {
          const fr = new FileReader();
          fr.onload = () => resolve(fr.result);
          fr.onerror = reject;
          fr.readAsDataURL(blob);
        });
        const b64 = String(dataUrl).split(',')[1] || '';
        const type = (blob.type.split('/')[1] || 'jpeg').toUpperCase();
        if (b64) {
          // fold long base64 line for vCard 3.0 (leading space on continuation lines)
          const folded = b64.replace(/(.{74})/g, '$1\r\n ');
          photoLine = `PHOTO;ENCODING=b;TYPE=${type}:${folded}`;
        }
      } catch (e) { /* photo optional — skip if unavailable */ }
    }

    const vcard = [
      'BEGIN:VCARD',
      'VERSION:3.0',
      `N:${parts.slice(-1)};${parts.slice(0, -1).join(' ')};;;`,
      `FN:${m.name}`,
      'ORG:ACS Sportsmanagement UG',
      `TITLE:${role}`,
      email ? `EMAIL;TYPE=WORK:${email}` : '',
      m.phone ? `TEL;TYPE=WORK,VOICE:${m.phone}` : '',
      'ADR;TYPE=WORK:;;Kolonnenstr. 8;Berlin;;10827;Deutschland',
      'URL:https://www.acs-sportsmanagement.de',
      photoLine,
      'END:VCARD',
    ].filter(Boolean).join('\r\n');
    const blob = new Blob([vcard], { type: 'text/vcard' });
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = `${m.name.replace(/\s+/g, '-')}.vcf`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
  };
  return (
    <section className="section" id="team">
      <div className="container">
        <Reveal className="section-head">
          <div>
            <div className="section-head__index">{copy.team.index}</div>
            <h2 className="h-section" style={{ marginTop: 24 }}>{copy.team.title}</h2>
          </div>
          {copy.team.lead && <p className="section-head__lead">{copy.team.lead}</p>}
        </Reveal>

        <div className="team">
          {TEAM.map((m, i) => (
            <Reveal key={i} delay={(i % 3) + 1} as="div" className="member">
              <div className="member__avatar" style={{ backgroundImage: `url(${m.img})` }}></div>
              <div className="member__role">{lang === 'de' ? m.role_de : m.role_en}</div>
              <div className="member__name">{m.name}</div>
              <p className="member__bio">{lang === 'de' ? m.bio_de : m.bio_en}</p>
              {m.fifa && (
                <div className="fifa-badge">
                  <div className="fifa-badge__mark">FIFA</div>
                  <div className="fifa-badge__text">
                    <div className="fifa-badge__title">{lang === 'de' ? 'Lizenzierter Football Agent' : 'Licensed Football Agent'}</div>
                    <div className="fifa-badge__meta">
                      <span className="fifa-badge__status">● {lang === 'de' ? m.fifa.status_de : m.fifa.status_en}</span>
                      <span className="fifa-badge__num">№ {m.fifa.number}</span>
                    </div>
                  </div>
                </div>
              )}
              <div className="member__contact">
                {m.contact.map((c, j) => (
                  <a key={j} href={c.includes('@') ? `mailto:${c}` : '#'}>↗ {c}</a>
                ))}
              </div>
              <button type="button" className="member__vcard" onClick={() => saveVCard(m)}>
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="3" y="5" width="18" height="14" rx="2"></rect>
                  <circle cx="9" cy="11" r="2"></circle>
                  <path d="M15 10h3M15 13h3M6 16c.6-1.4 1.8-2 3-2s2.4.6 3 2"></path>
                </svg>
                {lang === 'de' ? 'Visitenkarte speichern' : 'Save contact card'}
              </button>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function Partners({ copy }) {
  return (
    <section className="section section--paper2" id="partner">
      <div className="container">
        <Reveal className="section-head">
          <div>
            <div className="section-head__index">{copy.partners.index}</div>
            <h2 className="h-section" style={{ marginTop: 24, whiteSpace: 'pre-line' }}>{copy.partners.title}</h2>
          </div>
          {copy.partners.lead && <p className="section-head__lead">{copy.partners.lead}</p>}
        </Reveal>

        <Reveal className="partners">
          {PARTNERS.map((p, i) => (
            <div key={i} className="partner">{p}</div>
          ))}
        </Reveal>
      </div>
    </section>
  );
}

function CTA({ copy }) {
  return (
    <section className="cta" id="kontakt">
      <div className="container">
        <Reveal>
          <span className="eyebrow" style={{ color: 'var(--acs-green-bright)' }}>{copy.cta.label}</span>
        </Reveal>
        <Reveal delay={1}>
          <h2 className="cta__giant">
            {copy.cta.title[0]}<br />
            {copy.cta.title[1]} {copy.cta.titleEm && <em>{copy.cta.titleEm}</em>}
          </h2>
        </Reveal>
        <Reveal delay={2} as="div" className="cta__row">
          <div className="cta__contact">
            {copy.cta.contact.map(([h, v], i) => (
              <div key={i}>
                <h4>{h}</h4>
                {v.includes('@') ? <a href={`mailto:${v}`}>{v}</a> :
                 v.startsWith('+') ? <a href={`tel:${v.replace(/\s/g,'')}`}>{v}</a> :
                 <p style={{ whiteSpace: 'pre-line' }}>{v}</p>}
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 14, justifyContent: 'flex-end', flexWrap: 'wrap' }}>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Footer({ copy }) {
  return (
    <footer className="footer">
      <div className="container footer__row">
        <div>{copy.footer.copyright}</div>
        <div className="footer__links">
          {copy.footer.links.map((l, i) => <a key={i} href={l.href}>{l.label}</a>)}
        </div>
      </div>
    </footer>
  );
}

window.Philosophie = Philosophie;
window.Services = Services;
window.BigMark = BigMark;
window.Athletes = Athletes;
window.Team = Team;
window.Partners = Partners;
window.CTA = CTA;
window.Footer = Footer;