// Medicya country site — single JSX module
// Reads window.COUNTRY config to render the right country variant.

const C = window.COUNTRY;
const IS_PT = C.lang === 'pt-BR';

// ─── Brand tokens (sourced from medicya.com/landing/brand.jsx) ──────────
const M = {
  primary:    '#0E7A65',
  primaryDk:  '#0A5A4A',
  primaryHi:  '#1AA585',
  mint:       '#7DE3C5',
  forest:     '#063A33',
  forestDeep: '#04231F',
  ink:        '#0E1B33',
  ink2:       '#3A4257',
  ink3:       '#6B7385',
  rule:       '#E6E2D7',
  ruleSoft:   '#EFEAD9',
  cream:      '#F6F2E8',
  creamSoft:  '#FBF8F0',
};
const POPPINS = 'Poppins, system-ui, sans-serif';
const LOGO_URL       = 'https://medicya.com/img/logo.png?v=20260516';
const LOGO_LIGHT_URL = 'https://medicya.com/img/logo-light.png?v=20260516';
const BOX_URL        = 'https://medicya.com/img/box-shipping.jpg?v=20260516';

// ─── i18n strings ───────────────────────────────────────────────────────
const T = IS_PT ? {
  nav_login:        'Entrar',
  nav_apply:        'Cadastre-se',
  hero_eyebrow:     `Para médicos · ${C.name}`,
  hero_h1_a:        'Suprimento direto',
  hero_h1_b:        `para médicos no ${C.name}.`,
  hero_sub:         `Medicya é o fornecedor B2B de peptídeos, GLP-1, hormônios e compostos de longevidade em qualidade farmacêutica. Após verificação do seu ${C.license_label.toLowerCase()}, você acessa o catálogo completo e solicita orçamento por email. Sem distribuidores no meio.`,
  hero_cta:         'Cadastre-se grátis',
  hero_login:       'Entrar',
  trust_h:          'O que você acessa',
  trust_1:          'Catálogo de 17+ compostos',
  trust_2:          'Qualidade farmacêutica',
  trust_3:          'Orçamento por email',
  trust_4:          'Rastreabilidade lote a lote',
  trust_5:          'Suporte clínico',

  stats_1_v:        '17+',
  stats_1_l:        'Compostos em catálogo',
  stats_2_v:        '5',
  stats_2_l:        'Países atendidos',
  stats_3_v:        '<48h',
  stats_3_l:        'Verificação de credencial',
  stats_4_v:        '0',
  stats_4_l:        'Intermediários',

  what_eyebrow:     'Sobre a Medicya',
  what_h:           'Um fornecedor direto, não um marketplace.',
  what_p1:          'A Medicya supre o consultório do médico aliado com compostos de qualidade farmacêutica diretamente, sem intermediários. Você prescreve sob seu próprio CRM e o medicamento chega ao seu consultório com certificado de origem e rastreabilidade completa.',
  what_p2:          `Não somos uma clínica. Não receitamos. O médico cadastrado opera sob suas próprias credenciais junto à ${C.regulator} (${C.regulator_full}) e sob a legislação ${C.demonym} aplicável.`,
  what_p3:          'Após cadastro gratuito e verificação manual da credencial, você obtém acesso ao portal de médicos aliados onde consulta o catálogo completo, solicita orçamento, recebe literatura clínica e tira dúvidas com o time médico Medicya.',

  cmp_eyebrow:      'Em destaque',
  cmp_h:            'Compostos em destaque.',
  cmp_sub:          'Uma amostra do portfólio. Após verificação você acessa o catálogo completo e solicita orçamento por email.',
  cmp_more:         'Ver portfólio completo após verificação',

  vs_eyebrow:       'Por que direto importa',
  vs_h:             'Suprimento direto vs distribuidor tradicional.',
  vs_us_h:          'Medicya',
  vs_them_h:        'Distribuidor tradicional',
  vs_row_1_a:       'Verificação 1-a-1 do CRM',
  vs_row_1_b:       'Compras a granel sem verificação',
  vs_row_2_a:       'Sem intermediários',
  vs_row_2_b:       'Cadeia de revendedores',
  vs_row_3_a:       'Rastreabilidade lote a lote',
  vs_row_3_b:       'Origem difícil de rastrear',
  vs_row_4_a:       'Orçamento por email em horas',
  vs_row_4_b:       'Cotações em dias ou semanas',
  vs_row_5_a:       'Suporte clínico e literatura',
  vs_row_5_b:       'Sem acompanhamento clínico',
  vs_row_6_a:       'Entrega no consultório',
  vs_row_6_b:       'Logística genérica',

  ben_eyebrow:      'Por que Medicya',
  ben_h:            'Tudo que sua prática precisa.',
  ben_sub:          'Sem distribuidores no meio. Direto ao seu consultório.',
  ben_1_h:          'Catálogo amplo',
  ben_1_b:          '17+ peptídeos, GLP-1, hormônios e compostos de longevidade em qualidade farmacêutica, com rastreabilidade lote a lote.',
  ben_2_h:          'Preços diretos por email',
  ben_2_b:          'Após verificação, você solicita orçamento de cada composto por email. Sem intermediários, sem markups ocultos. Resposta em horas.',
  ben_3_h:          'Suporte clínico contínuo',
  ben_3_b:          'Guias baseados em evidências, protocolos de referência, capacitação com especialistas internacionais e comunidade clínica.',

  how_eyebrow:      'Como funciona',
  how_h:            'Do cadastro ao primeiro pedido em 48 horas.',
  how_1_h:          '01 · Cadastro',
  how_1_b:          `Preenche dados, especialidade e número de ${C.license_label}. Menos de 2 minutos.`,
  how_2_h:          '02 · Verificação',
  how_2_b:          `Validamos sua credencial junto ao conselho profissional e à ${C.regulator}. Resposta em até 48 h úteis.`,
  how_3_h:          '03 · Acesso',
  how_3_b:          'Recebe credenciais para o portal de médicos aliados com catálogo e literatura clínica.',
  how_4_h:          '04 · Orçamento',
  how_4_b:          'Solicita orçamento de qualquer composto. Recebe proposta com lote, certificado e prazo em horas.',

  reg_eyebrow:      'Marco regulatório',
  reg_h:            `Como funciona no ${C.name}.`,
  reg_p1:           `Medicya supre o consultório do médico aliado, que opera sob seu próprio ${C.license_label} junto à ${C.regulator}. O médico avalia, prescreve e supervisiona o tratamento conforme a normativa ${C.demonym} aplicável.`,
  reg_p2:           'Compostos sujeitos a controle são dispensados unicamente com receita vigente emitida pelo médico tratante. Compostos manipulados seguem boas práticas de manipulação e certificação de origem.',
  reg_p3:           'Medicya não substitui o juízo clínico do médico. Indicações on-label e off-label, dosagens e protocolos são definidos pelo médico aliado conforme cada caso.',

  faq_eyebrow:      'Dúvidas frequentes',
  faq_h:            'O que os médicos perguntam.',
  faq_q1:           'Tenho que pagar para me cadastrar?',
  faq_a1:           'Não. Cadastro e verificação são totalmente gratuitos. Você só paga quando faz um pedido após receber o orçamento.',
  faq_q2:           'Por que os preços não aparecem no site?',
  faq_a2:           'Preços de compostos farmacêuticos variam por lote, quantidade e marco regulatório. Após verificação, você solicita orçamento por email com prazo, lote e certificado completos.',
  faq_q3:           'Que tipo de médico se qualifica?',
  faq_a3:           `Médicos com ${C.license_label} vigente: endocrinologistas, clínicos gerais, médicos preventivos, esporte, ginecologistas, urologistas, dermatologistas, antienvelhecimento.`,
  faq_q4:           'Quem emite a receita?',
  faq_a4:           'Você. Medicya não emite receitas nem realiza atendimento médico. Você opera sob seu próprio CRM.',
  faq_q5:           'Como é feita a entrega?',
  faq_a5:           'Direta ao consultório, com cadeia de frio quando necessário, certificado de origem do lote e prazo padrão de 5 a 10 dias úteis.',
  faq_q6:           'Posso pedir compostos não listados?',
  faq_a6:           'Sim. Após verificação você pode solicitar orçamento de compostos manipulados sob encomenda, sujeitos a disponibilidade e marco regulatório.',

  cta_eyebrow:      'Comece hoje',
  cta_h:            'Acesse o portfólio completo.',
  cta_sub:          'Cadastro gratuito. Verificação em 48 horas. Sem permanência.',
  cta_btn:          'Cadastre-se agora',

  form_eyebrow:     'Cadastro gratuito',
  form_h:           'Solicite acesso à rede.',
  form_sub:         'Menos de 2 minutos. Resposta em 48 horas.',
  form_name:        'Nome completo',
  form_email:       'Email profissional',
  form_wa:          'WhatsApp',
  form_specialty:   'Especialidade',
  form_license:     C.license_label,
  form_license_help: C.license_help,
  form_city:        'Cidade',
  form_message:     'Mensagem (opcional)',
  form_submit:      'Enviar cadastro',
  form_consent:     `Confirmo que sou médico com registro vigente junto à ${C.regulator} e opero sob meu próprio CRM.`,

  thanks_h:         'Cadastro recebido.',
  thanks_b:         'Vamos verificar sua credencial e enviar suas credenciais de acesso ao portal em até 48 horas para o email informado.',
  thanks_cta:       'Voltar ao início',

  footer_about:     `Medicya é o fornecedor direto de peptídeos, GLP-1, hormônios e compostos de longevidade em qualidade farmacêutica para médicos verificados em ${C.name} e na América Latina.`,
  footer_h_links:   'Links',
  footer_h_contact: 'Contato',
  footer_main_site: 'medicya.com',
  footer_portal:    'Portal de médicos',
  footer_apply:     'Cadastre-se',
  copy:             '© 2026 Medicya. Todos os direitos reservados.',
  apt_label:        `Apto para médicos com registro vigente junto à ${C.regulator}.`,
  legal_note:       `Medicya não é uma clínica e não realiza atendimento médico. Os serviços médicos e prescrições são realizados pelos médicos aliados sob suas próprias credenciais e em conformidade com a legislação ${C.demonym} aplicável.`,

  err_required:     'Campo obrigatório.',
  err_email:        'Email inválido.',
  err_network:      'Não foi possível enviar. Tente de novo em alguns minutos.',
} : {
  nav_login:        'Iniciar sesión',
  nav_apply:        'Aplica',
  hero_eyebrow:     `Para médicos · ${C.name}`,
  hero_h1_a:        'Suministro directo',
  hero_h1_b:        `para médicos en ${C.name}.`,
  hero_sub:         `Medicya es el proveedor B2B de péptidos, GLP-1, hormonas y compuestos de longevidad de calidad farmacéutica. Tras verificación de tu ${C.license_label.toLowerCase()}, accedes al catálogo completo y solicitas cotización por email. Sin distribuidores en medio.`,
  hero_cta:         'Aplica gratis',
  hero_login:       'Entrar',
  trust_h:          'Lo que recibes',
  trust_1:          'Catálogo de 17+ compuestos',
  trust_2:          'Calidad farmacéutica',
  trust_3:          'Cotización por email',
  trust_4:          'Trazabilidad lote por lote',
  trust_5:          'Soporte clínico',

  stats_1_v:        '17+',
  stats_1_l:        'Compuestos en catálogo',
  stats_2_v:        '5',
  stats_2_l:        'Países atendidos',
  stats_3_v:        '<48h',
  stats_3_l:        'Verificación de credencial',
  stats_4_v:        '0',
  stats_4_l:        'Intermediarios',

  what_eyebrow:     'Sobre Medicya',
  what_h:           'Un proveedor directo, no un marketplace.',
  what_p1:          'Medicya suministra al consultorio del médico aliado con compuestos de calidad farmacéutica directamente, sin intermediarios. Tú prescribes bajo tu propia cédula y la medicación llega a tu consultorio con certificado de origen y trazabilidad completa.',
  what_p2:          `No somos una clínica. No recetamos. El médico registrado opera bajo sus propias credenciales ante ${C.regulator} (${C.regulator_full}) y bajo la legislación ${C.demonym} aplicable.`,
  what_p3:          'Tras el registro gratuito y la verificación manual de la credencial, obtienes acceso al portal de médicos aliados donde consultas el catálogo completo, solicitas cotización, recibes literatura clínica y resuelves dudas con el equipo médico Medicya.',

  cmp_eyebrow:      'En destaque',
  cmp_h:            'Compuestos en destaque.',
  cmp_sub:          'Una muestra del portafolio. Tras verificación accedes al catálogo completo y solicitas cotización por email.',
  cmp_more:         'Ver portafolio completo tras verificación',

  vs_eyebrow:       'Por qué importa el directo',
  vs_h:             'Suministro directo vs distribuidor tradicional.',
  vs_us_h:          'Medicya',
  vs_them_h:        'Distribuidor tradicional',
  vs_row_1_a:       'Verificación 1 a 1 de tu cédula',
  vs_row_1_b:       'Compra a granel sin verificación',
  vs_row_2_a:       'Sin intermediarios',
  vs_row_2_b:       'Cadena de revendedores',
  vs_row_3_a:       'Trazabilidad lote por lote',
  vs_row_3_b:       'Origen difícil de rastrear',
  vs_row_4_a:       'Cotización por email en horas',
  vs_row_4_b:       'Cotizaciones en días o semanas',
  vs_row_5_a:       'Soporte clínico y literatura',
  vs_row_5_b:       'Sin acompañamiento clínico',
  vs_row_6_a:       'Entrega al consultorio',
  vs_row_6_b:       'Logística genérica',

  ben_eyebrow:      'Por qué Medicya',
  ben_h:            'Todo lo que tu práctica necesita.',
  ben_sub:          'Sin distribuidores en medio. Directo a tu consultorio.',
  ben_1_h:          'Catálogo amplio',
  ben_1_b:          '17+ péptidos, GLP-1, hormonas y compuestos de longevidad de calidad farmacéutica, con trazabilidad lote por lote.',
  ben_2_h:          'Cotización directa por email',
  ben_2_b:          'Tras verificación, solicitas cotización de cada compuesto por email. Sin intermediarios, sin sobreprecios ocultos. Respuesta en horas.',
  ben_3_h:          'Soporte clínico continuo',
  ben_3_b:          'Guías basadas en evidencia, protocolos de referencia, capacitación con especialistas internacionales y comunidad clínica.',

  how_eyebrow:      'Cómo funciona',
  how_h:            'Del registro al primer pedido en 48 horas.',
  how_1_h:          '01 · Registro',
  how_1_b:          `Llenas tus datos, especialidad y número de ${C.license_label}. Menos de 2 minutos.`,
  how_2_h:          '02 · Verificación',
  how_2_b:          `Validamos tu credencial ante el colegio profesional y ${C.regulator}. Respuesta en máximo 48 h hábiles.`,
  how_3_h:          '03 · Acceso',
  how_3_b:          'Recibes credenciales para el portal de médicos aliados con catálogo y literatura clínica.',
  how_4_h:          '04 · Cotización',
  how_4_b:          'Solicitas cotización de cualquier compuesto. Recibes propuesta con lote, certificado y plazo en horas.',

  reg_eyebrow:      'Marco regulatorio',
  reg_h:            `Cómo funciona en ${C.name}.`,
  reg_p1:           `Medicya suministra al consultorio del médico aliado, que opera bajo su propio ${C.license_label} ante ${C.regulator}. El médico evalúa, prescribe y supervisa el tratamiento conforme la normativa ${C.demonym} aplicable.`,
  reg_p2:           'Compuestos sujetos a control se dispensan únicamente con receta vigente emitida por el médico tratante. Compuestos magistrales siguen buenas prácticas de manipulación y certificado de origen.',
  reg_p3:           'Medicya no sustituye el juicio clínico del médico. Indicaciones on-label y off-label, dosis y protocolos son definidos por el médico aliado conforme a cada caso.',

  faq_eyebrow:      'Preguntas frecuentes',
  faq_h:            'Lo que los médicos preguntan.',
  faq_q1:           '¿Tengo que pagar para registrarme?',
  faq_a1:           'No. Registro y verificación son totalmente gratuitos. Pagas solo cuando haces un pedido tras recibir cotización.',
  faq_q2:           '¿Por qué los precios no aparecen en el sitio?',
  faq_a2:           'Los precios de compuestos farmacéuticos varían por lote, cantidad y marco regulatorio. Tras verificación, solicitas cotización por email con plazo, lote y certificado completos.',
  faq_q3:           '¿Qué tipo de médico califica?',
  faq_a3:           `Médicos con ${C.license_label} vigente: endocrinólogos, internistas, medicina preventiva, deporte, ginecólogos, urólogos, dermatólogos, antienvejecimiento.`,
  faq_q4:           '¿Quién emite la receta?',
  faq_a4:           'Tú. Medicya no emite recetas ni realiza atención médica. Operas bajo tu propia cédula.',
  faq_q5:           '¿Cómo se hace la entrega?',
  faq_a5:           'Directa al consultorio, con cadena de frío cuando aplica, certificado de origen del lote y plazo estándar de 5 a 10 días hábiles.',
  faq_q6:           '¿Puedo pedir compuestos no listados?',
  faq_a6:           'Sí. Tras verificación puedes solicitar cotización de compuestos magistrales por encargo, sujetos a disponibilidad y marco regulatorio.',

  cta_eyebrow:      'Empieza hoy',
  cta_h:            'Accede al portafolio completo.',
  cta_sub:          'Registro gratuito. Verificación en 48 horas. Sin permanencia.',
  cta_btn:          'Aplica gratis ahora',

  form_eyebrow:     'Registro gratuito',
  form_h:           'Solicita acceso a la red.',
  form_sub:         'Menos de 2 minutos. Respuesta en 48 horas.',
  form_name:        'Nombre completo',
  form_email:       'Email profesional',
  form_wa:          'WhatsApp',
  form_specialty:   'Especialidad',
  form_license:     C.license_label,
  form_license_help: C.license_help,
  form_city:        'Ciudad',
  form_message:     'Mensaje (opcional)',
  form_submit:      'Enviar solicitud',
  form_consent:     `Confirmo que soy médico con registro vigente ante ${C.regulator} y opero bajo mi propia cédula.`,

  thanks_h:         'Solicitud recibida.',
  thanks_b:         'Verificaremos tu credencial y enviaremos tus accesos al portal en máximo 48 horas al email indicado.',
  thanks_cta:       'Volver al inicio',

  footer_about:     `Medicya es el proveedor directo de péptidos, GLP-1, hormonas y compuestos de longevidad de calidad farmacéutica para médicos verificados en ${C.name} y Latinoamérica.`,
  footer_h_links:   'Enlaces',
  footer_h_contact: 'Contacto',
  footer_main_site: 'medicya.com',
  footer_portal:    'Portal de médicos',
  footer_apply:     'Aplica gratis',
  copy:             '© 2026 Medicya. Todos los derechos reservados.',
  apt_label:        `Apto para médicos con registro vigente ante ${C.regulator}.`,
  legal_note:       `Medicya no es una clínica y no realiza atención médica. Los servicios médicos y las prescripciones son realizados por los médicos aliados bajo sus propias credenciales y conforme a la legislación ${C.demonym} aplicable.`,

  err_required:     'Campo obligatorio.',
  err_email:        'Email no válido.',
  err_network:      'No se pudo enviar. Intenta de nuevo en unos minutos.',
};

