import Image from "next/image";
import Link from "next/link";
import { Header } from "@/components/server/Header";
import { FadeIn } from "@/components/client/FadeIn";
import { ShopComingSoon } from "@/components/server/ShopComingSoon";
import { products } from "@/lib/master-json";
import { SHOP_ENABLED, CONTACT } from "@/lib/shop-config";

/**
 * V2 "Editorial" — styl editorial (asymetria, dramatyzm, whitespace).
 * Inspiracja: Bobochic Paris — magazynowy layout, nie stockowy landing page.
 */
export default function V2HomePage() {
  const heroImage = products[0].variants[0].media.hero_staging;
  const lavena = products[0];
  const sidonie = products[1];
  const mara = products[2];

  return (
    <>
      <Header variant="glass" version="v2" />

      {/* HERO — full-bleed, tekst bottom-left, dramatyczna skala */}
      <section className="relative h-[100svh] w-full overflow-hidden">
        <Image
          src={heroImage}
          alt="Paryski apartament — narożnik Lavena w beżowym bouclé"
          fill
          priority
          sizes="100vw"
          className="object-cover"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-ink/80 via-transparent to-ink/20" />
        <div className="absolute bottom-0 left-0 right-0 z-10 px-6 pb-16 md:px-16 md:pb-24">
          <p className="mb-6 text-[11px] font-medium uppercase tracking-[0.5em] text-paper/70">
            Make-to-Order · Trzcianka · Wielkopolska
          </p>
          <h1 className="max-w-[14ch] text-[clamp(2.5rem,8vw,7rem)] font-extrabold leading-[0.95] tracking-[-0.02em] text-paper">
            Paryski design
            <br />
            <span className="font-light italic">bezkompromisowa</span>
            <br />
            wygoda
          </h1>
          <div className="mt-10 flex items-center gap-6">
            <Link
              href="/v2/kategoria/narozniki"
              className="group flex items-center gap-3 text-xs font-semibold uppercase tracking-[0.2em] text-paper"
            >
              <span className="border-b border-paper pb-1 transition-all group-hover:border-paper/50">
                Odkryj kolekcję
              </span>
              <svg width="32" height="10" viewBox="0 0 32 10" fill="none" className="transition-transform group-hover:translate-x-1">
                <path d="M0 5h30M26 1l4 4-4 4" stroke="currentColor" strokeWidth="1" />
              </svg>
            </Link>
          </div>
        </div>
        <div className="absolute bottom-8 right-8 z-10 hidden md:block">
          <p className="text-[10px] uppercase tracking-[0.3em] text-paper/50 [writing-mode:vertical-rl]">
            Scroll
          </p>
        </div>
      </section>

      {/* MANIFESTO — duży cytat na czystym tle */}
      <section className="bg-paper px-6 py-32 md:px-16 md:py-48">
        <div className="mx-auto max-w-5xl">
          <FadeIn>
            <p className="mb-12 text-[11px] font-bold uppercase tracking-[0.4em] text-ash">
              Manifest
            </p>
            <p className="text-[clamp(1.5rem,4vw,3rem)] font-light leading-[1.3] tracking-[-0.01em] text-ink">
              Kinowa jakość wizualna{" "}
              <span className="font-extrabold">bez kosztów sesji zdjęciowych.</span>{" "}
              Każdy mebel komponowany w fotorealistycznym wnętrzu, z algorytmicznym
              cieniem kontaktowym. Zero efektu sztucznej wklejki.
            </p>
          </FadeIn>
          <FadeIn delay={0.2}>
            <div className="mt-16 flex flex-wrap gap-x-16 gap-y-8 border-t border-line pt-12">
              <div>
                <p className="text-[clamp(2rem,5vw,4rem)] font-extrabold tabular-nums leading-none text-ink">45K</p>
                <p className="mt-2 text-[10px] uppercase tracking-[0.2em] text-ash">Martindale cykli</p>
              </div>
              <div>
                <p className="text-[clamp(2rem,5vw,4rem)] font-extrabold tabular-nums leading-none text-ink">30d</p>
                <p className="mt-2 text-[10px] uppercase tracking-[0.2em] text-ash">Na próbę w domu</p>
              </div>
              <div>
                <p className="text-[clamp(2rem,5vw,4rem)] font-extrabold tabular-nums leading-none text-ink">100%</p>
                <p className="mt-2 text-[10px] uppercase tracking-[0.2em] text-ash">Make-to-Order</p>
              </div>
            </div>
          </FadeIn>
        </div>
      </section>

      {/* KOLEKCJA — asymetryczne duże karty */}
      <section className="bg-offwhite px-6 py-24 md:px-16 md:py-32">
        <div className="mx-auto max-w-[1600px]">
          <FadeIn>
            <div className="mb-16 flex items-end justify-between">
              <h2 className="text-[clamp(2rem,5vw,4rem)] font-extrabold leading-[0.95] tracking-[-0.02em] text-ink">
                Wyróżnione
                <br />
                <span className="font-light italic">kolekcje</span>
              </h2>
              <Link href="/v2/kategoria/narozniki" className="hidden items-center gap-2 text-xs font-semibold uppercase tracking-[0.2em] text-ink md:flex">
                Wszystko
                <svg width="24" height="8" viewBox="0 0 24 8" fill="none">
                  <path d="M0 4h22M19 1l3 3-3 3" stroke="currentColor" strokeWidth="1" />
                </svg>
              </Link>
            </div>
          </FadeIn>

          {/* Karta 1 — pełna szerokość (LAVENA) */}
          <FadeIn>
            <Link href={`/v2/produkt/${lavena.sku}`} className="group relative block aspect-[16/10] w-full overflow-hidden bg-mist md:aspect-[16/8]">
              <Image src={lavena.variants[0].media.hero_staging} alt={lavena.name} fill sizes="100vw" className="object-cover transition-transform duration-[1.2s] ease-out group-hover:scale-[1.03]" />
              <div className="absolute inset-0 bg-gradient-to-r from-ink/60 via-transparent to-transparent" />
              <div className="absolute bottom-0 left-0 max-w-md p-8 md:p-12">
                <p className="text-[11px] font-bold uppercase tracking-[0.4em] text-paper/70">{lavena.collection}</p>
                <h3 className="mt-3 text-[clamp(1.5rem,4vw,3rem)] font-extrabold leading-[0.95] tracking-[-0.02em] text-paper">{lavena.name}</h3>
                <p className="mt-4 text-sm text-paper/80">{lavena.description.split(".")[0]}.</p>
                {SHOP_ENABLED && (
                  <div className="mt-6 flex items-center gap-4">
                    <span className="text-lg font-bold tabular-nums text-paper">od {lavena.base_price.toLocaleString("pl-PL")} zł</span>
                    {lavena.compare_at_price && <span className="text-sm tabular-nums text-paper/50 line-through">{lavena.compare_at_price.toLocaleString("pl-PL")} zł</span>}
                  </div>
                )}
              </div>
              <div className="absolute bottom-8 right-8 hidden gap-2 md:flex">
                {lavena.variants.slice(0, 6).map((v) => (
                  <span key={v.sku} className="h-6 w-6 border border-paper/40" style={{ backgroundColor: v.swatch_color }} />
                ))}
              </div>
            </Link>
          </FadeIn>

          {/* Karty 2 i 3 — side-by-side, asymetria */}
          <div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-2">
            <FadeIn delay={0.1}>
              <Link href={`/v2/produkt/${sidonie.sku}`} className="group relative block aspect-[4/5] w-full overflow-hidden bg-mist">
                <Image src={sidonie.variants[0].media.hero_staging} alt={sidonie.name} fill sizes="(max-width: 768px) 100vw, 50vw" className="object-cover transition-transform duration-[1.2s] ease-out group-hover:scale-[1.03]" />
                <div className="absolute inset-0 bg-gradient-to-t from-ink/70 via-transparent to-transparent" />
                <div className="absolute bottom-0 left-0 right-0 p-8">
                  <p className="text-[11px] font-bold uppercase tracking-[0.4em] text-paper/70">{sidonie.collection}</p>
                  <h3 className="mt-2 text-[clamp(1.25rem,3vw,2rem)] font-extrabold leading-[0.95] tracking-[-0.02em] text-paper">{sidonie.name}</h3>
                  {SHOP_ENABLED && <p className="mt-3 text-sm font-bold tabular-nums text-paper">od {sidonie.base_price.toLocaleString("pl-PL")} zł</p>}
                </div>
              </Link>
            </FadeIn>
            <FadeIn delay={0.2}>
              <Link href={`/v2/produkt/${mara.sku}`} className="group relative block aspect-[4/5] w-full overflow-hidden bg-mist md:mt-16">
                <Image src={mara.variants[0].media.hero_staging} alt={mara.name} fill sizes="(max-width: 768px) 100vw, 50vw" className="object-cover transition-transform duration-[1.2s] ease-out group-hover:scale-[1.03]" />
                <div className="absolute inset-0 bg-gradient-to-t from-ink/70 via-transparent to-transparent" />
                <div className="absolute bottom-0 left-0 right-0 p-8">
                  <p className="text-[11px] font-bold uppercase tracking-[0.4em] text-paper/70">{mara.collection}</p>
                  <h3 className="mt-2 text-[clamp(1.25rem,3vw,2rem)] font-extrabold leading-[0.95] tracking-[-0.02em] text-paper">{mara.name}</h3>
                  {SHOP_ENABLED && <p className="mt-3 text-sm font-bold tabular-nums text-paper">od {mara.base_price.toLocaleString("pl-PL")} zł</p>}
                </div>
              </Link>
            </FadeIn>
          </div>
        </div>
      </section>

      {/* FULL-BLEED parallax */}
      <section className="relative h-[80svh] w-full overflow-hidden">
        <Image src={sidonie.variants[0].media.hero_staging} alt="Sofa panoramique Sidonie w aranżacji" fill sizes="100vw" className="object-cover" />
        <div className="absolute inset-0 bg-ink/40" />
        <div className="absolute inset-0 flex items-center justify-center px-6">
          <div className="max-w-3xl text-center">
            <p className="text-[clamp(1.5rem,4vw,3.5rem)] font-light italic leading-[1.2] tracking-[-0.01em] text-paper">
              "Każdy mebel szyty na zamówienie.
              <br />
              Wybierz tkaninę, kolor i konfigurację."
            </p>
            <p className="mt-8 text-[11px] uppercase tracking-[0.4em] text-paper/60">— Vilmax Atelier, Trzcianka</p>
          </div>
        </div>
      </section>

      {/* CRAFT — sekcja rzemiosła z dużymi numerami */}
      <section className="bg-paper px-6 py-32 md:px-16 md:py-48">
        <div className="mx-auto max-w-[1600px]">
          <FadeIn>
            <p className="mb-16 text-[11px] font-bold uppercase tracking-[0.4em] text-ash">Rzemiosło</p>
          </FadeIn>
          <div className="grid grid-cols-1 gap-16 md:grid-cols-12 md:gap-8">
            <FadeIn className="md:col-span-5">
              <div>
                <p className="text-[clamp(4rem,12vw,10rem)] font-extrabold leading-[0.85] tracking-[-0.04em] text-ink">01</p>
                <h3 className="mt-6 text-[clamp(1.5rem,3vw,2.5rem)] font-extrabold leading-[1.05] tracking-[-0.02em] text-ink">
                  Compositing<br /><span className="font-light italic">Engine</span>
                </h3>
              </div>
            </FadeIn>
            <FadeIn delay={0.15} className="md:col-span-6 md:col-start-7">
              <div className="md:pt-8">
                <p className="text-[clamp(1rem,2vw,1.25rem)] font-light leading-[1.6] text-graphite">
                  Mebel komponowany w fotorealistycznym wnętrzu z algorytmicznym
                  cieniem kontaktowym. Zero efektu sztucznej wklejki. Każda tkanina
                  renderowana z własną fakturą — bouclé, velours côtelé, chiné.
                </p>
                <div className="mt-10 space-y-4 border-t border-line pt-8">
                  <div className="flex justify-between border-b border-line pb-3">
                    <span className="text-xs uppercase tracking-wider text-ash">Silnik</span>
                    <span className="text-xs font-medium text-ink">Sharp + Puppeteer</span>
                  </div>
                  <div className="flex justify-between border-b border-line pb-3">
                    <span className="text-xs uppercase tracking-wider text-ash">Format wyjściowy</span>
                    <span className="text-xs font-medium text-ink">WebP, AVIF</span>
                  </div>
                  <div className="flex justify-between border-b border-line pb-3">
                    <span className="text-xs uppercase tracking-wider text-ash">Wideo</span>
                    <span className="text-xs font-medium text-ink">Wan 2.1, 9:16</span>
                  </div>
                </div>
              </div>
            </FadeIn>
          </div>
          <div className="mt-32 grid grid-cols-1 gap-16 md:mt-48 md:grid-cols-12 md:gap-8">
            <FadeIn className="order-2 md:order-1 md:col-span-6">
              <div className="md:pt-8">
                <p className="text-[clamp(1rem,2vw,1.25rem)] font-light leading-[1.6] text-graphite">
                  Płynne, zapętlone wideo prezentujące ruch światła na meblu.
                  Generowane asynchronicznie przez chmurę GPU. Format 9:16 —
                  gotowe do Reels, TikTok, Stories. Zero kosztów ekipy filmowej.
                </p>
              </div>
            </FadeIn>
            <FadeIn delay={0.15} className="order-1 md:order-2 md:col-span-5 md:col-start-8">
              <div className="text-right">
                <p className="text-[clamp(4rem,12vw,10rem)] font-extrabold leading-[0.85] tracking-[-0.04em] text-ink">02</p>
                <h3 className="mt-6 text-[clamp(1.5rem,3vw,2.5rem)] font-extrabold leading-[1.05] tracking-[-0.02em] text-ink">
                  Wideo<br /><span className="font-light italic">9:16 Reels</span>
                </h3>
              </div>
            </FadeIn>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="bg-charcoal px-6 py-32 md:px-16 md:py-48">
        <div className="mx-auto max-w-4xl text-center">
          <FadeIn>
            <h2 className="text-[clamp(2rem,6vw,5rem)] font-extrabold leading-[0.95] tracking-[-0.02em] text-paper">
              Zacznij projekt<br /><span className="font-light italic">swojego salonu</span>
            </h2>
            <p className="mx-auto mt-8 max-w-xl text-sm text-paper/60 md:text-base">
              Wybierz tkaninę, kolor i konfigurację. Produkcja rozpoczyna się
              po złożeniu zamówienia. Dostawa z umówionym terminem.
            </p>
            <div className="mt-12 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
              <Link href="/v2/kategoria/narozniki" className="group flex items-center gap-3 bg-paper px-10 py-5 text-xs font-semibold uppercase tracking-[0.2em] text-ink transition-colors hover:bg-mist">
                Przeglądaj kolekcję
                <svg width="28" height="10" viewBox="0 0 28 10" fill="none" className="transition-transform group-hover:translate-x-1">
                  <path d="M0 5h26M22 1l4 4-4 4" stroke="currentColor" strokeWidth="1" />
                </svg>
              </Link>
              <Link href="/v2/kategoria/sofy" className="text-xs font-semibold uppercase tracking-[0.2em] text-paper/70 transition-colors hover:text-paper">
                Zobacz sofy →
              </Link>
            </div>
          </FadeIn>
        </div>
      </section>

      {/* Sklep wkrótce — dyskretna sekcja nad footerem */}
      <ShopComingSoon variant="light" />

      {/* Footer */}
      <footer className="bg-ink px-6 py-16 text-paper md:px-16">
        <div className="mx-auto max-w-[1600px]">
          <div className="grid grid-cols-1 gap-12 md:grid-cols-12">
            <div className="md:col-span-5">
              <p className="text-[clamp(1.5rem,3vw,2.5rem)] font-extrabold tracking-[0.15em]">VILMAX</p>
              <p className="mt-4 max-w-xs text-sm text-paper/50">
                Atelier mebli tapicerowanych.<br />Make-to-Order. Trzcianka, Wielkopolska.
              </p>
            </div>
            <div className="md:col-span-3 md:col-start-7">
              <p className="mb-4 text-[10px] font-bold uppercase tracking-[0.3em] text-paper/40">Kolekcje</p>
              <ul className="space-y-3 text-sm text-paper/70">
                <li><Link href="/v2/kategoria/narozniki" className="hover:text-paper">Narożniki</Link></li>
                <li><Link href="/v2/kategoria/sofy" className="hover:text-paper">Sofy</Link></li>
                <li><Link href="/v2/kategoria/lozka" className="hover:text-paper">Łóżka</Link></li>
              </ul>
            </div>
            <div className="md:col-span-3">
              <p className="mb-4 text-[10px] font-bold uppercase tracking-[0.3em] text-paper/40">Kontakt</p>
              <ul className="space-y-3 text-sm text-paper/70">
                <li><a href={CONTACT.phoneHref} className="hover:text-paper">{CONTACT.phone}</a></li>
                <li><a href={CONTACT.emailHref} className="hover:text-paper">{CONTACT.email}</a></li>
                <li className="text-paper/50">ul. Wspólna 3, 64-980 Trzcianka</li>
              </ul>
            </div>
          </div>
          <div className="mt-16 flex flex-col items-start justify-between gap-4 border-t border-paper/10 pt-8 text-[10px] text-paper/30 md:flex-row md:items-center">
            <span>© 2026 Vilmax · NIP 7631844521 · REGON 572115190</span>
            <span>Make-to-Order · Trzcianka · Wielkopolska</span>
          </div>
        </div>
      </footer>
    </>
  );
}