<!DOCTYPE html>


<html lang="it">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Carify - Trova la tua auto con l AI</title>

<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&display=swap" rel="stylesheet">

<style>

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }


:root {

–bg: #ffffff;

–text: #1c1c1e;

–text-secondary: #6e6e73;

–accent: #3a7bd5;

–accent-hover: #2563d4;

–white: #f5f5f7;

–border: #e8e8ea;

–titanium: #f5f5f7;

}


html { scroll-behavior: smooth; }


body {

font-family: ‘DM Sans’, -apple-system, sans-serif;

background: var(–bg);

color: var(–text);

-webkit-font-smoothing: antialiased;

overflow-x: hidden;

}


nav {

position: fixed;

top: 0; left: 0; right: 0;

z-index: 1000;

background: rgba(255,255,255,0.92);

backdrop-filter: saturate(180%) blur(20px);

-webkit-backdrop-filter: saturate(180%) blur(20px);

border-bottom: 1px solid var(–border);

height: 52px;

display: flex;

align-items: center;

justify-content: center;

padding: 0 24px;

}


.nav-inner {

display: flex;

align-items: center;

justify-content: space-between;

width: 100%;

max-width: 1200px;

}


.nav-logo {

display: flex;

align-items: center;

text-decoration: none;

flex-shrink: 0;

padding: 0 16px;

}


.nav-links {

display: flex;

gap: 0;

list-style: none;

align-items: center;

}


.nav-item { position: relative; }


.nav-item > a {

font-size: 13px;

font-weight: 400;

color: var(–text);

text-decoration: none;

opacity: 0.8;

transition: opacity 0.2s;

padding: 16px 12px;

display: flex;

align-items: center;

white-space: nowrap;

}


.nav-item > a:hover { opacity: 1; }


.dropdown {

display: none;

position: absolute;

top: 52px;

left: 50%;

transform: translateX(-50%);

background: rgba(255,255,255,0.97);

backdrop-filter: blur(20px);

border: 1px solid var(–border);

border-radius: 14px;

padding: 20px;

min-width: 200px;

box-shadow: 0 20px 40px rgba(0,0,0,0.10);

z-index: 200;

}


.nav-item:hover .dropdown { display: block; }


.dropdown-title {

font-size: 10px;

font-weight: 500;

letter-spacing: 1px;

text-transform: uppercase;

color: var(–text-secondary);

margin-bottom: 10px;

padding: 0 4px;

}


.dropdown a {

display: block;

font-size: 14px;

font-weight: 400;

color: var(–text);

text-decoration: none;

padding: 8px 4px;

border-radius: 6px;

transition: all 0.15s;

}


.dropdown a:hover {

background: var(–titanium);

padding-left: 10px;

}


.hero {

min-height: 100vh;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

text-align: center;

padding: 120px 24px 80px;

position: relative;

overflow: hidden;

}


.hero::before {

content: ‘’;

position: absolute;

top: -200px; left: 50%;

transform: translateX(-50%);

width: 800px; height: 800px;

background: radial-gradient(ellipse, rgba(58,123,213,0.08) 0%, transparent 70%);

pointer-events: none;

}


.hero-badge {

display: inline-flex;

align-items: center;

gap: 6px;

background: rgba(58,123,213,0.08);

border: 1px solid rgba(58,123,213,0.2);

color: var(–accent);

font-size: 12px;

font-weight: 500;

padding: 5px 14px;

border-radius: 100px;

margin-bottom: 32px;

animation: fadeUp 0.6s ease both;

}


.hero-title {

font-size: clamp(44px, 7vw, 80px);

font-weight: 600;

letter-spacing: -2px;

line-height: 1.05;

color: var(–text);

max-width: 820px;

margin-bottom: 24px;

animation: fadeUp 0.6s 0.1s ease both;

}


