# Gumirom v1 — Sell Like Crazy + Hormozi, magazin online MVP și reparații

Data: 2026-10-06 · Cale: **arhitecturală** (subsistem nou: magazin; restructurare pagină principală)

## 1. Înțelegerea cererii

**Ce a cerut utilizatorul**
1. Inspectarea aplicației (`v1/app`, site static Gumirom — vulcanizare Gherla).
2. Aplicarea metodei *Sell Like Crazy* (Sabri Suby) și a metodei Hormozi (*$100M Offers*: Value Equation, Grand Slam Offer).
3. „Rezolvă tot ce este de rezolvat în aplicație” (bug-uri, accesibilitate, conținut).
4. (mesaj ulterior) Ca parte din MVP: **magazin online pentru anvelope noi și second-hand** — planificat și implementat.

**Ipoteze (nespuse explicit, alese de mine)**
- Site-ul rămâne **static** (HTML/CSS/JS vanilla, fără build, fără backend) — așa e construit acum și merge pe orice hosting.
- Magazinul MVP = catalog editabil + filtre + coș + **rezervare fără plată online** (plata la atelier, numerar — fapt existent pe pagină). Fără plăți cu cardul, fără livrare prin curier.
- Comenzile și cererile ajung la proprietar prin **Formspree** (dacă e configurat) sau, până atunci, prin **SMS precompletat** (opțional WhatsApp / e-mail) — formularul actual nu trimite nimic nicăieri.
- Trafic principal: căutări locale Google/Maps („vulcanizare Gherla”), recomandări, Facebook → intenție mare, deci CTA telefonic rămâne principal.
- Nu inventez fapte despre afacere. Angajamentele noi (garanții, bonusuri, perioada de rezervare) sunt marcate `DE CONFIRMAT` în cod și listate la final; produsele din catalog sunt **demonstrative** și afișează un banner până la înlocuire.

**Criterii de succes**
- Pagina principală acoperă cei 17 pași Sell Like Crazy și ofertă construită după Value Equation Hormozi.
- Magazin funcțional: filtrare după dimensiune/sezon/stare, coș persistent, rezervare care ajunge efectiv la proprietar.
- Toate bug-urile identificate (secțiunea 6) sunt reparate; logica pură e acoperită de teste `node --test`.

## 2. Audit „Sell Like Crazy” — pagina actuală

**Scor: ~29/100 — „Nu vinde”** (rubrica: A5 B4 C3 D1 E4 F2 G0 H4 I0 J5, ponderat).

| Pas | Status | Constatare |
|---|---|---|
| 1 Apelul către audiență | ⚠️ | „Vulcanizare · Gherla, jud. Cluj” — loc, nu persoană |
| 2 Titlul cu promisiunea mare | ❌ | „Roți sigure, în orice anotimp.” — slogan, fără cifră |
| 3 Subtitlu | ⚠️ | listă de servicii, nu explică promisiunea |
| 4 Buline de intrigă | ❌ | lipsesc |
| 5 Problema | ❌ | nicio secțiune de problemă |
| 6 Soluție + mecanism | ⚠️ | servicii fără „cum lucrăm” |
| 7 Credențiale | ⚠️ | „echipamente profesionale”, fără specific |
| 8 Beneficii | ⚠️ | parțial („elimină vibrațiile din volan”) |
| 9 Dovadă socială | ⚠️ | 3 citate (prenume + inițială), ascunse în carusel cu autoplay |
| 10–13 Oferta, bonusuri, stivă, preț | ❌ | nu există ofertă, preț, bonusuri |
| 14 Urgență | ❌ | lipsă |
| 15 Garanție | ❌ | „garanție la montaj” vag |
| 16 CTA | ⚠️ | telefon repetat (bine); formularul **nu trimite nimic** |
| 17 Avertisment + P.S. | ❌ | pagina se termină brusc |

Al doilea drum (HVCO) lipsește; nimic pentru cei 97% care nu cumpără azi.

