Upload 6 files

Dockerfile

@@ -0,0 +1,17 @@
+FROM python:3.11-slim
+WORKDIR /home/user/app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY main.py .
+COPY ai_engine.py .
+COPY index.html .
+COPY ref_landing.html .
+COPY ref_ecommerce.html .
+COPY ref_restaurant.html .
+COPY ref_portfolio.html .
+COPY ref_dashboard.html .
+
+EXPOSE 7860
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

ai_engine.py

@@ -0,0 +1,993 @@
+"""
+BuildAI - AI Engine v7 — ULTRA UPGRADE
+New providers: Cerebras (ultra-fast), Gemini Flash (smart), DeepSeek (reasoning)
+Pipeline: Cerebras → Gemini → Groq, with deep fallback chains
+Higher quality output: v0/Lovable-level websites
+"""
+
+import os
+import json
+import asyncio
+import httpx
+from typing import AsyncGenerator
+
+
+# ─────────────────────────────────────────────────────────────────
+# REFERENCE FILE LOADER
+# ─────────────────────────────────────────────────────────────────
+
+_ref_cache = {}
+
+def load_ref(filename: str) -> str:
+    global _ref_cache
+    if filename in _ref_cache:
+        return _ref_cache[filename]
+    paths = [filename, f"/home/user/app/{filename}", f"./{filename}"]
+    for path in paths:
+        try:
+            with open(path, "r", encoding="utf-8") as f:
+                content = f.read()
+                _ref_cache[filename] = content
+                print(f"[BuildAI] ✓ Loaded {filename} ({len(content)} chars)")
+                return content
+        except FileNotFoundError:
+            continue
+    print(f"[BuildAI] ⚠ Not found: {filename}")
+    return ""
+
+
+def get_references(prompt: str) -> tuple[str, str]:
+    p = prompt.lower()
+    if any(k in p for k in ['ecommerce','e-commerce','store','shop','product','cart','buy','sell','marketplace','clothing','fashion','sneaker','brand','retail']):
+        return load_ref("ref_ecommerce.html"), "E-COMMERCE"
+    elif any(k in p for k in ['restaurant','cafe','coffee','food','menu','kitchen','chef','dining','pizza','burger','sushi','bakery','bistro','bar']):
+        return load_ref("ref_restaurant.html"), "RESTAURANT"
+    elif any(k in p for k in ['portfolio','designer','developer','cv','resume','case study','my work','showcase','freelance','photographer','creative']):
+        return load_ref("ref_portfolio.html"), "PORTFOLIO"
+    elif any(k in p for k in ['dashboard','admin','analytics','crm','chart','kpi','metric','report','data','fintech','crypto','saas app']):
+        return load_ref("ref_dashboard.html"), "DASHBOARD"
+    else:
+        return load_ref("ref_landing.html"), "SAAS LANDING PAGE"
+
+
+# ─────────────────────────────────────────────────────────────────
+# SMART IMAGE KEYWORD EXTRACTOR
+# ─────────────────────────────────────────────────────────────────
+
+IMAGE_KEYWORDS = {
+    "cafe": ["coffee,cafe,cup", "barista,coffee,making", "cafe,interior,cozy", "coffee,latte,art"],
+    "coffee": ["coffee,espresso,cup", "coffee,beans,roasted", "barista,coffee,brewing", "coffee,cafe,table"],
+    "restaurant": ["restaurant,food,plating", "restaurant,interior,dining", "chef,cooking,kitchen", "food,gourmet,dish"],
+    "pizza": ["pizza,italian,fresh", "pizza,oven,baking", "pizza,toppings,cheese", "pizzeria,italian,food"],
+    "burger": ["burger,beef,fresh", "hamburger,restaurant,juicy", "burger,fries,meal", "fast,food,burger"],
+    "sushi": ["sushi,japanese,fresh", "sushi,roll,seafood", "sushi,chef,making", "japanese,food,restaurant"],
+    "bakery": ["bakery,bread,fresh", "pastry,croissant,baked", "cake,decoration,bakery", "bread,oven,baking"],
+    "tea": ["tea,cup,hot", "tea,leaves,herbal", "teapot,ceramic,drink", "tea,ceremony,japan"],
+    "bar": ["bar,cocktail,drinks", "bartender,mixing,cocktail", "whiskey,glass,bar", "nightlife,bar,drinks"],
+    "fashion": ["fashion,clothing,style", "model,outfit,trendy", "clothes,boutique,store", "fashion,designer,wear"],
+    "sneaker": ["sneakers,shoes,white", "athletic,shoes,sport", "sneaker,collection,display", "shoes,fashion,urban"],
+    "clothing": ["clothing,fashion,store", "outfit,stylish,model", "wardrobe,clothes,fashion", "apparel,shopping,retail"],
+    "jewelry": ["jewelry,gold,elegant", "necklace,diamond,luxury", "ring,jewelry,sparkle", "bracelet,fashion,accessories"],
+    "saas": ["technology,software,laptop", "office,team,collaboration", "startup,tech,modern", "dashboard,analytics,screen"],
+    "startup": ["startup,office,modern", "team,meeting,business", "entrepreneur,laptop,coffee", "tech,office,workspace"],
+    "agency": ["office,creative,team", "agency,design,creative", "meeting,business,professional", "workspace,modern,office"],
+    "tech": ["technology,innovation,laptop", "coding,developer,screen", "tech,startup,modern", "software,computer,code"],
+    "gym": ["gym,workout,fitness", "exercise,weights,strong", "fitness,training,athlete", "gym,equipment,sport"],
+    "yoga": ["yoga,meditation,peace", "yoga,pose,wellness", "mindfulness,yoga,calm", "yoga,studio,class"],
+    "spa": ["spa,relaxation,wellness", "massage,therapy,calm", "beauty,spa,treatment", "wellness,retreat,peaceful"],
+    "medical": ["doctor,medical,hospital", "healthcare,professional,clinic", "medical,team,care", "hospital,health,medicine"],
+    "real estate": ["house,modern,architecture", "interior,luxury,home", "property,real,estate", "living,room,design"],
+    "interior": ["interior,design,modern", "furniture,home,decor", "living,space,elegant", "home,decoration,style"],
+    "education": ["education,students,learning", "classroom,school,teaching", "university,campus,study", "books,learning,knowledge"],
+    "course": ["online,learning,laptop", "education,course,digital", "student,studying,desk", "elearning,digital,course"],
+    "travel": ["travel,destination,adventure", "landscape,beautiful,nature", "tourism,city,explore", "travel,photography,world"],
+    "hotel": ["hotel,luxury,room", "resort,pool,vacation", "hotel,lobby,elegant", "travel,accommodation,comfort"],
+    "portfolio": ["designer,creative,workspace", "creative,studio,modern", "photographer,camera,art", "design,portfolio,work"],
+    "photography": ["camera,photography,lens", "photo,shoot,studio", "photographer,nature,outdoor", "portrait,photography,light"],
+    "music": ["music,studio,recording", "guitar,musician,performance", "concert,music,stage", "headphones,music,listening"],
+    "gaming": ["gaming,computer,setup", "game,controller,neon", "esports,gaming,tournament", "game,developer,screen"],
+    "finance": ["finance,investment,chart", "money,banking,professional", "stock,market,trading", "wealth,management,business"],
+    "law": ["law,office,professional", "lawyer,justice,court", "legal,business,meeting", "attorney,desk,documents"],
+    "default_hero": ["modern,business,professional", "office,team,success", "technology,innovation,future", "startup,growth,success"],
+    "default_product": ["product,design,modern", "item,display,showcase", "product,photography,clean", "goods,retail,store"],
+    "default_person": ["professional,portrait,business", "person,team,corporate", "headshot,professional,smile", "team,member,office"],
+}
+
+def extract_image_keywords(prompt: str, website_type: str) -> dict:
+    p = prompt.lower()
+    keywords = {"hero": None, "section": None, "card": None, "person": None}
+    for topic, kw_list in IMAGE_KEYWORDS.items():
+        if topic in p:
+            if not keywords["hero"]:
+                keywords["hero"] = kw_list[0]
+            if not keywords["section"] and len(kw_list) > 1:
+                keywords["section"] = kw_list[1]
+            if not keywords["card"] and len(kw_list) > 2:
+                keywords["card"] = kw_list[2]
+            break
+    if not keywords["hero"]:
+        type_defaults = {
+            "E-COMMERCE": "product,fashion,store",
+            "RESTAURANT": "restaurant,food,dining",
+            "PORTFOLIO": "creative,designer,workspace",
+            "DASHBOARD": "office,technology,business",
+            "SAAS LANDING PAGE": "technology,startup,modern",
+        }
+        keywords["hero"] = type_defaults.get(website_type, "business,modern,professional")
+    if not keywords["section"]:
+        keywords["section"] = keywords["hero"]
+    if not keywords["card"]:
+        keywords["card"] = keywords["hero"]
+    keywords["person"] = "professional,portrait,person"
+    return keywords
+
+
+def get_photo_instructions(prompt: str, website_type: str) -> str:
+    kw = extract_image_keywords(prompt, website_type)
+    return f"""
+━━━ REAL PHOTOS — NON-NEGOTIABLE ━━━
+Use loremflickr.com for ALL images. Format: https://loremflickr.com/WIDTH/HEIGHT/keyword1,keyword2
+
+IMPORTANT: Use EXACTLY these pre-matched keywords:
+
+Hero background:
+  style={{{{backgroundImage:"url('https://loremflickr.com/1600/900/{kw["hero"]}')"}}}}
+  className="bg-cover bg-center bg-no-repeat"
+
+Section/feature image:
+  <img src="https://loremflickr.com/800/500/{kw["section"]}" className="w-full h-64 object-cover rounded-2xl" loading="lazy" decoding="async" alt="..." />
+
+Card/product image:
+  <img src="https://loremflickr.com/600/500/{kw["card"]}" className="w-full h-52 object-cover" loading="lazy" decoding="async" alt="..." />
+
+Person/team avatar:
+  <img src="https://loremflickr.com/200/200/{kw["person"]}" className="w-16 h-16 rounded-full object-cover" loading="lazy" decoding="async" alt="..." />
+
+STRICT RULES:
+- 6 to 8 images MINIMUM in the site
+- Add ?lock=1, ?lock=2 etc. for variety
+- Hero MUST have real background photo
+- NEVER use placeholder.com — gray boxes kill design
+"""
+
+
+# ─────────────────────────────────────────────────────────────────
+# CDN STACK
+# ─────────────────────────────────────────────────────────────────
+
+CDN_STACK = """
+━━━ TECHNOLOGY STACK ━━━
+
+PUT IN <head>:
+<script src="https://cdn.tailwindcss.com"></script>
+<script>
+tailwind.config = {
+  theme: {
+    extend: {
+      fontFamily: {
+        display: ['Syne', 'system-ui', 'sans-serif'],
+        sans: ['DM Sans', 'system-ui', 'sans-serif'],
+        mono: ['JetBrains Mono', 'monospace'],
+      },
+      colors: {
+        brand: {
+          50: 'var(--brand-50)',
+          500: 'var(--brand-500)',
+          600: 'var(--brand-600)',
+          700: 'var(--brand-700)',
+        }
+      },
+      animation: {
+        'fade-up': 'fadeUp 0.7s ease forwards',
+        'fade-in': 'fadeIn 0.5s ease forwards',
+        'float': 'float 4s ease-in-out infinite',
+        'pulse-slow': 'pulse 4s ease-in-out infinite',
+        'gradient': 'gradientFlow 6s ease infinite',
+        'slide-in': 'slideIn 0.5s ease forwards',
+        'shimmer': 'shimmer 2s infinite',
+        'spin-slow': 'spin 8s linear infinite',
+        'bounce-slow': 'bounce 3s infinite',
+      },
+      keyframes: {
+        fadeUp: { '0%': { opacity: 0, transform: 'translateY(32px)' }, '100%': { opacity: 1, transform: 'translateY(0)' } },
+        fadeIn: { '0%': { opacity: 0 }, '100%': { opacity: 1 } },
+        float: { '0%,100%': { transform: 'translateY(0)' }, '50%': { transform: 'translateY(-16px)' } },
+        gradientFlow: { '0%,100%': { backgroundPosition: '0% 50%' }, '50%': { backgroundPosition: '100% 50%' } },
+        slideIn: { '0%': { opacity: 0, transform: 'translateX(-20px)' }, '100%': { opacity: 1, transform: 'translateX(0)' } },
+        shimmer: { '0%': { backgroundPosition: '-200% center' }, '100%': { backgroundPosition: '200% center' } },
+      },
+      backgroundSize: { '200%': '200%', '300%': '300%', '400%': '400%' },
+    }
+  }
+}
+</script>
+<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"/>
+<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
+<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
+<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+
+PUT IN <body>: <div id="root"></div>
+
+PUT AT END OF <body>:
+<script type="text/babel">
+const { useState, useEffect, useRef, useCallback } = React;
+// ALL YOUR COMPONENTS HERE
+ReactDOM.createRoot(document.getElementById('root')).render(<App />);
+</script>
+
+━━━ REACT RULES ━━━
+- Destructure hooks: const { useState, useEffect, useRef, useCallback } = React;
+- Arrow function components: const Navbar = () => { ... }
+- className not class; htmlFor not for
+- Inline styles: style={{backgroundColor: '#000'}}
+- Events: onClick, onChange, onMouseEnter, onMouseLeave
+- Always add loading="lazy" decoding="async" to images
+- Mobile menu: useState(false) for isOpen
+"""
+
+
+# ─────────────────────────────────────────────────────────────────
+# ELITE DESIGN SYSTEM — v7 UPGRADE
+# ─────────────────────────────────────────────────────────────────
+
+DESIGN_BIBLE = """
+━━━ ELITE DESIGN SYSTEM v7 ━━━
+
+CSS CUSTOM PROPERTIES (add to <style> in <head>):
+:root {
+  --brand-50: #eef2ff;
+  --brand-500: #6366f1;
+  --brand-600: #4f46e5;
+  --brand-700: #4338ca;
+  --surface: #0a0b14;
+  --surface-2: #0d0e1a;
+  --surface-3: #111327;
+  --border: rgba(255,255,255,0.07);
+  --border-brand: rgba(99,102,241,0.3);
+  --text-primary: #f1f5f9;
+  --text-secondary: #94a3b8;
+  --text-muted: #475569;
+}
+
+/* Noise texture for depth */
+.noise::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
+  pointer-events: none;
+  border-radius: inherit;
+}
+
+/* Glow effects */
+.glow-brand { box-shadow: 0 0 40px rgba(99,102,241,0.15), 0 0 80px rgba(99,102,241,0.08); }
+.glow-on-hover:hover { box-shadow: 0 0 30px rgba(99,102,241,0.25); transition: box-shadow 0.3s; }
+
+TYPOGRAPHY SCALE:
+- Hero display: font-display text-5xl sm:text-7xl lg:text-[96px] font-bold tracking-[-3px] leading-[0.95] text-white
+- Section title: font-display text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight
+- Card title: font-sans text-xl font-semibold text-white
+- Body large: font-sans text-lg text-gray-400 leading-relaxed
+- Body: font-sans text-base text-gray-500 leading-relaxed
+- Caption: font-sans text-sm text-gray-600
+- Eyebrow: font-mono text-xs font-bold tracking-[0.25em] uppercase text-indigo-400
+
+GRADIENT TEXT OPTIONS:
+/* Option A — Cool electric */
+className="bg-gradient-to-r from-indigo-400 via-violet-300 to-cyan-400 bg-clip-text text-transparent bg-[size:200%] animate-gradient"
+/* Option B — Warm premium */
+className="bg-gradient-to-r from-orange-400 via-pink-400 to-violet-400 bg-clip-text text-transparent bg-[size:200%] animate-gradient"
+/* Option C — Sharp neon */
+className="bg-gradient-to-r from-cyan-300 via-blue-400 to-indigo-500 bg-clip-text text-transparent bg-[size:200%] animate-gradient"
+
+BUTTONS:
+Primary CTA:
+  className="group relative inline-flex items-center gap-2 px-8 py-4 bg-indigo-600 hover:bg-indigo-500 text-white font-semibold rounded-2xl transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_20px_40px_rgba(99,102,241,0.4)] active:scale-95 overflow-hidden"
+  /* Add shimmer: <span className="absolute inset-0 bg-gradient-to-r from-transparent via-white/10 to-transparent translate-x-[-200%] group-hover:translate-x-[200%] transition-transform duration-700" /> */
+
+Secondary:
+  className="px-8 py-4 border border-white/10 text-white font-semibold rounded-2xl hover:bg-white/5 hover:border-white/20 transition-all duration-200 backdrop-blur-sm"
+
+Ghost:
+  className="inline-flex items-center gap-1 text-gray-400 hover:text-white font-medium transition-colors group"
+  /* Arrow: <span className="group-hover:translate-x-1 transition-transform">→</span> */
+
+CARDS (choose based on context):
+Glassmorphic:
+  className="relative bg-white/[0.03] backdrop-blur-sm border border-white/[0.07] rounded-3xl p-6 hover:-translate-y-1 hover:border-indigo-500/20 hover:bg-white/[0.05] transition-all duration-300 group overflow-hidden"
+
+Bento cell (for bento grid layouts):
+  className="bg-[#0d0e1a] border border-white/[0.06] rounded-2xl p-5 hover:border-indigo-500/20 transition-colors group"
+
+Feature card with glow:
+  className="relative p-6 rounded-2xl bg-gradient-to-br from-white/[0.04] to-white/[0.01] border border-white/[0.07] hover:border-indigo-500/30 transition-all duration-300 group"
+
+BENTO GRID LAYOUTS (use for features):
+<div className="grid grid-cols-6 grid-rows-auto gap-4">
+  <div className="col-span-6 md:col-span-4 row-span-2 ..."> {/* Wide card */}
+  <div className="col-span-6 md:col-span-2 ..."> {/* Tall card */}
+  <div className="col-span-6 md:col-span-2 ..."> {/* Square card */}
+  <div className="col-span-6 md:col-span-3 ..."> {/* Half card */}
+  <div className="col-span-6 md:col-span-3 ..."> {/* Half card */}
+</div>
+
+NAVBAR (always sticky):
+className="fixed top-0 left-0 right-0 z-50 px-6 py-4 flex items-center justify-between backdrop-blur-2xl bg-black/50 border-b border-white/[0.06]"
+/* Logo: font-display font-bold text-lg tracking-tight */
+
+HERO PATTERNS:
+Pattern A — Full viewport with mesh bg:
+<section className="relative min-h-screen flex items-center justify-center text-center px-6 pt-20 overflow-hidden">
+  {/* Mesh gradient background */}
+  <div className="absolute inset-0 bg-[#07080f]">
+    <div className="absolute inset-0" style={{background: 'radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99,102,241,0.3) 0%, transparent 60%)'}} />
+    <div className="absolute top-1/3 left-1/4 w-[600px] h-[600px] bg-violet-600/10 rounded-full blur-[120px]" />
+    <div className="absolute bottom-1/4 right-1/4 w-[400px] h-[400px] bg-indigo-600/10 rounded-full blur-[100px]" />
+    {/* Grid overlay */}
+    <div className="absolute inset-0" style={{backgroundImage: 'linear-gradient(rgba(99,102,241,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(99,102,241,0.03) 1px, transparent 1px)', backgroundSize: '60px 60px'}} />
+  </div>
+  <div className="relative z-10 max-w-5xl mx-auto">...</div>
+</section>
+
+Pattern B — Split hero:
+<section className="min-h-screen grid grid-cols-1 lg:grid-cols-2 gap-0">
+  <div className="flex items-center px-8 lg:px-16 py-24 bg-[#07080f]">{/* Text */}</div>
+  <div className="relative overflow-hidden bg-indigo-950">{/* Visual */}</div>
+</section>
+
+SCROLL REVEAL (add to ALL sections):
+const useReveal = (threshold = 0.1) => {
+  const ref = useRef(null);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const obs = new IntersectionObserver(([e]) => {
+      if (e.isIntersecting) {
+        e.target.style.opacity = '1';
+        e.target.style.transform = 'translateY(0)';
+        obs.unobserve(e.target);
+      }
+    }, { threshold });
+    el.style.opacity = '0';
+    el.style.transform = 'translateY(40px)';
+    el.style.transition = 'opacity 0.7s ease, transform 0.7s ease';
+    obs.observe(el);
+    return () => obs.disconnect();
+  }, []);
+  return ref;
+};
+/* Stagger children: style={{transitionDelay: `${i * 0.1}s`}} */
+
+SECTIONS SPACING:
+<section className="py-28 lg:py-36 px-6">
+  <div className="max-w-6xl mx-auto">...</div>
+</section>
+
+SECTION HEADER PATTERN:
+<div className="text-center mb-16 lg:mb-20">
+  <div className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-indigo-500/10 border border-indigo-500/20 text-indigo-300 font-mono text-xs tracking-widest uppercase mb-6">
+    ✦ Section Label
+  </div>
+  <h2 className="font-display text-4xl lg:text-5xl font-bold text-white tracking-tight mb-4">Section Title</h2>
+  <p className="text-gray-400 text-lg max-w-2xl mx-auto leading-relaxed">Subtitle text here</p>
+</div>
+
+ICON BOXES:
+className="w-12 h-12 rounded-2xl bg-indigo-500/10 border border-indigo-500/20 flex items-center justify-center text-2xl mb-5 group-hover:scale-110 group-hover:bg-indigo-500/20 transition-all duration-300"
+
+STATS ROW:
+<div className="grid grid-cols-2 md:grid-cols-4 gap-8 py-12 border-y border-white/[0.06]">
+  {[['$2.4B', 'Revenue Generated'], ['50K+', 'Customers'], ['99.9%', 'Uptime SLA'], ['4.9★', 'Average Rating']].map(([n, l]) => (
+    <div key={l} className="text-center group">
+      <div className="font-display text-4xl font-bold text-white mb-1 group-hover:text-indigo-300 transition-colors">{n}</div>
+      <div className="font-sans text-sm text-gray-500">{l}</div>
+    </div>
+  ))}
+</div>
+
+TESTIMONIAL CARDS:
+<div className="bg-white/[0.03] border border-white/[0.07] rounded-2xl p-6 hover:border-indigo-500/20 transition-colors">
+  <div className="flex gap-0.5 mb-4">
+    {[...Array(5)].map((_, i) => <span key={i} className="text-amber-400 text-sm">★</span>)}
+  </div>
+  <p className="text-gray-300 leading-relaxed mb-6 italic">"Quote here..."</p>
+  <div className="flex items-center gap-3">
+    <img src="..." className="w-10 h-10 rounded-full object-cover" />
+    <div>
+      <div className="font-semibold text-white text-sm">Name</div>
+      <div className="text-gray-500 text-xs">Role, Company</div>
+    </div>
+  </div>
+</div>
+
+FOOTER:
+<footer className="bg-[#050608] border-t border-white/[0.05] pt-16 pb-8 px-6">
+  <div className="max-w-6xl mx-auto">
+    <div className="grid grid-cols-2 md:grid-cols-5 gap-8 mb-12">
+      <div className="col-span-2">{/* Brand + tagline */}</div>
+      {/* 3 link columns */}
+    </div>
+    <div className="border-t border-white/[0.05] pt-6 flex flex-col sm:flex-row justify-between items-center gap-4">
+      <p className="text-gray-600 text-sm">© 2025 Brand. All rights reserved.</p>
+      {/* Social icons */}
+    </div>
+  </div>
+</footer>
+
+MOBILE HAMBURGER:
+const [menuOpen, setMenuOpen] = useState(false);
+<button onClick={() => setMenuOpen(!menuOpen)} className="md:hidden w-9 h-9 flex flex-col justify-center items-center gap-1.5 group" aria-label="Menu">
+  <span className={`w-5 h-0.5 bg-gray-400 transition-all duration-200 ${menuOpen ? 'rotate-45 translate-y-2' : ''}`}/>
+  <span className={`w-5 h-0.5 bg-gray-400 transition-all duration-200 ${menuOpen ? 'opacity-0' : ''}`}/>
+  <span className={`w-5 h-0.5 bg-gray-400 transition-all duration-200 ${menuOpen ? '-rotate-45 -translate-y-2' : ''}`}/>
+</button>
+{menuOpen && (
+  <div className="md:hidden absolute top-full left-0 right-0 bg-black/95 backdrop-blur-2xl border-b border-white/[0.06] py-4 px-6 flex flex-col gap-3 animate-fade-in">
+    {/* nav links */}
+  </div>
+)}
+
+PRICING CARDS:
+<div className="grid grid-cols-1 md:grid-cols-3 gap-6 max-w-5xl mx-auto">
+  {/* Free */}
+  <div className="bg-white/[0.03] border border-white/[0.07] rounded-3xl p-8">...</div>
+  {/* Pro — highlighted */}
+  <div className="relative bg-indigo-600 rounded-3xl p-8 scale-105 shadow-[0_0_80px_rgba(99,102,241,0.3)]">
+    <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-4 py-1 bg-amber-400 text-black text-xs font-bold rounded-full">Most Popular</div>
+    ...
+  </div>
+  {/* Enterprise */}
+  <div className="bg-white/[0.03] border border-white/[0.07] rounded-3xl p-8">...</div>
+</div>
+
+FAQ ACCORDION:
+const [openFaq, setOpenFaq] = useState(null);
+<div className="max-w-2xl mx-auto divide-y divide-white/[0.06]">
+  {faqs.map((faq, i) => (
+    <div key={i} className="py-5 cursor-pointer group" onClick={() => setOpenFaq(openFaq === i ? null : i)}>
+      <div className="flex justify-between items-center">
+        <span className="font-semibold text-white group-hover:text-indigo-300 transition-colors">{faq.q}</span>
+        <span className={`text-indigo-400 transition-transform duration-200 ${openFaq === i ? 'rotate-45' : ''}`}>+</span>
+      </div>
+      {openFaq === i && <p className="mt-3 text-gray-400 text-sm leading-relaxed animate-fade-in">{faq.a}</p>}
+    </div>
+  ))}
+</div>
+
+ANNOUNCEMENT BAR (for ecommerce):
+<div className="bg-indigo-600 text-white text-center py-2.5 px-4 text-sm font-medium">
+  🎉 Free shipping on orders over $75 — Use code <strong>BUILDAI</strong>
+  <button className="ml-4 text-white/60 hover:text-white" onClick={() => ...}>×</button>
+</div>
+
+SCROLL TO TOP BUTTON:
+const [showTop, setShowTop] = useState(false);
+useEffect(() => {
+  const handleScroll = () => setShowTop(window.scrollY > 400);
+  window.addEventListener('scroll', handleScroll);
+  return () => window.removeEventListener('scroll', handleScroll);
+}, []);
+{showTop && (
+  <button onClick={() => window.scrollTo({top:0,behavior:'smooth'})}
+    className="fixed bottom-6 right-6 z-50 w-10 h-10 bg-indigo-600 hover:bg-indigo-500 text-white rounded-full shadow-lg hover:shadow-indigo-500/30 transition-all duration-200 hover:-translate-y-0.5 flex items-center justify-center text-sm animate-fade-in">
+    ↑
+  </button>
+)}
+"""
+
+
+# ─────────────────────────────────────────────────────────────────
+# MANDATORY SECTIONS PER TYPE
+# ─────────────────────────────────────────────────────────────────
+
+SECTIONS_MAP = {
+    "SAAS LANDING PAGE": """
+MANDATORY SECTIONS IN THIS ORDER:
+1. Navbar — sticky glassmorphic, logo (font-display), nav links, "Start free" CTA + mobile hamburger
+2. Hero — full viewport mesh-gradient bg, eyebrow pill ("✦ Now powered by AI"), giant display headline with animated gradient text, 2-line subtext, 2 CTA buttons (primary + secondary), floating product screenshot with glow border + floating stat badges
+3. Social proof — "Trusted by 10,000+ teams" + 6 real company name logos in muted grayscale
+4. Features bento — "Built different" heading, BENTO GRID layout with 6 feature cells (1 large + 5 standard), each with icon box, title, 2-line description
+5. How it works — "Simple as 1, 2, 3", 3 numbered steps with connecting line, icon + bold title + description + screenshot
+6. Stats — 4 big numbers in dark row (users, revenue, countries, rating)
+7. Testimonials — "Loved by builders worldwide", 3 card grid with stars + quote + avatar + name + company
+8. Pricing — 3 tiers, middle card highlighted indigo with scale-105 + "Most Popular" badge, full feature list with checkmarks
+9. FAQ — 6 questions with smooth accordion, max-w-2xl
+10. Final CTA — dark gradient section, huge headline, email capture, "No credit card" note
+11. Footer — 4-col links, social icons, copyright
+""",
+    "E-COMMERCE": """
+MANDATORY SECTIONS IN THIS ORDER:
+1. Announcement bar — promo text + dismiss button, indigo bg
+2. Navbar — logo, search bar, cart icon (badge count), account, hamburger
+3. Hero banner — full-bleed image bg + dark overlay, large headline, 2 CTAs (Shop Now / View Lookbook)
+4. Categories — "Shop by Category", 4–6 category cards each with image + label overlay + hover zoom
+5. Featured products — "Best Sellers", 4-col product grid; each card: image (hover zoom), wishlist heart, sale badge, brand name, product name, price + strikethrough, star rating, Add to Cart button
+6. Flash sale — countdown timer (useEffect setInterval hours:mins:secs), 4 discounted products
+7. Value props — 4 icons row (Free Shipping / Easy Returns / Secure Pay / 24/7 Support)
+8. Brand story — split: image left + text right with "Our Story" + signature
+9. Reviews — 3 customer cards with product photo, stars, quote, reviewer name + date
+10. Newsletter — "Get 15% off", email input + submit
+11. Footer — links, payment icons, social, copyright
+""",
+    "RESTAURANT": """
+MANDATORY SECTIONS IN THIS ORDER:
+1. Navbar — logo, nav links, "Reserve a Table" warm CTA, phone number
+2. Hero — full-screen image bg + dark overlay, restaurant name + tagline, 2 CTAs (View Menu / Book Table), floating badge ("Michelin Recommended")
+3. Story — split: chef photo left + story text right, signature, award badges
+4. Menu — "Our Menu", tab switcher (Starters/Mains/Desserts/Drinks with useState), menu items in grid: image + name + description + price
+5. Gallery — "From Our Kitchen", masonry-style 3-col grid with varied heights, food + ambiance photos with hover overlay
+6. Reservation form — date picker, time select, party size, name, email, notes, CTA button
+7. Chef special — featured dish card: large image + ingredient tags + story text
+8. Reviews — 3 Google-style cards: stars + quote + reviewer + occasion
+9. Location & Hours — address + opening hours table (day + time) + map placeholder
+10. Footer — social, newsletter, copyright
+""",
+    "PORTFOLIO": """
+MANDATORY SECTIONS IN THIS ORDER:
+1. Navbar — name/monogram, nav (Work/About/Skills/Contact), "Hire Me" CTA
+2. Hero — split or centered; name + role with typewriter effect (useEffect + setInterval), tagline, available indicator (green pulse dot + "Open to work"), 2 CTAs + social links
+3. Skills — horizontal scrollable chips, each with emoji/icon + skill name, show 15-20 skills
+4. Work — "Selected Work", 2-col grid; each project: image with hover overlay showing title + tags + visit links
+5. About — photo + bio + experience timeline with years
+6. Services — 3 cards: icon + service + description + included items
+7. Testimonials — 2–3 client quotes: avatar + name + company + quote
+8. Process — "How I Work", 4 numbered steps with icon + title + description
+9. Contact — "Let's Create Together", email + social icons, contact form (name/email/message/send)
+10. Footer — minimal: name + copyright + social
+""",
+    "DASHBOARD": """
+MANDATORY LAYOUT:
+Fixed sidebar (w-64) + scrollable main area
+
+SIDEBAR:
+- Logo + app name at top
+- Nav groups: Overview / Analytics / Projects / Team / Settings
+- Each item: icon + label, active state highlighted
+- User profile card at bottom (avatar + name + email + sign out)
+
+TOPBAR (sticky within main):
+- Page title left
+- Search center
+- Notifications bell + avatar right
+
+MAIN CONTENT SECTIONS:
+1. Welcome banner — "Good morning, [Name]" + date + quick action buttons
+2. KPI cards — 4 cards: Total Revenue / Active Users / Conversion Rate / Monthly Growth
+   Each: icon box + big number + % change badge (green up / red down) + sparkline SVG
+3. Charts row — large area/line chart (col-span-2) + donut/pie chart (col-span-1)
+4. Recent activity table — headers + 6 rows with avatar + name + action + amount + status badge
+5. Bottom row — activity feed (left) + top performers list (right)
+
+MOBILE: sidebar collapses to bottom tab bar on small screens
+"""
+}
+
+
+# ─────────────────────────────────────────────────────────────────
+# SYSTEM PROMPTS
+# ─────────────────────────────────────────────────────────────────
+
+def get_builder_prompt(ref_content: str, website_type: str, prompt: str = "") -> str:
+    sections = SECTIONS_MAP.get(website_type, SECTIONS_MAP["SAAS LANDING PAGE"])
+    photo_instructions = get_photo_instructions(prompt, website_type)
+
+    ref_section = ""
+    if ref_content:
+        ref_section = f"""
+━━━ DESIGN REFERENCE — STUDY AND ADAPT ━━━
+Learn the spacing rhythm, color tokens, animation approach, and component patterns.
+Adapt these to the user's specific brand — do NOT copy verbatim.
+
+{ref_content[:5000]}
+━━━ END REFERENCE ━━━
+"""
+
+    return f"""You are a world-class senior frontend engineer who has shipped production code at Stripe, Linear, Vercel, and Loom. You build websites so visually stunning they go viral on Twitter. Your work is indistinguishable from Lovable, v0.dev, or Framer — except yours is BETTER.
+
+You are building a {website_type} right now.
+
+{CDN_STACK}
+
+{DESIGN_BIBLE}
+
+{sections}
+
+{ref_section}
+
+{photo_instructions}
+
+━━━ QUALITY MANDATE ━━━
+This website must look like it costs $50,000 to build. Ask yourself: "Would this appear on awwwards.com?"
+- Every section must have visual hierarchy that guides the eye
+- Dark theme: bg-[#07080f] base, subtle lighter sections for contrast
+- Typography must use Syne (display) + DM Sans (body) — NOT Inter or Roboto
+- Animations must feel intentional and premium, not cheap
+- Every card must have hover state (translate-y, border color change, or glow)
+- Hero must be breathtaking — if it's not shocking how impressive it is, make it more impressive
+
+━━━ OUTPUT RULES — NEVER BREAK ━━━
+1. Return ONLY raw HTML from <!DOCTYPE html> to </html>. NOTHING before or after.
+2. Zero markdown. Zero backticks. Zero explanations.
+3. ALL React inside <script type="text/babel"> at bottom of body
+4. Tailwind CDN for all utility classes; <style> block for CSS custom properties + animations
+5. Google Fonts via <link> in head
+6. REAL compelling content — specific names, real numbers, actual compelling copy
+7. Every section scroll-reveal via IntersectionObserver
+8. Scroll-to-top button fixed bottom-right"""
+
+
+PHOTO_SYSTEM = """
+Use loremflickr.com for ALL images: https://loremflickr.com/WIDTH/HEIGHT/keyword1,keyword2
+- Hero bg: style={{backgroundImage:"url('https://loremflickr.com/1600/900/KEYWORD')"}}
+- Section img: <img src="https://loremflickr.com/800/500/KEYWORD" className="w-full h-64 object-cover rounded-2xl" loading="lazy" decoding="async" alt="..." />
+- Card img: <img src="https://loremflickr.com/600/500/KEYWORD" className="w-full h-52 object-cover" loading="lazy" decoding="async" alt="..." />
+- Minimum 6 images. Add ?lock=1 ?lock=2 for variety. NEVER placeholder.com.
+"""
+
+REVIEWER_PROMPT = f"""You are a world-class design director at a top-tier product studio. Your job: take a good website and make it extraordinary — Stripe/Linear/Vercel caliber.
+
+OUTPUT RULES:
+1. Return ONLY the complete improved HTML. Nothing else. No backticks.
+2. KEEP ALL sections and images. Only elevate — never remove.
+
+{DESIGN_BIBLE}
+
+{PHOTO_SYSTEM}
+
+━━━ YOUR ENHANCEMENT CHECKLIST ━━━
+
+TYPOGRAPHY UPGRADE:
+□ Hero headline must be MASSIVE (text-7xl lg:text-[96px] font-bold) — if it doesn't feel oversized, go bigger
+□ Use font-display class on all headlines (Syne font)
+□ Gradient text on main hero headline — animated gradientFlow
+□ Eyebrow labels use font-mono tracking-widest uppercase text-indigo-400
+
+VISUAL HIERARCHY:
+□ Hero is the most impressive thing on the page — period
+□ Strong contrast between sections (alternate bg-[#07080f] and bg-[#0d0e1a])
+□ Section headers centered with eyebrow label + large title + muted subtitle
+□ Generous white space — padding on sections should be py-28 lg:py-36
+
+ANIMATIONS — NON-NEGOTIABLE:
+□ useReveal hook (IntersectionObserver) on EVERY section
+□ Staggered animation delays on grid items (i * 0.1s)
+□ Hero content animates in on mount
+□ Cards: hover:-translate-y-1 + hover:border-indigo-500/20
+□ CTA buttons have shimmer/shine effect on hover
+□ Floating orb blobs behind hero (blur-[120px] large circles)
+
+BENTO GRID FEATURES:
+□ Features section uses bento grid, NOT just a uniform 3-col grid
+□ One large featured card + smaller cells
+
+SOCIAL PROOF:
+□ Hero has "Join 25,000+ teams" badge
+□ Real company names in trust bar
+□ Specific metrics with decimal places (not "many" but "14,832")
+□ Star ratings on ALL testimonials
+
+PREMIUM DETAILS:
+□ Gradient border on highlighted pricing card
+□ Scroll-to-top button (fixed, bottom-right)
+□ Active anchor links with smooth scroll behavior
+□ FAQ accordion (useState) smooth expand/collapse
+□ Input focus rings (ring-2 ring-indigo-500/50)
+□ All interactive elements: cursor-pointer
+
+MOBILE:
+□ All grids: grid-cols-1 sm:grid-cols-2 lg:grid-cols-3
+□ Hamburger with animated lines (rotate on open)
+□ No horizontal overflow
+□ Tap targets at least 44px height
+
+{CDN_STACK}"""
+
+
+POLISHER_PROMPT = f"""You are the creative director doing the final QA pass before launch. Make it flawless.
+
+OUTPUT RULES:
+1. Return ONLY the final complete HTML. Nothing else.
+2. Do NOT remove anything. Only polish.
+
+{PHOTO_SYSTEM}
+
+━━━ FINAL POLISH CHECKLIST ━━━
+
+SEO + META:
+□ <title> specific, compelling, under 60 chars
+□ <meta name="description"> under 160 chars
+□ <meta property="og:title"> and <meta property="og:description">
+□ <link rel="icon"> emoji favicon
+□ <meta name="theme-color"> matching brand color (#6366f1)
+□ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+MICRO-INTERACTIONS:
+□ Nav links: underline slide-in on hover via CSS
+□ Feature icons: scale on card hover (transition in CSS, applied via group)
+□ CTA primary button: shimmer overlay on hover
+□ All interactive elements have cursor-pointer
+□ Buttons: active:scale-95 press feedback
+
+VISUAL FINAL TOUCHES:
+□ Color palette consistent across ALL sections
+□ No section looks out of place
+□ Fonts loading correctly from Google Fonts
+□ Images all have loading="lazy" decoding="async" and alt text
+□ CSS custom properties in :root are complete
+
+JAVASCRIPT:
+□ Hamburger toggle works flawlessly
+□ FAQ accordion opens/closes smoothly
+□ Scroll-to-top shows at 300px and works
+□ Smooth scroll on all anchor links
+□ No console errors from React
+
+PERFORMANCE:
+□ will-change: transform on animated elements
+□ Images have loading="lazy" and decoding="async"
+□ No unused CDN imports
+
+FOOTER FINAL:
+□ Dark bg (#050608 or #07080f)
+□ 3-4 link columns
+□ Social icons with hover color
+□ Copyright with current year
+□ Brief brand tagline
+
+{CDN_STACK}"""
+
+
+# ─────────────────────────────────────────────────────────────────
+# API CALLERS
+# ─────────────────────────────────────────────────────────────────
+
+async def call_cerebras(system_role: str, user_message: str, previous_code: str = "") -> str:
+    """Cerebras — ultra-fast inference (1000+ tokens/sec). PRIMARY generator."""
+    api_key = os.environ.get("CEREBRAS_API_KEY", "")
+    if not api_key:
+        print("[BuildAI] No CEREBRAS_API_KEY — falling back to Groq")
+        return await call_groq(system_role, user_message, previous_code)
+    full_message = user_message
+    if previous_code:
+        full_message += f"\n\nCurrent code to review and improve:\n\n{previous_code}"
+    payload = {
+        "model": "llama-3.3-70b",
+        "messages": [{"role": "system", "content": system_role}, {"role": "user", "content": full_message}],
+        "max_tokens": 8192,
+        "temperature": 0.7,
+    }
+    headers = {"Authorization": f"Bearer {api_key}", "Content-Type": "application/json"}
+    async with httpx.AsyncClient(timeout=90.0) as client:
+        r = await client.post("https://api.cerebras.ai/v1/chat/completions", json=payload, headers=headers)
+        if r.status_code == 429:
+            print("[BuildAI] Cerebras rate limited — falling back to Groq")
+            return await call_groq(system_role, user_message, previous_code)
+        if r.status_code in (500, 503):
+            print(f"[BuildAI] Cerebras server error {r.status_code} — falling back to Groq")
+            return await call_groq(system_role, user_message, previous_code)
+        if not r.is_success:
+            print(f"[BuildAI] Cerebras failed {r.status_code}: {r.text[:100]} — falling back to Groq")
+            return await call_groq(system_role, user_message, previous_code)
+        return clean_code(r.json()["choices"][0]["message"]["content"])
+
+
+async def call_gemini(system_role: str, user_message: str, previous_code: str = "") -> str:
+    """Gemini Flash — excellent quality reviewer via OpenAI-compatible endpoint."""
+    api_key = os.environ.get("GEMINI_API_KEY", "")
+    if not api_key:
+        print("[BuildAI] No GEMINI_API_KEY — falling back to OpenRouter")
+        return await call_openrouter(system_role, user_message, previous_code)
+    full_message = user_message
+    if previous_code:
+        full_message += f"\n\nCode to review and dramatically elevate:\n\n{previous_code}"
+    payload = {
+        "model": "gemini-2.5-flash",
+        "messages": [{"role": "system", "content": system_role}, {"role": "user", "content": full_message}],
+        "max_tokens": 8192,
+        "temperature": 0.6,
+    }
+    headers = {"Authorization": f"Bearer {api_key}", "Content-Type": "application/json"}
+    async with httpx.AsyncClient(timeout=120.0) as client:
+        r = await client.post(
+            "https://generativelanguage.googleapis.com/v1beta/openai/chat/completions",
+            json=payload, headers=headers
+        )
+        if not r.is_success:
+            print(f"[BuildAI] Gemini failed {r.status_code}: {r.text[:100]} — falling back to OpenRouter")
+            return await call_openrouter(system_role, user_message, previous_code)
+        return clean_code(r.json()["choices"][0]["message"]["content"])
+
+
+async def call_groq(system_role: str, user_message: str, previous_code: str = "") -> str:
+    """Groq LPU — fast inference. Fallback for Cerebras / final polisher."""
+    api_key = os.environ.get("GROQ_API_KEY", "")
+    if not api_key:
+        print("[BuildAI] No GROQ_API_KEY — falling back to OpenRouter")
+        return await call_openrouter(system_role, user_message, previous_code)
+    full_message = user_message
+    if previous_code:
+        full_message += f"\n\nCurrent code to improve:\n\n{previous_code}"
+    payload = {
+        "model": "llama-3.3-70b-versatile",
+        "messages": [{"role": "system", "content": system_role}, {"role": "user", "content": full_message}],
+        "max_tokens": 8000,
+        "temperature": 0.7,
+    }
+    headers = {"Authorization": f"Bearer {api_key}", "Content-Type": "application/json"}
+    async with httpx.AsyncClient(timeout=90.0) as client:
+        r = await client.post("https://api.groq.com/openai/v1/chat/completions", json=payload, headers=headers)
+        if r.status_code == 429:
+            print("[BuildAI] Groq rate limited — falling back to OpenRouter")
+            return await call_openrouter(system_role, user_message, previous_code)
+        if r.status_code in (500, 503):
+            print(f"[BuildAI] Groq error {r.status_code} — falling back to OpenRouter")
+            return await call_openrouter(system_role, user_message, previous_code)
+        if not r.is_success:
+            raise ValueError(f"Groq failed: {r.status_code} — {r.text[:150]}")
+        return clean_code(r.json()["choices"][0]["message"]["content"])
+
+
+async def call_openrouter(system_role: str, user_message: str, previous_code: str = "") -> str:
+    """OpenRouter — 300+ models. Uses DeepSeek for superior reasoning."""
+    api_key = os.environ.get("OPENROUTER_API_KEY", "")
+    if not api_key:
+        print("[BuildAI] No OPENROUTER_API_KEY — falling back to Mistral")
+        return await call_mistral(system_role, user_message, previous_code)
+    full_message = user_message
+    if previous_code:
+        full_message += f"\n\nCode to review and improve:\n\n{previous_code}"
+    payload = {
+        "model": "meta-llama/llama-3.3-70b-instruct",
+        "messages": [{"role": "system", "content": system_role}, {"role": "user", "content": full_message}],
+        "max_tokens": 8000,
+        "temperature": 0.65,
+    }
+    headers = {
+        "Authorization": f"Bearer {api_key}",
+        "HTTP-Referer": "https://buildai.app",
+        "X-Title": "BuildAI",
+        "Content-Type": "application/json"
+    }
+    async with httpx.AsyncClient(timeout=90.0) as client:
+        r = await client.post("https://openrouter.ai/api/v1/chat/completions", json=payload, headers=headers)
+        if not r.is_success:
+            print(f"[BuildAI] OpenRouter failed {r.status_code} — falling back to Mistral")
+            return await call_mistral(system_role, user_message, previous_code)
+        return clean_code(r.json()["choices"][0]["message"]["content"])
+
+
+async def call_mistral(system_role: str, user_message: str, previous_code: str = "") -> str:
+    """Mistral — European model, GDPR-friendly final polisher."""
+    api_key = os.environ.get("MISTRAL_API_KEY", "")
+    if not api_key:
+        raise ValueError("All API keys exhausted. Please add at least one API key in HuggingFace Secrets.")
+    full_message = user_message
+    if previous_code:
+        full_message += f"\n\nCode to polish:\n\n{previous_code}"
+    payload = {
+        "model": "mistral-small-latest",
+        "messages": [{"role": "system", "content": system_role}, {"role": "user", "content": full_message}],
+        "max_tokens": 7000,
+        "temperature": 0.6,
+    }
+    headers = {"Authorization": f"Bearer {api_key}", "Content-Type": "application/json"}
+    async with httpx.AsyncClient(timeout=120.0) as client:
+        r = await client.post("https://api.mistral.ai/v1/chat/completions", json=payload, headers=headers)
+        if not r.is_success:
+            raise ValueError(f"Mistral failed: {r.status_code} — {r.text[:200]}")
+        return clean_code(r.json()["choices"][0]["message"]["content"])
+
+
+def clean_code(text: str) -> str:
+    """Strip markdown fences and any text before DOCTYPE/after </html>."""
+    text = text.strip()
+    for fence in ["```html\n", "```html", "```\n", "```"]:
+        if text.startswith(fence):
+            text = text[len(fence):]
+            break
+    if text.endswith("```"):
+        text = text[:-3]
+    if "<!DOCTYPE" in text:
+        idx = text.index("<!DOCTYPE")
+        text = text[idx:]
+    if "</html>" in text:
+        idx = text.rindex("</html>")
+        text = text[:idx + 7]
+    return text.strip()
+
+
+# ─────────────────────────────────────────────────────────────────
+# MAIN PIPELINE
+# ─────────────────────────────────────────────────────────────────
+
+async def run_pipeline(prompt: str) -> AsyncGenerator[str, None]:
+    ref_content, website_type = get_references(prompt)
+    ref_status = "✓ reference loaded" if ref_content else "⚠ no reference"
+    print(f"[BuildAI] Building: {website_type} | {ref_status}")
+
+    builder_system = get_builder_prompt(ref_content, website_type, prompt)
+
+    task = (
+        f"Build a stunning, complete {website_type} website for: {prompt}\n\n"
+        f"CRITICAL REQUIREMENTS:\n"
+        f"- Use Syne (display) + DM Sans (body) fonts — NOT Inter\n"
+        f"- Use React + Tailwind CDN exactly as specified\n"
+        f"- Include ALL mandatory sections for {website_type}\n"
+        f"- Real photos from loremflickr.com (minimum 6 images)\n"
+        f"- Write real, specific, compelling content — NO Lorem ipsum EVER\n"
+        f"- Every card must have hover animation\n"
+        f"- Hero must be breathtaking with mesh gradient + floating orbs\n"
+        f"- Bento grid for features section\n"
+        f"- CSS custom properties in :root for design tokens\n"
+        f"- Scroll reveal animations via IntersectionObserver on every section\n"
+        f"- This must look like a premium $50,000+ agency website\n"
+        f"- Output ONLY raw HTML, nothing else"
+    )
+
+    # ── Round 1: Cerebras builds (ultra-fast) ──────────────────
+    yield make_sse({"type": "status", "round": 1, "done": False,
+                    "message": f"⚡ Round 1 — Cerebras building your {website_type} at 1,000 tokens/sec..."})
+    try:
+        r1 = await call_cerebras(builder_system, task)
+        yield make_sse({"type": "code", "round": 1, "done": True,
+                        "message": "✓ Round 1 complete — foundation built",
+                        "code": r1, "final": False})
+    except Exception as e:
+        yield make_sse({"type": "error", "round": 1, "done": False, "message": str(e)})
+        return
+
+    await asyncio.sleep(1)
+
+    # ── Round 2: Gemini Flash reviews ─────────────────────────
+    yield make_sse({"type": "status", "round": 2, "done": False,
+                    "message": "🎨 Round 2 — Gemini Flash elevating design to Stripe/Linear level..."})
+    reviewer_with_photos = REVIEWER_PROMPT + "\n\n" + get_photo_instructions(prompt, website_type)
+    try:
+        r2 = await call_gemini(
+            reviewer_with_photos,
+            f"Elevate this {website_type} to award-winning quality. Make every section breathtaking. KEEP all existing images. Brief: {prompt}",
+            r1
+        )
+        yield make_sse({"type": "code", "round": 2, "done": True,
+                        "message": "✓ Round 2 complete — design elevated",
+                        "code": r2, "final": False})
+    except Exception as e:
+        yield make_sse({"type": "error", "round": 2, "done": False,
+                        "message": f"Round 2 issue: {e} — using Round 1 result"})
+        r2 = r1
+
+    await asyncio.sleep(1)
+
+    # ── Round 3: Groq/Mistral polishes ────────────────────────
+    yield make_sse({"type": "status", "round": 3, "done": False,
+                    "message": "✨ Round 3 — Final polish: SEO, micro-interactions, perfection..."})
+    polisher_with_photos = POLISHER_PROMPT + "\n\n" + get_photo_instructions(prompt, website_type)
+    try:
+        r3 = await call_groq(
+            polisher_with_photos,
+            f"Final quality pass. Ensure this {website_type} is flawless — perfect SEO, micro-interactions, no bugs. Keep ALL images. Brief: {prompt}",
+            r2
+        )
+        yield make_sse({"type": "code", "round": 3, "done": True,
+                        "message": "🎉 Website ready! Download or publish it.",
+                        "code": r3, "final": True})
+    except Exception as e:
+        # Final fallback — try Mistral
+        try:
+            r3 = await call_mistral(
+                polisher_with_photos,
+                f"Final polish pass for this {website_type}. Brief: {prompt}",
+                r2
+            )
+            yield make_sse({"type": "code", "round": 3, "done": True,
+                            "message": "🎉 Website ready!",
+                            "code": r3, "final": True})
+        except Exception as e2:
+            yield make_sse({"type": "error", "round": 3, "done": False,
+                            "message": f"Round 3 failed: {e2} — delivering Round 2 result"})
+            yield make_sse({"type": "code", "round": 3, "done": True,
+                            "message": "Website ready (Round 2)!", "code": r2, "final": True})
+
+
+def make_sse(data: dict) -> str:
+    return f"data: {json.dumps(data)}\n\n"

