// How it works, About, Careers, Blog, Contact, Legal
const HowPage = ({ locale, navigate }) => {
  const L = locale === 'pt';
  return (
    <main>
      <section className="pt-32 pb-16 md:pt-40">
        <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-4">{L ? 'Como funciona' : 'How it works'}</div>
          <h1 className="font-display text-5xl md:text-7xl tracking-tightest leading-[0.95] max-w-4xl">{L ? 'Como antecipamos convênio e cartão para quem atende paciente.' : 'How we advance health-plan and card receivables for care providers.'}</h1>
        </div>
      </section>

      <Section eyebrow={L ? 'Tese' : 'Thesis'} title={L ? 'Três coisas que só uma fintech de saúde faz.' : 'Three things only a healthcare fintech does.'} className="py-20">
        <div className="grid md:grid-cols-3 gap-4">
          {(L ? [
            ['O recebível certo', 'O ativo é o atendimento já realizado: o repasse que a operadora deve e a venda que já passou na maquininha. Previsível por natureza.'],
            ['Glosa como variável, não como susto', 'O modelo lê o seu histórico de glosa por procedimento e por operadora e precifica isso antes — em vez de descobrir depois e repassar o custo para você.'],
            ['Zero dado clínico', 'Trabalhamos só com o financeiro do atendimento. Prontuário, diagnóstico e identificação de paciente nunca entram na esteira.'],
          ] : [
            ['The right receivable', 'The asset is care already delivered: what the operator owes and what already ran through the terminal. Predictable by nature.'],
            ['Denials as a variable, not a shock', 'The model reads your denial history by procedure and operator and prices it upfront — instead of discovering it later and passing the cost on to you.'],
            ['Zero clinical data', 'We work only with the financial side of care. Records, diagnoses and patient identity never enter the rails.'],
          ]).map(([t, d], i) => (
            <Card key={i} className="p-7"><div className="font-mono text-xs text-muted">0{i+1}</div><div className="font-display text-xl mt-3">{t}</div><div className="text-muted mt-3">{d}</div></Card>
          ))}
        </div>
      </Section>

      <section className="py-20 bg-[#0D0E0B] text-[#F9F8F6]">
        <div className="mx-auto max-w-7xl px-6 md:px-10">
          <div className="font-mono text-xs uppercase tracking-[0.18em] text-white/50 mb-6">{L ? 'Motor de risco' : 'Risk engine'}</div>
          <h2 className="font-display text-4xl md:text-5xl tracking-tightest mb-12 max-w-3xl">{L ? 'O que entra, como decide, o que sai.' : 'What goes in, how it decides, what comes out.'}</h2>
          <DecisionFlow />
        </div>
      </section>

      <Section eyebrow={L ? 'Segurança & Regulação' : 'Security & Regulation'} title={L ? 'Construído sobre as regras certas.' : 'Built on the right rules.'} className="py-24">
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
          {(L ? [
            ['BACEN', 'Operação de crédito conduzida por instituição financeira parceira regulada pelo Banco Central do Brasil.'],
            ['CERC / B3', 'Registradoras autorizadas; todo recebível antecipado é registrado.'],
            ['LGPD', 'Lei 13.709 — pipeline auditável, DPO dedicado, opt-out claro.'],
            ['Sigilo em saúde', 'Não acessamos prontuário, diagnóstico ou identificação de paciente. Só o financeiro do atendimento.'],
            ['ISO 27001', 'Gestão de segurança da informação, em implementação.'],
            ['Open Finance', 'Dados financeiros sob consentimento explícito da clínica.'],
          ] : [
            ['BACEN', 'Credit operations conducted by a partner financial institution regulated by the Brazilian Central Bank.'],
            ['CERC / B3', 'Authorized registrars; every advanced receivable is registered.'],
            ['LGPD', 'Law 13.709 — auditable pipeline, dedicated DPO, clear opt-out.'],
            ['Health confidentiality', 'We never access records, diagnoses or patient identity. Financial data only.'],
            ['ISO 27001', 'Information security management, in progress.'],
            ['Open Finance', 'Financial data under explicit consent from the practice.'],
          ]).map(([t, d], i) => (
            <Card key={i} className="p-6"><Icon name="shield" className="w-5 h-5 text-secondary" /><div className="font-display text-lg mt-4">{t}</div><div className="text-sm text-muted mt-2">{d}</div></Card>
          ))}
        </div>
      </Section>
    </main>
  );
};

