{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>
      K-DepoT | Kikimor EOOD</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #ead9cb;
    }
header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 2rem;
}
    header h1 {
      margin: 0;
    }
    section.hero {
      background: url('{% static "images/depot.jpg" %}') center/cover no-repeat;
      height: 400px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      text-shadow: 2px 2px 5px black;
    }
    .content {
      padding: 2rem;
      max-width: 1000px;
      margin: auto;
    }
    .gallery {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 1rem;
    }
    .gallery img {
      width: 100%;
      height: auto;
      border-radius: 8px;
    }
    .map {
      margin: 2rem 0;
      text-align: center;
    }
    footer {
      background-color: #2d3436;
      color: white;
      text-align: center;
      padding: 1rem;
    }
    #map {
        height: 400px;
        width: 100%;
        border: 1px solid #ccc;
        margin: 20px 0;
    }
.header-content {
    text-align: center;
}

.login-link {
    position: absolute;
    right: 2rem;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border: 1px solid white;
    border-radius: 4px;
}

.login-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
  </style>
</head>

<body>

<header>
    <div class="header-content">
        <h1>
            <img src="{% static 'images/k-depot-logo.svg' %}" alt="K-DepoT Logo" style="height: 150px; vertical-align: middle;">
            K-DepoT
        </h1>
        <p>Operated by Kikimor EOOD</p>
    </div>
    <a href="{% url 'login' %}" class="login-link">Login</a>
</header>

  <section class="hero">
    <h2>Efficient, Secure & Reliable Container Solutions</h2>
  </section>

  <div class="content">
    <h2>About Us</h2>
    <p>K-DepoT is your trusted partner for fast, efficient, and secure container depot services. Located in the port city of Varna, we specialize in container receiving, storage, and dispatching. At Kikimor EOOD, we combine modern logistics with reliable service to keep your cargo moving without delays.</p>

    <h2>Gallery</h2>
    <div class="gallery">
        <img src="{% static 'images/depot.jpg' %}" alt="K-DepoT yard">
        <img src="https://images.unsplash.com/photo-1570129477492-45c003edd2be" alt="Container operations">
        <img src="https://images.unsplash.com/photo-1604668915915-43e6227f021f" alt="Logistics and transport">
    </div>
    <h2>Contact Us</h2>
    <p><strong>Address:</strong> Morska sirena str. 39, Varna, Bulgaria</p>
    <p><strong>Phone:</strong> +359 88 123 4567</p>
    <p><strong>Email:</strong> info@k-depot.bg</p>

    <div class="map">
        <div id="map"></div>
    </div>
  </div>

  <footer>
    &copy; 2025 Kikimor EOOD | K-DepoT - All rights reserved.
  </footer>


<script>
    function initMap() {
        const depot = { lat: 43.2121, lng: 27.9204 };
        const map = new google.maps.Map(document.getElementById('map'), {
            zoom: 15,
            center: depot,
        });
        const marker = new google.maps.Marker({
            position: depot,
            map: map,
            title: 'K-DepoT'
        });
    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBboGDgiCrc9yp2uSLmVcfVVIVK-kOQqc4&callback=initMap" async defer></script>
</body>
</html>