// ─── Featured compound data (same for all countries — clinical names) ───
const COMPOUNDS = [
  { name: 'Semaglutida',   cat: 'GLP-1',        note: IS_PT ? 'Manejo metabólico, controle de peso' : 'Manejo metabólico, control de peso' },
  { name: 'Tirzepatida',   cat: 'GLP-1 / GIP',  note: IS_PT ? 'Diabetes tipo 2, controle glicêmico' : 'Diabetes tipo 2, control glucémico' },
  { name: 'Retatrutida',   cat: 'GGG agonist',  note: IS_PT ? 'Próxima geração de incretinomiméticos' : 'Próxima generación de incretinomiméticos' },
  { name: 'BPC-157',       cat: IS_PT ? 'Peptídeo' : 'Péptido', note: IS_PT ? 'Reparo tecidual e recuperação' : 'Reparación tisular y recuperación' },
  { name: 'Sermorelina',   cat: IS_PT ? 'Peptídeo GHRH' : 'Péptido GHRH', note: IS_PT ? 'Estimulação endógena de GH' : 'Estimulación endógena de GH' },
  { name: 'Tesamorelina',  cat: IS_PT ? 'Análogo GHRH' : 'Análogo GHRH', note: IS_PT ? 'Lipodistrofia, composição corporal' : 'Lipodistrofia, composición corporal' },
  { name: 'NAD+',          cat: IS_PT ? 'Longevidade' : 'Longevidad', note: IS_PT ? 'Função mitocondrial, sirtuínas' : 'Función mitocondrial, sirtuinas' },
  { name: 'GHK-Cu',        cat: IS_PT ? 'Peptídeo de cobre' : 'Péptido de cobre', note: IS_PT ? 'Regeneração cutânea, anti-inflamatório' : 'Regeneración cutánea, antiinflamatorio' },
];

