<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Modern Website Builder</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <style>
    body {
      font-family: 'Inter', sans-serif;
    }
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap');
    #preview {
      background: white;
      transition: all 0.3s ease-in-out;
    }
    .control-group {
      border: 1px solid #e2e8f0;
      padding: 1.5rem;
      border-radius: 0.75rem;
      margin-bottom: 1.5rem;
      background-color: #f8fafc;
    }
    .control-group-title {
      font-size: 1.25rem;
      font-weight: 700;
      color: #1e293b;
      margin-bottom: 1rem;
    }
    .template-option {
      transition: all 0.2s ease;
    }
    .template-option:hover {
      transform: translateY(-2px);
    }
    .font-option {
      padding: 0.75rem;
      border-radius: 0.5rem;
      border: 2px solid #e2e8f0;
      cursor: pointer;
      transition: all 0.2s ease;
    }
    .font-option:hover {
      border-color: #6366f1;
    }
    .font-option.selected {
      border-color: #6366f1;
      background-color: #eef2ff;
    }
    .font-option input[type="radio"] {
      display: none;
    }
  </style>
</head>
<body class="bg-gray-100 min-h-screen p-4 sm:p-6 lg:p-8">
  <div class="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-8">
    <div class="bg-white p-6 sm:p-8 rounded-xl shadow-lg">
      <h1 class="text-4xl font-bold mb-6 text-gray-800 border-b pb-4">Website Builder</h1>

      <div class="control-group">
        <h2 class="control-group-title">1. Choose a Template</h2>
        <select id="templateSelect" class="border p-3 rounded-lg w-full bg-white">
          <option value="0">Template 1 - Modern Blog</option>
          <option value="1">Template 2 - Startup Landing Page</option>
          <option value="2">Template 3 - Designer Portfolio</option>
          <option value="3">Template 4 - E-commerce Store</option>
          <option value="4">Template 5 - Professional Personal Site</option>
        </select>
      </div>

      <div class="control-group">
        <h2 class="control-group-title">2. Select a Font</h2>
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
          <label class="font-option font-sans" onclick="selectFontOption(this, 'sans')">
            <input type="radio" name="font" value="sans" checked>
            <div class="font-semibold">Sans-serif</div>
            <div class="text-sm text-gray-600">Modern & Clean</div>
            <div class="mt-2 text-lg" style="font-family: 'Inter', sans-serif">Aa Bb Cc</div>
          </label>
          <label class="font-option font-serif" onclick="selectFontOption(this, 'serif')">
            <input type="radio" name="font" value="serif">
            <div class="font-semibold">Serif</div>
            <div class="text-sm text-gray-600">Elegant & Classic</div>
            <div class="mt-2 text-lg" style="font-family: 'Lora', serif">Aa Bb Cc</div>
          </label>
          <label class="font-option font-mono" onclick="selectFontOption(this, 'mono')">
            <input type="radio" name="font" value="mono">
            <div class="font-semibold">Monospace</div>
            <div class="text-sm text-gray-600">Techy & Minimal</div>
            <div class="mt-2 text-lg" style="font-family: 'Roboto Mono', monospace">Aa Bb Cc</div>
          </label>
        </div>
      </div>

      <div class="control-group">
        <h2 class="control-group-title">3. Pick a Primary Color</h2>
        <div class="flex items-center gap-4">
          <input type="color" id="mainColor" value="#4f46e5" class="w-16 h-16 p-1 border rounded-lg cursor-pointer">
          <div class="flex-1">
            <div class="grid grid-cols-5 gap-2">
              <div class="h-8 rounded cursor-pointer bg-indigo-600 hover:opacity-80" onclick="setColor('#4f46e5')"></div>
              <div class="h-8 rounded cursor-pointer bg-emerald-600 hover:opacity-80" onclick="setColor('#059669')"></div>
              <div class="h-8 rounded cursor-pointer bg-rose-600 hover:opacity-80" onclick="setColor('#e11d48')"></div>
              <div class="h-8 rounded cursor-pointer bg-amber-600 hover:opacity-80" onclick="setColor('#d97706')"></div>
              <div class="h-8 rounded cursor-pointer bg-violet-600 hover:opacity-80" onclick="setColor('#7c3aed')"></div>
            </div>
            <p class="text-sm text-gray-500 mt-2">Click a swatch or choose custom color</p>
          </div>
        </div>
      </div>

      <div class="control-group">
        <h2 class="control-group-title">4. Select Optional Features</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <label class="block bg-white p-4 rounded-lg border hover:border-indigo-500 cursor-pointer flex items-center">
            <input type="checkbox" id="gallery" class="mr-3 h-5 w-5">
            <div>
              <div class="font-medium">Photo Gallery</div>
              <div class="text-sm text-gray-500">Showcase your images</div>
            </div>
          </label>
          <label class="block bg-white p-4 rounded-lg border hover:border-indigo-500 cursor-pointer flex items-center">
            <input type="checkbox" id="contactForm" class="mr-3 h-5 w-5">
            <div>
              <div class="font-medium">Contact Form</div>
              <div class="text-sm text-gray-500">Let visitors reach you</div>
            </div>
          </label>
          <label class="block bg-white p-4 rounded-lg border hover:border-indigo-500 cursor-pointer flex items-center">
            <input type="checkbox" id="map" class="mr-3 h-5 w-5">
            <div>
              <div class="font-medium">Map Location</div>
              <div class="text-sm text-gray-500">Show your business location</div>
            </div>
          </label>
          <label class="block bg-white p-4 rounded-lg border hover:border-indigo-500 cursor-pointer flex items-center">
            <input type="checkbox" id="social" class="mr-3 h-5 w-5">
            <div>
              <div class="font-medium">Social Media Links</div>
              <div class="text-sm text-gray-500">Connect your social profiles</div>
            </div>
          </label>
          <label class="block bg-white p-4 rounded-lg border hover:border-indigo-500 cursor-pointer flex items-center">
            <input type="checkbox" id="testimonials" class="mr-3 h-5 w-5">
            <div>
              <div class="font-medium">Testimonials</div>
              <div class="text-sm text-gray-500">Show customer feedback</div>
            </div>
          </label>
          <label class="block bg-white p-4 rounded-lg border hover:border-indigo-500 cursor-pointer flex items-center">
            <input type="checkbox" id="newsletter" class="mr-3 h-5 w-5">
            <div>
              <div class="font-medium">Newsletter</div>
              <div class="text-sm text-gray-500">Collect email subscribers</div>
            </div>
          </label>
        </div>
      </div>

      <div class="flex flex-col sm:flex-row items-center gap-4 mt-8">
        <button onclick="generateWebsite()" class="w-full sm:w-auto flex-1 bg-indigo-600 text-white px-6 py-3 rounded-lg font-semibold text-lg hover:bg-indigo-700 transition-all duration-300 shadow-md hover:shadow-lg">
          Generate Website
        </button>
        <button id="downloadBtn" onclick="downloadHtml()" class="w-full sm:w-auto flex-1 bg-gray-600 text-white px-6 py-3 rounded-lg font-semibold text-lg hover:bg-gray-700 transition-all duration-300 shadow-md hover:shadow-lg disabled:bg-gray-300 disabled:cursor-not-allowed" disabled>
          Download HTML
        </button>
      </div>
    </div>

    <div class="mt-8 lg:mt-0">
      <div class="sticky top-8">
        <div class="flex justify-between items-center mb-2">
          <label class="block text-xl font-bold text-gray-700">Live Preview</label>
          <button onclick="refreshPreview()" class="text-sm text-indigo-600 hover:text-indigo-800 flex items-center">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
            </svg>
            Refresh
          </button>
        </div>
        <div class="w-full h-[75vh] border-4 border-gray-300 rounded-xl shadow-inner overflow-hidden">
            <iframe id="preview" class="w-full h-full"></iframe>
        </div>
      </div>
    </div>
  </div>

  <script>
    // --- TEMPLATE HEAD (WITH FONT FIX) ---
    const getTemplateHead = (title) => `
        <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <title>${title}</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@400;700;800&family=Lora:ital,wght@0,400;0,700;1,400&family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet">
          <script>
            tailwind.config = {
              theme: {
                extend: {
                  fontFamily: {
                    sans: ['Inter', 'sans-serif'],
                    serif: ['Lora', 'serif'],
                    mono: ['Roboto Mono', 'monospace'],
                  }
                }
              }
            }
          <\/script>
        </head>
    `;

    // --- BEAUTIFUL & MODERN TEMPLATES ---
    const templates = [
      // Template 1: Modern Blog (Enhanced)
      (font, color) => `
        <html lang="en">
        ${getTemplateHead('Modern Blog')}
        <body class="${font} bg-gray-50" style="color: #374151;">
          <style>
            .text-primary { color: ${color}; }
            .bg-primary { background-color: ${color}; }
            .border-primary { border-color: ${color}; }
            .hover\\:text-primary:hover { color: ${color}; }
            .hover\\:bg-primary:hover { background-color: ${color}; }
          </style>
          <nav class="bg-white shadow-md sticky top-0 z-10">
            <div class="max-w-5xl mx-auto px-6 py-4 flex justify-between items-center">
              <h1 class="text-2xl font-bold text-primary">My Awesome Blog</h1>
              <div class="hidden md:flex items-center space-x-1">
                <a href="#" class="text-gray-600 hover:text-primary px-3 py-2 rounded-lg hover:bg-gray-100 transition-all">Home</a>
                <a href="#" class="text-gray-600 hover:text-primary px-3 py-2 rounded-lg hover:bg-gray-100 transition-all">Articles</a>
                <a href="#" class="text-gray-600 hover:text-primary px-3 py-2 rounded-lg hover:bg-gray-100 transition-all">About</a>
                <a href="#" class="text-gray-600 hover:text-primary px-3 py-2 rounded-lg hover:bg-gray-100 transition-all">Contact</a>
              </div>
              <button class="md:hidden text-gray-600">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                </svg>
              </button>
            </div>
          </nav>
          <main class="max-w-5xl mx-auto p-6 mt-6">
            <div class="bg-white p-8 rounded-xl shadow-lg mb-8 transform hover:-translate-y-1 transition-transform duration-300">
              <div class="flex items-center mb-4">
                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Author" class="w-10 h-10 rounded-full mr-3">
                <div>
                  <p class="font-medium">Sarah Johnson</p>
                  <p class="text-gray-500 text-sm">July 8, 2025 · 5 min read</p>
                </div>
              </div>
              <h2 class="text-3xl font-extrabold mb-2 text-gray-800">The Future of Web Design</h2>
              <p class="text-gray-600 mb-4">Exploring the latest trends and technologies that are shaping how we build for the web.</p>
              <img src="https://images.unsplash.com/photo-1501504905252-473c47e087f8?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=1600" alt="Blog post image" class="rounded-xl mb-4 w-full h-64 object-cover">
              <div class="prose max-w-none text-gray-700">
                <p>Welcome to your new blog! This is where you can share your thoughts, ideas, and stories with the world. This template is designed to be clean, readable, and visually appealing. You can easily customize the colors and fonts using the builder tool.</p>
                <p>The future of web design is exciting with new CSS features, improved performance, and more interactive experiences. With tools like Tailwind CSS, building beautiful websites has never been easier.</p>
                <h3>Key Trends to Watch</h3>
                <ul>
                  <li>Dark mode interfaces</li>
                  <li>Micro-interactions</li>
                  <li>3D elements with CSS</li>
                  <li>Neumorphism design</li>
                </ul>
              </div>
              <div class="mt-6 pt-4 border-t flex justify-between items-center">
                <div class="flex space-x-2">
                  <span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">Design</span>
                  <span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">Trends</span>
                </div>
                <button class="text-primary font-medium hover:underline">Read more →</button>
              </div>
            </div>
            <div id="features-container"></div>
          </main>
          <footer class="bg-white p-10 mt-10 border-t">
            <div class="max-w-5xl mx-auto">
              <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div>
                  <h3 class="text-lg font-bold mb-4">About</h3>
                  <p class="text-gray-600">A blog about web design, development, and the latest industry trends.</p>
                </div>
                <div>
                  <h3 class="text-lg font-bold mb-4">Quick Links</h3>
                  <ul class="space-y-2">
                    <li><a href="#" class="text-gray-600 hover:text-primary">Home</a></li>
                    <li><a href="#" class="text-gray-600 hover:text-primary">Articles</a></li>
                    <li><a href="#" class="text-gray-600 hover:text-primary">About</a></li>
                    <li><a href="#" class="text-gray-600 hover:text-primary">Contact</a></li>
                  </ul>
                </div>
                <div>
                  <h3 class="text-lg font-bold mb-4">Subscribe</h3>
                  <p class="text-gray-600 mb-2">Get the latest posts delivered to your inbox</p>
                  <div class="flex">
                    <input type="email" placeholder="Your email" class="border p-2 rounded-l-lg flex-1">
                    <button class="bg-primary text-white px-4 rounded-r-lg">Join</button>
                  </div>
                </div>
              </div>
              <div class="mt-8 pt-8 border-t text-center text-gray-500">
                <p>© 2025 My Awesome Blog. Built with love.</p>
              </div>
            </div>
          </footer>
        </body>
        </html>`,

      // Template 2: Startup Landing Page (Enhanced)
      (font, color) => `
        <html lang="en">
        ${getTemplateHead('Startup Landing Page')}
        <body class="${font} bg-white">
          <style>
            .bg-primary { background-color: ${color}; }
            .text-primary { color: ${color}; }
            .border-primary { border-color: ${color}; }
            .hover\\:bg-primary:hover { background-color: ${color}; }
          </style>
          <header class="bg-gradient-to-r from-gray-900 to-gray-800 text-white">
            <div class="container mx-auto px-6 py-24 text-center">
              <div class="max-w-4xl mx-auto">
                <h1 class="text-5xl font-extrabold mb-6 leading-tight">Launch Your Next Big Idea</h1>
                <p class="text-xl text-gray-300 mb-8">The perfect starting point for your new venture. Attractive, responsive, and easy to customize.</p>
                <div class="flex flex-col sm:flex-row justify-center gap-4">
                  <button class="font-bold py-4 px-10 rounded-lg text-white bg-primary hover:opacity-90 transition-all shadow-lg hover:shadow-xl">Get Started Now</button>
                  <button class="font-bold py-4 px-10 rounded-lg text-white bg-transparent border-2 border-white hover:bg-white hover:text-gray-900 transition-all">Learn More</button>
                </div>
              </div>
            </div>
            <div class="relative -bottom-12">
              <div class="max-w-6xl mx-auto px-6">
                <div class="bg-white rounded-xl shadow-2xl p-8 flex flex-col md:flex-row items-center">
                  <div class="flex-1 mb-6 md:mb-0 md:pr-6">
                    <h3 class="text-xl font-bold text-gray-800 mb-2">Ready to get started?</h3>
                    <p class="text-gray-600">Join thousands of satisfied customers today.</p>
                  </div>
                  <div class="w-full md:w-auto">
                    <div class="flex flex-col sm:flex-row gap-3">
                      <input type="email" placeholder="Enter your email" class="border p-3 rounded-lg flex-1 min-w-[200px]">
                      <button class="bg-primary text-white font-bold py-3 px-6 rounded-lg hover:opacity-90 transition-opacity">Sign Up Free</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </header>
          <section id="features" class="py-32">
            <div class="container mx-auto px-6 text-center">
              <h2 class="text-4xl font-bold mb-3 text-gray-800">Why You'll Love It</h2>
              <p class="text-gray-600 mb-12 max-w-2xl mx-auto">Here are just a few reasons our solution stands out from the competition.</p>
              <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-gray-50 p-8 rounded-xl shadow-lg transform hover:scale-105 transition-transform hover:border-primary hover:border-2">
                  <div class="w-16 h-16 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mx-auto mb-6">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01" />
                    </svg>
                  </div>
                  <h3 class="text-2xl font-bold mb-3 text-primary">Modern Design</h3>
                  <p class="text-gray-600">A clean and beautiful design that impresses your visitors from the first glance.</p>
                </div>
                <div class="bg-gray-50 p-8 rounded-xl shadow-lg transform hover:scale-105 transition-transform hover:border-primary hover:border-2">
                  <div class="w-16 h-16 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mx-auto mb-6">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                    </svg>
                  </div>
                  <h3 class="text-2xl font-bold mb-3 text-primary">Fully Responsive</h3>
                  <p class="text-gray-600">Looks great on all devices, from desktops to mobile phones.</p>
                </div>
                <div class="bg-gray-50 p-8 rounded-xl shadow-lg transform hover:scale-105 transition-transform hover:border-primary hover:border-2">
                  <div class="w-16 h-16 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mx-auto mb-6">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                    </svg>
                  </div>
                  <h3 class="text-2xl font-bold mb-3 text-primary">Lightning Fast</h3>
                  <p class="text-gray-600">Optimized for performance with minimal loading times.</p>
                </div>
              </div>
            </div>
          </section>
          <section class="py-20 bg-gray-50">
            <div class="container mx-auto px-6">
              <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                  <h2 class="text-3xl font-bold mb-6 text-gray-800">Everything you need in one place</h2>
                  <p class="text-gray-600 mb-6">Our platform provides all the tools you need to succeed in today's competitive market.</p>
                  <ul class="space-y-4">
                    <li class="flex items-start">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary mr-3 mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                      </svg>
                      <span class="text-gray-700">Easy-to-use interface with drag-and-drop</span>
                    </li>
                    <li class="flex items-start">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary mr-3 mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                      </svg>
                      <span class="text-gray-700">Built-in analytics and reporting</span>
                    </li>
                    <li class="flex items-start">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary mr-3 mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                      </svg>
                      <span class="text-gray-700">24/7 customer support</span>
                    </li>
                  </ul>
                </div>
                <div class="md:w-1/2 md:pl-10">
                  <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=1000" alt="Dashboard" class="rounded-xl shadow-lg w-full">
                </div>
              </div>
            </div>
          </section>
          <div id="features-container"></div>
          <footer class="bg-gray-800 text-white py-12">
            <div class="container mx-auto px-6">
              <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                  <h3 class="text-xl font-bold mb-4">Product</h3>
                  <ul class="space-y-2">
                    <li><a href="#" class="text-gray-300 hover:text-white">Features</a></li>
                    <li><a href="#" class="text-gray-300 hover:text-white">Pricing</a></li>
                    <li><a href="#" class="text-gray-300 hover:text-white">Documentation</a></li>
                  </ul>
                </div>
                <div>
                  <h3 class="text-xl font-bold mb-4">Company</h3>
                  <ul class="space-y-2">
                    <li><a href="#" class="text-gray-300 hover:text-white">About</a></li>
                    <li><a href="#" class="text-gray-300 hover:text-white">Blog</a></li>
                    <li><a href="#" class="text-gray-300 hover:text-white">Careers</a></li>
                  </ul>
                </div>
                <div>
                  <h3 class="text-xl font-bold mb-4">Resources</h3>
                  <ul class="space-y-2">
                    <li><a href="#" class="text-gray-300 hover:text-white">Community</a></li>
                    <li><a href="#" class="text-gray-300 hover:text-white">Help Center</a></li>
                    <li><a href="#" class="text-gray-300 hover:text-white">Tutorials</a></li>
                  </ul>
                </div>
                <div>
                  <h3 class="text-xl font-bold mb-4">Connect</h3>
                  <div class="flex space-x-4">
                    <a href="#" class="text-gray-300 hover:text-white">
                      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M22.675 0h-21.35C.59 0 0 .59 0 1.325v21.35C0 23.41.59 24 1.325 24H12.82v-9.29H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24h-1.918c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h5.713c.735 0 1.325-.59 1.325-1.325V1.325C24 .59 23.41 0 22.675 0z"/></svg>
                    </a>
                    <a href="#" class="text-gray-300 hover:text-white">
                      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg>
                    </a>
                    <a href="#" class="text-gray-300 hover:text-white">
                      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.85s-.011 3.585-.069 4.85c-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07s-3.585-.012-4.85-.07c-3.26-.149-4.771-1.699-4.919-4.919-.058-1.265-.07-1.645-.07-4.85s.012-3.585.07-4.85c.149-3.227 1.664-4.771 4.919-4.919 1.266-.058 1.645-.07 4.85-.07zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.782-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
                    </a>
                  </div>
                </div>
              </div>
              <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
                <p>© 2025 Your Startup Inc. All Rights Reserved.</p>
              </div>
            </div>
          </footer>
        </body>
        </html>`,

      // Template 3: Designer Portfolio (Enhanced)
      (font, color) => `
        <html lang="en">
        ${getTemplateHead('Designer Portfolio')}
        <body class="${font} bg-white">
          <style>
            .text-primary { color: ${color}; }
            .bg-primary { background-color: ${color}; }
            .border-primary { border-color: ${color}; }
            .hover\\:text-primary:hover { color: ${color}; }
          </style>
          <header class="text-center p-16 bg-gradient-to-r from-gray-50 to-white">
            <div class="max-w-2xl mx-auto">
              <h1 class="text-5xl font-bold text-gray-800">Jane Doe</h1>
              <p class="text-xl text-primary font-semibold mt-2">Product Designer & Creative Developer</p>
              <p class="text-gray-600 mt-6">I create beautiful, functional digital experiences that users love.</p>
              <div class="flex justify-center space-x-4 mt-8">
                <a href="#" class="px-6 py-3 bg-primary text-white rounded-lg font-medium hover:opacity-90 transition-opacity">View My Work</a>
                <a href="#" class="px-6 py-3 border border-gray-300 text-gray-700 rounded-lg font-medium hover:bg-gray-100 transition-colors">Contact Me</a>
              </div>
            </div>
          </header>
          <main class="container mx-auto px-6 py-16">
            <div class="max-w-4xl mx-auto text-center mb-16">
              <h2 class="text-3xl font-bold mb-6">Featured Projects</h2>
              <p class="text-gray-600 max-w-2xl mx-auto">Here's a selection of my recent work. Each project was carefully crafted to solve specific user problems while delivering an exceptional experience.</p>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
              <div class="group rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-shadow">
                <div class="relative overflow-hidden h-60">
                  <img src="https://images.unsplash.com/photo-1555949963-ff9fe0c870eb?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=800" alt="Project 1" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                  <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all duration-300 flex items-center justify-center">
                    <button class="opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 text-white border-2 border-white px-6 py-2 rounded-lg font-medium">View Case Study</button>
                  </div>
                </div>
                <div class="p-6 bg-white">
                  <h3 class="text-xl font-bold">E-commerce Platform</h3>
                  <p class="text-gray-600 mt-2">Web Application Design</p>
                  <div class="mt-4 flex flex-wrap gap-2">
                    <span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">UI Design</span>
                    <span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">UX Research</span>
                  </div>
                </div>
              </div>
              <div class="group rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-shadow">
                <div class="relative overflow-hidden h-60">
                  <img src="https://images.unsplash.com/photo-1558655146-d09347e92766?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=800" alt="Project 2" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                  <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all duration-300 flex items-center justify-center">
                    <button class="opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 text-white border-2 border-white px-6 py-2 rounded-lg font-medium">View Case Study</button>
                  </div>
                </div>
                <div class="p-6 bg-white">
                  <h3 class="text-xl font-bold">Fitness App</h3>
                  <p class="text-gray-600 mt-2">Mobile App Mockups</p>
                  <div class="mt-4 flex flex-wrap gap-2">
                    <span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">Mobile UI</span>
                    <span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">Prototyping</span>
                  </div>
                </div>
              </div>
              <div class="group rounded-xl overflow-hidden shadow-lg hover:shadow-2xl transition-shadow">
                <div class="relative overflow-hidden h-60">
                  <img src="https://images.unsplash.com/photo-1522199755839-a2bacb67c546?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=800" alt="Project 3" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500">
                  <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all duration-300 flex items-center justify-center">
                    <button class="opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300 text-white border-2 border-white px-6 py-2 rounded-lg font-medium">View Case Study</button>
                  </div>
                </div>
                <div class="p-6 bg-white">
                  <h3 class="text-xl font-bold">Corporate Website</h3>
                  <p class="text-gray-600 mt-2">Landing Page Development</p>
                  <div class="mt-4 flex flex-wrap gap-2">
                    <span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">Web Design</span>
                    <span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">Development</span>
                  </div>
                </div>
              </div>
            </div>
            <div id="features-container"></div>
          </main>
          <section class="py-20 bg-gray-50">
            <div class="container mx-auto px-6 max-w-4xl">
              <h2 class="text-3xl font-bold text-center mb-12">What Clients Say</h2>
              <div class="grid md:grid-cols-2 gap-8">
                <div class="bg-white p-8 rounded-xl shadow-lg">
                  <div class="flex items-center mb-4">
                    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
                    <div>
                      <h4 class="font-bold">Michael Johnson</h4>
                      <p class="text-gray-600 text-sm">CEO, TechCorp</p>
                    </div>
                  </div>
                  <p class="text-gray-700">"Jane's design work transformed our user experience. Her attention to detail and creative approach resulted in a 40% increase in user engagement."</p>
                  <div class="flex mt-4 text-amber-400">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                    </svg>
                  </div>
                </div>
                <div class="bg-white p-8 rounded-xl shadow-lg">
                  <div class="flex items-center mb-4">
                    <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
                    <div>
                      <h4 class="font-bold">Sarah Williams</h4>
                      <p class="text-gray-600 text-sm">Marketing Director, BrandCo</p>
                    </div>
                  </div>
                  <p class="text-gray-700">"Working with Jane was an absolute pleasure. She understood our brand identity perfectly and delivered designs that exceeded our expectations."</p>
                  <div class="flex mt-4 text-amber-400">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                    </svg>
                  </div>
                </div>
              </div>
            </div>
          </section>
          <footer class="bg-gray-900 text-white py-12">
            <div class="container mx-auto px-6 text-center">
              <h2 class="text-2xl font-bold mb-6">Let's create something amazing together</h2>
              <p class="text-gray-300 max-w-2xl mx-auto mb-8">Have a project in mind? I'd love to hear about it. Get in touch and let's discuss how we can work together.</p>
              <a href="mailto:hello@example.com" class="inline-block bg-primary text-white font-bold py-3 px-8 rounded-lg hover:opacity-90 transition-opacity mb-8">hello@example.com</a>
              <div class="flex justify-center space-x-6">
                <a href="#" class="text-gray-300 hover:text-white">
                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M22.675 0h-21.35C.59 0 0 .59 0 1.325v21.35C0 23.41.59 24 1.325 24H12.82v-9.29H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24h-1.918c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h5.713c.735 0 1.325-.59 1.325-1.325V1.325C24 .59 23.41 0 22.675 0z"/></svg>
                </a>
                <a href="#" class="text-gray-300 hover:text-white">
                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg>
                </a>
                <a href="#" class="text-gray-300 hover:text-white">
                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.85s-.011 3.585-.069 4.85c-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07s-3.585-.012-4.85-.07c-3.26-.149-4.771-1.699-4.919-4.919-.058-1.265-.07-1.645-.07-4.85s.012-3.585.07-4.85c.149-3.227 1.664-4.771 4.919-4.919 1.266-.058 1.645-.07 4.85-.07zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.782-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
                </a>
                <a href="#" class="text-gray-300 hover:text-white">
                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
                </a>
              </div>
              <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
                <p>© 2025 Jane Doe. All rights reserved.</p>
              </div>
            </div>
          </footer>
        </body>
        </html>`,
      
      // Template 4: E-commerce Store (Enhanced)
      (font, color) => `
        <html lang="en">
        ${getTemplateHead('E-commerce Store')}
        <body class="${font} bg-gray-100">
          <style>
            .text-primary { color: ${color}; }
            .bg-primary { background-color: ${color}; }
            .border-primary { border-color: ${color}; }
            .hover\\:bg-primary:hover { background-color: ${color}; }
          </style>
          <nav class="bg-white shadow-md p-4 flex justify-between items-center sticky top-0 z-10">
            <div class="text-2xl font-bold text-primary flex items-center">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
              </svg>
              UrbanThreads
            </div>
            <div class="hidden md:flex items-center space-x-6">
              <a href="#" class="text-gray-600 hover:text-primary">Home</a>
              <a href="#" class="text-gray-600 hover:text-primary">New Arrivals</a>
              <a href="#" class="text-gray-600 hover:text-primary">Categories</a>
              <a href="#" class="text-gray-600 hover:text-primary">Sale</a>
            </div>
            <div class="flex items-center space-x-4">
              <button class="text-gray-600 hover:text-primary">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
              </button>
              <button class="text-gray-600 hover:text-primary">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                </svg>
              </button>
              <button class="text-gray-600 hover:text-primary relative">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
                </svg>
                <span class="absolute -top-2 -right-2 bg-primary text-white text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center">3</span>
              </button>
            </div>
            <button class="md:hidden text-gray-600">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
              </svg>
            </button>
          </nav>
          <header class="text-center p-16 bg-gradient-to-r from-gray-900 to-gray-800 text-white">
            <div class="max-w-3xl mx-auto">
              <h1 class="text-4xl font-extrabold mb-4">Summer Collection</h1>
              <p class="text-xl text-gray-300 mb-8">Fresh styles have just landed. Explore the new trends.</p>
              <button class="font-bold py-4 px-10 rounded-lg text-white bg-primary hover:opacity-90 transition-opacity shadow-lg">Shop Now</button>
            </div>
          </header>
          <main class="container mx-auto px-6 py-12">
            <div class="flex justify-between items-center mb-8">
              <h2 class="text-2xl font-bold text-gray-800">Featured Products</h2>
              <a href="#" class="text-primary font-medium hover:underline">View all →</a>
            </div>
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
              <div class="bg-white rounded-xl shadow-md overflow-hidden group transform hover:-translate-y-2 transition-transform">
                <div class="relative">
                  <img src="https://images.unsplash.com/photo-1523381294911-8d3cead13475?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=800" class="w-full h-64 object-cover">
                  <div class="absolute top-3 right-3">
                    <button class="bg-white p-2 rounded-full shadow-md text-gray-700 hover:text-primary">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                      </svg>
                    </button>
                  </div>
                  <div class="absolute bottom-0 left-0 right-0 bg-white bg-opacity-90 p-3 translate-y-full group-hover:translate-y-0 transition-transform">
                    <button class="w-full py-2 text-white bg-primary rounded-lg">Add to Cart</button>
                  </div>
                </div>
                <div class="p-4">
                  <h3 class="text-lg font-bold">Classic White Tee</h3>
                  <div class="flex items-center mt-1 mb-2">
                    <div class="flex text-amber-400">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                      </svg>
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                      </svg>
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                      </svg>
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                      </svg>
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                      </svg>
                    </div>
                    <span class="text-gray-500 text-sm ml-2">(24)</span>
                  </div>
                  <div class="flex justify-between items-center">
                    <p class="text-gray-600 font-bold">$25.00</p>
                    <p class="text-gray-400 text-sm line-through">$35.00</p>
                  </div>
                </div>
              </div>
              <div class="bg-white rounded-xl shadow-md overflow-hidden group transform hover:-translate-y-2 transition-transform">
                <div class="relative">
                  <img src="https://images.unsplash.com/photo-1594633312681-425c7b97ccd1?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=800" class="w-full h-64 object-cover">
                  <div class="absolute top-3 right-3">
                    <button class="bg-white p-2 rounded-full shadow-md text-gray-700 hover:text-primary">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                      </svg>
                    </button>
                  </div>
                  <div class="absolute bottom-0 left-0 right-0 bg-white bg-opacity-90 p-3 translate-y-full group-hover:translate-y-0 transition-transform">
                    <button class="w-full py-2 text-white bg-primary rounded-lg">Add to Cart</button>
                  </div>
                </div>
                <div class="p-4">
                  <h3 class="text-lg font-bold">Slim Fit Jeans</h3>
                  <div class="flex items-center mt-1 mb-2">
                    <div class="flex text-amber-400">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                      </svg>
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                      </svg>
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                      </svg>
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                      </svg>
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="none" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                      </svg>
                    </div>
                    <span class="text-gray-500 text-sm ml-2">(18)</span>
                  </div>
                  <div class="flex justify-between items-center">
                    <p class="text-gray-600 font-bold">$75.00</p>
                  </div>
                </div>
              </div>
              <div class="bg-white rounded-xl shadow-md overflow-hidden group transform hover:-translate-y-2 transition-transform">
                <div class="relative">
                  <img src="https://images.unsplash.com/photo-1620799140408-edc6dcb6d633?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=800" class="w-full h-64 object-cover">
                  <div class="absolute top-3 right-3">
                    <button class="bg-white p-2 rounded-full shadow-md text-gray-700 hover:text-primary">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                      </svg>
                    </button>
                  </div>
                  <div class="absolute bottom-0 left-0 right-0 bg-white bg-opacity-90 p-3 translate-y-full group-hover:translate-y-0 transition-transform">
                    <button class="w-full py-2 text-white bg-primary rounded-lg">Add to Cart</button>
                  </div>
                </div>
                <div class="p-4">
                  <h3 class="text-lg font-bold">Comfort Hoodie</h3>
                  <div class="flex items-center mt-1 mb-2">
                    <div class="flex text-amber-400">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                      </svg>
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                      </svg>
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                      </svg>
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                      </svg>
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="none" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                      </svg>
                    </div>
                    <span class="text-gray-500 text-sm ml-2">(32)</span>
                  </div>
                  <div class="flex justify-between items-center">
                    <p class="text-gray-600 font-bold">$60.00</p>
                    <p class="text-gray-400 text-sm line-through">$80.00</p>
                  </div>
                </div>
              </div>
              <div class="bg-white rounded-xl shadow-md overflow-hidden group transform hover:-translate-y-2 transition-transform">
                <div class="relative">
                  <img src="https://images.unsplash.com/photo-1551854388-752126168b5a?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=800" class="w-full h-64 object-cover">
                  <div class="absolute top-3 right-3">
                    <button class="bg-white p-2 rounded-full shadow-md text-gray-700 hover:text-primary">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
                      </svg>
                    </button>
                  </div>
                  <div class="absolute bottom-0 left-0 right-0 bg-white bg-opacity-90 p-3 translate-y-full group-hover:translate-y-0 transition-transform">
                    <button class="w-full py-2 text-white bg-primary rounded-lg">Add to Cart</button>
                  </div>
                </div>
                <div class="p-4">
                  <h3 class="text-lg font-bold">Leather Sneakers</h3>
                  <div class="flex items-center mt-1 mb-2">
                    <div class="flex text-amber-400">
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                      </svg>
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                      </svg>
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                      </svg>
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                      </svg>
                      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="none" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                      </svg>
                    </div>
                    <span class="text-gray-500 text-sm ml-2">(45)</span>
                  </div>
                  <div class="flex justify-between items-center">
                    <p class="text-gray-600 font-bold">$120.00</p>
                  </div>
                </div>
              </div>
            </div>
            <div class="mt-16">
              <div class="bg-white rounded-xl shadow-md overflow-hidden">
                <div class="flex flex-col md:flex-row">
                  <div class="md:w-1/2">
                    <img src="https://images.unsplash.com/photo-1489987707025-afc232f7ea0f?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=1000" class="w-full h-full object-cover">
                  </div>
                  <div class="md:w-1/2 p-8 flex flex-col justify-center">
                    <h2 class="text-3xl font-bold mb-4">Summer Sale</h2>
                    <p class="text-gray-600 mb-6">Get up to 50% off on selected items. Limited time offer, so don't miss out!</p>
                    <button class="self-start bg-primary text-white font-bold py-3 px-8 rounded-lg hover:opacity-90 transition-opacity">Shop the Sale</button>
                  </div>
                </div>
              </div>
            </div>
            <div id="features-container"></div>
          </main>
          <footer class="bg-white py-12 border-t">
            <div class="container mx-auto px-6">
              <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                  <h3 class="text-lg font-bold mb-4">Shop</h3>
                  <ul class="space-y-2">
                    <li><a href="#" class="text-gray-600 hover:text-primary">New Arrivals</a></li>
                    <li><a href="#" class="text-gray-600 hover:text-primary">Men</a></li>
                    <li><a href="#" class="text-gray-600 hover:text-primary">Women</a></li>
                    <li><a href="#" class="text-gray-600 hover:text-primary">Accessories</a></li>
                  </ul>
                </div>
                <div>
                  <h3 class="text-lg font-bold mb-4">Help</h3>
                  <ul class="space-y-2">
                    <li><a href="#" class="text-gray-600 hover:text-primary">Customer Service</a></li>
                    <li><a href="#" class="text-gray-600 hover:text-primary">Track Order</a></li>
                    <li><a href="#" class="text-gray-600 hover:text-primary">Returns & Exchanges</a></li>
                    <li><a href="#" class="text-gray-600 hover:text-primary">Shipping Info</a></li>
                  </ul>
                </div>
                <div>
                  <h3 class="text-lg font-bold mb-4">Company</h3>
                  <ul class="space-y-2">
                    <li><a href="#" class="text-gray-600 hover:text-primary">About Us</a></li>
                    <li><a href="#" class="text-gray-600 hover:text-primary">Careers</a></li>
                    <li><a href="#" class="text-gray-600 hover:text-primary">Privacy Policy</a></li>
                    <li><a href="#" class="text-gray-600 hover:text-primary">Terms of Service</a></li>
                  </ul>
                </div>
                <div>
                  <h3 class="text-lg font-bold mb-4">Subscribe</h3>
                  <p class="text-gray-600 mb-4">Get the latest updates on new products and upcoming sales</p>
                  <div class="flex">
                    <input type="email" placeholder="Your email" class="border p-3 rounded-l-lg flex-1">
                    <button class="bg-primary text-white px-4 rounded-r-lg">Subscribe</button>
                  </div>
                  <div class="flex space-x-4 mt-4">
                    <a href="#" class="text-gray-600 hover:text-primary">
                      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M22.675 0h-21.35C.59 0 0 .59 0 1.325v21.35C0 23.41.59 24 1.325 24H12.82v-9.29H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24h-1.918c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h5.713c.735 0 1.325-.59 1.325-1.325V1.325C24 .59 23.41 0 22.675 0z"/></svg>
                    </a>
                    <a href="#" class="text-gray-600 hover:text-primary">
                      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg>
                    </a>
                    <a href="#" class="text-gray-600 hover:text-primary">
                      <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.85s-.011 3.585-.069 4.85c-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07s-3.585-.012-4.85-.07c-3.26-.149-4.771-1.699-4.919-4.919-.058-1.265-.07-1.645-.07-4.85s.012-3.585.07-4.85c.149-3.227 1.664-4.771 4.919-4.919 1.266-.058 1.645-.07 4.85-.07zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.782-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
                    </a>
                  </div>
                </div>
              </div>
              <div class="border-t border-gray-200 mt-8 pt-8 text-center text-gray-500">
                <p>© 2025 UrbanThreads. The best threads online.</p>
              </div>
            </div>
          </footer>
        </body>
        </html>`,

      // Template 5: Professional Personal Site (Enhanced)
      (font, color) => `
        <html lang="en">
        ${getTemplateHead('Personal Site')}
        <body class="${font} bg-gray-50">
          <style>
            .text-primary { color: ${color}; }
            .bg-primary { background-color: ${color}; }
            .border-primary { border-color: ${color}; }
            .hover\\:bg-primary:hover { background-color: ${color}; }
          </style>
          <nav class="bg-white shadow-sm sticky top-0 z-10">
            <div class="container mx-auto px-6 py-4">
              <div class="flex justify-between items-center">
                <div class="text-xl font-bold text-primary">Alex Johnson</div>
                <div class="hidden md:flex space-x-8">
                  <a href="#" class="text-gray-600 hover:text-primary">Home</a>
                  <a href="#" class="text-gray-600 hover:text-primary">About</a>
                  <a href="#" class="text-gray-600 hover:text-primary">Projects</a>
                  <a href="#" class="text-gray-600 hover:text-primary">Blog</a>
                  <a href="#" class="text-gray-600 hover:text-primary">Contact</a>
                </div>
                <button class="md:hidden text-gray-600">
                  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
                  </svg>
                </button>
              </div>
            </div>
          </nav>
          <main class="container mx-auto max-w-6xl p-6 sm:p-12">
            <div class="bg-white shadow-2xl rounded-2xl p-8 sm:p-12 text-center relative overflow-hidden">
              <div class="absolute -top-20 -right-20 w-40 h-40 rounded-full bg-primary bg-opacity-10"></div>
              <div class="absolute -bottom-20 -left-20 w-40 h-40 rounded-full bg-primary bg-opacity-10"></div>
              <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=400" class="w-40 h-40 rounded-full mx-auto -mt-28 border-8 border-white shadow-lg">
              <h1 class="text-4xl font-bold text-gray-800 mt-6">Alex Johnson</h1>
              <p class="text-primary font-semibold text-lg mt-1">Senior Software Engineer</p>
              <p class="text-gray-600 mt-6 max-w-2xl mx-auto">Hi, I'm Alex. A passionate developer with 8+ years of experience building innovative and user-friendly applications. I specialize in JavaScript, React, and Node.js.</p>
              <div class="mt-8 flex flex-wrap justify-center gap-4">
                <a href="#" class="bg-primary text-white font-bold py-3 px-8 rounded-lg hover:opacity-90 transition-opacity">View My Work</a>
                <a href="#" class="border border-gray-300 text-gray-700 font-bold py-3 px-8 rounded-lg hover:bg-gray-100 transition-colors">Download CV</a>
              </div>
            </div>

            <section class="mt-16">
              <h2 class="text-3xl font-bold text-center mb-12">My Skills</h2>
              <div class="grid grid-cols-2 md:grid-cols-4 gap-6">
                <div class="bg-white p-6 rounded-xl shadow-md text-center">
                  <div class="w-16 h-16 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mx-auto mb-4">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                    </svg>
                  </div>
                  <h3 class="text-xl font-bold mb-2">Frontend</h3>
                  <p class="text-gray-600">React, Vue, JavaScript, TypeScript, HTML/CSS</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-md text-center">
                  <div class="w-16 h-16 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mx-auto mb-4">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
                    </svg>
                  </div>
                  <h3 class="text-xl font-bold mb-2">Backend</h3>
                  <p class="text-gray-600">Node.js, Express, Python, Django, REST APIs</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-md text-center">
                  <div class="w-16 h-16 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mx-auto mb-4">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
                    </svg>
                  </div>
                  <h3 class="text-xl font-bold mb-2">Cloud</h3>
                  <p class="text-gray-600">AWS, Docker, Kubernetes, CI/CD, Serverless</p>
                </div>
                <div class="bg-white p-6 rounded-xl shadow-md text-center">
                  <div class="w-16 h-16 bg-primary bg-opacity-10 rounded-full flex items-center justify-center mx-auto mb-4">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4" />
                    </svg>
                  </div>
                  <h3 class="text-xl font-bold mb-2">DevOps</h3>
                  <p class="text-gray-600">Git, Terraform, Ansible, Monitoring, Security</p>
                </div>
              </div>
            </section>

            <section class="mt-16">
              <h2 class="text-3xl font-bold text-center mb-12">Recent Projects</h2>
              <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                  <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=1000" class="w-full h-48 object-cover">
                  <div class="p-6">
                    <h3 class="text-xl font-bold mb-2">E-commerce Platform</h3>
                    <p class="text-gray-600 mb-4">A full-featured online store with payment integration and admin dashboard.</p>
                    <div class="flex flex-wrap gap-2">
                      <span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">React</span>
                      <span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">Node.js</span>
                      <span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">MongoDB</span>
                    </div>
                    <a href="#" class="mt-4 inline-block text-primary font-medium hover:underline">View Project →</a>
                  </div>
                </div>
                <div class="bg-white rounded-xl shadow-lg overflow-hidden">
                  <img src="https://images.unsplash.com/photo-1467232004584-a241de8bcf5d?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=1000" class="w-full h-48 object-cover">
                  <div class="p-6">
                    <h3 class="text-xl font-bold mb-2">Task Management App</h3>
                    <p class="text-gray-600 mb-4">A collaborative tool for teams to organize and track their work.</p>
                    <div class="flex flex-wrap gap-2">
                      <span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">Vue.js</span>
                      <span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">Firebase</span>
                      <span class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm">Tailwind CSS</span>
                    </div>
                    <a href="#" class="mt-4 inline-block text-primary font-medium hover:underline">View Project →</a>
                  </div>
                </div>
              </div>
              <div class="text-center mt-8">
                <a href="#" class="inline-block border border-primary text-primary font-bold py-3 px-8 rounded-lg hover:bg-primary hover:text-white transition-colors">View All Projects</a>
              </div>
            </section>

            <section class="mt-16 bg-white rounded-xl shadow-lg p-8">
              <h2 class="text-3xl font-bold text-center mb-8">Work Experience</h2>
              <div class="space-y-8">
                <div class="border-l-4 border-primary pl-6 py-2">
                  <h3 class="text-xl font-bold">Senior Software Engineer</h3>
                  <p class="text-gray-600">TechCorp Inc. • 2020 - Present</p>
                  <p class="text-gray-700 mt-2">Leading a team of developers to build scalable web applications using modern JavaScript frameworks.</p>
                </div>
                <div class="border-l-4 border-primary pl-6 py-2">
                  <h3 class="text-xl font-bold">Software Engineer</h3>
                  <p class="text-gray-600">Digital Solutions • 2017 - 2020</p>
                  <p class="text-gray-700 mt-2">Developed and maintained multiple client projects with a focus on performance and accessibility.</p>
                </div>
                <div class="border-l-4 border-primary pl-6 py-2">
                  <h3 class="text-xl font-bold">Junior Developer</h3>
                  <p class="text-gray-600">StartUp Ventures • 2015 - 2017</p>
                  <p class="text-gray-700 mt-2">Built MVP products and contributed to all aspects of the development lifecycle.</p>
                </div>
              </div>
            </section>

            <div id="features-container"></div>
          </main>
          <footer class="bg-gray-900 text-white py-12">
            <div class="container mx-auto px-6 text-center">
              <h2 class="text-2xl font-bold mb-6">Get In Touch</h2>
              <p class="text-gray-300 max-w-2xl mx-auto mb-8">Have a project in mind or want to discuss potential opportunities? I'd love to hear from you!</p>
              <div class="flex flex-col sm:flex-row justify-center gap-4 max-w-md mx-auto">
                <a href="mailto:hello@example.com" class="bg-primary text-white font-bold py-3 px-6 rounded-lg hover:opacity-90 transition-opacity">Email Me</a>
                <a href="#" class="border border-white text-white font-bold py-3 px-6 rounded-lg hover:bg-white hover:text-gray-900 transition-colors">LinkedIn</a>
              </div>
              <div class="flex justify-center space-x-6 mt-8">
                <a href="#" class="text-gray-300 hover:text-white">
                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M22.675 0h-21.35C.59 0 0 .59 0 1.325v21.35C0 23.41.59 24 1.325 24H12.82v-9.29H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24h-1.918c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h5.713c.735 0 1.325-.59 1.325-1.325V1.325C24 .59 23.41 0 22.675 0z"/></svg>
                </a>
                <a href="#" class="text-gray-300 hover:text-white">
                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.779-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg>
                </a>
                <a href="#" class="text-gray-300 hover:text-white">
                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.85s-.011 3.585-.069 4.85c-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07s-3.585-.012-4.85-.07c-3.26-.149-4.771-1.699-4.919-4.919-.058-1.265-.07-1.645-.07-4.85s.012-3.585.07-4.85c.149-3.227 1.664-4.771 4.919-4.919 1.266-.058 1.645-.07 4.85-.07zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.782-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
                </a>
                <a href="#" class="text-gray-300 hover:text-white">
                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
                </a>
                <a href="#" class="text-gray-300 hover:text-white">
                  <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
                </a>
              </div>
              <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
                <p>© 2025 Alex Johnson. All Rights Reserved.</p>
              </div>
            </div>
          </footer>
        </body>
        </html>`
    ];

    // --- LOGIC TO GENERATE & DOWNLOAD WEBSITE ---
    function generateWebsite() {
      const index = parseInt(document.getElementById('templateSelect').value);
      const font = document.querySelector('input[name="font"]:checked').value;
      const color = document.getElementById('mainColor').value;

      let html = templates[index](getFontClass(font), color);
      
      const extras = [];
      if (document.getElementById('gallery').checked) {
        extras.push(`
          <section class="py-16 bg-gray-50">
            <div class="container mx-auto px-6 text-center">
              <h2 class="text-3xl font-bold text-gray-800 mb-8">Photo Gallery</h2>
              <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div class="group relative overflow-hidden rounded-lg shadow-md">
                  <img src="https://images.unsplash.com/photo-1492684223066-81342ee5ff30?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=600" class="w-full h-48 object-cover transform group-hover:scale-110 transition-transform duration-500">
                  <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all duration-300 flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                  </div>
                </div>
                <div class="group relative overflow-hidden rounded-lg shadow-md">
                  <img src="https://images.unsplash.com/photo-1519125323398-675f0ddb6308?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=600" class="w-full h-48 object-cover transform group-hover:scale-110 transition-transform duration-500">
                  <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all duration-300 flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                  </div>
                </div>
                <div class="group relative overflow-hidden rounded-lg shadow-md">
                  <img src="https://images.unsplash.com/photo-1529655683826-aba9b3e77383?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=600" class="w-full h-48 object-cover transform group-hover:scale-110 transition-transform duration-500">
                  <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all duration-300 flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                  </div>
                </div>
                <div class="group relative overflow-hidden rounded-lg shadow-md">
                  <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=600" class="w-full h-48 object-cover transform group-hover:scale-110 transition-transform duration-500">
                  <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-all duration-300 flex items-center justify-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                  </div>
                </div>
              </div>
            </div>
          </section>`);
      }
      if (document.getElementById('contactForm').checked) {
        extras.push(`
          <section class="py-16">
            <div class="container mx-auto px-6 max-w-2xl text-center">
              <h2 class="text-3xl font-bold text-gray-800 mb-8">Contact Us</h2>
              <div class="bg-white p-8 rounded-xl shadow-lg text-left">
                <form class="space-y-6">
                  <div>
                    <label class="font-semibold text-gray-700">Your Name</label>
                    <input class="w-full border p-3 rounded-lg mt-2 focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="John Doe">
                  </div>
                  <div>
                    <label class="font-semibold text-gray-700">Your Email</label>
                    <input type="email" class="w-full border p-3 rounded-lg mt-2 focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="you@example.com">
                  </div>
                  <div>
                    <label class="font-semibold text-gray-700">Subject</label>
                    <select class="w-full border p-3 rounded-lg mt-2 focus:ring-2 focus:ring-primary focus:border-transparent">
                      <option>General Inquiry</option>
                      <option>Support</option>
                      <option>Feedback</option>
                    </select>
                  </div>
                  <div>
                    <label class="font-semibold text-gray-700">Message</label>
                    <textarea class="w-full border p-3 rounded-lg mt-2 h-32 focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="Your message here..."></textarea>
                  </div>
                  <button type="submit" class="w-full text-white font-bold py-3 px-6 rounded-lg hover:opacity-90 transition-opacity" style="background-color:${color}">Send Message</button>
                </form>
              </div>
            </div>
          </section>`);
      }
      if (document.getElementById('map').checked) {
        extras.push(`
          <section class="py-16 bg-gray-50">
            <div class="container mx-auto px-6 text-center">
              <h2 class="text-3xl font-bold text-gray-800 mb-8">Our Location</h2>
              <div class="w-full h-96 rounded-xl shadow-lg overflow-hidden border">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.215209179035!2d-73.98784492423905!3d40.75798597138943!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c25855c6480299%3A0x55194ec5a1ae072e!2sTimes%20Square!5e0!3m2!1sen!2sus!4v1625317377541!5m2!1sen!2sus" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
              </div>
              <div class="mt-6 text-gray-600">
                <p>123 Main Street, New York, NY 10001</p>
                <p class="mt-1">Phone: (123) 456-7890</p>
              </div>
            </div>
          </section>`);
      }
      if (document.getElementById('social').checked) {
        extras.push(`
          <section class="py-12 text-center bg-gray-50">
            <div class="container mx-auto px-6">
              <h2 class="text-3xl font-bold text-gray-800 mb-6">Follow Us</h2>
              <p class="text-gray-600 max-w-2xl mx-auto mb-8">Stay connected with us on social media for the latest updates and news.</p>
              <div class="flex justify-center items-center space-x-6">
                <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                  <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"><path d="M22.675 0h-21.35C.59 0 0 .59 0 1.325v21.35C0 23.41.59 24 1.325 24H12.82v-9.29H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099 2.795.143v3.24h-1.918c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467 3.622h-3.12V24h5.713c.735 0 1.325-.59 1.325-1.325V1.325C24 .59 23.41 0 22.675 0z"/></svg>
                </a>
                <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                  <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"><path d="M23.953 4.57a10 10 0 01-2.825.775 4.958 4.958 0 002.163-2.723c-.951.555-2.005.959-3.127 1.184a4.92 4.92 0 00-8.384 4.482C7.69 8.095 4.067 6.13 1.64 3.162a4.822 4.822 0 00-.666 2.475c0 1.71.87 3.213 2.188 4.096a4.904 4.904 0 01-2.228-.616v.06a4.923 4.923 0 003.946 4.827 4.996 4.996 0 01-2.212.085 4.936 4.936 0 004.604 3.417 9.867 9.867 0 01-6.102 2.105c-.39 0-.79-.023-1.17-.067a13.995 13.995 0 007.557 2.209c9.053 0 13.998-7.496 13.998-13.985 0-.21 0-.42-.015-.63A9.935 9.935 0 0024 4.59z"/></svg>
                </a>
                <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                  <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.85s-.011 3.585-.069 4.85c-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07s-3.585-.012-4.85-.07c-3.26-.149-4.771-1.699-4.919-4.919-.058-1.265-.069-1.645-.069-4.85s.012-3.585.07-4.85c.149-3.227 1.664-4.771 4.919-4.919 1.266-.058 1.645-.07 4.85-.07zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.886.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.063 1.689.077 4.948.077 3.259 0 3.886-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.886-.072-4.947-.196-4.354-2.617-6.782-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
                </a>
                <a href="#" class="text-gray-500 hover:text-primary transition-colors">
                  <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24"><path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/></svg>
                </a>
              </div>
            </div>
          </section>`);
      }
      if (document.getElementById('testimonials').checked) {
        extras.push(`
          <section class="py-16">
            <div class="container mx-auto px-6 text-center">
              <h2 class="text-3xl font-bold text-gray-800 mb-12">What People Say</h2>
              <div class="grid md:grid-cols-2 gap-8 max-w-5xl mx-auto">
                <div class="bg-white p-8 rounded-xl shadow-lg text-left">
                  <div class="flex items-center mb-4">
                    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
                    <div>
                      <h4 class="font-bold">Michael Johnson</h4>
                      <p class="text-gray-600 text-sm">CEO, TechCorp</p>
                    </div>
                  </div>
                  <p class="text-gray-700">"The team delivered exceptional results that exceeded our expectations. Their attention to detail and creative approach resulted in a 40% increase in user engagement."</p>
                  <div class="flex mt-4 text-amber-400">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                    </svg>
                  </div>
                </div>
                <div class="bg-white p-8 rounded-xl shadow-lg text-left">
                  <div class="flex items-center mb-4">
                    <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
                    <div>
                      <h4 class="font-bold">Sarah Williams</h4>
                      <p class="text-gray-600 text-sm">Marketing Director, BrandCo</p>
                    </div>
                  </div>
                  <p class="text-gray-700">"Working with this team was an absolute pleasure. They understood our brand identity perfectly and delivered designs that exceeded our expectations. We saw a 30% increase in conversions after implementing their solutions."</p>
                  <div class="flex mt-4 text-amber-400">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                    </svg>
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                      <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                    </svg>
                  </div>
                </div>
              </div>
            </div>
          </section>`);
      }
      if (document.getElementById('newsletter').checked) {
        extras.push(`
          <section class="py-16 bg-primary text-white">
            <div class="container mx-auto px-6 text-center max-w-3xl">
              <h2 class="text-3xl font-bold mb-4">Stay Updated</h2>
              <p class="mb-8 opacity-90">Subscribe to our newsletter to receive the latest news and updates.</p>
              <div class="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
                <input type="email" placeholder="Your email address" class="flex-1 p-3 rounded-lg text-gray-800">
                <button class="bg-white text-primary font-bold py-3 px-6 rounded-lg hover:bg-gray-100 transition-colors">Subscribe</button>
              </div>
              <p class="text-sm opacity-75 mt-4">We respect your privacy. Unsubscribe at any time.</p>
            </div>
          </section>`);
      }

      // Inject the optional features into the features container
      html = html.replace('<div id="features-container"></div>', extras.join(''));
      
      const preview = document.getElementById('preview');
      preview.srcdoc = html;
      
      // Enable the download button
      document.getElementById('downloadBtn').disabled = false;
    }

    function downloadHtml() {
      const htmlContent = document.getElementById('preview').srcdoc;
      if (!htmlContent) {
        alert('Please generate a website first!');
        return;
      }
      const blob = new Blob([htmlContent], { type: 'text/html' });
      const a = document.createElement('a');
      a.href = URL.createObjectURL(blob);
      a.download = 'index.html';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(a.href);
    }
    
    function getFontClass(font) {
      if (font === 'serif') return 'font-serif';
      if (font === 'mono') return 'font-mono';
      return 'font-sans';
    }

    function selectFontOption(element, fontValue) {
      // Remove selected class from all options
      document.querySelectorAll('.font-option').forEach(opt => {
        opt.classList.remove('selected');
      });
      
      // Add selected class to clicked option
      element.classList.add('selected');
      
      // Update the radio button
      document.querySelector(`input[name="font"][value="${fontValue}"]`).checked = true;
      
      // Regenerate the website
      generateWebsite();
    }

    function setColor(color) {
      document.getElementById('mainColor').value = color;
      generateWebsite();
    }

    function refreshPreview() {
      generateWebsite();
    }

    // Initialize with first font option selected
    document.querySelector('.font-option').classList.add('selected');
    window.onload = generateWebsite;
  </script>
</body>
</html>