.gradient-text {

background: linear-gradient(135deg, #3a7bd5, #60a5fa);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

}


.hero-subtitle {

font-size: clamp(17px, 2.5vw, 21px);

font-weight: 300;

color: var(–text-secondary);

max-width: 560px;

line-height: 1.6;

margin-bottom: 48px;

animation: fadeUp 0.6s 0.2s ease both;

}


.btn-primary {

display: inline-flex;

align-items: center;

gap: 8px;

background: var(–accent);

color: white;

padding: 14px 32px;

border-radius: 980px;

text-decoration: none;

font-weight: 500;

transition: all 0.2s ease;

animation: fadeUp 0.6s 0.3s ease both;

border: none;

font-family: inherit;

font-size: inherit;

cursor: pointer;

}


.btn-primary:hover {

background: var(–accent-hover);

transform: scale(1.02);

box-shadow: 0 8px 24px rgba(58,123,213,0.3);

}


.features { padding: 100px 24px; max-width: 1100px; margin: 0 auto; }

.section-label { text-align: center; font-size: 13px; font-weight: 500; color: var(–accent); margin-bottom: 16px; letter-spacing: 1px; text-transform: uppercase; }

.section-title { text-align: center; font-size: clamp(32px, 4vw, 48px); font-weight: 600; margin-bottom: 16px; letter-spacing: -1.5px; }


.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.feature-card {

background: var(–titanium);

border: 1px solid var(–border);

border-radius: 18px;

padding: 32px 28px;

transition: all 0.2s ease;

}

.feature-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(0,0,0,0.06); }

.feature-icon { width: 44px; height: 44px; background: rgba(58,123,213,0.08); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; font-size: 22px; }

.feature-title { font-size: 18px; font-weight: 600; margin-bottom: 10px; }

.feature-desc { font-size: 14px; font-weight: 300; color: var(–text-secondary); line-height: 1.65; }


.chat-section { padding: 100px 24px; background: var(–titanium); border-top: 1px solid var(–border); }

.chat-window { max-width: 720px; margin: 0 auto; background: white; border-radius: 20px; border: 1px solid var(–border); overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.08); }

.chat-header { background: var(–titanium); border-bottom: 1px solid var(–border); padding: 16px 20px; display: flex; align-items: center; gap: 10px; }

