"use client";

import Link from "next/link";
import { ChevronRight } from "lucide-react";
import { ENTRY_CARDS } from "~/lib/data";
import { useLocale } from "~/components/locale-provider";

const CARD_STYLE = {
  blue: {
    border: "border-blue-200/80",
    bar: "bg-blue-500",
    emoji: "bg-blue-50",
  },
  emerald: {
    border: "border-emerald-200/80",
    bar: "bg-emerald-500",
    emoji: "bg-emerald-50",
  },
  rose: {
    border: "border-rose-200/80",
    bar: "bg-rose-500",
    emoji: "bg-rose-50",
  },
} as const;

export function Hero() {
  const { t } = useLocale();

  return (
    <section
      className="flex flex-1 flex-col justify-center px-5 pb-8"
      style={{
        paddingTop: "max(2rem, calc(1.5rem + var(--safe-top)))",
        paddingBottom: "max(2rem, calc(1.5rem + var(--safe-bottom)))",
      }}
    >
      <div className="mx-auto w-full max-w-md sm:max-w-lg">
        <div className="text-center">
          <h1 className="text-[2rem] font-bold leading-tight sm:text-5xl">
            <span className="text-gradient">{t.brandSubtitle}</span>
          </h1>
          <p className="mt-2 text-lg font-medium tracking-[0.2em] text-neutral-400 sm:text-xl">
            nomadro
          </p>
          <p className="mx-auto mt-4 max-w-xs text-[13px] leading-relaxed text-neutral-500 sm:max-w-sm sm:text-sm">
            {t.heroTagline}
            <br />
            {t.heroTaglineLine2}
          </p>
        </div>

        <div className="mt-10 flex flex-col gap-3">
          {ENTRY_CARDS.map((card) => {
            const style = CARD_STYLE[card.accent];
            const copy = t.entryCards[card.id] ?? {
              label: card.label,
              title: card.title,
              description: card.description,
            };

            return (
              <Link
                key={card.id}
                href={card.href}
                target="_blank"
                rel="noopener noreferrer"
                className={`group relative flex items-center gap-3.5 overflow-hidden rounded-2xl border bg-white p-4 shadow-sm transition-all active:scale-[0.98] active:shadow-none sm:gap-4 sm:p-5 ${style.border}`}
              >
                <span
                  className={`absolute left-0 top-0 h-full w-1 ${style.bar}`}
                />

                <span
                  className={`flex h-12 w-12 shrink-0 items-center justify-center rounded-xl text-2xl ${style.emoji}`}
                >
                  {card.emoji}
                </span>

                <div className="min-w-0 flex-1 pr-1">
                  <div className="flex flex-wrap items-center gap-x-2 gap-y-0.5">
                    <h2 className="text-[15px] font-semibold text-neutral-900 sm:text-base">
                      {copy.label}
                    </h2>
                    {card.id === "live" && (
                      <span className="rounded bg-rose-500 px-1.5 py-px text-[10px] font-semibold leading-4 text-white">
                        {t.liveBadge}
                      </span>
                    )}
                  </div>
                  <p className="mt-0.5 text-sm font-medium text-neutral-700">
                    {copy.title}
                  </p>
                  <p className="mt-1 line-clamp-2 text-xs leading-relaxed text-neutral-400">
                    {copy.description}
                  </p>
                </div>

                <ChevronRight className="h-5 w-5 shrink-0 text-neutral-300" />
              </Link>
            );
          })}
        </div>
      </div>
    </section>
  );
}