{% extends "base.html" %}
{% load static %}

{% block title %}Web Design & Hosting - AI ML Operations, LLC{% endblock %}
{% block meta_description %}Professional web design and reliable hosting solutions by AI ML Operations, LLC. We create
visually stunning, functional websites tailored to your business.{% endblock %}

{% block content %}
<!-- Hero Section -->
<div class="hero-section" style="height: 40vh; min-height: 300px;">
  <div class="hero-content">
    <h1 class="hero-title">Web Design & Hosting</h1>
    <p class="hero-subtitle">Crafting Beautiful, Functional Websites with Reliable Hosting</p>
  </div>
</div>

<!-- About Web Design & Hosting Section -->
<div class="section">
  <div class="container">
    <h2 class="section-title">About Our Web Design & Hosting Service</h2>
    <p style="text-align: center; max-width: 800px; margin: 0 auto; color: var(--text-muted); font-size: 1.1rem;">
      At AI ML Operations, we specialize in creating visually stunning, highly functional websites tailored to your
      business needs. From design to deployment, we handle every aspect of your online presence. Our reliable hosting
      solutions ensure your website is always fast, secure, and accessible. Whether you need a simple portfolio site or
      a complex e-commerce platform, we’ve got you covered.
    </p>
  </div>
</div>

<!-- Features Section -->
<div class="section" style="background: var(--surface-color);">
  <div class="container">
    <h2 class="section-title">What We Offer</h2>
    <div class="card-grid">
      <div class="card" style="text-align: center;">
        <h5 class="card-title">Custom Web Design</h5>
        <p class="card-text">Tailored designs that reflect your brand and engage your audience.</p>
      </div>
      <div class="card" style="text-align: center;">
        <h5 class="card-title">Reliable Hosting</h5>
        <p class="card-text">Fast, secure, and scalable hosting solutions for your website.</p>
      </div>
      <div class="card" style="text-align: center;">
        <h5 class="card-title">Ongoing Support</h5>
        <p class="card-text">Continuous maintenance and support to keep your site running smoothly.</p>
      </div>
    </div>
  </div>
</div>

<!-- Services Section -->
<div class="section">
  <div class="container">
    <h2 class="section-title">Our Services</h2>
    <div class="card-grid">
      <div class="card">
        <img src="{% static 'public/img/web_design/card-1.jpg' %}" alt="Custom Web Design"
          style="width: 100%; border-radius: 8px; margin-bottom: 1rem;">
        <span class="card-title">Custom Web Design</span>
        <p class="card-text">Unique, responsive designs tailored to your brand and audience.</p>
      </div>
      <div class="card">
        <img src="{% static 'public/img/web_design/card-2.jpg' %}" alt="E-Commerce Solutions"
          style="width: 100%; border-radius: 8px; margin-bottom: 1rem;">
        <span class="card-title">E-Commerce Solutions</span>
        <p class="card-text">Build and optimize online stores for seamless shopping experiences.</p>
      </div>
      <div class="card">
        <img src="{% static 'public/img/web_design/card-3.jpg' %}" alt="Website Hosting"
          style="width: 100%; border-radius: 8px; margin-bottom: 1rem;">
        <span class="card-title">Website Hosting</span>
        <p class="card-text">Secure, high-performance hosting with 99.9% uptime guarantee.</p>
      </div>
      <div class="card">
        <img src="{% static 'public/img/web_design/card-4.jpg' %}" alt="SEO Optimization"
          style="width: 100%; border-radius: 8px; margin-bottom: 1rem;">
        <span class="card-title">SEO Optimization</span>
        <p class="card-text">Improve your website's visibility and ranking on search engines.</p>
      </div>
      <div class="card">
        <img src="{% static 'public/img/web_design/card-5.jpg' %}" alt="Maintenance & Support"
          style="width: 100%; border-radius: 8px; margin-bottom: 1rem;">
        <span class="card-title">Maintenance & Support</span>
        <p class="card-text">Regular updates, backups, and troubleshooting to keep your site running smoothly.</p>
      </div>
    </div>
  </div>
