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

{% block title %}ComplianceShield — Construction Compliance, Made Simple{% endblock %}

{% block content %}
<body class="bg-premium">

<!-- NAV -->
<header class="max-w-7xl mx-auto px-6 py-5">
  <div class="shell px-5 py-4 flex items-center justify-between gap-3">
    <a href="#" class="flex items-center gap-3">
      <div class="h-10 w-10 rounded-2xl bg-[#0b0b0c] text-white flex items-center justify-center text-sm font-semibold">CS</div>
      <div class="font-semibold tracking-tight">ComplianceShield</div>
      <span class="hidden sm:inline chip px-3 py-1 text-xs text-gray-700">Pro</span>
    </a>

    <nav class="hidden lg:flex items-center gap-7 text-sm">
      <a class="text-gray-700 hover:text-black" href="#">Home</a>
      <a class="text-gray-700 hover:text-black" href="#">Features</a>
      <a class="text-gray-700 hover:text-black" href="#">Pricing</a>
      <a class="text-gray-700 hover:text-black" href="#">Integrations</a>
      <a class="text-gray-700 hover:text-black" href="#">About</a>
    </nav>

    <div class="flex items-center gap-2">
      <a class="hidden sm:inline text-sm text-gray-700 hover:text-black" href="#">Sign In</a>
      <a href="#" class="btn bg-[#2563eb] text-white text-sm px-4 py-2">Start Free Trial</a>
      <button class="lg:hidden chip px-3 py-2 text-sm" onclick="toggleMenu()" aria-label="Open menu">Menu</button>
    </div>
  </div>

  <!-- mobile drawer -->
  <div id="drawer" class="drawer hidden mt-3 shell p-4">
    <div class="grid gap-2 text-sm">
      <a class="text-gray-900 font-semibold" href="#" onclick="toggleMenu(true)">Home</a>
      <a class="text-gray-800" href="#" onclick="toggleMenu(true)">Features</a>
      <a class="text-gray-800" href="#" onclick="toggleMenu(true)">Pricing</a>
      <a class="text-gray-800" href="#" onclick="toggleMenu(true)">Integrations</a>
      <a class="text-gray-800" href="#" onclick="toggleMenu(true)">About</a>
      <div class="h-px border-t border-black/10 my-2"></div>
      <a class="text-gray-800" href="#" onclick="toggleMenu(true)">Sign In</a>
      <a href="#" onclick="toggleMenu(true)" class="btn bg-[#2563eb] text-white text-sm px-4 py-2 text-center">Start Free Trial</a>
    </div>
  </div>
</header>

<main class="max-w-7xl mx-auto px-6 pb-16">

  <!-- HERO -->
  <section class="shell overflow-hidden">
    <div class="grid lg:grid-cols-12 gap-10 p-8 lg:p-10 items-center">
      <div class="lg:col-span-6">
        <div class="inline-flex items-center gap-2 chip px-3 py-1 text-xs">
          <span class="h-2 w-2 rounded-full bg-[#2563eb]"></span>
          Trusted by contractors & project managers
        </div>

        <h1 class="mt-6 text-4xl md:text-6xl font-extrabold tracking-tight leading-[1.02]">
          Construction compliance,<br/>made simple.
        </h1>

        <p class="mt-6 text-base md:text-lg text-gray-700">
          Track daily logs, manage OSHA documentation, monitor equipment maintenance,
          and keep subcontractors compliant — with a portal that looks premium and works in the field.
        </p>

        <div class="mt-7 flex flex-wrap gap-3">
          <a href="#" class="btn bg-[#2563eb] text-white px-5 py-3 text-sm">Get Started</a>
          <a href="#" class="btn bg-white border border-black/10 px-5 py-3 text-sm">View Portal Preview</a>
        </div>

        <div class="mt-7 flex flex-wrap gap-2 text-xs text-gray-600">
          <span class="chip px-3 py-1">Daily activity logs</span>
          <span class="chip px-3 py-1">Document expiration alerts</span>
          <span class="chip px-3 py-1">Safety meetings</span>
          <span class="chip px-3 py-1">Audit-ready exports</span>
        </div>

        <div class="mt-7 panel p-5">
          <div class="text-sm font-semibold">“Expensive” look, operational outcomes</div>
          <div class="mt-2 text-sm text-gray-700">
            Field teams move faster. Managers see risk instantly. Owners stay audit-ready.
          </div>
        </div>
      </div>

      <!-- hero preview card -->
      <div class="lg:col-span-6">
        <div class="panel p-6 md:p-7">
          <div class="flex items-center justify-between">
            <div class="text-sm font-semibold">Portal Snapshot</div>
            <span class="chip px-3 py-1 text-xs text-gray-700">Live-style UI</span>
          </div>

          <div class="mt-5 grid grid-cols-2 gap-4">
            <div class="panel p-5">
              <div class="text-xs text-gray-500">Ongoing Projects</div>
              <div class="mt-1 text-3xl font-extrabold">08</div>
              <div class="mt-2 text-xs text-green-600">+3.0% from last month</div>
            </div>
            <div class="panel p-5">
              <div class="text-xs text-gray-500">Alerts</div>
              <div class="mt-1 text-3xl font-extrabold">03</div>
              <div class="mt-2 text-xs text-amber-600">2 expiring documents</div>
            </div>
          </div>

          <div class="mt-4 panel p-5">
            <div class="text-xs text-gray-500">Alert Overview</div>
            <div class="mt-3 space-y-2">
              <div class="flex items-start gap-3">
                <span class="mt-0.5 h-2.5 w-2.5 rounded-full bg-red-500"></span>
                <div>
                  <div class="text-sm font-semibold">Safety incident report pending</div>
                  <div class="text-xs text-gray-600">Requires photos + supervisor review</div>
                </div>
              </div>
              <div class="flex items-start gap-3">
                <span class="mt-0.5 h-2.5 w-2.5 rounded-full bg-amber-500"></span>
                <div>
                  <div class="text-sm font-semibold">COI expiring in 7 days</div>
                  <div class="text-xs text-gray-600">Subcontractor: R. Builders LLC</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

</main>

<script>
  function toggleMenu(close) {
    const drawer = document.getElementById('drawer');
    if (close) {
        drawer.classList.add('hidden');
    } else {
        drawer.classList.toggle('hidden');
    }
  }
</script>

</body>
{% endblock %}