// ─── Country flag SVGs ──────────────────────────────────────────────────
function Flag({ w = 36, code = C.code }) {
  const h = w * 2 / 3;
  if (code === 'mx') return (
    <svg width={w} height={h} viewBox="0 0 6 4" style={{ display: 'block', borderRadius: 3, overflow: 'hidden' }}>
      <rect width="2" height="4" fill="#006847"/><rect x="2" width="2" height="4" fill="#fff"/>
      <rect x="4" width="2" height="4" fill="#ce1126"/><circle cx="3" cy="2" r="0.5" fill="#c4a96a" opacity=".8"/>
    </svg>
  );
  if (code === 'co') return (
    <svg width={w} height={h} viewBox="0 0 6 4" style={{ display: 'block', borderRadius: 3, overflow: 'hidden' }}>
      <rect width="6" height="2" fill="#fcd116"/><rect y="2" width="6" height="1" fill="#003893"/><rect y="3" width="6" height="1" fill="#ce1126"/>
    </svg>
  );
  if (code === 'do') return (
    <svg width={w} height={h} viewBox="0 0 6 4" style={{ display: 'block', borderRadius: 3, overflow: 'hidden' }}>
      <rect width="3" height="2" fill="#002d62"/><rect x="3" width="3" height="2" fill="#ce1126"/>
      <rect y="2" width="3" height="2" fill="#ce1126"/><rect x="3" y="2" width="3" height="2" fill="#002d62"/>
      <rect x="2.7" width="0.6" height="4" fill="#fff"/><rect y="1.7" width="6" height="0.6" fill="#fff"/>
    </svg>
  );
  if (code === 've') return (
    <svg width={w} height={h} viewBox="0 0 6 4" style={{ display: 'block', borderRadius: 3, overflow: 'hidden' }}>
      <rect width="6" height="1.33" fill="#ffcc00"/><rect y="1.33" width="6" height="1.34" fill="#003893"/><rect y="2.67" width="6" height="1.33" fill="#ce1126"/>
    </svg>
  );
  if (code === 'br') return (
    <svg width={w} height={h} viewBox="0 0 14 10" style={{ display: 'block', borderRadius: 3, overflow: 'hidden' }}>
      <rect width="14" height="10" fill="#009c3b"/>
      <polygon points="7,1.2 12.5,5 7,8.8 1.5,5" fill="#ffdf00"/>
      <circle cx="7" cy="5" r="1.8" fill="#002776"/>
    </svg>
  );
  return null;
}

