/* global React */
// Global "Agendar llamada" modal — opens when window dispatches "bobax:book-call"
// or any element with [data-book-call] is clicked. Submits to webhook.

const BOBAX_WEBHOOK = 'https://webhooks.vadai.com.mx/in/wh_fc88dedbe3cf4142ac73a715a2496091';
const BOBAX_WHATSAPP = '5215588972297'; // +52 1 55 8897 2297
window.BOBAX_WHATSAPP = BOBAX_WHATSAPP;
window.BOBAX_WHATSAPP_URL = `https://wa.me/${BOBAX_WHATSAPP}`;

// LATAM + España al inicio; resto alfabético en español. ISO-2 como id único
// porque varios países comparten lada (US/CA/PR/RD/etc. todos +1).
const COUNTRY_CODES = [
  { code:'MX', name:'México',          dial:'+52',  flag:'🇲🇽' },
  { code:'AR', name:'Argentina',       dial:'+54',  flag:'🇦🇷' },
  { code:'BO', name:'Bolivia',         dial:'+591', flag:'🇧🇴' },
  { code:'BR', name:'Brasil',          dial:'+55',  flag:'🇧🇷' },
  { code:'CL', name:'Chile',           dial:'+56',  flag:'🇨🇱' },
  { code:'CO', name:'Colombia',        dial:'+57',  flag:'🇨🇴' },
  { code:'CR', name:'Costa Rica',      dial:'+506', flag:'🇨🇷' },
  { code:'CU', name:'Cuba',            dial:'+53',  flag:'🇨🇺' },
  { code:'DO', name:'República Dominicana', dial:'+1', flag:'🇩🇴' },
  { code:'EC', name:'Ecuador',         dial:'+593', flag:'🇪🇨' },
  { code:'SV', name:'El Salvador',     dial:'+503', flag:'🇸🇻' },
  { code:'ES', name:'España',          dial:'+34',  flag:'🇪🇸' },
  { code:'US', name:'Estados Unidos',  dial:'+1',   flag:'🇺🇸' },
  { code:'GT', name:'Guatemala',       dial:'+502', flag:'🇬🇹' },
  { code:'HN', name:'Honduras',        dial:'+504', flag:'🇭🇳' },
  { code:'NI', name:'Nicaragua',       dial:'+505', flag:'🇳🇮' },
  { code:'PA', name:'Panamá',          dial:'+507', flag:'🇵🇦' },
  { code:'PY', name:'Paraguay',        dial:'+595', flag:'🇵🇾' },
  { code:'PE', name:'Perú',            dial:'+51',  flag:'🇵🇪' },
  { code:'PR', name:'Puerto Rico',     dial:'+1',   flag:'🇵🇷' },
  { code:'UY', name:'Uruguay',         dial:'+598', flag:'🇺🇾' },
  { code:'VE', name:'Venezuela',       dial:'+58',  flag:'🇻🇪' },
  // ── Resto del mundo (alfabético en español) ─────────────────────────
  { code:'AF', name:'Afganistán',      dial:'+93',  flag:'🇦🇫' },
  { code:'AL', name:'Albania',         dial:'+355', flag:'🇦🇱' },
  { code:'DE', name:'Alemania',        dial:'+49',  flag:'🇩🇪' },
  { code:'AD', name:'Andorra',         dial:'+376', flag:'🇦🇩' },
  { code:'AO', name:'Angola',          dial:'+244', flag:'🇦🇴' },
  { code:'AI', name:'Anguila',         dial:'+1',   flag:'🇦🇮' },
  { code:'AG', name:'Antigua y Barbuda', dial:'+1', flag:'🇦🇬' },
  { code:'SA', name:'Arabia Saudita',  dial:'+966', flag:'🇸🇦' },
  { code:'DZ', name:'Argelia',         dial:'+213', flag:'🇩🇿' },
  { code:'AM', name:'Armenia',         dial:'+374', flag:'🇦🇲' },
  { code:'AW', name:'Aruba',           dial:'+297', flag:'🇦🇼' },
  { code:'AU', name:'Australia',       dial:'+61',  flag:'🇦🇺' },
  { code:'AT', name:'Austria',         dial:'+43',  flag:'🇦🇹' },
  { code:'AZ', name:'Azerbaiyán',      dial:'+994', flag:'🇦🇿' },
  { code:'BS', name:'Bahamas',         dial:'+1',   flag:'🇧🇸' },
  { code:'BD', name:'Bangladés',       dial:'+880', flag:'🇧🇩' },
  { code:'BB', name:'Barbados',        dial:'+1',   flag:'🇧🇧' },
  { code:'BH', name:'Baréin',          dial:'+973', flag:'🇧🇭' },
  { code:'BE', name:'Bélgica',         dial:'+32',  flag:'🇧🇪' },
  { code:'BZ', name:'Belice',          dial:'+501', flag:'🇧🇿' },
  { code:'BJ', name:'Benín',           dial:'+229', flag:'🇧🇯' },
  { code:'BM', name:'Bermudas',        dial:'+1',   flag:'🇧🇲' },
  { code:'BY', name:'Bielorrusia',     dial:'+375', flag:'🇧🇾' },
  { code:'MM', name:'Birmania (Myanmar)', dial:'+95', flag:'🇲🇲' },
  { code:'BA', name:'Bosnia y Herzegovina', dial:'+387', flag:'🇧🇦' },
  { code:'BW', name:'Botsuana',        dial:'+267', flag:'🇧🇼' },
  { code:'BN', name:'Brunéi',          dial:'+673', flag:'🇧🇳' },
  { code:'BG', name:'Bulgaria',        dial:'+359', flag:'🇧🇬' },
  { code:'BF', name:'Burkina Faso',    dial:'+226', flag:'🇧🇫' },
  { code:'BI', name:'Burundi',         dial:'+257', flag:'🇧🇮' },
  { code:'BT', name:'Bután',           dial:'+975', flag:'🇧🇹' },
  { code:'CV', name:'Cabo Verde',      dial:'+238', flag:'🇨🇻' },
  { code:'KH', name:'Camboya',         dial:'+855', flag:'🇰🇭' },
  { code:'CM', name:'Camerún',         dial:'+237', flag:'🇨🇲' },
  { code:'CA', name:'Canadá',          dial:'+1',   flag:'🇨🇦' },
  { code:'QA', name:'Catar',           dial:'+974', flag:'🇶🇦' },
  { code:'TD', name:'Chad',            dial:'+235', flag:'🇹🇩' },
  { code:'CN', name:'China',           dial:'+86',  flag:'🇨🇳' },
  { code:'CY', name:'Chipre',          dial:'+357', flag:'🇨🇾' },
  { code:'KM', name:'Comoras',         dial:'+269', flag:'🇰🇲' },
  { code:'KP', name:'Corea del Norte', dial:'+850', flag:'🇰🇵' },
  { code:'KR', name:'Corea del Sur',   dial:'+82',  flag:'🇰🇷' },
  { code:'CI', name:'Costa de Marfil', dial:'+225', flag:'🇨🇮' },
  { code:'HR', name:'Croacia',         dial:'+385', flag:'🇭🇷' },
  { code:'CW', name:'Curazao',         dial:'+599', flag:'🇨🇼' },
  { code:'DK', name:'Dinamarca',       dial:'+45',  flag:'🇩🇰' },
  { code:'DM', name:'Dominica',        dial:'+1',   flag:'🇩🇲' },
  { code:'EG', name:'Egipto',          dial:'+20',  flag:'🇪🇬' },
  { code:'AE', name:'Emiratos Árabes Unidos', dial:'+971', flag:'🇦🇪' },
  { code:'ER', name:'Eritrea',         dial:'+291', flag:'🇪🇷' },
  { code:'SK', name:'Eslovaquia',      dial:'+421', flag:'🇸🇰' },
  { code:'SI', name:'Eslovenia',       dial:'+386', flag:'🇸🇮' },
  { code:'EE', name:'Estonia',         dial:'+372', flag:'🇪🇪' },
  { code:'SZ', name:'Esuatini',        dial:'+268', flag:'🇸🇿' },
  { code:'ET', name:'Etiopía',         dial:'+251', flag:'🇪🇹' },
  { code:'PH', name:'Filipinas',       dial:'+63',  flag:'🇵🇭' },
  { code:'FI', name:'Finlandia',       dial:'+358', flag:'🇫🇮' },
  { code:'FJ', name:'Fiyi',            dial:'+679', flag:'🇫🇯' },
  { code:'FR', name:'Francia',         dial:'+33',  flag:'🇫🇷' },
  { code:'GA', name:'Gabón',           dial:'+241', flag:'🇬🇦' },
  { code:'GM', name:'Gambia',          dial:'+220', flag:'🇬🇲' },
  { code:'GE', name:'Georgia',         dial:'+995', flag:'🇬🇪' },
  { code:'GH', name:'Ghana',           dial:'+233', flag:'🇬🇭' },
  { code:'GI', name:'Gibraltar',       dial:'+350', flag:'🇬🇮' },
  { code:'GD', name:'Granada',         dial:'+1',   flag:'🇬🇩' },
  { code:'GR', name:'Grecia',          dial:'+30',  flag:'🇬🇷' },
  { code:'GL', name:'Groenlandia',     dial:'+299', flag:'🇬🇱' },
  { code:'GP', name:'Guadalupe',       dial:'+590', flag:'🇬🇵' },
  { code:'GU', name:'Guam',            dial:'+1',   flag:'🇬🇺' },
  { code:'GF', name:'Guayana Francesa', dial:'+594', flag:'🇬🇫' },
  { code:'GN', name:'Guinea',          dial:'+224', flag:'🇬🇳' },
  { code:'GQ', name:'Guinea Ecuatorial', dial:'+240', flag:'🇬🇶' },
  { code:'GW', name:'Guinea-Bisáu',    dial:'+245', flag:'🇬🇼' },
  { code:'GY', name:'Guyana',          dial:'+592', flag:'🇬🇾' },
  { code:'HT', name:'Haití',           dial:'+509', flag:'🇭🇹' },
  { code:'HK', name:'Hong Kong',       dial:'+852', flag:'🇭🇰' },
  { code:'HU', name:'Hungría',         dial:'+36',  flag:'🇭🇺' },
  { code:'IN', name:'India',           dial:'+91',  flag:'🇮🇳' },
  { code:'ID', name:'Indonesia',       dial:'+62',  flag:'🇮🇩' },
  { code:'IQ', name:'Irak',            dial:'+964', flag:'🇮🇶' },
  { code:'IR', name:'Irán',            dial:'+98',  flag:'🇮🇷' },
  { code:'IE', name:'Irlanda',         dial:'+353', flag:'🇮🇪' },
  { code:'IS', name:'Islandia',        dial:'+354', flag:'🇮🇸' },
  { code:'KY', name:'Islas Caimán',    dial:'+1',   flag:'🇰🇾' },
  { code:'CK', name:'Islas Cook',      dial:'+682', flag:'🇨🇰' },
  { code:'FO', name:'Islas Feroe',     dial:'+298', flag:'🇫🇴' },
  { code:'FK', name:'Islas Malvinas',  dial:'+500', flag:'🇫🇰' },
  { code:'MH', name:'Islas Marshall',  dial:'+692', flag:'🇲🇭' },
  { code:'SB', name:'Islas Salomón',   dial:'+677', flag:'🇸🇧' },
  { code:'VG', name:'Islas Vírgenes Británicas', dial:'+1', flag:'🇻🇬' },
  { code:'VI', name:'Islas Vírgenes (EE. UU.)', dial:'+1', flag:'🇻🇮' },
  { code:'IL', name:'Israel',          dial:'+972', flag:'🇮🇱' },
  { code:'IT', name:'Italia',          dial:'+39',  flag:'🇮🇹' },
  { code:'JM', name:'Jamaica',         dial:'+1',   flag:'🇯🇲' },
  { code:'JP', name:'Japón',           dial:'+81',  flag:'🇯🇵' },
  { code:'JO', name:'Jordania',        dial:'+962', flag:'🇯🇴' },
  { code:'KZ', name:'Kazajistán',      dial:'+7',   flag:'🇰🇿' },
  { code:'KE', name:'Kenia',           dial:'+254', flag:'🇰🇪' },
  { code:'KG', name:'Kirguistán',      dial:'+996', flag:'🇰🇬' },
  { code:'KI', name:'Kiribati',        dial:'+686', flag:'🇰🇮' },
  { code:'XK', name:'Kosovo',          dial:'+383', flag:'🇽🇰' },
  { code:'KW', name:'Kuwait',          dial:'+965', flag:'🇰🇼' },
  { code:'LA', name:'Laos',            dial:'+856', flag:'🇱🇦' },
  { code:'LS', name:'Lesoto',          dial:'+266', flag:'🇱🇸' },
  { code:'LV', name:'Letonia',         dial:'+371', flag:'🇱🇻' },
  { code:'LB', name:'Líbano',          dial:'+961', flag:'🇱🇧' },
  { code:'LR', name:'Liberia',         dial:'+231', flag:'🇱🇷' },
  { code:'LY', name:'Libia',           dial:'+218', flag:'🇱🇾' },
  { code:'LI', name:'Liechtenstein',   dial:'+423', flag:'🇱🇮' },
  { code:'LT', name:'Lituania',        dial:'+370', flag:'🇱🇹' },
  { code:'LU', name:'Luxemburgo',      dial:'+352', flag:'🇱🇺' },
  { code:'MO', name:'Macao',           dial:'+853', flag:'🇲🇴' },
  { code:'MK', name:'Macedonia del Norte', dial:'+389', flag:'🇲🇰' },
  { code:'MG', name:'Madagascar',      dial:'+261', flag:'🇲🇬' },
  { code:'MY', name:'Malasia',         dial:'+60',  flag:'🇲🇾' },
  { code:'MW', name:'Malaui',          dial:'+265', flag:'🇲🇼' },
  { code:'MV', name:'Maldivas',        dial:'+960', flag:'🇲🇻' },
  { code:'ML', name:'Malí',            dial:'+223', flag:'🇲🇱' },
  { code:'MT', name:'Malta',           dial:'+356', flag:'🇲🇹' },
  { code:'MA', name:'Marruecos',       dial:'+212', flag:'🇲🇦' },
  { code:'MQ', name:'Martinica',       dial:'+596', flag:'🇲🇶' },
  { code:'MU', name:'Mauricio',        dial:'+230', flag:'🇲🇺' },
  { code:'MR', name:'Mauritania',      dial:'+222', flag:'🇲🇷' },
  { code:'YT', name:'Mayotte',         dial:'+262', flag:'🇾🇹' },
  { code:'FM', name:'Micronesia',      dial:'+691', flag:'🇫🇲' },
  { code:'MD', name:'Moldavia',        dial:'+373', flag:'🇲🇩' },
  { code:'MC', name:'Mónaco',          dial:'+377', flag:'🇲🇨' },
  { code:'MN', name:'Mongolia',        dial:'+976', flag:'🇲🇳' },
  { code:'ME', name:'Montenegro',      dial:'+382', flag:'🇲🇪' },
  { code:'MS', name:'Montserrat',      dial:'+1',   flag:'🇲🇸' },
  { code:'MZ', name:'Mozambique',      dial:'+258', flag:'🇲🇿' },
  { code:'NA', name:'Namibia',         dial:'+264', flag:'🇳🇦' },
  { code:'NR', name:'Nauru',           dial:'+674', flag:'🇳🇷' },
  { code:'NP', name:'Nepal',           dial:'+977', flag:'🇳🇵' },
  { code:'NE', name:'Níger',           dial:'+227', flag:'🇳🇪' },
  { code:'NG', name:'Nigeria',         dial:'+234', flag:'🇳🇬' },
  { code:'NU', name:'Niue',            dial:'+683', flag:'🇳🇺' },
  { code:'NO', name:'Noruega',         dial:'+47',  flag:'🇳🇴' },
  { code:'NC', name:'Nueva Caledonia', dial:'+687', flag:'🇳🇨' },
  { code:'NZ', name:'Nueva Zelanda',   dial:'+64',  flag:'🇳🇿' },
  { code:'OM', name:'Omán',            dial:'+968', flag:'🇴🇲' },
  { code:'NL', name:'Países Bajos',    dial:'+31',  flag:'🇳🇱' },
  { code:'PK', name:'Pakistán',        dial:'+92',  flag:'🇵🇰' },
  { code:'PW', name:'Palaos',          dial:'+680', flag:'🇵🇼' },
  { code:'PS', name:'Palestina',       dial:'+970', flag:'🇵🇸' },
  { code:'PG', name:'Papúa Nueva Guinea', dial:'+675', flag:'🇵🇬' },
  { code:'PF', name:'Polinesia Francesa', dial:'+689', flag:'🇵🇫' },
  { code:'PL', name:'Polonia',         dial:'+48',  flag:'🇵🇱' },
  { code:'PT', name:'Portugal',        dial:'+351', flag:'🇵🇹' },
  { code:'GB', name:'Reino Unido',     dial:'+44',  flag:'🇬🇧' },
  { code:'CF', name:'República Centroafricana', dial:'+236', flag:'🇨🇫' },
  { code:'CZ', name:'República Checa', dial:'+420', flag:'🇨🇿' },
  { code:'CG', name:'República del Congo', dial:'+242', flag:'🇨🇬' },
  { code:'CD', name:'República Democrática del Congo', dial:'+243', flag:'🇨🇩' },
  { code:'RE', name:'Reunión',         dial:'+262', flag:'🇷🇪' },
  { code:'RW', name:'Ruanda',          dial:'+250', flag:'🇷🇼' },
  { code:'RO', name:'Rumanía',         dial:'+40',  flag:'🇷🇴' },
  { code:'RU', name:'Rusia',           dial:'+7',   flag:'🇷🇺' },
  { code:'EH', name:'Sahara Occidental', dial:'+212', flag:'🇪🇭' },
  { code:'WS', name:'Samoa',           dial:'+685', flag:'🇼🇸' },
  { code:'AS', name:'Samoa Americana', dial:'+1',   flag:'🇦🇸' },
  { code:'BL', name:'San Bartolomé',   dial:'+590', flag:'🇧🇱' },
  { code:'KN', name:'San Cristóbal y Nieves', dial:'+1', flag:'🇰🇳' },
  { code:'SM', name:'San Marino',      dial:'+378', flag:'🇸🇲' },
  { code:'MF', name:'San Martín (FR)', dial:'+590', flag:'🇲🇫' },
  { code:'PM', name:'San Pedro y Miquelón', dial:'+508', flag:'🇵🇲' },
  { code:'VC', name:'San Vicente y las Granadinas', dial:'+1', flag:'🇻🇨' },
  { code:'SH', name:'Santa Helena',    dial:'+290', flag:'🇸🇭' },
  { code:'LC', name:'Santa Lucía',     dial:'+1',   flag:'🇱🇨' },
  { code:'ST', name:'Santo Tomé y Príncipe', dial:'+239', flag:'🇸🇹' },
  { code:'SN', name:'Senegal',         dial:'+221', flag:'🇸🇳' },
  { code:'RS', name:'Serbia',          dial:'+381', flag:'🇷🇸' },
  { code:'SC', name:'Seychelles',      dial:'+248', flag:'🇸🇨' },
  { code:'SL', name:'Sierra Leona',    dial:'+232', flag:'🇸🇱' },
  { code:'SG', name:'Singapur',        dial:'+65',  flag:'🇸🇬' },
  { code:'SX', name:'Sint Maarten',    dial:'+1',   flag:'🇸🇽' },
  { code:'SY', name:'Siria',           dial:'+963', flag:'🇸🇾' },
  { code:'SO', name:'Somalia',         dial:'+252', flag:'🇸🇴' },
  { code:'LK', name:'Sri Lanka',       dial:'+94',  flag:'🇱🇰' },
  { code:'ZA', name:'Sudáfrica',       dial:'+27',  flag:'🇿🇦' },
  { code:'SD', name:'Sudán',           dial:'+249', flag:'🇸🇩' },
  { code:'SS', name:'Sudán del Sur',   dial:'+211', flag:'🇸🇸' },
  { code:'SE', name:'Suecia',          dial:'+46',  flag:'🇸🇪' },
  { code:'CH', name:'Suiza',           dial:'+41',  flag:'🇨🇭' },
  { code:'SR', name:'Surinam',         dial:'+597', flag:'🇸🇷' },
  { code:'TH', name:'Tailandia',       dial:'+66',  flag:'🇹🇭' },
  { code:'TW', name:'Taiwán',          dial:'+886', flag:'🇹🇼' },
  { code:'TZ', name:'Tanzania',        dial:'+255', flag:'🇹🇿' },
  { code:'TJ', name:'Tayikistán',      dial:'+992', flag:'🇹🇯' },
  { code:'TL', name:'Timor Oriental',  dial:'+670', flag:'🇹🇱' },
  { code:'TG', name:'Togo',            dial:'+228', flag:'🇹🇬' },
  { code:'TK', name:'Tokelau',         dial:'+690', flag:'🇹🇰' },
  { code:'TO', name:'Tonga',           dial:'+676', flag:'🇹🇴' },
  { code:'TT', name:'Trinidad y Tobago', dial:'+1', flag:'🇹🇹' },
  { code:'TN', name:'Túnez',           dial:'+216', flag:'🇹🇳' },
  { code:'TC', name:'Turcas y Caicos', dial:'+1',   flag:'🇹🇨' },
  { code:'TM', name:'Turkmenistán',    dial:'+993', flag:'🇹🇲' },
  { code:'TR', name:'Turquía',         dial:'+90',  flag:'🇹🇷' },
  { code:'TV', name:'Tuvalu',          dial:'+688', flag:'🇹🇻' },
  { code:'UA', name:'Ucrania',         dial:'+380', flag:'🇺🇦' },
  { code:'UG', name:'Uganda',          dial:'+256', flag:'🇺🇬' },
  { code:'UZ', name:'Uzbekistán',      dial:'+998', flag:'🇺🇿' },
  { code:'VU', name:'Vanuatu',         dial:'+678', flag:'🇻🇺' },
  { code:'VA', name:'Vaticano',        dial:'+39',  flag:'🇻🇦' },
  { code:'VN', name:'Vietnam',         dial:'+84',  flag:'🇻🇳' },
  { code:'WF', name:'Wallis y Futuna', dial:'+681', flag:'🇼🇫' },
  { code:'YE', name:'Yemen',           dial:'+967', flag:'🇾🇪' },
  { code:'DJ', name:'Yibuti',          dial:'+253', flag:'🇩🇯' },
  { code:'ZM', name:'Zambia',          dial:'+260', flag:'🇿🇲' },
  { code:'ZW', name:'Zimbabue',        dial:'+263', flag:'🇿🇼' },
];

