import { Link } from "@tanstack/react-router";
import { useSession } from "../../lib/auth-client";

const Hero = () => {
  const { data: session } = useSession();

  return (
    <section className="relative pt-10 md:pt-16 pb-10 md:pb-14">
      <div className="absolute inset-0 -z-10">
        <div className="absolute -top-24 left-1/2 h-72 w-184 -translate-x-1/2 rounded-full bg-(--color-primary) opacity-[0.10] blur-3xl" />
        <div className="absolute -top-10 left-1/2 h-72 w-184 -translate-x-1/2 rounded-full bg-(--color-accent) opacity-[0.10] blur-3xl" />
      </div>

      <div className="grid items-center gap-10 md:grid-cols-2">
        <div className="text-center md:text-left">
          <div className="-rotate-1 mb-3">
            <span className="inline-flex items-center gap-2 rounded-full bg-(--color-surface) px-4 py-1 text-xs font-semibold tracking-widest uppercase text-(--color-accent) border border-(--color-primary-light)">
              Duolingo-style drills · real-time multiplayer
            </span>
          </div>

          <h1 className="text-5xl md:text-6xl font-black tracking-tight text-(--color-text) leading-[1.05]">
            Learn vocabulary fast,{" "}
            <span className="inline-block rotate-1 px-3 py-1 bg-(--color-primary) text-white rounded-xl">
              together
            </span>
            .
          </h1>

          <p className="mt-5 text-lg md:text-xl font-medium text-(--color-text-muted) max-w-xl mx-auto md:mx-0">
            A word appears. You pick the translation. You score points. Then you
            queue up a room and{" "}
            <span className="text-(--color-accent) font-bold">
              beat friends
            </span>{" "}
            in real time.
          </p>

          <div className="mt-4 flex gap-2 flex-wrap justify-center md:justify-start">
            {["🇬🇧", "🇮🇹", "🇩🇪", "🇫🇷", "🇪🇸"].map((flag) => (
              <span key={flag} className="text-2xl" aria-hidden>
                {flag}
              </span>
            ))}
            <span className="sr-only">
              Supported languages: English, Italian, German, French, Spanish
            </span>
          </div>

          <div className="mt-8 flex gap-3 flex-wrap justify-center md:justify-start">
            {session ? (
              <>
                <Link
                  to="/play"
                  className="px-7 py-3 rounded-full text-white font-bold text-sm bg-(--color-primary) hover:bg-(--color-primary-dark)"
                >
                  Play solo
                </Link>
                <Link
                  to="/multiplayer"
                  className="px-7 py-3 rounded-full font-bold text-sm text-(--color-primary) border-2 border-(--color-primary) hover:bg-(--color-surface)"
                >
                  Play with friends
                </Link>
              </>
            ) : (
              <>
                <Link
                  to="/login"
                  className="px-7 py-3 rounded-full text-white font-bold text-sm bg-(--color-primary) hover:bg-(--color-primary-dark)"
                >
                  Get started
                </Link>
                <Link
                  to="/login"
                  className="px-7 py-3 rounded-full font-bold text-sm text-(--color-primary) border-2 border-(--color-primary) hover:bg-(--color-surface)"
                >
                  Log in
                </Link>
              </>
            )}
          </div>
        </div>

        <div className="relative">
          <div className="rounded-3xl border border-(--color-primary-light) bg-white/40 dark:bg-black/20 backdrop-blur p-3 shadow-sm">
            <div className="rounded-2xl bg-(--color-bg) border border-(--color-primary-light) overflow-hidden">
              <div className="flex items-center justify-between px-4 py-3 bg-(--color-surface) border-b border-(--color-primary-light)">
                <div className="flex items-center gap-2">
                  <div className="h-2.5 w-2.5 rounded-full bg-(--color-accent)" />
                  <div className="h-2.5 w-2.5 rounded-full bg-(--color-primary-light)" />
                  <div className="h-2.5 w-2.5 rounded-full bg-(--color-text-muted) opacity-40" />
                </div>
                <span className="text-xs font-semibold text-(--color-text-muted)">
                  Live preview
                </span>
              </div>

              <div className="p-5 md:p-6">
                <p className="text-xs font-semibold tracking-widest uppercase text-(--color-text-muted)">
                  Translate
                </p>
                <div className="mt-2 rounded-2xl bg-(--color-surface) border border-(--color-primary-light) px-4 py-5">
                  <div className="text-3xl font-black text-(--color-text)">
                    finestra
                  </div>
                  <div className="mt-1 text-sm text-(--color-text-muted)">
                    (noun) · A2
                  </div>
                </div>

                <div className="mt-4 grid grid-cols-2 gap-3">
                  {["window", "forest", "river", "kitchen"].map((opt) => (
                    <div
                      key={opt}
                      className="rounded-xl border border-(--color-primary-light) bg-white/30 dark:bg-black/10 px-4 py-3 text-sm font-semibold text-(--color-text) hover:bg-(--color-surface)"
                    >
                      {opt}
                    </div>
                  ))}
                </div>

                <div className="mt-5 flex items-center justify-between">
                  <div className="text-xs text-(--color-text-muted)">
                    Round 2/10
                  </div>
                  <div className="inline-flex items-center gap-2 rounded-full bg-(--color-surface) border border-(--color-primary-light) px-3 py-1 text-xs font-semibold text-(--color-text-muted)">
                    <span className="h-2 w-2 rounded-full bg-(--color-accent)" />
                    Multiplayer room
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export default Hero;
