<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DabbeWale - Home</title>
    <link rel="stylesheet" href="frontend/css/style.css">
    <style>
      .view-all-posts-btn {
        display:inline-block;
        background:var(--color-primary);
        color:var(--color-form-btn-text);
        padding:10px 28px;
        border-radius:6px;
        text-decoration:none;
        font-weight:600;
        transition:background 0.2s;
      }
      .view-all-posts-btn:hover, .view-all-posts-btn:focus {
        background:var(--color-button-hover);
      }
    </style>
</head>
<body>
    <div id="notification" style="display:none; position:fixed; top:18px; left:50%; transform:translateX(-50%); background:var(--color-accent,#43a047); color:#fff; padding:0.9em 2em; border-radius:8px; font-size:1.1em; font-weight:600; z-index:9999; box-shadow:0 2px 12px rgba(67,160,71,0.15); transition:opacity 0.3s; opacity:0;"></div>
    <header>
        <nav class="main-navbar">
            <div class="nav-links">
                <a href="index.html">Home</a>
                <a href="login.html">Login</a>
                <a href="providers.html">Browse Providers</a>
                <a href="blog.html">Blog</a>
            </div>
            <div class="profile-dropdown-container">
                <a href="#" class="profile-icon" id="profileIcon" title="Profile">👤</a>
                <div class="profile-dropdown" id="profileDropdown">
                    <span id="userInfo" style="display:none; font-weight:600; color:var(--color-primary); padding:10px 18px;"></span>
                    <a href="#" id="signoutBtn">Sign out</a>
                    <a href="login.html" id="loginBtn" style="display:none;">Sign in / Login</a>
                </div>
            </div>
        </nav>
        <style>
        .main-navbar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0;
            width: 100%;
            max-width: 100vw;
        }
        .nav-links {
            display: flex;
            align-items: center;
            flex: 1;
            justify-content: space-evenly;
        }
        .profile-icon {
            font-size: 1.5em;
            text-decoration: none;
            transition: transform 0.15s;
        }
        .profile-icon:hover, .profile-icon:focus {
            transform: scale(1.15);
        }
        .profile-dropdown-container {
            position: relative;
            display: flex;
            align-items: center;
        }
        .profile-dropdown {
            display: none;
            position: absolute;
            top: 120%;
            right: 0;
            background: var(--color-card-bg, #fff);
            box-shadow: 0 2px 8px rgba(0,0,0,0.12);
            border-radius: 8px;
            min-width: 120px;
            z-index: 100;
            padding: 8px 0;
        }
        .profile-dropdown a {
            display: block;
            padding: 10px 18px;
            color: var(--color-text, #222);
            text-decoration: none;
            font-size: 1em;
            transition: background 0.15s;
        }
        .profile-dropdown a:hover {
            background: var(--color-accent, #e0e0e0);
            color: #fff;
        }
        .profile-dropdown.show {
            display: block;
        }
        </style>
        <script>
        document.addEventListener('DOMContentLoaded', function() {
            const icon = document.getElementById('profileIcon');
            const dropdown = document.getElementById('profileDropdown');
            document.addEventListener('click', function(e) {
                if (icon.contains(e.target)) {
                    dropdown.classList.toggle('show');
                } else if (!dropdown.contains(e.target)) {
                    dropdown.classList.remove('show');
                }
            });
        });
        </script>
    </header>
    <main>
        <div style="text-align:center; margin-bottom: 20px;">
            <img src="assets/new.png" alt="Dabbewale Logo" style="max-width: 250px; width: 100%; height: auto;" />
        </div>
        <h1>Bhuk Lagi Hai???</h1>
        <p>Your platform to find and order nutritious, affordable home-cooked meals from local tiffin providers.</p>
    </main>
    <!-- Zig-Zag Food Items Section -->
    <section class="featured-foods">
      <h2 style="text-align:center; margin: 2.5rem 0 1.5rem; font-size:2rem; color:var(--color-primary);">Featured Home-Cooked Meals</h2>
      <div class="food-zigzag">
        <!-- Item 1: Info left, photo right -->
        <div class="food-row">
          <div class="food-info">
            <h3>Mrs. Sharma's Punjabi Thali</h3>
            <p>Authentic North Indian meal with 2 rotis, dal makhani, jeera rice, salad, and homemade pickle. <br><b>Location:</b> Andheri West, Mumbai</p>
            <span class="provider-badge">Provider: Mrs. Sharma</span>
          </div>
          <div class="food-photo">
            <img src="assets/food1.jpeg" alt="Paneer Curry" />
          </div>
        </div>
        <!-- Item 2: Photo left, info right -->
        <div class="food-row food-row-reverse">
          <div class="food-photo">
            <img src="assets/food2.jpeg" alt="Gujarati Dhokla" />
          </div>
          <div class="food-info">
            <h3>Patel's Gujarati Tiffin</h3>
            <p>Light and healthy meal with thepla, undhiyu, khichdi, and sweet shrikhand. <br><b>Location:</b> Navrangpura, Ahmedabad</p>
            <span class="provider-badge">Provider: Patel Tiffin Service</span>
          </div>
        </div>
        <!-- Item 3: Info left, photo right -->
        <div class="food-row">
          <div class="food-info">
            <h3>HomeStyle South Indian</h3>
            <p>Delicious idli, sambar, coconut chutney, and lemon rice. <br><b>Location:</b> Koramangala, Bangalore</p>
            <span class="provider-badge">Provider: Anitha's Kitchen</span>
          </div>
          <div class="food-photo">
            <img src="assets/food3.jpeg" alt="Medu Vada" />
          </div>
        </div>
      </div>
      <style>
        .featured-foods {
          margin: 3rem 0 2rem;
        }
        .food-zigzag {
          display: flex;
          flex-direction: column;
          gap: 2.5rem;
          max-width: 900px;
          margin: 0 auto;
        }
        .food-row {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 2.5rem;
        }
        .food-row-reverse {
          flex-direction: row-reverse;
        }
        .food-info {
          flex: 1 1 0;
          background: var(--color-bg-alt, #fffbe7);
          border-radius: 14px;
          padding: 2rem 1.5rem;
          box-shadow: 0 2px 12px rgba(125,145,108,0.07);
          min-width: 220px;
        }
        .food-info h3 {
          margin-top: 0;
          color: var(--color-primary);
          font-size: 1.3rem;
        }
        .food-info p {
          color: var(--color-text);
          font-size: 1.05rem;
          margin-bottom: 0.7rem;
        }
        .provider-badge {
          display: inline-block;
          background: var(--color-accent, #43a047);
          color: #fff;
          padding: 0.3em 0.9em;
          border-radius: 12px;
          font-size: 0.95em;
          font-weight: 600;
        }
        .food-photo {
          flex: 0 0 220px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .food-photo img {
          width: 210px;
          height: 140px;
          object-fit: cover;
          border-radius: 14px;
          box-shadow: 0 2px 10px rgba(67,160,71,0.10);
        }
        @media (max-width: 800px) {
          .food-row, .food-row-reverse {
            flex-direction: column !important;
            gap: 1.2rem;
          }
          .food-photo img {
            width: 100%;
            max-width: 320px;
            height: 140px;
          }
        }
      </style>
    </section>
    <!-- End Zig-Zag Section -->
    <footer>
        <p>&copy; 2025 DabbeWale. All rights reserved.</p>
    </footer>
    <script src="frontend/js/main.js"></script>
</body>
</html>