**Value Equation (Hormozi) pentru o vulcanizare**
- *Dream outcome*: „pleci în siguranță, fără vibrații, iarna fără griji”.
- *Perceived likelihood*: profil măsurat în mm, diagnostic arătat, garanția de reechilibrare, preț spus înainte.
- *Time delay*: 30–45 min (fapt din FAQ), oră fixă rezervată telefonic.
- *Effort & sacrifice*: un telefon, totul într-o vizită, plata la final; rezervare online fără avans.

## 3. Arhitectură

```
v1/app/
  index.html        pagina principală (restructurată pe 17 pași)
  magazin.html      magazin online (nou)
  css/style.css     stiluri comune + pagina principală
  css/shop.css      stiluri doar pentru magazin (nou)
  js/config.js      configurare afacere: telefon, Formspree, WhatsApp, program, zile rezervare (nou)
  js/core.js        funcții pure, testabile în Node: program, dimensiuni, filtre, coș, mesaje (nou)
  js/lead.js        trimitere cereri: Formspree sau SMS/WhatsApp/e-mail precompletat (nou)
  js/main.js        comportamente comune + pagina principală (rescris)
  js/catalog.js     catalogul de anvelope, editabil de proprietar (nou)
  js/shop.js        magazin: filtre, randare, coș, rezervare (nou)
  assets/*.webp     variante optimizate ale imaginilor (nou)
v1/tests/core.test.js   teste node:test pentru core.js
```

- Scripturi clasice cu `defer` (nu ES modules) ca să meargă și din `file://`; ordinea: `config → core → lead → main` (+ `catalog → shop` pe magazin).
- `core.js` exportă prin `module.exports` în Node și `window.GumiromCore` în browser. Nu atinge DOM-ul.
- Catalogul e un fișier JS (`window.GUMIROM_CATALOG = {...}`), nu JSON, ca să nu depindă de `fetch` (eșuează pe `file://`).

## 4. Pagina principală — structura nouă (ordinea celor 17 pași)

1. **Hero** — apel: „Pentru șoferii din Gherla și împrejurimi”; H1: „Roți schimbate în 30–45 de minute — fără cozi, fără vibrații, fără surprize la plată.”; subtitlu cu mecanismul (oră fixă, preț spus înainte, echilibrare computerizată, garanția „Volan liniștit”); 3 buline de intrigă (spre test, FAQ, magazin); CTA „Sună și rezervă-ți ora” + „Vezi anvelopele pe stoc”; status real „Deschis acum · închidem la 18:00” (fus orar București).
2. **Bara de încredere** — reformulată pe beneficii (inclusiv „Preț spus dinainte”).
3. **Problema** (nou) — 4 carduri „problemă → cum am rezolvat-o” (coada din prima zi cu zăpadă, vibrații după echilibrare, „janta e pierdută”, prețul care crește la casă).
4. **Servicii** — aceleași 6, descrieri pe beneficii; cardurile noi/SH duc în magazin.
5. **Cum lucrăm** (nou) — mecanismul în 4 pași.
6. **Oferta de sezon** (nou) — Grand Slam Offer cu nume MAGIC: Pachetul „Iarnă fără griji” / „Vară fără griji” (schimbat automat după lună), stivă de valoare (5 elemente incluse + 3 bonusuri), rațiune, preț „spus din primul minut la telefon și neschimbat”, urgență reală (aglomerarea sezonieră), CTA. Șablon de listă de prețuri comentat în HTML, gata de activat.
7. **Garanții** (nou) — Garanția Gumirom: „Volan liniștit” (reechilibrare gratuită 30 de zile — DE CONFIRMAT), „Prețul spus = prețul plătit”, „Reparăm înainte să vindem”, „SH verificat”; motivul pentru care le putem oferi.
8. **Anvelope pe stoc** — căutare rapidă după dimensiune (lățime/profil/diametru) care deschide magazinul filtrat; raritate reală la SH („unicate”).
9. **Testul de 2 minute** (nou, HVCO / al doilea drum) — 5 întrebări despre propriile anvelope → verdict (ok / verificare / urgent) → CTA telefon sau „trimite rezultatul prin SMS”. Informații factuale: 1,6 mm minim legal; recomandat ≥3 mm vara, ≥4 mm iarna; martorii de uzură; codul DOT.
10. **Despre** — credențiale; typo-uri reparate.
11. **Recenzii** — grilă vizibilă (nu carusel) + link spre recenziile Google. Recenziile existente rămân, dar marcate în cod „de verificat / înlocuit cu recenzii reale”.
12. **Întrebări** — tratarea obiecțiilor: preț, timp, magazin online, vibrații după echilibrare, plus întrebările existente.
13. **Contact** — formular „Rezervă-ți ora”, buton „Vreau o programare”, „Ce urmează” adaptat canalului real de trimitere.
14. **P.S.** (nou) — avertisment + recapitulare ofertă/garanție + CTA.
15. **Bară fixă pe mobil** (nou) — „Sună acum” + „Magazin” (pe magazin: „Coș (n)”).

