Initial MTMehitus Space

ANTIGRAVITY_BUILDER_SPEC.md

@@ -0,0 +1,398 @@
+# Antigravity Builderi spetsifikatsioon: MTM Project Studio
+
+## 1. Builderile antav põhikirjeldus
+
+Ehita MTM Ehitus OÜ-le kõikehõlmav eestikeelne projektimüügi, disaini valiku ja täislahenduse tellimise platvorm. Tegemist ei ole kinnisvaraportaaliga ega valmis majade müügiga. Müüdavad tooted on:
+
+1. 3D-disain ja arhitektuurne kontseptsioon;
+2. valitud kontseptsioonist arendatud ehitusprojekt;
+3. personaalne eriprojekt;
+4. olemasoleva disaini kohandamine krundile ja kliendi vajadustele;
+5. projekteerimise, eelarvestamise, juhtimise ja ehituse võtmed-kätte täislahendus.
+
+Kasutaja peab saama alustada päris tehtud 3D-töö või kontrollitud näidislahenduse vaatamisest, võrrelda variante, salvestada lemmikud, valida sobiv projekt lähtepunktiks, kohandada tehnilisi parameetreid, saada esialgne hinnavahemik ja ajakava ning saata MTM Ehitusele struktureeritud lähteülesanne.
+
+Platvormi peamine eesmärk ei ole koguda võimalikult palju üldisi kontaktivorme. Eesmärk on muuta tundmatu külastaja kvalifitseeritud projektipäringuks, mille juures on teada:
+
+- valitud disain või soovitud arhitektuurne suund;
+- hoone kasutusotstarve ja piirkond;
+- soovitud pindala, korrused ja ruumiprogramm;
+- konstruktsiooni, katuse, küttesüsteemi ja viimistluse eelistused;
+- tellitav teenusepakett;
+- soovitud ajakava ja eelarveklass;
+- krundi ning lähteandmete valmidus;
+- kliendi kontaktandmed ja andmetöötluse nõusolek.
+
+## 2. Tootepõhimõtted
+
+- Ära esita portaali valmis majade või kinnisvara müügina.
+- Ära nimeta näidist “tehtud klienditööks”, kui selle kohta puudub tõend ja avaldamisluba.
+- Kõik hinnad peavad olema märgitud kas fikseeritud hinnana, “alates” hinnana või esialgse vahemikuna.
+- Kalkulaatori tulemus ei ole siduv pakkumine.
+- Ära pane API-võtmeid, meiliteenuse paroole ega muid saladusi frontend-koodi.
+- Tootmisversioonis ei tohi kliendi kontaktandmeid salvestada ainult `localStorage`-isse.
+- Mobiilivaade, klaviatuuriga kasutamine, kontrast ja ekraanilugeja tugi on kohustuslikud.
+- Päris projektifotodel peab olema kasutusõigus, optimeeritud formaat ja sisuline `alt`-tekst.
+
+## 3. Kasutajarollid
+
+### Avalik külastaja
+
+- vaatab projekte ja pakette;
+- filtreerib, otsib ja salvestab lemmikuid;
+- koostab projekti lähteülesande;
+- saab esialgse hinnavahemiku;
+- saadab päringu või broneerib konsultatsiooni.
+
+### Müügikonsultant
+
+- näeb uusi päringuid;
+- filtreerib neid staatuse ja teenusemahu järgi;
+- lisab märkmeid ja määrab vastutaja;
+- muudab päringu staatust;
+- loob kliendile järgmise tegevuse.
+
+### Sisuhaldur
+
+- lisab ja muudab projektikaarte;
+- haldab fotosid, 3D-renderdusi, silte ja pakette;
+- märgib, milline väide on avaldamiseks kinnitatud;
+- muudab hinnavahemikke ning kalkulaatori koefitsiente.
+
+### Administraator
+
+- haldab kasutajaid ja õigusi;
+- näeb süsteemi logisid;
+- ekspordib päringuid;
+- haldab integratsioone, nõusolekuid ja andmete säilitusaega.
+
+## 4. Põhiandmemudelid
+
+### Project
+
+```text
+id
+slug
+title
+short_description
+long_description
+building_type
+style
+area_m2
+floor_count
+room_count
+materials[]
+base_design_price
+available_packages[]
+customizable_fields[]
+status_label
+is_verified_client_work
+publication_consent_id
+images[]
+model_3d_url
+floorplan_files[]
+featured
+published
+created_at
+updated_at
+```
+
+### Package
+
+```text
+id
+name
+description
+pricing_mode
+price_from
+price_to
+price_per_m2_from
+duration_min_weeks
+duration_max_weeks
+deliverables[]
+stages[]
+revision_count
+active
+```
+
+### Lead
+
+```text
+id
+reference
+name
+email
+phone
+company
+selected_project_id
+selected_package_id
+project_brief_json
+budget_range
+desired_start_date
+plot_status
+consent_version
+consent_at
+source
+utm_parameters
+status
+owner_id
+created_at
+updated_at
+```
+
+### PriceRule
+
+```text
+id
+package_id
+rule_type
+condition_json
+amount
+multiplier
+priority
+valid_from
+valid_to
+active
+```
+
+## 5. Peamine kasutajateekond
+
+```text
+Avaleht
+→ projektikataloog
+→ filtrid või otsing
+→ projekti detailvaade
+→ “Kasuta lähtepunktina”
+→ paketi valik
+→ tehnilised lähteandmed
+→ esialgne hinnavahemik ja ajakava
+→ lähteülesande kontroll
+→ kontaktandmed ja nõusolek
+→ päringu saatmine
+→ kinnitusekraan ja konsultatsiooni broneerimine
+```
+
+Kasutaja valikud peavad säilima, kui ta liigub kataloogi, pakettide ja planeerija vahel. Tagasi tulles ei tohi lähteülesanne kaduda.
+
+## 6. Antigravity Builderi master-prompt
+
+```text
+Ehita olemasoleva MTM Project Studio prototüübi põhjal tootmiskõlblik eestikeelne veebirakendus. Säilita visuaalne suund: tumesinine, kuldne aktsent, valge taust, selged kaardid ja tugev ehitusvaldkonna professionaalsus.
+
+Äriline positsioneerimine:
+- me ei müü valmis maju;
+- müüme 3D-disainilahendusi, ehitusprojekte, kohandamist ja täislahendusi;
+- projektikataloog sisaldab kontrollitud näiteid ning avaldamisloaga tehtud töid;
+- iga projekt on võimalik valida uue tellimuse lähtepunktiks.
+
+Kohustuslikud moodulid:
+1. responsiivne avaleht ja selge väärtuspakkumine;
+2. andmepõhine projektikataloog koos otsingu, filtrite, sortimise ja lemmikutega;
+3. projektide detaillehed galeriiga, põhiandmetega, kohandamisvõimalustega ja 3D-mudeli kohaga;
+4. kolme teenusepaketi võrdlus;
+5. mitmeastmeline projekti konfiguraator;
+6. administreeritavate reeglitega hinnavahemiku kalkulaator;
+7. automaatselt genereeritav projektibrief;
+8. turvaline päringuvorm, nõusolek ja e-posti teavitus;
+9. päringute halduse töölaud;
+10. sisuhaldus projektidele, piltidele, pakettidele ja hinnareeglitele;
+11. analüütika, SEO, ligipääsetavus, jõudlus ja turvalisus;
+12. Hugging Face Space’i demo ning tootmiskeskkonna eraldi konfiguratsioon.
+
+Kasuta kontrollitavaid andmemudeleid. Ära pane saladusi frontend-koodi. Ära fabritseeri kliendiprojekte, asukohti, hindu ega ostude arvu. Kui sisu pole kinnitatud, märgi see näidissisuks.
+
+Koosta iga arendusosa jaoks testid ning täida allolevad vastuvõtukriteeriumid.
+```
+
+## 7. Tööde backlog
+
+### Epic A – sisu ja bränd
+
+- [ ] `A-01 P0` Kinnita ettevõtte nimi, registriandmed, telefon, e-post ja teeninduspiirkonnad.
+- [ ] `A-02 P0` Kinnita avaldatavad väited: kogemus, objektide arv, garantiid ja reageerimisaeg.
+- [ ] `A-03 P0` Kogu päris 3D-renderdused, plaanid ja tehtud tööde fotod koos avaldamisloaga.
+- [ ] `A-04 P1` Koosta igale projektile nimi, lühikirjeldus, põhiandmed, kohandamisvõimalused ja `alt`-tekstid.
+- [ ] `A-05 P1` Loo projektide märgistamise süsteem: hoonetüüp, stiil, pindala, korrused, konstruktsioon ja teenusepakett.
+- [ ] `A-06 P1` Kinnita pakettide tegelik sisu, hinnastamisloogika, parandusringid ja üleantavad failid.
+
+Vastuvõtt: ükski avalik fakt ega klienditöö staatus ei ole kontrollimata.
+
+### Epic B – projektikataloog
+
+- [ ] `B-01 P0` Vii projektid kõvakodeeritud JavaScriptist andmebaasi või hallatavasse JSON/CMS-kihti.
+- [ ] `B-02 P0` Loo projektide loend ja SEO-sõbralikud detaillehed.
+- [ ] `B-03 P0` Lisa otsing nime, stiili, materjali ja märksõnade järgi.
+- [ ] `B-04 P0` Lisa filtrid hoonetüübi, pindala, korruste, stiili ja paketi järgi.
+- [ ] `B-05 P1` Lisa sortimine soovitatuse, pindala, disainihinna ja värskuse järgi.
+- [ ] `B-06 P1` Lisa lemmikud anonüümsele kasutajale ja sisselogitud kliendile.
+- [ ] `B-07 P1` Lisa vähemalt kuuest päris või selgelt märgistatud näidisprojektist koosnev algkataloog.
+- [ ] `B-08 P2` Lisa projektide omavaheline võrdlus kuni kolme projekti kaupa.
+
+Vastuvõtt: filtrid töötavad koos, URL säilitab filtrid ja tühja tulemuse vaade annab selge järgmise tegevuse.
+
+### Epic C – projektide detailvaade
+
+- [ ] `C-01 P0` Loo pildigalerii WebP/AVIF piltide ning suurendamisega.
+- [ ] `C-02 P0` Näita pindala, korruseid, ruume, konstruktsiooni, materjale ja sobivaid pakette.
+- [ ] `C-03 P0` Lisa “Kasuta lähtepunktina” tegevus, mis eeltäidab konfiguraatori.
+- [ ] `C-04 P1` Lisa kohandatavate ja fikseeritud omaduste eristus.
+- [ ] `C-05 P1` Lisa PDF-plaanide või brošüüri allalaadimine.
+- [ ] `C-06 P2` Lisa GLB/GLTF 3D-mudeli vaatur ja mobiilis AR-lingi võimalus.
+
+Vastuvõtt: projekti valik kandub konfiguraatorisse ilma andmekadudeta.
+
+### Epic D – konfiguraator ja hinnastamine
+
+- [ ] `D-01 P0` Loo mitmeastmeline vorm: kasutusotstarve, piirkond, krunt, pindala, ruumid, konstruktsioon, katus, küte, viimistlus ja ajakava.
+- [ ] `D-02 P0` Näita sammude edenemist ja puuduvaid kohustuslikke andmeid.
+- [ ] `D-03 P0` Hoia hinnareeglid administreeritavas `PriceRule` mudelis.
+- [ ] `D-04 P0` Arvuta minimaalse ja maksimaalse hinna vahemik, mitte eksitav üksikhind.
+- [ ] `D-05 P0` Näita, millised valikud hinda suurendavad või vähendavad.
+- [ ] `D-06 P1` Arvuta teenusepaketi ajakava ja projekti valmidusaste.
+- [ ] `D-07 P1` Salvesta anonüümne mustand brauserisse ning sisselogitud kliendi mustand andmebaasi.
+- [ ] `D-08 P1` Genereeri versioonitud projektibrief JSON- ja PDF-kujul.
+- [ ] `D-09 P2` Lisa konsultandi kinnitatud hinnastamise režiim ja pakkumise versioonid.
+
+Vastuvõtt: sama sisend annab sama hinnangu; reeglite muudatus on auditeeritav; tulemusel on kuupäev ja lahtiütlus.
+
+### Epic E – päringud ja müügiprotsess
+
+- [ ] `E-01 P0` Loo serveripoolne `/api/leads` endpoint.
+- [ ] `E-02 P0` Valideeri ja puhasta kõik väljad serveris.
+- [ ] `E-03 P0` Salvesta päring, brief, nõusoleku versioon, ajatempel ja allikas andmebaasi.
+- [ ] `E-04 P0` Saada kliendile kinnituskiri ning müügile struktureeritud teavitus.
+- [ ] `E-05 P0` Lisa rämpspostikaitse: honeypot, kiirusepiirang ja vajadusel Turnstile.
+- [ ] `E-06 P1` Loo unikaalne päringu viitenumber.
+- [ ] `E-07 P1` Lisa Cal.comi või Google Calendari konsultatsiooni broneerimine.
+- [ ] `E-08 P1` Lisa CRM-integratsiooni adapter, mitte teenusepõhine loogika otse vormi.
+- [ ] `E-09 P2` Lisa automaatsed järeltegevused vastavalt valitud paketile.
+
+Vastuvõtt: päring ei kao, dubleeritud submit ei loo topeltkirjet ja klient saab kinnituse.
+
+### Epic F – administraatori töölaud
+
+- [ ] `F-01 P0` Lisa turvaline sisselogimine ja rollipõhine ligipääs.
+- [ ] `F-02 P0` Loo projektide, pakettide, hindade ja meedia CRUD.
+- [ ] `F-03 P0` Loo päringute tabel otsingu, filtrite, staatuste ja vastutajaga.
+- [ ] `F-04 P1` Lisa päringu detailvaade koos briefi, ajajoone ja märkmetega.
+- [ ] `F-05 P1` Lisa CSV-eksport ja kustutustaotluse töövoog.
+- [ ] `F-06 P1` Lisa sisu eelvaade ning mustand/avaldatud olek.
+- [ ] `F-07 P2` Lisa auditilogi hinnareeglite, sisu ja päringu staatuse muudatustele.
+
+Vastuvõtt: avalik kasutaja ei pääse admin-andmetele ning iga muutus on seotud kasutajaga.
+
+### Epic G – 3D ja AI
+
+- [ ] `G-01 P1` Lisa päris 3D-renderduste haldus ja optimeerimine.
+- [ ] `G-02 P2` Lisa GLB-mudelite vaatur koos varulaadimise ning jõudluspiiridega.
+- [ ] `G-03 P2` Loo serveripoolne idee analüüs, mis tagastab struktureeritud JSON-i.
+- [ ] `G-04 P2` Seo analüüsi väljund konfiguraatori väljadega ainult kasutaja kinnituse järel.
+- [ ] `G-05 P2` Lisa pildigeneratsioon ainult serveri kaudu ja selge “kontseptsioon, mitte projektjoonis” märgistusega.
+- [ ] `G-06 P2` Salvesta prompt, mudeliversioon, nõusolek ja genereeritud vara päritolu.
+
+Vastuvõtt: AI ei anna siduvat konstruktsiooni- ega hinnalubadust ja kasutaja näeb, millised väljad automaatselt pakuti.
+
+### Epic H – kvaliteet, turvalisus ja privaatsus
+
+- [ ] `H-01 P0` Lisa CSP, turvalised päised, HTTPS ja sõltuvuste kontroll.
+- [ ] `H-02 P0` Hoia saladused ainult Space Secretsis või tootmiskeskkonna secrets-halduses.
+- [ ] `H-03 P0` Lisa privaatsusteade, küpsiste loogika ja nõusoleku versioonimine.
+- [ ] `H-04 P0` Määra päringute säilitusaeg ja kustutamisprotsess.
+- [ ] `H-05 P0` Tee WCAG 2.2 AA ligipääsetavuse kontroll.
+- [ ] `H-06 P0` Testi telefonis, tahvlis ning Chrome’i, Edge’i, Safari ja Firefoxiga.
+- [ ] `H-07 P1` Lisa unit-, integratsiooni- ja end-to-end testid kriitilisele ostuteekonnale.
+- [ ] `H-08 P1` Saavuta Lighthouse sihid: Performance ≥ 90, Accessibility ≥ 95, SEO ≥ 95.
+- [ ] `H-09 P1` Lisa varundus ja taastamistest andmebaasile ning meediale.
+
+Vastuvõtt: P0 turva- või ligipääsetavusvigu ei ole.
+
+### Epic I – SEO ja analüütika
+
+- [ ] `I-01 P0` Lisa unikaalsed title, description, canonical ja Open Graph andmed.
+- [ ] `I-02 P0` Lisa Organization, Service, BreadcrumbList ja Project/CreativeWork struktureeritud andmed.
+- [ ] `I-03 P0` Loo sitemap ja robots konfiguratsioon.
+- [ ] `I-04 P1` Mõõda sündmused: projekti vaatamine, lemmik, paketi valik, kalkulaatori lõpetamine ja päringu saatmine.
+- [ ] `I-05 P1` Säilita UTM parameetrid päringuga.
+- [ ] `I-06 P1` Loo müügile funnel-raport ning kanalite konversioon.
+- [ ] `I-07 P2` Lisa eesti, inglise ja soome keele arhitektuur.
+
+Vastuvõtt: isikuandmeid ei saadeta analüütikasse ning sündmuste nimed on dokumenteeritud.
+
+### Epic J – Hugging Face Space ja tootmine
+
+- [ ] `J-01 P0` Avalda praegune demo Static Space’ina.
+- [ ] `J-02 P0` Kontrolli, et `README.md` sisaldab `sdk: static` ja `app_file: index.html`.
+- [ ] `J-03 P0` Lisa automaatne kontroll HTML-i, JavaScripti ja katkiste linkide jaoks.
+- [ ] `J-04 P1` Kui lisatakse server või andmebaas, migreeri Docker Space’ile või eraldi tootmishostingule.
+- [ ] `J-05 P1` Hoia demoandmed ja tootmisandmed täielikult lahus.
+- [ ] `J-06 P1` Lisa keskkonnamuutujad, health check, logid ja veajälgimine.
+- [ ] `J-07 P1` Sea Space Secretid ainult serveripoolsetele integratsioonidele.
+- [ ] `J-08 P2` Lisa staging-keskkond enne avalikku tootmisversiooni.
+
+Vastuvõtt: repo värskendamine ehitab Space’i veatult; saladusi ei leidu failides ega brauseri lähtekoodis.
+
+## 8. Minimaalne API leping tootmiskeskkonnale
+
+```text
+GET    /api/projects
+GET    /api/projects/:slug
+GET    /api/packages
+POST   /api/estimate
+POST   /api/leads
+GET    /api/leads/:reference/status
+POST   /api/briefs
+GET    /api/briefs/:id.pdf
+POST   /api/auth/login
+GET    /api/admin/leads
+PATCH  /api/admin/leads/:id
+POST   /api/admin/projects
+PATCH  /api/admin/projects/:id
+```
+
+Kõigil mutatsioonidel peab olema serveripoolne valideerimine. Admin-endpointidel peab olema autentimine, rollikontroll, auditilogi ja CSRF-kaitse vastavalt valitud autentimismudelile.
+
+## 9. Teststsenaariumid
+
+1. Kasutaja filtreerib alla 100 m² eramud ja näeb ainult sobivaid projekte.
+2. Kasutaja lisab projekti lemmikuks, värskendab lehte ja lemmik säilib.
+3. Kasutaja valib projekti lähtepunktiks ning pindala ja hoonetüüp eeltäidetakse.
+4. Paketi vahetamine muudab hinda, ajakava, etappe ja üleantavaid materjale.
+5. Sama konfiguratsioon annab pärast lehe värskendamist taastatud mustandis sama tulemuse.
+6. Projektibrief sisaldab valitud projekti, tehnilisi eelistusi, hinnavahemikku ja lahtiütlust.
+7. Puuduv nõusolek või vigane e-post takistab päringu saatmist.
+8. Honeypot-välja täitnud robot ei loo päringut.
+9. Topeltklõps submit-nupul ei loo kaht päringut.
+10. Klaviatuuriga saab avada ja sulgeda detailmodaali ning läbida kogu vormi.
+11. Mobiilivaates ei teki horisontaalset kerimist.
+12. Ükski frontend-fail ei sisalda API-võtit ega parooli.
+
+## 10. Definition of Done
+
+Funktsioon loetakse valmis ainult siis, kui:
+
+- äriline eesmärk ja kasutajateekond on dokumenteeritud;
+- disain töötab vähemalt 360 px kuni 1440 px laiuses;
+- tühjad, laadivad, edukad ja veaolekud on olemas;
+- sisend valideeritakse kliendis ja serveris;
+- ligipääsetav nimi ning klaviatuuritugi on olemas;
+- testid läbivad CI-s;
+- analüütikasündmus on lisatud, kui funktsioon kuulub funnelisse;
+- privaatsus- ja turvamõju on kontrollitud;
+- sisu on kinnitatud ega esita näidisandmeid päris klienditööna;
+- dokumentatsioon ja juurutusjuhis on uuendatud.
+
+## 11. Tehniline juurutusotsus
+
+### Praegune demo
+
+Kasuta Hugging Face **Static Space’i**. See vajab ainult `README.md`, `index.html` ja `app.js` faile. Kõik funktsioonid töötavad brauseris.
+
+### Tootmiskõlblik versioon
+
+Kui lisanduvad päringute andmebaas, admin, e-kirjad või serveripoolne AI, kasuta:
+
+- Docker Space + FastAPI/PostgreSQL; või
+- eraldi frontendi ja hallatud backend’i, näiteks Supabase/PostgreSQL.
+
+Hugging Face Static Space ei sobi saladusi vajava vormi-API hoidmiseks, sest kogu JavaScript on avalik. Staatiline demo võib jätkata eraldi, kuid tootmisandmeid ei tohi demo `localStorage`-isse või avalikku reposse kirjutada.
+

