// Partners (CaaS / BaaS) hub
const PartnersHub = ({ locale, navigate }) => {
  const L = locale === 'pt';
  return (
    <main>
      <section className="relative pt-32 pb-20 md:pt-40 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-accent mb-4">{L ? 'Para Parceiros' : 'For Partners'}</div>
            <h1 className="font-display text-5xl md:text-7xl tracking-tightest leading-[0.95]">{L ? 'Antecipação embarcada no seu software de saúde.' : 'Advances embedded in your healthcare software.'}</h1>
            <p className="text-muted text-lg md:text-xl mt-6 max-w-xl">{L ? 'Para sistemas de gestão de clínica, prontuário eletrônico e plataformas de faturamento TISS que querem oferecer antecipação de verdade aos seus clientes — sem virar uma fintech regulada.' : 'For practice management systems, electronic records and TISS billing platforms that want to offer real advances to their clients — without becoming a regulated fintech.'}</p>
            <div className="flex gap-3 mt-8">
              <Button variant="accent" size="lg" onClick={() => document.getElementById('p-form')?.scrollIntoView({ behavior: 'smooth' })}>{L ? 'Falar com parcerias' : 'Talk to partnerships'} <Icon name="arrow-right" className="w-4 h-4" /></Button>
              <Button variant="secondary" size="lg" onClick={() => navigate('/how')}>{L ? 'Como integramos' : 'How we integrate'}</Button>
            </div>
          </div>
          <div><PartnerDiagram /></div>
        </div>
      </section>

      <Section eyebrow={L ? 'Modelos' : 'Models'} title={L ? 'Três formas de embarcar.' : 'Three ways to embed.'} className="py-24">
        <div className="grid md:grid-cols-3 gap-4">
          {(L ? [
            { tag: 'CaaS', t: 'Credit as a Service', d: 'Seu software usa nossa esteira de antecipação por API. Sua marca, nossa engenharia regulatória.', bs: ['API white-label', 'Análise + decisão + esteira', 'Você define a UX'] },
            { tag: 'BaaS', t: 'Banking as a Service', d: 'Conta, Pix, boleto e antecipação embarcados. Para healthtechs que querem o stack financeiro completo.', bs: ['Conta digital + antecipação', 'Compliance e KYC inclusos', 'Suporte regulatório'] },
            { tag: 'IND', t: 'Indicação', d: 'Contabilidade, consultoria e associações de classe indicam; a flui.cash opera. Comissão por contratação.', bs: ['Sem integração técnica', 'Painel de indicações', 'Comissão recorrente'] },
          ] : [
            { tag: 'CaaS', t: 'Credit as a Service', d: 'Use our credit rails via API. Your brand, our regulatory engineering.', bs: ['White-label API', 'Analysis + decision + rails', 'You own the UX'] },
            { tag: 'BaaS', t: 'Banking as a Service', d: 'Account, Pix, boleto and embedded credit. For vertical fintechs that want the full stack.', bs: ['Digital account + credit', 'Compliance and KYC included', 'Regulatory support'] },
            { tag: 'IND', t: 'Referral', d: 'You refer, flui.cash operates. Commission per signed deal. No tech complexity.', bs: ['No technical integration', 'Referral dashboard', 'Recurring commission'] },
          ]).map((m, i) => (
            <Card key={i} className="p-7 h-full">
              <div className="font-mono text-xs text-muted">{m.tag}</div>
              <div className="font-display text-2xl mt-3">{m.t}</div>
              <div className="text-muted text-sm mt-3">{m.d}</div>
              <ul className="mt-6 space-y-2">
                {m.bs.map((b, k) => <li key={k} className="text-sm flex items-start gap-2"><Icon name="check" className="w-4 h-4 mt-0.5 text-primary shrink-0" /><span>{b}</span></li>)}
              </ul>
            </Card>
          ))}
        </div>
      </Section>

      <section className="py-24 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 ? 'Casos de uso' : 'Use cases'}</div>
          <div className="grid md:grid-cols-3 gap-4">
            {(L ? [
              ['Software de clínica', 'O sistema de gestão oferece antecipação dentro da tela de faturamento — o profissional nem sai do fluxo.'],
              ['Faturamento TISS', 'A plataforma de faturamento antecipa o lote assim que ele é transmitido para a operadora.'],
              ['Contabilidade e associações', 'Escritórios contábeis de saúde e conselhos de classe indicam a antecipação para a sua base.'],
            ] : [
              ['Practice software', 'The management system offers advances right inside the billing screen.'],
              ['TISS billing', 'The billing platform advances the batch as soon as it is transmitted to the operator.'],
              ['Accounting and associations', 'Healthcare accounting firms and professional councils refer advances to their base.'],
            ]).map(([t, d], i) => (
              <Card key={i} className="p-7"><div className="font-mono text-[10px] uppercase tracking-[0.18em] text-muted">{t}</div><div className="text-fg mt-3">{d}</div></Card>
            ))}
          </div>
        </div>
      </section>

      <section id="p-form" className="py-24">
        <div className="mx-auto max-w-3xl px-6 md:px-10">
          <div className="font-mono text-xs uppercase tracking-[0.18em] text-muted mb-3">{L ? 'Conversa com parcerias' : 'Talk to partnerships'}</div>
          <h2 className="font-display text-4xl md:text-5xl tracking-tightest leading-[1.0]">{L ? 'Conte o que você quer embarcar.' : 'Tell us what you want to embed.'}</h2>
          <PartnerForm locale={locale} />
        </div>
      </section>
    </main>
  );
};

