// ─────────────────────────────────────────────────────────────
// ABA SOCIAL — Redes sociais + Indicação por WhatsApp
// O paciente coloca o nome uma vez → o app gera o link já
// com a mensagem pronta pro Dr. ("Vim pela Maria...")
// ─────────────────────────────────────────────────────────────

const { useState, useEffect } = React;

function SocialScreen({ t }) {
  // nome do paciente que está indicando, salvo localmente
  const [nome, setNome] = useState(() => {
    try { return localStorage.getItem("indicador_nome") || ""; } catch { return ""; }
  });
  useEffect(() => {
    try { localStorage.setItem("indicador_nome", nome); } catch {}
  }, [nome]);

  // mensagem pré-pronta que o novo paciente vai mandar pro Dr.
  const nomeMostrar = nome.trim() || "[seu nome]";
  const mensagem = `Olá Dr. Ulisses! Vim por indicação de ${nomeMostrar}. Gostaria de agendar uma consulta.`;

  // wa.me link que JÁ ABRE a conversa do Dr. com a mensagem pronta
  const linkParaCompartilhar = nome.trim()
    ? `https://wa.me/${LINKS.whatsapp_numero}?text=${encodeURIComponent(mensagem)}`
    : "";

  // texto pra colar/enviar pro amigo
  const textoParaAmigo = nome.trim()
    ? `Te indico o Dr. Ulisses Nakagawa, médico de verdade, sem enrolação. Toca aqui que já abre o WhatsApp dele com tudo pronto:\n\n${linkParaCompartilhar}`
    : "";

  const [copiado, setCopiado] = useState(false);
  const copiar = async () => {
    if (!textoParaAmigo) return;
    try {
      await navigator.clipboard.writeText(textoParaAmigo);
    } catch {
      const ta = document.createElement("textarea");
      ta.value = textoParaAmigo; document.body.appendChild(ta);
      ta.select(); document.execCommand("copy"); ta.remove();
    }
    setCopiado(true);
    setTimeout(() => setCopiado(false), 2000);
  };

  // botão "compartilhar pelo whats" → abre o WhatsApp do amigo pra escolher pra quem mandar
  const linkCompartilharWA = nome.trim()
    ? `https://wa.me/?text=${encodeURIComponent(textoParaAmigo)}`
    : "";

  const redes = [
    {
      label: "Instagram",
      conta: "Dr. Ulisses Nakagawa",
      handle: LINKS.handle_instagram_dr,
      url:    LINKS.instagram_dr,
      glyph:  "IG",
    },
    {
      label: "TikTok",
      conta: "Dr. Ulisses Nakagawa",
      handle: LINKS.handle_tiktok_dr,
      url:    LINKS.tiktok_dr,
      glyph:  "TTK",
    },
    {
      label: "Instagram",
      conta: LINKS.nome_laboratorio,
      handle: LINKS.handle_laboratorio,
      url:    LINKS.instagram_laboratorio,
      glyph:  "LAB",
    },
  ];

  return (
    <div style={{
      position: "absolute", inset: 0,
      background: t.bg0, color: t.ink1,
      paddingTop: 56, paddingBottom: 100,
      overflowY: "auto", overflowX: "hidden",
      WebkitOverflowScrolling: "touch",
    }}>
      {/* HEADER */}
      <div style={{ padding: "24px 24px 16px" }}>
        <div style={{
          fontFamily: TYPE.sans, fontSize: 10, color: t.ink3,
          letterSpacing: "0.22em", textTransform: "uppercase", fontWeight: 700,
          marginBottom: 10,
        }}>Social</div>
        <h1 style={{
          fontFamily: TYPE.display, fontSize: 46, lineHeight: 0.95, color: t.ink1,
          letterSpacing: "-0.01em", margin: "0 0 12px", textTransform: "uppercase",
        }}>Indique<br/>um amigo</h1>

        {/* BENEFÍCIO EM DESTAQUE — Píx na hora */}
        <div style={{
          marginTop: 4, padding: "16px 18px",
          background: t.bg1, border: `1px solid ${t.borderStrong}`,
          borderRadius: RADIUS.lg,
        }}>
          <div style={{
            fontFamily: TYPE.sans, fontSize: 9.5, color: t.ink3,
            letterSpacing: "0.2em", textTransform: "uppercase", fontWeight: 800, marginBottom: 8,
          }}>Prêmio em dinheiro</div>
          <div style={{
            fontFamily: TYPE.display, fontSize: 23, color: t.ink1, lineHeight: 1.08,
            letterSpacing: "-0.01em", textTransform: "uppercase",
          }}>Indicou e a pessoa<br/>fechou consulta?<br/>Você recebe um Pix na hora.</div>
          <div style={{
            marginTop: 8, fontFamily: TYPE.sans, fontSize: 12.5, color: t.ink2, lineHeight: 1.55,
          }}>Direto pra sua conta, no mesmo dia. Sem letra miúda.</div>
        </div>
      </div>

      {/* CARTÃO DE INDICAÇÃO */}
      <div style={{
        margin: "12px 16px 24px",
        background: t.bg1, border: `1px solid ${t.borderStrong}`,
        borderRadius: RADIUS.lg, overflow: "hidden",
      }}>
        {/* 1. Nome */}
        <div style={{ padding: "20px 22px 0" }}>
          <div style={{
            fontFamily: TYPE.sans, fontSize: 9.5, color: t.ink3,
            letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700,
            marginBottom: 8,
          }}>1. Seu nome</div>
          <input
            type="text"
            value={nome}
            onChange={(e) => setNome(e.target.value)}
            placeholder="Ex: Maria Silva"
            style={{
              width: "100%", padding: "14px 16px",
              background: t.bg0, border: `1px solid ${t.border}`,
              borderRadius: RADIUS.md, color: t.ink1,
              fontFamily: TYPE.sans, fontSize: 15, fontWeight: 600,
              outline: "none",
            }}
          />
          <div style={{
            marginTop: 8,
            fontFamily: TYPE.sans, fontSize: 11, color: t.ink3, lineHeight: 1.5,
          }}>Salvo no seu aparelho. Não precisa digitar de novo.</div>
        </div>

        {/* 2. Preview da mensagem */}
        <div style={{ padding: "20px 22px 0" }}>
          <div style={{
            fontFamily: TYPE.sans, fontSize: 9.5, color: t.ink3,
            letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700,
            marginBottom: 8,
          }}>2. Prévia da mensagem que o Dr. recebe</div>
          <div style={{
            background: t.bg0, border: `1px solid ${t.border}`,
            borderRadius: RADIUS.md, padding: "14px 16px",
            fontFamily: TYPE.sans, fontSize: 13, color: t.ink2,
            lineHeight: 1.55, fontStyle: "italic",
            opacity: nome.trim() ? 1 : 0.55,
          }}>
            "{mensagem}"
          </div>
        </div>

        {/* 3. Ações */}
        <div style={{ padding: "20px 22px 22px" }}>
          <div style={{
            fontFamily: TYPE.sans, fontSize: 9.5, color: t.ink3,
            letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700,
            marginBottom: 10,
          }}>3. Compartilhar</div>

          {/* botão whatsapp */}
          <a
            href={linkCompartilharWA || undefined}
            target="_blank" rel="noreferrer"
            onClick={(e) => { if (!nome.trim()) e.preventDefault(); }}
            style={{
              width: "100%", boxSizing: "border-box",
              display: "flex", alignItems: "center", justifyContent: "center", gap: 10,
              padding: "16px 18px",
              background: nome.trim() ? t.ink1 : t.bg2,
              color: nome.trim() ? t.bg0 : t.ink4,
              borderRadius: RADIUS.md, textDecoration: "none",
              fontFamily: TYPE.sans, fontSize: 13, fontWeight: 800,
              letterSpacing: "0.06em", textTransform: "uppercase",
              cursor: nome.trim() ? "pointer" : "not-allowed",
              boxShadow: nome.trim() ? "0 8px 24px rgba(0,0,0,0.35)" : "none",
            }}
          >
            <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
              <path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.6.1-.2.3-.7.9-.9 1-.2.2-.3.2-.6.1-1.7-.9-2.9-1.6-4-3.6-.3-.5.3-.5.8-1.5.1-.2 0-.3 0-.5s-.6-1.4-.8-1.9c-.2-.5-.4-.4-.6-.4h-.5c-.2 0-.5.1-.7.3-.3.3-1 1-1 2.4s1 2.8 1.2 3 2 3 4.8 4.2c1.7.7 2.4.8 3.3.7.5-.1 1.7-.7 1.9-1.4.2-.7.2-1.3.2-1.4-.1-.1-.3-.2-.5-.3zM12 2C6.5 2 2 6.5 2 12c0 1.7.5 3.4 1.3 4.8L2 22l5.2-1.4C8.6 21.5 10.3 22 12 22c5.5 0 10-4.5 10-10S17.5 2 12 2z"/>
            </svg>
            Compartilhar pelo WhatsApp
          </a>

          {/* botão copiar */}
          <button
            onClick={copiar}
            disabled={!nome.trim()}
            style={{
              marginTop: 8,
              width: "100%", boxSizing: "border-box",
              display: "flex", alignItems: "center", justifyContent: "center", gap: 10,
              padding: "14px 18px",
              background: "transparent",
              color: nome.trim() ? t.ink2 : t.ink4,
              border: `1px solid ${t.border}`, borderRadius: RADIUS.md,
              fontFamily: TYPE.sans, fontSize: 12, fontWeight: 700,
              letterSpacing: "0.08em", textTransform: "uppercase",
              cursor: nome.trim() ? "pointer" : "not-allowed",
            }}
          >
            {copiado ? (
              <>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="m5 12 5 5 9-11"/></svg>
                Copiado
              </>
            ) : (
              <>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="8" y="8" width="13" height="13" rx="2"/>
                  <path d="M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h3"/>
                </svg>
                Copiar mensagem
              </>
            )}
          </button>

          {/* como funciona */}
          <div style={{
            marginTop: 16, padding: "14px 14px",
            background: t.bg0, border: `1px dashed ${t.border}`,
            borderRadius: RADIUS.md,
            fontFamily: TYPE.sans, fontSize: 11.5, color: t.ink3, lineHeight: 1.55,
          }}>
            <strong style={{ color: t.ink2, letterSpacing: "0.06em", textTransform: "uppercase", fontSize: 10 }}>Como funciona</strong>
            <div style={{ marginTop: 6, textAlign: "justify" }}>
              {nl2br("Coloque seu nome uma vez e compartilhe<br> Seu amigo toca no link, o WhatsApp dele abre direto na conversa com o Dr. Ulisses Nakagawa com tudo pronto.<br> Assim o Dr. já recebe a mensagem dizendo que a indicação veio de você. Não precisa avisar nada.<br> <br> Se ele fechar a consulta, teu Pix sai na hora.")}
            </div>
          </div>
        </div>
      </div>

      {/* DIVISOR */}
      <SectionLabel t={t}>Redes do Dr. Ulisses</SectionLabel>

      {/* REDES */}
      <div style={{ padding: "0 16px", display: "flex", flexDirection: "column", gap: 10 }}>
        {redes.map((r, i) => (
          <a
            key={i}
            href={r.url}
            target="_blank" rel="noreferrer"
            style={{
              display: "flex", alignItems: "center", gap: 16,
              padding: "16px 18px",
              background: t.bg1, border: `1px solid ${t.border}`,
              borderRadius: RADIUS.lg, textDecoration: "none",
              color: t.ink1,
            }}
          >
            <div style={{
              flexShrink: 0,
              width: 52, height: 52, borderRadius: RADIUS.md,
              background: t.bg2, border: `1px solid ${t.border}`,
              display: "flex", alignItems: "center", justifyContent: "center",
              fontFamily: TYPE.display, fontSize: 18, color: t.ink2,
              letterSpacing: "-0.01em",
            }}>{r.glyph}</div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{
                fontFamily: TYPE.sans, fontSize: 9.5, color: t.ink3,
                letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 700,
                marginBottom: 4,
              }}>{r.label}</div>
              <div style={{
                fontFamily: TYPE.display, fontSize: 20, color: t.ink1,
                letterSpacing: "-0.005em", lineHeight: 1.05, textTransform: "uppercase",
                marginBottom: 3,
              }}>{r.conta}</div>
              <div style={{
                fontFamily: TYPE.mono, fontSize: 11.5, color: t.ink3,
              }}>{r.handle}</div>
            </div>
            <Icon name="chevR" size={14} stroke={t.ink4} />
          </a>
        ))}
      </div>

      {/* RODAPÉ */}
      <div style={{
        padding: "32px 24px 16px",
        fontFamily: TYPE.sans, fontSize: 11, color: t.ink3, lineHeight: 1.6,
        textAlign: "center",
      }}>
        Conteúdo educativo. Toda decisão clínica é individual e passa por consulta.
      </div>
    </div>
  );
}

Object.assign(window, { SocialScreen });