<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Datamule Digital Twin</title>
  <link rel="stylesheet" href="style.css"/>

  <!-- ✅ AOS CSS (for animations) -->
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

  <style>
    body, html {
      margin: 0;
      padding: 0;
      background: #000;
      overflow-x: hidden;
      font-family: Arial, sans-serif;
      scroll-behavior: smooth;
      line-height: 1.6;
      /* ✅ ensures anchor targets aren’t hidden under fixed navbar */
      scroll-padding-top: 90px;
    }

    /* ✅ Navbar */
    #navbar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;                 
      padding: 14px 0;
      transition: background 0.4s ease, box-shadow 0.4s ease, color 0.3s ease;
      z-index: 1000;
      background: transparent;
      display: flex;
      justify-content: center;
    }

    #navbar.scrolled {
      background: #fff;
      box-shadow: 0 2px 10px rgba(0,0,0,0.15);
    }

    .nav-container {
      display: flex;
      align-items: center;
      gap: 30px;
      width: 90%;
      max-width: 1200px;
      justify-content: space-between;
    }

    .logo {
      height: 48px;
      display: block;
      margin-left: -40px;
      filter: drop-shadow(0 0 1px #00ff80)
              drop-shadow(0 0 3px #00ff80);
      transition: filter 0.3s ease;
    }

    #navbar.scrolled .logo {
      filter: drop-shadow(0 0 1px rgba(0,0,0,0.6));
    }

    /* ✅ Nav links */
    nav ul {
      display: flex;
      list-style: none;
      gap: 30px;
      margin: 0;
      padding: 0;
    }

    nav ul li a {
      text-decoration: none;
      font-weight: 600;
      font-size: 1rem;
      color: #fff;
      transition: color 0.3s ease, border-bottom 0.3s ease;
      padding-bottom: 4px;
    }

    #navbar.scrolled nav ul li a {
      color: #111;
    }

    nav ul li a:hover {
      border-bottom: 2px solid #00ff80;
    }

    /* ✅ Hero */
    #hero {
      position: relative;
      height: 100vh;
      width: 100vw;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      background: linear-gradient(180deg, #0a1a2f, #112244);
      padding-top: 80px;
    }

    #particleCanvas {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
    }

    .hero-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      z-index: 1;
      width: 90%;
      max-width: 1200px;
      margin: auto;
      gap: 40px;
    }

    .robot-container img {
      max-width: 350px;
      height: auto;
      display: block;
      filter: drop-shadow(0 0 6px #ffffff)
              drop-shadow(0 0 12px #ffffff)
              drop-shadow(0 0 18px #ffffff);
      animation: glowPulse 1.5s infinite alternate;
    }

    .hero-text {
      color: #fff;
      max-width: 500px;
    }

    .hero-text h1 {
      font-size: 2.8rem;
      margin-bottom: 15px;
    }

    .hero-text h2 {
      font-size: 1.8rem;
      color: #00ff80;
      margin-bottom: 15px;
    }

    .hero-text p {
      font-size: 1.05rem;
      line-height: 1.6;
      color: #ddd;
    }

    @keyframes glowPulse {
      from {
        filter: drop-shadow(0 0 4px #ffffff)
                drop-shadow(0 0 8px #ffffff)
                drop-shadow(0 0 12px #ffffff);
        opacity: 0.9;
      }
      to {
        filter: drop-shadow(0 0 12px #ffffff)
                drop-shadow(0 0 24px #ffffff)
                drop-shadow(0 0 36px #ffffff);
        opacity: 1;
      }
    }

    /* ✅ Section base */
    section {
      min-height: 100vh;
      padding: 60px 20px;
      box-sizing: border-box;
    }

    #about, #services, #clients, #contact {
      background: #fff;
      color: #000;
      padding-top: 30px;
    }

    .section-content {
      max-width: 1200px;
      margin: auto;
      padding: 0 20px;
      text-align: left;
    }

    /* ✅ Headings */
    section h2 {
      font-size: 2.4rem;
      margin-bottom: 25px;
      color: #00aa55;
      text-align: center;
    }

    /* ✅ About */
    .about-container {
      max-width: 1200px;
      margin: auto;
      padding: 60px 20px;
    }

    .about-heading {
      text-align: center;
      margin-bottom: 40px;
    }

    .about-heading h2 {
      font-size: 2.4rem;
      color: #00aa55;
      margin-bottom: 10px;
    }

    .about-subtitle {
      font-size: 1.1rem;
      color: #555;
    }

    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 40px;
      align-items: center;
    }

    .about-left, .about-right {
      font-size: 1.05rem;
      line-height: 1.7;
      color: #333;
    }

    .about-image img {
      width: 100%;
      max-width: 420px;
      margin: 0 auto;
      display: block;
      box-shadow: none;
      border: none;
    }

    @media (max-width: 900px) {
      .about-grid {
        grid-template-columns: 1fr;
        text-align: center;
      }
      .about-left, .about-right {
        text-align: center;
      }
      .about-image {
        margin: 30px 0;
      }
      .about-image img {
        max-width: 80%;
      }
    }

    /* ✅ Services */
    .services-grid {
      margin-top: 35px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
      gap: 25px;
    }

    .service-card {
      background: #f9f9f9;
      padding: 35px 20px;
      border-radius: 12px;
      text-align: center;
      font-weight: 600;
      font-size: 1.05rem;
      box-shadow: 0 6px 14px rgba(0,0,0,0.08);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .service-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }

    /* ✅ Clients */
    .clients-names {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 12px 24px;
      margin: 30px 0 50px;
      font-size: 0.95rem;
      color: #222;
      text-align: center;
    }

    .logos-strip {
      overflow: hidden;
      position: relative;
      width: 100%;
      background: #fff;
      padding: 20px 0;
    }

    .logos-track {
      display: flex;
      gap: 50px;
      animation: scroll-logos 40s linear infinite;
      will-change: transform;
    }

    .logos-track img {
      height: 60px;
      width: auto;
      object-fit: contain;
      filter: none;
    }

    @keyframes scroll-logos {
      from { transform: translateX(0); }
      to { transform: translateX(-50%); }
    }

    /* ✅ Decorative full-width banner strip under "Our Clients" */
    .clients-strip {
      width: 100vw;
      height: 500px;
      margin: 30px 0;
      background: url("images/debda698-7250-461a-afce-99baa97a6ad2.png") center/cover no-repeat fixed;
      background-attachment: fixed;
      border-radius: 0;
    }

    /* ✅ Contact */
    #contact .contact-grid {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: 1.1fr 1fr;
      gap: 40px;
      align-items: start;
      padding: 0 20px;
    }

    #contact .card {
      background: #f9f9f9;
      border-radius: 12px;
      box-shadow: 0 6px 14px rgba(0,0,0,0.08);
      padding: 24px;
    }

    #contact .card h3 {
      margin: 0 0 12px;
      font-size: 1.2rem;
      color: #111;
    }

    #contact .info p {
      margin: 8px 0;
      color: #333;
      font-size: 0.98rem;
    }

    #contact form .row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    #contact form input,
    #contact form textarea {
      width: 100%;
      padding: 12px 14px;
      border: 1px solid #ddd;
      border-radius: 10px;
      font-size: 0.98rem;
      outline: none;
      background: #fff;
      color: #111;
    }

    #contact form textarea {
      min-height: 140px;
      resize: vertical;
    }

    #contact form button {
      margin-top: 10px;
      padding: 12px 16px;
      border: none;
      border-radius: 10px;
      background: #00aa55;
      color: #fff;
      font-weight: 700;
      cursor: pointer;
      transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    #contact form button:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 18px rgba(0,170,85,0.25);
    }

    @media (max-width: 900px) {
      #contact .contact-grid {
        grid-template-columns: 1fr;
      }
      #contact form .row {
        grid-template-columns: 1fr;
      }
    }

    /* ✅ Responsive */
    @media (max-width: 768px) {
      .hero-content {
        flex-direction: column;
        text-align: center;
        gap: 25px;
      }
      .hero-text {
        max-width: 100%;
      }
      nav ul {
        gap: 18px;
      }
    }
  </style>