const Icon = {
  check: (c = 'currentColor', w = 18) => (
    <svg width={w} height={w} viewBox="0 0 24 24" fill="none">
      <path d="M5 12.5l4.5 4.5L19 7" stroke={c} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  x: (c = 'currentColor', w = 18) => (
    <svg width={w} height={w} viewBox="0 0 24 24" fill="none">
      <path d="M6 6l12 12M18 6L6 18" stroke={c} strokeWidth="2.2" strokeLinecap="round"/>
    </svg>
  ),
  arrow: (c = 'currentColor', w = 18) => (
    <svg width={w} height={w} viewBox="0 0 24 24" fill="none">
      <path d="M5 12h14M13 6l6 6-6 6" stroke={c} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
  whatsapp: (c = 'currentColor', w = 16) => (
    <svg width={w} height={w} viewBox="0 0 24 24" fill={c} aria-hidden="true">
      <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
    </svg>
  ),
  vial: (c = 'currentColor', w = 22) => (
    <svg width={w} height={w} viewBox="0 0 24 24" fill="none">
      <path d="M9 3h6M10 3v9.5a3 3 0 006 0V3M10 14h6" stroke={c} strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  ),
};

// ─── Wordmark using REAL logo ───────────────────────────────────────────
function Wordmark({ height = 28, onDark = false }) {
  return (
    <img src={onDark ? LOGO_LIGHT_URL : LOGO_URL} alt="Medicya"
      style={{ height: height * 1.4, width: 'auto', display: 'block' }}/>
  );
}

function Eyebrow({ children, dark = false }) {
  return (
    <div style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: '6px 12px', borderRadius: 999,
      background: dark ? 'rgba(125,227,197,0.12)' : 'rgba(14,122,101,0.08)',
      color: dark ? M.mint : M.primary,
      fontFamily: POPPINS, fontSize: 12, fontWeight: 600,
      letterSpacing: '0.06em', textTransform: 'uppercase',
    }}>
      <span style={{ width: 6, height: 6, borderRadius: 999, background: dark ? M.mint : M.primary }}/>
      {children}
    </div>
  );
}

function Btn({ children, kind = 'primary', size = 'md', href, onClick, type = 'button', style, className = '' }) {
  const sizes = {
    sm: { p: '9px 16px', f: 13.5 },
    md: { p: '13px 22px', f: 15 },
    lg: { p: '16px 28px', f: 15.5 },
  };
  const palettes = {
    primary:  { bg: M.primary, color: '#fff', border: 'transparent' },
    dark:     { bg: M.forest, color: '#fff', border: 'transparent' },
    light:    { bg: '#fff', color: M.ink, border: M.rule },
    ghost:    { bg: 'transparent', color: M.ink, border: M.rule },
    onDark:   { bg: 'rgba(255,255,255,0.10)', color: '#fff', border: 'rgba(255,255,255,0.22)' },
    whatsapp: { bg: '#25D366', color: '#fff', border: 'transparent' },
  };
  const s = sizes[size], p = palettes[kind];
  const base = {
    padding: s.p, fontSize: s.f, borderRadius: 999,
    background: p.bg, color: p.color, border: `1px solid ${p.border}`,
    fontFamily: POPPINS, fontWeight: 600, letterSpacing: '-0.005em',
    cursor: 'pointer', textDecoration: 'none',
    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
    transition: 'transform .15s ease, box-shadow .15s ease',
    ...style,
  };
  if (href) return <a href={href} className={className} style={base}>{children}</a>;
  return <button type={type} onClick={onClick} className={className} style={base}>{children}</button>;
}

// ─── Nav ────────────────────────────────────────────────────────────────
function Nav() {
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', fn); fn();
    return () => window.removeEventListener('scroll', fn);
  }, []);
  return (
    <nav className="site-nav" style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      padding: '14px 32px',
      background: scrolled ? 'rgba(246,242,232,0.85)' : 'transparent',
      backdropFilter: scrolled ? 'blur(12px) saturate(160%)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(12px) saturate(160%)' : 'none',
      borderBottom: scrolled ? `1px solid ${M.rule}` : '1px solid transparent',
      transition: 'background .3s, border-color .3s',
    }}>
      <div className="nav-inner" style={{
        maxWidth: 1240, margin: '0 auto',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16,
      }}>
        <a href="#" className="nav-logo" style={{ textDecoration: 'none', display: 'block', flexShrink: 0 }}>
          <Wordmark height={20}/>
        </a>
        <div className="nav-actions" style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <span className="nav-country-pill" style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '6px 12px', borderRadius: 999,
            background: 'rgba(14,122,101,0.06)', color: M.ink2,
            fontFamily: POPPINS, fontSize: 13, fontWeight: 500,
          }}>
            <Flag w={20}/>
            <span className="nav-country-name">{C.name}</span>
          </span>
          <a className="nav-login" href="https://medicos.medicya.com/login" style={{
            color: M.ink2, fontFamily: POPPINS, fontSize: 14, fontWeight: 500,
            textDecoration: 'none', padding: '0 8px',
          }}>{T.nav_login}</a>
          <Btn kind="primary" size="sm" href="#aplicar">{T.nav_apply}</Btn>
        </div>
      </div>
    </nav>
  );
}