function BookCall() {
  const [open, setOpen] = React.useState(false);
  const [submitting, setSubmitting] = React.useState(false);
  const [submitted, setSubmitted] = React.useState(false);
  const [error, setError] = React.useState('');
  const [form, setForm] = React.useState({ name:'', country:'MX', phone:'', email:'', role:'lider' });
  const country = COUNTRY_CODES.find(c => c.code === form.country) || COUNTRY_CODES[0];
  const Icons = window.Icons || {};

  // Open via custom event + delegated click on [data-book-call]
  React.useEffect(() => {
    function openModal() { setOpen(true); setSubmitted(false); setError(''); }
    function onClick(e) {
      const el = e.target.closest('[data-book-call]');
      if (el) {
        e.preventDefault();
        openModal();
      }
    }
    window.addEventListener('bobax:book-call', openModal);
    document.addEventListener('click', onClick);
    return () => {
      window.removeEventListener('bobax:book-call', openModal);
      document.removeEventListener('click', onClick);
    };
  }, []);

  // Lock scroll when open
  React.useEffect(() => {
    if (open) {
      const prev = document.body.style.overflow;
      document.body.style.overflow = 'hidden';
      return () => { document.body.style.overflow = prev; };
    }
  }, [open]);

  // Close on Escape
  React.useEffect(() => {
    function onKey(e) { if (e.key === 'Escape') setOpen(false); }
    if (open) window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open]);

  async function submit(e) {
    e.preventDefault();
    setError('');
    if (!form.name.trim()) return setError('Falta tu nombre.');
    if (form.phone.replace(/\D/g,'').length < 7) return setError('Pon tu número de WhatsApp.');
    if (!/.+@.+\..+/.test(form.email)) return setError('Pon un correo válido.');
    setSubmitting(true);

    const phoneDigits = form.phone.replace(/\D/g,'');
    const payload = {
      ...form,
      dialCode: country.dial,
      countryName: country.name,
      phoneFull: `${country.dial} ${form.phone.trim()}`,
      phoneE164: `${country.dial}${phoneDigits}`.replace(/\s+/g,''),
      source: 'bobax-landing',
      url: window.location.href,
      userAgent: navigator.userAgent,
      timestamp: new Date().toISOString(),
    };
    const body = JSON.stringify(payload);

    // Body goes as text/plain to skip the CORS preflight that browsers trigger
    // for application/json. The server still receives the raw JSON string and
    // can parse it; this is the standard pattern for cross-origin webhooks.
    let sent = false;
    try {
      if (navigator.sendBeacon) {
        const blob = new Blob([body], { type: 'text/plain;charset=UTF-8' });
        sent = navigator.sendBeacon(BOBAX_WEBHOOK, blob);
      }
    } catch (_) { /* fall through */ }

    if (!sent) {
      try {
        await fetch(BOBAX_WEBHOOK, {
          method: 'POST',
          mode: 'no-cors',
          body, // no Content-Type header → browser uses text/plain
          keepalive: true,
        });
      } catch (_) { /* opaque response — assume delivered */ }
    }

    setSubmitting(false);
    setSubmitted(true);
  }

  if (!open) return null;

  return (
    <div
      role="dialog" aria-modal="true"
      onClick={(e) => { if (e.target === e.currentTarget) setOpen(false); }}
      style={{
        position:'fixed', inset:0, zIndex:1000,
        display:'flex', alignItems:'center', justifyContent:'center',
        padding:'24px',
        background:'rgba(6,7,13,0.78)', backdropFilter:'blur(8px)',
        animation:'bc-fade .2s ease',
      }}
    >
      <div style={{
        width:'100%', maxWidth: 480, position:'relative',
        background:'linear-gradient(180deg, #14112b, #0B0816)',
        border:'1px solid rgba(124,58,237,0.25)',
        borderRadius: 20, padding: 32, color:'white',
        boxShadow:'0 60px 120px -30px rgba(11,8,22,0.6), 0 0 60px 0 rgba(124,58,237,0.2)',
        animation:'bc-pop .25s cubic-bezier(.2,.7,.2,1)',
        maxHeight:'90vh', overflow:'auto',
      }}>
        <button onClick={() => setOpen(false)} aria-label="Cerrar" style={{
          position:'absolute', top:14, right:14,
          width:34, height:34, borderRadius:999,
          background:'rgba(255,255,255,0.06)', color:'rgba(255,255,255,0.7)',
          border:'1px solid rgba(255,255,255,0.1)',
          display:'flex', alignItems:'center', justifyContent:'center',
        }}>✕</button>

        {!submitted ? (
          <>
            <div style={{fontFamily:'var(--f-mono)', fontSize:11, color:'var(--brand-300)', letterSpacing:'0.14em', textTransform:'uppercase', fontWeight:600}}>
              Agendar llamada
            </div>
            <h3 className="display" style={{fontSize:28, margin:'8px 0 0', letterSpacing:'-0.02em', lineHeight:1.1}}>
              Cuéntanos un poco de ti.
            </h3>
            <p style={{fontSize:14, color:'rgba(255,255,255,0.6)', marginTop:8, lineHeight:1.5}}>
              Te contactamos en menos de 24 horas para agendar una llamada de 20 minutos.
            </p>

            <form onSubmit={submit} style={{marginTop:22, display:'flex', flexDirection:'column', gap:14}}>
              <Field label="Nombre completo" value={form.name} onChange={(v) => setForm(f => ({...f, name:v}))} placeholder="Paula González" />

              <div>
                <label style={lbl}>WhatsApp</label>
                <div style={{display:'flex', gap:8, marginTop:7}}>
                  <select
                    value={form.country}
                    onChange={(e) => setForm(f => ({...f, country: e.target.value}))}
                    aria-label="Lada del país"
                    style={{
                      flex:'0 0 auto', maxWidth: 130,
                      background:'rgba(0,0,0,0.35)', border:'1px solid rgba(255,255,255,0.12)',
                      borderRadius:10, padding:'12px 10px', color:'white',
                      fontFamily:'var(--f-body)', fontSize:14, outline:'none', cursor:'pointer',
                    }}
                  >
                    {COUNTRY_CODES.map(c => (
                      <option key={c.code} value={c.code} style={{background:'#14112b', color:'white'}}>
                        {c.dial} · {c.name}
                      </option>
                    ))}
                  </select>
                  <input
                    type="tel"
                    value={form.phone}
                    onChange={(e) => setForm(f => ({...f, phone: e.target.value}))}
                    placeholder="442 555 0192"
                    aria-label="Número de WhatsApp"
                    style={{
                      flex:1, minWidth:0,
                      background:'rgba(0,0,0,0.35)', border:'1px solid rgba(255,255,255,0.12)',
                      borderRadius:10, padding:'12px 14px', color:'white',
                      fontFamily:'var(--f-body)', fontSize:15, outline:'none',
                      transition:'border-color .15s ease',
                    }}
                    onFocus={(e) => e.target.style.borderColor='var(--brand-400)'}
                    onBlur={(e) => e.target.style.borderColor='rgba(255,255,255,0.12)'}
                  />
                </div>
              </div>

              <Field label="Correo electrónico" value={form.email} onChange={(v) => setForm(f => ({...f, email:v}))} placeholder="paula@correo.com" type="email" />

              <div>
                <label style={lbl}>¿Cómo participas en tu red?</label>
                <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:8, marginTop:8}}>
                  {[
                    ['lider', 'Soy líder'],
                    ['afiliado', 'Soy vendedor'],
                  ].map(([v, l]) => (
                    <button type="button" key={v}
                      onClick={() => setForm(f => ({...f, role:v}))}
                      style={{
                        padding:'10px 12px', borderRadius:10,
                        border: form.role === v ? '1px solid var(--brand-400)' : '1px solid rgba(255,255,255,0.12)',
                        background: form.role === v ? 'rgba(124,58,237,0.2)' : 'rgba(255,255,255,0.03)',
                        color: form.role === v ? 'white' : 'rgba(255,255,255,0.7)',
                        fontSize:13, fontWeight:500, cursor:'pointer',
                      }}
                    >{l}</button>
                  ))}
                </div>
              </div>

              {error && (
                <div style={{padding:'10px 12px', background:'rgba(225,29,116,0.12)', border:'1px solid rgba(225,29,116,0.3)', color:'#F587B2', borderRadius:10, fontSize:13}}>
                  {error}
                </div>
              )}

              <button type="submit" disabled={submitting} style={{
                marginTop:6, padding:'14px 22px', borderRadius:999,
                background: submitting ? 'rgba(124,58,237,0.5)' : 'var(--brand-500)',
                color:'white', fontWeight:600, fontSize:15,
                cursor: submitting ? 'wait' : 'pointer',
                display:'flex', alignItems:'center', justifyContent:'center', gap:8,
                boxShadow:'0 16px 40px -14px var(--brand-500)',
              }}>
                {submitting ? 'Enviando…' : <>Agendar mi llamada {Icons.ArrowRight && <Icons.ArrowRight size={16}/>}</>}
              </button>

              <p style={{fontSize:11, color:'rgba(255,255,255,0.45)', textAlign:'center', marginTop:4, fontFamily:'var(--f-mono)'}}>
                Tus datos solo se usan para contactarte. No spam.
              </p>
            </form>
          </>
        ) : (
          <div style={{textAlign:'center', padding:'12px 0'}}>
            <div style={{width:72, height:72, margin:'0 auto', borderRadius:999, background:'rgba(16,185,129,0.18)', border:'2px solid rgba(52,210,155,0.4)', color:'var(--emerald-400)', display:'flex', alignItems:'center', justifyContent:'center', animation:'bc-check .5s cubic-bezier(.2,.7,.2,1)'}}>
              {Icons.Check && <Icons.Check size={32} stroke={2.6} />}
            </div>
            <h3 className="display" style={{fontSize:26, margin:'18px 0 0', letterSpacing:'-0.02em'}}>
              ¡Listo, {(form.name || '').split(' ')[0]}!
            </h3>
            <p style={{fontSize:15, color:'rgba(255,255,255,0.7)', marginTop:10, lineHeight:1.5}}>
              Recibimos tus datos. Te contactamos por WhatsApp en menos de 24 horas para agendar tu llamada.
            </p>
            <div style={{marginTop:24, display:'flex', flexDirection:'column', gap:10}}>
              <a href={window.BOBAX_WHATSAPP_URL} target="_blank" rel="noopener" style={{
                padding:'12px 22px', borderRadius:999, background:'var(--emerald-500)',
                color:'white', fontWeight:600, fontSize:14, display:'inline-flex', alignItems:'center', justifyContent:'center', gap:8,
              }}>
                {Icons.Whatsapp && <Icons.Whatsapp size={16}/>} Escríbenos por WhatsApp ya
              </a>
              <button onClick={() => setOpen(false)} style={{
                padding:'10px 16px', borderRadius:999, background:'transparent',
                color:'rgba(255,255,255,0.7)', fontSize:13, border:'1px solid rgba(255,255,255,0.15)', cursor:'pointer',
              }}>Cerrar</button>
            </div>
          </div>
        )}
      </div>

      <style>{`
        @keyframes bc-fade { from { opacity: 0; } to { opacity: 1; } }
        @keyframes bc-pop {
          from { opacity: 0; transform: translateY(20px) scale(.96); }
          to   { opacity: 1; transform: translateY(0) scale(1); }
        }
        @keyframes bc-check {
          0% { transform: scale(.4); opacity: 0; }
          60% { transform: scale(1.15); opacity: 1; }
          100% { transform: scale(1); }
        }
      `}</style>
    </div>
  );
}

const lbl = {
  fontFamily:'var(--f-mono)', fontSize:10.5, letterSpacing:'0.1em', textTransform:'uppercase',
  color:'rgba(255,255,255,0.55)', fontWeight:600,
};

function Field({ label, value, onChange, placeholder, type='text' }) {
  return (
    <label style={{display:'block'}}>
      <span style={lbl}>{label}</span>
      <input
        type={type} value={value} onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        style={{
          width:'100%', marginTop:7,
          background:'rgba(0,0,0,0.35)', border:'1px solid rgba(255,255,255,0.12)',
          borderRadius:10, padding:'12px 14px', color:'white',
          fontFamily:'var(--f-body)', fontSize:15, outline:'none',
          transition:'border-color .15s ease',
        }}
        onFocus={(e) => e.target.style.borderColor='var(--brand-400)'}
        onBlur={(e) => e.target.style.borderColor='rgba(255,255,255,0.12)'}
      />
    </label>
  );
}

window.BookCall = BookCall;