/* global React, window, Halftone */

/* Conteúdo por indústria, trilíngue inline (mesmo padrão dos posts do blog).
   O nome de cada indústria vem do dicionário (`industries.<id>`); aqui ficam
   intro + os casos por frente. Cada caso = { area, text }. */
const MOORE_INDUSTRY_CONTENT = [
  {
    id: 'consumo',
    image: { src: 'assets/industries/consumo.jpg', cols: 130, zoom: 1, fx: 0.5, fy: 0.45, gamma: 1.0, credit: 'Foto: USDA / Tammi Schone, CC BY 2.0. Tratada em halftone.' },
    i18n: {
      pt: {
        intro: 'Operação densa, muito SKU e muito ponto de venda, com a margem se decidindo no detalhe. É onde a repetição e o dado abundante encontram a IA.',
        superList: [
          { area: 'Vendas', text: 'Copiloto prepara a visita ao PDV com histórico, sortimento e sugestão de pedido.' },
          { area: 'Trade marketing', text: 'Leitura de fotos de gôndola para medir execução e share de prateleira.' },
          { area: 'Supply', text: 'Copiloto cruza sell-in, sell-out e sazonalidade para apoiar o forecast.' },
          { area: 'Marketing', text: 'Adaptação de conteúdo e campanhas por canal e por varejista.' },
        ],
        agentList: [
          { area: 'Data', text: 'Agente roda o forecast de demanda e sinaliza desvios antes da ruptura.' },
          { area: 'Operações', text: 'Agente monitora ruptura na ponta e dispara a reposição.' },
          { area: 'Finanças', text: 'Agente concilia verbas de trade e deduções com as notas.' },
          { area: 'Vendas', text: 'Agente recebe pedidos por EDI ou WhatsApp e registra no sistema.' },
        ],
      },
      en: {
        intro: 'A dense operation, a lot of SKUs and points of sale, with margin decided in the details. This is where repetition and abundant data meet AI.',
        superList: [
          { area: 'Sales', text: 'A copilot preps the store visit with history, assortment and a suggested order.' },
          { area: 'Trade marketing', text: 'Reads shelf photos to measure execution and share of shelf.' },
          { area: 'Supply', text: 'A copilot cross-checks sell-in, sell-out and seasonality to support the forecast.' },
          { area: 'Marketing', text: 'Adapts content and campaigns by channel and by retailer.' },
        ],
        agentList: [
          { area: 'Data', text: 'An agent runs the demand forecast and flags deviations before a stockout.' },
          { area: 'Operations', text: 'An agent monitors out of stock at the shelf and triggers replenishment.' },
          { area: 'Finance', text: 'An agent reconciles trade funds and deductions against invoices.' },
          { area: 'Sales', text: 'An agent takes orders by EDI or WhatsApp and logs them in the system.' },
        ],
      },
      es: {
        intro: 'Una operación densa, mucho SKU y mucho punto de venta, con el margen decidiéndose en el detalle. Es donde la repetición y el dato abundante se encuentran con la IA.',
        superList: [
          { area: 'Ventas', text: 'Un copiloto prepara la visita al PDV con historial, surtido y sugerencia de pedido.' },
          { area: 'Trade marketing', text: 'Lee fotos de góndola para medir ejecución y share de estante.' },
          { area: 'Supply', text: 'Un copiloto cruza sell-in, sell-out y estacionalidad para apoyar el forecast.' },
          { area: 'Marketing', text: 'Adapta contenido y campañas por canal y por minorista.' },
        ],
        agentList: [
          { area: 'Data', text: 'Un agente corre el forecast de demanda y señala desvíos antes del quiebre.' },
          { area: 'Operaciones', text: 'Un agente monitorea el quiebre en el estante y dispara la reposición.' },
          { area: 'Finanzas', text: 'Un agente concilia fondos de trade y deducciones contra las facturas.' },
          { area: 'Ventas', text: 'Un agente recibe pedidos por EDI o WhatsApp y los registra en el sistema.' },
        ],
      },
    },
  },
  {
    id: 'telecom',
    image: { src: 'assets/industries/telecom.jpg', cols: 130, zoom: 1, fx: 0.5, fy: 0.42, gamma: 1.0, credit: 'Foto: Bidgee, CC BY-SA 2.5 AU. Tratada em halftone.' },
    i18n: {
      pt: {
        intro: 'Volume gigante de atendimento, uma rede para operar e o churn corroendo a base. Em escala, cada ponto de eficiência vale muito.',
        superList: [
          { area: 'Atendimento', text: 'Copiloto resume o histórico do cliente e redige a próxima resposta.' },
          { area: 'Campo', text: 'Copiloto diagnostica pelo sintoma e guia o reparo do técnico em campo.' },
          { area: 'Redes', text: 'Copiloto correlaciona alarmes e sugere a causa raiz no NOC.' },
          { area: 'Vendas B2B', text: 'Copiloto monta a proposta e configura o plano certo.' },
        ],
        agentList: [
          { area: 'Atendimento', text: 'Agente tria, prioriza e resolve tickets simples ponta a ponta.' },
          { area: 'Retenção', text: 'Agente detecta risco de churn e dispara a oferta de retenção.' },
          { area: 'Billing', text: 'Agente acha erro de cobrança e concilia faturas.' },
          { area: 'Operações', text: 'Agente executa provisionamento e ativação de serviço.' },
        ],
      },
      en: {
        intro: 'A huge volume of support, a network to operate and churn eating the base. At scale, every point of efficiency is worth a lot.',
        superList: [
          { area: 'Support', text: 'A copilot summarizes the customer history and drafts the next reply.' },
          { area: 'Field', text: 'A copilot diagnoses from the symptom and guides the field technician through the repair.' },
          { area: 'Networks', text: 'A copilot correlates alarms and suggests the root cause in the NOC.' },
          { area: 'B2B sales', text: 'A copilot builds the proposal and configures the right plan.' },
        ],
        agentList: [
          { area: 'Support', text: 'An agent triages, prioritizes and resolves simple tickets end to end.' },
          { area: 'Retention', text: 'An agent detects churn risk and triggers the retention offer.' },
          { area: 'Billing', text: 'An agent finds billing errors and reconciles invoices.' },
          { area: 'Operations', text: 'An agent runs service provisioning and activation.' },
        ],
      },
      es: {
        intro: 'Un volumen gigante de atención, una red para operar y el churn corroyendo la base. En escala, cada punto de eficiencia vale mucho.',
        superList: [
          { area: 'Atención', text: 'Un copiloto resume el historial del cliente y redacta la próxima respuesta.' },
          { area: 'Campo', text: 'Un copiloto diagnostica por el síntoma y guía la reparación del técnico en campo.' },
          { area: 'Redes', text: 'Un copiloto correlaciona alarmas y sugiere la causa raíz en el NOC.' },
          { area: 'Ventas B2B', text: 'Un copiloto arma la propuesta y configura el plan correcto.' },
        ],
        agentList: [
          { area: 'Atención', text: 'Un agente tría, prioriza y resuelve tickets simples de punta a punta.' },
          { area: 'Retención', text: 'Un agente detecta riesgo de churn y dispara la oferta de retención.' },
          { area: 'Billing', text: 'Un agente encuentra errores de facturación y concilia facturas.' },
          { area: 'Operaciones', text: 'Un agente ejecuta el aprovisionamiento y la activación del servicio.' },
        ],
      },
    },
  },
  {
    id: 'varejo',
    image: { src: 'assets/industries/varejo.jpg', cols: 130, zoom: 1, fx: 0.5, fy: 0.45, gamma: 1.0, credit: 'Foto: Frankie Fouganthin, CC BY-SA 4.0. Tratada em halftone.' },
    i18n: {
      pt: {
        intro: 'Loja, e-commerce e CRM puxando o mesmo cliente, com estoque e preço mudando o tempo todo. A IA entra onde a decisão se repete mil vezes por dia.',
        superList: [
          { area: 'Loja', text: 'Copiloto de produto no celular do vendedor, com estoque, atributos e venda cruzada.' },
          { area: 'Compras', text: 'Copiloto analisa sell-through, markdown e sortimento.' },
          { area: 'CRM', text: 'Copiloto cria campanhas e segmentações de base.' },
          { area: 'Finanças', text: 'Copiloto monta o fechamento e explica os desvios.' },
        ],
        agentList: [
          { area: 'Atendimento', text: 'Agente resolve troca, status de pedido e pós-venda ponta a ponta.' },
          { area: 'Abastecimento', text: 'Agente sugere e dispara a reposição por loja e por SKU.' },
          { area: 'E-commerce', text: 'Agente cria e mantém descrições e atributos de produto em escala.' },
          { area: 'Pricing', text: 'Agente ajusta preço e markdown pela demanda e pela concorrência.' },
        ],
      },
      en: {
        intro: 'Store, e-commerce and CRM pulling at the same customer, with stock and price changing all the time. AI goes where the decision repeats a thousand times a day.',
        superList: [
          { area: 'Store', text: "A product copilot on the salesperson's phone, with stock, attributes and cross-sell." },
          { area: 'Buying', text: 'A copilot analyzes sell-through, markdown and assortment.' },
          { area: 'CRM', text: 'A copilot builds campaigns and customer segments.' },
          { area: 'Finance', text: 'A copilot assembles the close and explains the variances.' },
        ],
        agentList: [
          { area: 'Support', text: 'An agent handles returns, order status and after-sales end to end.' },
          { area: 'Replenishment', text: 'An agent suggests and triggers restock by store and by SKU.' },
          { area: 'E-commerce', text: 'An agent creates and maintains product descriptions and attributes at scale.' },
          { area: 'Pricing', text: 'An agent adjusts price and markdown by demand and competition.' },
        ],
      },
      es: {
        intro: 'Tienda, e-commerce y CRM tirando del mismo cliente, con stock y precio cambiando todo el tiempo. La IA entra donde la decisión se repite mil veces por día.',
        superList: [
          { area: 'Tienda', text: 'Un copiloto de producto en el celular del vendedor, con stock, atributos y venta cruzada.' },
          { area: 'Compras', text: 'Un copiloto analiza sell-through, markdown y surtido.' },
          { area: 'CRM', text: 'Un copiloto crea campañas y segmentaciones de base.' },
          { area: 'Finanzas', text: 'Un copiloto arma el cierre y explica los desvíos.' },
        ],
        agentList: [
          { area: 'Atención', text: 'Un agente resuelve cambios, estado de pedido y posventa de punta a punta.' },
          { area: 'Abastecimiento', text: 'Un agente sugiere y dispara la reposición por tienda y por SKU.' },
          { area: 'E-commerce', text: 'Un agente crea y mantiene descripciones y atributos de producto en escala.' },
          { area: 'Pricing', text: 'Un agente ajusta precio y markdown por demanda y competencia.' },
        ],
      },
    },
  },
  {
    id: 'financeiro',
    image: { src: 'assets/industries/financeiro.jpg', cols: 130, zoom: 1, fx: 0.5, fy: 0.45, gamma: 1.0, credit: 'Foto: T. J. O\'Halloran / Library of Congress, domínio público. Tratada em halftone.' },
    i18n: {
      pt: {
        intro: 'Muito processo regulado, muito documento e atendimento em volume, com risco e compliance no centro. A IA entra onde a operação é repetitiva e auditável.',
        superList: [
          { area: 'Atendimento', text: 'Copiloto resume a conta do cliente e redige a resposta dentro da política.' },
          { area: 'Crédito', text: 'Copiloto lê os documentos e monta o resumo da análise.' },
          { area: 'Sinistros', text: 'Copiloto organiza o caso e sugere o enquadramento.' },
          { area: 'Compliance', text: 'Copiloto cruza a operação com a regra e aponta o que revisar.' },
        ],
        agentList: [
          { area: 'Operações', text: 'Agente faz onboarding e KYC, conferindo os documentos.' },
          { area: 'Crédito', text: 'Agente pré-analisa propostas e separa as que precisam de gente.' },
          { area: 'Sinistros', text: 'Agente tria e resolve sinistros simples ponta a ponta.' },
          { area: 'Risco', text: 'Agente monitora transações e levanta alertas de fraude.' },
        ],
      },
      en: {
        intro: 'A lot of regulated process, a lot of documents and high-volume service, with risk and compliance at the center. AI goes where the operation is repetitive and auditable.',
        superList: [
          { area: 'Support', text: 'A copilot summarizes the customer account and drafts a reply within policy.' },
          { area: 'Credit', text: 'A copilot reads the documents and assembles the analysis summary.' },
          { area: 'Claims', text: 'A copilot organizes the case and suggests the classification.' },
          { area: 'Compliance', text: 'A copilot checks the operation against the rule and flags what to review.' },
        ],
        agentList: [
          { area: 'Operations', text: 'An agent runs onboarding and KYC, checking the documents.' },
          { area: 'Credit', text: 'An agent pre-analyzes applications and routes the ones that need a person.' },
          { area: 'Claims', text: 'An agent triages and resolves simple claims end to end.' },
          { area: 'Risk', text: 'An agent monitors transactions and raises fraud alerts.' },
        ],
      },
      es: {
        intro: 'Mucho proceso regulado, muchos documentos y atención en volumen, con el riesgo y el compliance en el centro. La IA entra donde la operación es repetitiva y auditable.',
        superList: [
          { area: 'Atención', text: 'Un copiloto resume la cuenta del cliente y redacta la respuesta dentro de la política.' },
          { area: 'Crédito', text: 'Un copiloto lee los documentos y arma el resumen del análisis.' },
          { area: 'Siniestros', text: 'Un copiloto organiza el caso y sugiere el encuadre.' },
          { area: 'Compliance', text: 'Un copiloto cruza la operación con la regla y marca qué revisar.' },
        ],
        agentList: [
          { area: 'Operaciones', text: 'Un agente hace onboarding y KYC, revisando los documentos.' },
          { area: 'Crédito', text: 'Un agente preanaliza solicitudes y deriva las que necesitan una persona.' },
          { area: 'Siniestros', text: 'Un agente tría y resuelve siniestros simples de punta a punta.' },
          { area: 'Riesgo', text: 'Un agente monitorea transacciones y levanta alertas de fraude.' },
        ],
      },
    },
  },
  {
    id: 'saude',
    image: { src: 'assets/industries/saude.jpg', cols: 130, zoom: 1, fx: 0.5, fy: 0.42, gamma: 1.0, credit: 'Foto: HAP Project, CC BY-SA 4.0. Tratada em halftone.' },
    i18n: {
      pt: {
        intro: 'Muita documentação, agenda cheia e o time clínico sobrecarregado de tarefa administrativa. A IA tira o peso de tudo o que não é cuidado.',
        superList: [
          { area: 'Recepção', text: 'Copiloto resume o histórico e agenda o retorno.' },
          { area: 'Documentação', text: 'Copiloto rascunha a nota a partir da consulta; o profissional revisa.' },
          { area: 'Faturamento', text: 'Copiloto monta a cobrança e confere o convênio.' },
          { area: 'Operações', text: 'Copiloto organiza a fila e prioriza os casos.' },
        ],
        agentList: [
          { area: 'Agendamento', text: 'Agente marca, confirma e remarca consultas.' },
          { area: 'Faturamento', text: 'Agente prepara o faturamento e contesta glosas.' },
          { area: 'Atendimento', text: 'Agente responde dúvidas administrativas ponta a ponta.' },
          { area: 'Back office', text: 'Agente concilia autorizações com os convênios.' },
        ],
      },
      en: {
        intro: 'A lot of paperwork, full schedules and a clinical team overloaded with admin work. AI takes the weight off everything that is not care.',
        superList: [
          { area: 'Front desk', text: 'A copilot summarizes the history and books the follow-up.' },
          { area: 'Documentation', text: 'A copilot drafts the note from the visit; the professional reviews it.' },
          { area: 'Billing', text: 'A copilot assembles the claim and checks the payer.' },
          { area: 'Operations', text: 'A copilot organizes the queue and prioritizes the cases.' },
        ],
        agentList: [
          { area: 'Scheduling', text: 'An agent books, confirms and reschedules appointments.' },
          { area: 'Billing', text: 'An agent prepares billing and disputes denials.' },
          { area: 'Support', text: 'An agent answers administrative questions end to end.' },
          { area: 'Back office', text: 'An agent reconciles authorizations with payers.' },
        ],
      },
      es: {
        intro: 'Mucha documentación, agenda llena y un equipo clínico sobrecargado de tareas administrativas. La IA saca el peso de todo lo que no es atención.',
        superList: [
          { area: 'Recepción', text: 'Un copiloto resume el historial y agenda el control.' },
          { area: 'Documentación', text: 'Un copiloto redacta la nota a partir de la consulta; el profesional la revisa.' },
          { area: 'Facturación', text: 'Un copiloto arma el cobro y verifica la cobertura.' },
          { area: 'Operaciones', text: 'Un copiloto organiza la fila y prioriza los casos.' },
        ],
        agentList: [
          { area: 'Agenda', text: 'Un agente reserva, confirma y reprograma turnos.' },
          { area: 'Facturación', text: 'Un agente prepara la facturación y disputa rechazos.' },
          { area: 'Atención', text: 'Un agente responde dudas administrativas de punta a punta.' },
          { area: 'Back office', text: 'Un agente concilia autorizaciones con las aseguradoras.' },
        ],
      },
    },
  },
  {
    id: 'mobilidade',
    image: { src: 'assets/industries/mobilidade.jpg', cols: 130, zoom: 1, fx: 0.5, fy: 0.4, gamma: 1.0, credit: 'Foto: Supanut Arunoprayote, CC BY 4.0. Tratada em halftone.' },
    i18n: {
      pt: {
        intro: 'Operação 24/7, muita reserva e bilhete, e a experiência decidindo a recompra. A IA entra na linha de frente e nos bastidores.',
        superList: [
          { area: 'Atendimento', text: 'Copiloto resume a viagem do hóspede ou passageiro e redige a resposta.' },
          { area: 'Reservas', text: 'Copiloto encontra a melhor opção e remarca em segundos.' },
          { area: 'Operações', text: 'Copiloto antecipa o atraso e sugere o replanejamento.' },
          { area: 'Receita', text: 'Copiloto analisa a ocupação e ajusta a tarifa.' },
        ],
        agentList: [
          { area: 'Atendimento', text: 'Agente resolve remarcação, reembolso e status ponta a ponta.' },
          { area: 'Logística', text: 'Agente acompanha a entrega ou o voo e avisa o cliente.' },
          { area: 'Receita', text: 'Agente ajusta preço e disponibilidade pela demanda.' },
          { area: 'Back office', text: 'Agente concilia reservas, no-shows e cobranças.' },
        ],
      },
      en: {
        intro: 'A 24/7 operation, a lot of bookings and tickets, and experience deciding the rebook. AI works the front line and the back office.',
        superList: [
          { area: 'Support', text: 'A copilot summarizes the guest or passenger trip and drafts the reply.' },
          { area: 'Bookings', text: 'A copilot finds the best option and rebooks in seconds.' },
          { area: 'Operations', text: 'A copilot anticipates the delay and suggests the replan.' },
          { area: 'Revenue', text: 'A copilot analyzes occupancy and adjusts the rate.' },
        ],
        agentList: [
          { area: 'Support', text: 'An agent handles rebooking, refunds and status end to end.' },
          { area: 'Logistics', text: 'An agent tracks the delivery or flight and notifies the customer.' },
          { area: 'Revenue', text: 'An agent adjusts price and availability by demand.' },
          { area: 'Back office', text: 'An agent reconciles bookings, no-shows and charges.' },
        ],
      },
      es: {
        intro: 'Una operación 24/7, muchas reservas y tickets, y la experiencia decidiendo la recompra. La IA trabaja en la primera línea y en la trastienda.',
        superList: [
          { area: 'Atención', text: 'Un copiloto resume el viaje del huésped o pasajero y redacta la respuesta.' },
          { area: 'Reservas', text: 'Un copiloto encuentra la mejor opción y reprograma en segundos.' },
          { area: 'Operaciones', text: 'Un copiloto anticipa la demora y sugiere el replanteo.' },
          { area: 'Revenue', text: 'Un copiloto analiza la ocupación y ajusta la tarifa.' },
        ],
        agentList: [
          { area: 'Atención', text: 'Un agente resuelve reprogramación, reembolsos y estado de punta a punta.' },
          { area: 'Logística', text: 'Un agente sigue la entrega o el vuelo y avisa al cliente.' },
          { area: 'Revenue', text: 'Un agente ajusta precio y disponibilidad por demanda.' },
          { area: 'Back office', text: 'Un agente concilia reservas, no-shows y cobros.' },
        ],
      },
    },
  },
  {
    id: 'outro',
    image: { src: 'assets/industries/outro.jpg', cols: 130, zoom: 1, fx: 0.5, fy: 0.45, gamma: 1.0, credit: 'Foto: Eric Bailey (Pixel.la), CC0. Tratada em halftone.' },
    i18n: {
      pt: {
        intro: 'Não listamos a sua indústria? Sem problema. A gente trabalha onde a operação se repete e o dado é abundante, em qualquer setor. O método é o mesmo.',
        superList: [
          { area: 'Atendimento', text: 'Copiloto resume o contexto e redige a próxima resposta.' },
          { area: 'Vendas', text: 'Copiloto prepara a conversa e o follow-up.' },
          { area: 'Finanças', text: 'Copiloto monta o fechamento e explica os desvios.' },
          { area: 'Conhecimento', text: 'Copiloto acha a informação no que a empresa já tem.' },
        ],
        agentList: [
          { area: 'Operações', text: 'Agente assume o processo recorrente do começo ao fim.' },
          { area: 'Data', text: 'Agente cuida do trabalho de dados e sinaliza o que foge do padrão.' },
          { area: 'Atendimento', text: 'Agente resolve as solicitações simples ponta a ponta.' },
          { area: 'Back office', text: 'Agente concilia, registra e atualiza os sistemas.' },
        ],
      },
      en: {
        intro: 'Do not see your industry? No problem. We work wherever the operation repeats and data is abundant, in any sector. The method is the same.',
        superList: [
          { area: 'Support', text: 'A copilot summarizes the context and drafts the next reply.' },
          { area: 'Sales', text: 'A copilot preps the conversation and the follow-up.' },
          { area: 'Finance', text: 'A copilot assembles the close and explains the variances.' },
          { area: 'Knowledge', text: 'A copilot finds the information in what the company already has.' },
        ],
        agentList: [
          { area: 'Operations', text: 'An agent takes the recurring process from start to finish.' },
          { area: 'Data', text: 'An agent handles the data work and flags what is off pattern.' },
          { area: 'Support', text: 'An agent resolves simple requests end to end.' },
          { area: 'Back office', text: 'An agent reconciles, logs and updates the systems.' },
        ],
      },
      es: {
        intro: '¿No ves tu industria? No hay problema. Trabajamos donde la operación se repite y el dato es abundante, en cualquier sector. El método es el mismo.',
        superList: [
          { area: 'Atención', text: 'Un copiloto resume el contexto y redacta la próxima respuesta.' },
          { area: 'Ventas', text: 'Un copiloto prepara la conversación y el follow-up.' },
          { area: 'Finanzas', text: 'Un copiloto arma el cierre y explica los desvíos.' },
          { area: 'Conocimiento', text: 'Un copiloto encuentra la información en lo que la empresa ya tiene.' },
        ],
        agentList: [
          { area: 'Operaciones', text: 'Un agente asume el proceso recurrente de principio a fin.' },
          { area: 'Data', text: 'Un agente se ocupa del trabajo de datos y señala lo que se sale del patrón.' },
          { area: 'Atención', text: 'Un agente resuelve las solicitudes simples de punta a punta.' },
          { area: 'Back office', text: 'Un agente concilia, registra y actualiza los sistemas.' },
        ],
      },
    },
  },
];