const AboutPage = ({ locale, navigate }) => {
  const L = locale === 'pt';
  return (
    <main>
      <section className="pt-32 pb-16 md:pt-40">
        <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-4">{L ? 'Sobre' : 'About'}</div>
          <h1 className="font-display text-5xl md:text-7xl tracking-tightest leading-[0.95] max-w-4xl">{L ? 'Existimos porque quem cuida de gente não deveria esperar 60 dias.' : 'We exist because those who care for people should not wait 60 days.'}</h1>
        </div>
      </section>

      <Section eyebrow={L ? 'Nossa tese' : 'Our thesis'} className="py-20">
        <div className="grid md:grid-cols-3 gap-12 max-w-5xl">
          <div><div className="font-display text-2xl mb-3">{L ? 'Só saúde' : 'Healthcare only'}</div><div className="text-muted">{L ? 'Um único setor, entendido a fundo. Sabemos o que é glosa, TISS, RPA e prazo de operadora — e precificamos com base nisso.' : 'One sector, understood deeply. We know claim denials, TISS, and operator terms — and we price on that.'}</div></div>
          <div><div className="font-display text-2xl mb-3">{L ? 'Zero dado clínico' : 'Zero clinical data'}</div><div className="text-muted">{L ? 'Prontuário e diagnóstico não são da nossa conta. Trabalhamos com valor, operadora, data e status de repasse — nada além.' : 'Records and diagnoses are none of our business. We work with amount, operator, date and reimbursement status — nothing more.'}</div></div>
          <div><div className="font-display text-2xl mb-3">{L ? 'Transparência sobre glosa' : 'Transparent on denials'}</div><div className="text-muted">{L ? 'A glosa é precificada antes, não descoberta depois. Se acontecer, compensa no próximo repasse — sem multa e sem juros de mora.' : 'Denials are priced upfront, not discovered later. If one happens, it offsets the next reimbursement — no penalty, no late interest.'}</div></div>
        </div>
      </Section>

      <Section eyebrow={L ? 'Como nascemos' : 'How we started'} title={L ? 'Começou com uma pergunta simples.' : 'It started with a simple question.'} className="py-20 bg-subtle border-y border-line">
        <p className="text-lg text-fg max-w-3xl">{L ? 'Por que um fisioterapeuta que atendeu 80 pacientes no mês precisa entrar no cheque especial para pagar a equipe, enquanto espera o repasse de uma operadora que já sabe exatamente quanto deve a ele? O crédito tradicional olha para o CNPJ e vê uma clínica pequena. Nós olhamos e vemos um recebível previsível, com contraparte de grande porte e prazo conhecido. A resposta foi construir uma fintech que entende glosa, TISS e prazo de operadora tão bem quanto entende risco de crédito.' : 'Why does a physiotherapist who treated 80 patients this month need an overdraft to make payroll, while waiting on an operator that already knows exactly what it owes? Traditional credit looks at the tax ID and sees a small clinic. We look and see a predictable receivable with a large counterparty and a known term.'}</p>
      </Section>

      <Section eyebrow={L ? 'Liderança por função' : 'Leadership by function'} title={L ? 'Time pequeno e sênior. Funções, não egos.' : 'Small senior team. Functions, not egos.'} sub={L ? 'Apresentamos liderança por área operacional — sem fotos, sem nomes individuais. O que importa é a função e a accountability.' : 'We show leadership by operational area — no photos, no individual names. Function and accountability is what matters.'} className="py-24">
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
          {(L ? [
            ['Liderança de Produto', 'Define o que entra na esteira. Mantém o profissional de saúde no centro de cada decisão de roadmap.', 'spark'],
            ['Liderança de Crédito', 'Donos do modelo de risco e da pilha regulatória. Falam com operadora e com dono de clínica no mesmo dia.', 'graph'],
            ['Liderança de Tecnologia', 'Engenharia, modelos próprios, segurança. Garante que IA é núcleo — não hype.', 'circuit'],
            ['Liderança de Faturamento', 'Conhece TISS, glosa e o ritmo de cada operadora por dentro. Faz a esteira rodar sem travar a clínica.', 'flow'],
          ] : [
            ['Product Leadership', 'Owns what enters the rails. Keeps the healthcare professional at the center of every roadmap call.', 'spark'],
            ['Credit Leadership', 'Owns the risk model and the regulatory stack. Talks to a health operator and a clinic owner on the same day.', 'graph'],
            ['Technology Leadership', 'Engineering, proprietary models, security. Ensures AI is the core — not the hype.', 'circuit'],
            ['Billing Leadership', 'Knows TISS, denials and each operator rhythm from the inside. Keeps the rails moving.', 'flow'],
          ]).map(([t, d, ic], i) => (
            <Card key={i} className="p-7">
              <div className="w-11 h-11 rounded-xl bg-subtle border border-line grid place-items-center mb-6"><Icon name={ic} className="w-5 h-5" /></div>
              <div className="font-display text-lg">{t}</div>
              <div className="text-sm text-muted mt-3 leading-relaxed">{d}</div>
            </Card>
          ))}
        </div>
      </Section>

      <Section eyebrow={L ? 'Valores' : 'Values'} className="py-24 bg-subtle border-y border-line">
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
          {(L ? [
            ['Honestidade sobre taxa', 'Sem letras miúdas. A taxa que aparece é a que se paga.'],
            ['O paciente vem antes', 'Nada que a gente construa pode roubar o tempo que o profissional dedica a quem está na maca.'],
            ['IA com humano sênior', 'Modelo decide, humano sênior assume na borda.'],
            ['Densidade > hierarquia', 'Times pequenos, decisão rápida, contexto compartilhado.'],
          ] : [
            ['Honest on rate', 'No fine print. The rate you see is the rate you pay.'],
            ['Patients come first', 'Nothing we build may steal time the professional owes the person on the table.'],
            ['AI with senior humans', 'Model decides, senior human takes over at the edge.'],
            ['Density > hierarchy', 'Small teams, fast decisions, shared context.'],
          ]).map(([t, d], i) => (
            <Card key={i} className="p-6"><div className="font-display text-lg">{t}</div><div className="text-sm text-muted mt-2">{d}</div></Card>
          ))}
        </div>
      </Section>
    </main>
  );
};