Navigație: Servicii · Magazin · Oferta · Garanții · Recenzii · Contact. Rămâne (pagină principală de afacere locală, nu landing de campanie) — compromis asumat față de regula „o pagină, un scop”.

## 5. Magazinul online (MVP)

**Pagina `magazin.html`**
- Hero: „Anvelope noi și second-hand pe stoc — rezervi online, plătești la montaj.” + 4 promisiuni (fără avans, montaj inclus la anvelope noi — fapt existent, SH cu profil măsurat, confirmare telefonică).
- Banner „Catalog demonstrativ” cât timp `GUMIROM_CATALOG.demo === true`.
- Filtre: lățime, profil, diametru (opțiuni din catalog), sezon, stare (nou/SH), căutare text, sortare (recomandate, preț ↑/↓, profil SH). Starea filtrelor e în URL (`?latime=205&profil=55&diametru=16&sezon=iarna&stare=sh`) — permite link-uri directe din pagina principală.
- Card produs: stare, sezon, marcă/model, dimensiune + indici, preț/buc. și preț set, „Montaj inclus” (dacă e cazul), la SH: profil în mm cu bară vizuală, an DOT; „Ultimele N bucăți” doar când stocul real ≤ 2; cantitate 1..stoc; „Adaugă în coș”.
- Stare goală: „Nu avem dimensiunea asta pe stoc acum” + formular „Cere ofertă” precompletat cu dimensiunea (al doilea drum).
- Coș (panou lateral): linii, +/−, ștergere, subtotal, mențiunea montajului, formular de rezervare (nume, telefon, când vii, montaj da/nu, observații), „Ce urmează”, buton „Rezervă anvelopele”. După trimitere: cod rezervare (ex. `GR-4821`), golire coș, rezumat.
- Coș persistent în `localStorage` (cu `try/catch`); la încărcare e normalizat față de catalog (produse dispărute eliminate, cantități limitate la stoc).

**Model de date** (`js/catalog.js`)
```js
{ id, stare: "nou"|"sh", sezon: "vara"|"iarna"|"all", brand, model,
  latime, profil, diametru, indice, pret, stoc, montajInclus, recomandat?,
  profilMm?, dot? }   // profilMm și dot doar la SH
```

**Trimiterea cererilor** (`js/lead.js`, folosit de contact, test, rezervare, cere ofertă)
- `formspreeId` setat → POST la Formspree, mesaj de succes.
- altfel → panou cu butoane: „Trimite prin SMS” (`sms:+40744398932?&body=…`), „Trimite pe WhatsApp” (doar dacă `whatsapp: true`), „Trimite e-mail” (doar dacă `email` setat), „Sună”. Mesajul e precompletat; vizitatorul doar apasă Trimite.
- Eroare de rețea Formspree → afișează același panou de rezervă, nu pierde cererea.

## 6. Reparații identificate (de rezolvat)

