import { Trans } from "@lingui/react/macro";
import { EvooMascot } from "@rakazo/ui-web";
import { useNavigate } from "react-router-dom";
import { WindowChrome } from "./WindowChrome";

export function WelcomePage() {
  const navigate = useNavigate();
  return (
    <div className="flex min-h-full flex-col bg-background" data-rakazo-surface="welcome">
      <div className="app-drag flex gap-2 px-5 py-[18px]">
        <WindowChrome />
      </div>
      <div className="flex flex-1 flex-col items-center justify-center gap-10 px-6 pb-[90px]">
        <div className="flex flex-col items-center gap-6 sm:flex-row sm:gap-[26px]">
          <EvooMascot size={88} pose="greeting" interactive trackPointer="hover" />
          <div className="text-[76px] leading-none tracking-[-0.03em] text-foreground font-['EvOo_Display',sans-serif]">
            EvOo
          </div>
        </div>
        <div className="max-w-[520px] space-y-3 text-center">
          <p className="text-[27px] leading-[1.35] text-foreground/90 font-medium">
            <Trans>Your specialists. One calm place to talk.</Trans>
          </p>
          <p className="text-[18px] leading-[1.5] text-foreground/60">
            <Trans>Simple to start. Expert when you need it.</Trans>
          </p>
        </div>
        <div className="flex flex-col sm:flex-row items-center gap-4">
          <button
            type="button"
            onClick={() => navigate("/sign-in")}
            className="app-no-drag rounded-full bg-primary text-primary-foreground px-[34px] py-[15px] text-[19px] font-medium transition hover:scale-[1.04]"
          >
            <Trans>Sign in</Trans>&nbsp;&nbsp;→
          </button>
          <button
            type="button"
            onClick={() => navigate("/sign-up")}
            className="app-no-drag rounded-full bg-accent px-[34px] py-[15px] text-[19px] text-foreground transition hover:scale-[1.04]"
          >
            <Trans>Sign up</Trans>
          </button>
        </div>
      </div>
    </div>
  );
}