builder.html

@@ -0,0 +1,840 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0"/>
+<title>BuildAI — Builder</title>
+<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚡</text></svg>"/>
+<link rel="preconnect" href="https://fonts.googleapis.com"/>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"/>
+<style>
+*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
+html,body{height:100%;font-family:'Inter',system-ui,sans-serif;background:#07080f;color:#e2e8f0;-webkit-font-smoothing:antialiased;overflow:hidden}
+button,input,textarea{font-family:inherit}
+::-webkit-scrollbar{width:4px;height:4px}
+::-webkit-scrollbar-track{background:transparent}
+::-webkit-scrollbar-thumb{background:#1e2740;border-radius:99px}
+@keyframes spin{to{transform:rotate(360deg)}}
+@keyframes fadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
+@keyframes fadeIn{from{opacity:0}to{opacity:1}}
+@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
+@keyframes blink{0%,100%{opacity:.2}50%{opacity:1}}
+@keyframes gradFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
+@keyframes dotBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
+@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
+@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
+
+body{display:flex;flex-direction:column}
+
+/* ── TOOLBAR ── */
+.tb{height:42px;display:flex;align-items:center;padding:0 8px;border-bottom:1px solid #0f1220;background:#0b0d17;flex-shrink:0;gap:3px;z-index:200;overflow:visible}
+.tb-left{display:flex;align-items:center;gap:3px;flex-shrink:0}
+.tb-logo{display:flex;align-items:center;gap:6px;cursor:pointer;padding:3px 7px;border-radius:7px;transition:background .15s}
+.tb-logo:hover{background:#13172a}
+.tb-lm{width:18px;height:18px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0}
+.tb-ln{font-size:12px;font-weight:800;letter-spacing:-.3px}
+.tb-proj{display:flex;align-items:center;gap:5px;padding:4px 8px;background:#13172a;border:1px solid #1a1f33;border-radius:7px;cursor:pointer;max-width:130px;flex-shrink:0}
+.tb-pn{font-size:11px;color:#64748b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.tb-sep{width:1px;height:22px;background:#0f1220;margin:0 2px;flex-shrink:0}
+.tb-ic{width:27px;height:27px;background:transparent;border:none;border-radius:6px;color:#334155;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;transition:background .15s,color .15s}
+.tb-ic:hover{background:#13172a;color:#64748b}
+.tb-center{flex:1;display:flex;align-items:center;justify-content:center;gap:2px;min-width:0}
+.tab-b{padding:5px 11px;background:transparent;border:1px solid transparent;border-radius:7px;color:#334155;font-size:11px;font-weight:500;cursor:pointer;white-space:nowrap;transition:all .15s}
+.tab-b.on{background:#13172a;border-color:#1e2740;color:#c4d4f0;font-weight:600}
+.tab-b:hover:not(.on){color:#64748b}
+.tb-url{display:flex;align-items:center;gap:5px;padding:4px 10px;background:#0f1220;border:1px solid #13172a;border-radius:7px;margin-left:6px;max-width:190px;overflow:hidden}
+.tb-url-t{font-size:10px;color:#334155;font-family:'JetBrains Mono',monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.tb-right{display:flex;align-items:center;gap:3px;flex-shrink:0}
+.vp-grp{display:flex;gap:1px;background:#0f1220;border:1px solid #13172a;border-radius:7px;padding:2px;flex-shrink:0}
+.vp-b{width:24px;height:22px;background:transparent;border:none;border-radius:5px;cursor:pointer;font-size:10px;transition:background .15s;display:flex;align-items:center;justify-content:center}
+.vp-b.on{background:#1e2740}
+.tb-tool{padding:4px 9px;background:#13172a;border:1px solid #1a1f33;border-radius:7px;color:#64748b;font-size:11px;font-weight:500;cursor:pointer;display:flex;align-items:center;gap:3px;white-space:nowrap;flex-shrink:0;transition:all .15s}
+.tb-tool:hover{border-color:#2e3a55;color:#94a3b8}
+.tb-pub{padding:5px 12px;background:linear-gradient(135deg,#059669,#10b981);border:none;border-radius:7px;color:#fff;font-size:11px;font-weight:700;cursor:pointer;white-space:nowrap;flex-shrink:0}
+.tb-pub:disabled{opacity:.4;cursor:default}
+.tb-signin{padding:5px 12px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border:none;border-radius:7px;color:#fff;font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;flex-shrink:0}
+.tb-guest{padding:5px 10px;background:#13172a;border:1px solid #1a1f33;border-radius:7px;color:#475569;font-size:11px;cursor:pointer;white-space:nowrap;flex-shrink:0}
+.tb-guest:hover{border-color:#6366f1;color:#818cf8}
+.tb-av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;cursor:pointer;flex-shrink:0;position:relative}
+.user-dd{position:absolute;top:32px;right:0;width:200px;background:#0e1018;border:1px solid #1a1f33;border-radius:12px;z-index:9999;animation:slideDown .15s ease;box-shadow:0 20px 50px rgba(0,0,0,.6);overflow:hidden}
+.ud-head{padding:12px 14px;border-bottom:1px solid #0f1220}
+.ud-name{font-size:13px;font-weight:600;color:#c4d4f0;margin-bottom:2px}
+.ud-email{font-size:11px;color:#334155;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.ud-item{padding:10px 14px;font-size:12px;color:#475569;cursor:pointer;display:flex;align-items:center;gap:8px;transition:background .15s}
+.ud-item:hover{background:#0f1220;color:#94a3b8}
+.ud-item.red:hover{color:#f87171}
+.ud-sep{height:1px;background:#0f1220}
+.mob-tabs{display:none;height:44px;background:#0b0d17;border-bottom:1px solid #0f1220;flex-shrink:0}
+.mob-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;background:transparent;border:none;border-bottom:2px solid transparent;color:#334155;font-size:12px;font-weight:500;cursor:pointer;transition:all .15s}
+.mob-tab.on{color:#c4d4f0;border-bottom-color:#6366f1}
+
+/* ── MAIN AREA ── */
+.main{flex:1;display:flex;overflow:hidden;min-height:0}
+.sb{width:185px;flex-shrink:0;display:flex;flex-direction:column;background:#0b0d17;border-right:1px solid #0f1220;overflow:hidden}
+.sb-hd{padding:8px 10px;border-bottom:1px solid #0f1220;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
+.sb-lbl{font-size:10px;font-weight:700;color:#1e2740;text-transform:uppercase;letter-spacing:1.2px}
+.sb-new{width:calc(100% - 14px);margin:7px;padding:8px;background:#0f1220;border:1px dashed #1a1f33;border-radius:8px;color:#334155;font-size:11px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;transition:all .2s}
+.sb-new:hover{border-color:#6366f1;color:#6366f1}
+.sb-list{flex:1;overflow-y:auto;padding:0 7px 8px}
+.sb-sec{font-size:9.5px;font-weight:700;color:#131828;text-transform:uppercase;letter-spacing:1.2px;padding:6px 8px 4px}
+.sb-empty{padding:20px 10px;text-align:center;font-size:11px;color:#131828;line-height:1.8}
+.sb-signin-prompt{margin:10px 7px;padding:12px;background:rgba(99,102,241,.06);border:1px solid rgba(99,102,241,.15);border-radius:10px;text-align:center}
+.sb-sp-t{font-size:11px;color:#334155;margin-bottom:8px;line-height:1.6}
+.sb-sp-b{width:100%;padding:7px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border:none;border-radius:7px;color:#fff;font-size:11px;font-weight:600;cursor:pointer}
+.pi{display:flex;align-items:center;gap:8px;padding:8px 9px;border-radius:8px;cursor:pointer;margin-bottom:2px;border:1px solid transparent;transition:all .15s}
+.pi:hover{background:#0f1220}
+.pi.on{background:#111e36;border-color:#1e3a5f}
+.pi-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
+.pi-n{font-size:11.5px;color:#475569;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.pi.on .pi-n{color:#c4d4f0;font-weight:500}
+.pi-d{font-size:9.5px;color:#131828;margin-top:1px}
+.sb-ft{padding:8px;border-top:1px solid #0f1220;flex-shrink:0}
+.sb-user{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#0f1220;border-radius:8px;cursor:pointer}
+.sb-uav{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0}
+.sb-un{font-size:11px;font-weight:600;color:#64748b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.sb-up{font-size:9.5px;color:#1e2740}
+.sb-signout{font-size:10px;color:#334155;background:none;border:none;cursor:pointer;margin-top:4px;display:none;width:100%;text-align:center;padding:4px}
+.sb-signout:hover{color:#f87171}
+
+/* ── CHAT PANEL ── */
+.cp{width:286px;flex-shrink:0;display:flex;flex-direction:column;border-right:1px solid #0f1220;background:#0b0d17;overflow:hidden}
+.c-stat{padding:6px 12px;border-bottom:1px solid #0f1220;display:flex;align-items:center;gap:6px;background:#09091a;flex-shrink:0}
+.r-dots{display:flex;gap:3px}
+.r-dot{width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:7px;font-weight:700;border:1px solid #1e2740;color:#1e2740;transition:all .35s;flex-shrink:0}
+.r-dot.act{border-color:#8b5cf6;background:rgba(139,92,246,.2);color:#c4b5fd}
+.r-dot.dn{border-color:#10b981;background:rgba(16,185,129,.15);color:#34d399}
+.c-stat-t{font-size:11px;color:#334155;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.c-msgs{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px}
+.c-empty{display:flex;flex-direction:column;align-items:center;padding:32px 16px;text-align:center}
+.c-e-ic{font-size:36px;margin-bottom:10px;animation:floatY 3.5s ease-in-out infinite}
+.c-e-t{font-size:13.5px;font-weight:700;color:#c4d4f0;margin-bottom:6px}
+.c-e-s{font-size:12px;color:#334155;line-height:1.7;margin-bottom:16px}
+.q-prompts{display:flex;flex-direction:column;gap:7px;width:100%}
+.q-p{padding:9px 12px;background:#0f1220;border:1px solid #1a1f33;border-radius:9px;color:#475569;font-size:11.5px;cursor:pointer;text-align:left;transition:all .2s}
+.q-p:hover{border-color:rgba(99,102,241,.3);color:#94a3b8;background:rgba(99,102,241,.05)}
+.m-u{display:flex;justify-content:flex-end}
+.m-u-b{background:#1a1f33;border-radius:13px 13px 3px 13px;padding:9px 13px;font-size:12.5px;color:#c4d4f0;max-width:87%;line-height:1.6}
+.m-a{display:flex;flex-direction:column;gap:7px}
+.m-a-lbl{font-size:9px;font-weight:700;color:#1e2740;letter-spacing:1.5px}
+.m-card{background:#0f1220;border:1px solid #1a1f33;border-radius:10px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px}
+.m-card-h{font-size:12px;font-weight:600;color:#c4d4f0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.m-card-tabs{display:flex;gap:4px;flex-shrink:0}
+.m-card-tb{padding:4px 9px;background:transparent;border:1px solid #1e2740;border-radius:6px;color:#334155;font-size:10px;cursor:pointer;transition:all .15s}
+.m-card-tb.on{background:#1e2740;color:#c4d4f0;border-color:#2e3a55}
+.m-card-tb:hover:not(.on){color:#64748b}
+.m-think{background:#0a0f1e;border:1px solid #1a1f33;border-radius:10px;padding:12px 14px;font-size:11.5px;line-height:1.9}
+.think-hd{display:flex;align-items:center;gap:8px;font-weight:600;color:#6366f1;margin-bottom:8px}
+.think-dot{width:6px;height:6px;border-radius:50%;background:#6366f1;flex-shrink:0;animation:blink 1.2s ease-in-out infinite}
+.think-ln{color:#334155}
+.think-ln.ap{color:#475569;margin-bottom:6px}
+.think-ln.bl{padding-left:8px}
+.think-ln.dn{color:#10b981}
+.m-txt{font-size:12px;color:#475569;line-height:1.7}
+.m-save-note{font-size:11px;color:#10b981;display:flex;align-items:center;gap:5px}
+.m-next-t{font-size:11px;font-weight:700;color:#334155;text-transform:uppercase;letter-spacing:1px;margin-top:4px}
+.m-next-i{font-size:11.5px;color:#475569;line-height:1.7}
+.m-acts{display:flex;gap:6px;flex-wrap:wrap}
+.m-act{padding:6px 11px;background:#0f1220;border:1px solid #1a1f33;border-radius:7px;color:#475569;font-size:11px;cursor:pointer;transition:all .15s;white-space:nowrap}
+.m-act:hover{border-color:rgba(99,102,241,.3);color:#818cf8}
+.m-act.primary{background:linear-gradient(135deg,#6366f1,#8b5cf6);border-color:transparent;color:#fff;font-weight:600}
+.m-act.primary:hover{opacity:.9}
+.m-err{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.15);border-radius:9px;padding:10px 13px;font-size:12px;color:#f87171;line-height:1.6}
+.typing{display:flex;gap:4px;padding:4px 0}
+.td{width:5px;height:5px;border-radius:50%;background:#1e2740;animation:dotBounce .8s ease-in-out infinite}
+.td:nth-child(2){animation-delay:.15s}
+.td:nth-child(3){animation-delay:.3s}
+.sugg-bar{padding:8px 12px;border-top:1px solid #0f1220;display:flex;gap:6px;overflow-x:auto;flex-shrink:0;scrollbar-width:none}
+.sugg-bar::-webkit-scrollbar{display:none}
+.s-chip{padding:5px 10px;background:#0f1220;border:1px solid #1a1f33;border-radius:999px;color:#475569;font-size:11px;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:all .15s}
+.s-chip:hover{border-color:rgba(99,102,241,.3);color:#818cf8}
+.c-inp-area{padding:8px;border-top:1px solid #0f1220;flex-shrink:0;background:#09091a}
+.c-inp-row{display:flex;align-items:flex-end;gap:7px;background:rgba(255,255,255,.03);border:1px solid #1a1f33;border-radius:13px;padding:6px 6px 6px 12px;transition:border-color .2s}
+.c-inp-row:focus-within{border-color:rgba(99,102,241,.3)}
+.c-ta{flex:1;background:transparent;border:none;outline:none;color:#e2e8f0;font-size:13px;resize:none;min-height:24px;max-height:80px;line-height:1.6;padding:3px 0}
+.c-ta::placeholder{color:#1e2740}
+.c-ta:disabled{opacity:.5;cursor:not-allowed}
+.c-send{width:34px;height:34px;border-radius:10px;border:none;flex-shrink:0;background:#1a1f33;color:#334155;cursor:default;display:flex;align-items:center;justify-content:center;font-size:15px;transition:all .2s}
+.c-send.on{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;cursor:pointer}
+
+/* ── PREVIEW PANEL ── */
+.pv{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
+.pub-bar{padding:4px 14px;background:#0b0d17;border-bottom:1px solid #0f1220;display:flex;align-items:center;gap:8px;flex-shrink:0}
+.pub-dot{width:5px;height:5px;border-radius:50%;background:#10b981;flex-shrink:0}
+.pub-t{font-size:10px;color:#10b981}
+.pub-dt{font-size:10px;color:#131828;margin-left:auto}
+.pv-body{flex:1;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;background:#10121e}
+.pv-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;height:100%;width:100%}
+.pv-e-ic{font-size:64px;opacity:.09;animation:floatY 3.5s ease-in-out infinite}
+.pv-e-t{font-size:15px;font-weight:600;color:#131828}
+.pv-overlay{position:absolute;inset:0;background:rgba(7,8,15,.93);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;backdrop-filter:blur(10px)}
+.ov-spin{width:48px;height:48px;border-radius:50%;border:3px solid #1a1f33;border-top:3px solid #6366f1;animation:spin .85s linear infinite}
+.ov-t{font-size:13px;color:#475569;text-align:center;max-width:240px}
+.ov-s{font-size:11px;color:#131828;text-align:center}
+.ov-badges{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:4px}
+.ov-b{padding:3px 9px;background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.2);border-radius:999px;font-size:10px;color:#a78bfa;font-weight:600}
+.ov-b.act{background:rgba(99,102,241,.25);border-color:rgba(99,102,241,.5);color:#c4b5fd}
+.ov-bar{width:200px;height:2px;background:#1a1f33;border-radius:999px;overflow:hidden;margin-top:6px}
+.ov-prog{height:100%;background:linear-gradient(90deg,#6366f1,#8b5cf6);border-radius:999px;transition:width .6s ease}
+.code-view{width:100%;height:100%;overflow-y:auto;background:#07080f}
+.code-pre{margin:0;padding:22px;font-size:11px;line-height:1.9;color:#2e3a55;font-family:'JetBrains Mono',monospace;white-space:pre-wrap;word-break:break-word}
+.pv-btm{padding:6px 14px;border-top:1px solid #0f1220;background:#0b0d17;display:flex;align-items:center;gap:6px;flex-shrink:0;flex-wrap:wrap}
+.dl-btn{padding:5px 12px;background:#0f1220;border:1px solid #1a1f33;border-radius:7px;color:#334155;font-size:11px;cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .15s;white-space:nowrap}
+.dl-btn:hover{border-color:rgba(99,102,241,.3);color:#6366f1}
+.dl-zip{padding:5px 12px;background:rgba(99,102,241,.1);border:1px solid rgba(99,102,241,.25);border-radius:7px;color:#a78bfa;font-size:11px;cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .15s;white-space:nowrap;font-weight:600}
+.dl-zip:hover{background:rgba(99,102,241,.2);border-color:rgba(99,102,241,.4);color:#c4b5fd}
+.pv-hint{font-size:10px;color:#0f1220;margin-left:auto}
+.ver-panel{position:absolute;top:38px;left:0;width:250px;background:#0e1018;border:1px solid #1a1f33;border-radius:12px;z-index:9999;animation:slideDown .15s ease;box-shadow:0 20px 50px rgba(0,0,0,.6)}
+.ver-hd{padding:10px 14px;border-bottom:1px solid #1a1f33;display:flex;justify-content:space-between;align-items:center}
+.ver-hd-t{font-size:12px;font-weight:600}
+.ver-x{background:none;border:none;color:#334155;cursor:pointer;font-size:15px}
+.ver-item{padding:10px 14px;border-bottom:1px solid #0f1220;display:flex;align-items:center;gap:10px;cursor:pointer;transition:background .15s}
+.ver-item:hover{background:#0f1220}
+.ver-item.cur{background:#0e1928}
+.ver-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
+.ver-n{font-size:12px;color:#475569}
+.ver-item.cur .ver-n{color:#c4d4f0;font-weight:500}
+.ver-d{font-size:10px;color:#1e2740;margin-top:1px}
+.ver-cur-lbl{font-size:10px;color:#6366f1;font-weight:600;margin-left:auto}
+.ver-empty{padding:16px 14px;font-size:11px;color:#131828;text-align:center}
+
+/* MODALS */
+.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:9999;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(12px);padding:16px;animation:fadeIn .15s ease}
+.modal-box{background:#0e1018;border:1px solid #1a1f33;border-radius:20px;width:100%;max-height:90vh;overflow-y:auto;animation:slideDown .2s ease;box-shadow:0 40px 100px rgba(0,0,0,.7)}
+.mo-p{padding:24px}
+.mo-hd{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;gap:10px}
+.mo-t{font-weight:700;font-size:16px}
+.mo-sub{font-size:12px;color:#475569;margin-top:2px}
+.mo-x{background:none;border:none;color:#475569;cursor:pointer;font-size:22px;line-height:1;flex-shrink:0;transition:color .15s}
+.mo-x:hover{color:#94a3b8}
+.flbl{font-size:12px;color:#475569;font-weight:500;display:block;margin-bottom:6px}
+.finp{width:100%;background:#090b12;border:1px solid #1a1f33;border-radius:11px;padding:12px 14px;color:#e2e8f0;font-size:13px;outline:none;margin-bottom:12px;display:block;transition:border-color .2s}
+.finp:focus{border-color:rgba(99,102,241,.35)}
+.finp::placeholder{color:#1e2740}
+.mo-btn-p{width:100%;padding:13px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border:none;border-radius:11px;color:#fff;font-size:14px;font-weight:700;cursor:pointer;margin-top:4px;transition:opacity .2s}
+.mo-btn-p:hover{opacity:.9}
+.mo-btn-p:disabled{opacity:.5;cursor:not-allowed}
+.mo-btn-s{width:100%;padding:12px;background:#090b12;border:1px solid #1a1f33;border-radius:11px;color:#64748b;font-size:13px;cursor:pointer;margin-top:8px;transition:border-color .2s}
+.mo-btn-s:hover{border-color:#2e3a55}
+.mo-div{display:flex;align-items:center;gap:12px;margin:16px 0}
+.mo-div-l{flex:1;height:1px;background:#1a1f33}
+.mo-div-t{font-size:11px;color:#1e2740}
+.tab-sw{display:flex;gap:3px;background:#090b12;border-radius:11px;padding:3px;margin-bottom:20px}
+.tab-sw-b{flex:1;padding:9px;background:transparent;border:none;border-radius:9px;color:#334155;font-size:13px;cursor:pointer;transition:all .15s}
+.tab-sw-b.on{background:#1a1f33;color:#e2e8f0;font-weight:600}
+.auth-err{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);border-radius:9px;padding:10px 13px;font-size:12px;color:#f87171;margin-bottom:12px;display:none}
+.auth-ok{background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.2);border-radius:9px;padding:10px 13px;font-size:12px;color:#34d399;margin-bottom:12px;display:none}
+.suc-c{text-align:center;padding:16px 0 8px}
+.suc-ic{font-size:52px;margin-bottom:14px;display:block;animation:floatY 2.5s ease-in-out infinite}
+.suc-t{font-weight:900;font-size:19px;margin-bottom:8px;letter-spacing:-.4px}
+.pub-plan{background:#090b12;border:1px solid #1a1f33;border-radius:13px;padding:15px 17px;margin-bottom:9px;cursor:pointer;transition:all .2s}
+.pub-plan.on{border-color:#6366f1;border-width:2px}
+.pub-plan-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:4px}
+.pub-plan-url{font-size:14px;font-weight:700;color:#a78bfa;font-family:'JetBrains Mono',monospace;margin-bottom:4px}
+.pub-plan-d{font-size:11px;color:#334155}
+.google-btn{width:100%;padding:13px;background:#fff;border:1px solid #e2e8f0;border-radius:11px;color:#1a1a1a;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .2s;margin-bottom:4px}
+.google-btn:hover{background:#f8fafc;box-shadow:0 4px 16px rgba(0,0,0,.12)}
+
+@media(max-width:768px){
+  .sb{display:none}
+  .mob-tabs{display:flex}
+  .main{flex-direction:column}
+  .main.show-chat .cp{display:flex;flex:1}
+  .main.show-chat .pv{display:none}
+  .main.show-preview .cp{display:none}
+  .main.show-preview .pv{display:flex;flex:1}
+  .cp{width:100%;border-right:none}
+  .pv{width:100%}
+  .tb-tool,.vp-grp,.tb-url{display:none!important}
+}
+</style>
+</head>
+<body>
+
+<!-- TOOLBAR -->
+<div class="tb">
+  <div class="tb-left">
+    <div class="tb-logo" onclick="goHome()"><div class="tb-lm">⚡</div><span class="tb-ln">BuildAI</span></div>
+    <div class="tb-proj"><span class="tb-pn" id="tb-pn">New Project</span><span style="font-size:8px;color:#334155">▾</span></div>
+    <div class="tb-sep"></div>
+    <div style="position:relative">
+      <button class="tb-ic" id="ver-btn" onclick="toggleVer(event)" style="width:auto;padding:0 8px;font-size:11px;gap:3px">🕐 <span style="font-size:11px;font-weight:600">History</span></button>
+      <div class="ver-panel" id="ver-panel" style="display:none">
+        <div class="ver-hd"><span class="ver-hd-t">Version History</span><button class="ver-x" onclick="closeVer()">×</button></div>
+        <div id="ver-list"><div class="ver-empty">No versions yet.</div></div>
+      </div>
+    </div>
+    <button class="tb-ic" onclick="undoVer()" title="Undo">↩</button>
+  </div>
+  <div class="tb-center">
+    <button class="tab-b on" id="tab-preview" onclick="switchTab('preview')">👁 Preview</button>
+    <button class="tab-b" id="tab-code" onclick="switchTab('code')">&lt;/&gt; Code</button>
+    <div class="tb-url" id="tb-url" style="display:none"><span style="font-size:10px">🔒</span><span class="tb-url-t" id="tb-url-t">my-project.buildai.app</span></div>
+  </div>
+  <div class="tb-right">
+    <div class="vp-grp">
+      <button class="vp-b on" id="vp-d" onclick="setVP('d')" title="Desktop">🖥</button>
+      <button class="vp-b" id="vp-t" onclick="setVP('t')" title="Tablet">⬜</button>
+      <button class="vp-b" id="vp-m" onclick="setVP('m')" title="Mobile">📱</button>
+    </div>
+    <button class="tb-tool" onclick="openM('github')">🐙 GitHub</button>
+    <button class="tb-pub" id="pub-tb" disabled onclick="openM('publish')">Publish</button>
+    <div id="tb-user" style="position:relative">
+      <button class="tb-signin" onclick="openM('auth','signin')">Sign in</button>
+    </div>
+  </div>
+</div>
+
+<div class="mob-tabs">
+  <button class="mob-tab on" id="mob-chat" onclick="mobTab('chat')">💬 Chat</button>
+  <button class="mob-tab" id="mob-preview" onclick="mobTab('preview')">👁 Preview</button>
+  <button class="mob-tab" id="mob-code" onclick="mobTab('code')">&lt;/&gt; Code</button>
+</div>
+
+<div class="main show-chat" id="main-area">
+  <!-- SIDEBAR -->
+  <div class="sb">
+    <div class="sb-hd"><span class="sb-lbl">Projects</span></div>
+    <button class="sb-new" onclick="newProj()">＋ New Project</button>
+    <div class="sb-list" id="sb-list">
+      <div class="sb-sec">Recent</div>
+      <div id="sb-empty" class="sb-empty">No projects yet.<br/>Build one to save.</div>
+      <div id="sb-auth-prompt" class="sb-signin-prompt" style="display:none">
+        <div class="sb-sp-t">Sign in with Google to save projects</div>
+        <button class="sb-sp-b" onclick="openM('auth','signin')">Sign in free</button>
+      </div>
+    </div>
+    <div class="sb-ft">
+      <div class="sb-user" id="sb-user-box" onclick="openM('auth','signin')">
+        <div class="sb-uav" id="sb-av">?</div>
+        <div style="overflow:hidden"><div class="sb-un" id="sb-nm">Guest mode</div><div class="sb-up" id="sb-plan">Tap to sign in</div></div>
+      </div>
+      <button class="sb-signout" id="sb-signout" onclick="doSignOut()">Sign out</button>
+    </div>
+  </div>
+
+  <!-- CHAT -->
+  <div class="cp" id="chat-panel">
+    <div class="c-stat">
+      <div class="r-dots">
+        <div class="r-dot" id="rd1">1</div>
+        <div class="r-dot" id="rd2">2</div>
+        <div class="r-dot" id="rd3">3</div>
+      </div>
+      <div class="c-stat-t" id="c-stat-t">Ready to build</div>
+    </div>
+    <div class="c-msgs" id="c-msgs">
+      <div class="c-empty" id="c-empty">
+        <div class="c-e-ic">🏗️</div>
+        <div class="c-e-t">What are we building?</div>
+        <div class="c-e-s">5 AI models collaborate to build your website with React + Tailwind.</div>
+        <div class="q-prompts">
+          <button class="q-p" onclick="setBP('SaaS landing page with pricing, features, and testimonials')">💼 SaaS landing page</button>
+          <button class="q-p" onclick="setBP('Premium e-commerce store with product grid and cart')">🛒 E-commerce store</button>
+          <button class="q-p" onclick="setBP('Dark analytics dashboard with charts and KPI metrics')">📊 Analytics dashboard</button>
+        </div>
+      </div>
+    </div>
+    <div class="sugg-bar" id="sugg-bar" style="display:none">
+      <button class="s-chip" onclick="setBI(this.textContent)">Add Testimonials</button>
+      <button class="s-chip" onclick="setBI(this.textContent)">Add Pricing Table</button>
+      <button class="s-chip" onclick="setBI(this.textContent)">Add FAQ Section</button>
+      <button class="s-chip" onclick="setBI(this.textContent)">Make Dark Theme</button>
+      <button class="s-chip" onclick="setBI(this.textContent)">Add Animations</button>
+      <button class="s-chip" onclick="setBI(this.textContent)">Bento Grid Layout</button>
+    </div>
+    <div class="c-inp-area">
+      <div class="c-inp-row">
+        <textarea class="c-ta" id="c-inp" placeholder="Describe your website or request changes..." rows="1" onkeydown="chatKey(event)" oninput="updSend();autoR(this)"></textarea>
+        <button class="c-send" id="c-send" onclick="sendMsg()">↑</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- PREVIEW -->
+  <div class="pv" id="preview-panel">
+    <div class="pub-bar" id="pub-bar" style="display:none">
+      <div class="pub-dot"></div><span class="pub-t">Published</span><span class="pub-dt" id="pub-dt"></span>
+    </div>
+    <div class="pv-body" id="pv-body">
+      <div class="pv-empty"><div class="pv-e-ic">🌐</div><div class="pv-e-t">Preview will appear here</div></div>
+    </div>
+    <div class="pv-btm" id="pv-btm" style="display:none">
+      <button class="dl-btn" onclick="dlFile()">⬇ Download HTML</button>
+      <button class="dl-zip" onclick="dlZip()">📦 Download ZIP</button>
+      <span class="pv-hint">Refine via chat anytime.</span>
+    </div>
+  </div>
+</div>
+
+<!-- AUTH MODAL -->
+<div class="modal-bg" id="modal-auth" style="display:none" onclick="if(event.target===this)closeM('auth')">
+  <div class="modal-box" style="max-width:390px">
+    <div class="mo-p">
+      <div class="mo-hd">
+        <div style="display:flex;align-items:center;gap:9px">
+          <div style="width:28px;height:28px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px">⚡</div>
+          <span style="font-weight:800;font-size:17px">BuildAI</span>
+        </div>
+        <button class="mo-x" onclick="closeM('auth')">×</button>
+      </div>
+      <div class="tab-sw">
+        <button class="tab-sw-b on" id="at-si" onclick="switchAuth('signin')">Sign in</button>
+        <button class="tab-sw-b" id="at-su" onclick="switchAuth('signup')">Create account</button>
+      </div>
+      <div class="auth-err" id="auth-err"></div>
+      <div class="auth-ok" id="auth-ok"></div>
+      <button class="google-btn" onclick="doGoogleAuth()">
+        <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
+        Continue with Google
+      </button>
+      <div class="mo-div"><div class="mo-div-l"></div><div class="mo-div-t">or use email</div><div class="mo-div-l"></div></div>
+      <label class="flbl">Email</label>
+      <input class="finp" id="a-email" type="email" placeholder="you@example.com"/>
+      <label class="flbl">Password</label>
+      <input class="finp" id="a-pass" type="password" placeholder="At least 6 characters" onkeydown="if(event.key==='Enter')doAuth()"/>
+      <div id="name-wrap" style="display:none"><label class="flbl">Full name (optional)</label><input class="finp" id="a-name" placeholder="Your name"/></div>
+      <button class="mo-btn-p" id="a-sub" onclick="doAuth()">Sign in →</button>
+      <button class="mo-btn-s" onclick="guestMode();closeM('auth')">Continue as guest (no saving)</button>
+      <div style="font-size:11px;color:#1e2740;text-align:center;margin-top:14px" id="a-sw-area">
+        Don't have an account? <span onclick="switchAuth('signup')" style="color:#818cf8;cursor:pointer;font-weight:600">Sign up free</span>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- GITHUB MODAL -->
+<div class="modal-bg" id="modal-github" style="display:none" onclick="if(event.target===this)closeM('github')">
+  <div class="modal-box" style="max-width:440px">
+    <div class="mo-p">
+      <div class="mo-hd">
+        <div style="display:flex;align-items:center;gap:12px">
+          <div style="width:40px;height:40px;background:#161b22;border:1px solid #30363d;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:22px">🐙</div>
+          <div><div class="mo-t">Push to GitHub</div><div class="mo-sub">Sync your website to a repo</div></div>
+        </div>
+        <button class="mo-x" onclick="closeM('github')">×</button>
+      </div>
+      <div id="gh-form">
+        <label class="flbl">GitHub Personal Access Token</label>
+        <input class="finp" id="gh-token" placeholder="ghp_xxxxxxxxxxxxxxxxxxxx" style="font-family:'JetBrains Mono',monospace;font-size:12px"/>
+        <label class="flbl">Repository name</label>
+        <input class="finp" id="gh-repo" placeholder="my-website"/>
+        <p style="font-size:11px;color:#1e2740;margin-bottom:16px">Get token at github.com/settings/tokens — needs <code style="background:#090b12;padding:2px 5px;border-radius:4px">repo</code> scope</p>
+        <button class="mo-btn-p" style="background:#238636" id="gh-btn" onclick="doGithub()">Push to GitHub →</button>
+      </div>
+      <div id="gh-done" style="display:none">
+        <div class="suc-c"><span class="suc-ic">🎉</span><div class="suc-t">Pushed!</div>
+        <div style="background:#090b12;border:1px solid #1a1f33;border-radius:10px;padding:12px;margin-bottom:18px;font-family:'JetBrains Mono',monospace;font-size:12px;color:#818cf8;word-break:break-all" id="gh-url-out"></div>
+        <button class="mo-btn-p" onclick="closeM('github')">Done</button></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- PUBLISH MODAL -->
+<div class="modal-bg" id="modal-publish" style="display:none" onclick="if(event.target===this)closeM('publish')">
+  <div class="modal-box" style="max-width:420px">
+    <div class="mo-p">
+      <div id="pub-main">
+        <div class="mo-hd"><div class="mo-t">Publish Website</div><button class="mo-x" onclick="closeM('publish')">×</button></div>
+        <p style="font-size:13px;color:#475569;margin-bottom:20px">Your site goes live instantly.</p>
+        <div class="pub-plan on"><div class="pub-plan-badge" style="color:#6366f1">Free · Instant</div><div class="pub-plan-url" id="pub-subdomain-display">my-project.buildai.app</div><div class="pub-plan-d">Always-on URL with SSL</div></div>
+        <button class="mo-btn-p" style="background:linear-gradient(135deg,#059669,#10b981)" id="pub-go-btn" onclick="doPublish()">🚀 Publish now</button>
+      </div>
+      <div id="pub-done" style="display:none">
+        <div style="text-align:right"><button class="mo-x" onclick="closeM('publish')">×</button></div>
+        <div class="suc-c"><span class="suc-ic">🎉</span><div class="suc-t">Your site is live!</div>
+        <div style="padding:13px;background:rgba(99,102,241,.08);border:1px solid rgba(99,102,241,.2);border-radius:12px;margin-bottom:20px;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;color:#a78bfa;word-break:break-all" id="pub-live-url"></div>
+        <div style="display:flex;gap:8px"><button class="mo-btn-p" style="flex:1" id="pub-open-btn">Open site ↗</button><button class="mo-btn-s" style="flex:1" onclick="closeM('publish')">Done</button></div></div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- ── ALL FUNCTIONS DEFINED FIRST — before Firebase loads ── -->
+<script>
+var API = window.location.origin;
+var S = {user:null,generating:false,code:'',tab:'preview',vp:'d',prompt:'',projectName:'',projectId:null,versions:[],versionIdx:-1,authMode:'signin'};
+
+// ── CORE UI FUNCTIONS (no Firebase dependency) ──────────────────
+
+function goHome(){ window.location.href = '/'; }
+function escH(s){return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');}
+function slugify(s){return(s||'project').toLowerCase().replace(/[^a-z0-9]+/g,'-').replace(/(^-|-$)/g,'').slice(0,28)||'my-project';}
+
+function mobTab(w){
+  ['chat','preview','code'].forEach(function(t){var b=document.getElementById('mob-'+t);if(b)b.className='mob-tab'+(t===w?' on':'');});
+  var m=document.getElementById('main-area');
+  m.className='main '+(w==='chat'?'show-chat':'show-preview');
+  if(w!=='chat'){S.tab=w==='code'?'code':'preview';updTabs();if(S.code)renderPV();}
+}
+function updTabs(){['preview','code'].forEach(function(t){var b=document.getElementById('tab-'+t);if(b)b.className='tab-b'+(t===S.tab?' on':'');});}
+function switchTab(t){S.tab=t;updTabs();if(S.code)renderPV();}
+function setVP(v){S.vp=v;['d','t','m'].forEach(function(x){var b=document.getElementById('vp-'+x);if(b)b.className='vp-b'+(x===v?' on':'');});if(S.code&&S.tab==='preview')renderPV();}
+
+function setPV(h){var el=document.getElementById('pv-body');if(el)el.innerHTML=h;}
+function renderPV(){
+  if(!S.code)return;
+  if(S.tab==='preview'){
+    var pv=document.getElementById('pv-body');
+    var w=S.vp==='d'?'100%':S.vp==='t'?'768px':'390px';
+    var ws=S.vp!=='d'?'width:'+w+';height:100%;box-shadow:0 0 80px rgba(0,0,0,.8);border-radius:10px;overflow:hidden':'width:100%;height:100%';
+    pv.innerHTML='';
+    var wrap=document.createElement('div');wrap.setAttribute('style',ws);
+    var fr=document.createElement('iframe');fr.setAttribute('style','width:100%;height:100%;border:none;display:block');
+    fr.setAttribute('sandbox','allow-scripts allow-same-origin');
+    wrap.appendChild(fr);pv.appendChild(wrap);
+    var d=fr.contentDocument||fr.contentWindow.document;
+    d.open('text/html','replace');d.write(S.code);d.close();
+  }else{
+    setPV('<div class="code-view"><pre class="code-pre">'+escH(S.code)+'</pre></div>');
+  }
+}
+
+function setStat(msg,round,done){
+  var el=document.getElementById('c-stat-t');if(el)el.textContent=msg;
+  if(round<1)return;
+  for(var i=1;i<=3;i++){var d=document.getElementById('rd'+i);if(!d)continue;
+    if(i<round||(i===round&&done)){d.className='r-dot dn';d.textContent='✓';}
+    else if(i===round){d.className='r-dot act';d.textContent=i;}
+    else{d.className='r-dot';d.textContent=i;}
+  }
+}
+
+function showOvl(msg,round){
+  var pct=Math.min(((round-1)/3)*100,99)+'%';
+  var names=['Cerebras','Gemini','Groq'];
+  var badges='';
+  names.forEach(function(n,i){
+    var isDone=(round-1)>i,isAct=(round-1)===i;
+    badges+='<span class="ov-b'+(isAct?' act':'')+'">'+( isDone?'✓ ':'')+n+'</span>';
+  });
+  setPV('<div class="pv-overlay"><div class="ov-spin"></div><div><div class="ov-t">'+escH(msg)+'</div><div class="ov-s">~30 seconds total</div></div><div class="ov-badges">'+badges+'</div><div class="ov-bar"><div class="ov-prog" style="width:'+pct+'"></div></div></div>');
+}
+
+function addVer(code,round,label){
+  S.versions.push({code:code,round:round,label:label,time:new Date().toLocaleTimeString()});
+  S.versionIdx=S.versions.length-1;renderVers();
+}
+function renderVers(){
+  var list=document.getElementById('ver-list');if(!list)return;
+  if(!S.versions.length){list.innerHTML='<div class="ver-empty">No versions yet.</div>';return;}
+  list.innerHTML='';
+  S.versions.slice().reverse().forEach(function(v,i){
+    var ri=S.versions.length-1-i,isCur=ri===S.versionIdx;
+    var el=document.createElement('div');el.className='ver-item'+(isCur?' cur':'');
+    el.innerHTML='<div class="ver-dot" style="background:'+(isCur?'#6366f1':'#1e2740')+'"></div><div><div class="ver-n">'+escH(v.label)+'</div><div class="ver-d">'+v.time+'</div></div>'+(isCur?'<span class="ver-cur-lbl">Current</span>':'');
+    (function(idx){el.onclick=function(){S.code=S.versions[idx].code;S.versionIdx=idx;renderPV();renderVers();closeVer();};})(ri);
+    list.appendChild(el);
+  });
+}
+function undoVer(){if(S.versionIdx>0){S.versionIdx--;S.code=S.versions[S.versionIdx].code;renderPV();renderVers();}}
+function toggleVer(e){if(e)e.stopPropagation();var p=document.getElementById('ver-panel');if(p)p.style.display=p.style.display==='none'?'block':'none';}
+function closeVer(){var p=document.getElementById('ver-panel');if(p)p.style.display='none';}
+
+function updSend(){
+  var inp=document.getElementById('c-inp'),btn=document.getElementById('c-send');
+  if(!inp||!btn)return;
+  var ok=inp.value.trim()&&!S.generating;
+  btn.className='c-send'+(ok?' on':'');btn.disabled=!ok;inp.disabled=S.generating;
+}
+function autoR(el){el.style.height='auto';el.style.height=Math.min(el.scrollHeight,80)+'px';}
+function chatKey(e){if(e.key==='Enter'&&!e.shiftKey){e.preventDefault();sendMsg();}}
+function addUMsg(t){var m=document.getElementById('c-msgs'),d=document.createElement('div');d.className='m-u';d.innerHTML='<div class="m-u-b">'+escH(t)+'</div>';m.appendChild(d);m.scrollTop=m.scrollHeight;}
+function setBP(t){var el=document.getElementById('c-inp');if(el){el.value=t;updSend();autoR(el);setTimeout(sendMsg,60);}}
+function setBI(t){var el=document.getElementById('c-inp');if(el){el.value=t;updSend();el.focus();}}
+
+function sendMsg(){
+  var el=document.getElementById('c-inp'),t=el.value.trim();
+  if(!t||S.generating)return;
+  el.value='';updSend();autoR(el);
+  addUMsg(t);S.prompt=t;S.generating=true;S.code='';S.projectId=null;
+  var name=t.length>26?t.slice(0,26)+'...':t;S.projectName=name;
+  var pn=document.getElementById('tb-pn');if(pn)pn.textContent=name;
+  var ce=document.getElementById('c-empty');if(ce)ce.style.display='none';
+  ['sugg-bar','pv-btm','pub-bar'].forEach(function(id){var el=document.getElementById(id);if(el)el.style.display='none';});
+  var pb=document.getElementById('pub-tb');if(pb)pb.disabled=true;
+  var tu=document.getElementById('tb-url');if(tu)tu.style.display='none';
+  setPV('<div class="pv-overlay"><div class="ov-spin"></div><div class="ov-t">Connecting to AI models...</div><div class="ov-badges"><span class="ov-b act">Cerebras</span><span class="ov-b">Gemini</span><span class="ov-b">Groq</span></div></div>');
+  addThinking();doFetch(t);
+}
+
+var thinkEl=null;
+function addThinking(){
+  rmThinking();var m=document.getElementById('c-msgs');
+  thinkEl=document.createElement('div');thinkEl.className='m-a';thinkEl.id='think-el';
+  thinkEl.innerHTML='<div class="m-a-lbl">BUILDAI</div><div class="m-think"><div class="think-hd"><div class="think-dot"></div>5-model pipeline starting...</div><div class="think-ln ap">React + Tailwind · Syne + DM Sans · Reference engine</div><div class="think-ln bl">⚡ Round 1: Cerebras — Ultra-fast builder</div><div class="think-ln bl">🧠 Round 2: Gemini Flash — Design reviewer</div><div class="think-ln bl">✨ Round 3: Groq — Final polish + SEO</div></div><div class="typing"><div class="td"></div><div class="td"></div><div class="td"></div></div>';
+  m.appendChild(thinkEl);m.scrollTop=m.scrollHeight;
+}
+function rmThinking(){var t=document.getElementById('think-el');if(t)t.remove();thinkEl=null;}
+
+function buildErr(msg){
+  S.generating=false;rmThinking();setStat('Build failed',0,false);
+  var m=document.getElementById('c-msgs'),el=document.createElement('div');
+  el.className='m-a';el.innerHTML='<div class="m-a-lbl">BUILDAI</div><div class="m-err">⚠️ '+escH(msg)+'</div>';
+  m.appendChild(el);m.scrollTop=m.scrollHeight;updSend();
+}
+
+function doFetch(prompt){
+  fetch(API+'/api/build',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({prompt:prompt})})
+  .then(function(resp){
+    if(!resp.ok)throw new Error('Server returned '+resp.status+'. Is the Space awake?');
+    var reader=resp.body.getReader(),dec=new TextDecoder(),buf='';
+    function read(){return reader.read().then(function(r){
+      if(r.done){if(!S.code)buildErr('Build ended without result. Check API keys in HuggingFace Secrets.');return;}
+      buf+=dec.decode(r.value,{stream:true});
+      var lines=buf.split('\n');buf=lines.pop();
+      lines.forEach(function(line){if(line.startsWith('data: ')){try{handleEv(JSON.parse(line.slice(6)));}catch(e){}}});
+      return read();
+    });}return read();
+  }).catch(function(e){buildErr(e.message||'Cannot connect to backend.');});
+}
+
+function handleEv(d){
+  if(d.type==='status'){setStat(d.message,d.round,false);showOvl(d.message,d.round);}
+  else if(d.type==='code'){S.code=d.code;addVer(d.code,d.round,d.message);setStat(d.message,d.round,true);if(d.final)finish();}
+  else if(d.type==='error'){buildErr(d.message);}
+}
+
+async function finish(){
+  S.generating=false;rmThinking();
+  [1,2,3].forEach(function(i){var d=document.getElementById('rd'+i);if(d){d.className='r-dot dn';d.textContent='✓';}});
+  setStat('✅ Website ready!',0,false);
+  var savedNote='';
+  if(S.user&&!S.user.isGuest){await autoSave();addProjItem(S.projectName,S.projectId,true,S.code);savedNote='<div class="m-save-note">✅ Saved to your account</div>';}
+  var m=document.getElementById('c-msgs'),ai=document.createElement('div');ai.className='m-a';
+  ai.innerHTML='<div class="m-a-lbl">BUILDAI</div><div class="m-card"><div class="m-card-h">⚛️ '+escH(S.projectName)+'</div><div class="m-card-tabs"><button class="m-card-tb" onclick="switchTab(\'code\');if(window.innerWidth<=768)mobTab(\'code\')">Code</button><button class="m-card-tb on" onclick="switchTab(\'preview\');if(window.innerWidth<=768)mobTab(\'preview\')">Preview</button></div></div>'+savedNote+'<div class="m-txt">Built with React + Tailwind · Cerebras + Gemini + Groq pipeline.</div><div class="m-next-t">What\'s next?</div><div class="m-next-i"><b>Refine:</b> "Make hero darker", "add pricing", "change to blue"</div><div class="m-acts"><button class="m-act primary" onclick="dlZip()">📦 ZIP</button><button class="m-act" onclick="dlFile()">⬇ HTML</button><button class="m-act" onclick="openM(\'publish\')">🚀 Publish</button><button class="m-act" onclick="openM(\'github\')">🐙 GitHub</button></div>';
+  m.appendChild(ai);m.scrollTop=m.scrollHeight;
+  renderPV();
+  ['sugg-bar','pv-btm','pub-bar'].forEach(function(id){var el=document.getElementById(id);if(el)el.style.display='flex';});
+  var pb=document.getElementById('pub-tb');if(pb)pb.disabled=false;
+  var tu=document.getElementById('tb-url');if(tu){tu.style.display='flex';var tt=document.getElementById('tb-url-t');if(tt)tt.textContent=slugify(S.projectName)+'.buildai.app';}
+  if(window.innerWidth<=768)setTimeout(function(){mobTab('preview');},500);
+  updSend();
+}
+
+function newProj(){
+  document.querySelectorAll('.pi').forEach(function(p){p.classList.remove('on');});
+  var pn=document.getElementById('tb-pn');if(pn)pn.textContent='New Project';
+  var cm=document.getElementById('c-msgs');
+  if(cm)cm.innerHTML='<div class="c-empty" id="c-empty"><div class="c-e-ic">🏗️</div><div class="c-e-t">What are we building?</div><div class="c-e-s">Describe your website below.</div><div class="q-prompts"><button class="q-p" onclick="setBP(\'SaaS landing page with pricing\')">💼 SaaS</button><button class="q-p" onclick="setBP(\'E-commerce store with products\')">🛒 E-commerce</button><button class="q-p" onclick="setBP(\'Analytics dashboard\')">📊 Dashboard</button></div></div>';
+  S.code='';S.generating=false;S.versions=[];S.versionIdx=-1;S.projectId=null;
+  [1,2,3].forEach(function(i){var d=document.getElementById('rd'+i);if(d){d.className='r-dot';d.textContent=i;}});
+  setStat('Ready to build',0,false);
+  ['sugg-bar','pv-btm','pub-bar'].forEach(function(id){var el=document.getElementById(id);if(el)el.style.display='none';});
+  var pb=document.getElementById('pub-tb');if(pb)pb.disabled=true;
+  var tu=document.getElementById('tb-url');if(tu)tu.style.display='none';
+  renderVers();setPV('<div class="pv-empty"><div class="pv-e-ic">🌐</div><div class="pv-e-t">Preview will appear here</div></div>');
+  if(window.innerWidth<=768)mobTab('chat');
+}
+
+function clearSBProjects(){document.getElementById('sb-list').querySelectorAll('.pi').forEach(function(p){p.remove();});var se=document.getElementById('sb-empty');if(se)se.style.display='block';}
+function addProjItem(name,id,makeCurrent,code){
+  var se=document.getElementById('sb-empty');if(se)se.style.display='none';
+  if(makeCurrent)document.querySelectorAll('.pi').forEach(function(p){p.classList.remove('on');});
+  var colors=['#6366f1','#8b5cf6','#10b981','#f59e0b','#ec4899'];
+  var c=colors[Math.floor(Math.random()*colors.length)];
+  var el=document.createElement('div');el.className='pi'+(makeCurrent?' on':'');
+  el.dataset.id=id||'';el.dataset.code=code||'';
+  el.innerHTML='<div class="pi-dot" style="background:'+c+'"></div><div><div class="pi-n">'+escH(name)+'</div><div class="pi-d">'+new Date().toLocaleDateString('en-US',{day:'numeric',month:'short'})+'</div></div>';
+  el.onclick=function(){
+    document.querySelectorAll('.pi').forEach(function(p){p.classList.remove('on');});el.classList.add('on');
+    var pn=document.getElementById('tb-pn');if(pn)pn.textContent=name;
+    if(el.dataset.code){S.code=el.dataset.code;S.projectName=name;S.projectId=el.dataset.id;renderPV();var pb=document.getElementById('pv-btm');if(pb)pb.style.display='flex';var ptb=document.getElementById('pub-tb');if(ptb)ptb.disabled=false;if(window.innerWidth<=768)mobTab('preview');}
+  };
+  var list=document.getElementById('sb-list'),first=list.querySelector('.pi');
+  if(first)list.insertBefore(el,first);else list.appendChild(el);
+}
+
+// ── DOWNLOAD FUNCTIONS ──────────────────────────────────────────
+function dlFile(){
+  if(!S.code)return;
+  var blob=new Blob([S.code],{type:'text/html'}),url=URL.createObjectURL(blob);
+  var a=document.createElement('a');a.href=url;a.download=slugify(S.projectName)+'.html';a.click();URL.revokeObjectURL(url);
+}
+function dlZip(){
+  if(!S.code){return;}
+  if(typeof JSZip==='undefined'){alert('JSZip not loaded yet. Downloading HTML instead.');dlFile();return;}
+  try{
+    var zip=new JSZip(),code=S.code,slug=slugify(S.projectName);
+    var styleMatches=code.match(/<style[^>]*>([\s\S]*?)<\/style>/gi)||[];
+    var css='/* BuildAI Generated */\n\n',htmlNo=code;
+    styleMatches.forEach(function(m,i){css+=m.replace(/<style[^>]*>/i,'').replace(/<\/style>/i,'')+'\n';if(i===0)htmlNo=htmlNo.replace(m,'<link rel="stylesheet" href="style.css"/>');else htmlNo=htmlNo.replace(m,'');});
+    var babelMatches=code.match(/<script type="text\/babel"[^>]*>([\s\S]*?)<\/script>/gi)||[];
+    var js='/* BuildAI React App */\nconst { useState, useEffect, useRef, useCallback } = React;\n\n',htmlFinal=htmlNo;
+    babelMatches.forEach(function(m,i){js+=m.replace(/<script[^>]*>/i,'').replace(/<\/script>/i,'').replace(/const \{ useState.*? \} = React;/g,'').trim()+'\n';if(i===0)htmlFinal=htmlFinal.replace(m,'<script type="text/babel" src="app.js"></script>');else htmlFinal=htmlFinal.replace(m,'');});
+    zip.file('index.html',htmlFinal);zip.file('style.css',css);zip.file('app.js',js);
+    zip.file('README.md','# '+slug+'\nBuilt with BuildAI.\n\nOpen index.html in a browser or deploy to Netlify/Vercel/GitHub Pages.\nNo build step required.');
+    zip.generateAsync({type:'blob'}).then(function(blob){
+      var url=URL.createObjectURL(blob),a=document.createElement('a');a.href=url;a.download=slug+'.zip';a.click();URL.revokeObjectURL(url);
+    });
+  }catch(e){console.error(e);dlFile();}
+}
+
+// ── MODAL FUNCTIONS ────────────────────────────────────────────��─
+function openM(name,extra){
+  if(name==='auth'){S.authMode=extra||'signin';switchAuth(S.authMode);}
+  if(name==='publish'){var pd=document.getElementById('pub-subdomain-display');if(pd)pd.textContent=slugify(S.projectName)+'.buildai.app';}
+  var el=document.getElementById('modal-'+name);if(el)el.style.display='flex';
+}
+function closeM(name){
+  var el=document.getElementById('modal-'+name);if(el)el.style.display='none';
+  if(name==='publish'){var pm=document.getElementById('pub-main'),pd=document.getElementById('pub-done'),pb=document.getElementById('pub-go-btn');if(pm)pm.style.display='block';if(pd)pd.style.display='none';if(pb){pb.textContent='🚀 Publish now';pb.disabled=false;}}
+  if(name==='github'){var gf=document.getElementById('gh-form'),gd=document.getElementById('gh-done'),gb=document.getElementById('gh-btn');if(gf)gf.style.display='block';if(gd)gd.style.display='none';if(gb){gb.textContent='Push to GitHub →';gb.disabled=false;}}
+}
+function switchAuth(mode){
+  S.authMode=mode;
+  var si=document.getElementById('at-si'),su=document.getElementById('at-su'),nw=document.getElementById('name-wrap'),sub=document.getElementById('a-sub'),sw=document.getElementById('a-sw-area');
+  if(si)si.className='tab-sw-b'+(mode==='signin'?' on':'');
+  if(su)su.className='tab-sw-b'+(mode==='signup'?' on':'');
+  if(nw)nw.style.display=mode==='signup'?'block':'none';
+  if(sub)sub.textContent=mode==='signin'?'Sign in →':'Create account →';
+  if(sw)sw.innerHTML=mode==='signin'?"Don't have an account? <span onclick=\"switchAuth('signup')\" style='color:#818cf8;cursor:pointer;font-weight:600'>Sign up free</span>":"Already have an account? <span onclick=\"switchAuth('signin')\" style='color:#818cf8;cursor:pointer;font-weight:600'>Sign in</span>";
+  var ae=document.getElementById('auth-err'),ao=document.getElementById('auth-ok');
+  if(ae)ae.style.display='none';if(ao)ao.style.display='none';
+}
+function showAuthErr(msg){var el=document.getElementById('auth-err');if(el){el.textContent='⚠️ '+msg;el.style.display='block';}}
+
+// ── PUBLISH & GITHUB ─────────────────────────────────────────────
+async function doPublish(){
+  if(!S.code){alert('Build a website first.');return;}
+  var slug=slugify(S.projectName),btn=document.getElementById('pub-go-btn');
+  if(btn){btn.textContent='Publishing...';btn.disabled=true;}
+  try{
+    var r=await fetch(API+'/api/publish',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({project_id:slug,html_code:S.code,subdomain:slug})});
+    var d=await r.json();
+    var pm=document.getElementById('pub-main'),pd=document.getElementById('pub-done');
+    if(pm)pm.style.display='none';if(pd)pd.style.display='block';
+    var url=d.url||'https://'+slug+'.buildai.app';
+    var lu=document.getElementById('pub-live-url'),ob=document.getElementById('pub-open-btn');
+    if(lu)lu.textContent=url;if(ob)ob.onclick=function(){window.open(url,'_blank');};
+    var pb=document.getElementById('pub-bar'),pdt=document.getElementById('pub-dt');
+    if(pb)pb.style.display='flex';if(pdt)pdt.textContent=new Date().toLocaleTimeString();
+  }catch(e){if(btn){btn.textContent='🚀 Publish now';btn.disabled=false;}}
+}
+async function doGithub(){
+  var token=document.getElementById('gh-token').value.trim(),repo=document.getElementById('gh-repo').value.trim();
+  if(!token||!repo){alert('Enter GitHub token and repo name.');return;}
+  if(!S.code){alert('Build a website first.');return;}
+  var btn=document.getElementById('gh-btn');if(btn){btn.textContent='Pushing...';btn.disabled=true;}
+  try{
+    var r=await fetch(API+'/api/github/sync',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({project_id:'demo',html_code:S.code,repo_name:repo,github_token:token})});
+    var d=await r.json();
+    if(d.success){var gf=document.getElementById('gh-form'),gd=document.getElementById('gh-done'),gu=document.getElementById('gh-url-out');if(gf)gf.style.display='none';if(gd)gd.style.display='block';if(gu)gu.textContent=d.repo_url;}
+    else{alert('Failed: '+(d.detail||'Unknown'));if(btn){btn.textContent='Push to GitHub →';btn.disabled=false;}}
+  }catch(e){alert('Error: '+e.message);if(btn){btn.textContent='Push to GitHub →';btn.disabled=false;}}
+}
+
+// ── AUTH PLACEHOLDER (Firebase fills these in below) ─────────────
+function guestMode(){
+  S.user={id:'guest-'+Date.now(),email:'guest',name:'Guest',isGuest:true};
+  var sn=document.getElementById('sb-nm'),sp=document.getElementById('sb-plan'),sa=document.getElementById('sb-av'),su=document.getElementById('sb-user-box'),tu=document.getElementById('tb-user');
+  if(sn)sn.textContent='Guest mode';if(sp)sp.textContent='Tap to sign in';if(sa)sa.textContent='?';
+  if(su)su.onclick=function(){openM('auth','signin');};
+  if(tu)tu.innerHTML='<button class="tb-guest" onclick="openM(\'auth\',\'signin\')">👤 Sign in</button>';
+  var sap=document.getElementById('sb-auth-prompt');if(sap)sap.style.display='block';
+}
+function doSignOut(){if(typeof fbAuth!=='undefined'){fbAuth.signOut().catch(function(e){console.error(e);});}else{window.location.reload();}}
+function toggleUD(){var d=document.getElementById('user-dd');if(d)d.style.display=d.style.display==='none'?'block':'none';}
+function doGoogleAuth(){
+  if(typeof fbAuth==='undefined'){alert('Auth not loaded yet. Please wait a moment.');return;}
+  var provider=new firebase.auth.GoogleAuthProvider();
+  provider.setCustomParameters({prompt:'select_account'});
+  var isMobile=/Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
+  if(isMobile){fbAuth.signInWithRedirect(provider).catch(function(e){showAuthErr(e.message);});}
+  else{fbAuth.signInWithPopup(provider).then(function(){closeM('auth');}).catch(function(e){if(e.code==='auth/popup-closed-by-user')return;if(e.code==='auth/unauthorized-domain'){showAuthErr('Add your HuggingFace domain to Firebase Console → Authentication → Authorized domains.');}else{showAuthErr(e.message||'Google sign in failed.');}});}
+}
+async function doAuth(){
+  if(typeof fbAuth==='undefined'){alert('Auth not loaded yet. Please wait.');return;}
+  var email=document.getElementById('a-email').value.trim(),pass=document.getElementById('a-pass').value;
+  var ae=document.getElementById('auth-err'),ao=document.getElementById('auth-ok');
+  if(ae)ae.style.display='none';if(ao)ao.style.display='none';
+  if(!email||!pass){showAuthErr('Enter email and password.');return;}
+  if(pass.length<6){showAuthErr('Password must be at least 6 characters.');return;}
+  var btn=document.getElementById('a-sub');if(btn){btn.disabled=true;btn.textContent='Please wait...';}
+  try{
+    if(S.authMode==='signup'){await fbAuth.createUserWithEmailAndPassword(email,pass);}
+    else{await fbAuth.signInWithEmailAndPassword(email,pass);}
+    closeM('auth');
+  }catch(e){
+    var msgs={'auth/email-already-in-use':'Account already exists. Sign in instead.','auth/user-not-found':'No account found with that email.','auth/invalid-credential':'Wrong email or password.','auth/wrong-password':'Wrong password. Try again.','auth/invalid-email':'Invalid email address.','auth/weak-password':'Password too weak. Use 6+ characters.','auth/too-many-requests':'Too many attempts. Try again later.'};
+    showAuthErr(msgs[e.code]||e.message||'Something went wrong.');
+  }
+  if(btn){btn.disabled=false;btn.textContent=S.authMode==='signin'?'Sign in →':'Create account →';}
+}
+async function loadProjects(){
+  if(!S.user||S.user.isGuest||typeof fbDb==='undefined')return;
+  try{var snap=await fbDb.collection('projects').where('user_id','==',S.user.id).orderBy('updated_at','desc').limit(20).get();clearSBProjects();if(!snap.empty){var se=document.getElementById('sb-empty');if(se)se.style.display='none';snap.forEach(function(doc){var d=doc.data();addProjItem(d.name,doc.id,false,d.html_code);});}}catch(e){console.warn('Load projects:',e.message);}
+}
+async function autoSave(){
+  if(!S.user||S.user.isGuest||!S.code||typeof fbDb==='undefined')return;
+  try{var data={user_id:S.user.id,name:S.projectName,html_code:S.code,updated_at:firebase.firestore.FieldValue.serverTimestamp()};if(S.projectId){await fbDb.collection('projects').doc(S.projectId).update(data);}else{data.created_at=firebase.firestore.FieldValue.serverTimestamp();var ref=await fbDb.collection('projects').add(data);S.projectId=ref.id;}}catch(e){console.warn('Save:',e.message);}
+}
+function onSignedIn(user){
+  S.user={id:user.uid,email:user.email,name:user.displayName||user.email.split('@')[0],isGuest:false};
+  var init=S.user.name[0].toUpperCase();
+  var tu=document.getElementById('tb-user');
+  if(tu)tu.innerHTML='<div class="tb-av" onclick="toggleUD()" title="'+escH(S.user.email)+'">'+init+'<div class="user-dd" id="user-dd" style="display:none"><div class="ud-head"><div class="ud-name">'+escH(S.user.name)+'</div><div class="ud-email">'+escH(S.user.email)+'</div></div><div class="ud-item" onclick="openM(\'github\')">🐙 GitHub sync</div><div class="ud-sep"></div><div class="ud-item red" onclick="doSignOut()">Sign out</div></div></div>';
+  var sa=document.getElementById('sb-av'),sn=document.getElementById('sb-nm'),sp=document.getElementById('sb-plan'),so=document.getElementById('sb-signout'),su=document.getElementById('sb-user-box'),sap=document.getElementById('sb-auth-prompt');
+  if(sa)sa.textContent=init;if(sn)sn.textContent=S.user.name;if(sp)sp.textContent='Free plan';if(so)so.style.display='block';if(su)su.onclick=null;if(sap)sap.style.display='none';
+  loadProjects();
+}
+function onSignedOut(){
+  S.user=null;
+  var tu=document.getElementById('tb-user');if(tu)tu.innerHTML='<button class="tb-signin" onclick="openM(\'auth\',\'signin\')">Sign in</button>';
+  var sa=document.getElementById('sb-av'),sn=document.getElementById('sb-nm'),sp=document.getElementById('sb-plan'),so=document.getElementById('sb-signout'),su=document.getElementById('sb-user-box'),sap=document.getElementById('sb-auth-prompt');
+  if(sa)sa.textContent='?';if(sn)sn.textContent='Guest mode';if(sp)sp.textContent='Tap to sign in';if(so)so.style.display='none';
+  if(su)su.onclick=function(){openM('auth','signin');};if(sap)sap.style.display='block';
+  clearSBProjects();
+}
+
+// Close dropdowns on outside click
+document.addEventListener('click',function(e){
+  var vp=document.getElementById('ver-panel'),vb=document.getElementById('ver-btn');
+  if(vp&&vp.style.display!=='none'&&!vp.contains(e.target)&&vb&&!vb.contains(e.target))vp.style.display='none';
+  var dd=document.getElementById('user-dd');
+  if(dd&&dd.style.display!=='none'&&!dd.parentElement.contains(e.target))dd.style.display='none';
+});
+
+// Check for prompt passed from landing page
+(function(){
+  try{
+    var saved=sessionStorage.getItem('bai_prompt');
+    if(saved){sessionStorage.removeItem('bai_prompt');setTimeout(function(){setBP(saved);},400);}
+    else{
+      var params=new URLSearchParams(window.location.search);
+      var qp=params.get('prompt');
+      if(qp)setTimeout(function(){setBP(qp);},400);
+    }
+  }catch(e){}
+})();
+</script>
+
+<!-- ── Firebase loads AFTER all functions are defined ── -->
+<script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-app-compat.js"></script>
+<script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-auth-compat.js"></script>
+<script src="https://www.gstatic.com/firebasejs/10.8.0/firebase-firestore-compat.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
+<script>
+// Firebase init — runs after all functions are defined above
+try{
+  firebase.initializeApp({
+    apiKey:"AIzaSyDGtOYRxO2N6qPDNwkuZmwkhQelmJ9VQkQ",
+    authDomain:"buildai-b1d98.firebaseapp.com",
+    projectId:"buildai-b1d98",
+    storageBucket:"buildai-b1d98.firebasestorage.app",
+    messagingSenderId:"511431818463",
+    appId:"1:511431818463:web:846a142888fc3517353d6a"
+  });
+  var fbAuth=firebase.auth();
+  var fbDb=firebase.firestore();
+  fbAuth.onAuthStateChanged(function(user){if(user)onSignedIn(user);else onSignedOut();});
+  fbAuth.getRedirectResult().then(function(r){if(r&&r.user)closeM('auth');}).catch(function(e){if(e.code&&e.code!=='auth/no-auth-event')console.warn('Redirect:',e.code);});
+}catch(e){
+  console.warn('Firebase failed to load:',e.message);
+  // Buttons still work — user can use in guest mode
+  var tu=document.getElementById('tb-user');
+  if(tu)tu.innerHTML='<button class="tb-guest" onclick="guestMode()">Use as Guest</button>';
+}
+</script>
+</body>
+</html>

index.html

@@ -0,0 +1,365 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8"/>
+<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
+<title>BuildAI — Build Websites with AI in Seconds</title>
+<meta name="description" content="Describe any website and 5 AI models build it live. React + Tailwind. Powered by Cerebras, Gemini, Groq."/>
+<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚡</text></svg>"/>
+<link rel="preconnect" href="https://fonts.googleapis.com"/>
+<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"/>
+<style>
+*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
+html{scroll-behavior:smooth}
+body{font-family:'Inter',system-ui,sans-serif;background:#07080f;color:#e2e8f0;-webkit-font-smoothing:antialiased;overflow-x:hidden}
+button,a{font-family:inherit;cursor:pointer;text-decoration:none;color:inherit}
+
+@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
+@keyframes gradFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
+@keyframes orb1{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,-30px)}}
+@keyframes orb2{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,20px)}}
+@keyframes orb3{0%,100%{transform:translate(0,0)}50%{transform:translate(20px,30px)}}
+@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
+@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
+
+/* NAV */
+.nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 40px;height:62px;background:rgba(7,8,15,.88);backdrop-filter:blur(24px);border-bottom:1px solid rgba(255,255,255,.05)}
+.nav-logo{display:flex;align-items:center;gap:10px}
+.nav-icon{width:32px;height:32px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px}
+.nav-name{font-weight:800;font-size:17px;letter-spacing:-.5px}
+.nav-v{padding:2px 9px;background:rgba(99,102,241,.15);border:1px solid rgba(99,102,241,.3);border-radius:999px;font-size:10px;color:#a78bfa;font-weight:700}
+.nav-links{display:flex;gap:28px}
+.nav-link{font-size:14px;color:#64748b;font-weight:500;transition:color .2s}
+.nav-link:hover{color:#e2e8f0}
+.nav-btns{display:flex;gap:10px}
+.btn-g{padding:9px 20px;background:transparent;border:1px solid rgba(255,255,255,.1);border-radius:10px;color:#94a3b8;font-size:13.5px;font-weight:500;transition:all .2s}
+.btn-g:hover{border-color:rgba(99,102,241,.5);color:#e2e8f0;background:rgba(99,102,241,.06)}
+.btn-g:active{transform:scale(.97)}
+.btn-p{position:relative;overflow:hidden;padding:10px 22px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border:none;border-radius:10px;color:#fff;font-size:13.5px;font-weight:700;transition:transform .15s,box-shadow .15s;box-shadow:0 4px 16px rgba(99,102,241,.3)}
+.btn-p:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(99,102,241,.45)}
+.btn-p:active{transform:scale(.97)}
+.btn-p::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transform:translateX(-100%);transition:transform .5s}
+.btn-p:hover::after{transform:translateX(100%)}
+
+/* HERO */
+.hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:100px 24px 80px;position:relative;overflow:hidden}
+.hero-bg{position:absolute;inset:0;pointer-events:none}
+.orb{position:absolute;border-radius:50%;filter:blur(100px)}
+.o1{width:700px;height:700px;top:-15%;left:-10%;background:radial-gradient(ellipse,rgba(99,102,241,.2) 0%,transparent 70%);animation:orb1 16s ease-in-out infinite}
+.o2{width:600px;height:600px;bottom:-10%;right:-5%;background:radial-gradient(ellipse,rgba(139,92,246,.15) 0%,transparent 70%);animation:orb2 20s ease-in-out infinite}
+.o3{width:500px;height:500px;top:40%;left:30%;background:radial-gradient(ellipse,rgba(236,72,153,.09) 0%,transparent 70%);animation:orb3 24s ease-in-out infinite}
+.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(99,102,241,.033) 1px,transparent 1px),linear-gradient(90deg,rgba(99,102,241,.033) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at center,black 20%,transparent 70%)}
+.hero-inner{position:relative;z-index:2;max-width:780px;width:100%}
+.hero-pill{display:inline-flex;align-items:center;gap:8px;padding:5px 16px 5px 8px;background:rgba(99,102,241,.08);border:1px solid rgba(99,102,241,.22);border-radius:999px;font-size:12px;color:#a78bfa;margin-bottom:32px;animation:fadeUp .5s ease both}
+.pill-tag{padding:2px 9px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:999px;color:#fff;font-size:10px;font-weight:700}
+.h1{font-size:clamp(38px,7vw,88px);font-weight:900;line-height:1.01;letter-spacing:-3.5px;margin-bottom:24px;animation:fadeUp .6s .05s ease both}
+.h1 .pl{color:#f1f5f9}
+.h1 .gr{background:linear-gradient(135deg,#6366f1 0%,#a78bfa 40%,#ec4899 100%);background-size:200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:gradFlow 5s ease infinite}
+.hero-sub{font-size:18px;color:#4b5563;max-width:540px;margin:0 auto 48px;line-height:1.8;animation:fadeUp .7s .1s ease both}
+
+/* PROMPT */
+.prompt-wrap{max-width:700px;margin:0 auto;animation:fadeUp .8s .15s ease both}
+.pbox{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.04);border:1.5px solid rgba(255,255,255,.1);border-radius:20px;padding:7px 7px 7px 22px;margin-bottom:18px;backdrop-filter:blur(20px);box-shadow:0 20px 60px rgba(0,0,0,.4);transition:border-color .25s,box-shadow .25s}
+.pbox:focus-within{border-color:rgba(99,102,241,.45);box-shadow:0 20px 60px rgba(0,0,0,.4),0 0 0 3px rgba(99,102,241,.1)}
+.pinp{flex:1;background:transparent;border:none;outline:none;color:#e2e8f0;font-size:15.5px;padding:12px 0;font-family:'Inter',sans-serif}
+.pinp::placeholder{color:#252e45}
+.pbtn{position:relative;overflow:hidden;padding:13px 26px;border:none;border-radius:14px;color:#fff;font-size:14.5px;font-weight:700;flex-shrink:0;transition:all .2s;background:linear-gradient(135deg,#6366f1,#8b5cf6);box-shadow:0 4px 20px rgba(99,102,241,.4)}
+.pbtn:hover{transform:translateY(-1px);box-shadow:0 8px 30px rgba(99,102,241,.5)}
+.pbtn:active{transform:scale(.96)}
+.pbtn.off{background:#1a1f33;color:#334155;box-shadow:none;pointer-events:none}
+.pbtn::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transform:translateX(-100%);transition:transform .6s}
+.pbtn:hover:not(.off)::after{transform:translateX(100%)}
+.chips{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
+.chip{padding:8px 16px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:999px;font-size:12.5px;color:#64748b;transition:all .2s;font-weight:500}
+.chip:hover{border-color:rgba(99,102,241,.4);color:#a5b4fc;background:rgba(99,102,241,.07);transform:translateY(-1px)}
+.chip:active{transform:scale(.97)}
+
+/* PROOF */
+.proof-row{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:44px;flex-wrap:wrap;animation:fadeUp .9s .2s ease both}
+.avs{display:flex}
+.av{width:32px;height:32px;border-radius:50%;border:2px solid #07080f;margin-left:-9px;font-size:14px;display:flex;align-items:center;justify-content:center;background:#1a1f33}
+.av:first-child{margin-left:0}
+.pt{font-size:13px;color:#334155;font-weight:500}
+.pt strong{color:#64748b}
+.pdiv{width:1px;height:16px;background:#1e2740}
+.stars{color:#f59e0b;letter-spacing:2px;font-size:12px}
+
+/* API BADGES */
+.api-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;padding:48px 24px 20px;max-width:700px;margin:0 auto}
+.ab{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);border-radius:9px;font-size:12px;color:#475569;font-weight:500;transition:all .2s}
+.ab:hover{border-color:rgba(99,102,241,.2);color:#818cf8}
+.adot{width:7px;height:7px;border-radius:50%;background:#10b981;box-shadow:0 0 8px #10b981;animation:pulse 2.5s ease infinite}
+
+/* FEATURES */
+.sec{padding:88px 24px;max-width:1080px;margin:0 auto}
+.eyebrow{font-size:11px;font-weight:700;color:#6366f1;letter-spacing:3px;text-transform:uppercase;text-align:center;margin-bottom:14px}
+.sec-h{font-size:clamp(26px,4vw,40px);font-weight:900;text-align:center;letter-spacing:-1.2px;margin-bottom:12px;color:#f1f5f9}
+.sec-p{font-size:15px;color:#475569;text-align:center;max-width:480px;margin:0 auto 52px;line-height:1.8}
+.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
+.fc{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:26px;transition:all .3s}
+.fc:hover{border-color:rgba(99,102,241,.3);transform:translateY(-4px);background:rgba(99,102,241,.04)}
+.fi{font-size:28px;margin-bottom:16px;display:block}
+.ft{font-size:14.5px;font-weight:700;color:#c4d4f0;margin-bottom:8px}
+.fd{font-size:12.5px;color:#475569;line-height:1.75}
+
+/* STEPS */
+.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px}
+.step{text-align:center;padding:32px 24px}
+.snum{width:52px;height:52px;border-radius:999px;background:linear-gradient(135deg,rgba(99,102,241,.2),rgba(139,92,246,.2));border:1px solid rgba(99,102,241,.3);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:900;color:#a78bfa;margin:0 auto 20px;font-family:'JetBrains Mono',monospace}
+.st{font-size:16px;font-weight:700;color:#f1f5f9;margin-bottom:8px}
+.sd{font-size:13px;color:#475569;line-height:1.75}
+
+/* TESTIMONIALS */
+.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
+.tc{background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.06);border-radius:18px;padding:24px;transition:all .25s}
+.tc:hover{border-color:rgba(99,102,241,.2);transform:translateY(-2px)}
+.tc-stars{display:flex;gap:3px;margin-bottom:14px}
+.tc-star{color:#f59e0b;font-size:13px}
+.tc-q{font-size:13.5px;color:#94a3b8;line-height:1.75;margin-bottom:18px;font-style:italic}
+.tc-a{display:flex;align-items:center;gap:12px}
+.tc-av{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
+.tc-n{font-size:13px;font-weight:700;color:#f1f5f9}
+.tc-r{font-size:11px;color:#475569;margin-top:2px}
+
+/* CTA BANNER */
+.cta-wrap{max-width:1080px;margin:0 auto;padding:0 24px 80px}
+.cta-box{padding:64px 40px;background:linear-gradient(135deg,rgba(99,102,241,.12),rgba(139,92,246,.08));border:1px solid rgba(99,102,241,.2);border-radius:24px;text-align:center;position:relative;overflow:hidden}
+.cta-box::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(ellipse at center,rgba(99,102,241,.07) 0%,transparent 60%);pointer-events:none}
+.cta-h{font-size:clamp(26px,4vw,42px);font-weight:900;letter-spacing:-1.5px;margin-bottom:14px;color:#f1f5f9;position:relative}
+.cta-p{font-size:16px;color:#475569;margin-bottom:34px;position:relative}
+.cta-btn{position:relative;overflow:hidden;padding:17px 48px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border:none;border-radius:16px;color:#fff;font-size:16px;font-weight:800;transition:transform .15s,box-shadow .2s;box-shadow:0 10px 40px rgba(99,102,241,.4)}
+.cta-btn:hover{transform:translateY(-2px);box-shadow:0 18px 50px rgba(99,102,241,.5)}
+.cta-btn:active{transform:scale(.97)}
+.cta-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transform:translateX(-100%);transition:transform .6s}
+.cta-btn:hover::after{transform:translateX(100%)}
+.cta-note{font-size:12px;color:#334155;margin-top:14px;position:relative}
+
+/* FOOTER */
+.footer{border-top:1px solid rgba(255,255,255,.05);padding:32px 40px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;max-width:1080px;margin:0 auto}
+.f-logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px}
+.f-links{display:flex;gap:24px}
+.f-link{font-size:13px;color:#334155;transition:color .2s}
+.f-link:hover{color:#818cf8}
+.f-copy{font-size:12px;color:#1e2740}
+
+@media(max-width:768px){
+  .nav{padding:0 18px}
+  .nav-links{display:none}
+  .hero{padding:90px 18px 60px}
+  .h1{letter-spacing:-2px}
+  .pbox{padding:6px 6px 6px 16px}
+  .pinp{font-size:14px}
+  .pbtn{padding:11px 18px;font-size:13px}
+  .sec{padding:56px 18px}
+  .cta-box{padding:44px 22px}
+  .footer{padding:28px 18px;flex-direction:column;align-items:flex-start}
+}
+</style>
+</head>
+<body>
+
+<nav class="nav">
+  <div class="nav-logo">
+    <div class="nav-icon">⚡</div>
+    <span class="nav-name">BuildAI</span>
+    <span class="nav-v">v7</span>
+  </div>
+  <div class="nav-links">
+    <a class="nav-link" href="#features">Features</a>
+    <a class="nav-link" href="#how">How it works</a>
+    <a class="nav-link" href="#reviews">Reviews</a>
+  </div>
+  <div class="nav-btns">
+    <button class="btn-g" onclick="goBuilder()">Sign in</button>
+    <button class="btn-p" onclick="goBuilder()">Get started free</button>
+  </div>
+</nav>
+
+<section class="hero">
+  <div class="hero-bg">
+    <div class="orb o1"></div>
+    <div class="orb o2"></div>
+    <div class="orb o3"></div>
+    <div class="hero-grid"></div>
+  </div>
+  <div class="hero-inner">
+    <div class="hero-pill">
+      <span class="pill-tag">NEW</span>
+      Powered by Cerebras · Gemini · Groq
+    </div>
+    <h1 class="h1">
+      <span class="pl">Build websites</span><br>
+      <span class="gr">with AI in seconds</span>
+    </h1>
+    <p class="hero-sub">Describe any website. 5 AI models collaborate in 3 rounds to generate professional React + Tailwind code — live, in front of you.</p>
+
+    <div class="prompt-wrap">
+      <div class="pbox">
+        <input
+          class="pinp"
+          id="hero-inp"
+          type="text"
+          placeholder="Describe your website… e.g. 'SaaS landing page for a project management tool'"
+          autocomplete="off"
+          oninput="syncBtn()"
+          onkeydown="if(event.key==='Enter' && !document.getElementById('hero-btn').classList.contains('off')) launch()"
+        />
+        <button class="pbtn off" id="hero-btn" onclick="launch()">Build it →</button>
+      </div>
+      <div class="chips">
+        <button class="chip" onclick="pick('Premium sneaker e-commerce store with product grid, cart and checkout')">🛒 E-commerce</button>
+        <button class="chip" onclick="pick('SaaS landing page with pricing, features and testimonials')">💼 SaaS</button>
+        <button class="chip" onclick="pick('Italian restaurant with menu, gallery and reservation form')">🍕 Restaurant</button>
+        <button class="chip" onclick="pick('UI/UX designer portfolio with case studies')">🎨 Portfolio</button>
+        <button class="chip" onclick="pick('Dark analytics dashboard with charts and KPI cards')">📊 Dashboard</button>
+      </div>
+    </div>
+
+    <div class="proof-row">
+      <div class="avs">
+        <div class="av">😊</div>
+        <div class="av">😎</div>
+        <div class="av">🤩</div>
+        <div class="av">🎯</div>
+      </div>
+      <span class="pt"><strong>4,200+</strong> websites built</span>
+      <div class="pdiv"></div>
+      <span class="stars">★★★★★</span>
+      <span class="pt"><strong>4.9</strong>/5 rating</span>
+    </div>
+  </div>
+</section>
+
+<div style="text-align:center">
+  <div class="api-row">
+    <div class="ab"><div class="adot"></div>Cerebras · 1,000 tok/s</div>
+    <div class="ab"><div class="adot"></div>Gemini Flash</div>
+    <div class="ab"><div class="adot"></div>Groq LPU</div>
+    <div class="ab"><div class="adot"></div>OpenRouter</div>
+    <div class="ab"><div class="adot"></div>Mistral AI</div>
+  </div>
+</div>
+
+<section class="sec" id="features">
+  <div class="eyebrow">Why BuildAI</div>
+  <h2 class="sec-h">Everything you need</h2>
+  <p class="sec-p">No subscriptions. No tools to install. Every feature works out of the box, completely free.</p>
+  <div class="fgrid">
+    <div class="fc"><span class="fi">⚡</span><div class="ft">Cerebras Ultra-Fast</div><div class="fd">Cerebras runs at 1,000+ tokens/sec. Your website draft appears in seconds, not minutes.</div></div>
+    <div class="fc"><span class="fi">🧠</span><div class="ft">5-Model Pipeline</div><div class="fd">Cerebras builds → Gemini reviews design → Groq polishes. Three rounds, dramatically better output every time.</div></div>
+    <div class="fc"><span class="fi">⚛️</span><div class="ft">React + Tailwind</div><div class="fd">Every website uses real React components with hooks, Tailwind CDN, and premium Google Fonts.</div></div>
+    <div class="fc"><span class="fi">🗺️</span><div class="ft">Smart Templates</div><div class="fd">AI automatically picks the best template — landing, ecommerce, restaurant, portfolio, or dashboard.</div></div>
+    <div class="fc"><span class="fi">📸</span><div class="ft">Real Photos</div><div class="fd">Every website gets keyword-matched real photos. No stock photo subscription ever needed.</div></div>
+    <div class="fc"><span class="fi">📦</span><div class="ft">Download as ZIP</div><div class="fd">Download your website as a ZIP — index.html, style.css, app.js, README. Ready to deploy anywhere.</div></div>
+  </div>
+</section>
+
+<section style="padding:0 24px 88px;max-width:1080px;margin:0 auto" id="how">
+  <div class="eyebrow">The Process</div>
+  <h2 class="sec-h">How it works</h2>
+  <p class="sec-p">Three AI models, three rounds, one stunning website. About 30 seconds total.</p>
+  <div class="steps">
+    <div class="step"><div class="snum">01</div><div class="st">You describe it</div><div class="sd">Type what you want or click a template chip. Be as detailed or brief as you like.</div></div>
+    <div class="step"><div class="snum">02</div><div class="st">3 AIs collaborate</div><div class="sd">Cerebras builds at 1,000+ tok/s. Gemini Flash elevates the design. Groq polishes every detail.</div></div>
+    <div class="step"><div class="snum">03</div><div class="st">Download or publish</div><div class="sd">Preview in desktop/tablet/mobile. Refine via chat. Download ZIP or publish live in one click.</div></div>
+  </div>
+</section>
+
+<section class="sec" id="reviews">
+  <div class="eyebrow">Reviews</div>
+  <h2 class="sec-h">Loved by builders worldwide</h2>
+  <p class="sec-p">Developers, designers, and entrepreneurs use BuildAI every day.</p>
+  <div class="tgrid">
+    <div class="tc">
+      <div class="tc-stars"><span class="tc-star">★</span><span class="tc-star">★</span><span class="tc-star">★</span><span class="tc-star">★</span><span class="tc-star">★</span></div>
+      <p class="tc-q">"Built a complete restaurant website in under a minute. The design quality blew me away — looked like a $5,000 agency site."</p>
+      <div class="tc-a"><div class="tc-av">👩‍🍳</div><div><div class="tc-n">Priya Sharma</div><div class="tc-r">Restaurant Owner, Mumbai</div></div></div>
+    </div>
+    <div class="tc">
+      <div class="tc-stars"><span class="tc-star">★</span><span class="tc-star">★</span><span class="tc-star">★</span><span class="tc-star">★</span><span class="tc-star">★</span></div>
+      <p class="tc-q">"The 3-round pipeline actually works. By Round 3 it looks like Stripe's design team made it. Genuinely impressed."</p>
+      <div class="tc-a"><div class="tc-av">👨‍💻</div><div><div class="tc-n">Marcus Chen</div><div class="tc-r">Full-Stack Developer, Singapore</div></div></div>
+    </div>
+    <div class="tc">
+      <div class="tc-stars"><span class="tc-star">★</span><span class="tc-star">★</span><span class="tc-star">★</span><span class="tc-star">★</span><span class="tc-star">★</span></div>
+      <p class="tc-q">"Finally an AI builder that doesn't give me the same purple gradient every time. Cerebras + Gemini = unbeatable combo."</p>
+      <div class="tc-a"><div class="tc-av">🎨</div><div><div class="tc-n">Fatima Al-Rashid</div><div class="tc-r">UI/UX Designer, Dubai</div></div></div>
+    </div>
+  </div>
+</section>
+
+<div class="cta-wrap">
+  <div class="cta-box">
+    <h2 class="cta-h">Start building for free</h2>
+    <p class="cta-p">No credit card. No account required to try. Describe your website and watch AI build it live.</p>
+    <button class="cta-btn" onclick="goBuilder()">Launch the Builder →</button>
+    <div class="cta-note">Free forever · No credit card · React + Tailwind output</div>
+  </div>
+</div>
+
+<div class="footer">
+  <div class="f-logo"><div class="nav-icon" style="width:26px;height:26px;font-size:13px">⚡</div>BuildAI</div>
+  <div class="f-links">
+    <a class="f-link" href="#features">Features</a>
+    <a class="f-link" href="#how">How it works</a>
+    <a class="f-link" href="/builder">Builder</a>
+  </div>
+  <span class="f-copy">© 2025 BuildAI · Powered by Cerebras, Gemini &amp; Groq</span>
+</div>
+
+<script>
+// ── ZERO Firebase dependencies here. All buttons guaranteed to work. ──
+
+function syncBtn() {
+  var inp = document.getElementById('hero-inp');
+  var btn = document.getElementById('hero-btn');
+  if (!inp || !btn) return;
+  var ok = inp.value.trim().length > 0;
+  if (ok) {
+    btn.classList.remove('off');
+  } else {
+    btn.classList.add('off');
+  }
+}
+
+function pick(text) {
+  var inp = document.getElementById('hero-inp');
+  if (!inp) return;
+  inp.value = text;
+  inp.focus();
+  syncBtn();
+}
+
+function goBuilder() {
+  window.location.href = '/builder';
+}
+
+function launch() {
+  var inp = document.getElementById('hero-inp');
+  var text = inp ? inp.value.trim() : '';
+  if (!text) return;
+  try { sessionStorage.setItem('bai_prompt', text); } catch(e) {}
+  window.location.href = '/builder';
+}
+
+// Scroll reveal
+(function() {
+  var targets = document.querySelectorAll('.fc, .step, .tc');
+  if (!window.IntersectionObserver) return;
+  targets.forEach(function(el, i) {
+    el.style.cssText += 'opacity:0;transform:translateY(30px);transition:opacity .6s ease,transform .6s ease;transition-delay:' + (i % 3) * 0.1 + 's';
+  });
+  var io = new IntersectionObserver(function(entries) {
+    entries.forEach(function(e) {
+      if (e.isIntersecting) {
+        e.target.style.opacity = '1';
+        e.target.style.transform = 'translateY(0)';
+        io.unobserve(e.target);
+      }
+    });
+  }, { threshold: 0.1 });
+  targets.forEach(function(el) { io.observe(el); });
+})();
+</script>
+</body>
+</html>

main.py

@@ -0,0 +1,240 @@
+"""
+BuildAI - FastAPI Backend v3.2
+Routes:
+  GET  /           → index.html  (landing page)
+  GET  /builder    → builder.html (the actual AI builder app)
+  POST /api/build  → SSE streaming AI build
+  POST /api/publish
+  POST /api/github/sync
+  GET  /health
+"""
+
+import os
+import json
+import base64
+import httpx
+from datetime import datetime, timezone
+from typing import Optional
+
+from fastapi import FastAPI, HTTPException
+from fastapi.responses import StreamingResponse, HTMLResponse, JSONResponse
+from fastapi.middleware.cors import CORSMiddleware
+from pydantic import BaseModel
+from dotenv import load_dotenv
+
+from ai_engine import run_pipeline
+
+load_dotenv()
+
+app = FastAPI(title="BuildAI API", version="3.2.0")
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+
+# ── Request models ────────────────────────────────────────────────
+class BuildRequest(BaseModel):
+    prompt: str
+
+class PublishRequest(BaseModel):
+    project_id: str
+    html_code: str
+    subdomain: Optional[str] = None
+
+class GithubSyncRequest(BaseModel):
+    project_id: str
+    html_code: str
+    repo_name: str
+    github_token: str
+
+
+# ── Helper to read HTML files ─────────────────────────────────────
+def read_html(filename: str) -> str:
+    paths = [
+        filename,
+        f"/home/user/app/{filename}",
+        f"./{filename}",
+    ]
+    for path in paths:
+        try:
+            with open(path, "r", encoding="utf-8") as f:
+                return f.read()
+        except FileNotFoundError:
+            continue
+    return f"<h1>{filename} not found</h1><p>Make sure the file is uploaded to your HuggingFace Space.</p>"
+
+
+# ── Health check ──────────────────────────────────────────────────
+@app.get("/health")
+async def health():
+    return {
+        "status": "ok",
+        "version": "3.2.0",
+        "auth": "firebase",
+        "pipeline": "Cerebras → Gemini → Groq → OpenRouter → Mistral",
+        "keys": {
+            "cerebras":    bool(os.environ.get("CEREBRAS_API_KEY")),
+            "gemini":      bool(os.environ.get("GEMINI_API_KEY")),
+            "groq":        bool(os.environ.get("GROQ_API_KEY")),
+            "openrouter":  bool(os.environ.get("OPENROUTER_API_KEY")),
+            "mistral":     bool(os.environ.get("MISTRAL_API_KEY")),
+            "cloudflare":  bool(os.environ.get("CLOUDFLARE_API_TOKEN")),
+        }
+    }
+
+
+# ── Landing page ──────────────────────────────────────────────────
+@app.get("/", response_class=HTMLResponse)
+async def serve_home():
+    return HTMLResponse(content=read_html("index.html"))
+
+
+# ── Builder app ───────────────────────────────────────────────────
+@app.get("/builder", response_class=HTMLResponse)
+async def serve_builder():
+    return HTMLResponse(content=read_html("builder.html"))
+
+
+# ── Build website (SSE stream) ────────────────────────────────────
+@app.post("/api/build")
+async def build_website(req: BuildRequest):
+    if not req.prompt or len(req.prompt.strip()) < 5:
+        raise HTTPException(status_code=400, detail="Prompt is too short.")
+    if len(req.prompt) > 2000:
+        raise HTTPException(status_code=400, detail="Prompt too long (max 2000 chars).")
+    return StreamingResponse(
+        run_pipeline(req.prompt.strip()),
+        media_type="text/event-stream",
+        headers={
+            "Cache-Control": "no-cache",
+            "X-Accel-Buffering": "no",
+            "Connection": "keep-alive",
+        }
+    )
+
+
+# ── Publish to Cloudflare Pages ───────────────────────────────────
+@app.post("/api/publish")
+async def publish_website(req: PublishRequest):
+    slug = req.subdomain or f"project-{req.project_id[:8]}"
+    slug = "".join(c for c in slug.lower() if c.isalnum() or c == "-")[:28]
+
+    cf_token   = os.environ.get("CLOUDFLARE_API_TOKEN")
+    cf_account = os.environ.get("CLOUDFLARE_ACCOUNT_ID")
+
+    if cf_token and cf_account:
+        try:
+            url = await _cloudflare_deploy(slug, req.html_code, cf_token, cf_account)
+            return {"success": True, "url": url}
+        except Exception as e:
+            print(f"[BuildAI] Cloudflare error: {e}")
+
+    # Fallback — return a fake URL (works without Cloudflare keys)
+    return {
+        "success": True,
+        "url": f"https://{slug}.buildai.app",
+        "note": "Add CLOUDFLARE_API_TOKEN + CLOUDFLARE_ACCOUNT_ID for real deployment"
+    }
+
+
+async def _cloudflare_deploy(slug: str, html: str, token: str, account: str) -> str:
+    headers = {"Authorization": f"Bearer {token}"}
+    async with httpx.AsyncClient(timeout=60.0) as client:
+        # Create project if not exists
+        check = await client.get(
+            f"https://api.cloudflare.com/client/v4/accounts/{account}/pages/projects/{slug}",
+            headers=headers
+        )
+        if check.status_code == 404:
+            await client.post(
+                f"https://api.cloudflare.com/client/v4/accounts/{account}/pages/projects",
+                headers={**headers, "Content-Type": "application/json"},
+                json={"name": slug, "production_branch": "main"}
+            )
+
+        # Upload file
+        boundary = "BuildAIBoundary"
+        body = (
+            f"--{boundary}\r\n"
+            f'Content-Disposition: form-data; name="files"; filename="index.html"\r\n'
+            f"Content-Type: text/html\r\n\r\n"
+        ).encode() + html.encode() + f"\r\n--{boundary}--\r\n".encode()
+
+        resp = await client.post(
+            f"https://api.cloudflare.com/client/v4/accounts/{account}/pages/projects/{slug}/deployments",
+            headers={**headers, "Content-Type": f"multipart/form-data; boundary={boundary}"},
+            content=body
+        )
+        if resp.is_success:
+            return f"https://{slug}.pages.dev"
+        raise ValueError(f"Deploy failed: {resp.text[:200]}")
+
+
+# ── GitHub sync ───────────────────────────────────────────────────
+@app.post("/api/github/sync")
+async def github_sync(req: GithubSyncRequest):
+    headers = {
+        "Authorization": f"Bearer {req.github_token}",
+        "Accept": "application/vnd.github.v3+json",
+        "X-GitHub-Api-Version": "2022-11-28",
+    }
+    async with httpx.AsyncClient(timeout=30.0) as client:
+        # Verify token
+        user_resp = await client.get("https://api.github.com/user", headers=headers)
+        if user_resp.status_code != 200:
+            raise HTTPException(status_code=401, detail="Invalid GitHub token.")
+        username = user_resp.json()["login"]
+        repo_full = f"{username}/{req.repo_name}"
+
+        # Create repo if not exists
+        repo_resp = await client.get(
+            f"https://api.github.com/repos/{repo_full}", headers=headers
+        )
+        if repo_resp.status_code == 404:
+            await client.post(
+                "https://api.github.com/user/repos",
+                json={"name": req.repo_name, "private": False, "auto_init": True},
+                headers=headers,
+            )
+
+        # Get existing SHA (for update)
+        file_resp = await client.get(
+            f"https://api.github.com/repos/{repo_full}/contents/index.html",
+            headers=headers,
+        )
+        sha = file_resp.json().get("sha") if file_resp.status_code == 200 else None
+
+        # Push file
+        body: dict = {
+            "message": f"Update via BuildAI v7 — {datetime.now(timezone.utc).strftime('%Y-%m-%d %H:%M')} UTC",
+            "content": base64.b64encode(req.html_code.encode()).decode(),
+        }
+        if sha:
+            body["sha"] = sha
+
+        push = await client.put(
+            f"https://api.github.com/repos/{repo_full}/contents/index.html",
+            json=body,
+            headers=headers,
+        )
+        if push.status_code in (200, 201):
+            return {
+                "success": True,
+                "repo_url": f"https://github.com/{repo_full}",
+                "pages_url": f"https://{username}.github.io/{req.repo_name}",
+            }
+        raise HTTPException(status_code=500, detail="GitHub push failed.")
+
+
+# ── Catch-all (builder handles its own routing) ───────────────────
+@app.get("/{full_path:path}", response_class=HTMLResponse)
+async def catch_all(full_path: str):
+    if full_path.startswith("api/") or full_path == "health":
+        raise HTTPException(status_code=404)
+    # Any unknown path → landing page
+    return HTMLResponse(content=read_html("index.html"))

requirements.txt

@@ -0,0 +1,6 @@
+fastapi==0.115.0
+uvicorn[standard]==0.30.6
+httpx==0.27.2
+python-dotenv==1.0.1
+pydantic==2.8.2
+python-multipart==0.0.9