<!DOCTYPE html>
<link rel="stylesheet" href="style.css">
<html lang="en">
<head>
  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-5FKRPNKK');</script>
<meta http-equiv="Content-Security-Policy" content="
  default-src 'self';
  script-src 'self' 'unsafe-inline' https://cdn.jsdelivr.net https://www.googletagmanager.com https://www.google-analytics.com;
  style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://cdnjs.cloudflare.com;
  font-src 'self' https://fonts.gstatic.com https://cdnjs.cloudflare.com;
  img-src 'self' data: https://www.google-analytics.com;
  connect-src 'self' https://api.yoursite.com https://api.emailjs.com;
  frame-src 'self' https://www.googletagmanager.com;
  object-src 'none';
  form-action 'self';
  base-uri 'self';
">
  <link rel="icon" type="image/png" href="/img/favicon-32x32.png" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ndrivers | Your Neighbor, Your Driver in Irvine & SoCal</title>
  
  <script src="https://cdn.jsdelivr.net/npm/emailjs-com@3/dist/email.min.js"></script>
</head>
<body>
  <nav id="mainNavbar" class="navbar">
  <div class="nav-inner">
    <a href="index.html" class="nav-logo">
      <img src="/img/logo.png" alt="NDrivers Logo">
    </a>

    <ul class="nav-links">
      <li><a href="index.html">Home</a></li>
      <li><a href="about.html">About</a></li>
      <li><a href="services.html">Services</a></li>
      <li><a href="testimonials.html">Testimonials</a></li>
      <li><a href="faq.html">FAQ</a></li>
      <li><a href="contact.html">Contact</a></li>
    </ul>

    <div class="hamburger">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</nav>
<div id="iMessageWidget">
  <div id="iMessageBubble">
    💬
    <span id="unreadBadge">1</span>
  </div>

  <div id="iMessageCloud">
    <div class="chat-header">
      <span class="avatar gradient-avatar">T</span>
      <span class="chat-name">Tommy</span>
      <button id="closeChat">×</button>
    </div>
    <div class="chat-body">
      <div class="message left" data-delay="0">
        <div class="avatar gradient-avatar">T</div>
        <div class="bubble">
          <div class="typing-dots">
            <span></span><span></span><span></span>
          </div>
          <div class="text" style="display:none;">Hi there! Have a question or want to book a ride?</div>
          <div class="timestamp">Now</div>
        </div>
      </div>

      <div class="message left" data-delay="2000">
        <div class="avatar gradient-avatar">T</div>
        <div class="bubble">
          <div class="typing-dots">
            <span></span><span></span><span></span>
          </div>
          <div class="text" style="display:none;">I can help schedule your ride easily!</div>
          <div class="timestamp">Now</div>
        </div>
      </div>

      <div class="message left" data-delay="4000">
        <div class="avatar gradient-avatar">T</div>
        <div class="bubble">
          <div class="typing-dots">
            <span></span><span></span><span></span>
          </div>
          <div class="text" style="display:none;">Click the button below to text me directly 📩</div>
          <div class="timestamp">Now</div>
        </div>
      </div>

      <a href="sms:+19496966979" class="text-button">📩 Text Me</a>
    </div>
  </div>
</div>

<style>
/* Widget container */
#iMessageWidget {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Floating bubble */
#iMessageBubble {
  background: #007aff;
  color: #fff;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  position: relative;
  transition: transform 0.2s;
}

#iMessageBubble:hover {
  transform: scale(1.1);
}

#unreadBadge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: red;
  color: white;
  font-size: 12px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

/* Chat cloud */
#iMessageCloud {
  display: none;
  position: absolute;
  bottom: 70px;
  left: 0;
  width: 280px;
  background: #f2f2f7;
  border-radius: 22px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.25);
  overflow: hidden;
  transform: translateY(30px);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

/* Header */
.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #e5e5ea;
  border-bottom: 1px solid #ccc;
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
}

.chat-name {
  font-weight: bold;
  margin-left: 6px;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: white;
  font-weight: bold;
}

/* iMessage gradient avatar */
.gradient-avatar {
  background: linear-gradient(135deg, #34c759, #30a1f2);
}

/* Close button fixed alignment */
#closeChat {
  background: red;
  color: white;
  border: none;
  font-size: 18px; /* slightly bigger for visibility */
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  
  display: flex;           /* flex centering */
  align-items: center;     /* vertical center */
  justify-content: center; /* horizontal center */
  
  font-weight: bold;
  padding: 0;              /* remove default padding */
  line-height: 1;          /* avoid text offset */
}