const CareersPage = ({ locale, navigate }) => {
  const L = locale === 'pt';
  const roles = [
    { area: L ? 'Engenharia' : 'Engineering', title: L ? 'Eng. Sênior · Plataforma de Crédito' : 'Senior Eng · Credit Platform', tags: ['Go', 'AWS', L ? 'Híbrido SP' : 'Hybrid SP'] },
    { area: 'ML', title: L ? 'Cientista de Dados · Modelo de Glosa' : 'Data Scientist · Denial Models', tags: ['Python', 'Causal ML', 'SP'] },
    { area: L ? 'Faturamento' : 'Billing', title: L ? 'Especialista em Faturamento em Saúde (TISS)' : 'Healthcare Billing Specialist (TISS)', tags: ['TISS', L ? 'Glosa' : 'Denials', 'SP'] },
    { area: L ? 'Produto' : 'Product', title: L ? 'PM · Antecipação de Convênios' : 'PM · Health-plan Advances', tags: ['Health', 'AI', 'SP'] },
    { area: L ? 'Operações' : 'Operations', title: L ? 'Líder de Atendimento Sênior' : 'Senior Support Lead', tags: [L ? 'Híbrido' : 'Hybrid', 'SP'] },
    { area: 'GTM', title: L ? 'Account Executive · Clínicas' : 'Account Executive · Clinics', tags: [L ? 'Saúde' : 'Health', 'B2B', 'SP'] },
  ];
  return (
    <main>
      <section className="pt-32 pb-16 md:pt-40">
        <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-4">{L ? 'Carreiras' : 'Careers'}</div>
          <h1 className="font-display text-5xl md:text-7xl tracking-tightest leading-[0.95] max-w-4xl">{L ? 'Time pequeno, problema grande, alavancagem rara.' : 'Small team, big problem, rare leverage.'}</h1>
          <p className="text-muted text-lg mt-6 max-w-2xl">{L ? 'Procuramos gente sênior que entenda de saúde, de crédito, ou das duas coisas. Se você já brigou com uma glosa, temos assunto. Vagas em São Paulo, modelo híbrido.' : 'We look for senior people who understand healthcare, credit, or both. Roles in São Paulo, hybrid.'}</p>
        </div>
      </section>

      <Section eyebrow={L ? 'Vagas abertas' : 'Open roles'} className="py-20">
        <div className="border-y border-line">
          {roles.map((r, i) => (
            <a key={i} href="#" onClick={(e) => e.preventDefault()} className="flex items-center gap-6 py-6 border-b border-line group hover:bg-subtle transition-colors px-3 -mx-3 rounded-lg">
              <div className="font-mono text-xs uppercase tracking-[0.18em] text-muted w-32 shrink-0">{r.area}</div>
              <div className="flex-1 font-display text-xl">{r.title}</div>
              <div className="hidden md:flex gap-2">{r.tags.map(t => <Badge key={t}>{t}</Badge>)}</div>
              <Icon name="arrow-up-right" className="w-5 h-5 text-muted group-hover:text-fg group-hover:-translate-y-0.5 group-hover:translate-x-0.5 transition-all" />
            </a>
          ))}
        </div>
        <div className="mt-10 max-w-2xl">
          <div className="font-display text-xl mb-2">{L ? 'Não viu sua vaga?' : 'Don\'t see your role?'}</div>
          <p className="text-muted">{L ? 'Mande uma carta curta dizendo o problema que você quer resolver. Lemos todas.' : 'Send a short letter with the problem you want to solve. We read every one.'}</p>
          <Button variant="primary" className="mt-5">{L ? 'Escrever para a flui.cash' : 'Write to flui.cash'} <Icon name="arrow-right" className="w-4 h-4" /></Button>
        </div>
      </Section>
    </main>
  );
};

