function Supporters() {
  const { t } = window.useT();

  return (
    <section className="supporters">
      <div className="showcase-bg" aria-hidden="true">
        <div className="showcase-blob showcase-blob--1"/>
        <div className="showcase-blob showcase-blob--2"/>
        <div className="showcase-blob showcase-blob--3"/>
        <div className="showcase-blob showcase-blob--4"/>
      </div>
      <div className="container supporters-split">
        <div className="supporters-left">
          <span className="eyebrow supporters-eyebrow">{t('sup.eyebrow')}</span>
          <h3>{t('sup.title')}</h3>
          <p className="supporters-lead">{t('sup.lead')}</p>
          <a href="mailto:info@dentson.tech" className="btn btn-primary supporters-cta">
            {t('sup.cta')}
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true">
              <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
            </svg>
          </a>
        </div>
        <div className="supporters-right">
          <div className="supporters-stage">
            <img
              className="supporters-bg"
              src="assets/team-group.webp"
              alt="Das dentson Gründerteam"
              loading="lazy"
            />
            <div className="supporters-marquee" aria-hidden="true">
              <div className="supporters-marquee-track">
                {Array.from({ length: 2 }).flatMap((_, group) => {
                  const logos = [
                    { src: 'assets/logos/bmwk-v2.png', alt: 'BMWK', className: 'logo-bmwk' },
                    { src: 'assets/logos/exist.png', alt: 'EXIST', className: 'logo-exist' },
                    { src: 'assets/logos/eu-v2.png', alt: 'Kofinanziert von der Europäischen Union', className: 'logo-eu' },
                    { src: 'assets/logos/invest.png', alt: 'INVEST – Zuschuss für Wagniskapital', className: 'logo-invest' },
                    { src: 'assets/logos/bmwk-v2.png', alt: 'BMWK', className: 'logo-bmwk' },
                    { src: 'assets/logos/exist.png', alt: 'EXIST', className: 'logo-exist' },
                    { src: 'assets/logos/eu-v2.png', alt: 'Kofinanziert von der Europäischen Union', className: 'logo-eu' },
                    { src: 'assets/logos/invest.png', alt: 'INVEST – Zuschuss für Wagniskapital', className: 'logo-invest' },
                  ];
                  return logos.map((l, i) => (
                    <div className="supporter-logo" key={`${group}-${i}`}>
                      {l.src ? (
                        <img src={l.src} alt={l.alt} className={l.className} loading="lazy" />
                      ) : (
                        l.placeholder
                      )}
                    </div>
                  ));
                })}
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Wordmark() {
  return (
    <section className="wordmark">
      <video
        className="wordmark-bg-video"
        src="assets/wordmark-bg.mp4?v=3"
        autoPlay
        loop
        muted
        playsInline
        preload="none"
        aria-hidden="true"
      />
      <div className="inner">dent<b>son</b></div>
    </section>
  );
}

function Footer() {
  const { t } = window.useT();
  const innerRef = React.useRef(null);

  React.useEffect(() => {
    const align = () => {
      const wordmark = document.querySelector('.wordmark .inner');
      const footer = innerRef.current;
      if (!wordmark || !footer) return;
      // Measure the visual left edge of the first character "d"
      const range = document.createRange();
      range.setStart(wordmark.firstChild, 0);
      range.setEnd(wordmark.firstChild, 1);
      const charRect = range.getBoundingClientRect();
      const pad = Math.round(charRect.left);
      footer.style.paddingLeft = pad + 'px';
      footer.style.paddingRight = pad + 'px';
    };
    align();
    window.addEventListener('resize', align);
    return () => window.removeEventListener('resize', align);
  }, []);

  return (
    <footer className="footer">
      <div className="footer-inner" ref={innerRef}>
        <small>{t('footer.copy')}</small>
        <div className="footer-links">
          <a href="/legal/impressum/">{t('footer.imprint')}</a>
          <a href="/legal/datenschutz/">{t('footer.privacy')}</a>
          <a href="/legal/agb/">{t('footer.agb')}</a>
          <a href="mailto:info@dentson.tech">info@dentson.tech</a>
        </div>
      </div>
    </footer>
  );
}

// ── MiniFooter — used on all subpages (no wordmark/video) ────
function MiniFooter() {
  const { t } = window.useT();
  return (
    <footer className="mini-footer">
      <div className="mini-footer-inner">
        <small>{t('footer.copy')}</small>
        <div className="mini-footer-links">
          <a href="/legal/impressum/">{t('footer.imprint')}</a>
          <a href="/legal/datenschutz/">{t('footer.privacy')}</a>
          <a href="/legal/agb/">{t('footer.agb')}</a>
          <a href="mailto:info@dentson.tech">info@dentson.tech</a>
        </div>
      </div>
    </footer>
  );
}

window.Supporters = Supporters;
window.Wordmark = Wordmark;
window.Footer = Footer;
window.MiniFooter = MiniFooter;