ANTIGRAVITY_HANDOFF.md

@@ -0,0 +1,96 @@
+# Antigravity handoff: MTMehitus Space
+
+## Space
+
+Sihtrepositoorium:
+
+```text
+https://huggingface.co/spaces/techprotrade/MTMehitus
+```
+
+Space’i tüüp:
+
+```text
+Hugging Face Static Space
+sdk: static
+app_file: index.html
+```
+
+## Antigravityle antav ülesanne
+
+```text
+Tööta olemasoleva Hugging Face Space’i repositooriumiga:
+https://huggingface.co/spaces/techprotrade/MTMehitus
+
+Loe enne muudatuste tegemist täielikult:
+1. README.md
+2. ANTIGRAVITY_BUILDER_SPEC.md
+3. ANTIGRAVITY_HANDOFF.md
+4. index.html
+5. app.js
+
+Projekti eesmärk:
+MTMehitus ei ole valmis majade või kinnisvara müügiportaal. See on 3D-disainide, ehitusprojektide, kohandatavate näidislahenduste ja võtmed-kätte täislahenduste müügi- ning päringukeskkond.
+
+Säilita praegu töötavad funktsioonid:
+- kuue näidisega projektikataloog;
+- otsing, filtrid ja sortimine;
+- lemmikud;
+- projektide detailvaade;
+- projekti valimine lähtepunktiks;
+- paketivõrdlus;
+- hinnavahemiku ja ajakava arvutus;
+- projektibrief;
+- mustandi salvestamine;
+- allalaadimine, printimine, e-post ja WhatsApp;
+- valideeritud kontaktivorm.
+
+Arenda funktsioone ainult väikeste kontrollitavate commit’idega. Iga commiti järel:
+1. kontrolli JavaScripti süntaksit;
+2. testi avalehe laadimist;
+3. testi kataloogi filtreid;
+4. testi projekti valimist;
+5. testi paketivahetust ja hinnakalkulatsiooni;
+6. testi mustandi taastamist;
+7. kontrolli mobiilivaadet;
+8. kontrolli, et Space’i YAML metadata jäi kehtivaks.
+
+Ära lisa frontend-koodi API-võtmeid ega paroole.
+Ära nimeta näidisprojekti päris klienditööks ilma tõendi ja avaldamisloata.
+Ära muuda kalkulaatori tulemust siduvaks hinnapakkumiseks.
+Ära eemalda hinnavahemiku lahtiütlust.
+
+Esimene arendusetapp:
+1. asenda ikoonidega näidised päris optimeeritud 3D-renderdustega;
+2. tõsta projektiandmed app.js failist data/projects.json faili;
+3. lisa projektide unikaalsed detail-URL-id;
+4. lisa kuni kolme projekti võrdlus;
+5. lisa eelarveklass ja soovitud algusaeg konfiguraatorisse;
+6. lisa katkiste piltide varuvaade;
+7. lisa täielik klaviatuuritugi modaalile;
+8. lisa SEO ja Open Graph metadata;
+9. lisa projektide JSON-LD struktureeritud andmed;
+10. kirjuta automaattestid kriitilisele kasutajateekonnale.
+
+Kui lisad päringute andmebaasi, e-posti saatmise, administraatori või serveripoolse AI:
+- migreeri Space Docker SDK-le või kasuta eraldi turvalist backend’i;
+- hoia saladused Hugging Face Space Secretsis;
+- valideeri sisend serveris;
+- lisa rämpspostikaitse, nõusoleku logi ja andmete säilitamisreeglid.
+
+Põhjalik backlog, andmemudelid, API leping ja Definition of Done asuvad failis ANTIGRAVITY_BUILDER_SPEC.md.
+```
+
+## Soovitatud tööviis
+
+Antigravity peaks tegema iga suurema funktsiooni eraldi branch’is või väikese commit’ina. Space’i `main` haru peab jääma alati käivitatavaks. Enne merge’i tuleb kontrollida vähemalt:
+
+- staatilise Space’i build;
+- JavaScripti runtime-vead;
+- 360 px mobiilivaade;
+- projektikataloogi filtrid;
+- kalkulaatori kolm paketti;
+- andmete püsimine pärast värskendamist;
+- kontaktivormi valideerimine;
+- saladuste puudumine repositooriumis.
+

README.md

@@ -1,10 +1,54 @@
 ---
 title: MTMehitus
-emoji: 🏆
-colorFrom: green
-colorTo: blue
+emoji: 🏗️
+colorFrom: blue
+colorTo: yellow
 sdk: static
+app_file: index.html
 pinned: false
+short_description: 3D-disainid, ehitusprojektid ja täislahendused
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# MTMehitus
+
+Interaktiivne eestikeelne koduleht 3D-disainide, ehitusprojektide ja võtmed-kätte täislahenduste tutvustamiseks ning müügipäringute koostamiseks.
+
+Planeeritud Space’i repositoorium: `techprotrade/MTMehitus`.
+
+## Space’is töötavad funktsioonid
+
+- filtreeritav kuue näidislahendusega projektikataloog;
+- lemmikute salvestamine külastaja brauserisse;
+- projekti detailvaade ja kohandamisvõimalused;
+- 3D-kontseptsiooni, ehitusprojekti ja täislahenduse võrdlus;
+- pindala ja tehniliste valikute järgi muutuv hinnavahemik;
+- automaatne tööetappide, ajakava ja valmidusastme arvutus;
+- näidisprojekti kasutamine uue projekti lähtepunktina;
+- nutikas tekstipõhine projektisoovitus ilma API-võtmeta;
+- projektimustandi taastamine brauseri `localStorage` abil;
+- lähteülesande allalaadimine, kopeerimine ja PDF-ina printimine;
+- e-posti ning WhatsAppi kaudu jagamine;
+- kontaktivormi valideerimine ja e-kirja mustandi avamine.
+
+## Failid
+
+- `index.html` – kujundus, sisu ja ligipääsetav HTML-struktuur;
+- `app.js` – kataloog, kalkulaator, salvestamine, jagamine ja vormiloogika;
+- `ANTIGRAVITY_BUILDER_SPEC.md` – tootmiskõlbliku versiooni täielik ehitusplaan.
+- `ANTIGRAVITY_HANDOFF.md` – valmis juhis, mille saab koos Space’i aadressiga Antigravityle anda.
+
+## Hugging Face Space’i lisamine
+
+1. Loo uus Hugging Face Space.
+2. Vali SDK-ks **Static**.
+3. Lisa selle kausta failid Space’i repositooriumi juurkausta.
+4. Kontrolli, et `README.md` YAML-plokis oleks `sdk: static` ja `app_file: index.html`.
+5. Tee commit. Space avaldab lehe automaatselt.
+
+Hugging Face’i ametliku konfiguratsiooniviite järgi võib staatiline Space kasutada HTML/CSS/JavaScripti ning `app_file` peab osutama renderdatavale HTML-failile.
+
+## Enne avalikku kasutust
+
+Praegune versioon on toimiv müügi- ja demonstratsioonirakendus, kuid kontaktivorm ei saada andmeid serverisse. See koostab e-kirja külastaja enda e-posti rakenduses. Tootmiskeskkonnas tuleb lisada turvaline vormi-API, nõusolekute logi, päringute andmebaas ja administraatori töölaud.
+
+Projektikaartide graafilised ikoonid tuleb asendada MTM Ehituse päris 3D-renderduste ning kontrollitud projektiandmetega. Ära avalda kliendi nime, aadressi ega projekti staatust ilma loata.

app.js