const BlogPage = ({ locale, navigate }) => {
  const L = locale === 'pt';
  const posts = L ? [
    { tag: 'Glosa', date: '24 abr 2026', t: 'Quanto a glosa realmente custa para a sua clínica', x: 'Entre 3% e 8% do faturamento some em glosa — e a maior parte é recuperável. Como medir, contestar e prevenir.', mins: '7 min' },
    { tag: 'Mercado', date: '08 abr 2026', t: 'O ciclo de caixa da saúde privada brasileira, destrinchado', x: 'Por que o prazo médio de repasse das operadoras é de 60 dias e o que isso faz com a clínica de porta.', mins: '11 min' },
    { tag: 'Produto', date: '21 mar 2026', t: 'Antecipar convênio não é o mesmo que antecipar cartão', x: 'Contraparte, prazo, glosa e registro mudam tudo. Por que tratar os dois igual sai caro para o profissional.', mins: '5 min' },
  ] : [
    { tag: 'Denials', date: 'Apr 24, 2026', t: 'What claim denials really cost your practice', x: 'Between 3% and 8% of billing disappears into denials — and most of it is recoverable.', mins: '7 min' },
    { tag: 'Market', date: 'Apr 8, 2026', t: 'The cash cycle of Brazilian private healthcare, dissected', x: 'Why the average operator reimbursement term is 60 days and what it does to a small clinic.', mins: '11 min' },
    { tag: 'Product', date: 'Mar 21, 2026', t: 'Advancing health-plan claims is not advancing card sales', x: 'Counterparty, term, denials and registration change everything.', mins: '5 min' },
  ];
  return (
    <main>
      <section className="pt-32 pb-16 md:pt-40">
        <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-4">{L ? 'Conteúdo' : 'Content'}</div>
          <h1 className="font-display text-5xl md:text-7xl tracking-tightest leading-[0.95] max-w-4xl">{L ? 'Notas sobre dinheiro, saúde e o tempo entre os dois.' : 'Notes on money, healthcare, and the time between them.'}</h1>
        </div>
      </section>

      <Section className="py-20">
        <div className="grid md:grid-cols-3 gap-4">
          {posts.map((p, i) => (
            <a key={i} href="#" onClick={(e) => e.preventDefault()} className="group">
              <Card className="overflow-hidden h-full hover:border-fg/30 transition-colors">
                <div className="aspect-[16/10] relative overflow-hidden" style={{
                  background: i === 0 ? 'linear-gradient(135deg, rgb(var(--primary)/0.5), rgb(var(--secondary)/0.4))'
                    : i === 1 ? 'linear-gradient(135deg, rgb(var(--accent)/0.5), rgb(var(--primary)/0.3))'
                    : 'linear-gradient(135deg, rgb(var(--secondary)/0.5), rgb(var(--accent)/0.3))',
                }}>
                  <div className="absolute inset-0 grain opacity-40" />
                  <div className="absolute top-4 left-4 px-2.5 py-1 bg-card/90 backdrop-blur rounded-full font-mono text-[10px] uppercase tracking-[0.16em]">{p.tag}</div>
                </div>
                <div className="p-6">
                  <div className="flex items-center gap-3 text-xs text-muted font-mono uppercase tracking-wider"><span>{p.date}</span><span>·</span><span>{p.mins}</span></div>
                  <div className="font-display text-xl mt-3 leading-snug group-hover:text-fg">{p.t}</div>
                  <div className="text-muted text-sm mt-3 leading-relaxed">{p.x}</div>
                </div>
              </Card>
            </a>
          ))}
        </div>
      </Section>
    </main>
  );
};

