File size: 27,296 Bytes
81e5370
 
 
 
 
 
8f9ffe1
 
81e5370
 
 
8f9ffe1
81e5370
 
 
5b9c1af
 
 
 
 
 
 
 
 
81e5370
 
 
5b9c1af
 
 
 
8f9ffe1
5b9c1af
8f9ffe1
5b9c1af
 
 
 
 
 
 
 
81e5370
5b9c1af
 
8f9ffe1
 
81e5370
8f9ffe1
5b9c1af
8f9ffe1
 
 
81e5370
8f9ffe1
5b9c1af
81e5370
 
 
cb7f75b
8f9ffe1
81e5370
 
 
 
8f9ffe1
81e5370
 
71ca5a7
5b9c1af
39a7a23
a3e42ff
71ca5a7
 
8f9ffe1
81e5370
8f9ffe1
 
 
81e5370
5b9c1af
81e5370
 
 
 
 
 
 
 
 
5b9c1af
 
 
 
a3e42ff
5b9c1af
 
 
 
 
8f9ffe1
 
 
 
d513067
cb7f75b
eeab221
 
862ee9b
8f9ffe1
 
599c49e
862ee9b
599c49e
8f9ffe1
 
81e5370
8f9ffe1
599c49e
862ee9b
599c49e
 
81e5370
 
8f9ffe1
 
 
63f0334
8f9ffe1
 
 
 
81e5370
 
5b9c1af
 
 
 
 
905e4b2
5b9c1af
 
 
 
 
81e5370
 
 
 
 
5b9c1af
 
 
 
 
 
 
 
 
8f9ffe1
 
 
 
 
862ee9b
8f9ffe1
862ee9b
8f9ffe1
 
 
 
 
5b9c1af
 
 
 
 
 
 
 
 
81e5370
5b9c1af
 
862ee9b
5b9c1af
8f9ffe1
862ee9b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8f9ffe1
 
 
 
 
 
 
 
862ee9b
8f9ffe1
 
 
 
 
 
 
 
862ee9b
 
 
 
 
 
 
8f9ffe1
 
5b9c1af
8f9ffe1
 
 
 
 
862ee9b
 
 
 
 
 
 
 
f84147f
 
862ee9b
 
 
 
f84147f
 
 
 
 
 
862ee9b
 
 
8f9ffe1
 
 
 
5b9c1af
8f9ffe1
 
 
 
 
 
862ee9b
8f9ffe1
 
 
862ee9b
 
 
 
 
 
 
8f9ffe1
 
 
862ee9b
 
8f9ffe1
 
862ee9b
 
 
 
 
 
8f9ffe1
81e5370
8f9ffe1
81e5370
862ee9b
 
81e5370
8f9ffe1
 
 
 
81e5370
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="McGPT - Your strategic sales companion">
    <title>Competitive Positioning Mapper</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
  
    <script>
      tailwind.config = {
        darkMode: 'class',
        theme: {
            extend: {
                colors: {
                    primary: '#6366f1',
                    secondary: '#8b5cf6',
                    dark: '#1e293b'
                }
            }
        }
      }
    </script>
    <style>
        /* --- UNIFIED HEADER STYLES --- */
        .nav-link.active {
            @apply text-primary font-medium border-b-2 border-primary;
        }
        .hamburger-line {
            @apply w-6 h-0.5 bg-white transition-all duration-300;
        }
        #mobileMenuButton.open .hamburger-line:nth-child(1) {
            transform: rotate(45deg) translate(5px, 6px);
        }
        #mobileMenuButton.open .hamburger-line:nth-child(2) {
            opacity: 0;
        }
        #mobileMenuButton.open .hamburger-line:nth-child(3) {
            transform: rotate(-45deg) translate(5px, -6px);
        }

        /* --- PAGE-SPECIFIC STYLES --- */
        select, input[type="search"] {
            -webkit-appearance: none; -moz-appearance: none; appearance: none;
        }
        select {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24' 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 0.75rem center;
            background-size: 1.25rem;
        }
        .dark select {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24' 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
        }
    </style>
