// Hub Clínicas & Profissionais de Saúde
const PmeHub = ({ locale, navigate }) => {
  const t = window.STRINGS[locale].pme;
  const L = locale === 'pt';

  return (
    <main>
      <section className="relative pt-32 pb-16 md:pt-40 md:pb-20 overflow-hidden">
        <Aurora />
        <div className="mx-auto max-w-7xl px-6 md:px-10 grid lg:grid-cols-[1.2fr_1fr] gap-12 items-center">
          <div>
            <div className="font-mono text-xs uppercase tracking-[0.18em] text-primary mb-4">{t.eyebrow}</div>
            <h1 className="font-display text-5xl md:text-7xl leading-[0.95] tracking-tightest">{t.h1}</h1>
            <p className="text-muted text-lg md:text-xl mt-6 max-w-xl leading-relaxed">{t.sub}</p>
            <div className="flex flex-col sm:flex-row gap-3 mt-8">
              <Button variant="accent" size="lg" className="w-full sm:w-auto justify-center" onClick={() => document.getElementById('sim')?.scrollIntoView({ behavior: 'smooth' })}>
                {L ? 'Simular agora' : 'Simulate now'} <Icon name="arrow-right" className="w-4 h-4" />
              </Button>
              <Button variant="secondary" size="lg" className="w-full sm:w-auto justify-center" onClick={() => navigate('/contact')}>{L ? 'Falar com humano' : 'Talk to a human'}</Button>
            </div>
          </div>
          <div className="hidden lg:block"><FlowOrb /></div>
        </div>
      </section>

      {/* Simulator */}
      <CreditSimulator id="sim" locale={locale} />

      {/* Quem atendemos */}
      <Section eyebrow={L ? 'Quem atendemos' : 'Who we serve'} title={L ? 'Se você atende paciente e espera pelo repasse, é com a gente.' : 'If you treat patients and wait to get paid, we are for you.'} className="py-20">
        <div className="grid md:grid-cols-3 gap-4">
          {(L ? [
            { l: 'Médicos e clínicas', e: 'Consultório próprio, clínica de especialidade, cooperado de operadora, plantonista PJ.' },
            { l: 'Odontologia', e: 'Dentistas, ortodontia, implantodontia, clínicas odontológicas com convênio e particular.' },
            { l: 'Fisioterapia e reabilitação', e: 'Fisioterapeutas, terapeutas ocupacionais, fonoaudiólogos, clínicas de reabilitação.' },
            { l: 'Enfermagem', e: 'Enfermeiros, técnicos de enfermagem, cooperativas de enfermagem, home care e cuidadores PJ.' },
            { l: 'Saúde mental e nutrição', e: 'Psicólogos, psiquiatras, nutricionistas, consultórios com atendimento particular e por reembolso.' },
            { l: 'Diagnóstico e apoio', e: 'Laboratórios de análises, clínicas de imagem, centros de vacinação, serviços de apoio diagnóstico.' },
          ] : [
            { l: 'Physicians and clinics', e: 'Private practice, specialty clinics, operator-affiliated doctors, contract shift work.' },
            { l: 'Dentistry', e: 'Dentists, orthodontics, implantology, dental clinics with plan and private patients.' },
            { l: 'Physiotherapy and rehab', e: 'Physiotherapists, occupational therapists, speech therapists, rehab clinics.' },
            { l: 'Nursing', e: 'Nurses, nursing technicians, nursing co-ops, home care and contract caregivers.' },
            { l: 'Mental health and nutrition', e: 'Psychologists, psychiatrists, nutritionists, private and reimbursement practices.' },
            { l: 'Diagnostics', e: 'Clinical labs, imaging centers, vaccination clinics, diagnostic support services.' },
          ]).map((s, i) => (
            <Card key={i} className="p-6">
              <div className="font-mono text-xs text-muted">0{i+1}</div>
              <div className="font-display text-xl mt-3">{s.l}</div>
              <div className="text-sm text-muted mt-2">{s.e}</div>
            </Card>
          ))}
        </div>
        <div className="mt-6 text-sm text-muted max-w-2xl">
          {L ? 'Atendemos CNPJ de qualquer porte, do consultório individual à clínica com dezenas de profissionais. Também operamos com autônomos que faturam por RPA para operadora ou cooperativa.' : 'We serve practices of any size, from solo consulting rooms to clinics with dozens of practitioners.'}
        </div>
      </Section>

      {/* Comparison table */}
      <section className="py-20 bg-subtle border-y border-line">
        <div className="mx-auto max-w-7xl px-6 md:px-10">
          <div className="max-w-3xl mb-12">
            <div className="font-mono text-xs uppercase tracking-[0.18em] text-muted mb-4">{L ? 'Comparativo honesto' : 'Honest comparison'}</div>
            <h2 className="font-display text-4xl md:text-5xl tracking-tightest leading-[1.05]">{L ? 'Onde a flui.cash ganha — e onde não.' : 'Where flui.cash wins — and where it doesn\'t.'}</h2>
          </div>
          <div className="md:hidden font-mono text-[10px] uppercase tracking-[0.18em] text-muted mb-3 flex items-center gap-2">
            <Icon name="arrow-right" className="w-3 h-3" /> {L ? 'Arraste a tabela para o lado' : 'Swipe the table sideways'}
          </div>
          <div className="overflow-x-auto -mx-6 md:mx-0">
            <table className="w-full min-w-[720px] text-sm">
              <thead>
                <tr className="text-left text-muted font-mono text-xs uppercase tracking-[0.18em]">
                  <th className="py-4 pr-6 font-medium"></th>
                  <th className="py-4 px-4 font-medium">{L ? 'Esperar o convênio' : 'Wait for the plan'}</th>
                  <th className="py-4 px-4 font-medium">{L ? 'Banco / cheque especial' : 'Bank overdraft'}</th>
                  <th className="py-4 px-4 font-medium bg-card rounded-t-xl border-t border-x border-line">flui.cash</th>
                </tr>
              </thead>
              <tbody>
                {[
                  [L ? 'Tempo até o dinheiro' : 'Time to cash', L ? '30 a 90 dias' : '30–90 days', L ? '1–2 dias' : '1–2 days', L ? '≤ 10 minutos' : '≤ 10 minutes'],
                  [L ? 'Entende glosa e TISS' : 'Understands claim denials and TISS', L ? '—' : '—', L ? 'Não' : 'No', L ? 'Sim, é o núcleo' : 'Yes, it is the core'],
                  [L ? 'Exige garantia pessoal' : 'Requires personal guarantee', L ? '—' : '—', L ? 'Quase sempre' : 'Almost always', L ? 'Não, no padrão' : 'No, by default'],
                  [L ? 'Custo sobre o valor' : 'Cost on the amount', L ? 'Zero, mas o caixa trava' : 'Zero, but cash is stuck', L ? '4 a 12% a.m.' : '4–12%/mo', L ? 'A partir de 1,49% a.m.' : 'From 1.49%/mo'],
                  [L ? 'Recebíveis registrados (CERC/B3)' : 'Receivables registered (CERC/B3)', '—', L ? 'Manual' : 'Manual', L ? 'Sim, automatizado' : 'Yes, automated'],
                  [L ? 'Acesso a prontuário do paciente' : 'Access to patient records', '—', '—', L ? 'Nunca' : 'Never'],
                ].map((row, i) => (
                  <tr key={i} className="border-t border-line">
                    <td className="py-4 pr-6 font-medium">{row[0]}</td>
                    <td className="py-4 px-4 text-muted">{row[1]}</td>
                    <td className="py-4 px-4 text-muted">{row[2]}</td>
                    <td className="py-4 px-4 bg-card border-x border-line text-fg font-medium">{row[3]}</td>
                  </tr>
                ))}
                <tr><td colSpan="3"></td><td className="bg-card border-x border-b border-line rounded-b-xl h-2"></td></tr>
              </tbody>
            </table>
          </div>
          <div className="mt-6 text-xs text-muted max-w-2xl">{L ? 'Taxas de banco baseadas em tabelas públicas de crédito rotativo PJ, 2025. Taxa flui.cash a partir de, sujeita a análise.' : 'Bank rates based on public 2025 revolving business credit tables. flui.cash rate is a starting point, subject to analysis.'}</div>
        </div>
      </section>

      {/* Products */}
      <Section eyebrow={L ? 'Três formas de antecipar' : 'Three ways to advance'} title={L ? 'Produtos desenhados para o caixa de quem atende.' : 'Products designed for the cash flow of care.'} className="py-24">
        <div className="grid md:grid-cols-3 gap-4">
          {[
            { tag: '01', icon: 'doc', t: L ? 'Antecipação de Convênios' : 'Health-plan Advances', d: L ? 'Faturou para a operadora? Receba hoje, sem esperar os 60 dias do repasse.' : 'Billed the operator? Get paid today instead of waiting 60 days.', href: '/pme/convenios' },
            { tag: '02', icon: 'card', t: L ? 'Antecipação de Cartão' : 'Card Advances', d: L ? 'Particular e parcelado da maquininha da clínica, na conta em minutos.' : 'Private-pay and installment card sales, in your account in minutes.', href: '/pme/cartao' },
            { tag: '03', icon: 'flow', t: L ? 'Capital de Giro' : 'Working Capital', d: L ? 'Para equipar sala, contratar ou abrir a segunda unidade. Linha rotativa precificada por IA.' : 'To equip a room, hire, or open a second location. AI-priced revolving line.', href: '/pme/giro' },
          ].map((p, i) => (
            <Card key={i} className="p-7 hover:border-fg/30 transition-colors group cursor-pointer" onClick={() => navigate(p.href)}>
              <div className="flex items-center justify-between mb-10">
                <div className="w-11 h-11 rounded-xl bg-subtle border border-line grid place-items-center"><Icon name={p.icon} className="w-5 h-5" /></div>
                <div className="font-mono text-xs text-muted">{p.tag}</div>
              </div>
              <h3 className="font-display text-2xl mb-2">{p.t}</h3>
              <p className="text-muted text-sm">{p.d}</p>
              <div className="mt-8 flex items-center gap-2 text-sm font-medium">{L ? 'Ver detalhes' : 'See details'} <Icon name="arrow-right" className="w-4 h-4 group-hover:translate-x-1 transition-transform" /></div>
            </Card>
          ))}
        </div>
      </Section>

      {/* Painel de repasses */}
      <section className="py-24 md:py-32 bg-subtle border-y border-line">
        <div className="mx-auto max-w-7xl px-6 md:px-10 grid lg:grid-cols-2 gap-12 items-center">
          <div>
            <div className="font-mono text-xs uppercase tracking-[0.18em] text-secondary mb-4">{L ? 'Vem junto, sem mensalidade' : 'Bundled, no monthly fee'}</div>
            <h2 className="font-display text-4xl md:text-5xl tracking-tightest leading-[1.0]">{L ? 'Painel de repasses e glosa. Sem mensalidade extra.' : 'Reimbursement and denial dashboard. No extra fee.'}</h2>
            <p className="text-muted text-lg mt-5 max-w-xl">{L ? 'Você enxerga quanto cada operadora te deve, o que já foi pago, o que está atrasado e quanto está preso em glosa — tudo em um lugar. A maior parte das clínicas descobre isso só no fim do mês, na planilha.' : 'See what each operator owes you, what was paid, what is late and what is stuck in denials — in one place. Most clinics only find this out at month end, in a spreadsheet.'}</p>
            <ul className="mt-8 space-y-3">
              {[
                L ? 'Repasse por operadora, com prazo previsto e status' : 'Reimbursement by operator, with expected date and status',
                L ? 'Alerta de glosa por procedimento e por operadora' : 'Denial alerts by procedure and operator',
                L ? 'Conciliação automática de convênio, cartão e Pix' : 'Automatic reconciliation of plans, card and Pix',
                L ? 'Projeção de caixa da clínica em 30/60/90 dias' : '30/60/90-day practice cash projection',
              ].map((it, i) => (
                <li key={i} className="flex items-start gap-3"><Icon name="check" className="w-5 h-5 mt-0.5 text-primary shrink-0" /><span className="text-fg">{it}</span></li>
              ))}
            </ul>
            <Button variant="primary" className="mt-8" onClick={() => navigate('/pme/convenios')}>{L ? 'Ver antecipação de convênios' : 'See health-plan advances'} <Icon name="arrow-right" className="w-4 h-4" /></Button>
          </div>
          <div><DashboardPreview /></div>
        </div>
      </section>

      {/* FAQ */}
      <Section eyebrow="FAQ" title={L ? 'Perguntas que profissionais de saúde fazem (sem rodeios).' : 'Real questions healthcare professionals ask.'} className="py-24">
        <Accordion items={(L ? [
          { q: 'Vocês acessam prontuário ou dado clínico do meu paciente?', a: 'Nunca. Trabalhamos só com o lado financeiro do atendimento: valor faturado, operadora, data e status do repasse. Diagnóstico, prontuário e identificação do paciente não entram na nossa esteira, e isso está no contrato.' },
          { q: 'Quais operadoras vocês antecipam?', a: 'As principais do mercado — Unimed (nas suas diversas singulares), Bradesco Saúde, SulAmérica, Amil, Hapvida NotreDame, Porto Seguro Saúde, Golden Cross, entre outras. Se a sua operadora não estiver na lista, fale com a gente: avaliamos caso a caso.' },
          { q: 'E se o convênio glosar o valor que vocês anteciparam?', a: 'A glosa é considerada na análise antes de antecipar — o modelo lê o seu histórico de glosa por procedimento e por operadora. Quando ela acontece depois, o valor glosado é compensado no próximo repasse, sem multa e sem juros de mora. Está explícito no contrato, não em letra miúda.' },
          { q: 'Preciso ter CNPJ? Atendem autônomo?', a: 'Trabalhamos majoritariamente com CNPJ, do MEI de fisioterapeuta à clínica com dezenas de profissionais. Autônomos que faturam por RPA para operadora ou cooperativa também podem ser atendidos, com análise específica.' },
          { q: 'Vocês pedem garantia pessoal ou aval?', a: 'Não no padrão. A garantia é o próprio recebível — o repasse da operadora ou o fluxo da maquininha, registrado em CERC/B3. Aval só entra em situações específicas e é dito antes, com todas as letras.' },
          { q: 'Em quanto tempo o dinheiro cai?', a: 'Para antecipação de cartão, mediana de 8 a 14 minutos do envio do CNPJ até o Pix. Para convênios, depende da conexão com a operadora ou do envio dos demonstrativos: em geral no mesmo dia útil.' },
          { q: 'Consulto o SPC/Serasa do sócio?', a: 'Não fazemos a análise em cima do score pessoal do profissional. O que pesa é o histórico de faturamento e de repasse. Consultas de praxe ao CNPJ podem ocorrer via nosso parceiro regulado, sempre com o seu consentimento.' },
          { q: 'Meus dados vão treinar IA externa?', a: 'Não. Os modelos rodam em infraestrutura própria. Dados de clientes não saem da flui.cash nem alimentam terceiros.' },
        ] : [
          { q: 'Do you access patient records or clinical data?', a: 'Never. We work only with the financial side of care: billed amount, operator, date and reimbursement status. Diagnoses, records and patient identity never enter our rails, and that is in the contract.' },
          { q: 'Which health operators do you advance?', a: 'The major ones — Unimed, Bradesco Saúde, SulAmérica, Amil, Hapvida NotreDame, Porto Seguro Saúde and others. If yours is not listed, talk to us.' },
          { q: 'What if the plan denies the claim you advanced?', a: 'Denials are priced into the analysis before we advance, using your own denial history by procedure and operator. When one happens afterwards, the amount is offset against the next reimbursement — no penalty, no late interest.' },
          { q: 'Do I need a registered company?', a: 'Mostly yes, from a solo practitioner entity to a clinic with dozens of professionals. Independent practitioners billing operators directly can also be served, with specific analysis.' },
          { q: 'Do you require a personal guarantee?', a: 'Not by default. Collateral is the receivable itself — the operator reimbursement or the card flow, registered at CERC/B3.' },
          { q: 'How fast does the money arrive?', a: 'For card advances, median 8–14 minutes from tax-ID submission to payout. For health-plan advances, generally the same business day.' },
          { q: 'Will my data train external AI?', a: 'No. Models run on proprietary infra. Customer data never leaves flui.cash.' },
        ]).map(x => x)} />
      </Section>

      {/* Testimonials */}
      <section className="py-20 bg-subtle border-y border-line">
        <div className="mx-auto max-w-7xl px-6 md:px-10">
          <div className="font-mono text-xs uppercase tracking-[0.18em] text-muted mb-8">{L ? 'O que profissionais de saúde estão dizendo' : 'What healthcare professionals are saying'}</div>
          <div className="grid md:grid-cols-3 gap-4">
            {(L ? [
              { q: 'Parei de atrasar a folha da equipe esperando o repasse da operadora.', who: 'Clínica de fisioterapia · 6 profissionais · Campinas/SP' },
              { q: 'Faturei em março e recebi em março. Nunca tinha acontecido.', who: 'Cirurgiã-dentista · consultório próprio · Belo Horizonte/MG' },
              { q: 'Eles entenderam o que é glosa sem eu ter que explicar. Isso já foi metade do caminho.', who: 'Diretor, clínica de imagem · Curitiba/PR' },
            ] : [
              { q: 'I stopped delaying payroll while waiting on the operator.', who: 'Physiotherapy clinic · 6 practitioners · Campinas/SP' },
              { q: 'I billed in March and got paid in March. That had never happened.', who: 'Dental surgeon · private practice · Belo Horizonte/MG' },
              { q: 'They understood claim denials without me explaining. That was half the battle.', who: 'Director, imaging clinic · Curitiba/PR' },
            ]).map((t, i) => (
              <Card key={i} className="p-7">
                <Icon name="spark" className="w-5 h-5 text-accent" />
                <div className="font-display text-xl mt-5 leading-snug">"{t.q}"</div>
                <div className="font-mono text-xs text-muted mt-6 uppercase tracking-wider">{t.who}</div>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="py-24 md:py-32 text-center">
        <div className="mx-auto max-w-3xl px-6">
          <h2 className="font-display text-5xl md:text-6xl tracking-tightest leading-[0.95]">{L ? 'O atendimento já foi feito. O dinheiro pode ser hoje.' : 'The care is delivered. The money can be today.'}</h2>
          <Button variant="accent" size="lg" className="mt-8" onClick={() => document.getElementById('sim')?.scrollIntoView({ behavior: 'smooth' })}>{L ? 'Simular agora' : 'Simulate now'} <Icon name="arrow-right" className="w-4 h-4" /></Button>
        </div>
      </section>
    </main>
  );
};

// Simulador de antecipação — client-side mocked
const CreditSimulator = ({ id, locale }) => {
  const L = locale === 'pt';
  const [faturamento, setFaturamento] = React.useState(120000); // BRL/mês
  const [ticket, setTicket] = React.useState(60000);
  const [tipo, setTipo] = React.useState('convenios');
  const [prazo, setPrazo] = React.useState(60);

  const fmt = (n) => 'R$ ' + n.toLocaleString('pt-BR', { maximumFractionDigits: 0 });

  // fórmula ilustrativa
  const baseRate = tipo === 'convenios' ? 1.69 : tipo === 'cartao' ? 1.49 : 2.05;
  const concentracao = Math.max(0, (ticket / faturamento) * 0.9);
  const escalaBonus = faturamento > 400000 ? -0.22 : 0;
  const monthlyRate = Math.max(1.19, baseRate + concentracao + escalaBonus);
  const ratePct = monthlyRate.toFixed(2);
  const totalCost = ticket * (Math.pow(1 + monthlyRate / 100, prazo / 30) - 1);
  const decisionTime = faturamento > 200000 ? 9 : 14;

  return (
    <section id={id} className="py-20 md:py-24 -mt-10">
      <div className="mx-auto max-w-7xl px-6 md:px-10">
        <Card className="p-6 md:p-10 grid lg:grid-cols-[1fr_1.1fr] gap-10 shadow-2xl shadow-black/5">
          <div>
            <div className="font-mono text-xs uppercase tracking-[0.18em] text-primary mb-3">{L ? 'Simulador' : 'Simulator'}</div>
            <h2 className="font-display text-3xl md:text-4xl tracking-tightest leading-tight">{L ? 'Simule em 30 segundos.' : 'Simulate in 30 seconds.'}</h2>
            <p className="text-muted mt-3">{L ? 'Estimativa ilustrativa. A taxa final depende do seu histórico de repasse, da operadora e dos recebíveis registrados em CERC/B3.' : 'Illustrative estimate. Final rate depends on your reimbursement history, the operator and receivables registered at CERC/B3.'}</p>

            <div className="mt-8 space-y-7">
              <div>
                <div className="text-sm font-medium mb-1">{L ? 'O que você quer antecipar' : 'What you want to advance'}</div>
                <Tabs value={tipo} onChange={setTipo} items={[
                  { value: 'convenios', label: L ? 'Convênios' : 'Health plans' },
                  { value: 'cartao', label: L ? 'Cartão' : 'Card' },
                  { value: 'giro', label: L ? 'Giro' : 'Working capital' },
                ]} />
              </div>

              <Field label={L ? 'Faturamento mensal da clínica' : 'Monthly practice billing'}>
                <Slider value={faturamento} onChange={setFaturamento} min={20000} max={2000000} step={10000} format={fmt} />
              </Field>
              <Field label={L ? 'Valor que você quer antecipar' : 'Amount to advance'}>
                <Slider value={ticket} onChange={setTicket} min={5000} max={Math.min(1500000, faturamento * 0.9)} step={5000} format={fmt} />
              </Field>
              <Field label={L ? 'Prazo do repasse (dias)' : 'Reimbursement term (days)'}>
                <Slider value={prazo} onChange={setPrazo} min={15} max={120} step={15} format={(v) => v + ' d'} />
              </Field>
            </div>
          </div>

          <div className="rounded-2xl bg-subtle border border-line p-6 md:p-8 self-start">
            <div className="font-mono text-xs uppercase tracking-[0.18em] text-muted">{L ? 'Estimativa flui.cash' : 'flui.cash estimate'}</div>
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-6 mt-6">
              <div>
                <div className="text-sm text-muted">{L ? 'Taxa estimada' : 'Estimated rate'}</div>
                <div className="font-display text-4xl sm:text-5xl tabular tracking-tightest mt-1 whitespace-nowrap">{ratePct}<span className="text-2xl text-muted">%</span></div>
                <div className="text-xs text-muted mt-1">{L ? 'a.m. — variável conforme análise' : '/mo — varies on analysis'}</div>
              </div>
              <div>
                <div className="text-sm text-muted">{L ? 'Você recebe hoje' : 'You receive today'}</div>
                <div className="font-display text-4xl sm:text-5xl tabular tracking-tightest mt-1 whitespace-nowrap">{fmt(ticket)}</div>
                <div className="text-xs text-muted mt-1">{L ? 'líquido, via Pix' : 'net, via Pix'}</div>
              </div>
              <div>
                <div className="text-sm text-muted">{L ? 'Custo total estimado' : 'Total estimated cost'}</div>
                <div className="font-display text-2xl tabular mt-1 whitespace-nowrap">{fmt(Math.round(totalCost))}</div>
              </div>
              <div>
                <div className="text-sm text-muted">{L ? 'Decisão prevista' : 'Expected decision'}</div>
                <div className="font-display text-2xl mt-1">~ {decisionTime} min</div>
              </div>
            </div>
            <div className="mt-8 flex flex-col sm:flex-row flex-wrap gap-3">
              <Button variant="accent" size="lg" className="w-full sm:w-auto justify-center">{L ? 'Continuar com CNPJ' : 'Continue with tax ID'} <Icon name="arrow-right" className="w-4 h-4" /></Button>
              <Button variant="ghost" size="lg" className="w-full sm:w-auto justify-center">{L ? 'Falar com especialista' : 'Talk to specialist'}</Button>
            </div>
            <div className="mt-6 text-xs text-muted leading-relaxed border-t border-line pt-4">
              {L
                ? 'Simulação ilustrativa. Não constitui oferta de crédito. A análise definitiva considera histórico de repasse da operadora, padrão de glosa, registros em CERC/B3 e fluxo de adquirência. Nenhum dado clínico de paciente é utilizado.'
                : 'Illustrative simulation. Not a credit offer. Final analysis considers operator reimbursement history, denial patterns, CERC/B3 records and acquirer flow. No patient clinical data is used.'}
            </div>
          </div>
        </Card>
      </div>
    </section>
  );
};

window.PmeHub = PmeHub;
window.CreditSimulator = CreditSimulator;