@@ -0,0 +1,611 @@
+/* MTM Project Studio – browser-native sales application.
+   Works without API keys or a backend. Leads are prepared as email drafts and
+   project drafts/favorites are stored only in the visitor's browser. */
+
+const MTM_EMAIL = "info@mtmehitus.ee";
+const MTM_PHONE = "3725071042";
+const storageKeys = {
+    favorites: "mtm-project-favorites-v1",
+    draft: "mtm-project-draft-v1",
+    leads: "mtm-project-leads-v1"
+};
+
+const projects = [
+    {
+        id: "nordic-140",
+        name: "Nordic 140",
+        type: "home",
+        typeLabel: "Eramu",
+        area: 140,
+        rooms: 5,
+        floors: 1,
+        style: "Põhjamaine",
+        material: "Puit ja krohv",
+        designPrice: 1850,
+        status: "Kliendi valitud suund",
+        package: "3D-disain + kohandamine",
+        icon: "fa-house-chimney-window",
+        gradient: "linear-gradient(135deg,#78909c,#263238)",
+        description: "Valgusküllane ühekorruseline lahendus, kus köök ja elutuba avanevad terrassile. Selge ruumiloogika sobib nii linnalähedasele kui maapiirkonna krundile.",
+        customize: "Pindala 115–165 m², 3–4 magamistuba, fassaadimaterjalid, katusekalle, terrassi asukoht ja tehnosüsteemid."
+    },
+    {
+        id: "compact-92",
+        name: "Compact 92",
+        type: "home",
+        typeLabel: "Eramu",
+        area: 92,
+        rooms: 4,
+        floors: 1,
+        style: "Ajatu",
+        material: "Puitkarkass",
+        designPrice: 1450,
+        status: "Projektina valitud",
+        package: "3D-disain + ehitusprojekt",
+        icon: "fa-house",
+        gradient: "linear-gradient(135deg,#90a4ae,#455a64)",
+        description: "Kompaktne viilkatusega kodu, mis annab väikese ehitusaluse pinna juures hea ruumikasutuse ja kontrollitava ehituseelarve.",
+        customize: "Pindala 78–110 m², 2–3 magamistuba, varjualune, terrass, katusematerjal ja siseplaneering."
+    },
+    {
+        id: "courtyard-168",
+        name: "Courtyard 168",
+        type: "home",
+        typeLabel: "Eramu",
+        area: 168,
+        rooms: 6,
+        floors: 1,
+        style: "Modernne",
+        material: "Kergplokk ja puit",
+        designPrice: 2450,
+        status: "Täislahenduse lähteprojekt",
+        package: "Disainist teostuseni",
+        icon: "fa-building",
+        gradient: "linear-gradient(135deg,#8d6e63,#3e2723)",
+        description: "L-kujuline sisehooviga lahendus eraldab privaatse magamistubade tiiva ja avatud eluala. Hoov loob tuulevarjulise väliruumi.",
+        customize: "Pindala 145–195 m², garaaž või varjualune, sisehoovi suurus, fassaadikombinatsioon ja ruumide arv."
+    },
+    {
+        id: "forest-76",
+        name: "Forest 76",
+        type: "summer",
+        typeLabel: "Puhkemaja",
+        area: 76,
+        rooms: 3,
+        floors: 1,
+        style: "Looduslähedane",
+        material: "Termopuit",
+        designPrice: 1350,
+        status: "Kohandatav näidislahendus",
+        package: "3D-kontseptsioon",
+        icon: "fa-tree-city",
+        gradient: "linear-gradient(135deg,#7cb342,#1b5e20)",
+        description: "Kompaktne puhkemaja suure klaasfassaadi, saunaploki ja kaetud terrassiga. Sobib metsa, mere või järve lähedale.",
+        customize: "Pindala 55–95 m², saun, magamiskohtade arv, terrass, vai- või plaatvundament ja aastaringne kasutus."
+    },
+    {
+        id: "studio-48",
+        name: "Studio 48",
+        type: "outbuilding",
+        typeLabel: "Stuudio / abihoone",
+        area: 48,
+        rooms: 2,
+        floors: 1,
+        style: "Minimalistlik",
+        material: "Puit ja plekk",
+        designPrice: 980,
+        status: "Kohandatav näidislahendus",
+        package: "3D-disain",
+        icon: "fa-warehouse",
+        gradient: "linear-gradient(135deg,#607d8b,#102027)",
+        description: "Paindlik väikehoone kodukontoriks, stuudioks, külalistemajaks või rendipinnaks. Tehnosüsteemid saab lahendada põhiehitisega koos või eraldi.",
+        customize: "Pindala 30–60 m², pesuruum, kööginurk, eraldi sissepääsud, fassaad ja tehniline valmidus."
+    },
+    {
+        id: "workhub-210",
+        name: "WorkHub 210",
+        type: "office",
+        typeLabel: "Ärihoone",
+        area: 210,
+        rooms: 8,
+        floors: 2,
+        style: "Kaasaegne",
+        material: "Sandwich-paneel ja klaas",
+        designPrice: 2900,
+        status: "Ärilahenduse kontseptsioon",
+        package: "3D-disain + põhiprojekt",
+        icon: "fa-city",
+        gradient: "linear-gradient(135deg,#5c6bc0,#1a237e)",
+        description: "Kahekorruseline paindlik töö- ja teenindushoone, mille ruume saab jagada ühe või mitme kasutaja vahel.",
+        customize: "Pindala 160–320 m², töökohtade arv, lao- või teenindusala, parkimine, reklaampinnad ja energialahendus."
+    }
+];
+
+const packageMeta = {
+    concept: {
+        name: "3D-kontseptsioon",
+        duration: "3–6 nädalat",
+        stages: ["Lähteülesanne", "Eskiissuund", "3D-mudel", "Visualiseeringud", "Üleandmine"],
+        descriptions: [
+            "Vajadused, krundiinfo, ruumiprogramm ja eesmärgid.",
+            "Kaks ruumilist suunda ja eelistatud variandi valik.",
+            "Mahud, fassaadid, avad ja põhikompositsioon.",
+            "Materjalid, valgus ja esitlusvaated.",
+            "Failipakett ning soovitused järgmise etapi jaoks."
+        ],
+        shares: [0.15, 0.2, 0.3, 0.25, 0.1],
+        deliverables: ["Lähteülesanne ja ruumiprogramm", "2 eskiissuunda", "3D-mudel ja 4 vaadet", "Materjali- ja värvikaart"]
+    },
+    project: {
+        name: "Ehitusprojekt",
+        duration: "8–16 nädalat",
+        stages: ["Lähteülesanne", "3D-kontseptsioon", "Põhijoonised", "Tehniline kooskõla", "Üleandmine"],
+        descriptions: [
+            "Krundiinfo, ruumiprogramm ja tehnilised eesmärgid.",
+            "Mahud, plaaniloogika, välisilme ja materjalid.",
+            "Plaanid, vaated, lõiked ja põhikonstruktsioonid.",
+            "Konstruktsioonide ja tehnosüsteemide lähteinfo.",
+            "Koondfailid, konsultatsioon ja järgmiste sammude plaan."
+        ],
+        shares: [0.12, 0.22, 0.3, 0.24, 0.12],
+        deliverables: ["Lähteülesanne ja ruumiprogramm", "3D-kontseptsioon ja materjalid", "Plaanid, vaated ja lõiked", "Tehniliste osade lähteinfo"]
+    },
+    turnkey: {
+        name: "Täislahendus",
+        duration: "9–16 kuud",
+        stages: ["Projekteerimine", "Vundament", "Konstruktsioonid", "Tehnosüsteemid", "Viimistlus ja üleandmine"],
+        descriptions: [
+            "Disain, projekt, kooskõlastused ja detailne eelarve.",
+            "Pinnasetööd, vundament, soojustus ja aluspõrand.",
+            "Kandekonstruktsioonid, katus, avatäited ja fassaad.",
+            "Elekter, vesi, kanalisatsioon, küte ja ventilatsioon.",
+            "Siseviimistlus, seadistus, kontroll ja dokumentatsioon."
+        ],
+        shares: [0.08, 0.14, 0.3, 0.21, 0.27],
+        deliverables: ["Disain ja ehitusprojekt", "Detailne eelarve ja ajakava", "Ehitusjuhtimine ja kvaliteedikontroll", "Valmis objekt ja üleandmisdokumendid"]
+    }
+};
+
+let appState = {
+    package: "project",
+    selectedProjectId: null,
+    favoritesOnly: false,
+    estimate: null
+};
+
+let configState = {
+    area: 120,
+    floors: 1,
+    foundation: "plate",
+    wall: "block",
+    roof: "gable-tin",
+    heating: "geo",
+    finish: "turnkey",
+    region: "harju",
+    use: "home"
+};
+
+function safeJsonRead(key, fallback) {
+    try {
+        const parsed = JSON.parse(localStorage.getItem(key));
+        return parsed ?? fallback;
+    } catch {
+        return fallback;
+    }
+}
+
+function saveJson(key, value) {
+    try {
+        localStorage.setItem(key, JSON.stringify(value));
+        return true;
+    } catch {
+        return false;
+    }
+}
+
+function formatCurrency(value) {
+    return Math.round(value).toLocaleString("et-EE") + " €";
+}
+
+function packageValueToForm(value) {
+    return packageMeta[value]?.name || "Ehitusprojekt";
+}
+
+function showToast(message) {
+    const toast = document.getElementById("toast");
+    toast.textContent = message;
+    toast.classList.add("show");
+    clearTimeout(showToast.timer);
+    showToast.timer = setTimeout(() => toast.classList.remove("show"), 3200);
+}
+
+window.selectOption = function(type, value, element) {
+    configState[type] = value;
+    element.parentElement.querySelectorAll(".option-card").forEach(card => card.classList.remove("selected"));
+    element.classList.add("selected");
+    updateCalculator();
+};
+
+window.switchTab = function(tabName) {
+    document.querySelectorAll(".tab-btn").forEach(btn => btn.classList.remove("active"));
+    document.querySelectorAll(".tab-content").forEach(content => content.classList.remove("active"));
+    const custom = tabName === "customizer";
+    document.querySelectorAll(".tab-btn")[custom ? 0 : 1].classList.add("active");
+    document.getElementById(custom ? "tab-customizer" : "tab-ai-prompt").classList.add("active");
+};
+
+window.selectPackage = function(packageId, element) {
+    appState.package = packageId;
+    document.querySelectorAll(".package-option").forEach(card => card.classList.remove("selected"));
+    const target = element || document.querySelector(`[data-package="${packageId}"]`);
+    if (target) target.classList.add("selected");
+    document.getElementById("form-package").value = packageValueToForm(packageId);
+    updateCalculator();
+};
+
+window.choosePackageAndScroll = function(packageId) {
+    selectPackage(packageId);
+    document.querySelector("#kalkulaator").scrollIntoView({behavior: "smooth"});
+};
+
+window.updateCalculator = function() {
+    const area = Number(document.getElementById("house-area").value);
+    configState.area = area;
+    configState.foundation = document.getElementById("foundation-type").value;
+    configState.wall = document.getElementById("wall-type").value;
+    configState.roof = document.getElementById("roof-type").value;
+    configState.heating = document.getElementById("heating-type").value;
+    configState.region = document.getElementById("project-region").value;
+    configState.use = document.getElementById("building-use").value;
+    document.getElementById("area-val").textContent = area;
+
+    let baseRate = 1200;
+    if (configState.floors === 1.5) baseRate += 100;
+    if (configState.floors === 2) baseRate += 180;
+    if (configState.foundation === "plate") baseRate += 60;
+    if (configState.foundation === "pile") baseRate += 90;
+    if (configState.wall === "clt") baseRate += 220;
+    if (configState.wall === "wood") baseRate += 50;
+    if (configState.heating === "geo") baseRate += 80;
+    if (configState.heating === "air-water") baseRate += 50;
+    if (configState.finish === "shell") baseRate -= 350;
+    if (configState.finish === "turnkey") baseRate += 250;
+    if (configState.region === "harju") baseRate *= 1.04;
+
+    let midpoint;
+    let lowFactor;
+    let highFactor;
+    if (appState.package === "concept") {
+        midpoint = 850 + area * 8.5 + (configState.floors > 1 ? 350 : 0);
+        lowFactor = 0.88;
+        highFactor = 1.18;
+    } else if (appState.package === "project") {
+        midpoint = 2600 + area * 31 + (configState.floors > 1 ? 800 : 0) + (configState.wall === "clt" ? 500 : 0);
+        lowFactor = 0.86;
+        highFactor = 1.22;
+    } else {
+        midpoint = area * baseRate + 6200;
+        lowFactor = 0.9;
+        highFactor = 1.13;
+    }
+
+    const low = Math.round(midpoint * lowFactor / 50) * 50;
+    const high = Math.round(midpoint * highFactor / 50) * 50;
+    const meta = packageMeta[appState.package];
+    const selectedProject = projects.find(p => p.id === appState.selectedProjectId);
+    const readiness = Math.min(95, 45 + (selectedProject ? 15 : 0) + (document.getElementById("ai-description").value.trim() ? 15 : 0) + (configState.region ? 10 : 0));
+
+    appState.estimate = { midpoint, low, high, baseRate, readiness };
+    document.getElementById("total-price").textContent = `${formatCurrency(low)} – ${formatCurrency(high)}`;
+    document.getElementById("price-per-m2").textContent = appState.package === "turnkey"
+        ? `hinnanguliselt ${Math.round(baseRate)} € / m²`
+        : `${meta.name.toLowerCase()} valitud mahu põhjal`;
+
+    meta.shares.forEach((share, index) => {
+        document.getElementById(`stage-label-${index + 1}`).textContent = `${index + 1}. ${meta.stages[index]}`;
+        document.getElementById(`stage-desc-${index + 1}`).textContent = meta.descriptions[index];
+        document.getElementById(["cost-foundation","cost-walls","cost-roof","cost-utility","cost-finish"][index]).textContent = formatCurrency(midpoint * share);
+    });
+    meta.deliverables.forEach((item, index) => {
+        document.getElementById(`deliverable-${index + 1}`).textContent = item;
+    });
+
+    const useLabels = {home:"eramu", summer:"puhkemaja", office:"ärihoone", outbuilding:"abihoone"};
+    document.getElementById("brief-title").textContent = `${selectedProject ? selectedProject.name + " põhjal" : "Uus"} ${area} m² ${useLabels[configState.use]} – ${meta.name.toLowerCase()}`;
+    document.getElementById("brief-package").textContent = meta.name;
+    document.getElementById("brief-range").textContent = `${formatCurrency(low)}–${formatCurrency(high)}`;
+    document.getElementById("brief-duration").textContent = meta.duration;
+    document.getElementById("brief-readiness").textContent = `${readiness}%`;
+};
+
+function getBriefText() {
+    const selected = projects.find(p => p.id === appState.selectedProjectId);
+    const meta = packageMeta[appState.package];
+    const regionLabels = {harju:"Harjumaa / Tallinn", tartu:"Tartumaa", parnu:"Pärnumaa", rapla:"Raplamaa", other:"Muu Eesti piirkond"};
+    const useLabels = {home:"Eramu", summer:"Suvila / puhkemaja", office:"Äri- või büroohoone", outbuilding:"Abihoone / stuudio"};
+    const estimate = appState.estimate || {};
+    return `MTM EHITUS – PROJEKTI LÄHTEÜLESANNE
+Koostatud: ${new Date().toLocaleDateString("et-EE")}
+
+VALITUD LAHENDUS
+Pakett: ${meta.name}
+Lähteprojekt: ${selected ? selected.name : "Personaalne uus lahendus"}
+Hoone: ${useLabels[configState.use]}
+Piirkond: ${regionLabels[configState.region]}
+Pindala: ${configState.area} m²
+Korruseid: ${configState.floors}
+
+TEHNILISED EELISTUSED
+Vundament: ${configState.foundation}
+Konstruktsioon: ${configState.wall}
+Katus: ${configState.roof}
+Küte: ${configState.heating}
+Viimistlus: ${configState.finish}
+
+IDEE JA ERISOOVID
+${document.getElementById("ai-description").value.trim() || "Täpsustatakse konsultatsioonil."}
+
+ESIALGNE PLANEERING
+Hinnavahemik: ${formatCurrency(estimate.low || 0)} – ${formatCurrency(estimate.high || 0)}
+Ajakava: ${meta.duration}
+Lähteandmete valmidus: ${estimate.readiness || 0}%
+
+Märkus: hinnavahemik on planeerimise lähtehinnang, mitte siduv pakkumine.`;
+}
+
+window.downloadBrief = function() {
+    const blob = new Blob([getBriefText()], {type: "text/plain;charset=utf-8"});
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `MTM-projekti-lahteulesanne-${new Date().toISOString().slice(0,10)}.txt`;
+    link.click();
+    URL.revokeObjectURL(url);
+    showToast("Lähteülesanne laaditi alla.");
+};
+
+window.copyBrief = async function() {
+    try {
+        await navigator.clipboard.writeText(getBriefText());
+        showToast("Projektikokkuvõte kopeeriti.");
+    } catch {
+        showToast("Kopeerimine ei õnnestunud. Laadi fail alla.");
+    }
+};
+
+window.shareByEmail = function() {
+    const subject = encodeURIComponent(`MTM projektipäring – ${packageMeta[appState.package].name}`);
+    const body = encodeURIComponent(getBriefText());
+    window.location.href = `mailto:${MTM_EMAIL}?subject=${subject}&body=${body}`;
+};
+
+window.shareByWhatsApp = function() {
+    const text = encodeURIComponent(getBriefText());
+    window.open(`https://wa.me/${MTM_PHONE}?text=${text}`, "_blank", "noopener");
+};
+
+window.saveDraft = function() {
+    const draft = {
+        config: {...configState},
+        app: {package: appState.package, selectedProjectId: appState.selectedProjectId},
+        description: document.getElementById("ai-description").value,
+        savedAt: new Date().toISOString()
+    };
+    if (saveJson(storageKeys.draft, draft)) showToast("Projekt salvestati selles brauseris.");
+    else showToast("Brauser ei lubanud mustandit salvestada.");
+};
+
+function restoreDraft() {
+    const draft = safeJsonRead(storageKeys.draft, null);
+    if (!draft?.config) return;
+    Object.assign(configState, draft.config);
+    appState.package = draft.app?.package || "project";
+    appState.selectedProjectId = draft.app?.selectedProjectId || null;
+    document.getElementById("house-area").value = configState.area || 120;
+    ["foundation","wall","roof","heating"].forEach(key => {
+        const ids = {foundation:"foundation-type",wall:"wall-type",roof:"roof-type",heating:"heating-type"};
+        if (configState[key]) document.getElementById(ids[key]).value = configState[key];
+    });
+    if (configState.region) document.getElementById("project-region").value = configState.region;
+    if (configState.use) document.getElementById("building-use").value = configState.use;
+    document.getElementById("ai-description").value = draft.description || "";
+    selectPackage(appState.package);
+    if (appState.selectedProjectId) updateStickyProject();
+    showToast("Varasem projektimustand taastati.");
+}
+
+window.analyzeProjectIdea = function() {
+    const desc = document.getElementById("ai-description").value.trim();
+    const file = document.getElementById("ai-image-upload").files[0];
+    if (!desc && !file) {
+        showToast("Lisa kirjeldus või inspiratsioonipilt.");
+        return;
+    }
+    const lower = desc.toLowerCase();
+    const recommendations = [];
+    if (/modern|minimal|lamekatus/.test(lower)) recommendations.push("Kontseptsioonis tasub kontrollida suure klaaspinna, varjestuse ja lamekatuse tehnilist sobivust.");
+    if (/puit|clt|loodus/.test(lower)) recommendations.push("Puitlahenduse puhul lisa lähteülesandesse fassaadi hooldusklass, tulepüsivus ja niiskusrežiim.");
+    if (/saun|spaa|bassein/.test(lower)) recommendations.push("Märgruumid vajavad varases etapis ventilatsiooni, äravoolude ja niiskustehnilise lahenduse koordineerimist.");
+    if (/äri|büroo|klient|teenindus/.test(lower)) recommendations.push("Ärihoone puhul tuleb kohe määrata kasutajate arv, ligipääsetavus, evakuatsioon ja parkimisvajadus.");
+    if (/odav|eelarve|soodne/.test(lower)) recommendations.push("Eelarve hoidmiseks eelista kompaktset mahtu, korduvaid avatäiteid ja lihtsat katusegeomeetriat.");
+    if (!recommendations.length) recommendations.push("Järgmine mõistlik samm on ruumiprogrammi, krundi piirangute ja soovitud eelarve ühine kinnitamine.");
+    if (file) recommendations.push(`Inspiratsioonipilt „${file.name}” lisatakse konsultatsiooni lähteinfo hulka.`);
+    const selected = projects.find(p => p.id === appState.selectedProjectId);
+    const intro = selected ? `Valitud ${selected.name} annab hea lähtekoha.` : "Kirjelduse põhjal soovitame alustada ruumilise kontseptsiooniga.";
+    document.getElementById("ai-text-output").textContent = `${intro} ${recommendations.join(" ")}`;
+    document.getElementById("ai-analysis-result").style.display = "block";
+    updateCalculator();
+};
+
+function getFavorites() {
+    return safeJsonRead(storageKeys.favorites, []);
+}
+
+window.toggleFavorite = function(id, event) {
+    event?.stopPropagation();
+    const favorites = getFavorites();
+    const next = favorites.includes(id) ? favorites.filter(item => item !== id) : [...favorites, id];
+    saveJson(storageKeys.favorites, next);
+    renderProjects();
+    showToast(next.includes(id) ? "Projekt lisati lemmikutesse." : "Projekt eemaldati lemmikutest.");
+};
+
+window.toggleFavoritesOnly = function() {
+    appState.favoritesOnly = !appState.favoritesOnly;
+    renderProjects();
+};
+
+window.renderProjects = function() {
+    const query = document.getElementById("catalog-search").value.trim().toLowerCase();
+    const type = document.getElementById("catalog-type").value;
+    const area = document.getElementById("catalog-area").value;
+    const sort = document.getElementById("catalog-sort").value;
+    const favorites = getFavorites();
+
+    let filtered = projects.filter(project => {
+        const searchable = `${project.name} ${project.typeLabel} ${project.style} ${project.material} ${project.description}`.toLowerCase();
+        const areaMatch = area === "all" || (area === "small" && project.area <= 100) || (area === "medium" && project.area > 100 && project.area <= 160) || (area === "large" && project.area > 160);
+        return (!query || searchable.includes(query)) && (type === "all" || project.type === type) && areaMatch && (!appState.favoritesOnly || favorites.includes(project.id));
+    });
+
+    if (sort === "area-asc") filtered.sort((a,b) => a.area - b.area);
+    if (sort === "area-desc") filtered.sort((a,b) => b.area - a.area);
+    if (sort === "price-asc") filtered.sort((a,b) => a.designPrice - b.designPrice);
+
+    document.getElementById("catalog-count").textContent = `${filtered.length} lahendust`;
+    document.getElementById("favorite-count").textContent = favorites.length;
+    const grid = document.getElementById("project-grid");
+    if (!filtered.length) {
+        grid.innerHTML = `<div class="empty-state"><i class="fas fa-magnifying-glass" style="font-size:2.4rem;margin-bottom:12px;"></i><h3>Sobivaid lahendusi ei leitud</h3><p>Muuda filtreid või koosta planeerijas personaalne projekt.</p></div>`;
+        return;
+    }
+    grid.innerHTML = filtered.map(project => `
+        <article class="project-card">
+            <div class="project-img" style="background:${project.gradient}">
+                <button class="favorite-btn ${favorites.includes(project.id) ? "active" : ""}" onclick="toggleFavorite('${project.id}', event)" aria-label="Lisa lemmikuks"><i class="${favorites.includes(project.id) ? "fas" : "far"} fa-heart"></i></button>
+                <i class="fas ${project.icon}"></i>
+            </div>
+            <div class="project-info">
+                <span class="tag">${project.package}</span>
+                <h3 style="margin-top:12px;">${project.name}</h3>
+                <p class="location"><i class="fas fa-circle-check"></i> ${project.status}</p>
+                <div class="project-specs">
+                    <span>${project.area} m²</span><span>${project.rooms} ruumi</span><span>${project.floors} korrus${project.floors > 1 ? "t" : ""}</span><span>${project.style}</span>
+                </div>
+                <p style="font-size:.88rem;color:var(--gray-text);">${project.description}</p>
+                <p class="package-price">3D-disain alates ${formatCurrency(project.designPrice)}</p>
+                <div class="project-actions">
+                    <button class="btn btn-secondary btn-small" onclick="openProjectModal('${project.id}')">Vaata detaile</button>
+                    <button class="btn btn-primary btn-small" onclick="useProject('${project.id}')">Kasuta lähtepunktina</button>
+                </div>
+            </div>
+        </article>`).join("");
+};
+
+window.openProjectModal = function(id) {
+    const project = projects.find(item => item.id === id);
+    if (!project) return;
+    document.getElementById("modal-tag").textContent = project.package;
+    document.getElementById("modal-title").textContent = project.name;
+    document.getElementById("modal-description").textContent = project.description;
+    document.getElementById("modal-customize").textContent = project.customize;
+    document.getElementById("modal-hero").style.background = project.gradient;
+    document.getElementById("modal-hero").innerHTML = `<i class="fas ${project.icon}"></i>`;
+    document.getElementById("modal-specs").innerHTML = `<span>${project.area} m²</span><span>${project.rooms} ruumi</span><span>${project.floors} korrus${project.floors > 1 ? "t" : ""}</span><span>${project.material}</span>`;
+    document.getElementById("modal-use-btn").onclick = () => useProject(id);
+    document.getElementById("modal-quote-btn").onclick = () => chooseDesign(project.name);
+    document.getElementById("project-modal").classList.add("open");
+    document.body.style.overflow = "hidden";
+};
+
+window.closeProjectModal = function() {
+    document.getElementById("project-modal").classList.remove("open");
+    document.body.style.overflow = "";
+};
+
+window.closeModalFromBackdrop = function(event) {
+    if (event.target.id === "project-modal") closeProjectModal();
+};
+
+window.useProject = function(id) {
+    const project = projects.find(item => item.id === id);
+    if (!project) return;
+    appState.selectedProjectId = id;
+    document.getElementById("house-area").value = project.area;
+    document.getElementById("building-use").value = project.type;
+    configState.floors = project.floors;
+    updateStickyProject();
+    closeProjectModal();
+    updateCalculator();
+    document.querySelector("#kalkulaator").scrollIntoView({behavior:"smooth"});
+    showToast(`${project.name} valiti projekti lähtepunktiks.`);
+};
+
+function updateStickyProject() {
+    const project = projects.find(item => item.id === appState.selectedProjectId);
+    const bar = document.getElementById("sticky-project-bar");
+    if (!project) {
+        bar.classList.remove("show");
+        return;
+    }
+    document.getElementById("sticky-project-name").textContent = project.name;
+    bar.classList.add("show");
+}
+
+window.chooseDesign = function(designName) {
+    const project = projects.find(item => item.name === designName);
+    if (project) appState.selectedProjectId = project.id;
+    document.getElementById("form-message").value = `${getBriefText()}\n\nSoovin selle lahenduse kohta personaalset pakkumist.`;
+    document.getElementById("form-package").value = packageValueToForm(appState.package);
+    closeProjectModal();
+    document.querySelector("#kontakt").scrollIntoView({behavior:"smooth"});
+};
+
+window.sendProjectToForm = function() {
+    document.getElementById("form-message").value = `${getBriefText()}\n\nPalun võtke minuga ühendust lahenduse täpsustamiseks.`;
+    document.getElementById("form-package").value = packageValueToForm(appState.package);
+    document.querySelector("#kontakt").scrollIntoView({behavior:"smooth"});
+};
+
+window.handleFormSubmit = function(event) {
+    event.preventDefault();
+    if (document.getElementById("form-company").value) return;
+    const form = event.currentTarget;
+    if (!form.checkValidity()) {
+        form.reportValidity();
+        return;
+    }
+    const reference = `MTM-${new Date().toISOString().slice(0,10).replaceAll("-","")}-${String(Date.now()).slice(-4)}`;
+    const lead = {
+        reference,
+        name: document.getElementById("form-name").value.trim(),
+        email: document.getElementById("form-email").value.trim(),
+        phone: document.getElementById("form-phone").value.trim(),
+        package: document.getElementById("form-package").value,
+        message: document.getElementById("form-message").value.trim(),
+        createdAt: new Date().toISOString()
+    };
+    const leads = safeJsonRead(storageKeys.leads, []);
+    saveJson(storageKeys.leads, [...leads.slice(-9), lead]);
+    const status = document.getElementById("form-status");
+    status.className = "form-status success";
+    status.textContent = `Päring ${reference} koostati ja salvestati selles brauseris. Avame nüüd sinu e-posti rakenduse, et saaksid selle MTM Ehitusele saata.`;
+    const subject = encodeURIComponent(`Projektipäring ${reference} – ${lead.package}`);
+    const body = encodeURIComponent(`Nimi: ${lead.name}\nE-post: ${lead.email}\nTelefon: ${lead.phone || "-"}\n\n${lead.message}`);
+    setTimeout(() => { window.location.href = `mailto:${MTM_EMAIL}?subject=${subject}&body=${body}`; }, 350);
+};
+
+document.addEventListener("keydown", event => {
+    if (event.key === "Escape") closeProjectModal();
+});
+
+document.getElementById("menuToggle").addEventListener("click", () => {
+    document.getElementById("navMenu").classList.toggle("open");
+});
+
+document.getElementById("ai-image-upload").addEventListener("change", () => updateCalculator());
+document.getElementById("ai-description").addEventListener("input", () => updateCalculator());
+
+renderProjects();
+updateCalculator();
+restoreDraft();

