/* ============================================================
   Evidia · ConviteCard — "Rede em Movimento"
   Componente React portátil. CSS escopado injetado no <head>.
   Requer: window.BrazilMap  (carregado via prop mapSrc ou
           <script src="brazil-map.js"> antes deste arquivo)
   Uso:
     <ConviteCard
       mapSrc="brazil-map.js"
       ctaHref="#credenciamento"
       especialistaHref="#contato"
     />
   Exporta: window.ConviteCard
   ============================================================ */

const { useEffect, useRef } = React;

/* ── CSS escopado ─────────────────────────────────────────── */
const _CONVITE_CSS = `
  .ev-convite {
    position: relative;
    width: min(1248px, 100%);
    min-height: 460px;
    padding: 0 80px;
    border-radius: 28px;
    overflow: hidden;
    background: radial-gradient(120% 130% at 88% 8%,
      #103a6e 0%, #0c2a52 38%, #0a2540 70%, #071a30 100%);
    box-shadow: var(--shadow-lg, 0 20px 60px rgba(10,37,64,0.38));
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(360px,420px);
    column-gap: 56px;
    align-items: center;
    isolation: isolate;
  }
  .ev-convite::before {
    content: "";
    position: absolute; inset: 0;
    background:
      radial-gradient(38% 56% at 4% 96%, rgba(88,62,150,0.20), transparent 70%),
      radial-gradient(40% 44% at 98% 2%, rgba(0,163,224,0.16), transparent 70%);
    pointer-events: none; z-index: 0;
  }

  /* Texto */
  .ev-convite__copy {
    position: relative; z-index: 2;
    display: flex; flex-direction: column;
  }
  .ev-convite__title {
    color: #fff;
    font-family: var(--font-display, 'Inter Tight', sans-serif);
    font-size: clamp(32px, 2.9vw, 44px);
    font-weight: 600; line-height: 1.08; letter-spacing: -0.025em;
    text-wrap: balance;
    margin: 0 0 18px;
  }
  .ev-convite__lead {
    color: rgba(255,255,255,0.74);
    font-family: var(--font-body, 'Inter Tight', sans-serif);
    font-size: clamp(15px, 1.05vw, 16.5px);
    line-height: 1.6; max-width: 46ch;
    margin: 0 0 28px;
  }
  .ev-convite__actions { display: flex; flex-wrap: wrap; gap: 14px; }

  /* Botões */
  .ev-convite__btn {
    font-family: var(--font-body, 'Inter Tight', sans-serif);
    font-size: 15px; font-weight: 600;
    border-radius: var(--radius-pill, 999px);
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 10px;
    white-space: nowrap; text-decoration: none;
    transition: background 200ms ease, border-color 200ms ease, transform 140ms ease;
    border: 1px solid transparent;
  }
  .ev-convite__btn--primary {
    background: #fff; color: var(--blue-900, #0a2540);
    padding: 13px 14px 13px 22px;
  }
  .ev-convite__btn--primary:hover { background: rgba(255,255,255,0.9); }
  .ev-convite__btn--primary .ev-convite__btn-ico { background: var(--indigo-600, #444ca2); color: #fff; }
  .ev-convite__btn--primary:active { transform: translateY(1px); }
  .ev-convite__btn-ico {
    width: 26px; height: 26px; border-radius: 50%;
    background: rgba(255,255,255,0.16);
    display: grid; place-items: center;
  }
  .ev-convite__btn-ico svg {
    width: 15px; height: 15px;
    stroke: currentColor; stroke-width: 2.2; fill: none;
  }
  .ev-convite__btn--ghost {
    background: rgba(255,255,255,0.04); color: #fff;
    border-color: rgba(255,255,255,0.22);
    padding: 13px 22px;
  }
  .ev-convite__btn--ghost:hover {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.40);
  }

  /* Mapa */
  .ev-convite__map {
    position: relative; z-index: 1;
    align-self: stretch;
    width: 420px;
  }
  .ev-convite__canvas {
    display: block; width: 100%; height: 100%;
    position: absolute; inset: 0;
  }

  /* Mobile */
  @media (max-width: 820px) {
    .ev-convite {
      width: 100%; height: auto;
      padding: 24px 20px 26px;
      border-radius: 24px;
      display: flex; flex-direction: column;
      align-items: stretch; column-gap: 0;
    }
    .ev-convite__copy { display: contents; }
    .ev-convite__title  { order: 1; margin-bottom: 0; font-size: clamp(25px,6.8vw,32px); }
    .ev-convite__map    { order: 2; width: 100%; height: clamp(260px,74vw,330px); margin: 2px 0 0; }
    .ev-convite__lead   { order: 3; margin: 2px 0 16px; max-width: none; }
    .ev-convite__actions { order: 4; flex-direction: column; gap: 10px; }
    .ev-convite__actions .ev-convite__btn {
      width: 100%; justify-content: center; padding-left: 0; padding-right: 0;
    }
    .ev-convite__btn--primary {
      background: #fff; color: var(--blue-900, #0a2540); padding: 13px 0;
    }
    .ev-convite__btn--primary:hover { background: rgba(255,255,255,0.92); }
    .ev-convite__btn-ico { display: none; }
    .ev-convite__btn--ghost { padding: 12px 0; border-color: rgba(255,255,255,0.32); }
  }
`;