// ─── Hero ───────────────────────────────────────────────────────────────
function Hero() {
  return (
    <section style={{
      background: M.cream, color: M.ink,
      paddingTop: 130, paddingBottom: 80, position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', top: -200, right: -200, width: 700, height: 700,
        background: `radial-gradient(circle, rgba(125,227,197,0.30) 0%, transparent 60%)`,
        pointerEvents: 'none',
      }}/>
      <div className="hero-grid" style={{
        maxWidth: 1240, margin: '0 auto', padding: '0 32px',
        display: 'grid', gridTemplateColumns: '1.15fr 0.85fr', gap: 48, alignItems: 'center',
        position: 'relative',
      }}>
        <div>
          <div className="hero-eyebrow-row" style={{ marginBottom: 18, display: 'inline-flex',
            alignItems: 'center', gap: 8, padding: '6px 12px', borderRadius: 999,
            background: 'rgba(14,122,101,0.08)', color: M.primary,
            fontFamily: POPPINS, fontSize: 12, fontWeight: 600,
            letterSpacing: '0.06em', textTransform: 'uppercase',
          }}>
            <Flag w={18}/>
            <span>{T.hero_eyebrow}</span>
          </div>
          <h1 className="hero-h1" style={{
            fontFamily: POPPINS, fontWeight: 600,
            fontSize: 'clamp(28px, 4.6vw, 60px)', lineHeight: 1.1,
            letterSpacing: '-0.025em', margin: '0 0 20px',
          }}>
            {T.hero_h1_a}<br/>
            <span style={{
              background: `linear-gradient(90deg, ${M.primary}, ${M.primaryHi})`,
              WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
              backgroundClip: 'text',
            }}>{T.hero_h1_b}</span>
          </h1>
          <p className="hero-sub" style={{
            fontFamily: POPPINS, fontSize: 16.5, lineHeight: 1.65,
            color: M.ink2, maxWidth: 560, margin: '0 0 28px',
          }}>{T.hero_sub}</p>
          <div className="hero-cta-row" style={{ display: 'flex', gap: 10, flexWrap: 'wrap', alignItems: 'center' }}>
            <Btn kind="primary" size="lg" href="#aplicar">{T.hero_cta} {Icon.arrow('#fff', 16)}</Btn>
            {C.whatsapp_url && (
              <a href={C.whatsapp_url} target="_blank" rel="noopener noreferrer"
                 className="wa-btn"
                 style={{
                   padding: '14px 22px', fontSize: 14.5, borderRadius: 999,
                   background: '#25D366', color: '#fff', border: '1px solid transparent',
                   fontFamily: POPPINS, fontWeight: 600, letterSpacing: '-0.005em',
                   textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 8,
                 }}>
                {Icon.whatsapp('#fff', 16)}
                <span>WhatsApp</span>
              </a>
            )}
            <a className="hero-login-link" href="https://medicos.medicya.com/login" style={{
              color: M.ink2, fontFamily: POPPINS, fontSize: 14.5, fontWeight: 500,
              textDecoration: 'none', padding: '8px 4px',
            }}>{T.hero_login} →</a>
          </div>
        </div>
        <div style={{
          background: '#fff', borderRadius: 22, padding: 28,
          boxShadow: '0 20px 50px rgba(6,58,51,0.08), 0 1px 0 rgba(255,255,255,0.6) inset',
          border: `1px solid ${M.rule}`, position: 'relative',
        }}>
          <div style={{ fontFamily: POPPINS, fontSize: 11, fontWeight: 700, color: M.primary,
            letterSpacing: '0.10em', textTransform: 'uppercase', marginBottom: 14 }}>
            {T.trust_h}
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
            {[T.trust_1, T.trust_2, T.trust_3, T.trust_4, T.trust_5].map((t, i) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 11,
                fontFamily: POPPINS, fontSize: 14, color: M.ink, fontWeight: 500,
              }}>
                <span style={{
                  width: 22, height: 22, borderRadius: 99, flexShrink: 0,
                  background: 'rgba(14,122,101,0.10)', color: M.primary,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>{Icon.check('currentColor', 13)}</span>
                {t}
              </div>
            ))}
          </div>
          <div style={{
            marginTop: 18, paddingTop: 14, borderTop: `1px solid ${M.rule}`,
            fontFamily: POPPINS, fontSize: 12, color: M.ink3, lineHeight: 1.5,
          }}>
            <span style={{ fontWeight: 700, color: M.ink2, letterSpacing: '0.02em' }}>{C.regulator}</span> · {C.regulator_full}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Stats bar ──────────────────────────────────────────────────────────
function Stats() {
  const items = [
    { v: T.stats_1_v, l: T.stats_1_l },
    { v: T.stats_2_v, l: T.stats_2_l },
    { v: T.stats_3_v, l: T.stats_3_l },
    { v: T.stats_4_v, l: T.stats_4_l },
  ];
  return (
    <section style={{ background: M.creamSoft, padding: '40px 0', borderTop: `1px solid ${M.rule}`, borderBottom: `1px solid ${M.rule}` }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '0 32px' }}>
        <div className="stats-grid" style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, alignItems: 'baseline',
        }}>
          {items.map((it, i) => (
            <div key={i} style={{ textAlign: 'center' }}>
              <div style={{
                fontFamily: POPPINS, fontSize: 'clamp(28px, 3.4vw, 44px)', fontWeight: 700,
                color: M.primary, letterSpacing: '-0.02em', lineHeight: 1, marginBottom: 6,
              }}>{it.v}</div>
              <div style={{
                fontFamily: POPPINS, fontSize: 12.5, fontWeight: 500,
                color: M.ink2, letterSpacing: '0.02em',
              }}>{it.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── ¿Qué es Medicya? ──────────────────────────────────────────────────
function WhatIsMedicya() {
  return (
    <section style={{ background: M.cream, padding: '90px 0' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '0 32px' }}>
        <Eyebrow>{T.what_eyebrow}</Eyebrow>
        <h2 style={{
          fontFamily: POPPINS, fontSize: 'clamp(30px, 4vw, 48px)', fontWeight: 600,
          letterSpacing: '-0.03em', lineHeight: 1.1, margin: '20px 0 28px',
        }}>{T.what_h}</h2>
        <div className="grid-2" style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, alignItems: 'start',
        }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            <p style={{ fontFamily: POPPINS, fontSize: 16, color: M.ink2, lineHeight: 1.65, margin: 0 }}>{T.what_p1}</p>
            <p style={{ fontFamily: POPPINS, fontSize: 16, color: M.ink2, lineHeight: 1.65, margin: 0 }}>{T.what_p2}</p>
            <p style={{ fontFamily: POPPINS, fontSize: 16, color: M.ink2, lineHeight: 1.65, margin: 0 }}>{T.what_p3}</p>
          </div>
          <div style={{
            width: '100%', aspectRatio: '4 / 3', borderRadius: 22,
            backgroundImage: `url(${BOX_URL})`, backgroundSize: 'cover', backgroundPosition: 'center',
            boxShadow: '0 24px 60px rgba(6,58,51,0.14)',
          }}/>
        </div>
      </div>
    </section>
  );
}

// ─── Featured Compounds ────────────────────────────────────────────────
function FeaturedCompounds() {
  return (
    <section style={{ background: M.creamSoft, padding: '90px 0' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '0 32px' }}>
        <div style={{ marginBottom: 36, maxWidth: 720 }}>
          <Eyebrow>{T.cmp_eyebrow}</Eyebrow>
          <h2 style={{
            fontFamily: POPPINS, fontSize: 'clamp(30px, 4vw, 48px)', fontWeight: 600,
            letterSpacing: '-0.03em', lineHeight: 1.1, margin: '20px 0 12px',
          }}>{T.cmp_h}</h2>
          <p style={{ fontFamily: POPPINS, fontSize: 15.5, color: M.ink2, lineHeight: 1.6, margin: 0 }}>
            {T.cmp_sub}
          </p>
        </div>
        <div className="grid-4" style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14,
        }}>
          {COMPOUNDS.map((c, i) => (
            <div key={i} style={{
              background: '#fff', borderRadius: 16, padding: 20,
              border: `1px solid ${M.rule}`,
              display: 'flex', flexDirection: 'column', gap: 10,
              transition: 'transform .15s ease, box-shadow .15s ease',
            }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8 }}>
                <span style={{
                  display: 'inline-flex', alignItems: 'center',
                  padding: '3px 8px', borderRadius: 6,
                  background: 'rgba(14,122,101,0.08)', color: M.primary,
                  fontFamily: POPPINS, fontSize: 10.5, fontWeight: 700,
                  letterSpacing: '0.04em', textTransform: 'uppercase',
                }}>{c.cat}</span>
                <span style={{ color: M.primary, opacity: 0.5 }}>{Icon.vial(M.primary, 18)}</span>
              </div>
              <h3 style={{
                fontFamily: POPPINS, fontSize: 17, fontWeight: 600,
                color: M.ink, letterSpacing: '-0.015em', margin: 0, lineHeight: 1.2,
              }}>{c.name}</h3>
              <p style={{
                fontFamily: POPPINS, fontSize: 13, color: M.ink2,
                lineHeight: 1.5, margin: 0,
              }}>{c.note}</p>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 28, textAlign: 'center' }}>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            fontFamily: POPPINS, fontSize: 13.5, color: M.ink3,
          }}>
            <span style={{
              width: 24, height: 24, borderRadius: 99,
              background: 'rgba(14,122,101,0.10)', color: M.primary,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            }}>+</span>
            {T.cmp_more}
          </span>
        </div>
      </div>
    </section>
  );
}