const ContactPage = ({ locale, navigate }) => {
  const L = locale === 'pt';
  const [tab, setTab] = React.useState('pme');
  const [done, setDone] = React.useState(false);
  return (
    <main>
      <section className="pt-32 pb-16 md:pt-40">
        <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-4">{L ? 'Contato' : 'Contact'}</div>
          <h1 className="font-display text-5xl md:text-7xl tracking-tightest leading-[0.95] max-w-4xl">{L ? 'Fala com a flui.cash.' : 'Talk to flui.cash.'}</h1>
          <p className="text-muted text-lg mt-6 max-w-2xl">{L ? 'Escolha quem você é. A gente direciona para quem entende do seu caso — humano sênior, não chatbot.' : 'Pick who you are. We route you to someone who knows your case — a senior human, not a chatbot.'}</p>
        </div>
      </section>

      <Section className="py-12">
        <Tabs value={tab} onChange={(v) => { setTab(v); setDone(false); }} items={[
          { value: 'pme', label: L ? 'Sou profissional de saúde' : 'I\'m a practitioner' },
          { value: 'enterprise', label: L ? 'Sou clínica ou hospital' : 'I\'m a clinic or hospital' },
          { value: 'partner', label: L ? 'Sou Parceiro' : 'I\'m a Partner' },
          { value: 'press', label: L ? 'Imprensa' : 'Press' },
        ]} />
        <div className="mt-8 grid lg:grid-cols-[1.4fr_1fr] gap-10">
          <Card className="p-7">
            {done ? (
              <div className="text-center py-12">
                <Icon name="check" className="w-10 h-10 text-primary mx-auto" />
                <div className="font-display text-2xl mt-4">{L ? 'Recebido. Falamos em breve.' : 'Got it. We\'ll be in touch.'}</div>
              </div>
            ) : (
              <form onSubmit={(e) => { e.preventDefault(); setDone(true); }} className="grid md:grid-cols-2 gap-5">
                <Field label={L ? 'Nome' : 'Name'}><Input required /></Field>
                <Field label="Email"><Input type="email" required /></Field>
                {tab === 'pme' && <>
                  <Field label="CNPJ"><Input placeholder="00.000.000/0001-00" /></Field>
                  <Field label={L ? 'Área de atuação' : 'Field'}><Select><option>{L ? 'Medicina' : 'Medicine'}</option><option>{L ? 'Odontologia' : 'Dentistry'}</option><option>{L ? 'Fisioterapia' : 'Physiotherapy'}</option><option>{L ? 'Enfermagem' : 'Nursing'}</option><option>{L ? 'Psicologia' : 'Psychology'}</option><option>{L ? 'Nutrição' : 'Nutrition'}</option><option>{L ? 'Diagnóstico / laboratório' : 'Diagnostics'}</option><option>{L ? 'Outra' : 'Other'}</option></Select></Field>
                  <Field label={L ? 'Faturamento mensal' : 'Monthly billing'}><Select><option>{L ? 'Até R$ 50 mil' : 'Up to BRL 50k'}</option><option>R$ 50–200 mil</option><option>R$ 200–500 mil</option><option>{L ? 'Acima de R$ 500 mil' : 'Above BRL 500k'}</option></Select></Field>
                </>}
                {tab === 'enterprise' && <>
                  <Field label={L ? 'Empresa' : 'Company'}><Input /></Field>
                  <Field label={L ? 'Cargo' : 'Role'}><Input placeholder={L ? 'Diretor clínico / administrativo / financeiro' : 'Clinical / admin / finance director'} /></Field>
                </>}
                {tab === 'partner' && <>
                  <Field label={L ? 'Empresa' : 'Company'}><Input /></Field>
                  <Field label={L ? 'Modelo' : 'Model'}><Select><option>CaaS</option><option>BaaS</option><option>{L ? 'Indicação' : 'Referral'}</option></Select></Field>
                </>}
                {tab === 'press' && <>
                  <Field label={L ? 'Veículo' : 'Outlet'}><Input /></Field>
                  <Field label={L ? 'Deadline' : 'Deadline'}><Input type="date" /></Field>
                </>}
                <div className="md:col-span-2"><Field label={L ? 'Mensagem' : 'Message'}><Textarea required /></Field></div>
                <div className="md:col-span-2 flex justify-end"><Button variant="accent" size="lg" type="submit">{L ? 'Enviar' : 'Send'} <Icon name="arrow-right" className="w-4 h-4" /></Button></div>
              </form>
            )}
          </Card>
          <Card className="p-7 self-start">
            <div className="font-mono text-xs uppercase tracking-[0.18em] text-muted">{L ? 'Direto' : 'Direct'}</div>
            <div className="mt-5 space-y-4">
              <div><div className="text-sm text-muted">{L ? 'Profissionais e clínicas' : 'Practitioners and clinics'}</div><div className="font-mono">clinicas@flui.cash</div></div>
              <div><div className="text-sm text-muted">{L ? 'Faturamento e glosa' : 'Billing and denials'}</div><div className="font-mono">faturamento@flui.cash</div></div>
              <div><div className="text-sm text-muted">{L ? 'Parcerias' : 'Partnerships'}</div><div className="font-mono">partners@flui.cash</div></div>
              <div><div className="text-sm text-muted">{L ? 'Imprensa' : 'Press'}</div><div className="font-mono">press@flui.cash</div></div>
              <div className="pt-4 border-t border-line"><div className="text-sm text-muted">Ouvidoria</div><div className="font-mono">0800 000 0000</div></div>
              <div><div className="text-sm text-muted">DPO</div><div className="font-mono">dpo@flui.cash</div></div>
            </div>
          </Card>
        </div>
      </Section>
    </main>
  );
};