| # | Problemă | Reparație |
|---|---|---|
| 1 | Formularul nu trimite nimic (Formspree neconfigurat, `EMAIL_FALLBACK` gol) — cererile se pierd | `lead.js` cu SMS/WhatsApp/e-mail + Formspree din `config.js` |
| 2 | `.back-to-top{display:grid}` anulează `hidden` → buton invizibil, dar clicabil și focusabil în colțul ecranului | regulă globală `[hidden]{display:none!important}` + `visibility` la ascundere |
| 3 | Meniul mobil acoperă header-ul (z-index 120 > 100) → butonul de închidere nu se vede | header ridicat peste overlay când meniul e deschis, bare deschise la culoare |
| 4 | Meniu mobil: fără gestionarea focusului, fundalul rămâne interactiv, `setTimeout` care poate ascunde meniul redeschis rapid, `overflow:hidden` rămâne la trecerea pe desktop | focus pe primul link, `inert` pe restul paginii, anulare timeout, închidere la ≥900px |
| 5 | Mesajele de eroare ale câmpurilor apar gri pe alb (`.section-dark p` bate `.field-error`) | specificitate corectă + `aria-describedby` |
| 6 | Fără JavaScript, tot conținutul `.reveal` rămâne invizibil | clasa `js` pe `<html>`; animația doar cu JS |
| 7 | Caruselul are autoplay fără buton de pauză (WCAG 2.2.2) și roluri `tab` fără `tabpanel` | înlocuit cu grilă vizibilă de recenzii |
| 8 | „Program azi” arată verde și seara după închidere | status real deschis/închis după oră, fus orar București |
| 9 | Scroll handlers cu debounce → umbra header-ului se actualizează doar după oprire | `requestAnimationFrame` |
| 10 | Umbra imaginilor din `.split-media` e tăiată de `overflow:hidden` | umbra mutată pe container |
| 11 | Typo-uri: „vânzăm” → „vindem”, „Trece pe la noi” → „Treci pe la noi” | corectat |
| 12 | Imagini JPG grele (hero 259 KB) | variante WebP + `<picture>` |
| 13 | Scrollspy nu marchează ultima secțiune la capătul paginii | verificare „capăt de pagină” |

Necesită date de la proprietar (nu se pot repara fără ele): domeniul (canonical, `og:image` absolut, sitemap), ID Formspree, prețuri reale, recenzii reale verificate, ani de experiență.

## 7. Gestionarea erorilor

- `localStorage` indisponibil → coșul merge în memorie pentru sesiune.
- Catalog lipsă/gol → mesaj „Catalogul nu e disponibil — sună-ne” + formular „Cere ofertă”.
- Parametri URL invalizi → ignorați.
- `Intl` cu fus orar indisponibil → ora locală a vizitatorului.

## 8. Testare

- `node --test v1/tests/` pentru `core.js`: `parseSize`, `formatSize`, `filterProducts`, `sortProducts`, `facetOptions`, operațiile pe coș și totaluri, `computeOpenStatus`, `seasonFor`, `selfCheckResult`, `buildOrderMessage`, `formatLei`, `buildSmsHref`.
- Verificare manuală în browser (server local): navigare, meniu mobil, filtre, coș, rezervare, formular, test, consolă fără erori, lățime mobil 375px.

## 9. DE CONFIRMAT cu proprietarul (angajamente noi introduse de metodă)

1. Garanția „Volan liniștit”: reechilibrare gratuită în 30 de zile dacă apar vibrații.
2. Bonus: reverificarea strângerii prezoanelor după 50–100 km, gratuit.
3. Bonus: verificare gratuită a presiunii oricând, tot sezonul.
4. Păstrarea anvelopelor rezervate online 3 zile (`rezervareZile` în `config.js`).
5. Numărul are WhatsApp? (`whatsapp: false` implicit).
6. Recenziile existente sunt reale și publicate cu acord?
7. Catalogul real de produse și prețuri (`catalog.js`, apoi `demo: false`).