{% extends "base.html" %}
{% load static %}
{% block path %}  url({% static 'public/img/web_design_bg.jpg' %}) {% endblock %}

{% block content %}
    <!-- Hero Section -->
    <div class="hero-section">
      <h1>Web Design & Hosting</h1>
      <p class="flow-text">Crafting Beautiful, Functional Websites with Reliable Hosting</p>
    </div>

    <!-- About Web Design & Hosting Section -->
    <div class="section white">
      <div class="row container">
        <h2 class="header">About Our Web Design & Hosting Service</h2>
        <p class="flow-text">
          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 grey lighten-3">
      <div class="row container">
        <h2 class="header">What We Offer</h2>
        <div class="col s12 m4">
          <div class="icon-block">
            <i class="material-icons">design_services</i>
            <h5>Custom Web Design</h5>
            <p>Tailored designs that reflect your brand and engage your audience.</p>
          </div>
        </div>
        <div class="col s12 m4">
          <div class="icon-block">
            <i class="material-icons">dns</i>
            <h5>Reliable Hosting</h5>
            <p>Fast, secure, and scalable hosting solutions for your website.</p>
          </div>
        </div>
        <div class="col s12 m4">
          <div class="icon-block">
            <i class="material-icons">settings</i>
            <h5>Ongoing Support</h5>
            <p>Continuous maintenance and support to keep your site running smoothly.</p>
          </div>
        </div>
      </div>
    </div>

    <!-- Services Section -->
    <div class="section white">
      <div class="row container">
        <h2 class="header">Our Services</h2>
        <div class="col s12 m6 l4">
          <div class="card">
            <div class="card-image">
              <img src="{% static 'public/img/web_design/card-1.jpg' %}"  height="225" width="400" alt="Custom Web Design">
            </div>
            <div class="card-content">
              <span class="card-title">Custom Web Design</span>
              <p>Unique, responsive designs tailored to your brand and audience.</p>
            </div>
          </div>
        </div>
        <div class="col s12 m6 l4">
          <div class="card">
            <div class="card-image">
              <img src="{% static 'public/img/web_design/card-2.jpg' %}"  height="225" width="400" alt="E-Commerce Solutions">
            </div>
            <div class="card-content">
              <span class="card-title">E-Commerce Solutions</span>
              <p>Build and optimize online stores for seamless shopping experiences.</p>
            </div>
          </div>
        </div>
        <div class="col s12 m6 l4">
          <div class="card">
            <div class="card-image">
              <img src="{% static 'public/img/web_design/card-3.jpg' %}"  height="225" width="400" alt="Website Hosting">
            </div>
            <div class="card-content">
              <span class="card-title">Website Hosting</span>
              <p>Secure, high-performance hosting with 99.9% uptime guarantee.</p>
            </div>
          </div>
        </div>
        <div class="col s12 m6 l4">
          <div class="card">
            <div class="card-image">
              <img src="{% static 'public/img/web_design/card-4.jpg' %}"  height="225" width="400" alt="SEO Optimization">
            </div>
            <div class="card-content">
              <span class="card-title">SEO Optimization</span>
              <p>Improve your website's visibility and ranking on search engines.</p>
            </div>
          </div>
        </div>
        <div class="col s12 m6 l4">
          <div class="card">
            <div class="card-image">
              <img src="{% static 'public/img/web_design/card-5.jpg' %}"  height="225" width="400" alt="Maintenance & Support">
            </div>
            <div class="card-content">
              <span class="card-title">Maintenance & Support</span>
              <p>Regular updates, backups, and troubleshooting to keep your site running smoothly.</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <section class="section grey lighten-4">
        <div class="container">
          <h3 class="center-align">Web Hosting Plans</h3>
          
          <!-- Pricing toggle -->
          <div class="row center-align">
            <div class="col s12">
              <div class="switch">
                <label>
                  Monthly
                  <input type="checkbox" id="pricingToggle">
                  <span class="lever"></span>
                  Yearly
                </label>
              </div>
            </div>
          </div>
      
          <!-- Pricing cards -->
          <div class="row">
            <!-- Monthly Card -->
            <div class="col s12 m6 l6">
              <div class="card z-depth-2">
                <div class="card-content center-align">
                  <span class="card-title">Standard Plan</span>
                  <h4>$<span class="price">10</span></h4>
                  <p class="grey-text"><span class="billing-period">per month</span></p>
                  <ul class="collection">
                    <li class="collection-item"><i class="material-icons left">check_circle</i>Web Hosting</li>
                    <li class="collection-item"><i class="material-icons left">check_circle</i>Weekly Backups</li>
                    <li class="collection-item"><i class="material-icons left">check_circle</i>SSL Certificate</li>
                    <li class="collection-item"><i class="material-icons left">check_circle</i>CAPTCHA Protection</li>
                    <li class="collection-item"><i class="material-icons left">check_circle</i>Email Notifications</li>
                    <li class="collection-item"><i class="material-icons left">check_circle</i>Backend Admin Access</li>
                  </ul>
                </div>
                <div class="card-action center-align">
                  <a href="#" class="waves-effect waves-light btn blue">Get Started</a>
                </div>
              </div>
            </div>
      
            <!-- Yearly Card -->
            <div class="col s12 m6 l6">
              <div class="card z-depth-2 teal lighten-1 white-text">
                <div class="card-content center-align">
                  <span class="card-title">Premium Plan</span>
                  <h4>$<span class="price">15</span></h4>
                  <p><span class="billing-period">per month</span></p>
                  <ul class="collection">
                    <li class="collection-item teal lighten-1 white-text"><i class="material-icons left">check_circle</i>All Standard Features</li>
                    <li class="collection-item teal lighten-1 white-text"><i class="material-icons left">analytics</i>Monthly Analytics Reports</li>
                    <li class="collection-item teal lighten-1 white-text"><i class="material-icons left">speed</i>Site Optimization Reports</li>
                    <li class="collection-item teal lighten-1 white-text"><i class="material-icons left">email</i>HTML Marketing Emails</li>
                    <li class="collection-item teal lighten-1 white-text"><i class="material-icons left">star</i>2 Months Free (Yearly)</li>
                    <li class="collection-item teal lighten-1 white-text"><i class="material-icons left">star</i>Priority Support</li>
                  </ul>
                </div>
                <div class="card-action center-align">
                  <a href="#" class="waves-effect waves-light btn white blue-text">Save 20%</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <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 blue-grey darken-3 white-text">
      <div class="row container center">
        <h2 class="header">Ready to Build Your Online Presence?</h2>
        <p class="flow-text">Contact us today to get started on your website project.</p>
        <a href="{% url 'contact' %}" class="btn-large waves-effect waves-light white blue-grey-text text-darken-3">Get Started</a>
      </div>
    </div>
{% endblock %}