MASTER ARCHITECTURE DOCUMENT: VILMAX E-COMMERCE ECOSYSTEM
1. WIZJA STRATEGICZNA I POZYCJONOWANIE
Budowa autorskiego, zautomatyzowanego ekosystemu e-commerce (Vilmax) dla producenta mebli tapicerowanych w modelu Make-to-Order.
Celujemy w pozycjonowanie Ultra-Premium (standard Bobochic Paris). Gwarantujemy kinową jakość wizualną (wideo AI, fotorealistyczne kompozycje 3D) bez ponoszenia kosztów fizycznych sesji zdjęciowych, operując na chmurowych procesach GPU.

2. DOKTRYNA ARCHITEKTONICZNA: SEPARACJA SYSTEMÓW (HEADLESS)
Odrzucamy monolity (WordPress/WooCommerce). Ekosystem składa się z dwóch całkowicie wyizolowanych środowisk połączonych wyłącznie przez REST API (wzorzec "Fat Model, Dumb Adapters").

SYSTEM A: Vilmax Cockpit (Backend & AI Factory)
Technologia Core: Node.js (logika, orkiestracja, baza danych).

Infrastruktura GPU (Kluczowe): Do procesów graficznych i wideo system NIE używa lokalnych skryptów, lecz komunikuje się przez API z chmurą RunComfy (ComfyUI Managed Cloud).

Architektura Adapterów (Wyjścia Danych):

BaseLinker Adapter: Spłaszcza dane, usuwa wideo i wysyła płaski payload XML/JSON do platform typu Allegro.

D2C Store Adapter: Wystawia pełny, bogaty, zagnieżdżony obiekt Master JSON na potrzeby naszego frontendu.

SYSTEM B: Vilmax D2C Store (Frontend Store)
Technologia: Next.js (App Router), React, Tailwind CSS, Framer Motion.

Rola: Błyskawiczny, bezstanowy interfejs użytkownika. Sklep jest całkowicie pozbawiony własnej bazy CMS. Pobiera dane asynchronicznie z Systemu A i formatuje je w luksusowy interfejs.

3. PIPELINE WIZUALNY: SILNIK KOMPOZYCYJNY (SYSTEM A -> RunComfy)
Wizualny sukces marki zależy od wyeliminowania "efektu sztucznej wklejki". System A orkiestruje w RunComfy następujący potok warstw (Compositing Engine):

Warstwa 0 (Baza - Master Interiors): Załadowanie predefiniowanego, fotorealistycznego szablonu wnętrza (np. paryski apartament) o stałym, zdefiniowanym wektorze światła.

Warstwa 1 (Maska - BiRefNet): Wycięcie mebla z surowego zdjęcia z hali z bezwzględnym zachowaniem mikrotekstur (włoski bouclé, sztruks).

Warstwa 2 (Sztuczna Okluzja - Shadow Casting): Użycie ControlNet / IC-Light do wygenerowania algorytmicznego cienia kontaktowego u podstawy mebla, precyzyjnie reagującego na kąt światła z Warstwy 0.

Warstwa 3 (Kompozycja & Grading): Złożenie warstw w jeden obraz (WebP) z ujednoliceniem temperatury barwowej.

Generowanie Wideo (Wan 2.1 / SVD): Asynchroniczny worker pobiera gotową kompozycję i generuje na RunComfy płynne, zapętlone wideo 9:16 (Reels) prezentujące ruch światła na meblu.

Fallback: W razie niedostępności API RunComfy, worker w Node.js używa FFmpeg do wygenerowania pokazu slajdów (efekt Kena Burnsa), zapobiegając awarii UX na froncie.

4. KONTRAKT DANYCH (THE MASTER JSON)
To jest jedyny dopuszczalny format wymiany danych między Systemem A a Systemem B. Frontend (Devin) musi opierać swój kod na parsowaniu tej struktury:

JSON
{
  "sku": "VIL-LAV-BOUCLE",
  "name": "Narożnik Lavena",
  "base_price": 4500.00,
  "description": "Paryski design spotyka bezkompromisową wygodę.",
  "tech_specs": ["Mousse HR 30kg/m3", "Sprężyny faliste", "Tkanina łatwoczyszcząca"],
  "logistics": {
    "dimensions": { "width": 240, "depth": 160, "height": 85 },
    "packages": [
      { "id": "Paczka 1", "dimensions": "150x90x70 cm", "weight": "45 kg" },
      { "id": "Paczka 2", "dimensions": "100x90x70 cm", "weight": "30 kg" }
    ]
  },
  "variants": [
    {
      "sku": "LAV-BOU-BEIGE",
      "color_name": "Beżowe Bouclé",
      "swatch_color": "#dcd3c6",
      "media": {
        "hero_staging": "url_to_composite_webp",
        "packshot": "url_to_masked_webp",
        "video_reels": "url_to_runcomfy_mp4"
      }
    }
  ]
}
5. DESIGN SYSTEM I UX FRONTENDU (DYREKTYWY DLA SYSTEMU B)
Zasady projektowe dla aplikacji Next.js, które deklasują rynkową konkurencję:

Paleta Kolorystyczna (Flat & Minimalist): Ograniczenie do 4 barw. Głęboka czerń, Złamana biel (tła), Ciepły beż, Czysty szary (obramowania/linie). Bezwzględny zakaz stosowania cieni box-shadow oraz agresywnych kolorów promocji (żółty, czerwony).

Układ Desktop (Bento Grid): Podział asymetryczny. Lewa kolumna dominuje (kaskada wielkich zdjęć), prawa kolumna jest zablokowana (Sticky) i zawiera panel decyzyjny.

The Swatch UX (Zarządzanie Stanem): Brak rozwijanych list dla kolorów. Używamy interaktywnych próbek. Kliknięcie wariantu uruchamia tzw. Shallow Routing – natychmiastową podminę całej galerii i wideo dla wybranego SKU bez twardego odświeżania strony.

Sekcja Logistyczna (Dimensions des Colis): Chłodna, minimalistyczna tabela w sekcji decyzyjnej, renderująca węzeł logistics.packages. Zbija obiekcje transportowe przed dodaniem do koszyka.

Zarządzanie Wideo (Krytyczne dla Mobile): Pliki .mp4 9:16 osadzone w kaskadzie galerii muszą posiadać atrybuty muted, loop, playsInline i odtwarzać się automatycznie tylko wtedy, gdy wejdą w pole widzenia użytkownika (Intersection Observer).

Mikrointerakcje (Framer Motion): Aplikacja musi działać jak natywna aplikacja iOS (Slide-out cart, delikatne fade-in elementów, Reveal na scrollu). Brak nagłych przeskoków (Layout Shift).