/* Injeta o CSS uma única vez no <head> */
let _conviteInjected = false;
function _injectConviteCSS() {
  if (_conviteInjected) return;
  _conviteInjected = true;
  const el = document.createElement('style');
  el.id = 'ev-convite-styles';
  el.textContent = _CONVITE_CSS;
  document.head.appendChild(el);
}

/* ── Componente ───────────────────────────────────────────── */
function ConviteCard({
  mapSrc         = 'brazil-map.js',
  ctaHref        = '#',
  especialistaHref = '#',
  title          = 'Seja um dos médicos fundadores da rede na sua região.',
  lead           = 'A rede está se formando cidade a cidade. Entre agora: acesse várias operadoras com um só credenciamento e ajude a liderar essa mudança na sua região.',
  ctaLabel       = 'Quero me credenciar',
  especialistaLabel = 'Fale com um especialista',
}) {
  const canvasRef = useRef(null);

  _injectConviteCSS();

  useEffect(() => {
    function initMap() {
      if (!canvasRef.current || !window.BrazilMap) return;
      window.BrazilMap.init(canvasRef.current, {
        density: 1.4, frequency: 1, palette: 'evidia', labels: true
      });
    }

    if (window.BrazilMap) {
      initMap();
    } else {
      /* Carrega o script dinamicamente se ainda não estiver na página */
      const s = document.createElement('script');
      s.src = mapSrc;
      s.onload = initMap;
      document.head.appendChild(s);
    }
  }, [mapSrc]);

  return (
    <section className="ev-convite" data-screen-label="Convite Rede Brasil">
      <div className="ev-convite__copy">
        <h2 className="ev-convite__title">{title}</h2>
        <p className="ev-convite__lead">{lead}</p>
        <div className="ev-convite__actions">
          <a className="ev-convite__btn ev-convite__btn--primary" href={ctaHref} target={/^https?:/.test(ctaHref) ? "_blank" : undefined} rel={/^https?:/.test(ctaHref) ? "noopener noreferrer" : undefined}>
            {ctaLabel}
            <span className="ev-convite__btn-ico">
              <svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>
            </span>
          </a>
          <a className="ev-convite__btn ev-convite__btn--ghost" href={especialistaHref}>
            {especialistaLabel}
          </a>
        </div>
      </div>
      <div className="ev-convite__map">
        <canvas ref={canvasRef} className="ev-convite__canvas"></canvas>
      </div>
    </section>
  );
}

Object.assign(window, { ConviteCard });