</head>
<body>
  <!-- ✅ Fixed Navbar -->
  <header id="navbar">
    <div class="nav-container">
      <a href="#hero" aria-label="Datamule Home">
        <img class="logo" src="images/logo.png" alt="Datamule Logo">
      </a>
      <nav aria-label="Primary navigation">
        <ul>
          <li><a href="#hero">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#services">Services</a></li>
          <li><a href="#clients">Clients</a></li>
          <li><a href="#contact">Contact</a></li> <!-- ✅ now points to #contact -->
        </ul>
      </nav>
    </div>
  </header>

  <!-- ✅ Hero -->
  <section id="hero">
    <canvas id="particleCanvas" aria-hidden="true"></canvas>
    <div class="hero-content">
      <div class="hero-text">
        <h1>Datamule Digital Twin</h1>
        <h2>Smart data. Real outcomes.</h2>
        <p>We connect systems, unlock insights, and automate decisions so your organisation can move faster.</p>
      </div>
      <div class="robot-container">
        <img src="images/robot.png" alt="AI Robot">
      </div>
    </div>
  </section>

  <!-- ✅ About -->
  <section id="about">
    <div class="about-container">
      <div class="about-heading">
        <h2>About Us</h2>
        <p class="about-subtitle">Digital twins, data pipelines, and automation—designed for municipalities and enterprises.</p>
      </div>
      <div class="about-grid">
        <div class="about-left">
          We build robust digital twins and dashboards, connecting assets, people, and processes with reliable data.
        </div>
        <div class="about-image">
          <img src="images/about-visual.png" alt="Platform Overview">
        </div>
        <div class="about-right">
          Our integrations are secure, scalable, and designed to deliver measurable impact within weeks.
        </div>
      </div>
    </div>
  </section>

  <!-- ✅ Services -->
  <section id="services">
    <div class="section-content">
      <h2>Services</h2>
      <div class="services-grid">
        <div class="service-card">Digital Twin Build</div>
        <div class="service-card">IoT + SCADA Integration</div>
        <div class="service-card">Automation &amp; Alerts</div>
        <div class="service-card">Dashboards &amp; BI</div>
      </div>
    </div>
  </section>

  <!-- ✅ Clients -->
  <section id="clients">
    <div class="section-content">
      <h2>Our Clients</h2>

      <div class="clients-names">
        <div>Mohokare Local Municipality</div>
        <div>Setsoto Local Municipality</div>
        <div>Nketoane Local Municipality</div>
        <div>Phumelela Local Municipality</div>
        <div>Matjhabeng Local Municipality</div>
        <div>Ulundi Local Municipality</div>
        <div>Ratlou Local Municipality</div>
        <div>Masilonyana Local Municipality</div>
        <div>Ngwathe Local Municipality</div>
        <div>Dihlabeng Local Municipality</div>
        <div>Mantsopa Local Municipality</div>
        <div>Mafube Local Municipality</div>
        <div>Nala Local Municipality</div>
        <div>Tokologo Local Municipality</div>
        <div>Tswelopele Local Municipality</div>
        <div>Letsemeng Local Municipality</div>
        <div>Setsoto Local Municipality</div>
        <div>Moqhaka Local Municipality</div>
        <div>Maluti-a-Phofung Local Municipality</div>
        <div>Jozini Local Municipality</div>
      </div>

      <div class="clients-strip" aria-hidden="true"></div>

      <div class="logos-strip">
        <div class="logos-track">
          <img src="images/logo1.png" alt="Client 1">
          <img src="images/logo2.png" alt="Client 2">
          <img src="images/logo3.png" alt="Client 3">
          <img src="images/logo4.png" alt="Client 4">
          <img src="images/logo5.png" alt="Client 5">
          <!-- duplicate sequence for seamless loop -->
          <img src="images/logo1.png" alt="Client 1">
          <img src="images/logo2.png" alt="Client 2">
          <img src="images/logo3.png" alt="Client 3">
          <img src="images/logo4.png" alt="Client 4">
          <img src="images/logo5.png" alt="Client 5">
        </div>
      </div>
    </div>
  </section>

  <!-- ✅ Contact (ENABLED) -->
  <section id="contact">
    <div class="section-content">
      <h2>Contact Us</h2>
      <div class="contact-grid">
        <div class="card info">
          <h3>Get in touch</h3>
          <p><strong>Email:</strong> hello@datamule.co.za</p>
          <p><strong>Phone:</strong> +27 00 000 0000</p>
          <p><strong>Office:</strong> Welkom, Free State, South Africa</p>
          <p>We’ll respond within 1 business day.</p>
        </div>
        <div class="card">
          <h3>Send a message</h3>
          <form action="#" method="post" onsubmit="event.preventDefault(); alert('Thanks, your message was sent.');">
            <div class="row">
              <input type="text" name="first_name" placeholder="First name" required>
              <input type="text" name="last_name" placeholder="Last name" required>
            </div>
            <div class="row">
              <input type="email" name="email" placeholder="Email" required>
              <input type="tel" name="phone" placeholder="Phone">
            </div>
            <textarea name="message" placeholder="Tell us about your project..." required></textarea>
            <button type="submit">Send Message</button>
          </form>
        </div>
      </div>
    </div>
  </section>

  <!-- ✅ Optional footer -->
  <footer style="background:#0b0b0b; color:#bbb; padding:24px 20px; text-align:center;">
    © <span id="year"></span> Datamule. All rights reserved.
  </footer>

  <!-- ✅ Minimal JS: navbar scroll state + year + safe canvas -->
  <script>
    const navbar = document.getElementById('navbar');
    window.addEventListener('scroll', () => {
      if (window.scrollY > 20) {
        navbar.classList.add('scrolled');
      } else {
        navbar.classList.remove('scrolled');
      }
    });

    document.getElementById('year').textContent = new Date().getFullYear();

    // simple no-op canvas to avoid errors if you want a background effect later
    (function initCanvas() {
      const c = document.getElementById('particleCanvas');
      if (!c) return;
      const ctx = c.getContext('2d');
      function resize() {
        c.width = c.clientWidth;
        c.height = c.clientHeight;
        ctx.clearRect(0, 0, c.width, c.height);
      }
      window.addEventListener('resize', resize);
      resize();
    })();
  </script>
</body>
</html>