window.mooreGetIndustry = function (id) {
  return MOORE_INDUSTRY_CONTENT.find((x) => x.id === id) || null;
};

function Industries({ lang, industry, onOpenContact }) {
  const tr = (k) => window.tr(lang, k);
  const lp = (p) => window.localePath(p, lang);
  const iname = (id) => tr('industries.' + id);

  const wrap = { paddingTop: '80px', paddingBottom: '40px' };
  const header = { display: 'grid', gridTemplateColumns: '5fr 7fr', gap: '64px', alignItems: 'end', paddingBottom: '40px', borderBottom: '1px solid var(--ink)' };
  const h1 = { fontSize: 'clamp(40px, 5.4vw, 72px)', fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1.02, color: 'var(--ink)', margin: '16px 0 0', maxWidth: '16ch' };
  const lead = { fontSize: '19px', lineHeight: 1.55, color: 'var(--warm-700)', margin: 0, maxWidth: '48ch' };
  const cardName = { fontSize: 'clamp(22px, 2.4vw, 28px)', fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.1, color: 'var(--ink)', margin: '18px 0 0' };
  const cardIntro = { fontSize: '15px', lineHeight: 1.55, color: 'var(--warm-700)', margin: '10px 0 0' };

  const framing = (
    <section style={{ paddingBottom: '56px' }} className="sec">
      <div className="container-narrow">
        <div className="prose">
          <p className="lead">{tr('industries.intro1')}</p>
          <p>
            {tr('industries.intro2a')}
            <a className="in" href={lp('/blog/usar-automatizar-operar')} data-spa="1">{tr('industries.link_use')}</a>
            {tr('industries.intro2b')}
            <a className="in" href={lp('/blog/super-colaborador-ou-novo-membro')} data-spa="1">{tr('industries.link_super')}</a>
            {tr('industries.intro2c')}
          </p>
        </div>
      </div>
    </section>
  );

  const useCases = (c) => (
    <div className="use-grid">
      <div className="use-col">
        <div className="use-label">{tr('industries.super_label')}</div>
        <p className="use-sub">{tr('industries.super_sub')}</p>
        <ul className="use-list">
          {c.superList.map((u, j) => (
            <li key={j} className="use-item"><span className="use-area">{u.area}</span>{u.text}</li>
          ))}
        </ul>
      </div>
      <div className="use-col">
        <div className="use-label">{tr('industries.agents_label')}</div>
        <p className="use-sub">{tr('industries.agents_sub')}</p>
        <ul className="use-list">
          {c.agentList.map((u, j) => (
            <li key={j} className="use-item"><span className="use-area">{u.area}</span>{u.text}</li>
          ))}
        </ul>
      </div>
    </div>
  );

  const cta = (
    <section style={{ paddingBottom: '100px' }}>
      <div className="container-narrow">
        <div className="on-ink" style={{ borderRadius: '2px', padding: 'clamp(32px, 5vw, 56px)' }}>
          <span className="eyebrow" style={{ color: 'var(--warm-400)' }}>{tr('industries.cta_eyebrow')}</span>
          <h3 style={{ fontSize: 'clamp(28px, 3.4vw, 40px)', fontWeight: 500, letterSpacing: '-0.025em', lineHeight: 1.1, color: 'var(--cream)', margin: '14px 0 0', maxWidth: '22ch' }}>
            {tr('industries.cta_heading')}
          </h3>
          <p style={{ fontSize: '17px', lineHeight: 1.6, color: 'var(--warm-300)', margin: '16px 0 28px', maxWidth: '48ch' }}>
            {tr('industries.cta_p')}
          </p>
          <button className="btn ink-inverse" onClick={onOpenContact}>{tr('industries.cta_button')} <span>→</span></button>
        </div>
      </div>
    </section>
  );

  const ind = industry ? window.mooreGetIndustry(industry) : null;

  /* Landing específica de uma indústria */
  if (ind) {
    const c = ind.i18n[lang] || ind.i18n.pt;
    return (
      <div>
        <section style={wrap} className="sec">
          <div className="container">
            <header style={header} className="sec-header">
              <div>
                <h1 style={h1}>{iname(ind.id)}</h1>
              </div>
              <p style={lead}>{c.intro}</p>
            </header>
          </div>
        </section>

        <section style={{ paddingBottom: '56px' }} className="sec">
          <div className="container">
            <div className="industry-photo industry-photo-hero">
              <Halftone src={ind.image.src} alt={iname(ind.id)} initials={ind.id.slice(0, 2).toUpperCase()} cols={170} zoom={ind.image.zoom} focusX={ind.image.fx} focusY={ind.image.fy} gamma={ind.image.gamma} />
            </div>
            {ind.image.credit ? <p className="industry-credit">{ind.image.credit}</p> : null}
          </div>
        </section>

        {framing}

        <section style={{ paddingBottom: '72px' }} className="sec industry">
          <div className="container-narrow">{useCases(c)}</div>
        </section>

        {cta}
      </div>
    );
  }

  /* Overview: as três indústrias */
  return (
    <div>
      <section style={wrap} className="sec">
        <div className="container">
          <header style={header} className="sec-header">
            <div>
              <h1 style={h1}>{tr('industries.heading')}</h1>
            </div>
            <p style={lead}>{tr('industries.lead')}</p>
          </header>
        </div>
      </section>

      {framing}

      <section style={{ paddingBottom: '72px' }} className="sec">
        <div className="container">
          <div className="ind-cards">
            {MOORE_INDUSTRY_CONTENT.map((x) => {
              const c = x.i18n[lang] || x.i18n.pt;
              return (
                <a key={x.id} href={lp('/industrias/' + x.id)} data-spa="1" className="ind-card">
                  <div className="industry-photo">
                    <Halftone src={x.image.src} alt={iname(x.id)} initials={x.id.slice(0, 2).toUpperCase()} cols={110} zoom={x.image.zoom} focusX={x.image.fx} focusY={x.image.fy} gamma={x.image.gamma} />
                  </div>
                  <h2 style={cardName}>{iname(x.id)}</h2>
                  <p style={cardIntro}>{c.intro}</p>
                  <span className="ind-card-link">{tr('industries.see_cases')} <span>→</span></span>
                </a>
              );
            })}
          </div>
        </div>
      </section>

      {cta}
    </div>
  );
}

window.Industries = Industries;