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

{% block title %}Web Design & Hosting - AI ML Operations, LLC{% endblock %}
{% block meta_description %}Custom brand-tailored websites with interactive package pricing. You own the site and data. Public site + client portal with UTM/leads included; add Email/SMS, blog, Stripe, social, and more. Three-instance hosting, SEO, accessibility, LLM integration, and Grafana alerts on every build.{% endblock %}
{% block og_title %}Web Design & Hosting - AI ML Operations, LLC{% endblock %}
{% block og_description %}Build a custom site package with live pricing. You own the site and data. Base site + portal included; three-instance hosting, UTM/leads, SEO, accessibility, LLM readiness, and Grafana metrics on every project.{% endblock %}
{% block twitter_title %}Web Design & Hosting - AI ML Operations, LLC{% endblock %}
{% block twitter_description %}Custom brand-tailored sites with interactive package pricing. You own the site and data — leave anytime and take it with you.{% 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">Crafted sites with reliable multi-instance hosting and built-in growth tools</p>
  </div>
</div>

<!-- About -->
<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 design and host custom websites tailored to your brand and how your
      customers use the site. You own the site and data — leave anytime and take everything with you.
      Every project ships with three-instance hosting, UTM tracking and lead capture, optimized SEO,
      accessibility, performance, LLM integration, and Grafana metrics and alerts.
    </p>
  </div>
</div>

<!-- Included with every site -->
<div class="section" style="background: var(--surface-color);">
  <div class="container">
    <h2 class="section-title">Included With Every Site</h2>
    <div class="card-grid">
      {% for item in pricing_included %}
      <div class="card" style="text-align: center;">
        <h5 class="card-title">{{ item.title }}</h5>
        <p class="card-text">{{ item.description }}</p>
      </div>
      {% endfor %}
    </div>
  </div>
</div>

<!-- Services -->
<!-- <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="Client Portal"
          style="width: 100%; border-radius: 8px; margin-bottom: 1rem;">
        <span class="card-title">Client Portal + UTM</span>
        <p class="card-text">Login, dashboard, leads, and UTM analytics — included with every site.</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">Multi-Instance Hosting</span>
        <p class="card-text">At least three instances for reliability, failover, and scale.</p>
      </div>
      <div class="card">
        <img src="{% static 'public/img/web_design/card-4.jpg' %}" alt="SEO and Accessibility"
          style="width: 100%; border-radius: 8px; margin-bottom: 1rem;">
        <span class="card-title">SEO, Accessibility &amp; Performance</span>
        <p class="card-text">Search-ready, accessible, and fast — plus LLM-friendly site structure.</p>
      </div>
      <div class="card">
        <img src="{% static 'public/img/web_design/card-5.jpg' %}" alt="Growth Add-ons"
          style="width: 100%; border-radius: 8px; margin-bottom: 1rem;">
        <span class="card-title">Growth Add-ons</span>
        <p class="card-text">Email/SMS, direct mail, blog, Stripe payments, social, and AI social drafts.</p>
      </div>
    </div>
  </div>
</div> -->

<!-- Interactive pricing -->
<div class="section" style="background: var(--surface-color);">
  <div class="container">
    <h2 class="section-title">Build Your Package</h2>
    <p class="pricing-intro">
      Public site and client portal (with UTM) are always included. Toggle add-ons to see one-time
      build and monthly totals. Stripe / SMS / postage usage billed separately.
    </p>

    <div class="pricing-estimator" id="pricingEstimator"
      data-disclaimer="{{ pricing_disclaimer|escape }}">
      <div class="pricing-features-panel">
        <h3 class="pricing-panel-title">Features</h3>
        <ul class="pricing-feature-list" role="list">
          {% for feature in pricing_features %}
          <li class="pricing-feature{% if feature.required %} is-required{% endif %}"
            data-feature-id="{{ feature.id }}">
            <label class="pricing-feature-label">
              <input type="checkbox"
                class="pricing-feature-check"
                value="{{ feature.id }}"
                data-build="{{ feature.build }}"
                data-monthly="{{ feature.monthly }}"
                data-requires="{{ feature.requires|join:',' }}"
                {% if feature.required %}checked disabled{% endif %}>
              <span class="pricing-feature-body">
                <span class="pricing-feature-name">{{ feature.name }}</span>
                <span class="pricing-feature-desc">{{ feature.description }}</span>
                {% if feature.requires_note %}
                <span class="pricing-feature-note" hidden data-note-for="{{ feature.id }}">{{ feature.requires_note }}</span>
                {% endif %}
              </span>
              <span class="pricing-feature-costs">
                <strong>${{ feature.build }}</strong> build
                <span class="pricing-feature-monthly"><strong>${{ feature.monthly }}</strong> /mo</span>
              </span>
            </label>
          </li>
          {% endfor %}
        </ul>
      </div>

      <aside class="pricing-estimate-panel" aria-live="polite">
        <h3 class="pricing-panel-title">Estimate</h3>
        <div class="pricing-estimate-row">
          <span>One-time build</span>
          <strong id="estimateBuild">${{ pricing_base_estimate.one_time_build }}</strong>
        </div>
        <div class="pricing-estimate-row">
          <span>Monthly</span>
          <strong id="estimateMonthly">${{ pricing_base_estimate.monthly }}</strong>
        </div>
        <p class="pricing-estimate-count" id="estimateCount">
          Selected: {{ pricing_base_estimate.selected_count }} features
        </p>
        <p class="pricing-estimate-disclaimer">{{ pricing_disclaimer }}</p>
        <a href="{% url 'contact' %}?subject=Web%20Design%20Package%20Estimate"
          class="btn pricing-estimate-cta"
          id="estimateContactCta"
          data-tianji-event="web_design_estimate_submit"
          data-tianji-event-page="web_design"
          data-tianji-event-action="request_quote"
          data-tianji-event-build="{{ pricing_base_estimate.one_time_build }}"
          data-tianji-event-monthly="{{ pricing_base_estimate.monthly }}"
          data-tianji-event-selected-count="{{ pricing_base_estimate.selected_count }}"
          data-tianji-event-features="{% for item in pricing_base_estimate.selected %}{{ item.id }}{% if not forloop.last %},{% endif %}{% endfor %}">Request this package</a>
      </aside>
    </div>
  </div>
</div>

<script>
(function () {
  var root = document.getElementById('pricingEstimator');
  if (!root) return;

  var checks = Array.prototype.slice.call(root.querySelectorAll('.pricing-feature-check'));
  var buildEl = document.getElementById('estimateBuild');
  var monthlyEl = document.getElementById('estimateMonthly');
  var countEl = document.getElementById('estimateCount');
  var ctaEl = document.getElementById('estimateContactCta');
  var byId = {};

  checks.forEach(function (input) {
    byId[input.value] = input;
  });

  function formatMoney(n) {
    return '$' + n.toLocaleString('en-US');
  }

  function trackTianji(name, data) {
    if (typeof window.aimlTrackWhenReady === 'function') {
      window.aimlTrackWhenReady(name, data);
    }
  }

  function getSelectionState() {
    var build = 0;
    var monthly = 0;
    var selected = [];

    checks.forEach(function (input) {
      if (!input.checked) return;
      build += Number(input.getAttribute('data-build')) || 0;
      monthly += Number(input.getAttribute('data-monthly')) || 0;
      selected.push(input.value);
    });

    return {
      build: build,
      monthly: monthly,
      selected: selected,
      selectedCount: selected.length,
      features: selected.join(','),
    };
  }

  function requiredBy(id) {
    return checks.filter(function (input) {
      var req = (input.getAttribute('data-requires') || '').split(',').filter(Boolean);
      return req.indexOf(id) !== -1 && input.checked;
    });
  }

  function enforceDependencies(changed) {
    checks.forEach(function (input) {
      if (!input.checked || input.disabled) return;
      var req = (input.getAttribute('data-requires') || '').split(',').filter(Boolean);
      req.forEach(function (depId) {
        var dep = byId[depId];
        if (dep && !dep.checked && !dep.disabled) {
          dep.checked = true;
        }
      });
    });

    if (changed && !changed.checked) {
      requiredBy(changed.value).forEach(function (dep) {
        if (!dep.disabled) dep.checked = false;
      });
    }

    checks.forEach(function (input) {
      var note = root.querySelector('[data-note-for="' + input.value + '"]');
      if (!note) return;
      var req = (input.getAttribute('data-requires') || '').split(',').filter(Boolean);
      note.hidden = !(input.checked && req.length);
    });
  }

  function updateEstimate() {
    enforceDependencies();

    var state = getSelectionState();

    checks.forEach(function (input) {
      var row = input.closest('.pricing-feature');
      if (row) row.classList.toggle('is-selected', input.checked);
    });

    buildEl.textContent = formatMoney(state.build);
    monthlyEl.textContent = formatMoney(state.monthly);
    countEl.textContent = 'Selected: ' + state.selectedCount + ' feature' + (state.selectedCount === 1 ? '' : 's');

    if (ctaEl) {
      var subject = 'Web Design Package Estimate — ' + state.features;
      ctaEl.href = '{% url "contact" %}?subject=' + encodeURIComponent(subject);
      ctaEl.setAttribute('data-tianji-event-build', String(state.build));
      ctaEl.setAttribute('data-tianji-event-monthly', String(state.monthly));
      ctaEl.setAttribute('data-tianji-event-selected-count', String(state.selectedCount));
      ctaEl.setAttribute('data-tianji-event-features', state.features);
    }

    return state;
  }

  checks.forEach(function (input) {
    input.addEventListener('change', function () {
      var before = getSelectionState();
      enforceDependencies(input);
      var state = updateEstimate();

      trackTianji('web_design_estimate_toggle', {
        page: 'web_design',
        feature: input.value,
        enabled: input.checked ? 'true' : 'false',
        build: String(state.build),
        monthly: String(state.monthly),
        selected_count: String(state.selectedCount),
        features: state.features,
        previous_features: before.features,
      });
    });
  });

  updateEstimate();
})();
</script>

<!-- Call to Action -->
<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;">
      Tell us which features you need — we will turn this estimate into a tailored proposal.
    </p>
    <a href="{% url 'contact' %}?subject=Web%20Design%20Inquiry" class="btn"
      data-tianji-event="web_design_contact_cta"
      data-tianji-event-page="web_design"
      data-tianji-event-action="get_started">
      Contact us
    </a>
  </div>
</div>
{% endblock %}