// ─── Comparison: Medicya vs distribuidor tradicional ───────────────────
function Comparison() {
  const rows = [
    { a: T.vs_row_1_a, b: T.vs_row_1_b },
    { a: T.vs_row_2_a, b: T.vs_row_2_b },
    { a: T.vs_row_3_a, b: T.vs_row_3_b },
    { a: T.vs_row_4_a, b: T.vs_row_4_b },
    { a: T.vs_row_5_a, b: T.vs_row_5_b },
    { a: T.vs_row_6_a, b: T.vs_row_6_b },
  ];
  return (
    <section style={{ background: M.cream, padding: '90px 0' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '0 32px' }}>
        <div style={{ textAlign: 'center', marginBottom: 36, maxWidth: 720, marginInline: 'auto' }}>
          <Eyebrow>{T.vs_eyebrow}</Eyebrow>
          <h2 style={{
            fontFamily: POPPINS, fontSize: 'clamp(30px, 4vw, 48px)', fontWeight: 600,
            letterSpacing: '-0.03em', lineHeight: 1.1, margin: '20px 0 0',
          }}>{T.vs_h}</h2>
        </div>
        <div className="vs-table" style={{
          background: '#fff', borderRadius: 22, padding: 4,
          border: `1px solid ${M.rule}`, overflow: 'hidden',
          boxShadow: '0 16px 48px rgba(6,58,51,0.06)',
        }}>
          <div className="vs-head" style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4,
            padding: 0,
          }}>
            <div style={{
              background: M.forest, color: '#fff',
              padding: '20px 24px', borderRadius: 18,
              fontFamily: POPPINS, fontSize: 16, fontWeight: 700,
              display: 'flex', alignItems: 'center', gap: 8,
            }}>
              <span style={{
                width: 24, height: 24, borderRadius: 99, background: M.mint, color: M.forest,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              }}>{Icon.check('currentColor', 14)}</span>
              {T.vs_us_h}
            </div>
            <div style={{
              background: 'rgba(14,27,51,0.04)', color: M.ink2,
              padding: '20px 24px', borderRadius: 18,
              fontFamily: POPPINS, fontSize: 16, fontWeight: 600,
            }}>
              {T.vs_them_h}
            </div>
          </div>
          {rows.map((r, i) => (
            <div key={i} className="vs-row" style={{
              display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4,
              padding: '0 4px', marginTop: 4,
            }}>
              <div style={{
                padding: '16px 24px', borderRadius: 12,
                background: 'rgba(14,122,101,0.04)',
                fontFamily: POPPINS, fontSize: 14.5, color: M.ink, fontWeight: 500,
                display: 'flex', alignItems: 'center', gap: 10, lineHeight: 1.4,
              }}>
                <span style={{ color: M.primary, flexShrink: 0 }}>{Icon.check('currentColor', 16)}</span>
                {r.a}
              </div>
              <div style={{
                padding: '16px 24px', borderRadius: 12,
                fontFamily: POPPINS, fontSize: 14.5, color: M.ink3, fontWeight: 400,
                display: 'flex', alignItems: 'center', gap: 10, lineHeight: 1.4,
              }}>
                <span style={{ color: M.ink3, flexShrink: 0, opacity: 0.6 }}>{Icon.x('currentColor', 16)}</span>
                {r.b}
              </div>
            </div>
          ))}
          <div style={{ height: 4 }}/>
        </div>
      </div>
    </section>
  );
}

