# WebWizard - Rozšírená Technická Špecifikácia & Architektúra

Tento dokument nadväzuje na pôvodnú špecifikáciu a detailnejšie rozpracováva technické riešenie, architektúru a používateľskú cestu projektu WebWizard.

---

## 1. Architektúra Systému

WebWizard je navrhnutý ako **AI Website Concierge**, ktorý premieňa štruktúrované dáta od používateľa na funkčný web.

### 1.1 Komponenty
*   **Frontend (Wizard UI):** Jednostránková aplikácia (Vanilla JS) s dôrazom na UX, ktorá sprevádza používateľa procesom.
*   **Backend (API Layer):** Node.js (Express) alebo Python (FastAPI). Spracováva odpovede, spravuje session a komunikuje s AI.
*   **AI Engine:** Integrácia s LLM (napr. GPT-4o) cez API. Používa špecifické system prompty pre rôzne segmenty biznisu.
*   **Generator Service:** Modul, ktorý transformuje AI výstup (JSON/Markdown) na finálny kód (HTML/CSS/JS).
*   **Storage:** 
    *   Dočasný (Redis) pre stav rozpracovaného wizardu.
    *   Trvalý (S3-like) pre nahraté obrázky a vygenerované weby.

### 1.2 Tok dát
1.  **Vstup:** Používateľ odpovedá na otázky -> JSON objekt.
2.  **Spracovanie:** Backend obohatí JSON o kontextové prompty.
3.  **AI Generovanie:** LLM vygeneruje textový obsah a štruktúru stránok.
4.  **Templating:** Systém vyberie základnú šablónu a aplikuje vygenerovaný obsah a štýly.
5.  **Výstup:** Statické súbory pripravené na nasadenie.

---

## 2. Podrobný Pracovný Postup (Workflow)

### Krok 1: Segmentácia Biznisu (Context Discovery)
*   **Akcia:** Používateľ vyberie kategóriu (napr. Reštaurácia).
*   **AI logic:** Systém okamžite prispôsobuje nasledujúce otázky.
*   **Smart otázky (príklady):**
    *   *Reštaurácia:* "Máte denné menu?", "Ponúkate donášku?"
    *   *Advokát:* "Špecializujete sa na rodinné, trestné alebo obchodné právo?", "Ponúkate prvú konzultáciu zdarma?"

### Krok 2: Identita & Kontakt
*   **Otázky:** Názov, Slogan, Lokalita (integrácia s Google Maps API pre autocompletion), Kontaktné údaje.

### Krok 3: Služby a Hodnota (Content Mining)
*   **UI:** Dynamické checkboxy na základe segmentu + textové pole pre "Iné".
*   **Cieľ:** Získať surové dáta, ktoré AI premení na marketingovo presvedčivé texty.

### Krok 4: Vizuálny Štýl & Branding
*   **Vizuálne karty:** Minimalistický, Brutalist, Corporate, Soft/Organic.
*   **Farby:** Výber palety (Primary, Secondary, Accent) alebo extrakcia z loga.
*   **Logo:** Možnosť nahrať vlastné alebo vygenerovať dočasné textové logo.

### Krok 5: Štruktúra & Moduly
*   Výber modulov: FAQ, Galéria, Cenník, Kontaktný formulár, Testimonials (referencie).

### Krok 6: Generovanie (The Magic Phase)
*   Zobrazenie progress baru s vtipnými hláškami ("Trénujeme AI copywritera...", "Miešame farby...", "Staviame základy...").

---

## 3. Dátový Model (Input JSON)

```json
{
  "context": {
    "business_type": "restaurant",
    "sub_type": "italian_pizzeria",
    "specific_features": ["daily_menu", "reservations", "outdoor_seating"]
  },
  "identity": {
    "name": "Bella Napoli",
    "tagline": "Pravá chuť Neapola v srdci Žiliny",
    "location": "Mariánske námestie 4, Žilina",
    "contact": {
      "phone": "+421 900 000 000",
      "email": "ciao@bellanapoli.sk",
      "socials": ["instagram.com/bellanapoli"]
    }
  },
  "visuals": {
    "theme": "modern_elegant",
    "color_scheme": {
      "primary": "#E31837",
      "background": "#FFFFFF",
      "text": "#1A1A1A"
    },
    "font_style": "serif"
  },
  "content_structure": {
    "pages": ["home", "menu", "gallery", "contact"],
    "modules": ["faq", "instagram_feed"]
  },
  "assets": {
    "logo_url": "s3://path/to/logo.png",
    "image_source": "ai_generated"
  }
}
```

---

## 4. Stratégia Promptovania (AI Logic)

Namiesto jedného obrovského promptu použijeme **reťazenie (Chaining)**:

1.  **Copywriting Prompt:** "Na základe týchto dát {JSON} vytvor texty pre sekcie: Hero, O nás, Služby. Použi tón hlasu: {style}. Jazyk: {lang}."
2.  **Structure Prompt:** "Navrhni poradie sekcií na domovskej stránke pre {business_type} tak, aby bol konverzný pomer čo najvyšší."
3.  **Styling Prompt:** "Vyber Google Fonts kombináciu, ktorá sa hodí k štýlu {visuals.theme}."

---

## 5. Technické Obmedzenia & MVP Scope

*   **No-Edit Policy:** V prvej verzii (MVP) používateľ nemôže manuálne presúvať elementy. Môže len "Regenerovať sekciu" alebo "Zmeniť farby".
*   **Static Export:** Výstupom je čistý HTML/CSS s minimálnym JS (napatrený Vanilla JS pre formuláre a menu).
*   **Hosting:** Automatické nasadenie na subdoménu `meno-firmy.webwizard.sk`.

---

## 6. Budúce Rozšírenia (Phase 2)

1.  **AI Image Generation:** Integrácia s DALL-E 3 / Midjourney pre generovanie tematických fotiek na mieru.
2.  **SEO Autopilot:** AI automaticky vygeneruje meta tagy a alt texty k obrázkom.
3.  **Booking Integrácia:** Jednoduchý rezervačný systém pre služby (kaderníctva, reštaurácie).
4.  **Multi-language:** Automatický preklad celého webu jedným klikom.