import { ConverterCard } from "@/components/ConverterCard";
import { FORMAT_OPTIONS } from "@/lib/outputFormats";
import { FAQ, FeatureGrid, SEOContent, TrustRow } from "@/components/MarketingSections";
import Link from "next/link";

const FORMAT_CHIPS = ["JPG", "PNG", "WebP", "AVIF", "TIFF", "ICO", "GIF", "BMP"] as const;

export default function HomePage() {
  return (
    <main className="relative z-10 min-h-screen overflow-x-clip px-4 pb-20 pt-8 sm:px-6 sm:pb-24 sm:pt-10">
      <div className="pointer-events-none absolute -left-40 top-24 h-[420px] w-[420px] rounded-full bg-violet-400/35 blur-[100px] animate-hero-blob" />
      <div className="pointer-events-none absolute -right-32 top-[520px] h-[380px] w-[380px] rounded-full bg-cyan-400/30 blur-[90px] animate-hero-blob-2 lg:top-36" />

      <div className="relative mx-auto flex w-full max-w-5xl flex-col gap-12 sm:gap-14">
        <nav className="glass-panel flex flex-wrap items-center justify-between gap-3 rounded-2xl px-4 py-2.5 sm:px-6">
          <Link
            href="/"
            className="inline-flex items-center gap-2.5 rounded-xl px-1 py-1 text-sm font-semibold text-slate-900 transition hover:bg-white/50"
          >
            <span className="relative inline-flex h-10 w-10 shrink-0 items-center justify-center overflow-hidden rounded-xl bg-gradient-to-br from-indigo-600 via-violet-600 to-fuchsia-600 text-xs font-bold text-white shadow-lg shadow-indigo-500/30">
              <span className="relative z-10">IC</span>
              <span className="absolute inset-0 bg-white/25 opacity-60" />
            </span>
            <span className="font-display text-base tracking-tight">Image Converter</span>
          </Link>
          <div className="flex flex-wrap items-center justify-end gap-1 text-sm font-medium">
            <Link className="rounded-xl px-3 py-2 text-slate-600 transition hover:bg-white/60 hover:text-slate-900" href="/guides">
              Guides
            </Link>
            <Link className="rounded-xl px-3 py-2 text-slate-600 transition hover:bg-white/60 hover:text-slate-900" href="/blog">
              Blog
            </Link>
            <Link className="rounded-xl px-3 py-2 text-slate-600 transition hover:bg-white/60 hover:text-slate-900" href="/about">
              About
            </Link>
            <Link className="rounded-xl px-3 py-2 text-slate-600 transition hover:bg-white/60 hover:text-slate-900" href="/contact">
              Contact
            </Link>
            <Link
              className="rounded-xl px-3 py-2 text-slate-600 transition hover:bg-white/60 hover:text-slate-900"
              href="/privacy"
            >
              Privacy
            </Link>
            <Link
              className="rounded-xl px-3 py-2 text-slate-600 transition hover:bg-white/60 hover:text-slate-900"
              href="/terms"
            >
              Terms
            </Link>
          </div>
        </nav>

        <header className="grid w-full gap-10 lg:grid-cols-[minmax(0,1fr)_minmax(0,0.95fr)] lg:items-start lg:gap-12 xl:gap-14">
          <div className="min-w-0">
            <div className="inline-flex items-center gap-2 rounded-full border border-white/60 bg-white/55 px-3 py-1.5 text-xs font-semibold text-indigo-800 shadow-sm backdrop-blur">
              <span className="inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-emerald-500 shadow-[0_0_12px_theme(colors.emerald.400)]" />
              Fast image convert + compress presets
            </div>
            <h1 className="font-display mt-5 text-balance text-[2.05rem] font-extrabold leading-[1.08] tracking-tight text-slate-900 sm:text-5xl sm:leading-[1.05]">
              Convert{" "}
              <span className="text-gradient">JPG · PNG · WebP · AVIF</span>
              <br />
              — resize &amp; compress in one flow.
            </h1>
            <p className="mt-4 max-w-xl text-pretty text-base leading-relaxed text-slate-600 sm:text-lg">
              Upload an image, pick a preset, convert and download. This online converter includes{" "}
              <span className="font-semibold text-slate-800">{FORMAT_OPTIONS.length} outputs</span> for web, print,
              icons, and dev pipelines.
            </p>
            <TrustRow />

            <ul className="mt-8 flex flex-wrap gap-2" aria-label="Popular image formats supported">
              {FORMAT_CHIPS.map((chip) => (
                <li
                  key={chip}
                  className="rounded-full border border-white/65 bg-white/45 px-3 py-1 text-xs font-bold tracking-wide text-slate-700 shadow-sm backdrop-blur"
                >
                  {chip}
                </li>
              ))}
            </ul>
          </div>

          <div className="relative hidden min-h-0 w-full lg:block">
            <div className="glass-panel relative flex h-full min-h-[300px] flex-col overflow-hidden rounded-3xl p-6 shadow-2xl shadow-indigo-500/15">
              <div className="absolute -right-6 -top-6 h-32 w-32 rounded-full bg-gradient-to-br from-indigo-400/40 to-fuchsia-400/40 blur-2xl" />
              <div className="absolute -bottom-8 -left-8 h-36 w-36 rounded-full bg-gradient-to-tr from-cyan-400/35 to-violet-400/30 blur-2xl" />
              <div className="relative flex flex-1 flex-col gap-5">
                <p className="font-display shrink-0 text-sm font-semibold text-slate-800">Designed to feel effortless</p>
                <div className="grid flex-1 grid-cols-2 gap-3 text-sm">
                  <div className="rounded-2xl border border-white/50 bg-white/55 p-4 backdrop-blur">
                    <p className="text-xs font-semibold uppercase tracking-wide text-indigo-600">Compress</p>
                    <p className="mt-2 leading-snug text-slate-600">Tune quality for JPG, WebP, AVIF.</p>
                  </div>
                  <div className="rounded-2xl border border-white/50 bg-white/55 p-4 backdrop-blur">
                    <p className="text-xs font-semibold uppercase tracking-wide text-fuchsia-600">Resize</p>
                    <p className="mt-2 leading-snug text-slate-600">One dimension — keeps aspect ratio.</p>
                  </div>
                  <div className="col-span-2 rounded-2xl border border-white/50 bg-white/55 p-4 backdrop-blur">
                    <p className="text-xs font-semibold uppercase tracking-wide text-cyan-600">Privacy</p>
                    <p className="mt-2 leading-snug text-slate-600">
                      In-memory convert — nothing saved to disk by the app.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </header>

        <section className="w-full scroll-mt-8">
          <ConverterCard />
        </section>

        <FeatureGrid />

        <SEOContent />

        <FAQ />

        <footer className="glass-panel rounded-2xl px-5 py-7 text-sm text-slate-600 sm:px-6">
          <p className="max-w-4xl text-pretty leading-relaxed">
            Tip: Compress an image for faster pages — convert PNG to WebP/AVIF, or convert WebP back to JPG for older
            clients. PNG keeps transparency; JPEG suits photos; TIFF fits print pipelines.
          </p>
          <div className="mt-5 flex flex-wrap items-center gap-4">
            <Link
              className="font-semibold text-indigo-700 underline decoration-indigo-200 underline-offset-[6px] transition hover:text-indigo-900 hover:decoration-indigo-400"
              href="/privacy"
            >
              Privacy policy
            </Link>
            <Link
              className="font-semibold text-indigo-700 underline decoration-indigo-200 underline-offset-[6px] transition hover:text-indigo-900 hover:decoration-indigo-400"
              href="/terms"
            >
              Terms of use
            </Link>
          </div>
          <p className="mt-4 text-xs text-slate-500">
            © {new Date().getFullYear()} Image Converter. All rights reserved.
          </p>
        </footer>
      </div>
    </main>
  );
}