.chat-avatar { width: 32px; height: 32px; background: linear-gradient(135deg, var(–accent), #60a5fa); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 14px; }

.chat-messages { padding: 24px 20px; height: 420px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }

.msg { max-width: 90%; padding: 12px 16px; border-radius: 16px; font-size: 14px; line-height: 1.6; }

.msg-ai { background: var(–titanium); align-self: flex-start; border-bottom-left-radius: 4px; }

.msg-user { background: var(–accent); color: white; align-self: flex-end; border-bottom-right-radius: 4px; }


.chat-input-area {

display: flex;

padding: 16px 20px;

gap: 10px;

background: white;

border-top: 1px solid var(–border);

}

.chat-input {

flex: 1;

padding: 12px 18px;

border-radius: 980px;

border: 1px solid var(–border);

outline: none;

font-family: inherit;

font-size: 14px;

}


.msg-ai .chat-card {

background: white;

border: 1px solid var(–border);

border-radius: 12px;

padding: 14px;

margin: 8px 0;

transition: all 0.2s;

}

.msg-ai .chat-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }

.msg-ai .chat-card-title { font-size: 15px; font-weight: 600; color: var(–text); margin-bottom: 4px; }

.msg-ai .chat-card-price { font-size: 18px; font-weight: 600; color: #16a34a; margin-bottom: 6px; }

.msg-ai .chat-card-meta { font-size: 12px; color: var(–text-secondary); margin-bottom: 8px; }

.msg-ai .chat-card-note { font-size: 12px; color: var(–text-secondary); padding: 8px 10px; background: #fffbeb; border-left: 3px solid #f59e0b; border-radius: 0 6px 6px 0; line-height: 1.5; }

.msg-ai .chat-card-source { display: inline-block; font-size: 10px; font-weight: 600; color: var(–accent); background: rgba(58,123,213,0.08); padding: 2px 8px; border-radius: 4px; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }


.msg-ai .chat-badge {

display: inline-block;

font-size: 11px;

font-weight: 600;

padding: 3px 10px;

border-radius: 50px;

margin: 4px 2px;

}

.msg-ai .badge-green { background: #dcfce7; color: #16a34a; }

.msg-ai .badge-yellow { background: #fef9c3; color: #a16207; }

.msg-ai .badge-red { background: #fee2e2; color: #dc2626; }

.msg-ai .badge-blue { background: rgba(58,123,213,0.08); color: var(–accent); }


.msg-ai table {

width: 100%;

border-collapse: collapse;

margin: 8px 0;

font-size: 12px;

}

.msg-ai table th {

background: var(–titanium);

padding: 8px 10px;

text-align: left;

font-weight: 600;

font-size: 11px;

color: var(–text-secondary);

text-transform: uppercase;

letter-spacing: 0.3px;

border-bottom: 1px solid var(–border);

}

.msg-ai table td {

padding: 8px 10px;

border-bottom: 1px solid var(–border);

color: var(–text);

}

.msg-ai table tr:last-child td { border-bottom: none; }


.profile-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.profile-chip {

background: white;

border: 1px solid var(–border);

padding: 8px 14px;

border-radius: 50px;

font-size: 13px;

cursor: pointer;

transition: all 0.15s;

font-family: inherit;

color: var(–text);

}

.profile-chip:hover { border-color: var(–accent); color: var(–accent); background: rgba(58,123,213,0.04); }


.stats { padding: 80px 24px; max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: center; }

.stat-number { font-size: 48px; font-weight: 600; color: var(–text); }

.stat-accent { color: var(–accent); }


footer { border-top: 1px solid var(–border); padding: 40px 24px; text-align: center; color: var(–text-secondary); font-size: 13px; }


@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }


@media (max-width: 768px) { .features-grid, .stats { grid-template-columns: 1fr; } .nav-links { display: none; } }

</style>


</head>

<body>


<nav>

  <div class="nav-inner">

    <ul class="nav-links">

      <li class="nav-item">

        <a href="#">Cerca Auto</a>

        <div class="dropdown">

          <div class="dropdown-title">Ricerca</div>

          <a href="#">Cerca con AI</a><a href="#">Auto usate</a><a href="#">Confronta modelli</a>

        </div>

      </li>

      <li class="nav-item">

        <a href="#">Servizi</a>

        <div class="dropdown">

          <div class="dropdown-title">Per la tua auto</div>

          <a href="#">Detailing</a><a href="#">Officine</a><a href="#">Prezzi carburante</a>

        </div>

      </li>

      <li class="nav-item">

        <a href="#">Mercato</a>

        <div class="dropdown">

          <div class="dropdown-title">Analisi</div>

          <a href="#">Andamento prezzi</a><a href="#">Modelli pi&ugrave; cercati</a>

        </div>

      </li>

    </ul>


```

<a href="#" class="nav-logo">

  <div style="display:flex;flex-direction:column;align-items:center;gap:2px;">

    <svg width="40" height="30" viewBox="0 0 140 100" fill="none">

      <defs>

        <linearGradient id="navGrad" x1="10" y1="90" x2="130" y2="90" gradientUnits="userSpaceOnUse">

          <stop offset="0%" stop-color="#c8c8ca"/>

          <stop offset="55%" stop-color="#3a7bd5"/>

          <stop offset="100%" stop-color="#7eb8ff"/>

        </linearGradient>

      </defs>

      <path d="M10 90 A62 62 0 0 1 130 90" stroke="#d8d8da" stroke-width="7" stroke-linecap="round" fill="none"/>

      <path d="M10 90 A62 62 0 0 1 108 42" stroke="url(#navGrad)" stroke-width="7" stroke-linecap="round" fill="none"/>

      <line x1="70" y1="90" x2="105" y2="44" stroke="#1c1c1e" stroke-width="2.5" stroke-linecap="round"/>

      <circle cx="70" cy="90" r="8" fill="#1c1c1e"/><circle cx="70" cy="90" r="4" fill="#f4f4f6"/><circle cx="70" cy="90" r="1.8" fill="#3a7bd5"/>

    </svg>

    <span style="font-size:9px;font-weight:600;letter-spacing:3px;color:#1c1c1e;text-transform:uppercase;">CARIFY</span>

  </div>

</a>


<ul class="nav-links">

  <li class="nav-item"><a href="#">Blog</a></li>

  <li class="nav-item">

    <a href="#">Supporto</a>

    <div class="dropdown"><a href="#">FAQ</a><a href="#">Contattaci</a></div>

  </li>

  <li class="nav-item"><a href="#">&#128269;</a></li>

</ul>

```


  </div>

</nav>


<section class="hero">

  <div class="hero-badge"><span>&#10022;</span> Intelligenza artificiale per le auto</div>

  <h1 class="hero-title">Trova la tua auto ideale<br>con <span class="gradient-text">l'intelligenza artificiale</span></h1>

  <p class="hero-subtitle">Carify analizza migliaia di annunci per trovare l'auto giusta per te. Risparmia tempo, evita fregature, guida sereno.</p>

  <button class="btn-primary" onclick="document.getElementById('cerca').scrollIntoView({behavior:'smooth'})">Inizia la ricerca</button>

</section>


<section class="features">

  <p class="section-label">Come funziona</p>

  <h2 class="section-title">L'auto giusta &egrave; a un messaggio</h2>

  <div class="features-grid">

    <div class="feature-card">

      <div class="feature-icon">&#128269;</div>

      <h3 class="feature-title">Ricerca intelligente</h3>

      <p class="feature-desc">Scrivi in linguaggio naturale: "BMW Serie 3 diesel sotto i 20.000&euro;". L'AI capisce e cerca per te.</p>

    </div>

    <div class="feature-card">

      <div class="feature-icon">&#128737;</div>

      <h3 class="feature-title">Report affidabilit&agrave;</h3>

      <p class="feature-desc">Ogni auto viene analizzata per storico incidenti, problemi noti e coerenza del prezzo.</p>

    </div>

    <div class="feature-card">

      <div class="feature-icon">&#128176;</div>

      <h3 class="feature-title">Costo reale</h3>

      <p class="feature-desc">Calcoliamo assicurazione, carburante, bollo e manutenzione media annua.</p>

    </div>

    <div class="feature-card">

      <div class="feature-icon">&#128295;</div>

      <h3 class="feature-title">Detailing</h3>

      <p class="feature-desc">Trova i migliori centri di detailing e officine vicino a te.</p>

    </div>

    <div class="feature-card">

      <div class="feature-icon">&#9981;</div>

      <h3 class="feature-title">Carburante</h3>

      <p class="feature-desc">Confronta i prezzi della benzina e del gasolio in tempo reale.</p>

    </div>

    <div class="feature-card">

      <div class="feature-icon">&#128202;</div>

      <h3 class="feature-title">Mercato</h3>

      <p class="feature-desc">Migliaia di annunci aggiornati ogni giorno con notifiche istantanee.</p>

    </div>

  </div>

</section>


<section class="chat-section" id="cerca">

  <div class="chat-container">

    <div class="chat-window">

      <div class="chat-header">

        <div class="chat-avatar">&#10022;</div>

        <div><strong>Carify AI</strong><br><small style="color:#34c759">&#9679; Online</small></div>

      </div>

      <div class="chat-messages" id="chatMessages">

      </div>

      <div class="chat-input-area">

        <input type="text" id="chatInput" class="chat-input" placeholder="Es: SUV diesel sotto i 25k...">

        <button onclick="sendMessage()" style="background:var(--accent); border:none; color:white; padding:10px 20px; border-radius:20px; cursor:pointer; font-family:inherit;">Invia</button>

      </div>

    </div>

  </div>

</section>


<div class="stats">

  <div><div class="stat-number">50<span class="stat-accent">K+</span></div><p>Annunci analizzati</p></div>

  <div><div class="stat-number">98<span class="stat-accent">%</span></div><p>Soddisfazione</p></div>

  <div><div class="stat-number">3<span class="stat-accent">min</span></div><p>Tempo medio</p></div>

</div>


<footer>

  <p>&copy; 2026 Carify. La piattaforma italiana per trovare la tua auto con l'AI.</p>

</footer>


<script>

var PROXY_URL = "https://carify-proxy.decicco-danilo.workers.dev/api/chat";

var MAX_HISTORY_TURNS = 14;


var SYSTEM_PROMPT = "Sei Carify AI, il consulente auto piu avanzato d'Italia. Sei preciso, diretto, professionale ma amichevole. Non fai mai risposte vaghe.\n\n"

+ "FASE 0: PROFILAZIONE UTENTE\n"

+ "Alla PRIMA interazione, se l'utente non ha gia specificato tutto, fai 2-3 domande mirate per capire:\n"

+ "- Budget (fascia di prezzo)\n"

+ "- Uso principale (citta, autostrada, famiglia, lavoro, neopatentato)\n"

+ "- Preferenze (carburante, cambio, marca, nuovo/usato)\n"

+ "- Zona (per stimare assicurazione e carburante)\n"

+ "NON fare tutte le domande insieme. Sii naturale, una o due alla volta.\n"

+ "Una volta che hai il profilo, ricordalo per tutta la conversazione.\n\n"

+ "MODALITA 1: BROKER USATO\n"

+ "Attivata quando l'utente cerca auto usate.\n"

+ "Per OGNI auto proposta, fornisci SEMPRE:\n"

+ "1. Nome modello, anno, km, prezzo\n"

+ "2. Motorizzazione e potenza\n"

+ "3. PROBLEMI NOTI del motore specifico con livello di gravita\n"

+ "4. Costo medio manutenzione annua stimato\n"

+ "5. Assicurazione stimata per profilo utente\n"

+ "6. VERDETTO con punteggio stelle\n\n"

+ "FORMATO OBBLIGATORIO per le proposte - usa ESATTAMENTE questi tag:\n"

+ "[CARD]\n"

+ "titolo: BMW 320d Touring 2019\n"

+ "prezzo: 22.500 euro\n"

+ "fonte: Autoscout24\n"

+ "km: 85.000 km - Diesel - Automatico\n"

+ "verdetto: 4 stelle su 5 - Buon rapporto qualita prezzo\n"

+ "nota: Motore B47 affidabile se tagliandato ogni 15k km.\n"

+ "[/CARD]\n\n"

+ "Proponi SEMPRE 3 annunci simulando fonti reali (Autoscout24, Subito.it, Automobile.it, Autohero).\n\n"

+ "Dopo le 3 card, aggiungi una TABELLA COMPARATIVA:\n"

+ "[TABLE]\n"

+ "Modello | Prezzo | Km | Costo annuo | Verdetto\n"

+ "BMW 320d | 22.500 | 85k | 1.800 | 4 stelle\n"

+ "Audi A4 2.0 TDI | 21.000 | 92k | 1.600 | 4 stelle\n"

+ "[/TABLE]\n\n"

+ "MODALITA 2: CONFIGURATORE NUOVO\n"

+ "Attivata quando l'utente vuole un'auto nuova.\n"

+ "Per OGNI modello suggerito fornisci modello, allestimento, prezzo listino, motorizzazione, optional essenziali e inutili, costo reale annuo.\n"

+ "Usa lo stesso formato [CARD] e [TABLE].\n\n"

+ "MODALITA 3: CONSULENZA\n"

+ "Per domande su manutenzione, assicurazione, bollo, carburante, mercato.\n"

+ "Rispondi con DATI CONCRETI e cifre.\n\n"

+ "REGOLE DI FORMATTAZIONE:\n"

+ "- Usa **grassetto** per i concetti chiave\n"

+ "- Usa [BADGE:green]testo[/BADGE] per positivi, [BADGE:yellow]testo[/BADGE] per attenzione, [BADGE:red]testo[/BADGE] per negativi\n"

+ "- Le risposte devono essere COMPLETE ma STRUTTURATE\n"

+ "- Non inventare MAI statistiche o prezzi\n"

+ "- Se hai bisogno di dati aggiornati, cerca sul web\n\n"

+ "REGOLE DI COMPORTAMENTO:\n"

+ "- Sii diretto e onesto. Se un'auto e una fregatura, dillo chiaramente.\n"

+ "- Se un difetto e gestibile, spiega come.\n"

+ "- Se un difetto e fatale, sconsiglia.\n"

+ "- Guida sempre l'utente verso la scelta migliore per il SUO profilo.\n"

+ "- Quando l'utente e indeciso, proponi tu.\n"

+ "- Non usare frasi fatte o generiche.";


var history = [];


function escapeHtml(str) {

  var div = document.createElement('div');

  div.textContent = str;

  return div.innerHTML;

}


function showWelcome() {

  var messages = document.getElementById('chatMessages');

  var welcomeMsg = document.createElement('div');

  welcomeMsg.className = 'msg msg-ai';

  welcomeMsg.innerHTML = 'Ciao! Sono <strong>Carify AI</strong>, il tuo consulente auto personale.<br><br>Per trovarti l\'auto perfetta, dimmi: <strong>stai cercando un\'auto nuova o usata?</strong>'

    + '<div class="profile-chips">'

    + '<button class="profile-chip" onclick="quickReply(\'Cerco un auto usata\')">Usata</button>'

    + '<button class="profile-chip" onclick="quickReply(\'Voglio configurare un auto nuova\')">Nuova</button>'

    + '<button class="profile-chip" onclick="quickReply(\'Non sono sicuro, aiutami a capire\')">Non so ancora</button>'

    + '</div>';

  messages.appendChild(welcomeMsg);

}


function quickReply(text) {

  document.getElementById('chatInput').value = text;

  sendMessage();

}


async function sendMessage() {

  var input = document.getElementById('chatInput');

  var messages = document.getElementById('chatMessages');

  if (!input.value.trim()) return;


  var text = input.value.trim();


  var userMsg = document.createElement('div');

  userMsg.className = 'msg msg-user';

  userMsg.textContent = text;

  messages.appendChild(userMsg);

  messages.scrollTop = messages.scrollHeight;


  input.value = '';


  var loadingMsg = document.createElement('div');

  loadingMsg.className = 'msg msg-ai';

  loadingMsg.innerHTML = '<em>Sto analizzando...</em>';

  loadingMsg.id = 'loadingMsg';

  messages.appendChild(loadingMsg);

  messages.scrollTop = messages.scrollHeight;


  history.push({ role: "user", parts: [{ text: text }] });


  if (history.length > MAX_HISTORY_TURNS * 2) {

    history = history.slice(-MAX_HISTORY_TURNS * 2);

  }


  try {

    var response = await fetch(PROXY_URL, {

      method: "POST",

      headers: { "Content-Type": "application/json" },

      body: JSON.stringify({

        systemPrompt: SYSTEM_PROMPT,

        history: history

      })

    });


    var loading = document.getElementById('loadingMsg');

    if (loading) loading.remove();


    if (!response.ok) {

      var errData = {};

      try { errData = await response.json(); } catch(e) {}

      throw new Error(errData.error || "Errore " + response.status);

    }


    var data = await response.json();


    if (!data.text) {

      throw new Error("Risposta vuota dall'AI.");

    }


    history.push({ role: "model", parts: [{ text: data.text }] });


    renderAIMessage(data.text);


  } catch (e) {

    var loading2 = document.getElementById('loadingMsg');

    if (loading2) loading2.remove();


    var errMsg = document.createElement('div');

    errMsg.className = 'msg msg-ai';

    errMsg.style.color = '#ef4444';

    errMsg.textContent = e.message || 'Errore di connessione. Riprova tra poco.';

    messages.appendChild(errMsg);

  }


  messages.scrollTop = messages.scrollHeight;

}


function renderAIMessage(text) {

  var messages = document.getElementById('chatMessages');

  var aiMsg = document.createElement('div');

  aiMsg.className = 'msg msg-ai';


  var html = text;


  html = html.replace(/\[CARD\]([\s\S]*?)\[\/CARD\]/g, function(match, content) {

    var fields = {};

    var lines = content.trim().split('\n');

    for (var i = 0; i < lines.length; i++) {

      var colonIdx = lines[i].indexOf(':');

      if (colonIdx > -1) {

        var key = lines[i].substring(0, colonIdx).trim().toLowerCase();

        var val = lines[i].substring(colonIdx + 1).trim();

        fields[key] = val;

      }

    }


    var cardHtml = '<div class="chat-card">';

    if (fields.fonte) cardHtml += '<div class="chat-card-source">' + escapeHtml(fields.fonte) + '</div>';

    cardHtml += '<div class="chat-card-title">' + escapeHtml(fields.titolo || 'Auto') + '</div>';

    cardHtml += '<div class="chat-card-price">' + escapeHtml(fields.prezzo || '') + '</div>';

    cardHtml += '<div class="chat-card-meta">' + escapeHtml(fields.km || '') + '</div>';

    if (fields.verdetto) cardHtml += '<div style="margin:6px 0">' + renderBadgeFromVerdetto(fields.verdetto) + '</div>';

    if (fields.nota) cardHtml += '<div class="chat-card-note">' + escapeHtml(fields.nota) + '</div>';

    cardHtml += '</div>';

    return cardHtml;

  });


  html = html.replace(/\[TABLE\]([\s\S]*?)\[\/TABLE\]/g, function(match, content) {

    var rows = content.trim().split('\n');

    var validRows = [];

    for (var i = 0; i < rows.length; i++) {

      if (rows[i].trim()) validRows.push(rows[i]);

    }

    if (validRows.length < 2) return escapeHtml(content);


    var headers = validRows[0].split('|');

    var tableHtml = '<table><thead><tr>';

    for (var h = 0; h < headers.length; h++) {

      tableHtml += '<th>' + escapeHtml(headers[h].trim()) + '</th>';

    }

    tableHtml += '</tr></thead><tbody>';


    for (var r = 1; r < validRows.length; r++) {

      var cells = validRows[r].split('|');

      tableHtml += '<tr>';

      for (var c = 0; c < cells.length; c++) {

        tableHtml += '<td>' + escapeHtml(cells[c].trim()) + '</td>';

      }

      tableHtml += '</tr>';

    }

    tableHtml += '</tbody></table>';

    return tableHtml;

  });


  html = html.replace(/\[BADGE:(green|yellow|red|blue)\](.*?)\[\/BADGE\]/g, function(match, color, badgeText) {

    return '<span class="chat-badge badge-' + color + '">' + escapeHtml(badgeText) + '</span>';

  });


  var htmlElements = [];

  html = html.replace(/(<div class="chat-card">[\s\S]*?<\/div>\s*<\/div>|<table>[\s\S]*?<\/table>|<span class="chat-badge[^"]*">.*?<\/span>)/g, function(match) {

    htmlElements.push(match);

    return '%%HTML_' + (htmlElements.length - 1) + '%%';

  });


  html = escapeHtml(html);

  html = html.replace(/\n/g, '<br>');

  html = html.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');


  for (var i = 0; i < htmlElements.length; i++) {

    html = html.replace('%%HTML_' + i + '%%', htmlElements[i]);

  }


  aiMsg.innerHTML = html;

  messages.appendChild(aiMsg);

  messages.scrollTop = messages.scrollHeight;

}


function renderBadgeFromVerdetto(verdetto) {

  var color = 'blue';

  if (verdetto.indexOf('5') > -1) color = 'green';

  else if (verdetto.indexOf('4') > -1) color = 'green';

  else if (verdetto.indexOf('3') > -1) color = 'yellow';

  else if (verdetto.indexOf('2') > -1 || verdetto.indexOf('1') > -1) color = 'red';

  return '<span class="chat-badge badge-' + color + '">' + escapeHtml(verdetto) + '</span>';

}


document.getElementById('chatInput').addEventListener('keypress', function(e) {

  if (e.key === 'Enter') sendMessage();

});


showWelcome();

</script>


</body>

</html>