</div>

<!-- Pricing Section -->
<div class="section" style="background: var(--surface-color);">
  <div class="container">
    <h2 class="section-title">Web Hosting Plans</h2>

    <!-- Pricing toggle -->
    <div style="text-align: center; margin-bottom: 3rem;">
      <label style="color: var(--text-color); font-size: 1.1rem; cursor: pointer;">
        Monthly
        <input type="checkbox" id="pricingToggle" style="margin: 0 10px;">
        Yearly
      </label>
    </div>

    <!-- Pricing cards -->
    <div class="card-grid" style="grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));">
      <!-- Monthly Card -->
      <div class="card" style="text-align: center;">
        <span class="card-title" style="font-size: 1.5rem;">Standard Plan</span>
        <h4 style="font-size: 3rem; color: var(--primary-color); margin: 1rem 0;">$<span class="price">10</span></h4>
        <p class="card-text" style="margin-bottom: 2rem;"><span class="billing-period">per month</span></p>
        <ul style="text-align: left; margin-bottom: 2rem; list-style: none;">
          <li style="margin-bottom: 0.5rem;">✓ Web Hosting</li>
          <li style="margin-bottom: 0.5rem;">✓ Weekly Backups</li>
          <li style="margin-bottom: 0.5rem;">✓ SSL Certificate</li>
          <li style="margin-bottom: 0.5rem;">✓ CAPTCHA Protection</li>
          <li style="margin-bottom: 0.5rem;">✓ Email Notifications</li>
          <li style="margin-bottom: 0.5rem;">✓ Backend Admin Access</li>
        </ul>
        <a href="#" class="btn">Get Started</a>
      </div>

      <!-- Yearly Card -->
      <div class="card" style="text-align: center; border-color: var(--secondary-color);">
        <span class="card-title" style="font-size: 1.5rem; color: var(--secondary-color);">Premium Plan</span>
        <h4 style="font-size: 3rem; color: var(--secondary-color); margin: 1rem 0;">$<span class="price">15</span></h4>
        <p class="card-text" style="margin-bottom: 2rem;"><span class="billing-period">per month</span></p>
        <ul style="text-align: left; margin-bottom: 2rem; list-style: none;">
          <li style="margin-bottom: 0.5rem;">✓ All Standard Features</li>
          <li style="margin-bottom: 0.5rem;">✓ Monthly Analytics Reports</li>
          <li style="margin-bottom: 0.5rem;">✓ Site Optimization Reports</li>
          <li style="margin-bottom: 0.5rem;">✓ HTML Marketing Emails</li>
          <li style="margin-bottom: 0.5rem;">✓ 2 Months Free (Yearly)</li>
          <li style="margin-bottom: 0.5rem;">✓ Priority Support</li>
        </ul>
        <a href="#" class="btn" style="background: var(--secondary-color); color: white;">Save 20%</a>
      </div>
    </div>
  </div>
</div>

<script>
  // Toggle functionality
  document.getElementById('pricingToggle').addEventListener('change', function () {
    const prices = document.querySelectorAll('.price');
    const periods = document.querySelectorAll('.billing-period');

    if (this.checked) {
      prices[0].textContent = '100';
      periods[0].textContent = 'per year';
      prices[1].textContent = '150';
      periods[1].textContent = 'per year';
    } else {
      prices[0].textContent = '10';
      periods[0].textContent = 'per month';
      prices[1].textContent = '15';
      periods[1].textContent = 'per month';
    }
  });
</script>

<!-- Call to Action Section -->
<div class="section" style="text-align: center;">
  <div class="container">
    <h2 class="section-title">Ready to Build Your Online Presence?</h2>
    <p class="hero-subtitle" style="margin-bottom: 2rem;">Contact us today to get started on your website project.</p>
    <a href="{% url 'contact' %}" class="btn">Get Started</a>
  </div>
</div>
{% endblock %}