index.html

@@ -1,19 +1,2010 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
+<!DOCTYPE html>
+<html lang="et">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MTMehitus – 3D disainid, ehitusprojektid ja täislahendused</title>
+    
+    <!-- Font Awesome 6 Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+
+    <style>
+        /* RESET & PÕHISTIILID */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        :root {
+            --primary-dark: #0b1a2e;
+            --primary-blue: #1e3a5f;
+            --accent-gold: #f5b042;
+            --accent-gold-hover: #e09e2f;
+            --accent-gold-light: #fef4e2;
+            --light-bg: #f4f7fa;
+            --white: #ffffff;
+            --gray-text: #5a6b7c;
+            --gray-light: #e2e8f0;
+            --card-shadow: 0 10px 30px rgba(11, 26, 46, 0.08);
+            --radius-lg: 16px;
+            --radius-sm: 8px;
+        }
+
+        body {
+            font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
+            background-color: var(--light-bg);
+            color: #1e2a3a;
+            line-height: 1.6;
+            scroll-behavior: smooth;
+        }
+
+        .container {
+            max-width: 1240px;
+            margin: 0 auto;
+            padding: 0 20px;
+        }
+
+        /* TÜPOGRAAFIA JA NUPUD */
+        h1, h2, h3, h4 {
+            font-weight: 700;
+            letter-spacing: -0.02em;
+            color: var(--primary-dark);
+        }
+
+        h2 {
+            font-size: 2.2rem;
+            margin-bottom: 0.8rem;
+        }
+
+        .section-title {
+            text-align: center;
+            margin-bottom: 3rem;
+        }
+
+        .section-title span {
+            display: block;
+            background: var(--accent-gold);
+            width: 70px;
+            height: 4px;
+            border-radius: 4px;
+            margin: 10px auto 0;
+        }
+
+        .btn {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+            padding: 14px 32px;
+            border-radius: 50px;
+            font-weight: 700;
+            text-decoration: none;
+            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+            border: none;
+            cursor: pointer;
+            font-size: 1rem;
+        }
+
+        .btn-primary {
+            background: var(--accent-gold);
+            color: var(--primary-dark);
+            box-shadow: 0 4px 18px rgba(245, 176, 66, 0.35);
+        }
+
+        .btn-primary:hover {
+            background: var(--accent-gold-hover);
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(245, 176, 66, 0.45);
+        }
+
+        .btn-secondary {
+            background: var(--primary-blue);
+            color: var(--white);
+        }
+
+        .btn-secondary:hover {
+            background: var(--primary-dark);
+            transform: translateY(-2px);
+        }
+
+        .btn-outline {
+            background: transparent;
+            color: var(--white);
+            border: 2px solid var(--white);
+        }
+
+        .btn-outline:hover {
+            background: var(--white);
+            color: var(--primary-dark);
+        }
+
+        /* HEADER & NAVIGATSIOON */
+        header {
+            background: var(--primary-dark);
+            padding: 16px 0;
+            position: sticky;
+            top: 0;
+            z-index: 1000;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.25);
+        }
+
+        .header-flex {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+
+        .logo a {
+            font-size: 1.6rem;
+            font-weight: 800;
+            color: var(--white);
+            text-decoration: none;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .logo a span {
+            color: var(--accent-gold);
+        }
+
+        nav ul {
+            display: flex;
+            list-style: none;
+            gap: 28px;
+            align-items: center;
+        }
+
+        nav ul li a {
+            color: rgba(255,255,255,0.85);
+            text-decoration: none;
+            font-weight: 600;
+            transition: 0.2s;
+            font-size: 0.95rem;
+        }
+
+        nav ul li a:hover {
+            color: var(--accent-gold);
+        }
+
+        .nav-cta {
+            background: var(--accent-gold);
+            color: var(--primary-dark) !important;
+            padding: 10px 24px;
+            border-radius: 40px;
+            font-weight: 700;
+        }
+
+        .nav-cta:hover {
+            background: var(--accent-gold-hover) !important;
+        }
+
+        .menu-toggle {
+            display: none;
+            color: var(--white);
+            font-size: 1.8rem;
+            cursor: pointer;
+        }
+
+        /* HERO SEKTSIOON */
+        .hero {
+            background: linear-gradient(135deg, var(--primary-dark) 0%, #10263f 100%);
+            color: var(--white);
+            padding: 90px 0 100px;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .hero-grid {
+            display: grid;
+            grid-template-columns: 1.1fr 0.9fr;
+            gap: 50px;
+            align-items: center;
+            position: relative;
+            z-index: 2;
+        }
+
+        .hero h1 {
+            font-size: 3.5rem;
+            color: var(--white);
+            line-height: 1.15;
+            margin-bottom: 1.2rem;
+        }
+
+        .hero h1 span {
+            color: var(--accent-gold);
+        }
+
+        .hero p {
+            font-size: 1.2rem;
+            opacity: 0.9;
+            margin-bottom: 2rem;
+            max-width: 540px;
+        }
+
+        .hero-badges {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 24px;
+            margin-top: 2.5rem;
+        }
+
+        .badge-item {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            font-size: 0.95rem;
+            font-weight: 600;
+            background: rgba(255,255,255,0.06);
+            padding: 8px 16px;
+            border-radius: 30px;
+            border: 1px solid rgba(255,255,255,0.1);
+        }
+
+        .badge-item i {
+            color: var(--accent-gold);
+            font-size: 1.2rem;
+        }
+
+        .hero-card-preview {
+            background: rgba(255,255,255,0.05);
+            border-radius: var(--radius-lg);
+            padding: 30px;
+            border: 1px solid rgba(255,255,255,0.15);
+            backdrop-filter: blur(10px);
+            text-align: center;
+            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
+        }
+
+        .hero-card-preview i.main-icon {
+            font-size: 3.5rem;
+            color: var(--accent-gold);
+            margin-bottom: 15px;
+        }
+
+        /* USALDUSRIBA */
+        .trust-bar {
+            background: var(--white);
+            padding: 30px 0;
+            box-shadow: 0 4px 20px rgba(0,0,0,0.03);
+            border-bottom: 1px solid var(--gray-light);
+        }
+
+        .trust-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
+            gap: 20px;
+            text-align: center;
+        }
+
+        .trust-item .number {
+            font-size: 1.8rem;
+            font-weight: 800;
+            color: var(--primary-blue);
+            display: block;
+        }
+
+        .trust-item .label {
+            font-size: 0.85rem;
+            color: var(--gray-text);
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        /* INTERAKTIIVNE KODU KONFIGURAATOR & AI SEKTSIOON */
+        .builder-section {
+            padding: 80px 0;
+            background: #eef3f8;
+        }
+
+        .builder-card {
+            background: var(--white);
+            border-radius: 24px;
+            padding: 40px;
+            box-shadow: var(--card-shadow);
+            border: 1px solid var(--gray-light);
+        }
+
+        .tab-buttons {
+            display: flex;
+            gap: 12px;
+            margin-bottom: 30px;
+            border-bottom: 2px solid var(--gray-light);
+            padding-bottom: 12px;
+        }
+
+        .tab-btn {
+            background: transparent;
+            border: none;
+            padding: 12px 24px;
+            font-weight: 700;
+            font-size: 1rem;
+            color: var(--gray-text);
+            cursor: pointer;
+            border-radius: 30px;
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .tab-btn.active {
+            background: var(--primary-blue);
+            color: var(--white);
+        }
+
+        .tab-content {
+            display: none;
+        }
+
+        .tab-content.active {
+            display: block;
+        }
+
+        /* MUDELI FORMID & VALIKUD */
+        .form-grid-2 {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 30px;
+        }
+
+        .form-group {
+            margin-bottom: 20px;
+        }
+
+        .form-group label {
+            display: block;
+            font-weight: 700;
+            margin-bottom: 8px;
+            color: var(--primary-dark);
+            font-size: 0.95rem;
+        }
+
+        .form-control, select, textarea {
+            width: 100%;
+            padding: 12px 16px;
+            border-radius: 12px;
+            border: 1px solid #cbd5e1;
+            font-family: inherit;
+            font-size: 0.95rem;
+            background: var(--white);
+            transition: all 0.2s;
+        }
+
+        .form-control:focus, select:focus, textarea:focus {
+            outline: none;
+            border-color: var(--primary-blue);
+            box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.15);
+        }
+
+        .option-cards {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+            gap: 12px;
+        }
+
+        .option-card {
+            border: 2px solid var(--gray-light);
+            border-radius: 12px;
+            padding: 14px 10px;
+            text-align: center;
+            cursor: pointer;
+            transition: all 0.2s;
+            background: var(--white);
+        }
+
+        .option-card:hover {
+            border-color: var(--primary-blue);
+            background: #f8fafc;
+        }
+
+        .option-card.selected {
+            border-color: var(--primary-blue);
+            background: #eef6ff;
+            color: var(--primary-blue);
+            font-weight: 700;
+        }
+
+        .option-card i {
+            font-size: 1.5rem;
+            display: block;
+            margin-bottom: 6px;
+        }
+
+        /* TULEMUSTE PANEEL & KULUDE JAOTUS */
+        .results-panel {
+            background: #0b1a2e;
+            color: var(--white);
+            border-radius: 20px;
+            padding: 30px;
+            margin-top: 30px;
+        }
+
+        .results-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            border-bottom: 1px solid rgba(255,255,255,0.15);
+            padding-bottom: 20px;
+            margin-bottom: 20px;
+            flex-wrap: wrap;
+            gap: 15px;
+        }
+
+        .total-price-box {
+            text-align: right;
+        }
+
+        .total-price-box .price {
+            font-size: 2.5rem;
+            font-weight: 800;
+            color: var(--accent-gold);
+            line-height: 1;
+        }
+
+        .stage-breakdown {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+            gap: 16px;
+            margin-bottom: 25px;
+        }
+
+        .stage-card {
+            background: rgba(255,255,255,0.06);
+            border-radius: 12px;
+            padding: 16px;
+            border: 1px solid rgba(255,255,255,0.08);
+        }
+
+        .stage-card h4 {
+            color: var(--white);
+            font-size: 0.95rem;
+            margin-bottom: 6px;
+            display: flex;
+            justify-content: space-between;
+        }
+
+        .stage-card .stage-price {
+            color: var(--accent-gold);
+            font-weight: 700;
+        }
+
+        .materials-list {
+            background: rgba(255,255,255,0.04);
+            border-radius: 12px;
+            padding: 20px;
+            margin-top: 20px;
+            font-size: 0.9rem;
+        }
+
+        .materials-list ul {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 10px;
+            list-style: none;
+            margin-top: 10px;
+        }
+
+        .materials-list li {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            color: #cbd5e1;
+        }
+
+        .materials-list li i {
+            color: var(--accent-gold);
+            font-size: 0.8rem;
+        }
+
+        /* AI VISUAAL */
+        .ai-image-container {
+            width: 100%;
+            height: 320px;
+            background: rgba(255,255,255,0.05);
+            border: 2px dashed rgba(255,255,255,0.2);
+            border-radius: 16px;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+            position: relative;
+            margin-top: 20px;
+        }
+
+        .ai-image-container img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .loading-spinner {
+            display: none;
+            text-align: center;
+            color: var(--accent-gold);
+        }
+
+        .loading-spinner i {
+            font-size: 2.5rem;
+            animation: spin 1s linear infinite;
+            margin-bottom: 10px;
+        }
+
+        @keyframes spin {
+            100% { transform: rotate(360deg); }
+        }
+
+        /* TEENUSED & PROJEKTID */
+        .services {
+            padding: 80px 0;
+            background: var(--white);
+        }
+
+        .services-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+            gap: 30px;
+        }
+
+        .service-card {
+            background: var(--light-bg);
+            padding: 35px 28px;
+            border-radius: 20px;
+            transition: all 0.3s;
+            text-align: center;
+            border-bottom: 4px solid transparent;
+        }
+
+        .service-card:hover {
+            transform: translateY(-8px);
+            border-bottom-color: var(--accent-gold);
+            box-shadow: var(--card-shadow);
+            background: var(--white);
+        }
+
+        .service-card i {
+            font-size: 2.8rem;
+            color: var(--primary-blue);
+            margin-bottom: 20px;
+        }
+
+        .service-card h3 {
+            font-size: 1.3rem;
+            margin-bottom: 12px;
+        }
+
+        .service-card p {
+            color: var(--gray-text);
+            font-size: 0.95rem;
+        }
+
+        /* PROJEKTID */
+        .projects {
+            padding: 80px 0;
+            background: #f1f5f9;
+        }
+
+        .project-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 30px;
+        }
+
+        .project-card {
+            background: var(--white);
+            border-radius: 20px;
+            overflow: hidden;
+            box-shadow: var(--card-shadow);
+        }
+
+        .project-img {
+            height: 220px;
+            background: #cbd5e1;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: var(--primary-blue);
+            font-size: 3rem;
+            background-image: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
+        }
+
+        .project-info {
+            padding: 24px;
+        }
+
+        .project-info h3 {
+            font-size: 1.25rem;
+            margin-bottom: 6px;
+        }
+
+        .project-info .location {
+            font-size: 0.9rem;
+            color: var(--gray-text);
+            margin-bottom: 12px;
+        }
+
+        .tag {
+            background: var(--accent-gold-light);
+            color: var(--primary-dark);
+            padding: 4px 14px;
+            border-radius: 30px;
+            font-size: 0.8rem;
+            font-weight: 700;
+            display: inline-block;
+        }
+
+        /* MEIST */
+        .about {
+            padding: 80px 0;
+            background: var(--white);
+        }
+
+        .about-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 60px;
+            align-items: center;
+        }
+
+        .about-list {
+            list-style: none;
+            margin-top: 24px;
+        }
+
+        .about-list li {
+            margin-bottom: 14px;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            font-size: 1rem;
+        }
+
+        .about-list li i {
+            color: var(--accent-gold);
+            font-size: 1.2rem;
+        }
+
+        .about-box {
+            background: var(--light-bg);
+            border-radius: 24px;
+            padding: 40px;
+            border: 2px dashed #cbd5e1;
+            text-align: center;
+        }
+
+        .about-box i {
+            font-size: 4rem;
+            color: var(--primary-blue);
+            opacity: 0.4;
+            margin-bottom: 20px;
+        }
+
+        /* KONTAKT */
+        .contact {
+            padding: 80px 0;
+            background: var(--primary-dark);
+            color: var(--white);
+        }
+
+        .contact-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 60px;
+        }
+
+        .contact-info h2 {
+            color: var(--white);
+        }
+
+        .contact-detail {
+            display: flex;
+            align-items: center;
+            gap: 20px;
+            margin: 24px 0;
+        }
+
+        .contact-detail i {
+            font-size: 1.8rem;
+            color: var(--accent-gold);
+            width: 45px;
+            height: 45px;
+            background: rgba(255,255,255,0.06);
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .contact-form input,
+        .contact-form textarea,
+        .contact-form select {
+            width: 100%;
+            padding: 16px 20px;
+            margin-bottom: 18px;
+            border-radius: 12px;
+            background: rgba(255,255,255,0.06);
+            color: var(--white);
+            font-size: 1rem;
+            border: 1px solid rgba(255,255,255,0.1);
+        }
+
+        .contact-form input::placeholder,
+        .contact-form textarea::placeholder {
+            color: rgba(255,255,255,0.5);
+        }
+
+        .contact-form input:focus,
+        .contact-form textarea:focus {
+            outline: none;
+            background: rgba(255,255,255,0.12);
+            border-color: var(--accent-gold);
+        }
+
+        /* JALUS */
+        footer {
+            background: #060f1c;
+            color: rgba(255,255,255,0.6);
+            padding: 35px 0;
+            text-align: center;
+            font-size: 0.9rem;
+            border-top: 1px solid rgba(255,255,255,0.05);
+        }
+
+        footer a {
+            color: rgba(255,255,255,0.7);
+            text-decoration: none;
+            margin: 0 15px;
+        }
+
+        footer a:hover {
+            color: var(--accent-gold);
+        }
+
+        /* MÜÜGIRAKENDUSE KOMPONENDID */
+        .eyebrow {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            color: var(--accent-gold);
+            font-weight: 800;
+            text-transform: uppercase;
+            letter-spacing: 0.08em;
+            font-size: 0.78rem;
+            margin-bottom: 14px;
+        }
+
+        .journey {
+            background: var(--white);
+            padding: 34px 0;
+            border-bottom: 1px solid var(--gray-light);
+        }
+
+        .journey-grid {
+            display: grid;
+            grid-template-columns: repeat(5, 1fr);
+            gap: 12px;
+        }
+
+        .journey-step {
+            display: flex;
+            gap: 12px;
+            align-items: center;
+            padding: 14px;
+            border-radius: 14px;
+            background: var(--light-bg);
+            font-size: 0.86rem;
+            font-weight: 700;
+        }
+
+        .journey-step span {
+            width: 30px;
+            height: 30px;
+            border-radius: 50%;
+            flex: 0 0 30px;
+            display: grid;
+            place-items: center;
+            background: var(--primary-blue);
+            color: var(--white);
+        }
+
+        .package-selector {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 16px;
+            margin: 25px 0;
+        }
+
+        .package-option {
+            position: relative;
+            border: 2px solid var(--gray-light);
+            background: var(--white);
+            border-radius: 16px;
+            padding: 22px;
+            cursor: pointer;
+            transition: 0.2s ease;
+        }
+
+        .package-option:hover,
+        .package-option.selected {
+            border-color: var(--accent-gold);
+            box-shadow: 0 10px 24px rgba(11, 26, 46, 0.1);
+            transform: translateY(-2px);
+        }
+
+        .package-option.selected::after {
+            content: "Valitud";
+            position: absolute;
+            top: 12px;
+            right: 12px;
+            background: var(--accent-gold);
+            color: var(--primary-dark);
+            border-radius: 20px;
+            padding: 4px 10px;
+            font-size: 0.72rem;
+            font-weight: 800;
+        }
+
+        .package-option h3 { margin-bottom: 6px; }
+        .package-option p { color: var(--gray-text); font-size: 0.88rem; }
+        .package-price { color: var(--primary-blue); font-size: 1.15rem; font-weight: 800; margin-top: 12px; }
+
+        .brief-panel {
+            margin-top: 22px;
+            background: linear-gradient(135deg, #eef6ff, #fff8eb);
+            border: 1px solid #cbd5e1;
+            border-radius: 18px;
+            padding: 24px;
+        }
+
+        .brief-grid {
+            display: grid;
+            grid-template-columns: repeat(4, 1fr);
+            gap: 12px;
+            margin-top: 15px;
+        }
+
+        .brief-stat {
+            background: rgba(255,255,255,0.85);
+            border-radius: 12px;
+            padding: 14px;
+            border: 1px solid rgba(30,58,95,0.08);
+        }
+
+        .brief-stat span { display: block; color: var(--gray-text); font-size: 0.75rem; }
+        .brief-stat strong { color: var(--primary-dark); font-size: 1rem; }
+
+        .action-row {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            margin-top: 20px;
+        }
+
+        .btn-small {
+            padding: 10px 17px;
+            font-size: 0.86rem;
+        }
+
+        .catalog-toolbar {
+            display: grid;
+            grid-template-columns: 1.5fr repeat(3, 1fr);
+            gap: 12px;
+            background: var(--white);
+            border: 1px solid var(--gray-light);
+            padding: 16px;
+            border-radius: 16px;
+            margin-bottom: 24px;
+        }
+
+        .catalog-toolbar input,
+        .catalog-toolbar select {
+            margin: 0;
+            min-height: 48px;
+        }
+
+        .catalog-meta {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            gap: 15px;
+            margin-bottom: 18px;
+            color: var(--gray-text);
+            font-size: 0.9rem;
+        }
+
+        .favorite-counter {
+            border: 0;
+            background: var(--accent-gold-light);
+            color: var(--primary-dark);
+            border-radius: 30px;
+            padding: 8px 13px;
+            font-weight: 800;
+            cursor: pointer;
+        }
+
+        .project-card {
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            transition: transform 0.25s ease, box-shadow 0.25s ease;
+        }
+
+        .project-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 18px 36px rgba(11,26,46,0.14);
+        }
+
+        .project-img {
+            position: relative;
+            overflow: hidden;
+        }
+
+        .project-img::after {
+            content: "";
+            position: absolute;
+            inset: 0;
+            background: linear-gradient(to top, rgba(11,26,46,0.5), transparent 60%);
+        }
+
+        .project-img i { position: relative; z-index: 1; color: rgba(255,255,255,0.86); }
+
+        .favorite-btn {
+            position: absolute;
+            z-index: 3;
+            top: 14px;
+            right: 14px;
+            width: 42px;
+            height: 42px;
+            border: 0;
+            border-radius: 50%;
+            background: rgba(255,255,255,0.92);
+            color: var(--primary-blue);
+            cursor: pointer;
+            box-shadow: 0 4px 15px rgba(0,0,0,0.18);
+        }
+
+        .favorite-btn.active { background: var(--accent-gold); color: var(--primary-dark); }
+        .project-info { flex: 1; display: flex; flex-direction: column; }
+        .project-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: auto; padding-top: 18px; }
+        .project-specs { display: flex; flex-wrap: wrap; gap: 7px; margin: 13px 0; }
+        .project-specs span { background: var(--light-bg); padding: 5px 9px; border-radius: 8px; font-size: 0.76rem; font-weight: 700; color: var(--primary-blue); }
+
+        .empty-state {
+            grid-column: 1 / -1;
+            text-align: center;
+            padding: 50px 20px;
+            color: var(--gray-text);
+            background: var(--white);
+            border-radius: 18px;
+        }
+
+        .compare-section {
+            padding: 80px 0;
+            background: var(--white);
+        }
+
+        .compare-grid {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 20px;
+        }
+
+        .compare-card {
+            border: 1px solid var(--gray-light);
+            border-radius: 20px;
+            padding: 28px;
+            position: relative;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .compare-card.featured {
+            border: 2px solid var(--accent-gold);
+            box-shadow: var(--card-shadow);
+        }
+
+        .compare-card .ribbon {
+            position: absolute;
+            right: 16px;
+            top: 16px;
+            background: var(--accent-gold);
+            padding: 5px 10px;
+            border-radius: 20px;
+            font-size: 0.72rem;
+            font-weight: 800;
+        }
+
+        .compare-card ul { list-style: none; margin: 18px 0 25px; flex: 1; }
+        .compare-card li { margin: 10px 0; display: flex; gap: 9px; font-size: 0.9rem; }
+        .compare-card li i { color: #159957; margin-top: 4px; }
+
+        .modal {
+            position: fixed;
+            inset: 0;
+            background: rgba(6,15,28,0.76);
+            z-index: 3000;
+            display: none;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+
+        .modal.open { display: flex; }
+
+        .modal-card {
+            width: min(760px, 100%);
+            max-height: 90vh;
+            overflow: auto;
+            background: var(--white);
+            border-radius: 22px;
+            padding: 30px;
+            position: relative;
+        }
+
+        .modal-close {
+            position: absolute;
+            right: 18px;
+            top: 18px;
+            border: 0;
+            background: var(--light-bg);
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            cursor: pointer;
+        }
+
+        .modal-hero {
+            min-height: 180px;
+            border-radius: 16px;
+            margin: 18px 0;
+            display: grid;
+            place-items: center;
+            font-size: 4rem;
+            color: rgba(255,255,255,0.86);
+        }
+
+        .toast {
+            position: fixed;
+            right: 20px;
+            bottom: 20px;
+            z-index: 4000;
+            max-width: 360px;
+            background: var(--primary-dark);
+            color: var(--white);
+            padding: 15px 18px;
+            border-radius: 12px;
+            box-shadow: 0 14px 30px rgba(0,0,0,0.25);
+            transform: translateY(120px);
+            opacity: 0;
+            transition: 0.25s ease;
+        }
+
+        .toast.show { transform: translateY(0); opacity: 1; }
+
+        .consent {
+            display: flex;
+            gap: 10px;
+            align-items: flex-start;
+            color: rgba(255,255,255,0.72);
+            font-size: 0.82rem;
+            margin: -3px 0 18px;
+        }
+
+        .consent input { width: auto; margin: 4px 0 0; }
+        .form-status { display: none; padding: 13px; border-radius: 10px; margin-bottom: 15px; font-size: 0.9rem; }
+        .form-status.success { display: block; background: rgba(21,153,87,0.18); border: 1px solid rgba(21,153,87,0.5); }
+
+        .sticky-project-bar {
+            position: fixed;
+            left: 50%;
+            bottom: 16px;
+            transform: translateX(-50%);
+            z-index: 1200;
+            width: min(720px, calc(100% - 24px));
+            background: rgba(11,26,46,0.96);
+            color: var(--white);
+            border: 1px solid rgba(255,255,255,0.12);
+            border-radius: 18px;
+            padding: 12px 16px;
+            display: none;
+            justify-content: space-between;
+            align-items: center;
+            gap: 12px;
+            box-shadow: 0 14px 34px rgba(0,0,0,0.28);
+            backdrop-filter: blur(12px);
+        }
+
+        .sticky-project-bar.show { display: flex; }
+        .sticky-project-bar small { display: block; opacity: 0.68; }
+
+        /* RESPONSIIVSUS */
+        @media (max-width: 992px) {
+            .hero-grid, .about-grid, .contact-grid, .form-grid-2 {
+                grid-template-columns: 1fr;
+            }
+            .hero { text-align: center; }
+            .hero p { margin-left: auto; margin-right: auto; }
+            .hero-badges { justify-content: center; }
+            .hero h1 { font-size: 2.8rem; }
+            .journey-grid { grid-template-columns: repeat(3, 1fr); }
+            .package-selector, .compare-grid { grid-template-columns: 1fr; }
+            .brief-grid { grid-template-columns: repeat(2, 1fr); }
+            .catalog-toolbar { grid-template-columns: 1fr 1fr; }
+        }
+
+        @media (max-width: 768px) {
+            nav ul {
+                display: none;
+                flex-direction: column;
+                position: absolute;
+                top: 100%;
+                left: 0;
+                width: 100%;
+                background: var(--primary-dark);
+                padding: 25px 0;
+                box-shadow: 0 10px 20px rgba(0,0,0,0.3);
+            }
+            nav ul.open { display: flex; }
+            .menu-toggle { display: block; }
+            .builder-card { padding: 20px; }
+            .hero h1 { font-size: 2.2rem; }
+            .total-price-box { text-align: left; margin-top: 10px; }
+            .journey-grid, .catalog-toolbar, .brief-grid { grid-template-columns: 1fr; }
+            .project-actions { grid-template-columns: 1fr; }
+            .sticky-project-bar { align-items: stretch; }
+        }
+
+        @media print {
+            header, .hero, .trust-bar, .journey, .services, .projects, .about, .contact, footer,
+            .tab-buttons, .package-selector, .action-row, .sticky-project-bar, .toast, .ai-image-container { display: none !important; }
+            body, .builder-section { background: #fff; }
+            .builder-section { padding: 0; }
+            .builder-card { box-shadow: none; border: 0; padding: 0; }
+            .results-panel { color: #111; background: #fff; border: 1px solid #ddd; }
+            .results-panel h3, .results-panel h4, .results-panel strong { color: #111 !important; }
+            .stage-card, .materials-list { border: 1px solid #ddd; background: #fff; color: #111; }
+            .stage-card p, .materials-list li { color: #333; }
+        }
+    </style>
+</head>
+<body>
+
+    <!-- ====== HEADER ====== -->
+    <header>
+        <div class="container header-flex">
+            <div class="logo">
+                <a href="#"><i class="fas fa-hard-hat" style="color: var(--accent-gold);"></i> MTM <span>Ehitus</span> OÜ</a>
+            </div>
+            <div class="menu-toggle" id="menuToggle">
+                <i class="fas fa-bars"></i>
+            </div>
+            <nav>
+                <ul id="navMenu">
+                    <li><a href="#kalkulaator">Lahenduse planeerija</a></li>
+                    <li><a href="#paketid">Paketid</a></li>
+                    <li><a href="#teenused">Mida saab tellida?</a></li>
+                    <li><a href="#projektid">Valitud disainid</a></li>
+                    <li><a href="#meist">Meist</a></li>
+                    <li><a href="#kontakt" class="nav-cta">Küsi pakkumist</a></li>
+                </ul>
+            </nav>
+        </div>
+    </header>
+
+    <!-- ====== HERO ====== -->
+    <section class="hero">
+        <div class="container hero-grid">
+            <div>
+                <h1>Ideest <span>3D disainini</span>, projektist <span>valmis lahenduseni</span></h1>
+                <p>MTM Ehitus OÜ loob ja müüb läbimõeldud 3D-disainilahendusi, ehitusprojekte ning terviklikke võtmed-kätte lahendusi. Vali olemasolev kontseptsioon või telli täiesti personaalne projekt.</p>
+                <div style="display: flex; gap: 15px; flex-wrap: wrap;">
+                    <a href="#projektid" class="btn btn-primary"><i class="fas fa-cubes"></i> Vaata valitud disaine</a>
+                    <a href="#kalkulaator" class="btn btn-outline"><i class="fas fa-drafting-compass"></i> Koosta oma lähteülesanne</a>
+                </div>
+                <div class="hero-badges">
+                    <div class="badge-item"><i class="fas fa-award"></i> 5+ aastat kogemust</div>
+                    <div class="badge-item"><i class="fas fa-building"></i> 100+ edukat objekti</div>
+                    <div class="badge-item"><i class="fas fa-shield-alt"></i> Usaldusväärne partner</div>
+                </div>
+            </div>
+            <div class="hero-card-preview">
+                <i class="fas fa-home main-icon"></i>
+                <h3>Vali täpselt selline lahendus, nagu vajad</h3>
+                <p style="font-size: 0.95rem; opacity: 0.8; margin-top: 10px;">Osta 3D-disain, telli selle põhjal terviklik ehitusprojekt või anna kogu teostus meie juhtida.</p>
+            </div>
+        </div>
+    </section>
+
+    <!-- ====== USALDUSRIBA ====== -->
+    <section class="trust-bar">
+        <div class="container trust-grid">
+            <div class="trust-item">
+                <span class="number">16263144</span>
+                <span class="label">Registrikood</span>
+            </div>
+            <div class="trust-item">
+                <span class="number">2021</span>
+                <span class="label">Asutatud</span>
+            </div>
+            <div class="trust-item">
+                <span class="number">EE102412910</span>
+                <span class="label">KMKR number</span>
+            </div>
+            <div class="trust-item">
+                <span class="number">0 €</span>
+                <span class="label">Maksuvõlg</span>
+            </div>
+            <div class="trust-item">
+                <span class="number">Tallinn</span>
+                <span class="label">Rävala pst 8</span>
+            </div>
+        </div>
+    </section>
+
+    <!-- ====== KLIENDITEEKOND ====== -->
+    <section class="journey" aria-label="Projekti tellimise etapid">
+        <div class="container journey-grid">
+            <div class="journey-step"><span>1</span> Vali näidis või oma idee</div>
+            <div class="journey-step"><span>2</span> Kohanda lähteandmed</div>
+            <div class="journey-step"><span>3</span> Võrdle teenusepakette</div>
+            <div class="journey-step"><span>4</span> Saa eelarve ja ajakava</div>
+            <div class="journey-step"><span>5</span> Saada valmis lähteülesanne</div>
+        </div>
+    </section>
+
+    <!-- ====== PROJEKTI AI-PLANEERIJA & EELARVEKALKULAATOR ====== -->
+    <section class="builder-section" id="kalkulaator">
+        <div class="container">
+            <div class="section-title">
+                <span class="eyebrow"><i class="fas fa-wand-magic-sparkles"></i> Toimiv projektiplaneerija</span>
+                <h2>Koosta lähteülesanne, eelarve ja ajakava</h2>
+                <p style="color: var(--gray-text); max-width: 720px; margin: 10px auto 0;">Vali disain, teenusemaht ja tehnilised lähteandmed. Planeerija koostab kohe jagatava projektikokkuvõtte ning realistliku hinnavahemiku.</p>
+                <span></span>
+            </div>
+
+            <div class="builder-card">
+                <!-- TAB NUPUD -->
+                <div class="tab-buttons">
+                    <button class="tab-btn active" onclick="switchTab('customizer')"><i class="fas fa-sliders-h"></i> 1. Lahenduse lähteandmed</button>
+                    <button class="tab-btn" onclick="switchTab('ai-prompt')"><i class="fas fa-magic"></i> 2. Kirjelda oma ideed</button>
+                </div>
+
+                <h3>Vali tellitav lahendus</h3>
+                <div class="package-selector" id="package-selector">
+                    <div class="package-option" data-package="concept" onclick="selectPackage('concept', this)">
+                        <i class="fas fa-cube" style="color: var(--primary-blue); font-size: 1.7rem;"></i>
+                        <h3>3D-kontseptsioon</h3>
+                        <p>Välisilme, mahud, materjalid ja esitlusvisuaalid.</p>
+                        <div class="package-price">alates 1 450 €</div>
+                    </div>
+                    <div class="package-option selected" data-package="project" onclick="selectPackage('project', this)">
+                        <i class="fas fa-drafting-compass" style="color: var(--primary-blue); font-size: 1.7rem;"></i>
+                        <h3>Ehitusprojekt</h3>
+                        <p>3D-kontseptsioon, joonised ja tehnilised põhilahendused.</p>
+                        <div class="package-price">alates 4 900 €</div>
+                    </div>
+                    <div class="package-option" data-package="turnkey" onclick="selectPackage('turnkey', this)">
+                        <i class="fas fa-key" style="color: var(--primary-blue); font-size: 1.7rem;"></i>
+                        <h3>Täislahendus</h3>
+                        <p>Disain, projekt, juhtimine ja valmis teostus.</p>
+                        <div class="package-price">personaalne eelarve</div>
+                    </div>
+                </div>
+
+                <!-- TAHVEL 1: PARAMEETRITE PÕHJAL KONFIGURAATOR -->
+                <div id="tab-customizer" class="tab-content active">
+                    <div class="form-grid-2">
+                        <div>
+                            <div class="form-group">
+                                <label><i class="fas fa-map-location-dot"></i> Projekti asukoht / piirkond</label>
+                                <select id="project-region" onchange="updateCalculator()">
+                                    <option value="harju">Harjumaa / Tallinn</option>
+                                    <option value="tartu">Tartumaa</option>
+                                    <option value="parnu">Pärnumaa</option>
+                                    <option value="rapla">Raplamaa</option>
+                                    <option value="other">Muu Eesti piirkond</option>
+                                </select>
+                            </div>
+
+                            <div class="form-group">
+                                <label><i class="fas fa-building-user"></i> Hoone kasutusotstarve</label>
+                                <select id="building-use" onchange="updateCalculator()">
+                                    <option value="home">Eramu</option>
+                                    <option value="summer">Suvila / puhkemaja</option>
+                                    <option value="office">Äri- või büroohoone</option>
+                                    <option value="outbuilding">Abihoone / stuudio</option>
+                                </select>
+                            </div>
+
+                            <div class="form-group">
+                                <label><i class="fas fa-ruler-combined"></i> Kavandatava hoone üldpindala: <span id="area-val" style="color: var(--primary-blue); font-weight: 800;">120</span> m²</label>
+                                <input type="range" id="house-area" min="40" max="350" value="120" step="5" class="form-control" oninput="updateCalculator()">
+                            </div>
+
+                            <div class="form-group">
+                                <label><i class="fas fa-layer-group"></i> Korruste arv</label>
+                                <div class="option-cards" id="floors-options">
+                                    <div class="option-card selected" onclick="selectOption('floors', 1, this)"><i class="fas fa-align-justify"></i> 1 Korrus</div>
+                                    <div class="option-card" onclick="selectOption('floors', 1.5, this)"><i class="fas fa-cubes"></i> 1.5 Korrust (katusekorrus)</div>
+                                    <div class="option-card" onclick="selectOption('floors', 2, this)"><i class="fas fa-building"></i> 2 Täiskorrust</div>
+                                </div>
+                            </div>
+
+                            <div class="form-group">
+                                <label><i class="fas fa-cubes"></i> Vundamendi tüüp</label>
+                                <select id="foundation-type" onchange="updateCalculator()">
+                                    <option value="plate">Plaatvundament (Parim energiatõhusus & põrandaküte)</option>
+                                    <option value="strip">Lintvundament (Klassikaline ja tugev)</option>
+                                    <option value="pile">Vaiavundament (Nõudlikumale pinnasele)</option>
+                                </select>
+                            </div>
+
+                            <div class="form-group">
+                                <label><i class="fas fa-border-all"></i> Seinte konstruktsioon</label>
+                                <select id="wall-type" onchange="updateCalculator()">
+                                    <option value="block">Kergplokk (Bauroc / Leca) + krohv/vooder</option>
+                                    <option value="wood">Puitkarkass / Elementmaja (Kiire paigaldus)</option>
+                                    <option value="clt">CLT Ristkihtpuit (Ökoloogiline & eksklusiivne)</option>
+                                </select>
+                            </div>
+                        </div>
+
+                        <div>
+                            <div class="form-group">
+                                <label><i class="fas fa-home"></i> Katuse tüüp ja kattematerjal</label>
+                                <select id="roof-type" onchange="updateCalculator()">
+                                    <option value="gable-tin">Viilkatus - Profiilplekk</option>
+                                    <option value="gable-tile">Viilkatus - Betoon/Keraamiline kivi</option>
+                                    <option value="flat">Lamekatus - SBS rullmaterjal</option>
+                                </select>
+                            </div>
+
+                            <div class="form-group">
+                                <label><i class="fas fa-fire"></i> Küttesüsteem ja energiaklass</label>
+                                <select id="heating-type" onchange="updateCalculator()">
+                                    <option value="geo">Maaküte + Soojustagastusega ventilatsioon (A-klass)</option>
+                                    <option value="air-water">Õhk-vesi soojuspump + Ventilatsioon (A-klass)</option>
+                                    <option value="air-air">Õhksoojuspump + Elektripõrandaküte (B-klass)</option>
+                                </select>
+                            </div>
+
+                            <div class="form-group">
+                                <label><i class="fas fa-paint-roller"></i> Viimistlusaste</label>
+                                <div class="option-cards" id="finish-options">
+                                    <div class="option-card" onclick="selectOption('finish', 'shell', this)"><i class="fas fa-square"></i> Kinnine karp</div>
+                                    <div class="option-card" onclick="selectOption('finish', 'white', this)"><i class="fas fa-brush"></i> Valge karp</div>
+                                    <div class="option-card selected" onclick="selectOption('finish', 'turnkey', this)"><i class="fas fa-key"></i> Võtmed kätte</div>
+                                </div>
+                            </div>
+
+                            <button class="btn btn-secondary" style="width: 100%; margin-top: 10px;" onclick="saveDraft()">
+                                <i class="fas fa-floppy-disk"></i> Salvesta projekt mustandina
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- TAHVEL 2: AI KIRJELDUS JA PILDI ANALÜÜS -->
+                <div id="tab-ai-prompt" class="tab-content">
+                    <div class="form-group">
+                        <label><i class="fas fa-comment-dots"></i> Kirjelda soovitud disaini, ruumiprogrammi ja kasutusotstarvet:</label>
+                        <textarea id="ai-description" rows="4" placeholder="Nt. Soovin 140 m² modernset ühekorruselist hoonet. Avatud eluruum, 3 magamistuba, maaküte, puitfassaad tumedate detailidega. Esmalt vajan 3D-disaini ja seejärel ehitusprojekti..."></textarea>
+                    </div>
+
+                    <div class="form-group">
+                        <label><i class="fas fa-camera"></i> Või laadi üles krundifoto / inspiratsioonipilt (Valikuline):</label>
+                        <input type="file" id="ai-image-upload" accept="image/*" class="form-control">
+                    </div>
+
+                    <button class="btn btn-primary" onclick="analyzeProjectIdea()"><i class="fas fa-list-check"></i> Analüüsi ideed ja koosta projektisuund</button>
+                    
+                    <div id="ai-analysis-result" style="display: none; margin-top: 20px; padding: 20px; background: var(--light-bg); border-radius: 12px; border-left: 4px solid var(--primary-blue);">
+                        <h4><i class="fas fa-clipboard-check"></i> Projektianalüüs ja soovitused:</h4>
+                        <p id="ai-text-output" style="margin-top: 10px; color: var(--gray-text); font-size: 0.95rem;"></p>
+                    </div>
+                </div>
+
+                <!-- AUTOMAATNE PROJEKTIKAART -->
+                <div class="brief-panel" id="project-brief">
+                    <h3><i class="fas fa-file-signature"></i> Sinu projekti hetkeseis</h3>
+                    <p id="brief-title" style="color: var(--gray-text);">Uus 120 m² eramu – ehitusprojekti pakett</p>
+                    <div class="brief-grid">
+                        <div class="brief-stat"><span>Valitud lahendus</span><strong id="brief-package">Ehitusprojekt</strong></div>
+                        <div class="brief-stat"><span>Hinnavahemik</span><strong id="brief-range">4 900–7 900 €</strong></div>
+                        <div class="brief-stat"><span>Eeldatav kestus</span><strong id="brief-duration">8–14 nädalat</strong></div>
+                        <div class="brief-stat"><span>Valmidusaste</span><strong id="brief-readiness">60%</strong></div>
+                    </div>
+                    <div class="action-row">
+                        <button class="btn btn-secondary btn-small" onclick="downloadBrief()"><i class="fas fa-download"></i> Laadi lähteülesanne</button>
+                        <button class="btn btn-secondary btn-small" onclick="window.print()"><i class="fas fa-print"></i> Prindi / salvesta PDF</button>
+                        <button class="btn btn-secondary btn-small" onclick="copyBrief()"><i class="fas fa-copy"></i> Kopeeri kokkuvõte</button>
+                    </div>
+                </div>
+
+                <!-- TULEMUSTE JA KULUDE DYNAMILINE PANEEL -->
+                <div class="results-panel">
+                    <div class="results-header">
+                        <div>
+                            <h3>Täislahenduse esialgne teostuseelarve</h3>
+                            <p style="opacity: 0.8; font-size: 0.9rem;">Hinnanguline projekteerimise ja ehituse lähte-eelarve valitud parameetrite põhjal. See ei ole kinnisvara müügihind ega siduv pakkumine.</p>
+                        </div>
+                        <div class="total-price-box">
+                            <span style="font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; opacity: 0.8;">Täislahenduse lähte-eelarve:</span>
+                            <div class="price" id="total-price">180,000 €</div>
+                            <span style="font-size: 0.8rem; color: #cbd5e1;" id="price-per-m2">~1500 € / m²</span>
+                        </div>
+                    </div>
+
+                    <h4 style="color: var(--accent-gold); margin-bottom: 15px;"><i class="fas fa-list-ol"></i> Paketi etapid ja eelarvejaotus:</h4>
+                    <div class="stage-breakdown">
+                        <div class="stage-card">
+                            <h4><span id="stage-label-1">1. Lähteülesanne</span> <span class="stage-price" id="cost-foundation">980 €</span></h4>
+                            <p id="stage-desc-1" style="font-size: 0.8rem; opacity: 0.7;">Vajadused, krundiinfo, ruumiprogramm ja eesmärgid.</p>
+                        </div>
+                        <div class="stage-card">
+                            <h4><span id="stage-label-2">2. Kontseptsioon</span> <span class="stage-price" id="cost-walls">1 960 €</span></h4>
+                            <p id="stage-desc-2" style="font-size: 0.8rem; opacity: 0.7;">Mahud, plaaniloogika, välisilme ja materjalid.</p>
+                        </div>
+                        <div class="stage-card">
+                            <h4><span id="stage-label-3">3. Põhijoonised</span> <span class="stage-price" id="cost-roof">1 470 €</span></h4>
+                            <p id="stage-desc-3" style="font-size: 0.8rem; opacity: 0.7;">Plaanid, vaated, lõiked ja põhikonstruktsioonid.</p>
+                        </div>
+                        <div class="stage-card">
+                            <h4><span id="stage-label-4">4. Tehniline kooskõla</span> <span class="stage-price" id="cost-utility">980 €</span></h4>
+                            <p id="stage-desc-4" style="font-size: 0.8rem; opacity: 0.7;">Konstruktsioonide ja tehnosüsteemide lähteinfo.</p>
+                        </div>
+                        <div class="stage-card">
+                            <h4><span id="stage-label-5">5. Üleandmine</span> <span class="stage-price" id="cost-finish">490 €</span></h4>
+                            <p id="stage-desc-5" style="font-size: 0.8rem; opacity: 0.7;">Failipakett, konsultatsioon ja järgmiste sammude plaan.</p>
+                        </div>
+                    </div>
+
+                    <!-- VALITUD PAKETI PÕHISISU -->
+                    <div class="materials-list">
+                        <h4 style="color: var(--white);"><i class="fas fa-boxes"></i> Valitud paketi põhisisu:</h4>
+                        <ul>
+                            <li><i class="fas fa-check"></i> <strong id="deliverable-1" style="color:var(--white);">Lähteülesanne ja ruumiprogramm</strong></li>
+                            <li><i class="fas fa-check"></i> <strong id="deliverable-2" style="color:var(--white);">3D-kontseptsioon ja materjalid</strong></li>
+                            <li><i class="fas fa-check"></i> <strong id="deliverable-3" style="color:var(--white);">Plaanid, vaated ja lõiked</strong></li>
+                            <li><i class="fas fa-check"></i> <strong id="deliverable-4" style="color:var(--white);">Failipakett ja konsultatsioon</strong></li>
+                        </ul>
+                    </div>
+
+                    <div class="action-row" style="justify-content: flex-end;">
+                        <button class="btn btn-secondary" onclick="shareByEmail()"><i class="fas fa-envelope"></i> Saada e-postiga</button>
+                        <button class="btn btn-secondary" onclick="shareByWhatsApp()"><i class="fab fa-whatsapp"></i> WhatsApp</button>
+                        <button class="btn btn-primary" onclick="sendProjectToForm()">
+                            <i class="fas fa-paper-plane"></i> Küsi selle lahenduse personaalset pakkumist
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- ====== PAKETTIDE VÕRDLUS ====== -->
+    <section class="compare-section" id="paketid">
+        <div class="container">
+            <div class="section-title">
+                <span class="eyebrow"><i class="fas fa-scale-balanced"></i> Läbipaistev teenusemaht</span>
+                <h2>Kolm võimalust projektiga edasi minna</h2>
+                <p style="color: var(--gray-text);">Alustada saab ainult visuaalsest kontseptsioonist ja liikuda hiljem sama lähteinfo põhjal järgmisse etappi.</p>
+                <span></span>
+            </div>
+            <div class="compare-grid">
+                <article class="compare-card">
+                    <h3>3D-kontseptsioon</h3>
+                    <p class="package-price">1 450–2 900 €</p>
+                    <p style="color: var(--gray-text);">Sobib idee, mahu ja välisilme kinnitamiseks.</p>
+                    <ul>
+                        <li><i class="fas fa-check-circle"></i> Lähteülesande töötuba</li>
+                        <li><i class="fas fa-check-circle"></i> 2 ruumilise lahenduse suunda</li>
+                        <li><i class="fas fa-check-circle"></i> 4 esitlusvisualiseeringut</li>
+                        <li><i class="fas fa-check-circle"></i> 2 parandusringi</li>
+                        <li><i class="fas fa-check-circle"></i> Materjali- ja värvikaart</li>
+                    </ul>
+                    <button class="btn btn-secondary" onclick="choosePackageAndScroll('concept')">Vali 3D-disain</button>
+                </article>
+                <article class="compare-card featured">
+                    <span class="ribbon">Enim valitud</span>
+                    <h3>Ehitusprojekt</h3>
+                    <p class="package-price">4 900–11 900 €</p>
+                    <p style="color: var(--gray-text);">Sobib ehitusloa ja hinnapakkumiste ettevalmistamiseks.</p>
+                    <ul>
+                        <li><i class="fas fa-check-circle"></i> Kõik 3D-kontseptsiooni osad</li>
+                        <li><i class="fas fa-check-circle"></i> Plaanid, vaated ja lõiked</li>
+                        <li><i class="fas fa-check-circle"></i> Põhikonstruktsioonide lahendus</li>
+                        <li><i class="fas fa-check-circle"></i> Tehnosüsteemide lähteinfo</li>
+                        <li><i class="fas fa-check-circle"></i> Projekti eelarve lähteandmed</li>
+                    </ul>
+                    <button class="btn btn-primary" onclick="choosePackageAndScroll('project')">Vali ehitusprojekt</button>
+                </article>
+                <article class="compare-card">
+                    <h3>Täislahendus</h3>
+                    <p class="package-price">alates 1 550 €/m²</p>
+                    <p style="color: var(--gray-text);">Sobib kliendile, kes soovib üht vastutavat partnerit.</p>
+                    <ul>
+                        <li><i class="fas fa-check-circle"></i> Disain ja ehitusprojekt</li>
+                        <li><i class="fas fa-check-circle"></i> Detailne kalkulatsioon</li>
+                        <li><i class="fas fa-check-circle"></i> Hanked ja partnerite juhtimine</li>
+                        <li><i class="fas fa-check-circle"></i> Ehituse teostus ja kvaliteedikontroll</li>
+                        <li><i class="fas fa-check-circle"></i> Üleandmisdokumentatsioon</li>
+                    </ul>
+                    <button class="btn btn-secondary" onclick="choosePackageAndScroll('turnkey')">Vali täislahendus</button>
+                </article>
+            </div>
+            <p style="text-align: center; color: var(--gray-text); margin-top: 20px; font-size: 0.82rem;">Hinnad on esialgsed vahemikud. Lõplik hind sõltub mahust, asukohast, lähteandmete valmidusest ja eriosade vajadusest.</p>
+        </div>
+    </section>
+
+    <!-- ====== TEENUSED ====== -->
+    <section class="services" id="teenused">
+        <div class="container">
+            <div class="section-title">
+                <h2>Vali sobiv koostöömaht</h2>
+                <p style="color: var(--gray-text);">Alusta ideest või vali terviklahendus – iga etappi saab tellida eraldi</p>
+                <span></span>
+            </div>
+            <div class="services-grid">
+                <div class="service-card">
+                    <i class="fas fa-cube"></i>
+                    <h3>3D-disain ja kontseptsioon</h3>
+                    <p>Hoone välisilme, mahu, materjalide ja ruumilise idee professionaalne visualiseerimine enne projekteerimist.</p>
+                </div>
+                <div class="service-card">
+                    <i class="fas fa-drafting-compass"></i>
+                    <h3>Ehitusprojekt</h3>
+                    <p>Valitud 3D-kontseptsiooni arendamine tehniliseks projektiks koos vajalike jooniste ja lahendustega.</p>
+                </div>
+                <div class="service-card">
+                    <i class="fas fa-key"></i>
+                    <h3>Võtmed-kätte täislahendus</h3>
+                    <p>Disain, projekteerimine, eelarvestamine, ehitusjuhtimine ja teostus ühe vastutava partneri kaudu.</p>
+                </div>
+                <div class="service-card">
+                    <i class="fas fa-pencil-ruler"></i>
+                    <h3>Personaalne erilahendus</h3>
+                    <p>Individuaalne arhitektuurne kontseptsioon kliendi krundi, vajaduste, stiili ja eelarve järgi.</p>
+                </div>
+                <div class="service-card">
+                    <i class="fas fa-sync-alt"></i>
+                    <h3>Olemasoleva disaini kohandamine</h3>
+                    <p>Klientide poolt valitud lahenduste kohandamine uuele krundile, ruumiprogrammile või viimistlusstiilile.</p>
+                </div>
+                <div class="service-card">
+                    <i class="fas fa-tasks"></i>
+                    <h3>Projekti- ja ehitusjuhtimine</h3>
+                    <p>Partnerite koordineerimine, ajakava, eelarve ja kvaliteedi juhtimine ideest valmimiseni.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- ====== PROJEKTID ====== -->
+    <section class="projects" id="projektid">
+        <div class="container">
+            <div class="section-title">
+                <h2>Klientide valitud 3D-disainid ja lahendused</h2>
+                <p style="color: var(--gray-text);">Filtreeri näidiseid, ava detailvaade, salvesta lemmikud ja kasuta sobivat lahendust oma projekti lähtepunktina.</p>
+                <span></span>
+            </div>
+            <div class="catalog-toolbar">
+                <input type="search" id="catalog-search" placeholder="Otsi nime, stiili või materjali..." oninput="renderProjects()">
+                <select id="catalog-type" onchange="renderProjects()">
+                    <option value="all">Kõik hoonetüübid</option>
+                    <option value="home">Eramud</option>
+                    <option value="summer">Puhkemajad</option>
+                    <option value="office">Ärihooned</option>
+                    <option value="outbuilding">Abihooned</option>
+                </select>
+                <select id="catalog-area" onchange="renderProjects()">
+                    <option value="all">Kõik suurused</option>
+                    <option value="small">Kuni 100 m²</option>
+                    <option value="medium">101–160 m²</option>
+                    <option value="large">Üle 160 m²</option>
+                </select>
+                <select id="catalog-sort" onchange="renderProjects()">
+                    <option value="featured">Soovitatud enne</option>
+                    <option value="area-asc">Pindala: väiksem enne</option>
+                    <option value="area-desc">Pindala: suurem enne</option>
+                    <option value="price-asc">Disainihind: väiksem enne</option>
+                </select>
+            </div>
+            <div class="catalog-meta">
+                <span id="catalog-count">6 lahendust</span>
+                <button class="favorite-counter" onclick="toggleFavoritesOnly()"><i class="fas fa-heart"></i> Lemmikud <span id="favorite-count">0</span></button>
+            </div>
+            <div class="project-grid" id="project-grid"></div>
+        </div>
+    </section>
+
+    <!-- ====== MEIST ====== -->
+    <section class="about" id="meist">
+        <div class="container about-grid">
+            <div>
+                <h2>MTM Ehitus OÜ – üks partner kogu projektile</h2>
+                <p style="color: var(--gray-text); margin-top: 12px;">Oleme Eesti projekteerimis- ja ehituspartner, kes ühendab 3D-disaini, tehnilise projekti ning teostuse üheks selgeks tervikuks. Klient võib tellida ühe etapi või kogu lahenduse ideest valmimiseni.</p>
+                
+                <ul class="about-list">
+                    <li><i class="fas fa-check-circle"></i> <strong>Äriregistri kood:</strong> 16263144</li>
+                    <li><i class="fas fa-check-circle"></i> <strong>KMKR:</strong> EE102412910</li>
+                    <li><i class="fas fa-check-circle"></i> <strong>Asukoht:</strong> Rävala pst 8, Tallinn</li>
+                    <li><i class="fas fa-check-circle"></i> <strong>Juhatuse liikmed:</strong> Marek Telpt ja Külli Kuusaru</li>
+                    <li><i class="fas fa-check-circle"></i> <strong>Maksuvõlad:</strong> Puuduvad – puhas ajalugu</li>
+                </ul>
+            </div>
+            <div class="about-box">
+                <i class="fas fa-users-cog"></i>
+                <h3>Pühendunud meeskond</h3>
+                <p style="color: var(--gray-text); margin-top: 10px;">Iga projekt algab läbimõeldud ideest ning liigub kontrollitult disaini, tehnilise lahenduse ja kvaliteetse teostuseni.</p>
+            </div>
+        </div>
+    </section>
+
+    <!-- ====== KONTAKT ====== -->
+    <section class="contact" id="kontakt">
+        <div class="container contact-grid">
+            <div class="contact-info">
+                <h2>Võta meiega ühendust</h2>
+                <p style="opacity: 0.8; margin-top: 10px;">Kirjelda, kas vajad 3D-disaini, ehitusprojekti või täislahendust. Koostame sinu soovile vastava personaalse pakkumise.</p>
+                
+                <div class="contact-detail">
+                    <i class="fas fa-phone-alt"></i>
+                    <div>
+                        <strong>Telefon:</strong><br>
+                        +372 507 1042
+                    </div>
+                </div>
+
+                <div class="contact-detail">
+                    <i class="fas fa-envelope"></i>
+                    <div>
+                        <strong>E-post:</strong><br>
+                        info@mtmehitus.ee
+                    </div>
+                </div>
+
+                <div class="contact-detail">
+                    <i class="fas fa-map-marker-alt"></i>
+                    <div>
+                        <strong>Aadress:</strong><br>
+                        Rävala pst 8, 10143 Tallinn
+                    </div>
+                </div>
+            </div>
+
+            <div class="contact-form">
+                <form id="quote-form" onsubmit="handleFormSubmit(event)">
+                    <div id="form-status" class="form-status" role="status"></div>
+                    <input type="text" id="form-name" placeholder="Teie Nimi *" required>
+                    <input type="email" id="form-email" placeholder="Teie E-post *" required>
+                    <input type="tel" id="form-phone" placeholder="Telefoninumber">
+                    <select id="form-package" required>
+                        <option value="">Vali soovitud teenus *</option>
+                        <option value="3D-kontseptsioon">3D-kontseptsioon</option>
+                        <option value="Ehitusprojekt">Ehitusprojekt</option>
+                        <option value="Täislahendus">Täislahendus</option>
+                        <option value="Konsultatsioon">Vajan esmalt konsultatsiooni</option>
+                    </select>
+                    <textarea id="form-message" rows="5" placeholder="Kirjelda soovitud disaini, projekti või täislahendust..." required></textarea>
+                    <input type="text" id="form-company" tabindex="-1" autocomplete="off" style="position:absolute; left:-9999px;" aria-hidden="true">
+                    <label class="consent">
+                        <input type="checkbox" id="form-consent" required>
+                        <span>Nõustun, et MTM Ehitus OÜ kasutab sisestatud andmeid sellele päringule vastamiseks. Andmeid ei kasutata automaatselt turunduseks.</span>
+                    </label>
+                    <button type="submit" class="btn btn-primary" style="width: 100%;"><i class="fas fa-paper-plane"></i> Küsi personaalset pakkumist</button>
+                </form>
+            </div>
+        </div>
+    </section>
+
+    <!-- ====== PROJEKTI DETAILVAADE ====== -->
+    <div class="modal" id="project-modal" role="dialog" aria-modal="true" aria-labelledby="modal-title" onclick="closeModalFromBackdrop(event)">
+        <div class="modal-card">
+            <button class="modal-close" onclick="closeProjectModal()" aria-label="Sulge"><i class="fas fa-times"></i></button>
+            <span class="tag" id="modal-tag">3D-disain</span>
+            <h2 id="modal-title" style="margin-top: 10px;">Projekti nimi</h2>
+            <div class="modal-hero" id="modal-hero"><i class="fas fa-house"></i></div>
+            <p id="modal-description" style="color: var(--gray-text);"></p>
+            <div class="project-specs" id="modal-specs"></div>
+            <h3 style="margin-top: 20px;">Mida saab kohandada?</h3>
+            <p id="modal-customize" style="color: var(--gray-text); margin-top: 8px;"></p>
+            <div class="action-row">
+                <button class="btn btn-primary" id="modal-use-btn"><i class="fas fa-sliders-h"></i> Kasuta lähtepunktina</button>
+                <button class="btn btn-secondary" id="modal-quote-btn"><i class="fas fa-paper-plane"></i> Küsi pakkumist</button>
+            </div>
+        </div>
+    </div>
+
+    <div class="toast" id="toast" role="status" aria-live="polite"></div>
+
+    <div class="sticky-project-bar" id="sticky-project-bar">
+        <div>
+            <small>Valitud lähteprojekt</small>
+            <strong id="sticky-project-name">Projekt</strong>
+        </div>
+        <button class="btn btn-primary btn-small" onclick="document.querySelector('#kalkulaator').scrollIntoView({behavior:'smooth'})">Jätka planeerimist</button>
+    </div>
+
+    <!-- ====== JALUS ====== -->
+    <footer>
+        <div class="container">
+            <div style="margin-bottom: 15px;">
+                <a href="#kalkulaator">Lahenduse planeerija</a>
+                <a href="#teenused">Koostöövõimalused</a>
+                <a href="#projektid">Valitud disainid</a>
+                <a href="#meist">Meist</a>
+                <a href="#kontakt">Kontakt</a>
+            </div>
+            <p>&copy; 2026 MTM Ehitus OÜ (Reg. 16263144) – Kõik õigused kaitstud.</p>
+        </div>
+    </footer>
+
+    <!-- LOGIKA JA CALCULATOR JS -->
+    <script type="application/legacy-disabled">
+        // GEMINI API SEADISTUS
+        const apiKey = ""; // API võti käitusaegsest keskkonnast
+
+        // MOBIILI MENÜÜ
+        const menuToggle = document.getElementById('menuToggle');
+        const navMenu = document.getElementById('navMenu');
+        menuToggle.addEventListener('click', () => {
+            navMenu.classList.toggle('open');
+        });
+
+        // KONFIGURAATORI OLEK (STATE)
+        let configState = {
+            area: 120,
+            floors: 1,
+            foundation: 'plate',
+            wall: 'block',
+            roof: 'gable-tin',
+            heating: 'geo',
+            finish: 'turnkey'
+        };
+
+        // VALIKU SEADISTAMINE (NUPUD)
+        function selectOption(type, value, element) {
+            configState[type] = value;
+            const parent = element.parentElement;
+            parent.querySelectorAll('.option-card').forEach(card => card.classList.remove('selected'));
+            element.classList.add('selected');
+            updateCalculator();
+        }
+
+        // TAB MEELEOLU VAHETAMINE
+        function switchTab(tabName) {
+            document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
+            document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
+            
+            if(tabName === 'customizer') {
+                document.querySelectorAll('.tab-btn')[0].classList.add('active');
+                document.getElementById('tab-customizer').classList.add('active');
+            } else {
+                document.querySelectorAll('.tab-btn')[1].classList.add('active');
+                document.getElementById('tab-ai-prompt').classList.add('active');
+            }
+        }
+
+        // KULUDE JA MATERJALIDE ARVUTAMINE
+        function updateCalculator() {
+            const area = parseInt(document.getElementById('house-area').value);
+            configState.area = area;
+            document.getElementById('area-val').innerText = area;
+
+            configState.foundation = document.getElementById('foundation-type').value;
+            configState.wall = document.getElementById('wall-type').value;
+            configState.roof = document.getElementById('roof-type').value;
+            configState.heating = document.getElementById('heating-type').value;
+
+            // BAASHIND / M²
+            let baseRate = 1200; // Valge karp base
+
+            // Korruste kordaja
+            if(configState.floors === 1.5) baseRate += 100;
+            if(configState.floors === 2) baseRate += 180;
+
+            // Vundament
+            if(configState.foundation === 'plate') baseRate += 60;
+            if(configState.foundation === 'pile') baseRate += 40;
+
+            // Seinad
+            if(configState.wall === 'clt') baseRate += 220;
+            if(configState.wall === 'wood') baseRate += 50;
+
+            // Küte
+            if(configState.heating === 'geo') baseRate += 80;
+            if(configState.heating === 'air-water') baseRate += 50;
+
+            // Viimistlusaste
+            if(configState.finish === 'shell') baseRate -= 350;
+            if(configState.finish === 'turnkey') baseRate += 250;
+
+            // KOGUSUMMA
+            const totalPrice = area * baseRate;
+
+            // Etappide kulujaotus (protsendina)
+            const foundationCost = Math.round(totalPrice * 0.12);
+            const wallCost = Math.round(totalPrice * 0.30);
+            const roofCost = Math.round(totalPrice * 0.18);
+            const utilityCost = Math.round(totalPrice * 0.18);
+            const finishCost = Math.round(totalPrice * 0.22);
+
+            // EEKUVA DYNAMIC UPDATE
+            document.getElementById('total-price').innerText = totalPrice.toLocaleString('et-EE') + ' €';
+            document.getElementById('price-per-m2').innerText = `~${Math.round(baseRate)} € / m²`;
+
+            document.getElementById('cost-foundation').innerText = foundationCost.toLocaleString('et-EE') + ' €';
+            document.getElementById('cost-walls').innerText = wallCost.toLocaleString('et-EE') + ' €';
+            document.getElementById('cost-roof').innerText = roofCost.toLocaleString('et-EE') + ' €';
+            document.getElementById('cost-utility').innerText = utilityCost.toLocaleString('et-EE') + ' €';
+            document.getElementById('cost-finish').innerText = finishCost.toLocaleString('et-EE') + ' €';
+
+            // MATERJALIKOGUSTE DÜNAAMILINE HINNANG
+            const concreteM3 = Math.round(area * 0.22);
+            const insulationM2 = Math.round(area * 1.6);
+            const roofM2 = Math.round(area * (configState.floors > 1 ? 0.75 : 1.25));
+
+            document.getElementById('mat-concrete').innerText = `~${concreteM3} m³`;
+            document.getElementById('mat-insulation').innerText = `~${insulationM2} m²`;
+            document.getElementById('mat-walls').innerText = `~${area} m² (pindala alusel)`;
+            document.getElementById('mat-roof').innerText = `~${roofM2} m²`;
+        }
+
+        // LEGACY INITIALIZER DISABLED – enhanced app.js initializes the application.
+
+        // RETRY WITH EXPONENTIAL BACKOFF LOGIC
+        async function fetchWithRetry(url, options, retries = 5) {
+            const delays = [1000, 2000, 4000, 8000, 16000];
+            for (let i = 0; i < retries; i++) {
+                try {
+                    const response = await fetch(url, options);
+                    if (response.ok) return await response.json();
+                } catch (err) {
+                    if (i === retries - 1) throw err;
+                }
+                await new Promise(res => setTimeout(res, delays[i]));
+            }
+            throw new Error("Päring ebaõnnestus pärast mitut katset.");
+        }
+
+        // AI PILDI GENEREERIMINE (IMAGEN API)
+        async function generateAiHouseImage() {
+            const loading = document.getElementById('ai-loading');
+            const imgPlaceholder = document.getElementById('ai-img-placeholder');
+            const imgEl = document.getElementById('ai-generated-img');
+
+            loading.style.display = 'block';
+            imgPlaceholder.style.display = 'none';
+            imgEl.style.display = 'none';
+
+            const promptText = `Modern architecturally designed ${configState.area} sqm private home in Estonia, ${configState.floors} storeys, with ${configState.wall} wall texture, modern roof, beautifully landscaped backyard, professional architectural visualization 8k render daylight`;
+
+            try {
+                const url = `https://generativelanguage.googleapis.com/v1beta/models/imagen-4.0-generate-001:predict?key=${apiKey}`;
+                const payload = {
+                    instances: [{ prompt: promptText }],
+                    parameters: { sampleCount: 1 }
+                };
+
+                const result = await fetchWithRetry(url, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(payload)
+                });
+
+                if (result.predictions && result.predictions[0] && result.predictions[0].bytesBase64Encoded) {
+                    imgEl.src = `data:image/png;base64,${result.predictions[0].bytesBase64Encoded}`;
+                    imgEl.style.display = 'block';
+                } else {
+                    alert('Pildi genereerimine ei õnnestunud, proovige uuesti.');
+                    imgPlaceholder.style.display = 'block';
+                }
+            } catch (err) {
+                console.error(err);
+                alert('Pildi genereerimisel tekkis viga.');
+                imgPlaceholder.style.display = 'block';
+            } finally {
+                loading.style.display = 'none';
+            }
+        }
+
+        // AI TEKSTI JA PILDI ANALÜÜS (GEMINI 2.5 FLASH)
+        async function analyzeAiPrompt() {
+            const desc = document.getElementById('ai-description').value;
+            const fileInput = document.getElementById('ai-image-upload');
+            const resultBox = document.getElementById('ai-analysis-result');
+            const textOutput = document.getElementById('ai-text-output');
+
+            if (!desc && fileInput.files.length === 0) {
+                alert('Palun sisesta kirjeldus või laadi üles pilt!');
+                return;
+            }
+
+            textOutput.innerText = 'Analüüsin sinu ideed ja koostan MTM Ehituse projektisuunda...';
+            resultBox.style.display = 'block';
+
+            let parts = [{ text: `Oled MTM Ehitus OÜ disaini- ja projektikonsultant. Kasutaja soovib 3D-disaini, ehitusprojekti või täislahendust. Kirjeldus: "${desc}". Anna lühike professionaalne soovitus sobiva teenusemahu, arhitektuurse suuna, peamiste tehniliste valikute ja järgmiste sammude kohta. Ära käsitle seda valmis maja või kinnisvara müügina.` }];
+
+            if (fileInput.files.length > 0) {
+                const file = fileInput.files[0];
+                const base64Data = await new Promise((res) => {
+                    const reader = new FileReader();
+                    reader.onload = e => res(e.target.result.split(',')[1]);
+                    reader.readAsDataURL(file);
+                });
+                parts.push({ inlineData: { mimeType: file.type, data: base64Data } });
+            }
+
+            try {
+                const url = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`;
+                const payload = { contents: [{ parts: parts }] };
+
+                const result = await fetchWithRetry(url, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(payload)
+                });
+
+                const text = result.candidates?.[0]?.content?.parts?.[0]?.text;
+                if (text) {
+                    textOutput.innerText = text;
+                } else {
+                    textOutput.innerText = 'Analüüsi tegemine ebaõnnestus. Palun proovi uuesti.';
+                }
+            } catch (err) {
+                console.error(err);
+                textOutput.innerText = 'Viga tehisintellektiga ühenduse loomisel.';
+            }
+        }
+
+        // PROJEKTI EDASISAATMINE KONTAKTIVORMIGA
+        function sendProjectToForm() {
+            const price = document.getElementById('total-price').innerText;
+            const details = `PÄRING PROJEKTI PLANEERIJAST:
+- Kavandatav üldpindala: ${configState.area} m²
+- Korruseid: ${configState.floors}
+- Vundament: ${configState.foundation}
+- Seinad: ${configState.wall}
+- Katus: ${configState.roof}
+- Küte: ${configState.heating}
+- Viimistlusaste: ${configState.finish}
+- Täislahenduse esialgne lähte-eelarve: ${price}
+
+Soovin personaalset pakkumist 3D-disainile, ehitusprojektile või täislahendusele.`;
+
+            document.getElementById('form-message').value = details;
+            document.querySelector('#kontakt').scrollIntoView({ behavior: 'smooth' });
+        }
+
+        // VALITUD DISAINI PÄRINGUSSE LISAMINE
+        function chooseDesign(designName) {
+            document.getElementById('form-message').value = `Soovin pakkumist lahendusele „${designName}“.
+
+Mind huvitab:
+- 3D-disaini ostmine ja kohandamine
+- ehitusprojekti koostamine
+- täislahendus disainist teostuseni
+
+Palun võtke minuga ühendust, et täpsustada sobiv maht ja hind.`;
+            document.querySelector('#kontakt').scrollIntoView({ behavior: 'smooth' });
+        }
+
+        // TEATED VORMI SAATMISEL
+        function handleFormSubmit(e) {
+            e.preventDefault();
+            alert('Aitäh! Teie päring MTM Ehitus OÜ-le on edukalt saadetud. Võtame teiega ühendust 24h jooksul.');
+            document.getElementById('quote-form').reset();
+        }
+    </script>
+    <script src="app.js"></script>
+</body>
 </html>