</head>
<body class="bg-sky-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 min-h-screen flex flex-col">
<header class="sticky top-0 z-50 bg-white/80 dark:bg-gray-900/80 backdrop-blur-md shadow-sm">
    <div class="container mx-auto px-4 py-3">
        <div class="flex justify-between items-center">
            <a href="index.html" class="flex items-center space-x-2">
                <img src="https://huggingface.co/spaces/DjayChucko/EnablingSales/resolve/main/images/Scaleway-Logomark-White.png" alt="Logo" class="h-8 mr-2">
                <span class="text-xl font-bold text-gray-800 dark:text-white font-heading">McGPT</span>
            </a>
            <nav class="hidden md:flex space-x-8">

                <a href="value-mapper.html" class="nav-link py-2 px-1 text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">Mapper</a>
                <a href="intel.html" class="nav-link py-2 px-1 text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">Products</a>
                <a href="scorecard.html" class="nav-link py-2 px-1 text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">Scorecard</a>
                <a href="strategy.html" class="nav-link py-2 px-1 text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">Method</a>
                <a href="academy.html" class="nav-link py-2 px-1 text-gray-600 dark:text-gray-300 hover:text-primary transition-colors">Academy</a>
            </nav>
            <div class="flex items-center space-x-4">
                <button id="themeToggle" class="p-2 rounded-full text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700">
                    <i data-feather="moon" class="hidden dark:block"></i>
                    <i data-feather="sun" class="block dark:hidden"></i>
                </button>
                <button id="mobileMenuButton" class="md:hidden flex flex-col space-y-1.5 p-2 z-50 bg-purple-600 rounded-lg">
                    <span class="hamburger-line"></span>
                    <span class="hamburger-line"></span>
                    <span class="hamburger-line"></span>
                </button>
            </div>
        </div>
    </div>
</header>

<div id="mobileMenu" class="hidden fixed inset-0 z-40 bg-gray-900 bg-opacity-95 backdrop-blur-sm">
    <div class="flex flex-col items-center justify-center h-full space-y-8">
        <a href="index.html" class="nav-link text-3xl text-white">Home</a>
        <a href="value-mapper.html" class="nav-link text-3xl text-white">Mapper</a>
         <a href="intel.html" class="nav-link text-3xl text-white">Products</a>
        <a href="scorecard.html" class="nav-link text-3xl text-white">Scorecard</a>
        <a href="strategy.html" class="nav-link text-3xl text-white">Method</a>
        <a href="academy.html" class="nav-link text-3xl text-white">Academy</a>
    </div>
</div>
<main class="flex-grow bg-gradient-to-br from-purple-600 to-indigo-700">
    <div class="container mx-auto px-4 py-12">
        <div class="bg-white/50 dark:bg-gray-900/50 backdrop-blur-md p-6 sm:p-8 rounded-2xl shadow-2xl mb-8">
            <div class="text-center">
                    <h1 class="text-3xl sm:text-4xl font-heading font-extrabold text-gray-800 dark:text-white leading-tight">Product Mapper</h1>
                <div class="flex items-center justify-center mb-3">
 <img src="https://huggingface.co/spaces/DjayChucko/EnablingSales/resolve/main/images/3D_POP-Instances-Illustration-3D.png" alt="MEDDICC Illustration" class="w-40 mx-auto my-4">
            </div>
                <p class="text-gray-700 dark:text-gray-300 max-w-2xl mx-auto mb-8">Match competitive products and identify key differentiators instantly.</p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-8 max-w-4xl mx-auto">
                <div class="text-center">
                    <label for="scaleway-product-selector" class="block text-sm font-bold text-gray-800 dark:text-gray-200 mb-2">Find Competitors by Scaleway Product</label>
                    <select id="scaleway-product-selector" class="block w-full py-3 px-4 pr-10 border border-gray-300 dark:border-gray-600 rounded-xl text-base font-semibold text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-700 focus:ring-2 focus:ring-purple-500 focus:outline-none transition duration-200 shadow-lg text-center">
                        <option value="">- Select a Scaleway Product -</option>
                    </select>
                </div>

                <div class="text-center">
                    <label for="competitor-search" class="block text-sm font-bold text-gray-800 dark:text-gray-200 mb-2">Find Scaleway Equivalent by Competitor</label>
                    <input type="search" id="competitor-search" placeholder="e.g., EC2, S3, Blob Storage..." class="block w-full py-3 px-4 border border-gray-300 dark:border-gray-600 rounded-xl text-base font-semibold text-gray-800 dark:text-gray-200 bg-white dark:bg-gray-700 focus:ring-2 focus:ring-purple-500 focus:outline-none transition duration-200 shadow-lg text-center">
                </div>
                </div>
        </div>

        <div id="initial-message" class="text-center p-12 rounded-xl bg-white/80 dark:bg-gray-800/80 text-gray-600 dark:text-gray-300 border-2 border-dashed border-gray-400 dark:border-gray-600 backdrop-blur-sm">
            <p class="text-lg font-medium">Select a product or search for a competitor to begin.</p>
        </div>

        <div id="results-area" class="hidden space-y-6">
            </div>
    </div>
