// Auteur : Simon-Pierre Boucher — contact@spboucher.ai
"use client";
import KaChat from "@/components/KaChat";
import { useLang } from "@/components/LangContext";

export default function KaHero() {
  const { lang } = useLang();
  const fr = lang === "fr";

  const powers = fr
    ? [
        ["12 outils", "registre, moteur, marché"],
        ["3,7 M", "unités interrogeables"],
        ["En direct", "réponse en streaming"],
      ]
    : [
        ["12 tools", "registry, engine, market"],
        ["3.7M", "queryable units"],
        ["Live", "streaming answers"],
      ];

  return (
    <main className="relative z-[1] mx-auto w-full max-w-[1080px] px-4 pb-16 pt-10 sm:px-6">
      <div className="mb-8 text-center">
        <span className="kicker justify-center">
          {fr ? "Agent IA · propulsé par Claude" : "AI agent · powered by Claude"}
        </span>
        <h1 className="vp-display mx-auto mt-3 max-w-[620px] text-[34px] font-bold leading-[1.05] tracking-[-0.04em] sm:text-[46px]">
          {fr ? (
            <>
              Jase avec <span className="hl">Ka</span>, il connaît chaque adresse du Québec.
            </>
          ) : (
            <>
              Chat with <span className="hl">Ka</span> — it knows every Québec address.
            </>
          )}
        </h1>
        <p className="mx-auto mt-3 max-w-[560px] text-[14.5px] text-ink-2">
          {fr
            ? "Donne-lui une adresse : il la retrouve dans le registre, l'évalue avec le même moteur transparent que Vrai-Prix, puis t'explique le prix — comparables, marché local, tendance."
            : "Give it an address: it finds it in the registry, values it with Vrai-Prix's transparent engine, then explains the price — comparables, local market, trend."}
        </p>
        <div className="mt-5 flex flex-wrap justify-center gap-2.5">
          {powers.map(([b, s]) => (
            <span key={b} className="stat-chip">
              <b>{b}</b> {s}
            </span>
          ))}
        </div>
      </div>

      <KaChat />
    </main>
  );
}