// HOME PAGE — v2 (sem AI Agents corporativos; narrativa AI Native operacional)
const HomePage = ({ locale, navigate }) => {
  const t = window.STRINGS[locale].home;
  const L = locale === 'pt';

  // tiny parallax on hero orb
  const [scrollY, setScrollY] = React.useState(0);
  React.useEffect(() => {
    const onScroll = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const pillars = L ? [
    { icon: 'spark', kicker: 'Decisão', title: 'A IA lê a sua produção', body: 'Analisamos o histórico de repasse das operadoras, o padrão de glosa por procedimento e o fluxo da sua maquininha. Quem atende bem e fatura certo paga menos — e a decisão sai calibrada, não por tabela genérica.' },
    { icon: 'flow', kicker: 'Onboarding', title: 'Sem pedir a mesma coisa 3 vezes', body: 'O agente da flui.cash conduz a conversa, lê os demonstrativos da operadora e valida os dados em segundos. Você responde do celular entre uma consulta e outra. Humano sênior entra quando faz diferença.' },
    { icon: 'bolt', kicker: 'Especialização', title: 'Só saúde. Por isso entendemos.', body: 'Não somos um banco que também atende clínica. Conhecemos TISS, glosa, prazo de operadora e sazonalidade de consultório — e precificamos com base nisso, não no medo do desconhecido.' },
  ] : [
    { icon: 'spark', kicker: 'Decision', title: 'AI reads your production', body: 'We analyze each operator\'s reimbursement history, denial patterns by procedure and your card flow. Good billing means better pricing — a calibrated decision, not a generic table.' },
    { icon: 'flow', kicker: 'Onboarding', title: 'We never ask twice', body: 'The flui.cash agent runs the conversation, reads operator statements and validates data in seconds. You answer from your phone between appointments. A senior human steps in when it matters.' },
    { icon: 'bolt', kicker: 'Focus', title: 'Healthcare only. That\'s why we get it.', body: 'We are not a bank that happens to serve clinics. We know TISS, claim denials, operator terms and practice seasonality — and we price on that, not on fear of the unknown.' },
  ];

  const hubs = L ? [
    { tag: 'Saúde', title: 'Para Sua Clínica', sub: 'Médicos, dentistas, fisioterapeutas, enfermeiros, técnicos de enfermagem, psicólogos e clínicas. Antecipe convênio e cartão em minutos.', cta: 'Ver produtos', href: '/pme' },
    { tag: 'Parceiros', title: 'Embarcado no seu software', sub: 'Sistemas de gestão de clínica, prontuário eletrônico e faturamento TISS oferecem antecipação flui.cash aos seus clientes.', cta: 'Ver modelos', href: '/partners' },
  ] : [
    { tag: 'Health', title: 'For Your Practice', sub: 'Physicians, dentists, physiotherapists, nurses, nursing technicians, psychologists and clinics. Advance plan and card receivables in minutes.', cta: 'See products', href: '/pme' },
    { tag: 'Partners', title: 'Embedded in your software', sub: 'Practice management, electronic records and TISS billing platforms offer flui.cash advances to their clients.', cta: 'See models', href: '/partners' },
  ];

  return (
    <main>
      {/* HERO */}
      <section className="relative pt-32 pb-24 md:pt-40 md:pb-32 overflow-hidden">
        <Aurora />
        <div className="absolute inset-0 grain opacity-50 pointer-events-none -z-10" />
        <div className="mx-auto max-w-7xl px-6 md:px-10 grid lg:grid-cols-[1.1fr_1fr] gap-16 items-center">
          <div>
            <Reveal>
              <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full border border-line bg-card text-xs">
                <span className="w-1.5 h-1.5 rounded-full bg-primary"></span>
                <span className="font-mono uppercase tracking-[0.16em] text-muted">{t.eyebrow}</span>
              </div>
            </Reveal>
            <Reveal delay={80}>
              <h1 className="font-display text-5xl md:text-7xl leading-[0.95] tracking-tightest mt-6">
                {t.h1a}<br />
                <span className="text-muted">{t.h1b}</span><br />
                <span>{t.h1c}</span>
              </h1>
            </Reveal>
            <Reveal delay={140}>
              <p className="text-muted text-lg md:text-xl mt-6 max-w-xl leading-relaxed">{t.sub}</p>
            </Reveal>
            <Reveal delay={220}>
              <div className="flex flex-wrap gap-3 mt-8">
                <Button variant="accent" size="lg" onClick={() => navigate('/pme#sim')}>
                  {t.cta1} <Icon name="arrow-right" className="w-4 h-4" />
                </Button>
                <Button variant="ghost" size="lg" onClick={() => navigate('/partners')}>
                  {t.cta2} <Icon name="arrow-up-right" className="w-4 h-4" />
                </Button>
              </div>
            </Reveal>
            <Reveal delay={320}>
              <div className="mt-10 flex items-center gap-6 text-sm text-muted flex-wrap">
                <div className="flex items-center gap-2"><Icon name="shield" className="w-4 h-4" /> {L ? 'Parceiros regulados' : 'Regulated partners'}</div>
                <div className="hidden md:flex items-center gap-2"><Icon name="bolt" className="w-4 h-4" /> {L ? 'Dinheiro no mesmo dia' : 'Same-day cash'}</div>
                <div className="hidden md:flex items-center gap-2"><Icon name="lock" className="w-4 h-4" /> LGPD</div>
              </div>
            </Reveal>
          </div>

          <div className="relative" style={{ transform: `translateY(${-scrollY * 0.06}px)` }}>
            <FlowOrb />
          </div>
        </div>
      </section>

      {/* AI Native band */}
      <section className="border-y border-line bg-subtle">
        <div className="mx-auto max-w-7xl px-6 md:px-10 py-10 md:py-14 flex items-center justify-between gap-6 flex-wrap">
          <div className="font-display text-2xl md:text-4xl tracking-tightest leading-tight max-w-3xl">
            {t.aiNative.split('—')[0]}<span className="text-muted">—{t.aiNative.split('—')[1]}</span>
          </div>
          <div className="font-mono text-xs uppercase tracking-[0.18em] text-muted hidden md:block">
            <span className="block">Saúde · 2026</span>
            <span className="block">São Paulo / BR</span>
          </div>
        </div>
      </section>

      {/* Proof */}
      <section className="py-20 md:py-28">
        <div className="mx-auto max-w-7xl px-6 md:px-10">
          <div className="grid lg:grid-cols-[1.1fr_2fr] gap-12 items-end mb-12">
            <h2 className="font-display text-3xl md:text-4xl leading-[1.1] max-w-md">{t.proofTitle}</h2>
            <div className="grid grid-cols-2 md:grid-cols-3 gap-8">
              <MetricBig value="R$ 400B" label={L ? 'Movimentados pela saúde privada/ano' : 'Moved by private healthcare/yr'} sub={L ? 'ANS + IESS, 2025' : 'ANS + IESS, 2025'} />
              <MetricBig value="51M" label={L ? 'Brasileiros com plano de saúde' : 'Brazilians with a health plan'} sub={L ? 'Beneficiários ANS, 2025' : 'ANS beneficiaries, 2025'} />
              <MetricBig value="60d" label={L ? 'Prazo típico de repasse da operadora' : 'Typical operator payment term'} sub={L ? 'Antes da flui.cash' : 'Before flui.cash'} />
            </div>
          </div>
          <div className="border-t border-line pt-10">
            <div className="font-mono text-xs uppercase tracking-[0.18em] text-muted mb-6">{L ? 'Antecipamos repasses das principais operadoras e vendas das principais adquirentes' : 'We advance receivables from major health operators and acquirers'}</div>
            <LogoStrip items={['Unimed', 'Bradesco Saúde', 'SulAmérica', 'Amil', 'Hapvida', 'Stone', 'Cielo', 'Pix']} />
          </div>
        </div>
      </section>

      {/* Problem */}
      <section className="py-20 md:py-28 bg-subtle border-y border-line">
        <div className="mx-auto max-w-7xl px-6 md:px-10 grid lg:grid-cols-[1fr_1.4fr] gap-12">
          <div>
            <div className="font-mono text-xs uppercase tracking-[0.18em] text-muted mb-4">{t.problemKicker}</div>
            <h2 className="font-display text-4xl md:text-5xl leading-[1.05] tracking-tightest">{t.problemTitle}</h2>
          </div>
          <div className="space-y-6">
            <p className="text-lg text-fg leading-relaxed">{t.problemBody}</p>
            <div className="grid sm:grid-cols-3 gap-4 pt-4">
              {[
                { v: '30–90d', l: L ? 'Prazo do repasse da operadora' : 'Operator reimbursement term' },
                { v: '3–8%', l: L ? 'Do faturamento perdido em glosa' : 'Of billing lost to claim denials' },
                { v: '11 dias', l: L ? 'Para o banco responder a uma clínica' : 'For a bank to answer a clinic' },
              ].map((x, i) => (
                <div key={i} className="bg-card border border-line rounded-2xl p-5">
                  <div className="font-display text-3xl tabular">{x.v}</div>
                  <div className="text-sm text-muted mt-1">{x.l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* 3 pillars */}
      <Section eyebrow="03" title={t.pillarsTitle} className="py-24 md:py-32">
        <div className="grid md:grid-cols-3 gap-4">
          {pillars.map((p, i) => (
            <Reveal key={i} delay={i * 70}><PillarCard {...p} idx={i+1} /></Reveal>
          ))}
        </div>
      </Section>

      {/* Editorial — How flui.cash is different */}
      <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-16 items-center">
          <Reveal>
            <EditorialTime />
          </Reveal>
          <Reveal delay={140}>
            <div>
              <div className="font-mono text-xs uppercase tracking-[0.18em] text-accent mb-4">{t.editorialKicker}</div>
              <h2 className="font-display text-4xl md:text-6xl leading-[1.0] tracking-tightest mb-6">{t.editorialTitle}</h2>
              <p className="text-muted text-lg max-w-xl leading-relaxed">{t.editorialBody}</p>
              <div className="grid grid-cols-2 gap-4 mt-10 max-w-md">
                <div>
                  <div className="font-display text-4xl tabular text-accent">— 70%</div>
                  <div className="text-sm text-muted mt-1">{L ? 'custo operacional vs. banco médio' : 'operational cost vs avg bank'}</div>
                </div>
                <div>
                  <div className="font-display text-4xl tabular">10×</div>
                  <div className="text-sm text-muted mt-1">{L ? 'mais rápido que o prazo da operadora' : 'faster than the operator term'}</div>
                </div>
              </div>
              <Button variant="primary" className="mt-10" onClick={() => navigate('/how')}>
                {L ? 'Como funciona' : 'How it works'} <Icon name="arrow-right" className="w-4 h-4" />
              </Button>
            </div>
          </Reveal>
        </div>
      </section>

      {/* Hubs (PME + Partners) */}
      <Section eyebrow="02" title={t.hubsTitle} className="py-24 md:py-32">
        <div className="grid md:grid-cols-2 gap-4">
          {hubs.map((h, i) => (
            <Reveal key={i} delay={i * 90}>
              <a href={'#'+h.href} onClick={(e) => { e.preventDefault(); navigate(h.href); }}
                 className="group block p-8 bg-card border border-line rounded-3xl hover:border-fg/40 transition-all relative overflow-hidden h-full">
                <div className="font-mono text-xs uppercase tracking-[0.18em] text-muted mb-12">{h.tag}</div>
                <h3 className="font-display text-3xl mb-4 leading-tight">{h.title}</h3>
                <p className="text-muted mb-12">{h.sub}</p>
                <div className="flex items-center gap-2 text-fg font-medium">
                  {h.cta} <Icon name="arrow-right" className="w-4 h-4 transition-transform group-hover:translate-x-1" />
                </div>
                <div className="absolute -bottom-20 -right-20 w-60 h-60 rounded-full opacity-10 group-hover:opacity-25 transition-opacity"
                  style={{ background: i === 0 ? 'rgb(var(--primary))' : 'rgb(var(--accent))' }} />
              </a>
            </Reveal>
          ))}
        </div>
      </Section>

      {/* Decision flow — DARK */}
      <section className="py-24 md:py-32 bg-[#0D0E0B] text-[#F9F8F6]">
        <div className="mx-auto max-w-7xl px-6 md:px-10">
          <div className="grid lg:grid-cols-[1fr_1.6fr] gap-12 items-end mb-12">
            <div>
              <div className="font-mono text-xs uppercase tracking-[0.18em] text-white/50 mb-4">{t.decideKicker}</div>
              <h2 className="font-display text-4xl md:text-5xl leading-[1.0] tracking-tightest">{t.decideTitle}</h2>
            </div>
            <p className="text-white/70 text-lg max-w-xl">
              {L
                ? 'A flui.cash lê o histórico de repasse das operadoras, o padrão de glosa por procedimento, o registro de recebíveis em CERC/B3 e o fluxo da adquirência da clínica. Nada de prontuário, nada de dado clínico do paciente — só o financeiro. Agente conversacional faz o onboarding em minutos; humano sênior entra quando faz diferença.'
                : 'flui.cash reads operator reimbursement history, denial patterns by procedure, receivables registered at CERC/B3 and the practice card flow. No medical records, no patient clinical data — financial only. A conversational agent runs onboarding in minutes; a senior human steps in when it matters.'}
            </p>
          </div>
          <DecisionFlow />
          <div className="mt-12 grid md:grid-cols-3 gap-6">
            {[
              { v: 'Minutos', l: L ? 'Tempo médio de aprovação' : 'Avg approval time' },
              { v: '0', l: L ? 'Dados clínicos de paciente acessados' : 'Patient clinical records accessed' },
              { v: '0', l: L ? 'Comitês humanos no caminho crítico' : 'Human committees on critical path' },
            ].map((m, i) => (
              <div key={i} className="border-t border-white/10 pt-5">
                <div className="font-display text-4xl md:text-5xl tabular text-[rgb(var(--primary))]">{m.v}</div>
                <div className="text-white/70 mt-2">{m.l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Partners + Privacy */}
      <Section eyebrow={t.complianceKicker} title={t.complianceTitle} className="py-24 md:py-28">
        <div className="grid lg:grid-cols-[1.2fr_1fr] gap-10 items-start mb-10">
          <p className="text-muted text-lg leading-relaxed max-w-xl">{t.complianceBody}</p>
        </div>
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
          {[
            { tag: L ? 'BaaS Parceiro' : 'BaaS Partner', t: L ? 'Camada regulada' : 'Regulated layer', d: L ? 'Score, registro de recebíveis (CERC/B3) e integração com adquirentes — operados por instituição regulada pelo BACEN.' : 'Score, receivables registry (CERC/B3) and acquirer integrations — operated by a BACEN-regulated institution.' },
            { tag: L ? 'Gestora FIDC' : 'FIDC Manager', t: L ? 'Fundo regulado' : 'Regulated fund', d: L ? 'Gestão do FIDC operada por gestora autorizada pela CVM. A flui.cash capitaliza com capital próprio.' : 'FIDC management operated by a CVM-authorized manager. flui.cash capitalizes with own capital.' },
            { tag: 'LGPD', t: L ? 'Dados protegidos' : 'Data protected', d: L ? 'Pipeline de dados auditável; PII isolada; DPO dedicado; canal de exercício de direito do titular.' : 'Auditable data pipeline; isolated PII; dedicated DPO; data subject rights channel.' },
            { tag: L ? 'Sigilo em Saúde' : 'Health Data', t: L ? 'Sem dado clínico' : 'No clinical data', d: L ? 'Trabalhamos apenas com o financeiro do atendimento: valor, operadora, data e status de repasse. Prontuário, diagnóstico e dado de paciente não entram na nossa esteira.' : 'We work only with the financial side of care: amount, operator, date and reimbursement status. Medical records, diagnoses and patient data never enter our rails.' },
          ].map((s, i) => (
            <Card key={i} className="p-6">
              <div className="font-mono text-[10px] uppercase tracking-[0.2em] text-muted mb-6">{s.tag}</div>
              <div className="font-display text-xl mb-2">{s.t}</div>
              <div className="text-sm text-muted leading-relaxed">{s.d}</div>
            </Card>
          ))}
        </div>
      </Section>

      {/* Final CTA */}
      <section className="relative py-24 md:py-32 overflow-hidden">
        <Aurora />
        <div className="mx-auto max-w-5xl px-6 md:px-10 text-center">
          <h2 className="font-display text-5xl md:text-7xl leading-[0.95] tracking-tightest">{t.ctaFinal}</h2>
          <p className="text-muted text-lg md:text-xl mt-5 max-w-2xl mx-auto">{t.ctaFinalSub}</p>
          <div className="flex flex-wrap gap-3 justify-center mt-10">
            <Button variant="accent" size="lg" onClick={() => navigate('/pme#sim')}>{t.cta1} <Icon name="arrow-right" className="w-4 h-4" /></Button>
            <Button variant="secondary" size="lg" onClick={() => navigate('/contact')}>{L ? 'Falar com a flui.cash' : 'Talk to flui.cash'}</Button>
          </div>
        </div>
      </section>
    </main>
  );
};

window.HomePage = HomePage;
