Spaces:

emanueledecandia
/

simulator

Running

App Files Files Community

emanueledecandia commited on 24 days ago

Commit

7ac28aa

verified ·

1 Parent(s): faa3e6d

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +807 -556

index.html CHANGED Viewed

@@ -1,583 +1,834 @@
 <!DOCTYPE html>
 <html lang="it">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Calcolatore Prezzi Avanzato - Servizi Digitali</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <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=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --primary-color: #2563eb; /* Blue 600 */
-            --primary-hover: #1d4ed8; /* Blue 700 */
-            --bg-color: #f8fafc;
-            --text-color: #0f172a;
-        }
-        body {
-            font-family: 'Inter', sans-serif;
-            background-color: var(--bg-color);
-            color: var(--text-color);
-            scroll-behavior: smooth;
-        }
-        /* Custom Scrollbar */
-        ::-webkit-scrollbar {
-            width: 8px;
-        }
-        ::-webkit-scrollbar-track {
-            background: #f1f1f1;
-        }
-        ::-webkit-scrollbar-thumb {
-            background: #cbd5e1;
-            border-radius: 4px;
-        }
-        ::-webkit-scrollbar-thumb:hover {
-            background: #94a3b8;
-        }
-        /* Card Styles */
-        .price-card {
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            border: 1px solid #e2e8f0;
-            position: relative;
-            overflow: hidden;
-        }
-        .price-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-            border-color: #cbd5e1;
-        }
-        .price-card.selected {
-            border-color: var(--primary-color);
-            box-shadow: 0 0 0 2px var(--primary-color);
-            background-color: #eff6ff; /* Blue 50 */
-            transform: scale(1.02);
-            z-index: 10;
-        }
-        /* Selection Indicator */
-        .check-icon {
-            opacity: 0;
-            transform: scale(0.5);
-            transition: all 0.3s ease;
-            position: absolute;
-            top: 1rem;
-            right: 1rem;
-            background-color: var(--primary-color);
-            color: white;
-            border-radius: 50%;
-            width: 24px;
-            height: 24px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-size: 14px;
-        }
-        .price-card.selected .check-icon {
-            opacity: 1;
-            transform: scale(1);
-        }
-        /* Input Styles */
-        .custom-input {
-            background-color: #fff;
-            border: 1px solid #cbd5e1;
-            border-radius: 0.5rem;
-            padding: 0.5rem 1rem;
-            transition: all 0.2s;
-            width: 100%;
-        }
-        .custom-input:focus {
-            outline: none;
-            border-color: var(--primary-color);
-            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
-        }
-        /* Range Slider Customization */
-        input[type=range] {
-            -webkit-appearance: none;
-            width: 100%;
-            background: transparent;
-        }
-        input[type=range]::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            height: 24px;
-            width: 24px;
-            border-radius: 50%;
-            background: var(--primary-color);
-            cursor: pointer;
-            margin-top: -10px;
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-            transition: transform 0.1s;
-        }
-        input[type=range]::-webkit-slider-thumb:hover {
-            transform: scale(1.1);
-        }
-        input[type=range]::-webkit-slider-runnable-track {
-            width: 100%;
-            height: 4px;
-            cursor: pointer;
-            background: #e2e8f0;
-            border-radius: 2px;
-        }
-        /* Firefox Slider */
-        input[type=range]::-moz-range-thumb {
-            height: 24px;
-            width: 24px;
-            border: none;
-            border-radius: 50%;
-            background: var(--primary-color);
-            cursor: pointer;
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-        }
-        input[type=range]::-moz-range-track {
-            width: 100%;
-            height: 4px;
-            cursor: pointer;
-            background: #e2e8f0;
-            border-radius: 2px;
-        }
-        /* Feature List Styling */
-        .feature-list {
-            list-style: none;
-            padding: 0;
-            margin: 0;
-        }
-        .feature-list li {
-            display: flex;
-            align-items: flex-start;
-            margin-bottom: 0.5rem;
-            font-size: 0.9rem;
-            line-height: 1.5;
-            color: #475569;
-        }
-        .feature-list li::before {
-            content: '✓';
-            color: var(--primary-color);
-            font-weight: 700;
-            margin-right: 0.5rem;
-            flex-shrink: 0;
-            font-size: 1rem;
-        }
-        .feature-list li.highlight {
-            font-weight: 600;
-            color: #1e293b;
-        }
-        /* Animation for Total Price Update */
-        .price-update-anim {
-            animation: pulse-green 0.5s ease-in-out;
-        }
-        @keyframes pulse-green {
-            0% { color: inherit; }
-            50% { color: #16a34a; } /* Green 600 */
-            100% { color: inherit; }
-        }
-    </style>
 </head>
 <body class="antialiased selection:bg-blue-100 selection:text-blue-900">
-    <!-- Navigation / Branding -->
-    <nav class="bg-white/80 backdrop-blur-md border-b border-gray-200 sticky top-0 z-50">
-        <div class="container mx-auto px-6 py-4 flex justify-between items-center">
-            <div class="flex items-center space-x-2">
-                <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold text-lg">D</div>
-                <span class="text-xl font-bold text-gray-900 tracking-tight">DigitalGrowth<span class="text-blue-600">Calc</span></span>
-            </div>
-            <div class="text-sm font-medium text-gray-500">
-                <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="hover:text-blue-600 transition-colors">Built with anycoder</a>
-            </div>
         </div>
-    </nav>
-    <header class="bg-gradient-to-b from-white to-blue-50/50 py-16 md:py-24 border-b border-gray-100">
-        <div class="container mx-auto px-6 text-center max-w-4xl">
-            <span class="inline-block py-1 px-3 rounded-full bg-blue-100 text-blue-700 text-xs font-bold tracking-wide uppercase mb-4">Preventivo 2024</span>
-            <h1 class="text-4xl md:text-6xl font-extrabold text-gray-900 mb-6 leading-tight tracking-tight">
-                Calcolatore di <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600">Investimento Digitale</span>
-            </h1>
-            <p class="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed">
-                Configura il tuo piano di crescita su misura. Scegli il pacchetto, stima le performance e ottieni un preventivo istantaneo.
-            </p>
         </div>
-    </header>
-    <main class="container mx-auto px-4 md:px-6 py-12 max-w-7xl">
-        <!-- SECTION 1: PACKAGES -->
-        <section class="mb-20">
-            <div class="flex flex-col md:flex-row justify-between items-end mb-10 gap-4">
-                <div>
-                    <h2 class="text-3xl font-bold text-gray-900">1. Scegli il tuo Pacchetto Base</h2>
-                    <p class="text-gray-500 mt-2">Seleziona il livello di servizio adatto alle tue esigenze.</p>
-                </div>
-            </div>
-            <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
-                <!-- STANDARD CARD -->
-                <div class="price-card bg-white rounded-2xl p-8 cursor-pointer group" onclick="selectPackage('Standard', 2500)">
-                    <div class="check-icon">✓</div>
-                    <div class="mb-6">
-                        <h3 class="text-2xl font-bold text-gray-900">Standard</h3>
-                        <p class="text-gray-500 text-sm mt-1">Per chi inizia la crescita.</p>
-                    </div>
-                    <div class="flex items-baseline mb-8">
-                        <span class="text-4xl font-extrabold text-gray-900">€2.500</span>
-                        <span class="text-gray-500 ml-2 font-medium">una tantum</span>
-                    </div>
-                    <div class="space-y-4 mb-8">
-                        <div class="h-px bg-gray-100 w-full"></div>
-                        <ul class="feature-list space-y-3 max-h-[400px] overflow-y-auto pr-2 custom-scrollbar">
-                            <li class="highlight">Paid Search Competitor</li>
-                            <li class="highlight">Keyword Analysis & Planner</li>
-                            <li><strong>20-</strong> Editing (Copy/Headline)</li>
-                            <li><strong>4-</strong> Video per campagna</li>
-                            <li>Video Editor & Designer Dedicato</li>
-                            <li><strong>2-</strong> Ad Copy & Graphics</li>
-                            <li>Google Ads (Search & Video)</li>
-                            <li>Performance Max Campaign</li>
-                            <li>Configurazione Account & Analytics</li>
-                            <li>Targeting & Reporting</li>
-                            <li>Gestione Conversioni</li>
-                            <li>Creazione Contenuti Email</li>
-                            <li><strong>2-</strong> Landing Pages Sponsor</li>
-                            <li>Widget Integration (Survey & Form)</li>
-                            <li>Contest & Micro Influencer</li>
-                            <li class="mt-4 font-bold text-blue-800 text-sm uppercase tracking-wide">Performance Price Include:</li>
-                            <li>Demand Generation Campaign</li>
-                            <li>Sales & Customer Agent App</li>
-                        </ul>
-                    </div>
-                </div>
-                <!-- GOLD CARD -->
-                <div class="price-card bg-white rounded-2xl p-8 cursor-pointer relative border-blue-600 ring-1 ring-blue-600 group" onclick="selectPackage('Gold', 3500)">
-                    <div class="absolute -top-4 left-1/2 -translate-x-1/2">
-                        <span class="bg-blue-600 text-white px-5 py-1.5 rounded-full text-sm font-bold tracking-wide shadow-lg shadow-blue-600/30">Consigliato</span>
-                    </div>
-                    <div class="check-icon">✓</div>
-                    <div class="mb-6">
-                        <h3 class="text-2xl font-bold text-gray-900">Gold</h3>
-                        <p class="text-gray-500 text-sm mt-1">Per accelerare le performance.</p>
-                    </div>
-                    <div class="flex items-baseline mb-8">
-                        <span class="text-4xl font-extrabold text-gray-900">€3.500</span>
-                        <span class="text-gray-500 ml-2 font-medium">una tantum</span>
-                    </div>
-                    <div class="space-y-4 mb-8">
-                        <div class="h-px bg-gray-100 w-full"></div>
-                        <ul class="feature-list space-y-3 max-h-[500px] overflow-y-auto pr-2 custom-scrollbar">
-                            <li class="font-bold text-blue-600">Tutto dello Standard, più:</li>
-                            <li><strong>30-</strong> Editing (Copy/Headline)</li>
-                            <li><strong>10-</strong> Video per campagna</li>
-                            <li><strong>3-</strong> Ad Copy & Graphics</li>
-                            <li>Google Shopping</li>
-                            <li>Integrazione Merchant Center</li>
-                            <li>Customer Match (con CRM)</li>
-                            <li>Email Marketing Aziendale</li>
-                            <li><strong>2-</strong> Multi Landing Pages & A/B Test</li>
-                            <li><strong>1-</strong> Store eCommerce Landing</li>
-                            <li>Plugin Loyalty & Referral</li>
-                            <li>Contest + Professional Influencer</li>
-                            <li>CSR: Web Disclosure & Impact</li>
-                            <li class="mt-4 font-bold text-blue-800 text-sm uppercase tracking-wide">Performance Price Include:</li>
-                            <li>ML Analytics Application</li>
-                            <li>Customer Advanced Data Analytics</li>
-                            <li>Market & Competitive Intelligence</li>
-                            <li class="font-semibold text-gray-800">Advanced Program (1 incluso):</li>
-                            <li>a. Referral Martech App</li>
-                            <li>b. Loyalty Program</li>
-                            <li>c. Social Coalition Loyalty</li>
-                            <li>d. Cause Related Marketing</li>
-                            <li>e. Affiliation Management</li>
-                            <li>f. Influencer Management</li>
-                        </ul>
-                    </div>
-                </div>
-                <!-- PLATINUM CARD -->
-                <div class="price-card bg-white rounded-2xl p-8 cursor-pointer group" onclick="selectPackage('Platinum', 5000)">
-                    <div class="check-icon">✓</div>
-                    <div class="mb-6">
-                        <h3 class="text-2xl font-bold text-gray-900">Platinum</h3>
-                        <p class="text-gray-500 text-sm mt-1">Soluzione completa di dominio.</p>
-                    </div>
-                    <div class="flex items-baseline mb-8">
-                        <span class="text-4xl font-extrabold text-gray-900">€5.000</span>
-                        <span class="text-gray-500 ml-2 font-medium">una tantum</span>
-                    </div>
-                    <div class="space-y-4 mb-8">
-                        <div class="h-px bg-gray-100 w-full"></div>
-                        <ul class="feature-list space-y-3 max-h-[500px] overflow-y-auto pr-2 custom-scrollbar">
-                            <li class="font-bold text-blue-600">Tutto del Gold, più:</li>
-                            <li><strong>50-</strong> Editing (Copy/Headline)</li>
-                            <li><strong>20-</strong> Video per campagna</li>
-                            <li><strong>5-</strong> Ad Copy & Graphics</li>
-                            <li>Integrazione Piattaforme Multiple</li>
-                            <li>Campagne Asset Affiliati</li>
-                            <li>Tools Campagne Avanzate</li>
-                            <li>Co-Marketing Multichannel</li>
-                            <li><strong>2-</strong> Landing Pages Evento</li>
-                            <li><strong>5-</strong> Multi Landing Pages & A/B Test</li>
-                            <li><strong>2-</strong> Store eCommerce Landing</li>
-                            <li>CSR: Metodo Cultural Impact</li>
-                            <li>CSR: Media Relations</li>
-                            <li>Generative AI App (inclusa)</li>
-                            <li class="font-semibold text-gray-800">Advanced Program (2 inclusi):</li>
-                            <li>a. Referral Martech App</li>
-                            <li>b. Loyalty Program</li>
-                            <li>c. Social Coalition Loyalty</li>
-                            <li>d. Cause Related Marketing</li>
-                            <li>e. Affiliation Management</li>
-                            <li>f. Influencer Management</li>
-                        </ul>
-                    </div>
                 </div>
             </div>
-        </section>
-        <!-- SECTION 2: PERFORMANCE CALCULATOR -->
-        <section class="mb-20">
-            <div class="bg-white border border-gray-200 rounded-2xl p-8 md:p-12 shadow-sm">
-                <div class="text-center mb-10">
-                    <h2 class="text-3xl font-bold text-gray-900 mb-2">2. Aggiungi Servizi a Performance</h2>
-                    <p class="text-gray-600">Paga solo per i risultati. Definisci tu il valore dei tuoi clienti.</p>
-                </div>
-                <div class="grid md:grid-cols-2 gap-8 items-start">
-                    <!-- Inputs Grid -->
-                    <div class="grid md:grid-cols-2 gap-6">
-                        <div>
-                            <label for="clvInput" class="block text-sm font-semibold text-gray-700 mb-2 uppercase tracking-wide">Customer Lifetime Value (CLV)</label>
-                            <div class="relative">
-                                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-                                    <span class="text-gray-500 sm:text-sm">€</span>
-                                </div>
-                                <input type="number" id="clvInput" placeholder="Es. 300" class="custom-input pl-7" oninput="calculateTotal()">
-                            </div>
-                            <p class="text-xs text-gray-400 mt-1">Valore medio di un cliente nel tempo</p>
-                        </div>
-                        <div>
-                            <label for="percentageInput" class="block text-sm font-semibold text-gray-700 mb-2 uppercase tracking-wide">Percentuale a Performance</label>
-                            <div class="relative">
-                                <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-                                    <span class="text-gray-500 sm:text-sm">%</span>
-                                </div>
-                                <input type="number" id="percentageInput" placeholder="Es. 25" class="custom-input pr-7" oninput="calculateTotal()">
-                            </div>
-                            <p class="text-xs text-gray-400 mt-1">La tua fee sul valore generato</p>
-                        </div>
-                    </div>
-                    <!-- Cost Per Client Display -->
-                    <div class="bg-gray-50 rounded-xl p-6 border border-gray-100 flex flex-col justify-center items-center h-full md:h-auto">
-                        <div class="text-sm font-medium text-gray-500 mb-1">Costo per Nuovo Cliente</div>
-                        <div class="text-4xl font-extrabold text-blue-600" id="costPerClient">€0.00</div>
-                        <div class="text-xs text-gray-400 mt-2">Calcolato come (CLV × %)</div>
-                    </div>
-                </div>
-                <div class="mt-10 pt-8 border-t border-gray-100">
-                    <div class="flex justify-between items-end mb-4">
-                        <label for="clientsInput" class="block text-sm font-semibold text-gray-700 uppercase tracking-wide">Nuovi Clienti Acquisiti (Simulazione)</label>
-                        <span id="clientsValue" class="text-2xl font-bold text-gray-900 bg-white px-3 py-1 rounded border border-gray-200 shadow-sm">0</span>
-                    </div>
-                    <input type="range" id="clientsInput" min="0" max="500" value="0" step="1" oninput="calculateTotal()">
-                    <div class="flex justify-between text-xs text-gray-400 mt-2 font-medium">
-                        <span>0</span>
-                        <span>100</span>
-                        <span>250</span>
-                        <span>500+</span>
-                    </div>
                 </div>
             </div>
-        </section>
-        <!-- SECTION 3: SUMMARY -->
-        <section class="mb-20">
-            <div class="bg-slate-900 text-white rounded-3xl p-8 md:p-12 shadow-2xl overflow-hidden relative">
-                <!-- Decorative background elements -->
-                <div class="absolute top-0 right-0 w-64 h-64 bg-blue-600 rounded-full mix-blend-multiply filter blur-3xl opacity-20 -translate-y-1/2 translate-x-1/2"></div>
-                <div class="absolute bottom-0 left-0 w-64 h-64 bg-indigo-600 rounded-full mix-blend-multiply filter blur-3xl opacity-20 translate-y-1/2 -translate-x-1/2"></div>
-                <h3 class="text-2xl md:text-3xl font-bold mb-8 text-center relative z-10">Riepilogo del Tuo Investimento</h3>
-                <div class="grid md:grid-cols-3 gap-8 text-center relative z-10 divide-y md:divide-y-0 md:divide-x divide-slate-700">
-                    <div class="p-4">
-                        <div class="text-slate-400 text-sm uppercase tracking-wider mb-2">Pacchetto Base</div>
-                        <div class="text-2xl font-bold text-white" id="selectedPackageDisplay">Nessuno</div>
-                    </div>
-                    <div class="p-4">
-                        <div class="text-slate-400 text-sm uppercase tracking-wider mb-2">Costo a Performance</div>
-                        <div class="text-2xl font-bold text-blue-400" id="performanceTotal">€0</div>
-                    </div>
-                    <div class="p-4 md:pl-8">
-                        <div class="text-slate-400 text-sm uppercase tracking-wider mb-2">Investimento Totale Stimato</div>
-                        <div class="text-4xl md:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-emerald-400" id="totalCost">€0</div>
-                    </div>
-                </div>
-                <div class="text-center mt-12 relative z-10">
-                    <button class="group relative inline-flex items-center justify-center px-8 py-4 text-base font-bold text-white transition-all duration-200 bg-blue-600 rounded-full hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-600 focus:ring-offset-slate-900" onclick="generateQuote()">
                         <span class="mr-2">📋</span>
                         Copia Preventivo Personalizzato
                         <div class="absolute inset-0 rounded-full ring-2 ring-white/20 group-hover:ring-white/40 transition-all duration-200"></div>
                     </button>
-                    <p class="text-slate-500 text-sm mt-4">Il preventivo verrà copiato negli appunti per essere incollato su WhatsApp o Email.</p>
                 </div>
             </div>
-        </section>
-    </main>
-    <footer class="bg-white border-t border-gray-200 py-8">
-        <div class="container mx-auto px-6 text-center text-gray-500 text-sm">
-            <p>&copy; 2024 Digital Growth Calculator. All rights reserved.</p>
-            <div class="mt-2">
-                <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="text-blue-600 hover:underline">Built with anycoder</a>
             </div>
         </div>
-    </footer>
-    <script>
-        let selectedPackageName = null;
-        let packageCost = 0;
-        // Format Currency Helper
-        const formatMoney = (amount) => {
-            return new Intl.NumberFormat('it-IT', { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }).format(amount);
-        };
-        const formatMoneyDetailed = (amount) => {
-            return new Intl.NumberFormat('it-IT', { style: 'currency', currency: 'EUR', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(amount);
-        };
-        function selectPackage(name, cost) {
-            // Remove selected class from all cards
-            document.querySelectorAll('.price-card').forEach(card => card.classList.remove('selected'));
-            // Add selected class to clicked card
-            event.currentTarget.classList.add('selected');
-            // Update State
-            selectedPackageName = name;
-            packageCost = cost;
-            // Update UI
-            document.getElementById('selectedPackageDisplay').textContent = `${name} (${formatMoney(cost)})`;
-            // Trigger animation on total cost
-            const totalEl = document.getElementById('totalCost');
-            totalEl.classList.remove('price-update-anim');
-            void totalEl.offsetWidth; // trigger reflow
-            totalEl.classList.add('price-update-anim');
-            calculateTotal();
-        }
-        function calculateTotal() {
-            // Read inputs
-            const clv = parseFloat(document.getElementById('clvInput').value) || 0;
-            const percentage = parseFloat(document.getElementById('percentageInput').value) || 0;
-            const clients = parseInt(document.getElementById('clientsInput').value, 10);
-            // Update slider display
-            document.getElementById('clientsValue').textContent = clients;
-            // Calculate Cost Per Client
-            const costPerClient = clv * (percentage / 100);
-            document.getElementById('costPerClient').textContent = formatMoneyDetailed(costPerClient);
-            // Calculate Total Performance Cost
-            const performanceCost = clients * costPerClient;
-            document.getElementById('performanceTotal').textContent = formatMoney(performanceCost);
-            // Calculate Grand Total
-            const total = packageCost + performanceCost;
-            document.getElementById('totalCost').textContent = formatMoney(total);
-        }
-        function generateQuote() {
-            if (!selectedPackageName) {
-                alert('Per favore, seleziona prima un pacchetto base.');
-                // Scroll to top section
-                document.querySelector('.grid.md\\:grid-cols-3').scrollIntoView({ behavior: 'smooth' });
-                return;
-            }
-            const clv = document.getElementById('clvInput').value || 'N/D';
-            const percentage = document.getElementById('percentageInput').value || 'N/D';
-            const clients = document.getElementById('clientsInput').value;
-            const costPerClient = (parseFloat(clv) || 0) * ((parseFloat(percentage) || 0) / 100);
-            const performanceCost = costPerClient * parseInt(clients, 10);
-            const total = packageCost + performanceCost;
-            // Construct Quote String
-            let quote = `--- PREVENTIVO SERVIZI DIGITALI ---\n\n`;
-            quote += `PACCHETTO BASE SELEZIONATO: ${selectedPackageName.toUpperCase()}\n`;
-            quote += `• Costo Una Tantum: ${formatMoney(packageCost)}\n\n`;
-            if (performanceCost > 0) {
-                quote += `SIMULAZIONE SERVIZI A PERFORMANCE\n`;
-                quote += `• CLV Stimato: €${clv}\n`;
-                quote += `• Fee a Performance: ${percentage}%\n`;
-                quote += `• Costo per Nuovo Cliente: ${formatMoneyDetailed(costPerClient)}\n`;
-                quote += `• Nuovi Clienti Acquisiti: ${clients}\n`;
-                quote += `• Costo Totale Performance: ${formatMoney(performanceCost)}\n\n`;
-            } else {
-                quote += `NESSUN COSTO A PERFORMANCE CALCOLATO\n\n`;
-            }
-            quote += `--- RIEPILOGO INVESTIMENTO ---\n`;
-            quote += `TOTALE PREVISTO: ${formatMoney(total)}\n\n`;
-            quote += `Preventivo generato il ${new Date().toLocaleDateString('it-IT', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' })}.\n`;
-            quote += `Calcolato tramite DigitalGrowthCalc.`;
-            // Copy to clipboard
-            navigator.clipboard.writeText(quote).then(() => {
-                const btn = document.querySelector('button[onclick="generateQuote()"]');
-                const originalText = btn.innerHTML;
-                btn.innerHTML = '<span class="mr-2">✅</span> Copiato!';
-                btn.classList.add('bg-green-600', 'hover:bg-green-700');
-                btn.classList.remove('bg-blue-600', 'hover:bg-blue-700');
-                setTimeout(() => {
-                    btn.innerHTML = originalText;
-                    btn.classList.remove('bg-green-600', 'hover:bg-green-700');
-                    btn.classList.add('bg-blue-600', 'hover:bg-blue-700');
-                }, 2000);
-            }, (err) => {
-                console.error('Errore copia: ', err);
-                alert('Errore nella copia del preventivo. Riprova.');
-            });
-        }
-        // Initialize on load
-        document.addEventListener('DOMContentLoaded', () => {
-            calculateTotal();
-        });
-    </script>
-</body>
-</html>

 <!DOCTYPE html>
 <html lang="it">
 <head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Calcolatore Prezzi Avanzato - Servizi Digitali</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <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=Inter:wght@300;400;500;600;700;800&display=swap"
+    rel="stylesheet">
+  <style>
+    :root {
+      --primary-color: #2563eb;
+      --primary-hover: #1d4ed8;
+      --bg-color: #f8fafc;
+      --text-color: #0f172a;
+    }
+    body {
+      font-family: 'Inter', sans-serif;
+      background-color: var(--bg-color);
+      color: var(--text-color);
+      scroll-behavior: smooth;
+    }
+    ::-webkit-scrollbar {
+      width: 8px;
+    }
+    ::-webkit-scrollbar-track {
+      background: #f1f1f1;
+    }
+    ::-webkit-scrollbar-thumb {
+      background: #cbd5e1;
+      border-radius: 4px;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background: #94a3b8;
+    }
+    .price-card {
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      border: 1px solid #e2e8f0;
+      position: relative;
+      overflow: hidden;
+    }
+    .price-card:hover {
+      transform: translateY(-5px);
+      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+      border-color: #cbd5e1;
+    }
+    .price-card.selected {
+      border-color: var(--primary-color);
+      box-shadow: 0 0 0 2px var(--primary-color);
+      background-color: #eff6ff;
+      transform: scale(1.02);
+      z-index: 10;
+    }
+    .check-icon {
+      opacity: 0;
+      transform: scale(0.5);
+      transition: all 0.3s ease;
+      position: absolute;
+      top: 1rem;
+      right: 1rem;
+      background-color: var(--primary-color);
+      color: white;
+      border-radius: 50%;
+      width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+    }
+    .price-card.selected .check-icon {
+      opacity: 1;
+      transform: scale(1);
+    }
+    .custom-input {
+      background-color: #fff;
+      border: 1px solid #cbd5e1;
+      border-radius: 0.5rem;
+      padding: 0.5rem 1rem;
+      transition: all 0.2s;
+      width: 100%;
+    }
+    .custom-input:focus {
+      outline: none;
+      border-color: var(--primary-color);
+      box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+    }
+    input[type=range] {
+      -webkit-appearance: none;
+      width: 100%;
+      background: transparent;
+    }
+    input[type=range]::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      height: 24px;
+      width: 24px;
+      border-radius: 50%;
+      background: var(--primary-color);
+      cursor: pointer;
+      margin-top: -10px;
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+      transition: transform 0.1s;
+    }
+    input[type=range]::-webkit-slider-thumb:hover {
+      transform: scale(1.1);
+    }
+    input[type=range]::-webkit-slider-runnable-track {
+      width: 100%;
+      height: 4px;
+      cursor: pointer;
+      background: #e2e8f0;
+      border-radius: 2px;
+    }
+    input[type=range]::-moz-range-thumb {
+      height: 24px;
+      width: 24px;
+      border: none;
+      border-radius: 50%;
+      background: var(--primary-color);
+      cursor: pointer;
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+    }
+    input[type=range]::-moz-range-track {
+      width: 100%;
+      height: 4px;
+      cursor: pointer;
+      background: #e2e8f0;
+      border-radius: 2px;
+    }
+    .feature-list {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+    .feature-list li {
+      display: flex;
+      align-items: flex-start;
+      margin-bottom: 0.5rem;
+      font-size: 0.9rem;
+      line-height: 1.5;
+      color: #475569;
+    }
+    .feature-list li::before {
+      content: '✓';
+      color: var(--primary-color);
+      font-weight: 700;
+      margin-right: 0.5rem;
+      flex-shrink: 0;
+      font-size: 1rem;
+    }
+    .feature-list li.highlight {
+      font-weight: 600;
+      color: #1e293b;
+    }
+    .price-update-anim {
+      animation: pulse-green 0.5s ease-in-out;
+    }
+    @keyframes pulse-green {
+      0% { color: inherit; }
+      50% { color: #16a34a; }
+      100% { color: inherit; }
+    }
+    /* Simulator Styles */
+    .simulator-card {
+      background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+      border-radius: 1.5rem;
+      overflow: hidden;
+      position: relative;
+    }
+    .simulator-card::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 4px;
+      background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899);
+    }
+    .stat-card {
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      border-radius: 1rem;
+      backdrop-filter: blur(10px);
+      transition: all 0.3s ease;
+    }
+    .stat-card:hover {
+      background: rgba(255, 255, 255, 0.08);
+      transform: translateY(-2px);
+    }
+    .progress-ring {
+      transform: rotate(-90deg);
+    }
+    .progress-ring-circle {
+      transition: stroke-dashoffset 0.5s ease;
+    }
+    .timeline-bar {
+      height: 8px;
+      border-radius: 4px;
+      background: #e2e8f0;
+      overflow: hidden;
+    }
+    .timeline-progress {
+      height: 100%;
+      border-radius: 4px;
+      background: linear-gradient(90deg, #3b82f6, #8b5cf6);
+      transition: width 0.5s ease;
+    }
+    .growth-indicator {
+      animation: float 3s ease-in-out infinite;
+    }
+    @keyframes float {
+      0%, 100% { transform: translateY(0); }
+      50% { transform: translateY(-10px); }
+    }
+    .pulse-dot {
+      animation: pulse 2s infinite;
+    }
+    @keyframes pulse {
+      0%, 100% { transform: scale(1); opacity: 1; }
+      50% { transform: scale(1.5); opacity: 0.5; }
+    }
+    .chart-bar {
+      transition: height 0.5s ease;
+    }
+    .fade-in {
+      animation: fadeIn 0.5s ease forwards;
+    }
+    @keyframes fadeIn {
+      from { opacity: 0; transform: translateY(20px); }
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .stagger-1 { animation-delay: 0.1s; }
+    .stagger-2 { animation-delay: 0.2s; }
+    .stagger-3 { animation-delay: 0.3s; }
+    .stagger-4 { animation-delay: 0.4s; }
+  </style>
 </head>
 <body class="antialiased selection:bg-blue-100 selection:text-blue-900">
+  <!-- Navigation / Branding -->
+  <nav class="bg-white/80 backdrop-blur-md border-b border-gray-200 sticky top-0 z-50">
+    <div class="container mx-auto px-6 py-4 flex justify-between items-center">
+      <div class="flex items-center space-x-2">
+        <div class="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center text-white font-bold text-lg">D
         </div>
+        <span class="text-xl font-bold text-gray-900 tracking-tight">DigitalGrowth<span class="text-blue-600">Calc</span></span>
+      </div>
+      <div class="text-sm font-medium text-gray-500">
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank"
+          class="hover:text-blue-600 transition-colors">Built with anycoder</a>
+      </div>
+    </div>
+  </nav>
+  <header class="bg-gradient-to-b from-white to-blue-50/50 py-16 md:py-24 border-b border-gray-100">
+    <div class="container mx-auto px-6 text-center max-w-4xl">
+      <span class="inline-block py-1 px-3 rounded-full bg-blue-100 text-blue-700 text-xs font-bold tracking-wide uppercase mb-4">Preventivo 2024</span>
+      <h1 class="text-4xl md:text-6xl font-extrabold text-gray-900 mb-6 leading-tight tracking-tight">
+        Calcolatore di
+        <span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-600">Investimento Digitale</span>
+      </h1>
+      <p class="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto leading-relaxed">
+        Configura il tuo piano di crescita su misura. Scegli il pacchetto, stima le performance e ottieni un preventivo
+        istantaneo.
+      </p>
+    </div>
+  </header>
+  <main class="container mx-auto px-4 md:px-6 py-12 max-w-7xl">
+    <!-- SECTION 1: PACKAGES -->
+    <section class="mb-20">
+      <div class="flex flex-col md:flex-row justify-between items-end mb-10 gap-4">
+        <div>
+          <h2 class="text-3xl font-bold text-gray-900">1. Scegli il tuo Pacchetto Base</h2>
+          <p class="text-gray-500 mt-2">Seleziona il livello di servizio adatto alle tue esigenze.</p>
+        </div>
+      </div>
+      <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+        <!-- STANDARD CARD -->
+        <div class="price-card bg-white rounded-2xl p-8 cursor-pointer group" onclick="selectPackage('Standard', 2500)">
+          <div class="check-icon">✓</div>
+          <div class="mb-6">
+            <h3 class="text-2xl font-bold text-gray-900">Standard</h3>
+            <p class="text-gray-500 text-sm mt-1">Per chi inizia la crescita.</p>
+          </div>
+          <div class="flex items-baseline mb-8">
+            <span class="text-4xl font-extrabold text-gray-900">€2.500</span>
+            <span class="text-gray-500 ml-2 font-medium">una tantum</span>
+          </div>
+          <div class="space-y-4 mb-8">
+            <div class="h-px bg-gray-100 w-full"></div>
+            <ul class="feature-list space-y-3 max-h-[400px] overflow-y-auto pr-2 custom-scrollbar">
+              <li class="highlight">Paid Search Competitor</li>
+              <li class="highlight">Keyword Analysis & Planner</li>
+              <li><strong>20-</strong> Editing (Copy/Headline)</li>
+              <li><strong>4-</strong> Video per campagna</li>
+              <li>Video Editor & Designer Dedicato</li>
+              <li><strong>2-</strong> Ad Copy & Graphics</li>
+              <li>Google Ads (Search & Video)</li>
+              <li>Performance Max Campaign</li>
+              <li>Configurazione Account & Analytics</li>
+              <li>Targeting & Reporting</li>
+              <li>Gestione Conversioni</li>
+              <li>Creazione Contenuti Email</li>
+              <li><strong>2-</strong> Landing Pages Sponsor</li>
+              <li>Widget Integration (Survey & Form)</li>
+              <li>Contest & Micro Influencer</li>
+              <li class="mt-4 font-bold text-blue-800 text-sm uppercase tracking-wide">Performance Price Include:</li>
+              <li>Demand Generation Campaign</li>
+              <li>Sales & Customer Agent App</li>
+            </ul>
+          </div>
         </div>
+        <!-- GOLD CARD -->
+        <div
+          class="price-card bg-white rounded-2xl p-8 cursor-pointer relative border-blue-600 ring-1 ring-blue-600 group"
+          onclick="selectPackage('Gold', 3500)">
+          <div class="absolute -top-4 left-1/2 -translate-x-1/2">
+            <span class="bg-blue-600 text-white px-5 py-1.5 rounded-full text-sm font-bold tracking-wide shadow-lg shadow-blue-600/30">Consigliato</span>
+          </div>
+          <div class="check-icon">✓</div>
+          <div class="mb-6">
+            <h3 class="text-2xl font-bold text-gray-900">Gold</h3>
+            <p class="text-gray-500 text-sm mt-1">Per accelerare le performance.</p>
+          </div>
+          <div class="flex items-baseline mb-8">
+            <span class="text-4xl font-extrabold text-gray-900">€3.500</span>
+            <span class="text-gray-500 ml-2 font-medium">una tantum</span>
+          </div>
+          <div class="space-y-4 mb-8">
+            <div class="h-px bg-gray-100 w-full"></div>
+            <ul class="feature-list space-y-3 max-h-[500px] overflow-y-auto pr-2 custom-scrollbar">
+              <li class="font-bold text-blue-600">Tutto dello Standard, più:</li>
+              <li><strong>30-</strong> Editing (Copy/Headline)</li>
+              <li><strong>10-</strong> Video per campagna</li>
+              <li><strong>3-</strong> Ad Copy & Graphics</li>
+              <li>Google Shopping</li>
+              <li>Integrazione Merchant Center</li>
+              <li>Customer Match (con CRM)</li>
+              <li>Email Marketing Aziendale</li>
+              <li><strong>2-</strong> Multi Landing Pages & A/B Test</li>
+              <li><strong>1-</strong> Store eCommerce Landing</li>
+              <li>Plugin Loyalty & Referral</li>
+              <li>Contest + Professional Influencer</li>
+              <li>CSR: Web Disclosure & Impact</li>
+              <li class="mt-4 font-bold text-blue-800 text-sm uppercase tracking-wide">Performance Price Include:</li>
+              <li>ML Analytics Application</li>
+              <li>Customer Advanced Data Analytics</li>
+              <li>Market & Competitive Intelligence</li>
+              <li class="font-semibold text-gray-800">Advanced Program (1 incluso):</li>
+              <li>a. Referral Martech App</li>
+              <li>b. Loyalty Program</li>
+              <li>c. Social Coalition Loyalty</li>
+              <li>d. Cause Related Marketing</li>
+              <li>e. Affiliation Management</li>
+              <li>f. Influencer Management</li>
+            </ul>
+          </div>
+        </div>
+        <!-- PLATINUM CARD -->
+        <div class="price-card bg-white rounded-2xl p-8 cursor-pointer group" onclick="selectPackage('Platinum', 5000)">
+          <div class="check-icon">✓</div>
+          <div class="mb-6">
+            <h3 class="text-2xl font-bold text-gray-900">Platinum</h3>
+            <p class="text-gray-500 text-sm mt-1">Soluzione completa di dominio.</p>
+          </div>
+          <div class="flex items-baseline mb-8">
+            <span class="text-4xl font-extrabold text-gray-900">€5.000</span>
+            <span class="text-gray-500 ml-2 font-medium">una tantum</span>
+          </div>
+          <div class="space-y-4 mb-8">
+            <div class="h-px bg-gray-100 w-full"></div>
+            <ul class="feature-list space-y-3 max-h-[500px] overflow-y-auto pr-2 custom-scrollbar">
+              <li class="font-bold text-blue-600">Tutto del Gold, più:</li>
+              <li><strong>50-</strong> Editing (Copy/Headline)</li>
+              <li><strong>20-</strong> Video per campagna</li>
+              <li><strong>5-</strong> Ad Copy & Graphics</li>
+              <li>Integrazione Piattaforme Multiple</li>
+              <li>Campagne Asset Affiliati</li>
+              <li>Tools Campagne Avanzate</li>
+              <li>Co-Marketing Multichannel</li>
+              <li><strong>2-</strong> Landing Pages Evento</li>
+              <li><strong>5-</strong> Multi Landing Pages & A/B Test</li>
+              <li><strong>2-</strong> Store eCommerce Landing</li>
+              <li>CSR: Metodo Cultural Impact</li>
+              <li>CSR: Media Relations</li>
+              <li>Generative AI App (inclusa)</li>
+              <li class="font-semibold text-gray-800">Advanced Program (2 inclusi):</li>
+              <li>a. Referral Martech App</li>
+              <li>b. Loyalty Program</li>
+              <li>c. Social Coalition Loyalty</li>
+              <li>d. Cause Related Marketing</li>
+              <li>e. Affiliation Management</li>
+              <li>f. Influencer Management</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- SECTION 2: PERFORMANCE CALCULATOR -->
+    <section class="mb-20">
+      <div class="bg-white border border-gray-200 rounded-2xl p-8 md:p-12 shadow-sm">
+        <div class="text-center mb-10">
+          <h2 class="text-3xl font-bold text-gray-900 mb-2">2. Aggiungi Servizi a Performance</h2>
+          <p class="text-gray-600">Paga solo per i risultati. Definisci tu il valore dei tuoi clienti.</p>
+        </div>
+        <div class="grid md:grid-cols-2 gap-8 items-start">
+          <!-- Inputs Grid -->
+          <div class="grid md:grid-cols-2 gap-6">
+            <div>
+              <label for="clvInput" class="block text-sm font-semibold text-gray-700 mb-2 uppercase tracking-wide">Customer Lifetime Value (CLV)</label>
+              <div class="relative">
+                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                  <span class="text-gray-500 sm:text-sm">€</span>
                 </div>
+                <input type="number" id="clvInput" placeholder="Es. 300" class="custom-input pl-7" oninput="calculateTotal()">
+              </div>
+              <p class="text-xs text-gray-400 mt-1">Valore medio di un cliente nel tempo</p>
             </div>
+            <div>
+              <label for="percentageInput" class="block text-sm font-semibold text-gray-700 mb-2 uppercase tracking-wide">Percentuale a Performance</label>
+              <div class="relative">
+                <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+                  <span class="text-gray-500 sm:text-sm">%</span>
                 </div>
+                <input type="number" id="percentageInput" placeholder="Es. 25" class="custom-input pr-7" oninput="calculateTotal()">
+              </div>
+              <p class="text-xs text-gray-400 mt-1">La tua fee sul valore generato</p>
             </div>
+          </div>
+          <!-- Cost Per Client Display -->
+          <div
+            class="bg-gray-50 rounded-xl p-6 border border-gray-100 flex flex-col justify-center items-center h-full md:h-auto">
+            <div class="text-sm font-medium text-gray-500 mb-1">Costo per Nuovo Cliente</div>
+            <div class="text-4xl font-extrabold text-blue-600" id="costPerClient">€0.00</div>
+            <div class="text-xs text-gray-400 mt-2">Calcolato come (CLV × %)</div>
+          </div>
+        </div>
+        <div class="mt-10 pt-8 border-t border-gray-100">
+          <div class="flex justify-between items-end mb-4">
+            <label for="clientsInput" class="block text-sm font-semibold text-gray-700 uppercase tracking-wide">Nuovi Clienti Acquisiti (Simulazione)</label>
+            <span id="clientsValue" class="text-2xl font-bold text-gray-900 bg-white px-3 py-1 rounded border border-gray-200 shadow-sm">0</span>
+          </div>
+          <input type="range" id="clientsInput" min="0" max="500" value="0" step="1" oninput="calculateTotal()">
+          <div class="flex justify-between text-xs text-gray-400 mt-2 font-medium">
+            <span>0</span>
+            <span>100</span>
+            <span>250</span>
+            <span>500+</span>
+          </div>
+        </div>
+      </div>
+    </section>
+    <!-- SECTION 3: SUMMARY -->
+    <section class="mb-20">
+      <div class="bg-slate-900 text-white rounded-3xl p-8 md:p-12 shadow-2xl overflow-hidden relative">
+        <!-- Decorative background elements -->
+        <div
+          class="absolute top-0 right-0 w-64 h-64 bg-blue-600 rounded-full mix-blend-multiply filter blur-3xl opacity-20 -translate-y-1/2 translate-x-1/2">
+        </div>
+        <div
+          class="absolute bottom-0 left-0 w-64 h-64 bg-indigo-600 rounded-full mix-blend-multiply filter blur-3xl opacity-20 translate-y-1/2 -translate-x-1/2">
+        </div>
+        <h3 class="text-2xl md:text-3xl font-bold mb-8 text-center relative z-10">Riepilogo del Tuo Investimento</h3>
+        <div
+          class="grid md:grid-cols-3 gap-8 text-center relative z-10 divide-y md:divide-y-0 md:divide-x divide-slate-700">
+          <div class="p-4">
+            <div class="text-slate-400 text-sm uppercase tracking-wider mb-2">Pacchetto Base</div>
+            <div class="text-2xl font-bold text-white" id="selectedPackageDisplay">Nessuno</div>
+          </div>
+          <div class="p-4">
+            <div class="text-slate-400 text-sm uppercase tracking-wider mb-2">Costo a Performance</div>
+            <div class="text-2xl font-bold text-blue-400" id="performanceTotal">€0</div>
+          </div>
+          <div class="p-4 md:pl-8">
+            <div class="text-slate-400 text-sm uppercase tracking-wider mb-2">Investimento Totale Stimato</div>
+            <div
+              class="text-4xl md:text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-emerald-400"
+              id="totalCost">€0</div>
+          </div>
+        </div>
+        <div class="text-center mt-12 relative z-10">
+          <button class="group relative inline-flex items-center justify-center px-8 py-4 text-base font-bold text-white transition-all duration-200 bg-blue-600 rounded-full hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-600 focus:ring-offset-slate-900" onclick="generateQuote()">
                         <span class="mr-2">📋</span>
                         Copia Preventivo Personalizzato
                         <div class="absolute inset-0 rounded-full ring-2 ring-white/20 group-hover:ring-white/40 transition-all duration-200"></div>
                     </button>
+          <p class="text-slate-500 text-sm mt-4">Il preventivo verrà copiato negli appunti per essere incollato su
+            WhatsApp o Email.</p>
+        </div>
+      </div>
+    </section>
+    <!-- SECTION 4: ROI SIMULATOR -->
+    <section class="mb-20">
+      <div class="simulator-card p-8 md:p-12">
+        <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8 gap-4">
+          <div>
+            <div class="flex items-center gap-3 mb-2">
+              <span class="p-2 bg-white/10 rounded-lg">
+                <svg class="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
+                </svg>
+              </span>
+              <h2 class="text-3xl font-bold text-white">3. Simulatore ROI & Crescita</h2>
+            </div>
+            <p class="text-slate-400">Proiezione dei ritorni sull'investimento e timeline di crescita</p>
+          </div>
+          <div class="flex items-center gap-2 bg-white/10 px-4 py-2 rounded-full">
+            <span class="pulse-dot w-2 h-2 bg-green-400 rounded-full"></span>
+            <span class="text-sm text-slate-300">Simulazione in tempo reale</span>
+          </div>
+        </div>
+        <!-- Simulator Inputs -->
+        <div class="grid md:grid-cols-3 gap-6 mb-10">
+          <div class="stat-card p-5">
+            <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3">Durata Campagna (Mesi)</label>
+            <input type="range" id="campaignMonths" min="3" max="24" value="6" class="w-full mb-2" oninput="calculateROI()">
+            <div class="flex justify-between items-center">
+              <span class="text-2xl font-bold text-white" id="monthsValue">6</span>
+              <span class="text-sm text-slate-400">mesi</span>
+            </div>
+          </div>
+          <div class="stat-card p-5">
+            <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3">Tasso Conversione (%)</label>
+            <input type="range" id="conversionRate" min="1" max="15" value="3" step="0.5" class="w-full mb-2" oninput="calculateROI()">
+            <div class="flex justify-between items-center">
+              <span class="text-2xl font-bold text-white" id="conversionValue">3</span>
+              <span class="text-sm text-slate-400">%</span>
+            </div>
+          </div>
+          <div class="stat-card p-5">
+            <label class="block text-xs font-semibold text-slate-400 uppercase tracking-wider mb-3">Valore Medio Ordine (€)</label>
+            <input type="number" id="avgOrderValue" placeholder="Es. 150" value="150" class="custom-input bg-white/5 border-white/10 text-white placeholder-slate-500" oninput="calculateROI()">
+          </div>
+        </div>
+        <!-- ROI Results Grid -->
+        <div class="grid md:grid-cols-4 gap-4 mb-10">
+          <div class="stat-card p-6 text-center fade-in stagger-1">
+            <div class="text-slate-400 text-xs uppercase tracking-wider mb-2">Ritorno Investimento</div>
+            <div class="text-3xl font-bold text-emerald-400" id="roiPercent">0%</div>
+            <div class="text-xs text-slate-500 mt-1">ROI totale</div>
+          </div>
+          <div class="stat-card p-6 text-center fade-in stagger-2">
+            <div class="text-slate-400 text-xs uppercase tracking-wider mb-2">Ricavi Stimati</div>
+            <div class="text-3xl font-bold text-blue-400" id="projectedRevenue">€0</div>
+            <div class="text-xs text-slate-500 mt-1">12 mesi</div>
+          </div>
+          <div class="stat-card p-6 text-center fade-in stagger-3">
+            <div class="text-slate-400 text-xs uppercase tracking-wider mb-2">Break-even</div>
+            <div class="text-3xl font-bold text-purple-400" id="breakEven">0</div>
+            <div class="text-xs text-slate-500 mt-1">nuovi clienti</div>
+          </div>
+          <div class="stat-card p-6 text-center fade-in stagger-4">
+            <div class="text-slate-400 text-xs uppercase tracking-wider mb-2">Cliente Netto</div>
+            <div class="text-3xl font-bold text-amber-400" id="netPerClient">€0</div>
+            <div class="text-xs text-slate-500 mt-1">dopo costi</div>
+          </div>
+        </div>
+        <!-- Visual Timeline & Charts -->
+        <div class="grid md:grid-cols-2 gap-8">
+          <!-- Growth Timeline -->
+          <div class="stat-card p-6">
+            <h4 class="text-white font-semibold mb-6 flex items-center gap-2">
+              <svg class="w-5 h-5 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
+              </svg>
+              Timeline Crescita Mensile
+            </h4>
+            <div class="space-y-3" id="timelineBars">
+              <!-- Bars will be generated by JS -->
+            </div>
+          </div>
+          <!-- Funnel Visualization -->
+          <div class="stat-card p-6">
+            <h4 class="text-white font-semibold mb-6 flex items-center gap-2">
+              <svg class="w-5 h-5 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z"></path>
+              </svg>
+              Funnel Conversione
+            </h4>
+            <div class="flex items-center justify-center gap-2">
+              <div class="flex-1 text-center">
+                <div class="bg-blue-500/20 rounded-t-lg p-4 border border-blue-500/30">
+                  <div class="text-2xl font-bold text-white" id="impressions">0</div>
+                  <div class="text-xs text-slate-400">Impression</div>
+                </div>
+                <div class="bg-blue-500/30 p-3 border-x border-b border-blue-500/30">
+                  <div class="text-lg font-bold text-blue-300" id="clicks">0</div>
+                  <div class="text-xs text-slate-400">Clic</div>
+                </div>
+                <div class="bg-blue-500/40 p-3 border-x border-b border-blue-500/30">
+                  <div class="text-lg font-bold text-blue-200" id="leads">0</div>
+                  <div class="text-xs text-slate-400">Lead</div>
                 </div>
+                <div class="bg-emerald-500/50 rounded-b-lg p-4 border border-emerald-500/30">
+                  <div class="text-2xl font-bold text-emerald-300" id="customers">0</div>
+                  <div class="text-xs text-slate-400">Clienti</div>
+                </div>
+              </div>
             </div>
+            <div class="mt-4 text-center text-xs text-slate-500">
+              Basato su <span id="totalVisits">0</span> visite mensili stimate
             </div>
+          </div>
         </div>
+        <!-- Summary Comparison -->
+        <div class="mt-8 p-6 bg-white/5 rounded-xl border border-white/10">
+          <h4 class="text-white font-semibold mb-4 flex items-center gap-2">
+            <svg class="w-5 h-5 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
+            </svg>
+            Confronto Investimento vs Ritorno
+          </h4>
+          <div class="grid md:grid-cols-2 gap-8">
+            <div>
+              <div class="flex justify-between mb-2">
+                <span class="text-slate-400 text-sm">Investimento Totale</span>
+                <span class="text-white font-semibold" id="investmentCompare">€0</span>
+              </div>
+              <div class="timeline-bar">
+                <div class="timeline-progress bg-red-500/50" style="width: 30%"></div>
+              </div>
+            </div>
+            <div>
+              <div class="flex justify-between mb-2">
+                <span class="text-slate-400 text-sm">Ritorno Stimato (12 mesi)</span>
+                <span class="text-emerald-400 font-semibold" id="returnCompare">€0</span>
+              </div>
+              <div class="timeline-bar">
+                <div class="timeline-progress" style="width: 70%"></div>
+              </div>
+            </div>
+          </div>
+          <div class="mt-4 p-3 bg-emerald-500/10 rounded-lg border border-emerald-500/20 text-center">
+            <span class="text-emerald-400 font-semibold">Rapporto Rischio/Ritorno: </span>
+            <span class="text-white" id="riskReward">1 : 0</span>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+  <footer class="bg-white border-t border-gray-200 py-8">
+    <div class="container mx-auto px-6 text-center text-gray-500 text-sm">
+      <p>&copy; 2024 Digital Growth Calculator. All rights reserved.</p>
+      <div class="mt-2">
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank"
+          class="text-blue-600 hover:underline">Built with anycoder</a>
+      </div>
+    </div>
+  </footer>
+  <script>
+    let selectedPackageName = null;
+    let packageCost = 0;
+    // Format Currency Helper
+    const formatMoney = (amount) => {
+        return new Intl.NumberFormat('it-IT', { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }).format(amount);
+    };
+    const formatMoneyDetailed = (amount) => {
+        return new Intl.NumberFormat('it-IT', { style: 'currency', currency: 'EUR', minimumFractionDigits: 2, maximumFractionDigits: 2 }).format(amount);
+    };
+    function selectPackage(name, cost) {
+        // Remove selected class from all cards
+        document.querySelectorAll('.price-card').forEach(card => card.classList.remove('selected'));
+        // Add selected class to clicked card
+        event.currentTarget.classList.add('selected');
+        // Update State
+        selectedPackageName = name;
+        packageCost = cost;
+        // Update UI
+        document.getElementById('selectedPackageDisplay').textContent = `${name} (${formatMoney(cost)})`;
+        // Trigger animation on total cost
+        const totalEl = document.getElementById('totalCost');
+        totalEl.classList.remove('price-update-anim');
+        void totalEl.offsetWidth; // trigger reflow
+        totalEl.classList.add('price-update-anim');
+        calculateTotal();
+        calculateROI();
+    }
+    function calculateTotal() {
+        // Read inputs
+        const clv = parseFloat(document.getElementById('clvInput').value) || 0;
+        const percentage = parseFloat(document.getElementById('percentageInput').value) || 0;
+        const clients = parseInt(document.getElementById('clientsInput').value, 10);
+        // Update slider display
+        document.getElementById('clientsValue').textContent = clients;
+        // Calculate Cost Per Client
+        const costPerClient = clv * (percentage / 100);
+        document.getElementById('costPerClient').textContent = formatMoneyDetailed(costPerClient);
+        // Calculate Total Performance Cost
+        const performanceCost = clients * costPerClient;
+        document.getElementById('performanceTotal').textContent = formatMoney(performanceCost);
+        // Calculate Grand Total
+        const total = packageCost + performanceCost;
+        document.getElementById('totalCost').textContent = formatMoney(total);
+        // Update ROI calculator
+        calculateROI();
+    }
+    function calculateROI() {
+        // Get simulator inputs
+        const months = parseInt(document.getElementById('campaignMonths').value, 10);
+        const conversionRate = parseFloat(document.getElementById('conversionRate').value);
+        const avgOrderValue = parseFloat(document.getElementById('avgOrderValue').value) || 0;
+        // Get main calculator values
+        const clv = parseFloat(document.getElementById('clvInput').value) || 150;
+        const performancePercent = parseFloat(document.getElementById('percentageInput').value) || 25;
+        const clientsAcquired = parseInt(document.getElementById('clientsInput').value, 10) || 10;
+        // Update display values
+        document.getElementById('monthsValue').textContent = months;
+        document.getElementById('conversionValue').textContent = conversionRate;
+        // Calculate projected revenue (monthly clients * CLV * months)
+        const monthlyRevenue = clientsAcquired * clv;
+        const totalRevenue = monthlyRevenue * months;
+        // Calculate investment
+        const performanceCost = clientsAcquired * (clv * (performancePercent / 100));
+        const totalInvestment = packageCost + performanceCost;
+        // Calculate ROI
+        const roi = totalInvestment > 0 ? ((totalRevenue - totalInvestment) / totalInvestment) * 100 : 0;
+        // Calculate break-even (how many clients needed to cover investment)
+        const costPerClientAcquired = clv * (performancePercent / 100);
+        const breakEvenClients = costPerClientAcquired > 0 ? Math.ceil(totalInvestment / costPerClientAcquired) : 0;
+        // Net per client after costs
+        const netPerClient = clv - costPerClientAcquired;
+        // Funnel calculations
+        const totalVisits = Math.round(clientsAcquired * (100 / conversionRate));
+        const impressions = Math.round(totalVisits * 10);
+        const clicks = Math.round(impressions * 0.05); // 5% CTR
+        const leads = Math.round(clicks * 0.15); // 15% lead rate
+        // Update UI
+        document.getElementById('roiPercent').textContent = `${roi.toFixed(0)}%`;
+        document.getElementById('projectedRevenue').textContent = formatMoney(totalRevenue);
+        document.getElementById('breakEven').textContent = breakEvenClients;
+        document.getElementById('netPerClient').textContent = formatMoney(netPerClient);
+        // Update funnel
+        document