const PartnerDiagram = () => (
  <svg viewBox="0 0 480 360" className="w-full">
    <defs>
      <marker id="arr" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto" markerUnits="strokeWidth">
        <path d="M0,0 L6,3 L0,6 z" fill="rgb(var(--fg))" opacity="0.5" />
      </marker>
    </defs>
    <rect x="20" y="20" width="180" height="80" rx="14" fill="rgb(var(--card))" stroke="rgb(var(--line))" />
    <text x="40" y="55" fontFamily="JetBrains Mono" fontSize="10" letterSpacing="2" fill="rgb(var(--muted))">PARCEIRO</text>
    <text x="40" y="80" fontFamily="Inter" fontWeight="600" fontSize="16" fill="rgb(var(--fg))">Software de saúde</text>

    <rect x="280" y="20" width="180" height="80" rx="14" fill="rgb(var(--card))" stroke="rgb(var(--line))" />
    <text x="300" y="55" fontFamily="JetBrains Mono" fontSize="10" letterSpacing="2" fill="rgb(var(--muted))">CLIENTE</text>
    <text x="300" y="80" fontFamily="Inter" fontWeight="600" fontSize="16" fill="rgb(var(--fg))">Clínica / profissional</text>

    <rect x="100" y="160" width="280" height="170" rx="20" fill="rgb(var(--fg))" />
    <text x="120" y="195" fontFamily="JetBrains Mono" fontSize="10" letterSpacing="2" fill="rgb(var(--bg))" opacity="0.7">FLUI.CASH · API</text>
    <text x="120" y="225" fontFamily="Inter" fontWeight="700" fontSize="22" fill="rgb(var(--bg))">Decisão · Esteira · Registro</text>
    <g fontFamily="Inter" fontSize="13" fill="rgb(var(--bg))" opacity="0.85">
      <text x="120" y="252">Risco IA</text>
      <text x="220" y="252">CERC / B3</text>
      <text x="320" y="252">BACEN</text>
      <text x="120" y="278">Conta + Pix</text>
      <text x="220" y="278">KYC</text>
      <text x="320" y="278">SLA 99.9%</text>
    </g>

    <line x1="110" y1="100" x2="180" y2="160" stroke="rgb(var(--fg))" strokeOpacity="0.5" markerEnd="url(#arr)" />
    <line x1="370" y1="100" x2="300" y2="160" stroke="rgb(var(--fg))" strokeOpacity="0.5" markerEnd="url(#arr)" />
    <line x1="180" y1="160" x2="110" y2="100" stroke="rgb(var(--primary))" strokeWidth="1.5" strokeDasharray="3 3" />
    <line x1="300" y1="160" x2="370" y2="100" stroke="rgb(var(--primary))" strokeWidth="1.5" strokeDasharray="3 3" />
  </svg>
);

const PartnerForm = ({ locale }) => {
  const L = locale === 'pt';
  const [submitted, setSubmitted] = React.useState(false);
  if (submitted) return (
    <div className="mt-10 p-8 bg-card border border-line rounded-2xl">
      <Icon name="check" className="w-8 h-8 text-primary" />
      <div className="font-display text-2xl mt-4">{L ? 'Recebido. Falamos em até 48h.' : 'Received. We get back in 48h.'}</div>
    </div>
  );
  return (
    <form className="mt-10 grid md:grid-cols-2 gap-5" onSubmit={(e) => { e.preventDefault(); setSubmitted(true); }}>
      <Field label={L ? 'Empresa' : 'Company'}><Input required /></Field>
      <Field label={L ? 'Modelo de interesse' : 'Interest'}><Select><option>CaaS</option><option>BaaS</option><option>{L ? 'Indicação' : 'Referral'}</option></Select></Field>
      <Field label={L ? 'Vertical' : 'Vertical'}><Select><option>{L ? 'Sistema de gestão de clínica' : 'Practice management'}</option><option>{L ? 'Prontuário eletrônico' : 'Electronic records'}</option><option>{L ? 'Faturamento TISS' : 'TISS billing'}</option><option>{L ? 'Contabilidade / associação' : 'Accounting / association'}</option><option>{L ? 'Outro' : 'Other'}</option></Select></Field>
      <Field label={L ? 'Volume mensal estimado' : 'Estimated monthly volume'}><Input placeholder="R$ 1M / mo" /></Field>
      <div className="md:col-span-2"><Field label={L ? 'Conte o caso de uso' : 'Tell us the use case'}><Textarea /></Field></div>
      <div className="md:col-span-2 flex justify-end"><Button variant="accent" size="lg" type="submit">{L ? 'Enviar' : 'Submit'} <Icon name="arrow-right" className="w-4 h-4" /></Button></div>
    </form>
  );
};

window.PartnersHub = PartnersHub;