// ─── Benefits ───────────────────────────────────────────────────────────
function Benefits() {
  const items = [
    { h: T.ben_1_h, b: T.ben_1_b },
    { h: T.ben_2_h, b: T.ben_2_b },
    { h: T.ben_3_h, b: T.ben_3_b },
  ];
  return (
    <section style={{ background: M.creamSoft, padding: '90px 0' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '0 32px' }}>
        <div style={{ textAlign: 'center', marginBottom: 44, maxWidth: 720, marginInline: 'auto' }}>
          <Eyebrow>{T.ben_eyebrow}</Eyebrow>
          <h2 style={{
            fontFamily: POPPINS, fontSize: 'clamp(30px, 4vw, 48px)', fontWeight: 600,
            letterSpacing: '-0.03em', lineHeight: 1.1, margin: '20px 0 12px',
          }}>{T.ben_h}</h2>
          <p style={{ fontFamily: POPPINS, fontSize: 16, color: M.ink2, margin: 0, lineHeight: 1.6 }}>
            {T.ben_sub}
          </p>
        </div>
        <div className="grid-3" style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18,
        }}>
          {items.map((it, i) => (
            <div key={i} style={{
              background: '#fff', borderRadius: 22, padding: 30,
              border: `1px solid ${M.rule}`,
              boxShadow: '0 1px 0 rgba(0,0,0,0.02)',
            }}>
              <div style={{
                width: 40, height: 40, borderRadius: 11, marginBottom: 18,
                background: `linear-gradient(135deg, ${M.primary}, ${M.primaryHi})`,
                color: '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: POPPINS, fontWeight: 700, fontSize: 16,
              }}>{i + 1}</div>
              <h3 style={{
                fontFamily: POPPINS, fontSize: 20, fontWeight: 600,
                letterSpacing: '-0.015em', margin: '0 0 8px', color: M.ink, lineHeight: 1.25,
              }}>{it.h}</h3>
              <p style={{ fontFamily: POPPINS, fontSize: 14.5, color: M.ink2,
                lineHeight: 1.6, margin: 0 }}>{it.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── How it works ───────────────────────────────────────────────────────
function How() {
  const steps = [
    { h: T.how_1_h, b: T.how_1_b },
    { h: T.how_2_h, b: T.how_2_b },
    { h: T.how_3_h, b: T.how_3_b },
    { h: T.how_4_h, b: T.how_4_b },
  ];
  return (
    <section style={{ background: M.cream, padding: '90px 0' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '0 32px' }}>
        <div style={{ textAlign: 'center', marginBottom: 44 }}>
          <Eyebrow>{T.how_eyebrow}</Eyebrow>
          <h2 style={{
            fontFamily: POPPINS, fontSize: 'clamp(30px, 4vw, 48px)', fontWeight: 600,
            letterSpacing: '-0.03em', lineHeight: 1.1, margin: '20px 0 0',
            maxWidth: 720, marginInline: 'auto',
          }}>{T.how_h}</h2>
        </div>
        <div className="grid-4" style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 18,
          position: 'relative',
        }}>
          {steps.map((s, i) => (
            <div key={i} style={{
              background: '#fff', borderRadius: 18, padding: 24,
              border: `1px solid ${M.rule}`,
              display: 'flex', flexDirection: 'column', gap: 8, position: 'relative',
            }}>
              <h3 style={{
                fontFamily: POPPINS, fontSize: 16, fontWeight: 700,
                color: M.primary, letterSpacing: '-0.005em', margin: 0, lineHeight: 1.3,
              }}>{s.h}</h3>
              <p style={{ fontFamily: POPPINS, fontSize: 14, color: M.ink2,
                lineHeight: 1.55, margin: 0 }}>{s.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Marco regulatorio ──────────────────────────────────────────────────
function Regulatory() {
  return (
    <section style={{ background: M.forest, color: '#fff', padding: '90px 0' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '0 32px' }}>
        <Eyebrow dark>{T.reg_eyebrow}</Eyebrow>
        <h2 style={{
          fontFamily: POPPINS, fontSize: 'clamp(30px, 4vw, 48px)', fontWeight: 600,
          letterSpacing: '-0.03em', lineHeight: 1.1, margin: '20px 0 28px',
        }}>{T.reg_h}</h2>
        <div className="grid-3" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 24 }}>
          {[T.reg_p1, T.reg_p2, T.reg_p3].map((p, i) => (
            <p key={i} style={{
              fontFamily: POPPINS, fontSize: 14.5, lineHeight: 1.7,
              color: 'rgba(255,255,255,0.78)', margin: 0,
            }}>{p}</p>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── FAQ ────────────────────────────────────────────────────────────────
function FAQ() {
  const items = [
    { q: T.faq_q1, a: T.faq_a1 }, { q: T.faq_q2, a: T.faq_a2 },
    { q: T.faq_q3, a: T.faq_a3 }, { q: T.faq_q4, a: T.faq_a4 },
    { q: T.faq_q5, a: T.faq_a5 }, { q: T.faq_q6, a: T.faq_a6 },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section style={{ background: M.creamSoft, padding: '90px 0' }}>
      <div style={{ maxWidth: 980, margin: '0 auto', padding: '0 32px' }}>
        <div style={{ marginBottom: 32 }}>
          <Eyebrow>{T.faq_eyebrow}</Eyebrow>
          <h2 style={{
            fontFamily: POPPINS, fontSize: 'clamp(30px, 4vw, 48px)', fontWeight: 600,
            letterSpacing: '-0.03em', lineHeight: 1.1, margin: '20px 0 0',
          }}>{T.faq_h}</h2>
        </div>
        <div>
          {items.map((it, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ borderTop: `1px solid ${M.rule}` }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                  width: '100%', padding: '20px 0', background: 'transparent', border: 'none',
                  display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16,
                  fontFamily: POPPINS, fontSize: 17, fontWeight: 500, color: M.ink,
                  letterSpacing: '-0.015em', cursor: 'pointer', textAlign: 'left',
                }}>
                  {it.q}
                  <span style={{
                    flexShrink: 0, width: 30, height: 30, borderRadius: 99,
                    background: isOpen ? M.primary : 'transparent',
                    border: isOpen ? 'none' : `1px solid ${M.rule}`,
                    color: isOpen ? '#fff' : M.ink,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    transition: 'all .2s ease',
                    transform: isOpen ? 'rotate(180deg)' : 'rotate(0deg)',
                  }}>
                    <svg width="11" height="11" viewBox="0 0 24 24" fill="none">
                      <path d="M6 9l6 6 6-6" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
                    </svg>
                  </span>
                </button>
                <div style={{
                  maxHeight: isOpen ? 240 : 0, overflow: 'hidden',
                  transition: 'max-height .35s ease, padding .35s ease',
                  paddingBottom: isOpen ? 20 : 0,
                }}>
                  <p style={{
                    fontFamily: POPPINS, fontSize: 15, color: M.ink2,
                    lineHeight: 1.6, margin: 0, maxWidth: 760,
                  }}>{it.a}</p>
                </div>
              </div>
            );
          })}
          <div style={{ borderTop: `1px solid ${M.rule}` }}/>
        </div>
      </div>
    </section>
  );
}

// ─── CTA Banner ─────────────────────────────────────────────────────────
function CTABanner() {
  return (
    <section style={{ background: M.cream, padding: '60px 0' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '0 32px' }}>
        <div style={{
          background: `linear-gradient(135deg, ${M.forest}, ${M.primaryDk})`,
          color: '#fff', borderRadius: 28,
          padding: '56px 48px', position: 'relative', overflow: 'hidden',
          boxShadow: '0 30px 80px rgba(6,58,51,0.20)',
        }}>
          <div style={{
            position: 'absolute', top: -120, right: -80, width: 380, height: 380,
            background: `radial-gradient(circle, rgba(125,227,197,0.30) 0%, transparent 60%)`,
            pointerEvents: 'none',
          }}/>
          <div className="cta-banner-grid" style={{
            display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 32, alignItems: 'center',
            position: 'relative',
          }}>
            <div>
              <Eyebrow dark>{T.cta_eyebrow}</Eyebrow>
              <h2 style={{
                fontFamily: POPPINS, fontSize: 'clamp(28px, 3.6vw, 42px)', fontWeight: 600,
                letterSpacing: '-0.025em', lineHeight: 1.1, margin: '16px 0 12px',
              }}>{T.cta_h}</h2>
              <p style={{
                fontFamily: POPPINS, fontSize: 15.5, lineHeight: 1.6,
                color: 'rgba(255,255,255,0.78)', margin: 0,
              }}>{T.cta_sub}</p>
            </div>
            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
              <Btn kind="primary" size="lg" href="#aplicar">
                {T.cta_btn} {Icon.arrow('#fff', 16)}
              </Btn>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Signup form ────────────────────────────────────────────────────────
function SignupForm() {
  const [state, setState] = React.useState({
    name: '', email: '', wa: '', specialty: '', license: '', city: '', message: '',
    website: '', consent: false,
  });
  const [status, setStatus] = React.useState('idle');
  const [errorMsg, setErrorMsg] = React.useState('');

  const update = (k) => (e) => setState(s => ({ ...s, [k]: e.target.value }));
  const updateBool = (k) => (e) => setState(s => ({ ...s, [k]: e.target.checked }));

  async function submit(e) {
    e.preventDefault();
    if (!state.name || !state.email || !state.specialty || !state.license || !state.consent) {
      setErrorMsg(T.err_required); setStatus('err'); return;
    }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(state.email)) {
      setErrorMsg(T.err_email); setStatus('err'); return;
    }
    setStatus('sending'); setErrorMsg('');
    try {
      const fd = new FormData();
      Object.entries(state).forEach(([k, v]) => fd.append(k, v));
      fd.append('country', C.code);
      fd.append('country_name', C.name);
      const r = await fetch('https://medicya.com/country-signup.php', { method: 'POST', body: fd });
      if (!r.ok) throw new Error('http ' + r.status);
      setStatus('ok');
    } catch (e) {
      setErrorMsg(T.err_network); setStatus('err');
    }
  }

  if (status === 'ok') {
    return (
      <section id="aplicar" style={{ background: M.creamSoft, padding: '90px 0', scrollMarginTop: 80 }}>
        <div style={{
          background: M.forest, color: '#fff',
          borderRadius: 28, padding: '56px 40px', textAlign: 'center',
          maxWidth: 640, margin: '0 auto',
        }}>
          <div style={{
            width: 60, height: 60, borderRadius: 999, background: M.mint, color: M.forest,
            margin: '0 auto 20px', display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>{Icon.check(M.forest, 28)}</div>
          <h2 style={{ fontFamily: POPPINS, fontSize: 32, fontWeight: 600,
            letterSpacing: '-0.025em', margin: '0 0 12px' }}>{T.thanks_h}</h2>
          <p style={{ fontFamily: POPPINS, fontSize: 16, lineHeight: 1.55,
            color: 'rgba(255,255,255,0.8)', margin: '0 0 24px' }}>{T.thanks_b}</p>
          <Btn kind="onDark" size="md" href="#" onClick={(e) => { e.preventDefault(); window.scrollTo({ top: 0, behavior: 'smooth' }); setStatus('idle'); }}>
            {T.thanks_cta}
          </Btn>
        </div>
      </section>
    );
  }

  const inputStyle = {
    width: '100%', padding: '13px 15px', fontSize: 14.5,
    fontFamily: POPPINS, color: M.ink,
    background: '#fff', border: `1px solid ${M.rule}`, borderRadius: 11,
    outline: 'none', transition: 'border-color .15s',
  };
  const labelStyle = {
    fontFamily: POPPINS, fontSize: 12.5, fontWeight: 600, color: M.ink2,
    marginBottom: 6, display: 'block', letterSpacing: '0.01em',
  };

  return (
    <section id="aplicar" style={{ background: M.creamSoft, padding: '90px 0', scrollMarginTop: 80 }}>
      <div style={{ maxWidth: 720, margin: '0 auto', padding: '0 24px' }}>
        <div style={{ textAlign: 'center', marginBottom: 32 }}>
          <Eyebrow>{T.form_eyebrow}</Eyebrow>
          <h2 style={{
            fontFamily: POPPINS, fontSize: 'clamp(28px, 3.6vw, 40px)', fontWeight: 600,
            letterSpacing: '-0.025em', lineHeight: 1.12, margin: '20px 0 10px',
          }}>{T.form_h}</h2>
          <p style={{ fontFamily: POPPINS, fontSize: 15, color: M.ink2, margin: 0 }}>
            {T.form_sub}
          </p>
        </div>

        <form onSubmit={submit} style={{
          background: '#fff', borderRadius: 22, padding: 32, border: `1px solid ${M.rule}`,
          boxShadow: '0 16px 48px rgba(6,58,51,0.08)',
          display: 'flex', flexDirection: 'column', gap: 14,
        }}>
          <input type="text" name="website" value={state.website} onChange={update('website')}
            style={{ position: 'absolute', left: -9999, opacity: 0 }} tabIndex="-1" autoComplete="off"/>

          <div className="grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <div>
              <label style={labelStyle}>{T.form_name} *</label>
              <input style={inputStyle} type="text" required value={state.name} onChange={update('name')}/>
            </div>
            <div>
              <label style={labelStyle}>{T.form_specialty} *</label>
              <input style={inputStyle} type="text" required value={state.specialty} onChange={update('specialty')}
                placeholder={IS_PT ? 'Endocrinologia, etc.' : 'Endocrinología, etc.'}/>
            </div>
          </div>
          <div className="grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
            <div>
              <label style={labelStyle}>{T.form_email} *</label>
              <input style={inputStyle} type="email" required value={state.email} onChange={update('email')}/>
            </div>
            <div>
              <label style={labelStyle}>{T.form_wa} ({C.wa_prefix})</label>
              <input style={inputStyle} type="tel" value={state.wa} onChange={update('wa')}
                placeholder={C.phone_example}/>
            </div>
          </div>
          <div>
            <label style={labelStyle}>{T.form_license} *</label>
            <input style={inputStyle} type="text" required value={state.license} onChange={update('license')}/>
            <div style={{ fontFamily: POPPINS, fontSize: 11.5, color: M.ink3, marginTop: 5 }}>
              {T.form_license_help}
            </div>
          </div>
          <div>
            <label style={labelStyle}>{T.form_city}</label>
            <input style={inputStyle} type="text" value={state.city} onChange={update('city')}
              placeholder={C.city_examples.split(',')[0].trim()}/>
          </div>
          <div>
            <label style={labelStyle}>{T.form_message}</label>
            <textarea style={{ ...inputStyle, minHeight: 80, resize: 'vertical' }}
              value={state.message} onChange={update('message')}/>
          </div>
          <label style={{
            display: 'flex', gap: 10, alignItems: 'flex-start',
            fontFamily: POPPINS, fontSize: 12.5, color: M.ink2, lineHeight: 1.5,
            cursor: 'pointer', padding: '6px 0',
          }}>
            <input type="checkbox" checked={state.consent} onChange={updateBool('consent')}
              style={{ marginTop: 3, accentColor: M.primary }}/>
            <span>{T.form_consent}</span>
          </label>

          {status === 'err' && (
            <div style={{
              padding: '12px 14px', borderRadius: 10,
              background: 'rgba(206,17,38,0.06)', color: '#a3152a',
              fontFamily: POPPINS, fontSize: 13,
            }}>{errorMsg || T.err_network}</div>
          )}

          <Btn kind="dark" size="lg" type="submit"
            style={{ width: '100%', marginTop: 6,
              opacity: status === 'sending' ? 0.7 : 1,
              pointerEvents: status === 'sending' ? 'none' : 'auto' }}>
            {status === 'sending' ? '...' : T.form_submit}
          </Btn>
        </form>
      </div>
    </section>
  );
}

// ─── Footer ─────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer style={{ background: M.forestDeep, color: 'rgba(255,255,255,0.7)', padding: '60px 0 30px' }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '0 32px' }}>
        <div className="footer-grid" style={{
          display: 'grid', gridTemplateColumns: '1.6fr 1fr 1fr', gap: 36, paddingBottom: 36,
        }}>
          <div>
            <Wordmark height={20} onDark/>
            <p style={{ fontFamily: POPPINS, fontSize: 13.5, lineHeight: 1.6,
              maxWidth: 460, margin: '18px 0 0' }}>
              {T.footer_about}
            </p>
          </div>
          <div>
            <div style={{
              fontFamily: POPPINS, fontSize: 11, fontWeight: 700,
              color: '#fff', letterSpacing: '0.10em', textTransform: 'uppercase',
              marginBottom: 12,
            }}>{T.footer_h_links}</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0,
              display: 'flex', flexDirection: 'column', gap: 7 }}>
              <li><a href="#aplicar" style={{ color: 'rgba(255,255,255,0.7)', textDecoration: 'none', fontFamily: POPPINS, fontSize: 13.5 }}>{T.footer_apply}</a></li>
              <li><a href="https://medicos.medicya.com/login" style={{ color: 'rgba(255,255,255,0.7)', textDecoration: 'none', fontFamily: POPPINS, fontSize: 13.5 }}>{T.footer_portal}</a></li>
              <li><a href="https://medicya.com" style={{ color: 'rgba(255,255,255,0.7)', textDecoration: 'none', fontFamily: POPPINS, fontSize: 13.5 }}>{T.footer_main_site}</a></li>
            </ul>
          </div>
          <div>
            <div style={{
              fontFamily: POPPINS, fontSize: 11, fontWeight: 700,
              color: '#fff', letterSpacing: '0.10em', textTransform: 'uppercase',
              marginBottom: 12,
            }}>{T.footer_h_contact}</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0,
              display: 'flex', flexDirection: 'column', gap: 7 }}>
              <li><a href="mailto:hello@medicya.com" style={{ color: 'rgba(255,255,255,0.7)', textDecoration: 'none', fontFamily: POPPINS, fontSize: 13.5 }}>hello@medicya.com</a></li>
              {C.whatsapp_url && (
                <li><a href={C.whatsapp_url} target="_blank" rel="noopener noreferrer" style={{ color: 'rgba(255,255,255,0.7)', textDecoration: 'none', fontFamily: POPPINS, fontSize: 13.5 }}>WhatsApp</a></li>
              )}
              <li><a href="https://instagram.com/mymedicya" target="_blank" rel="noopener noreferrer" style={{ color: 'rgba(255,255,255,0.7)', textDecoration: 'none', fontFamily: POPPINS, fontSize: 13.5 }}>Instagram</a></li>
            </ul>
          </div>
        </div>
        <div style={{
          paddingTop: 22, borderTop: '1px solid rgba(255,255,255,0.10)',
          fontFamily: POPPINS, fontSize: 11.5, color: 'rgba(255,255,255,0.5)',
          lineHeight: 1.6,
        }}>
          <p style={{ margin: '0 0 10px', maxWidth: 1000 }}>{T.legal_note}</p>
          <p style={{ margin: '0 0 14px', color: 'rgba(255,255,255,0.45)' }}>{T.apt_label}</p>
          <div style={{
            display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 12,
            paddingTop: 10, borderTop: '1px solid rgba(255,255,255,0.06)',
          }}>
            <span>{T.copy}</span>
            <span>{C.name} · {C.regulator}</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ─── App ────────────────────────────────────────────────────────────────
function App() {
  return (
    <>
      <Nav/>
      <Hero/>
      <Stats/>
      <WhatIsMedicya/>
      <FeaturedCompounds/>
      <Comparison/>
      <Benefits/>
      <How/>
      <Regulatory/>
      <FAQ/>
      <CTABanner/>
      <SignupForm/>
      <Footer/>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);
