import Link from "next/link";
import { AndroidAppDownloadLink } from "@/components/android-app-download-link";
import { landingDict } from "@/features/landing/dict";

export function LandingHero() {
  return (
    <section className="relative px-4 py-16 sm:px-6 sm:py-24">
      <div className="mx-auto max-w-6xl">
        <div className="mx-auto max-w-3xl text-center">
          <span className="inline-flex rounded-full bg-accent px-4 py-1.5 text-xs font-medium text-accent-foreground">
            {landingDict.hero.badge}
          </span>

          <h1 className="mt-6 text-3xl font-bold leading-tight text-foreground sm:text-4xl lg:text-5xl">
            {landingDict.hero.title}
          </h1>

          <p className="mt-5 text-base leading-8 text-muted-foreground sm:text-lg">
            {landingDict.hero.description}
          </p>

          <div className="mt-8 flex flex-col items-center justify-center gap-3 sm:flex-row sm:flex-wrap">
            <Link
              href="/login"
              className="inline-flex h-12 w-full items-center justify-center rounded-2xl bg-primary px-6 text-sm font-medium text-primary-foreground shadow-soft-sm transition-all hover:brightness-105 sm:w-auto"
            >
              {landingDict.hero.primaryCta}
            </Link>
            <a
              href="#features"
              className="inline-flex h-12 w-full items-center justify-center rounded-2xl border border-border bg-card px-6 text-sm font-medium text-card-foreground transition-colors hover:bg-accent sm:w-auto"
            >
              {landingDict.hero.secondaryCta}
            </a>
            <AndroidAppDownloadLink
              label={landingDict.hero.androidDownloadCta}
              className="inline-flex h-12 w-full items-center justify-center gap-2 rounded-2xl border border-emerald-200 bg-emerald-50 px-6 text-sm font-medium text-emerald-900 transition-colors hover:bg-emerald-100 dark:border-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-100 dark:hover:bg-emerald-950/60 sm:w-auto"
            />
          </div>
        </div>

        <ul className="mx-auto mt-10 grid max-w-4xl gap-4 sm:grid-cols-3">
          {landingDict.hero.highlights.map((item) => (
            <li
              key={item.title}
              className="rounded-3xl bg-card p-5 shadow-soft-sm transition-transform hover:-translate-y-0.5"
            >
              <div className="mb-3 inline-flex size-10 items-center justify-center rounded-xl bg-primary/10 text-primary">
                {item.icon === "target" && (
                  <svg
                    aria-hidden="true"
                    className="size-5"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    strokeWidth={2}
                  >
                    <circle cx="12" cy="12" r="10" />
                    <circle cx="12" cy="12" r="6" />
                    <circle cx="12" cy="12" r="2" />
                  </svg>
                )}
                {item.icon === "habit" && (
                  <svg
                    aria-hidden="true"
                    className="size-5"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    strokeWidth={2}
                  >
                    <path d="M9 12l2 2 4-4" />
                    <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20z" />
                  </svg>
                )}
                {item.icon === "task" && (
                  <svg
                    aria-hidden="true"
                    className="size-5"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    strokeWidth={2}
                  >
                    <rect x="3" y="3" width="18" height="18" rx="3" />
                    <path d="M9 12l2 2 4-4" />
                  </svg>
                )}
              </div>
              <h3 className="mb-1.5 text-sm font-bold text-foreground">
                {item.title}
              </h3>
              <p className="text-xs leading-6 text-muted-foreground">
                {item.description}
              </p>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}