/* Blok met twee deelknoppen: de homepage delen op Facebook en via WhatsApp.
   De deelteksten en de deelkaart (titel, omschrijving, afbeelding) staan in
   seo.js, zodat de knoppen hier en de meta-tags in de pagina altijd gelijk lopen.

   Facebook leest de titel, de omschrijving en de afbeelding uit de og-tags van
   de gedeelde pagina; een eigen tekst meesturen kan niet meer. WhatsApp stuurt
   het bericht hieronder mee en haalt de voorvertoning ook uit dezelfde og-tags. */

function BbDeelFacebookGlyph({ size = 20 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
      <path d="M22 12.06C22 6.5 17.52 2 12 2S2 6.5 2 12.06c0 5.02 3.66 9.18 8.44 9.94v-7.03H7.9v-2.91h2.54V9.85c0-2.5 1.49-3.89 3.77-3.89 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.78-1.63 1.57v1.87h2.78l-.45 2.91h-2.33v7.03C18.34 21.24 22 17.08 22 12.06z"></path>
    </svg>
  );
}

function BbDeelWaGlyph({ size = 20 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false">
      <path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 0 0 4.79 1.22h.01c5.46 0 9.91-4.45 9.91-9.91C21.96 6.45 17.5 2 12.04 2zm0 18.15h-.01a8.2 8.2 0 0 1-4.18-1.15l-.3-.18-3.11.82.83-3.04-.19-.31a8.19 8.19 0 0 1-1.26-4.38c0-4.54 3.7-8.23 8.23-8.23 2.2 0 4.26.86 5.82 2.41a8.17 8.17 0 0 1 2.41 5.82c0 4.54-3.7 8.24-8.24 8.24zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.13-.16.25-.64.81-.79.97-.14.17-.29.19-.54.06-.25-.12-1.05-.39-2-1.23-.74-.66-1.24-1.47-1.38-1.72-.15-.25-.02-.39.11-.51.11-.11.25-.29.37-.44.12-.14.16-.25.25-.41.08-.17.04-.31-.02-.44-.06-.12-.56-1.35-.77-1.84-.2-.49-.41-.42-.56-.43h-.48c-.16 0-.42.06-.64.31-.22.25-.84.82-.84 2 0 1.18.86 2.32.98 2.48.12.17 1.69 2.58 4.09 3.62.57.25 1.02.39 1.37.5.58.18 1.1.16 1.52.1.46-.07 1.47-.6 1.68-1.18.21-.58.21-1.08.15-1.18-.06-.11-.23-.17-.48-.29z"></path>
    </svg>
  );
}

function DeelBlok({ kop, tekst, tone = "cream" }) {
  const deel = window.bbDeelVoor ? window.bbDeelVoor() : null;
  if (!deel) return null;

  const fbHref = "https://www.facebook.com/sharer/sharer.php?u=" + encodeURIComponent(deel.url);
  const waHref = "https://wa.me/?text=" + encodeURIComponent(deel.waTekst);

  return (
    <FadeUp className={"bb-deel bb-deel--" + tone}>
      <div className="bb-deel__vak">
        <img className="bb-deel__logo" src="assets/logo/logo.png" alt="" width="126" height="126" />
      </div>
      <h2 className="bb-deel__kop">{kop || "Deel Buiten Buddies met je buurt"}</h2>
      <div className="bb-deel__tekst">
        <p>{tekst || "Hoe meer buren meedoen, hoe meer kinderen er buiten staan. Stuur de website door naar je straat, je klas of je buurtgroep."}</p>
      </div>
      <div className="bb-deel__knoppen">
        <a
          className="bb-deel__btn bb-deel__btn--fb"
          href={fbHref}
          target="_blank"
          rel="noopener noreferrer"
          aria-label="Buiten Buddies delen op Facebook, opent in een nieuw tabblad"
        >
          <BbDeelFacebookGlyph /> Delen op Facebook
        </a>
        <a
          className="bb-deel__btn bb-deel__btn--wa"
          href={waHref}
          target="_blank"
          rel="noopener noreferrer"
          aria-label="Buiten Buddies delen via WhatsApp, opent in een nieuw tabblad"
        >
          <BbDeelWaGlyph /> Delen via WhatsApp
        </a>
      </div>
    </FadeUp>
  );
}

Object.assign(window, { DeelBlok, BbDeelWaGlyph, BbDeelFacebookGlyph });