</main>

<footer class="bg-purple-800/80 dark:bg-purple-800/80 backdrop-blur-sm border-t border-gray-700">
    <div class="container mx-auto px-4 py-8">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="mb-6 md:mb-0">
                <p class="text-gray-600 dark:text-gray-300 mt-2 text-sm">
                    Strategic Tools Enabling Elite Sales
                </p>
            </div>
           
        <div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700 text-center text-sm text-gray-500 dark:text-gray-400">
            <p>&copy; 2025 McGPT. Always Be Connecting.</p>
        </div>
    </div>
</footer>

<script>
    // --- UNIFIED HEADER & THEME LOGIC ---
    const mobileMenuButton = document.getElementById('mobileMenuButton');
    const mobileMenu = document.getElementById('mobileMenu');
    mobileMenuButton.addEventListener('click', () => {
        mobileMenu.classList.toggle('hidden');
        mobileMenuButton.classList.toggle('open');
        document.body.classList.toggle('overflow-hidden');
    });

    const themeToggle = document.getElementById('themeToggle');
    const html = document.documentElement;
    themeToggle.addEventListener('click', () => {
        html.classList.toggle('dark');
        localStorage.theme = html.classList.contains('dark') ? 'dark' : 'light';
        feather.replace();
    });

    if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        html.classList.add('dark');
    } else {
        html.classList.remove('dark');
    }

    const currentPage = window.location.pathname.split('/').pop() || 'index.html';
    document.querySelectorAll('.nav-link').forEach(link => {
        const linkHref = link.getAttribute('href');
        if (linkHref === currentPage) {
            link.classList.add('active');
        } else {
            link.classList.remove('active');
        }
    });
    
    feather.replace();
    
    // --- PAGE-SPECIFIC MAPPER LOGIC ---
    const COMPETITOR_DATA = [
        { ScalewayProduct: "Dedibox", Category: "Bare Metal (Legacy)", AWS: "(Legacy)", Azure: "(Legacy)", GCP: "(Legacy)", OVHcloud: "Dedicated Servers (Eco range)", Nebius: "N/A", Outscale: "N/A", Ionos: "Dedicated Servers", Coreweave: "N/A", CleverCloud: "N/A", KeyDifferentiator: "Price & Reliability: For long-term workloads, Dedibox offers unbeatable monthly pricing on reliable dedicated hardware. A cornerstone of our offerings, trusted for years." },
        { ScalewayProduct: "Apple silicon", Category: "Bare Metal (Specialized)", AWS: "EC2 Mac Instances", Azure: "N/A", GCP: "N/A", OVHcloud: "N/A", Nebius: "N/A", Outscale: "N/A", Ionos: "N/A", Coreweave: "N/A", CleverCloud: "N/A", KeyDifferentiator: "Unique European CI/CD: The leading European cloud offering for native macOS/iOS development. Build and test your Apple apps in a sovereign environment with predictable, cost-effective hardware." },
        { ScalewayProduct: "Elastic Metal", Category: "Bare Metal", AWS: "EC2 Bare Metal", Azure: "BareMetal Infra", GCP: "Bare Metal Solution", OVHcloud: "Dedicated Servers (Advance, HG)", Nebius: "Bare Metal (GPU only)", Outscale: "Bare Metal Servers", Ionos: "Cloud Cubes", Coreweave: "N/A", CleverCloud: "N/A", KeyDifferentiator: "API-Driven & Flexible: Unlike traditional dedicated servers, our bare metal is fully API-driven and can be billed hourly, offering cloud-like flexibility with the raw power of dedicated hardware." },
        { ScalewayProduct: "Production Instances", Category: "Virtual Machines", AWS: "EC2 (M, T series)", Azure: "VMs (D, B series)", GCP: "Compute Engine", OVHcloud: "Public Cloud Instances", Nebius: "Virtual Machines", Outscale: "Cloud Instances (ECU)", Ionos: "Cloud Cubes", Coreweave: "N/A", CleverCloud: "N/A", KeyDifferentiator: "Full Ecosystem & Simplicity: Beyond just a VM, get a high-performance instance that's part of a complete, easy-to-use cloud ecosystem. Simpler to navigate and price than hyperscalers and more PaaS-rich than other EU providers." },
        { ScalewayProduct: "Cost-Optimized Instances", Category: "Virtual Machines", AWS: "EC2 (T series)", Azure: "VMs (B-series)", GCP: "Compute Engine", OVHcloud: "Public Cloud Instances", Nebius: "Virtual Machines", Outscale: "Cloud Instances (ECU)", Ionos: "Cloud Cubes", Coreweave: "N/A", CleverCloud: "N/A", KeyDifferentiator: "Predictable Low Cost: Ideal for dev/test, we offer a consistently low price without the complex credit systems or the volatility of the hyperscaler 'spot' market." },
        { ScalewayProduct: "GPU Instances", Category: "Virtual Machines (GPU)", AWS: "EC2 (P, G series)", Azure: "VMs (N series)", GCP: "Compute Engine", OVHcloud: "Public Cloud GPU", Nebius: "GPU Instances", Outscale: "GPU Instances", Ionos: "GPU Cloud Server", Coreweave: "GPU Instances", CleverCloud: "N/A", KeyDifferentiator: "Sovereign AI Ecosystem: Access the latest NVIDIA hardware in a sovereign European cloud. Unlike specialized GPU providers, we offer a complete ecosystem (storage, DBs, networking) to support your entire AI application, not just the training." },
        { ScalewayProduct: "Kubernetes Kapsule", Category: "Containers", AWS: "EKS", Azure: "AKS", GCP: "GKE", OVHcloud: "Managed Kubernetes", Nebius: "Managed Kubernetes", Outscale: "Managed Kubernetes", Ionos: "Managed Kubernetes", Coreweave: "N/A", CleverCloud: "N/A", KeyDifferentiator: "Cost-Effective & True Multi-Cloud: A CNCF-certified Kubernetes service at a fraction of the hyperscaler cost. Our free Kosmos tool lets you manage multi-cloud clusters from a single control plane—a unique feature no other European provider offers." },
        { ScalewayProduct: "Serverless Functions", Category: "Serverless", AWS: "Lambda", Azure: "Functions", GCP: "Cloud Functions", OVHcloud: "N/A", Nebius: "N/A", Outscale: "N/A", Ionos: "N/A", Coreweave: "N/A", CleverCloud: "N/A", KeyDifferentiator: "Pioneering European Serverless: The most mature European serverless functions platform. Built on open-source Knative for portability, fully integrated with our ecosystem (e.g., triggering from Object Storage events)." },
        { ScalewayProduct: "Serverless Containers", Category: "Serverless", AWS: "Fargate", Azure: "Container Instances", GCP: "Cloud Run", OVHcloud: "N/A", Nebius: "Serverless Containers", Outscale: "N/A", Ionos: "N/A", Coreweave: "N/A", CleverCloud: "N/A", KeyDifferentiator: "Open Standards & Simplicity: Deploy containers without managing servers. Our developer-friendly platform is built on open standards, offering a simpler, more portable alternative to hyperscaler-proprietary systems." },
        { ScalewayProduct: "Container Registry", Category: "Containers", AWS: "ECR", Azure: "ACR", GCP: "Artifact Registry", OVHcloud: "Managed Private Registry", Nebius: "Container Registry", Outscale: "N/A", Ionos: "Container Registry", Coreweave: "N/A", CleverCloud: "N/A", KeyDifferentiator: "Integrated & Simple: A private, secure Docker registry fully integrated with our Kubernetes and Serverless ecosystem. Simple, predictable pricing based purely on storage." },
        { ScalewayProduct: "Object Storage", Category: "Storage", AWS: "S3", Azure: "Blob Storage", GCP: "Cloud Storage", OVHcloud: "S3 Object Storage", Nebius: "Object Storage", Outscale: "S3 Object Storage", Ionos: "S3 Object Storage", Coreweave: "N/A", CleverCloud: "Cellar S3", KeyDifferentiator: "Sovereign & Predictable Egress: Fully S3-compatible, hosted in Europe for data sovereignty. Our key differentiator is a simpler, more predictable pricing model with often significantly cheaper egress fees than the competition." },
        { ScalewayProduct: "Glacier (Cold Storage)", Category: "Storage", AWS: "S3 Glacier", Azure: "Blob Archive", GCP: "Cloud Archive", OVHcloud: "Cloud Archive", Nebius: "Cold Storage", Outscale: "N/A", Ionos: "N/A", Coreweave: "N/A", CleverCloud: "N/A", KeyDifferentiator: "Low-Cost European Archive: The most cost-effective solution for long-term data archiving and backups within the EU, ensuring compliance and DR at an unbeatable price point." },
        { ScalewayProduct: "Block Storage", Category: "Storage", AWS: "EBS", Azure: "Disk Storage", GCP: "Persistent Disk", OVHcloud: "Block Storage", Nebius: "Block Storage", Outscale: "Block Storage", Ionos: "Block Storage", Coreweave: "N/A", CleverCloud: "N/A", KeyDifferentiator: "High Performance & Flexible: SSD-based block storage for your instances. Offers more predictable IOPS performance for the price compared to the complex, tiered offerings from other providers." },
        { ScalewayProduct: "Managed Databases (PG/MySQL)", Category: "Databases", AWS: "RDS", Azure: "Azure DB", GCP: "Cloud SQL", OVHcloud: "Public Cloud Databases", Nebius: "Managed DBs", Outscale: "N/A", Ionos: "Managed DBs", Coreweave: "N/A", CleverCloud: "Managed DBs", KeyDifferentiator: "Simple, Reliable, Integrated: Get a production-ready database in minutes without the feature overload and complex pricing of hyperscalers. It's the perfect balance of performance and simplicity for developers." },
        { ScalewayProduct: "Managed Database for Redis™", Category: "Databases", AWS: "ElastiCache", Azure: "Cache for Redis", GCP: "Memorystore", OVHcloud: "N/A", Nebius: "Managed Redis", Outscale: "N/A", Ionos: "N/A", Coreweave: "N/A", CleverCloud: "Managed Redis", KeyDifferentiator: "Performance Caching: Deploy a high-performance in-memory cache with one click. Simple, instance-based pricing makes it a straightforward choice for real-time applications." },
        { ScalewayProduct: "Serverless SQL DB", Category: "Databases", AWS: "Aurora Serverless", Azure: "SQL DB Serverless", GCP: "(No direct equivalent)", OVHcloud: "N/A", Nebius: "N/A", Outscale: "N/A", Ionos: "N/A", Coreweave: "N/A", CleverCloud: "N/A", KeyDifferentiator: "Unique European Offering: A fully serverless SQL database that scales to zero. Perfect for apps with unpredictable traffic, you only pay for what you use. A unique, cost-saving product in the European market." },
        { ScalewayProduct: "Private Networks (VPC)", Category: "Networking", AWS: "VPC", Azure: "Virtual Network", GCP: "VPC", OVHcloud: "vRack", Nebius: "Virtual Private Cloud", Outscale: "Virtual Private Cloud", Ionos: "Private LAN", Coreweave: "N/A", CleverCloud: "N/A", KeyDifferentiator: "Free & Secure: Completely isolate your infrastructure in a private network, free of charge. A core security feature that other clouds often monetize through add-ons and complex gateway pricing." },
        { ScalewayProduct: "Load Balancer", Category: "Networking", AWS: "ELB", Azure: "Load Balancer", GCP: "Cloud Load Balancing", OVHcloud: "Load Balancer", Nebius: "Load Balancer", Outscale: "Load Balancer", Ionos: "Load Balancer", Coreweave: "N/A", CleverCloud: "N/A", KeyDifferentiator: "Affordable High Availability: Distribute traffic to ensure high availability for your applications. Our load balancers are easy to configure and significantly more cost-effective than hyperscaler equivalents." },
        { ScalewayProduct: "Web Hosting", Category: "PaaS", AWS: "Amplify, Lightsail", Azure: "Static Web Apps", GCP: "Firebase Hosting", OVHcloud: "Web Hosting", Nebius: "N/A", Outscale: "N/A", Ionos: "Web Hosting", Coreweave: "N/A", CleverCloud: "N/A", KeyDifferentiator: "Simple & All-in-One: The easiest way to host your sites. Unlike IaaS providers, we provide an all-inclusive package with email and databases, perfect for users who aren't cloud experts." },
        { ScalewayProduct: "Transactional Email", Category: "PaaS", AWS: "SES", Azure: "Communication Services", GCP: "(Partners)", OVHcloud: "N/A", Nebius: "N/A", Outscale: "N/A", Ionos: "N/A", Coreweave: "N/A", CleverCloud: "N/A", KeyDifferentiator: "European Email Delivery: Ensure your application's emails are sent from European servers, improving deliverability and GDPR compliance. A rare PaaS offering among European IaaS providers." },
        { ScalewayProduct: "IoT Hub", Category: "PaaS", AWS: "IoT Core", Azure: "IoT Hub", GCP: "IoT Core", OVHcloud: "N/A", Nebius: "N/A", Outscale: "N/A", Ionos: "N/A", Coreweave: "N/A", CleverCloud: "N/A", KeyDifferentiator: "Secure & Scalable IoT: A straightforward, cost-effective, and sovereign solution for your European IoT deployments. An integrated PaaS product most IaaS providers lack." },
        { ScalewayProduct: "IAM", Category: "Security & Account", AWS: "IAM", Azure: "Azure AD", GCP: "Cloud IAM", OVHcloud: "User Management", Nebius: "IAM", Outscale: "IAM", Ionos: "User Management", Coreweave: "N/A", CleverCloud: "N/A", KeyDifferentiator: "Granular Control: A fundamental security tool included free with your account. Manage users, groups, and permissions with fine-grained control across all Scaleway products." },
        { ScalewayProduct: "Cockpit (Monitoring)", Category: "Management Tools", AWS: "CloudWatch", Azure: "Monitor", GCP: "Cloud's ops suite", OVHcloud: "Metrics Data Platform", Nebius: "Monitoring", Outscale: "N/A", Ionos: "Monitoring", Coreweave: "N/A", CleverCloud: "Metrics", KeyDifferentiator: "Integrated Observability: Gain a unified view of your infrastructure's health and performance. Cockpit is included by default, providing easy monitoring without the complex setup of third-party tools." },
        { ScalewayProduct: "Managed Inference", Category: "AI / ML", AWS: "SageMaker", Azure: "Azure ML", GCP: "Vertex AI", OVHcloud: "AI Deploy", Nebius: "N/A", Outscale: "N/A", Ionos: "N/A", Coreweave: "N/A", CleverCloud: "N/A", KeyDifferentiator: "Effortless & Sovereign Model Serving: Deploy trained models with a fully managed API. We handle the infrastructure and scaling in a sovereign environment, offering a simpler and more integrated experience than setting up your own GPU servers." }
    ];

    const scalewaySelector = document.getElementById('scaleway-product-selector');
    const competitorSearch = document.getElementById('competitor-search');
    const resultsArea = document.getElementById('results-area');
    const initialMessage = document.getElementById('initial-message');

    function populateScalewayDropdown() {
        const scalewayProducts = [...new Set(COMPETITOR_DATA.map(item => item.ScalewayProduct))].sort();
        scalewayProducts.forEach(product => {
            const option = document.createElement('option');
            option.value = product;
            option.textContent = product;
            scalewaySelector.appendChild(option);
        });
    }

    function displayResults(html) {
        resultsArea.innerHTML = html;
        initialMessage.classList.add('hidden');
        resultsArea.classList.remove('hidden');
        resultsArea.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }

    scalewaySelector.addEventListener('change', () => {
        const selectedProduct = scalewaySelector.value;
        competitorSearch.value = '';
        if (!selectedProduct) {
            resultsArea.classList.add('hidden');
            initialMessage.classList.remove('hidden');
            return;
        }
        
        const row = COMPETITOR_DATA.find(r => r.ScalewayProduct === selectedProduct);
        if (!row) return;

        let html = `<div class="bg-slate-900/70 backdrop-blur-sm p-6 rounded-xl shadow-lg">`;
        html += `<h2 class="text-2xl font-bold text-white mb-4">Comparison for: <span class="text-purple-400">${selectedProduct}</span></h2>`;
        html += `<p class="text-sm text-gray-400 mb-6">Category: ${row.Category}</p>`;
        
        // Competitor Equivalents Section
        html += `<div class="mb-6"><h3 class="text-lg font-semibold text-white mb-3 flex items-center"><i data-feather="shuffle" class="w-5 h-5 mr-2 text-cyan-400"></i>Competitor Equivalents</h3><div class="grid grid-cols-2 sm:grid-cols-3 gap-4 text-base">`;
        const competitors = { AWS: row.AWS, Azure: row.Azure, GCP: row.GCP, OVHcloud: row.OVHcloud, Nebius: row.Nebius, Outscale: row.Outscale, Ionos: row.Ionos, Coreweave: row.Coreweave, CleverCloud: row.CleverCloud };
        for (const [provider, product] of Object.entries(competitors)) {
            html += `<div><span class="font-semibold text-gray-100">${provider}:</span> <span class="text-gray-300">${product || 'N/A'}</span></div>`;
        }
        html += `</div></div>`;
        
        // Key Differentiation Section (MOVED HERE)
        html += `<div class="border-t border-purple-800 pt-6"><h3 class="text-lg font-semibold text-white mb-3 flex items-center"><i data-feather="zap" class="w-5 h-5 mr-2 text-yellow-400"></i>Key Differentiation & Talking Points</h3><p class="text-gray-200 bg-purple-900/30 p-4 rounded-lg">${row.KeyDifferentiator}</p></div>`;

        html += `</div>`;
        
        displayResults(html);
        feather.replace();
    });

    competitorSearch.addEventListener('input', () => {
        const searchTerm = competitorSearch.value.trim().toLowerCase();
        scalewaySelector.value = '';
        if (!searchTerm) {
            resultsArea.classList.add('hidden');
            initialMessage.classList.remove('hidden');
            return;
        }
        const results = [];
        const providers = ["AWS", "Azure", "GCP", "OVHcloud", "Nebius", "Outscale", "Ionos", "Coreweave", "CleverCloud"];
        COMPETITOR_DATA.forEach(row => {
            providers.forEach(provider => {
                if (row[provider] && row[provider].toLowerCase().includes(searchTerm)) {
                    results.push({ 
                        provider: provider, 
                        competitorProduct: row[provider], 
                        scalewayProduct: row.ScalewayProduct, 
                        category: row.Category,
                        differentiator: row.KeyDifferentiator
                    });
                }
            });
        });
        
        let html = `<h2 class="text-2xl font-bold text-white text-center mb-6">Results for "${competitorSearch.value}"</h2>`;
        if (results.length > 0) {
            results.forEach(res => {
                html += `<div class="bg-slate-900/70 backdrop-blur-sm p-6 rounded-xl shadow-lg">`;
                html += `<p class="text-gray-300 text-lg mb-2">Match for <span class="font-bold text-white">${res.competitorProduct}</span> (${res.provider})</p>`;
                html += `<p class="text-purple-400 font-bold text-2xl">Scaleway Equivalent: ${res.scalewayProduct}</p>`;
                html += `<p class="text-sm text-gray-400 mt-2 mb-4">Category: ${res.category}</p>`;
                html += `<div class="border-t border-purple-800 pt-4"><h4 class="font-semibold text-white mb-2 flex items-center"><i data-feather="zap" class="w-4 h-4 mr-2 text-yellow-400"></i>Talking Point</h4><p class="text-gray-200">${res.differentiator}</p></div>`;
                html += `</div>`;
            });
        } else {
            html += `<p class="text-center text-white/80 mt-4">No matching competitor products found.</p>`;
        }
        displayResults(html);
        feather.replace();
    });

    window.onload = () => {
        populateScalewayDropdown();
    };
</script>
</body>
</html>