// ---------- Share section ----------
// Sharing strip for major social platforms + messengers + copy link.
// Builds canonical share URLs from the current page URL.
//
// Instagram and TikTok have no public web share URL — for those, the
// button copies the page link, opens the app/site, and surfaces a hint
// telling the user to paste it in.

const SHARE_ICONS = {
  facebook: (
    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M13.5 21v-7.5h2.5l.4-3.1H13.5V8.4c0-.9.25-1.5 1.55-1.5h1.65V4.13C16.4 4.1 15.4 4 14.25 4 11.85 4 10.2 5.47 10.2 8.13v2.27H7.7v3.1h2.5V21h3.3z" />
    </svg>
  ),
  x: (
    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M18.244 3H21l-6.52 7.46L22 21h-6.07l-4.76-6.22L5.7 21H3l6.97-7.98L2.5 3h6.22l4.3 5.69L18.244 3zm-1.06 16.2h1.5L7.9 4.7H6.3l10.884 14.5z" />
    </svg>
  ),
  whatsapp: (
    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M12.04 2C6.55 2 2.09 6.46 2.09 11.95c0 1.93.55 3.74 1.5 5.27L2 22l4.9-1.55a9.9 9.9 0 0 0 5.14 1.43h.01c5.49 0 9.95-4.46 9.95-9.95 0-2.66-1.04-5.16-2.91-7.04A9.88 9.88 0 0 0 12.04 2zm0 1.77c2.18 0 4.23.85 5.78 2.4a8.13 8.13 0 0 1 2.4 5.78c0 4.5-3.66 8.17-8.18 8.17a8.15 8.15 0 0 1-4.16-1.14l-.3-.18-3.04.96.97-2.98-.2-.31a8.13 8.13 0 0 1-1.26-4.35c0-4.51 3.67-8.17 8.18-8.17zm-3.13 4.32c-.18 0-.46.06-.7.34-.24.27-.92.9-.92 2.2 0 1.3.94 2.55 1.07 2.73.13.18 1.85 2.96 4.57 4.03 2.27.9 2.73.72 3.22.67.5-.04 1.6-.65 1.83-1.28.22-.62.22-1.16.16-1.27-.07-.11-.25-.18-.52-.31s-1.6-.79-1.85-.88c-.25-.09-.43-.13-.6.13-.18.26-.7.88-.85 1.06-.16.18-.31.2-.58.07-.27-.13-1.14-.42-2.17-1.34-.8-.71-1.34-1.6-1.5-1.87-.16-.27-.02-.41.12-.55.12-.12.27-.31.4-.47.13-.16.18-.27.27-.45.09-.18.05-.34-.02-.47-.07-.13-.6-1.45-.82-1.98-.22-.52-.44-.45-.6-.46h-.5z" />
    </svg>
  ),
  telegram: (
    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M21.93 4.39 18.7 19.93c-.24 1.08-.88 1.34-1.78.83l-4.93-3.63-2.38 2.29c-.26.26-.48.49-.99.49l.35-5.04 9.18-8.29c.4-.36-.09-.55-.62-.2l-11.34 7.14-4.89-1.53c-1.06-.33-1.08-1.06.22-1.57L20.56 2.8c.88-.33 1.65.2 1.37 1.59z" />
    </svg>
  ),
  linkedin: (
    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M4.98 3.5a2.5 2.5 0 1 1 0 5.001 2.5 2.5 0 0 1 0-5zM3 9.5h4v11H3v-11zm6 0h3.83v1.5h.05c.53-1 1.84-2.05 3.78-2.05 4.04 0 4.78 2.66 4.78 6.12V20.5H17v-5.05c0-1.2-.02-2.75-1.68-2.75-1.68 0-1.94 1.31-1.94 2.66V20.5H9v-11z" />
    </svg>
  ),
  reddit: (
    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M22 12.06a2.06 2.06 0 0 0-3.5-1.46 9.95 9.95 0 0 0-5.4-1.71l.92-4.32 3 .64a1.47 1.47 0 1 0 .15-.86l-3.36-.72a.43.43 0 0 0-.5.33L12.27 8.9a9.95 9.95 0 0 0-5.46 1.7 2.06 2.06 0 1 0-2.27 3.37 4.1 4.1 0 0 0-.04.55c0 2.79 3.25 5.05 7.26 5.05s7.26-2.26 7.26-5.05a4.1 4.1 0 0 0-.04-.54A2.06 2.06 0 0 0 22 12.06zm-13.4 1.46a1.36 1.36 0 1 1 2.72 0 1.36 1.36 0 0 1-2.72 0zm7.6 3.6c-1.06.93-2.6 1-3.2 1s-2.14-.07-3.2-1a.36.36 0 0 1 .5-.51c.67.66 2.1.9 2.7.9s2.03-.24 2.7-.9a.36.36 0 0 1 .5.51zm-.36-2.24a1.36 1.36 0 1 1 0-2.72 1.36 1.36 0 0 1 0 2.72z" />
    </svg>
  ),
  instagram: (
    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16M12 0C8.74 0 8.33.01 7.05.07 5.78.13 4.9.33 4.14.63a5.9 5.9 0 0 0-2.13 1.39A5.9 5.9 0 0 0 .63 4.14C.33 4.9.13 5.78.07 7.05.01 8.33 0 8.74 0 12s.01 3.67.07 4.95c.06 1.27.26 2.15.56 2.91a5.9 5.9 0 0 0 1.39 2.13c.6.6 1.32 1.06 2.13 1.39.76.3 1.64.5 2.91.56C8.33 23.99 8.74 24 12 24s3.67-.01 4.95-.07c1.27-.06 2.15-.26 2.91-.56a5.9 5.9 0 0 0 2.13-1.39 5.9 5.9 0 0 0 1.39-2.13c.3-.76.5-1.64.56-2.91.06-1.28.07-1.69.07-4.95s-.01-3.67-.07-4.95c-.06-1.27-.26-2.15-.56-2.91a5.9 5.9 0 0 0-1.39-2.13A5.9 5.9 0 0 0 19.86.63C19.1.33 18.22.13 16.95.07 15.67.01 15.26 0 12 0zm0 5.84a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32zm0 10.16a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM19.85 5.6a1.44 1.44 0 1 1-2.88 0 1.44 1.44 0 0 1 2.88 0z" />
    </svg>
  ),
  tiktok: (
    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5.8 20.1a6.34 6.34 0 0 0 10.86-4.43V8.65a8.16 8.16 0 0 0 4.77 1.52V6.72a4.86 4.86 0 0 1-1.84-.03z" />
    </svg>
  ),
  email: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      <rect x="3" y="5" width="18" height="14" rx="2.5" />
      <path d="M4 7.5l8 6 8-6" />
    </svg>
  ),
};

