import { useState } from "react";
import { ArrowDown, MessageCircle } from "lucide-react";
import { Button } from "@/components/ui/button";
import { projetarRendaMensal } from "@/data/brasil-urbano-config";

const money = (value: number) => value.toLocaleString("pt-BR", { style: "currency", currency: "BRL" });
const tickets = [10000, 50000, 100000];

export function BrasilUrbanoIncomeCard() {
  const [aporte, setAporte] = useState(10000);
  const renda = projetarRendaMensal(aporte, 36);

  return (
    <aside aria-label="Projeção de renda mensal" className="self-start rounded-lg border border-border bg-card p-5 text-card-foreground sm:p-6">
      <h2 className="font-display text-lg font-semibold tracking-normal">Projeção de renda mensal</h2>
      <fieldset className="mt-6">
        <legend className="text-xs font-medium text-muted-foreground">Seu aporte</legend>
        <div className="mt-2 grid grid-cols-3 gap-2">
          {tickets.map((ticket) => (
            <Button key={ticket} variant={aporte === ticket ? "default" : "outline"} aria-pressed={aporte === ticket} onClick={() => setAporte(ticket)} className="h-10 min-w-0 px-1 text-xs tabular-nums">
              {ticket.toLocaleString("pt-BR", { style: "currency", currency: "BRL", maximumFractionDigits: 0 })}
            </Button>
          ))}
        </div>
      </fieldset>
      <div className="mt-6 border-y border-border py-6" aria-live="polite" aria-atomic="true">
        <p className="text-sm text-muted-foreground">Renda bruta projetada</p>
        <p className="mt-2 flex flex-wrap items-baseline gap-x-2 gap-y-1">
          <strong className="text-4xl font-bold tabular-nums tracking-normal">{money(renda)}</strong>
          <span className="text-sm text-muted-foreground">por mês</span>
        </p>
        <p className="mt-3 text-xs leading-relaxed text-muted-foreground">Projeção a 2,00% a.m., para o prazo de 36 meses, antes de impostos. Primeiro pagamento no 3º mês, com juros acumulados; depois, pagamentos mensais. Capital devolvido no vencimento.</p>
      </div>
      <p className="mt-4 text-xs leading-relaxed text-muted-foreground">Primeiro pagamento no 3º mês, com juros acumulados; depois, pagamentos mensais. Capital devolvido no vencimento.</p>
      <Button asChild variant="link" className="mt-3 h-auto whitespace-normal px-0 text-card-foreground">
        <a href="#simulador-brasil-urbano">Comparar outros valores e prazos <ArrowDown /></a>
      </Button>
      <Button asChild className="brand-gradient mt-4 h-11 w-full rounded-full text-sm font-semibold text-primary-foreground hover:opacity-90">
        <a href="https://www.platform.investplus.vc/admin/rounds/company/58/round/47">Investir</a>
      </Button>
      <Button asChild variant="outline" className="mt-2 h-11 w-full">
        <a href="https://api.whatsapp.com/send/?phone=551152863746&text&type=phone_number&app_absent=0" target="_blank" rel="noreferrer"><MessageCircle /> Falar com especialista</a>
      </Button>
      <p className="mt-3 text-xs leading-relaxed text-muted-foreground">Simulação ilustrativa, não é promessa de retorno. Risco de crédito da emissora, sem cobertura do FGC.</p>
    </aside>
  );
}