const LegalPage = ({ slug, locale, navigate }) => {
  const L = locale === 'pt';
  const titles = {
    privacy: L ? 'Política de Privacidade' : 'Privacy Policy',
    terms: L ? 'Termos de Uso' : 'Terms of Use',
    cookies: L ? 'Política de Cookies' : 'Cookie Policy',
    dpo: 'DPO · LGPD',
    ouvidoria: 'Ouvidoria',
  };
  return (
    <main>
      <section className="pt-32 pb-16 md:pt-40">
        <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-4">{L ? 'Legal' : 'Legal'}</div>
          <h1 className="font-display text-4xl md:text-5xl tracking-tightest">{titles[slug] || 'Legal'}</h1>
          <p className="text-muted mt-4">{L ? 'Última atualização: 01 de abril de 2026.' : 'Last updated: April 1, 2026.'}</p>
          <div className="mt-10 space-y-6 text-fg/85">
            {[1,2,3,4,5,6].map(i => (
              <div key={i}>
                <div className="font-display text-lg mb-2">{i}. {L ? 'Seção placeholder' : 'Placeholder section'}</div>
                <p className="text-muted leading-relaxed">{L ? 'Estrutura de exemplo do documento legal. O conteúdo completo será disponibilizado pela equipe jurídica antes do go-live institucional.' : 'Example structure of the legal document. Full content will be provided by the legal team before institutional go-live.'}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
};

const PlaceholderEN = ({ navigate }) => (
  <main className="pt-40 pb-32">
    <div className="mx-auto max-w-3xl px-6 text-center">
      <div className="font-mono text-xs uppercase tracking-[0.18em] text-muted mb-4">EN</div>
      <h1 className="font-display text-4xl md:text-5xl tracking-tightest">Available soon in English.</h1>
      <p className="text-muted mt-4">Switch to PT to view the full content of this page, or browse pages already translated.</p>
      <Button variant="primary" className="mt-8" onClick={() => navigate('/')}>Back to home <Icon name="arrow-right" className="w-4 h-4" /></Button>
    </div>
  </main>
);

Object.assign(window, { HowPage, AboutPage, CareersPage, BlogPage, ContactPage, LegalPage, PlaceholderEN });