<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Catalogo Servizi — Luxury Admin CRM</title>
  <!-- Google Fonts: Plus Jakarta Sans -->
  <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@300;400;500;600;700&display=swap" rel="stylesheet">
  <!-- Tailwind CSS CDN -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    tailwind.config = {
      theme: {
        extend: {
          fontFamily: {
            sans: ['Plus Jakarta Sans', 'sans-serif'],
          },
          colors: {
            brand: {
              dark: '#1A463C',        /* Verde scuro richiesto */
              darkHover: '#13342D',   /* Variante scura per hover */
              active: 'rgba(255, 255, 255, 0.08)',
              bg: '#F8F9FA',
            }
          }
        }
      }
    }
  </script>
  <style>
    .sidebar-transition {
      transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }
  </style>
</head>
<body class="bg-brand-bg font-sans text-slate-800 antialiased min-h-screen flex overflow-x-hidden">

  <!-- SIDEBAR -->
  <aside id="sidebar" class="w-64 bg-brand-dark text-white flex flex-col justify-between p-6 border-r border-emerald-950/20 shrink-0 sidebar-transition relative z-10">
    <div class="overflow-hidden">
      <!-- Logo e Intestazione -->
      <div class="mb-10 px-2 flex items-center justify-between">
        <span id="sidebar-logo-text" class="text-lg font-bold tracking-wider text-emerald-50 whitespace-nowrap transition-opacity duration-300">iamcavalli</span>
      </div>

      <!-- Navigazione Principale -->
      <nav class="space-y-1">
        <a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-emerald-200/70 hover:text-white hover:bg-white/5 transition-all duration-200">
          <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M4 6a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2H6a2 2 0 01-2-2v-4zM14 16a2 2 0 012-2h2a2 2 0 012 2v4a2 2 0 01-2 2h-2a2 2 0 01-2-2v-4z"/></svg>
          <span class="sidebar-text whitespace-nowrap transition-opacity duration-300">Dashboard</span>
        </a>
        <a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-emerald-200/70 hover:text-white hover:bg-white/5 transition-all duration-200">
          <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M13 10V3L4 14h7v7l9-11h-7z"/></svg>
          <span class="sidebar-text whitespace-nowrap transition-opacity duration-300">Lead</span>
        </a>
        <a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-emerald-200/70 hover:text-white hover:bg-white/5 transition-all duration-200">
          <svg class="w-4 h-4 shrink-0 text-emerald-400" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
          <span class="sidebar-text whitespace-nowrap transition-opacity duration-300">Clienti</span>
        </a>
        <a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-emerald-200/70 hover:text-white hover:bg-white/5 transition-all duration-200">
          <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
          <span class="sidebar-text whitespace-nowrap transition-opacity duration-300">Progetti</span>
        </a>
        <a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-emerald-200/70 hover:text-white hover:bg-white/5 transition-all duration-200">
          <svg class="w-4 h-4 shrink-0 text-emerald-400" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
          <span class="sidebar-text whitespace-nowrap transition-opacity duration-300">Preventivi</span>
        </a>
        <a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-emerald-200/70 hover:text-white hover:bg-white/5 transition-all duration-200">
          <svg class="w-4 h-4 shrink-0 text-emerald-400" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M7 7h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
          <span class="sidebar-text whitespace-nowrap transition-opacity duration-300">Offerte</span>
        </a>
        <!-- Stato Attivo su Catalogo -->
        <a href="#" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-white bg-brand-active font-medium transition-all duration-200 shadow-sm">
          <svg class="w-4 h-4 shrink-0 text-emerald-400" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
          <span class="sidebar-text whitespace-nowrap transition-opacity duration-300">Catalogo</span>
        </a>
      </nav>
    </div>

    <!-- Area Inferiore Sidebar -->
    <div class="border-t border-white/10 pt-4 space-y-3 overflow-hidden">
      <div class="flex items-center justify-between px-3 py-1 text-xs text-emerald-200/50 whitespace-nowrap">
        <span class="sidebar-text transition-opacity duration-300">Tema</span>
        <button class="p-1 rounded-full bg-white/5 hover:bg-white/10 text-emerald-200 hover:text-white transition-all duration-200">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364-6.364l-.707.707M6.343 17.657l-.707.707m12.728 0l-.707-.707M6.343 6.343l-.707-.707M14 12a2 2 0 11-4 0 2 2 0 014 0z"/></svg>
        </button>
      </div>
      <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-red-300/80 hover:text-red-200 hover:bg-red-950/20 transition-all duration-200 whitespace-nowrap">
        <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
        <span class="sidebar-text transition-opacity duration-300">Esci</span>
      </a>
    </div>
  </aside>

  <!-- SEZIONE PRINCIPALE -->
  <div class="flex-1 flex flex-col min-w-0">
    
    <!-- BARRA DI INTESTAZIONE SUPERIORE -->
    <header class="h-16 border-b border-slate-100 bg-white px-8 flex items-center justify-between shrink-0">
      <div class="flex items-center gap-4">
        <!-- Pulsante Apri/Chiudi Sidebar -->
        <button id="sidebar-toggle" class="p-2 -ml-2 rounded-lg text-slate-500 hover:bg-slate-50 hover:text-slate-800 transition-colors focus:outline-none" title="Espandi/Comprimi Sidebar">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M4 6h16M4 12h12M4 18h16"/></svg>
        </button>
        <span class="text-xs text-slate-400 font-medium">Area di Lavoro</span>
      </div>
      <div class="flex items-center gap-4">
        <span class="text-xs font-semibold text-slate-700 bg-slate-100 px-2.5 py-1 rounded-full">Demo Account</span>
      </div>
    </header>

    <!-- AREA DEL CONTENUTO -->
    <main class="flex-1 p-8 lg:p-10 max-w-[1400px] w-full mx-auto flex flex-col gap-6 overflow-y-auto">
      
      <!-- INTESTAZIONE SEZIONE -->
      <div>
        <h1 class="text-2xl font-semibold text-slate-900 tracking-tight">Catalogo Servizi</h1>
        <p class="text-xs text-slate-400 mt-1">Configura e gestisci le singole voci di servizio offerte</p>
      </div>

      <!-- BARRA DI RICERCA MINIMALE -->
      <div class="relative w-full">
        <span class="absolute inset-y-0 left-0 flex items-center pl-3.5 pointer-events-none text-slate-400">
          <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
        </span>
        <input 
          type="text" 
          placeholder="Cerca per nome, categoria, fase, tag o pacchetto..." 
          class="w-full pl-10 pr-4 py-3 bg-white text-sm text-slate-800 placeholder-slate-400 border border-slate-200/80 rounded-lg focus:outline-none focus:border-brand-dark focus:ring-1 focus:ring-brand-dark transition-all duration-200"
        />
      </div>

      <!-- TABELLA CATALOGO -->
      <div class="bg-white rounded-xl border border-slate-100 shadow-[0_4px_20px_rgba(0,0,0,0.01)] overflow-hidden">
        <div class="overflow-x-auto">
          <table class="w-full text-left border-collapse table-fixed min-w-[1000px]">
            <thead>
              <tr class="border-b border-slate-100/80 bg-slate-50/50 text-slate-400 text-[11px] font-semibold uppercase tracking-wider">
                <th class="py-3 px-5 w-1/3">
                  <span class="inline-flex items-center gap-1 cursor-pointer hover:text-slate-700">
                    Nome
                    <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M8 9l4-4 4 4m0 6l-4 4-4-4"/></svg>
                  </span>
                </th>
                <th class="py-3 px-4 w-[110px]">
                  <span class="inline-flex items-center gap-1 cursor-pointer hover:text-slate-700">
                    Prezzo
                    <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M8 9l4-4 4 4m0 6l-4 4-4-4"/></svg>
                  </span>
                </th>
                <th class="py-3 px-4 w-[160px]">Offerta</th>
                <th class="py-3 px-4 w-[240px]">Fase</th>
                <th class="py-3 px-4 w-1/5">Descrizione</th>
                <th class="py-3 px-4 w-[100px] text-center">Pacchetto</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-slate-100/60 text-[13px] text-slate-700">
              
              <!-- Riga 1 -->
              <tr class="hover:bg-slate-50/30 transition-all duration-150">
                <td class="py-3 px-5 font-medium text-slate-900 truncate">Landing Page (Metodo o Differenziante)</td>
                <td class="py-3 px-4 font-mono text-xs text-slate-600">€1.000,00</td>
                <td class="py-3 px-4">
                  <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded text-[10px] font-semibold bg-emerald-50 text-emerald-700 border border-emerald-100">
                    Signature Offer
                  </span>
                </td>
                <td class="py-3 px-4">
                  <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-medium bg-amber-50 text-amber-700 border border-amber-100">
                    <span class="w-1.5 h-1.5 rounded-full bg-amber-400"></span>
                    Fase 3 ➔ Esecuzione
                  </span>
                </td>
                <td class="py-3 px-4 text-slate-400 text-xs truncate">—</td>
                <td class="py-3 px-4 text-center">
                  <button class="w-6 h-6 rounded-full border border-slate-200 text-slate-400 hover:text-brand-dark hover:border-brand-dark hover:bg-emerald-50/30 flex items-center justify-center mx-auto transition-all">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 4.5v15m7.5-7.5h-15"/></svg>
                  </button>
                </td>
              </tr>

              <!-- Riga 2 -->
              <tr class="hover:bg-slate-50/30 transition-all duration-150">
                <td class="py-3 px-5 font-medium text-slate-900 truncate">Analisi Competitor</td>
                <td class="py-3 px-4 font-mono text-xs text-slate-600">€400,00</td>
                <td class="py-3 px-4">
                  <div class="flex flex-col gap-1 items-start">
                    <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded text-[10px] font-semibold bg-purple-50 text-purple-600 border border-purple-100">
                      Entry Offer
                    </span>
                    <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded text-[10px] font-semibold bg-emerald-50 text-emerald-700 border border-emerald-100">
                      Signature Offer
                    </span>
                  </div>
                </td>
                <td class="py-3 px-4">
                  <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-medium bg-blue-50 text-blue-700 border border-blue-100">
                    <span class="w-1.5 h-1.5 rounded-full bg-blue-400"></span>
                    Fase 2 ➔ Analisi / Strat.
                  </span>
                </td>
                <td class="py-3 px-4 text-slate-400 text-xs truncate">—</td>
                <td class="py-3 px-4 text-center">
                  <button class="w-6 h-6 rounded-full border border-slate-200 text-slate-400 hover:text-brand-dark hover:border-brand-dark hover:bg-emerald-50/30 flex items-center justify-center mx-auto transition-all">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 4.5v15m7.5-7.5h-15"/></svg>
                  </button>
                </td>
              </tr>

              <!-- Riga 3 -->
              <tr class="hover:bg-slate-50/30 transition-all duration-150">
                <td class="py-3 px-5 font-medium text-slate-900 truncate">Art direction su direzione da prendere</td>
                <td class="py-3 px-4 font-mono text-xs text-slate-600">€2.000,00</td>
                <td class="py-3 px-4">
                  <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded text-[10px] font-semibold bg-blue-50 text-blue-600 border border-blue-100">
                    Retainer Offer
                  </span>
                </td>
                <td class="py-3 px-4 text-slate-400 text-xs">—</td>
                <td class="py-3 px-4 text-slate-400 text-xs truncate">—</td>
                <td class="py-3 px-4 text-center">
                  <button class="w-6 h-6 rounded-full border border-slate-200 text-slate-400 hover:text-brand-dark hover:border-brand-dark hover:bg-emerald-50/30 flex items-center justify-center mx-auto transition-all">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 4.5v15m7.5-7.5h-15"/></svg>
                  </button>
                </td>
              </tr>

              <!-- Riga 4 -->
              <tr class="hover:bg-slate-50/30 transition-all duration-150">
                <td class="py-3 px-5 font-medium text-slate-900 truncate">Audit iniziale (UX/UI, struttura, conversione)</td>
                <td class="py-3 px-4 font-mono text-xs text-slate-600">€500,00</td>
                <td class="py-3 px-4">
                  <div class="flex flex-col gap-1 items-start">
                    <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded text-[10px] font-semibold bg-purple-50 text-purple-600 border border-purple-100">
                      Entry Offer
                    </span>
                    <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded text-[10px] font-semibold bg-emerald-50 text-emerald-700 border border-emerald-100">
                      Signature Offer
                    </span>
                  </div>
                </td>
                <td class="py-3 px-4">
                  <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-medium bg-orange-50 text-orange-700 border border-orange-100">
                    <span class="w-1.5 h-1.5 rounded-full bg-orange-400"></span>
                    Fase 1 ➔ Onboarding
                  </span>
                </td>
                <td class="py-3 px-4 text-slate-400 text-xs truncate">—</td>
                <td class="py-3 px-4 text-center">
                  <button class="w-6 h-6 rounded-full border border-slate-200 text-slate-400 hover:text-brand-dark hover:border-brand-dark hover:bg-emerald-50/30 flex items-center justify-center mx-auto transition-all">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 4.5v15m7.5-7.5h-15"/></svg>
                  </button>
                </td>
              </tr>

              <!-- Riga 5 -->
              <tr class="hover:bg-slate-50/30 transition-all duration-150">
                <td class="py-3 px-5 font-medium text-slate-900 truncate">Go-live / messa online & accessi</td>
                <td class="py-3 px-4 font-mono text-xs text-slate-600">€300,00</td>
                <td class="py-3 px-4">
                  <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded text-[10px] font-semibold bg-emerald-50 text-emerald-700 border border-emerald-100">
                    Signature Offer
                  </span>
                </td>
                <td class="py-3 px-4">
                  <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[11px] font-medium bg-teal-50 text-teal-700 border border-teal-100">
                    <span class="w-1.5 h-1.5 rounded-full bg-teal-400"></span>
                    Fase 5 ➔ Consegna
                  </span>
                </td>
                <td class="py-3 px-4 text-slate-400 text-xs truncate">—</td>
                <td class="py-3 px-4 text-center">
                  <button class="w-6 h-6 rounded-full border border-slate-200 text-slate-400 hover:text-brand-dark hover:border-brand-dark hover:bg-emerald-50/30 flex items-center justify-center mx-auto transition-all">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M12 4.5v15m7.5-7.5h-15"/></svg>
                  </button>
                </td>
              </tr>

              <!-- FORM INLINE PER NUOVA RIGA ("Aggiungi servizio") -->
              <tr class="bg-slate-50/40 border-t-2 border-slate-100">
                <td class="py-4 px-5">
                  <input 
                    type="text" 
                    placeholder="+ Aggiungi servizio..." 
                    class="w-full bg-white border border-slate-200 rounded px-3 py-1.5 text-xs text-slate-800 placeholder-slate-400 focus:outline-none focus:border-brand-dark focus:ring-1 focus:ring-brand-dark transition-all"
                  />
                </td>
                <td class="py-4 px-4">
                  <input 
                    type="text" 
                    placeholder="0,00" 
                    class="w-full bg-white border border-slate-200 rounded px-3 py-1.5 text-xs font-mono text-slate-800 placeholder-slate-400 focus:outline-none focus:border-brand-dark focus:ring-1 focus:ring-brand-dark transition-all"
                  />
                </td>
                <td class="py-4 px-4 text-slate-300 text-xs select-none">Seleziona...</td>
                <td class="py-4 px-4">
                  <select class="w-full bg-white border border-slate-200 rounded px-2 py-1.5 text-xs text-slate-600 focus:outline-none focus:border-brand-dark focus:ring-1 focus:ring-brand-dark transition-all">
                    <option value="">Fase...</option>
                    <option value="1">Fase 1</option>
                    <option value="2">Fase 2</option>
                    <option value="3">Fase 3</option>
                    <option value="4">Fase 4</option>
                    <option value="5">Fase 5</option>
                  </select>
                </td>
                <td class="py-4 px-4">
                  <input 
                    type="text" 
                    placeholder="Descrizione..." 
                    class="w-full bg-white border border-slate-200 rounded px-3 py-1.5 text-xs text-slate-800 placeholder-slate-400 focus:outline-none focus:border-brand-dark focus:ring-1 focus:ring-brand-dark transition-all"
                  />
                </td>
                <td class="py-4 px-4 text-center">
                  <button class="bg-brand-dark hover:bg-brand-darkHover text-white text-xs font-medium px-4 py-1.5 rounded transition-all">
                    Invia
                  </button>
                </td>
              </tr>

            </tbody>
          </table>
        </div>
        
        <!-- FOOTER TABELLA -->
        <div class="border-t border-slate-100 px-6 py-4 flex items-center justify-between text-xs text-slate-400">
          <span>Visualizzazione di 5 servizi principali</span>
        </div>
      </div>

    </main>
  </div>

  <!-- SCRIPT DI LOGICA (Gestione Sidebar) -->
  <script>
    const sidebar = document.getElementById('sidebar');
    const toggleButton = document.getElementById('sidebar-toggle');
    const logoText = document.getElementById('sidebar-logo-text');
    const sidebarTexts = document.querySelectorAll('.sidebar-text');

    toggleButton.addEventListener('click', () => {
      const isCollapsed = sidebar.classList.contains('w-20');

      if (isCollapsed) {
        sidebar.classList.remove('w-20');
        sidebar.classList.add('w-64');
        setTimeout(() => {
          logoText.classList.remove('opacity-0');
          sidebarTexts.forEach(text => text.classList.remove('opacity-0'));
        }, 150);
      } else {
        logoText.classList.add('opacity-0');
        sidebarTexts.forEach(text => text.classList.add('opacity-0'));
        sidebar.classList.remove('w-64');
        sidebar.classList.add('w-20');
      }
    });
  </script>
</body>
</html>