import { lazy, Suspense } from "react";
import { useT } from "@/lib/i18n";
import { Link, useParams } from "@tanstack/react-router";
import { SpriteIcon } from "@/components/SpriteIcon";

// Demo is interactive, below-the-fold on mobile, and pulls in 5 sub-components
// + mock data (~6KB). Lazy-load it so the hero text + CTA hydrate first and the
// LCP candidate (h1) doesn't wait on Demo's parse/execute.
// See BETTER-265.
const LazyDemo = lazy(() =>
  import("../demo").then((m) => ({ default: m.Demo })),
);

const DemoFallback = () => (
  <div aria-hidden="true" className="w-full h-full" />
);

export default function Hero() {
  const t = useT("hero");
  const { locale } = useParams({ strict: false });

  return (
    <section aria-labelledby="hero-title" className="flex flex-col gap-16 px-2 pb-16 lg:gap-20 mx-auto w-full max-w-[1400px]">
      {/* Wallpaper Background - relative for absolute positioning of drawer */}
      <div className="wallpaper rounded-lg relative overflow-hidden w-full flex flex-col min-[900px]:block min-[900px]:min-h-[780px]">
        {/* Content Container */}
        <div className="px-6 lg:px-10 h-full min-[900px]:min-h-[780px] min-[900px]:flex min-[900px]:flex-col min-[900px]:justify-center relative z-10 lg:z-auto">
          <div className="flex items-center">
            {/* Left: Text Content - Vertically centered */}
            <div className="flex shrink-0 flex-col items-start justify-center gap-4 pt-16 pb-8 min-[900px]:py-0 max-w-full lg:max-w-[calc(100%-620px)] xl:max-w-[calc(100%-750px)]">
              {/* Announcement Badge */}
              <Link
                to="/$locale/changelog/"
                params={{ locale: locale || "en" }}
                className="inline-flex items-center gap-x-3 rounded-full bg-white/10 px-3 py-1.5 text-sm text-white/80 hover:bg-white/15 transition-colors"
              >
                <span>{t("badge", { defaultValue: "AI-Powered Translations" })}</span>
                <span className="h-3 w-px bg-white/20" />
                <span className="inline-flex items-center gap-1 font-medium text-white">
                  {t("learnMore", { defaultValue: "Learn more" })}
                  <SpriteIcon name="chevron-right" className="w-3.5 h-3.5" />
                </span>
              </Link>

              <h1
                id="hero-title"
                className="text-3xl/[1.1] font-semibold tracking-[-0.02em] text-white sm:text-4xl/[1.1] lg:text-[3rem]/[1.1]"
                style={{ textWrap: "balance" }}
              >
                {t("title", { defaultValue: "Translate with AI. Ship with confidence." })}
              </h1>

              <p className="max-w-xl text-base/7 text-white/70">
                {t("subtitle", { defaultValue: "Context-aware AI translations, Git-native sync, and instant CDN delivery. Go global without the overhead." })}
              </p>

              {/* Email Signup Form */}
              <div className="flex w-full max-w-sm items-center rounded-full border border-white/20 bg-white/10 focus-within:border-white/40 transition-colors">
                <input
                  type="email"
                  aria-label={t("inputPlaceholder", { defaultValue: "Enter your work email" })}
                  placeholder={t("inputPlaceholder", { defaultValue: "Enter your work email" })}
                  className="min-w-0 flex-1 text-sm pl-5 py-3 bg-transparent text-white placeholder:text-white/50 focus:outline-none"
                />
                <button className="shrink-0 m-1 inline-flex items-center justify-center gap-2 rounded-full bg-white px-4 py-2 text-sm font-medium text-gray-900 hover:bg-white/90 transition-colors whitespace-nowrap">
                  {t("cta", { defaultValue: "Get Started" })}
                  <SpriteIcon name="arrow-right" className="w-4 h-4" />
                </button>
              </div>
            </div>
          </div>
        </div>

        {/* AI Drawer - Desktop: Absolute to wallpaper, right side, with top padding */}
        <div className="hidden min-[900px]:block absolute right-0 top-20 bottom-0">
          <div
            className="rounded-tl-2xl bg-white h-full w-[600px] xl:w-[700px]"
            style={{
              boxShadow:
                "0 28px 70px rgba(0, 0, 0, 0.25), 0 14px 32px rgba(0, 0, 0, 0.15)",
            }}
          >
            <Suspense fallback={<DemoFallback />}>
              <LazyDemo />
            </Suspense>
          </div>
        </div>

        {/* Mobile Demo - below 900px, centered */}
        <div className="min-[900px]:hidden relative px-4 pb-10">
          <div
            className="rounded-xl bg-white mx-auto overflow-hidden"
            style={{
              boxShadow:
                "0 28px 70px rgba(0, 0, 0, 0.25), 0 14px 32px rgba(0, 0, 0, 0.15)",
              maxWidth: "100%",
              height: "600px",
            }}
          >
            <Suspense fallback={<DemoFallback />}>
              <LazyDemo />
            </Suspense>
          </div>
        </div>
      </div>

      {/* Logo Grid Footer */}
      <div aria-label="Trusted by leading companies" className="w-full mt-[-24px] mb-8 overflow-hidden">
        <div className="logo-grid">
          {[0, 1].map((i) => (
            <div key={i} className="logo-track">
              {/* Carna */}
              <a href="http://carna.ai/" target="_blank" rel="noopener noreferrer" className="flex h-8 items-center justify-center shrink-0">
                <img
                  src="/carna.webp"
                  alt="Carna - Better I18N customer"
                  width={112}
                  height={28}
                  loading="lazy"
                  className="h-7 w-auto opacity-50 grayscale hover:opacity-70 transition-opacity"
                />
              </a>
              {/* Nomad Work */}
              <a href="https://hellonomad.app/" target="_blank" rel="noopener noreferrer" className="flex h-8 items-center justify-center shrink-0">
                <img
                  src="/nomadwork.webp"
                  alt="Nomad Work - Better I18N customer"
                  width={112}
                  height={28}
                  loading="lazy"
                  className="h-7 w-auto opacity-50 grayscale hover:opacity-70 transition-opacity"
                />
              </a>
              {/* Hellospace */}
              <a href="https://hellospace.world/" target="_blank" rel="noopener noreferrer" className="flex h-8 items-center justify-center shrink-0">
                <img
                  src="/hellospace.webp"
                  alt="Hellospace - Better I18N customer"
                  width={112}
                  height={28}
                  loading="lazy"
                  className="h-7 w-auto opacity-50 grayscale hover:opacity-70 transition-opacity"
                />
              </a>
              {/* Masraff */}
              <a href="https://masraff.ai" target="_blank" rel="noopener noreferrer" className="flex h-8 items-center justify-center shrink-0">
                <img
                  src="/masraff.webp"
                  alt="Masraff - Better I18N customer"
                  width={28}
                  height={28}
                  loading="lazy"
                  className="h-7 w-auto opacity-50 grayscale hover:opacity-70 transition-opacity"
                />
              </a>
              {/* Cloudflare */}
              <a href="https://www.cloudflare.com/" target="_blank" rel="noopener noreferrer" className="flex h-8 items-center justify-center shrink-0">
                <img
                  src="/cloudflare.webp"
                  alt="Cloudflare - Better I18N customer"
                  width={112}
                  height={28}
                  loading="lazy"
                  className="h-7 w-auto opacity-50 grayscale hover:opacity-70 transition-opacity"
                />
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