/* Chat body */
.chat-body {
  padding: 12px;
}

/* Messages */
.message {
  display: flex;
  align-items: flex-start;
  margin-bottom: 12px;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.message.left .bubble {
  background: #e5e5ea;
  color: #000;
  border-radius: 18px 18px 18px 4px;
  padding: 10px 14px;
  max-width: 200px;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  position: relative;
}

/* Typing dots */
.typing-dots {
  display: flex;
  justify-content: flex-start;
  gap: 3px;
  margin-bottom: 4px;
}

.typing-dots span {
  width: 6px;
  height: 6px;
  background: #555;
  border-radius: 50%;
  animation: blink 1.4s infinite both;
}

.typing-dots span:nth-child(1) { animation-delay: 0s; }
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes blink {
  0%, 80%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

/* Timestamp */
.timestamp {
  font-size: 10px;
  color: #8e8e93;
  margin-top: 2px;
  text-align: right;
}

/* Text Me button */
.text-button {
  display: inline-block;
  margin-top: 8px;
  background: #007aff;
  color: #fff;
  text-decoration: none;
  padding: 8px 16px;
  border-radius: 18px;
  font-weight: bold;
  transition: background 0.3s, transform 0.2s;
}

.text-button:hover {
  background: #0060d6;
  transform: translateY(-2px);
}
</style>

<script>
const bubble = document.getElementById('iMessageBubble');
const cloud = document.getElementById('iMessageCloud');
const closeBtn = document.getElementById('closeChat');
const unreadBadge = document.getElementById('unreadBadge');
const messages = document.querySelectorAll('.message');

// Function to open cloud with animation
function openChat() {
  cloud.style.display = 'block';
  setTimeout(() => {
    cloud.style.opacity = 1;
    cloud.style.transform = 'translateY(0)';
  }, 50);

  // Sequentially show messages
  messages.forEach(msg => {
    const delay = parseInt(msg.dataset.delay) || 0;
    setTimeout(() => {
      msg.style.opacity = 1;
      const typing = msg.querySelector('.typing-dots');
      const text = msg.querySelector('.text');
      setTimeout(() => {
        if (typing) typing.style.display = 'none';
        if (text) text.style.display = 'block';
      }, 1500);
    }, delay);
  });
}

// Auto open on page load
window.addEventListener('DOMContentLoaded', () => {
  openChat();
});

// Toggle chat cloud
if (bubble) {
  bubble.addEventListener('click', () => {
    if(cloud.style.display === 'block') {
      cloud.style.display = 'none';
    } else {
      openChat();
    }
  });
}

// Close button
if (closeBtn) {
  closeBtn.addEventListener('click', () => {
    cloud.style.display = 'none';
  });
}

// Remove unread badge on open
if (bubble) {
  bubble.addEventListener('click', () => {
    if (unreadBadge) unreadBadge.style.display = 'none';
  });
}
</script>

  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5FKRPNKK"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<button id="darkModeToggle" aria-label="Toggle Dark Mode">🌙</button>

  <div class="container">
    <a href="/" class="logo-link">
      <img id="logoImg" src="/img/logo.png" alt="NDrive Logo" class="logo">
    </a>
    <h1>Your <span class="gold">Neighbor</span>, Your Driver</h1>
    <p class="description">Schedule your ride in advance—whether it’s an airport transfer, a long trip, or a special outing. I’m your dedicated driver, providing private, comfortable, and stress-free rides just for you.</p>
  <section class="ride-request">
  <div class="ride-container">
    <h2 class="ride-title">Plan Your Trip with Tommy</h2>
    <form id="rideForm" class="ride-form">
  <div class="form-group">
    <label for="pickup">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
        <path d="M8 0C5.243 0 3 2.243 3 5c0 3.25 5 11 5 11s5-7.75 5-11c0-2.757-2.243-5-5-5zm0 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/>
      </svg>
      Pick-up Location
    </label>
    <input type="text" id="pickup" name="pickup" placeholder="Enter pick-up location" required>
  </div>

  <div class="form-group">
    <label for="dropoff">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
        <path d="M8 0a5 5 0 0 0-5 5c0 3.25 5 11 5 11s5-7.75 5-11a5 5 0 0 0-5-5zm0 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/>
      </svg>
      Drop-off Location
    </label>
    <input type="text" id="dropoff" name="dropoff" placeholder="Enter drop-off location" required>
  </div>

  <div id="terminalSelectWrapper" class="form-group">
    <label for="terminalSelect">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
        <path d="M8 0a8 8 0 1 0 8 8A8 8 0 0 0 8 0zm1 12H7v-1h2zm0-2H7V4h2z"/>
      </svg>
      Terminal (if applicable)
    </label>
    <select id="terminalSelect" name="terminal">
      <option disabled selected>Loading terminals...</option>
    </select>

    <div id="airlineWrapper" class="form-group hidden">
      <label for="airlineSelect">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path d="M8 0l8 4-8 4-8-4zM0 7v2l8 4 8-4V7l-8 4z"/>
        </svg>
        Airline (if applicable)
      </label>
      <select id="airlineSelect" name="airline"></select>

      <div id="flightCodeWrapper" class="form-group hidden">
        <label for="flightCode">✈️ Flight Code (optional)</label>
        <input type="text" id="flightCode" name="flight_code" placeholder="e.g., AA123">
      </div>
    </div>
  </div>

  <div class="form-row">
    <div class="form-group">
      <label for="date">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1.5A1.5 1.5 0 0 1 16 2.5v11A1.5 1.5 0 0 1 14.5 15h-13A1.5 1.5 0 0 1 0 13.5v-11A1.5 1.5 0 0 1 1.5 1H3V.5a.5.5 0 0 1 .5-.5zM1 4v9.5a.5.5 0 0 0 .5.5H14.5a.5.5 0 0 0 .5-.5V4H1z"/>
        </svg>
        Date
      </label>
      <input type="date" id="date" name="date" required>
    </div>
    <div class="form-group">
      <label for="time">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path d="M8 3.5a.5.5 0 0 1 .5.5v4.25l3 1.75a.5.5 0 0 1-.5.875l-3.5-2.042V4a.5.5 0 0 1 .5-.5z"/>
          <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm0-1A7 7 0 1 1 8 1a7 7 0 0 1 0 14z"/>
        </svg>
        Time
      </label>
      <input type="time" id="time" name="time" required>
    </div>
  </div>

  <div class="form-group">
    <label for="email">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
        <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v.217l-8 4.8-8-4.8V4zm0 1.383v6.634a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V5.383l-8 4.8-8-4.8z"/>
      </svg>
      Your Email
    </label>
    <input type="email" id="email" name="email" placeholder="you@example.com" required>
  </div>

  <div id="phoneWrapper" class="form-group">
    <label for="phone">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16">
        <path d="M3.654 1.328a.678.678 0 0 1 .946-.06l2.29 1.913c.329.274.445.734.284 1.125l-.805 1.944a.678.678 0 0 1-.642.418l-1.785-.178a11.482 11.482 0 0 0 5.516 5.516l.178-1.785a.678.678 0 0 1 .418-.642l1.944-.805c.391-.161.851-.045 1.125.284l1.913 2.29a.678.678 0 0 1-.06.946l-2.2 2.2c-.611.611-1.528.661-2.185.123a15.572 15.572 0 0 1-6.178-6.178c-.538-.657-.488-1.574.123-2.185l2.2-2.2z"/>
      </svg>
      Phone Number
    </label>
    <input type="tel" id="phone" name="phone" placeholder="(949) 696-6979">
  </div>

  <div id="nameWrapper" class="form-group">
    <label for="name">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" fill="currentColor" viewBox="0 0 16 16">
        <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
      </svg>
      Your Name
    </label>
    <input type="text" id="name" name="name" placeholder="John Doe">
  </div>

  <div id="flatRateDisplay" style="margin-top:10px; font-weight:bold;"></div>
  <button type="submit" class="ride-btn">Schedule My Ride</button>
</form>

  <div class="ride-info-text horizontal">
  <div class="info-item">
    <span class="info-icon">🗓️</span>
    <span>Book your ride 1–30 days in advance</span>
  </div>
  <div class="info-item">
    <span class="info-icon">⏱️</span>
    <span>Flexible pickup. I’ll accommodate your schedule</span>
  </div>
  <div class="info-item">
    <span class="info-icon">❌</span>
    <span>Cancel free anytime</span>
  </div>
</div>

</section>
    <div class="map-container">
      <img id="mapImg" src="/img/map-placeholder.jpg" alt="Map Placeholder">
    </div>

    <section id="aboutPreview">
      <h2>Meet Tommy – Your Neighborhood Driver</h2>
      <img src="img/ab12c.svg" alt="in front of car" class="meet-tommy-photo">

      <p>
        I’m Tommy, your local driver. 
        I love exploring SoCal, meeting new people, and making every ride safe, tidy, and enjoyable. 
        Whether it’s an airport trip, a scenic drive, or a longer journey, I’m here to make your ride stress-free.
      </p>
      <a href="about.html">Read More</a>

    <section id="services" style="max-width:900px; margin:40px auto; padding:20px; text-align:center;">
      <h2 style="color:#D4AF37; margin-bottom:20px;">My Services</h2>
      <img src="img/ab12b.svg" alt="meet front of car" class="meet-tommy-photo">
      <p class="services-text">
         I specialize in safe and comfortable rides across Southern California, 
         focusing on <strong>airport transfers</strong>, <strong>long-distance 
         trips</strong>, and helping neighbors get where they need to go with ease.  
  </p>
  <a href="services.html" style="display:inline-block; padding:12px 25px; background:#D4AF37; color:#fff; border-radius:6px; text-decoration:none; font-weight:bold;">Read More</a>

     <section class="services testimonial-section">
  <h2 class="section-title testimonial-title">What Riders Say About Tommy</h2>

  <div class="testimonial-slider-wrapper">
    <div class="slider-wrapper">
      <div class="slider-container">
        <div class="testimonial-slide">
          <p>"Tommy made my trip to LAX stress-free! Super friendly and on time."</p>
          <span>- Sarah M.</span>
        </div>
        <div class="testimonial-slide">
          <p>"I always enjoy chatting with Tommy during long drives. Highly recommended!"</p>
          <span>- James K.</span>
        </div>
        <div class="testimonial-slide">
          <p>"Clean car, safe driving, and a fantastic local guide. Thank you, Tommy!"</p>
          <span>- Lisa W.</span>
        </div>
      </div>
    </div>
    
    <a href="testimonials.html" class="read-more">Read More</a>
  </div>
</section>
  </div>

<script>
document.addEventListener("DOMContentLoaded", function () {
  const toggle = document.getElementById('darkModeToggle');
  const centerLogo = document.getElementById('logoImg');       // Main center logo
  const navLogo = document.querySelector('.nav-logo img');     // Navbar logo
  const mapImg = document.getElementById('mapImg');            // Map image for dark mode

  if (!toggle) return;

  // Function to toggle dark mode
  function setDarkMode(isDark) {
    document.body.classList.toggle('dark-mode', isDark);
    toggle.textContent = isDark ? '☀️' : '🌙';

    // Logos/Image source updates
    if (centerLogo) centerLogo.src = isDark ? '/img/logo-white.png' : '/img/logo.png';
    if (navLogo) navLogo.src = isDark ? '/img/logo-white.png' : '/img/logo-dark.png';
    if (mapImg) mapImg.src = isDark ? '/img/map-placeholder-dark.jpg' : '/img/map-placeholder.jpg';
  }

  // Load saved preference
  const savedDark = localStorage.getItem('darkMode') === 'true';
  setDarkMode(savedDark);

  // Toggle dark mode on button click
  toggle.addEventListener('click', () => {
    const isDark = !document.body.classList.contains('dark-mode');
    setDarkMode(isDark);
    localStorage.setItem('darkMode', isDark);
  });

  // ---------------- Airports / Terminals / Airlines ----------------
  emailjs.init("ufT1pFlXWfC1M0mfj");
  const form = document.getElementById("rideForm");
  const pickup = document.getElementById("pickup");
  const dropoff = document.getElementById("dropoff");

  const terminalWrapper = document.getElementById("terminalSelectWrapper");
  const terminalSelect = document.getElementById("terminalSelect");
  const airlineSelect = document.getElementById("airlineSelect");
  const airlineWrapper = document.getElementById("airlineWrapper");
  const flightCodeWrapper = document.getElementById("flightCodeWrapper");
  const flightCodeInput = document.getElementById("flightCode");

  const phoneInput = document.getElementById('phone');
  const nameInput = document.getElementById('name');

  let airportData = {};

  fetch('/api/airports')
    .then(res => res.json())
    .then(data => { airportData = data; })
    .catch(err => console.error('Failed to load airports:', err));

  function findMatchingAirports(val) {
    const matches = [];
    val = val.toUpperCase();
    for (const code in airportData) {
      const airport = airportData[code];
      if (code.toUpperCase().includes(val)) {
        matches.push(code);
        continue;
      }
      if (airport.aliases) {
        for (const alias of airport.aliases) {
          if (alias.toUpperCase().includes(val)) {
            matches.push(code);
            break;
          }
        }
      }
    }
    return matches;
  }

  function showTerminalDropdownIfNeeded() {
    const pickupVal = pickup.value.trim();
    const dropoffVal = dropoff.value.trim();
    const allVal = [pickupVal, dropoffVal];
    let matchedAirport = null;

    for (const val of allVal) {
      if (!val) continue;
      const matches = findMatchingAirports(val);
      if (matches.length === 1) {
        matchedAirport = matches[0];
        break;
      } else if (matches.length > 1) {
        matchedAirport = null;
      }
    }

    if (!matchedAirport) {
      terminalWrapper.style.display = "none";
      airlineWrapper.style.display = "none";
      terminalSelect.value = "";
      airlineSelect.innerHTML = '';
      flightCodeWrapper.style.display = 'none';
      flightCodeInput.value = '';
      return;
    }

    terminalWrapper.style.display = "block";
    airlineWrapper.style.display = "none";
    flightCodeWrapper.style.display = "none";

    const terminals = Object.keys(airportData[matchedAirport]).filter(k => k !== 'aliases');
    terminalSelect.innerHTML = '<option disabled selected>Select a terminal</option>';
    terminals.forEach(name => {
      const opt = document.createElement('option');
      opt.value = name;
      opt.textContent = name;
      terminalSelect.appendChild(opt);
    });

    terminalSelect.onchange = () => {
      const selectedTerminal = terminalSelect.value;
      const airlines = airportData[matchedAirport][selectedTerminal] || [];
      if (airlines.length > 0) {
        airlineSelect.innerHTML = '<option disabled selected>Select an airline</option>';
        airlines.forEach(airline => {
          const opt = document.createElement('option');
          opt.value = airline;
          opt.textContent = airline;
          airlineSelect.appendChild(opt);
        });
        airlineWrapper.style.display = 'block';
        flightCodeWrapper.style.display = 'none';
        flightCodeInput.value = '';
      } else {
        airlineWrapper.style.display = 'none';
        airlineSelect.innerHTML = '';
        flightCodeWrapper.style.display = 'none';
        flightCodeInput.value = '';
      }
    };

    airlineSelect.addEventListener("change", () => {
      if (airlineSelect.value) {
        flightCodeWrapper.style.display = "block";
      } else {
        flightCodeWrapper.style.display = "none";
        flightCodeInput.value = '';
      }
    });
  }

  if (pickup) pickup.addEventListener("input", showTerminalDropdownIfNeeded);
  if (dropoff) dropoff.addEventListener("input", showTerminalDropdownIfNeeded);

  // ---------------- Ride Form Submission ----------------
  if (form) {
    form.addEventListener("submit", function (event) {
      event.preventDefault();
      const submitBtn = form.querySelector('button[type="submit"]');
      submitBtn.disabled = true;

      const templateParams = {
        pickup: pickup.value,
        dropoff: dropoff.value,
        email: document.getElementById("email").value,
        phone: phoneInput.value,
        name: nameInput.value,
        date: document.getElementById("date").value,
        time: document.getElementById("time").value,
        terminal: terminalSelect.value || "N/A",
        airline: airlineSelect.value || "N/A",
        flight_code: flightCodeInput.value || "N/A"
      };

      emailjs.send("service_m9hf1b8", "template_odu6xgm", templateParams)
        .then(() => emailjs.send("service_m9hf1b8", "template_2fhl4rb", templateParams))
        .then(() => window.location.href = "/thank-you.html")
        .catch(error => { 
          console.error(error); 
          alert("Failed to send ride request."); 
          submitBtn.disabled = false;
        });
    });
  }
});

// TESTIMONIAL SLIDER SCRIPT - Moved up for correct variable order
const slider = document.querySelector('.slider-container');
const slides = document.querySelectorAll('.testimonial-slide');
const wrapper = document.querySelector('.slider-wrapper');
let index = 0;
const totalSlides = slides.length;

// NAVBAR SCRIPTS - Moved up for correct variable order (FIX FOR ERROR)
const navbar = document.getElementById('mainNavbar');
const hamburger = document.querySelector('.hamburger');
const navLinks = document.querySelector('.nav-links');

// Function to show slide and adjust wrapper height
function showSlide(i) {
  if (slider) slider.style.transform = `translateX(${-i * 100}%)`;
  
  // Get current slide height
  const slideHeight = slides[i].offsetHeight;
  
  // Animate wrapper height smoothly
  if (wrapper) wrapper.style.height = slideHeight + 'px';
}

// Auto-slide every 5 seconds
if (slider && slides.length > 0) {
  setInterval(() => {
    index = (index + 1) % totalSlides;
    showSlide(index);
  }, 5000);
}


if (navbar) {
  window.addEventListener('scroll', () => {
    if (window.scrollY > 150) {
      navbar.classList.add('visible');
      document.documentElement.style.setProperty('--nav-link-color', '#fff');
    } else {
      navbar.classList.remove('visible');
      document.documentElement.style.setProperty('--nav-link-color', '#000');
    }
  });

  // Toggle menu when hamburger clicked
  if (hamburger && navLinks) {
    hamburger.addEventListener('click', () => {
      navLinks.classList.toggle('open');
      hamburger.classList.toggle('open'); // optional: animate hamburger
    });

    // Close menu when clicking outside
    document.addEventListener('click', (e) => {
      if (!navbar.contains(e.target) && navLinks.classList.contains('open')) {
        navLinks.classList.remove('open');
        hamburger.classList.remove('open');
      }
    });

    // Optional: hide menu on scroll
    window.addEventListener('scroll', () => {
      if (window.scrollY < 150) {
        navLinks.classList.remove('open');
        hamburger.classList.remove('open');
      }
    });
  }
}

// Ride Title Reveal Script
document.addEventListener("DOMContentLoaded", function() {
  const rideTitle = document.querySelector('.ride-title');

  function revealTitle() {
    if (!rideTitle) return;

    const top = rideTitle.getBoundingClientRect().top;
    const windowHeight = window.innerHeight;

    if (top < windowHeight - 50) {
      rideTitle.classList.add('visible');
      window.removeEventListener('scroll', revealTitle);
    }
  }

  window.addEventListener('scroll', revealTitle);
  revealTitle(); // in case it's already in viewport
});
</script>

<footer>
  <div class="footer-container">
    
    <div class="footer-brand">
      <a href="index.html">
        <img id="footerLogo" src="img/logo-white.png" alt="NDrivers Logo">
      </a>
      <p>Experience private rides with Tommy, your local chauffeur and neighbor. Based in Irvine and serving Orange County and SoCal, I make every journey smooth, safe, and personalized for your comfort.</p>
    </div>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">

<div class="social-icons">
  <a href="https://facebook.com/" target="_blank" title="Facebook"><i class="fab fa-facebook-f"></i></a>
  <a href="https://instagram.com/" target="_blank" title="Instagram"><i class="fab fa-instagram"></i></a>
  <a href="https://twitter.com/ndriversapp" target="_blank" title="X"><i class="fab fa-x-twitter"></i></a>
  <a href="https://www.linkedin.com//" target="_blank" title="LinkedIn"><i class="fab fa-linkedin-in"></i></a>
</div>

<style>
.social-icons {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 20px 0;
}

.social-icons a {
  font-size: 24px;
  color: #ffffff;
  background: #111;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
  text-decoration: none;
}

.social-icons a:hover {
  background: #D4AF37;
  color: #fff;
  transform: translateY(-3px);
}
</style>

    <div class="footer-links">
      <a href="index.html">Home</a>
      <a href="about.html">About</a>
      <a href="services.html">Services</a>
      <a href="testimonials.html">Testimonials</a>
      <a href="faq.html">FAQ</a>
      <a href="contact.html">Contact</a>
    </div>
<div class="footer-payments">
  <p>Accepted payment methods</p>
  <div class="payment-icons">
    
    <img src="img/amex.svg" class="payment-card" title="American Express" alt="Amex">
    <img src="img/discover.svg" class="payment-card" title="Discover" alt="Discover">
    <img src="img/visa.svg" class="payment-card" title="Visa" alt="Visa">
    <img src="img/mastercard.svg" class="payment-card" title="Mastercard" alt="Mastercard">
    <img src="img/paypal.svg" class="payment-card" title="PayPal" alt="PayPal">
    <img src="img/Venmo_idYMSlb9QP_0.svg" class="payment-card" title="Venmo" alt="Venmo">
    <img src="img/cashapp.svg" class="payment-card" title="CashApp" alt="CashApp">
  </div>

    <div class="footer-bottom">
      <p>© 2025 NDrivers.com. All rights reserved.</p>
      <div class="footer-legal-links">
        <a href="privacy.html">Privacy Policy</a> | 
        <a href="terms.html">Terms of Service</a>
      </div>
    </div>

  </div>
</footer>

</body>
</html>