async function copyToClipboard(text) {
  try {
    await navigator.clipboard.writeText(text);
    return true;
  } catch (_) {
    try {
      const ta = document.createElement("textarea");
      ta.value = text;
      ta.style.position = "fixed";
      ta.style.opacity = "0";
      document.body.appendChild(ta);
      ta.select();
      document.execCommand("copy");
      document.body.removeChild(ta);
      return true;
    } catch (_) { return false; }
  }
}

function Share({ t, tHtml, accent }) {
  // feedback: { id, label } — which button's success message to show
  const [feedback, setFeedback] = React.useState(null);
  const [pageUrl, setPageUrl] = React.useState("");

  React.useEffect(() => {
    try { setPageUrl(window.location.href.split("#")[0]); } catch (_) {}
  }, []);

  const u = encodeURIComponent(pageUrl);
  const tx = encodeURIComponent(t("share_message"));
  const subj = encodeURIComponent(t("share_email_subject"));
  const body = encodeURIComponent(`${t("share_message")}\n\n${pageUrl}`);

  // mode "share" → plain anchor; "paste" → copy link + open app + paste hint
  const targets = [
    { id: "whatsapp",  label: "WhatsApp",  mode: "share", href: `https://wa.me/?text=${tx}%20${u}` },
    { id: "x",         label: "X",         mode: "share", href: `https://twitter.com/intent/tweet?url=${u}&text=${tx}` },
    { id: "facebook",  label: "Facebook",  mode: "share", href: `https://www.facebook.com/sharer/sharer.php?u=${u}` },
    { id: "instagram", label: "Instagram", mode: "paste", href: "https://www.instagram.com/" },
    { id: "tiktok",    label: "TikTok",    mode: "paste", href: "https://www.tiktok.com/" },
    { id: "telegram",  label: "Telegram",  mode: "share", href: `https://t.me/share/url?url=${u}&text=${tx}` },
    { id: "linkedin",  label: "LinkedIn",  mode: "share", href: `https://www.linkedin.com/sharing/share-offsite/?url=${u}` },
    { id: "reddit",    label: "Reddit",    mode: "share", href: `https://www.reddit.com/submit?url=${u}&title=${tx}` },
    { id: "email",     label: "Email",     mode: "share", href: `mailto:?subject=${subj}&body=${body}` },
  ];

  const flash = (id, label) => {
    setFeedback({ id, label });
    setTimeout(() => setFeedback(null), 2000);
  };

  const handlePaste = async (tg, e) => {
    e.preventDefault();
    // Open a placeholder window NOW (while we still have the user gesture
    // — popup blockers won't allow this after an async copy + setTimeout)
    // and redirect it after the flash has had time to read.
    const win = window.open("about:blank", "_blank");
    const ok = await copyToClipboard(pageUrl);
    if (ok) flash(tg.id, t("share_paste_hint"));
    setTimeout(() => {
      if (win && !win.closed) {
        try { win.location.href = tg.href; } catch (_) {}
      } else {
        // popup blocked or closed — fall back to same-tab navigation
        window.location.href = tg.href;
      }
    }, 1100);
  };

  const handleCopy = async () => {
    const ok = await copyToClipboard(pageUrl);
    if (ok) flash("copy", t("share_copied"));
  };

  return (
    <section className="share">
      <div className="share-inner">
        <div className="share-head">
          <div className="section-eyebrow">{t("share_eyebrow")}</div>
          <h2 className="share-title" {...tHtml("share_title")} />
          <p className="share-sub">{t("share_subtitle")}</p>
        </div>

        <div className="share-row">
          {targets.map((tg) => {
            const isFlashing = feedback && feedback.id === tg.id;
            const commonProps = {
              key: tg.id,
              className: `share-btn share-btn--${tg.id} ${isFlashing ? "is-flashing" : ""}`,
              "aria-label": `Share on ${tg.label}`,
              style: isFlashing ? { background: accent, color: "white", borderColor: accent } : undefined,
            };
            const inner = (
              <>
                <span className="share-btn-icon">
                  {isFlashing ? (
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                      <path d="M4 12.5l5 5L20 7" />
                    </svg>
                  ) : SHARE_ICONS[tg.id]}
                </span>
                <span className="share-btn-label">{isFlashing ? feedback.label : tg.label}</span>
              </>
            );
            if (tg.mode === "paste") {
              return (
                <a {...commonProps} href={tg.href} onClick={(e) => handlePaste(tg, e)} target="_blank" rel="noopener">
                  {inner}
                </a>
              );
            }
            return (
              <a {...commonProps} href={tg.href} target={tg.id === "email" ? undefined : "_blank"} rel="noopener">
                {inner}
              </a>
            );
          })}

          <button
            type="button"
            className={`share-btn share-btn--copy ${feedback && feedback.id === "copy" ? "is-flashing" : ""}`}
            onClick={handleCopy}
            style={feedback && feedback.id === "copy" ? { background: accent, color: "white", borderColor: accent } : undefined}
            aria-label={feedback && feedback.id === "copy" ? t("share_copied") : t("share_copy")}
          >
            <span className="share-btn-icon">
              {feedback && feedback.id === "copy" ? (
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                  <path d="M4 12.5l5 5L20 7" />
                </svg>
              ) : (
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                  <rect x="9" y="3" width="12" height="14" rx="2.5" />
                  <path d="M5 7v12a2 2 0 0 0 2 2h10" />
                </svg>
              )}
            </span>
            <span className="share-btn-label">{feedback && feedback.id === "copy" ? t("share_copied") : t("share_copy")}</span>
          </button>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Share });