<?php // public/home.php
$bannerSrc = 'WhatsApp Image 2025-10-03 at 11.02.46.jpeg'; // update if you renamed it
$siteTitle = 'Waste Segregation Platform';

// Group 1: Executive Operations
$executive_links = [
    [
        'label' => 'Executive Registration', 
        'href' => 'volunteer_register.php', 
        'desc' => 'Register a New Field Executive',
        'color' => '#10b981', // Emerald
        'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M18 19.5v-1.125a2.25 2.25 0 00-2.25-2.25h-7.5a2.25 2.25 0 00-2.25 2.25v1.125m12 0a2.25 2.25 0 002.25-2.25V15m-14.25 4.5a2.25 2.25 0 01-2.25-2.25V15m14.25-4.5V9m-14.25 1.5V9m14.25 0a2.25 2.25 0 00-2.25-2.25h-1.5M5.25 9a2.25 2.25 0 012.25-2.25h1.5m6 0h-3m-3 0h3m-3 0a2.25 2.25 0 110-4.5 2.25 2.25 0 010 4.5z" />'
    ],
    [
        'label' => 'Executive Login', 
        'href' => 'executive_login.php', 
        'desc' => 'Daily Check-in & Dashboard',
        'color' => '#059669', // Emerald dark
        'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" />'
    ],
    [
        'label' => 'Resident Registration', 
        'href' => 'index.php', 
        'desc' => 'First Visit / Training 1',
        'color' => '#3b82f6', // Blue
        'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />'
    ],
    [
        'label' => 'Revisit Form', 
        'href' => 'officer.php', 
        'desc' => 'Follow-up Visits (Training 2 & 3)',
        'color' => '#6366f1', // Indigo
        'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182m0-4.991v4.99" />'
    ]
];

// Group 2: Administration Operations
$admin_links = [
    [
        'label' => 'Create Admin User', 
        'href' => 'tools/admin_create.php', 
        'desc' => 'Super Admin Setup (Roles)',
        'color' => '#f59e0b', // Amber
        'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M19 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zM4 19.235v-.11a6.375 6.375 0 0112.75 0v.109A12.318 12.318 0 0110.374 21c-2.331 0-4.512-.645-6.374-1.766z" />'
    ],
    [
        'label' => 'Admin Panel', 
        'href' => 'admin/login.php', 
        'desc' => 'View Live Analytics & Data',
        'color' => '#ef4444', // Red
        'icon' => '<path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />'
    ],
];
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/png" href="favicon-ws.png">
  <title>Waste Segregation — Home</title>
  
  <style>
    :root {
      --primary: #2fa84f;
      --primary-dark: #1f7a39;
      --bg: #f3f6f4;
      --text-main: #1e293b;
      --text-muted: #64748b;
      font-family: 'Inter', system-ui, -apple-system, sans-serif;
    }
    
    * { box-sizing: border-box; }
    
    body {
      margin: 0;
      background: linear-gradient(135deg, #e0f2fe 0%, #dcfce7 100%);
      color: var(--text-main);
      padding: 2rem 1rem;
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
    }

    .container {
      width: 100%;
      max-width: 1000px;
      margin: 0 auto;
    }

    /* Modern Banner */
    .banner {
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.5);
      border-radius: 20px;
      padding: 1.5rem;
      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
      display: flex;
      align-items: center;
      gap: 1.5rem;
      margin-bottom: 2.5rem;
    }

    .banner-logo {
      width: 64px;
      height: 64px;
      background: linear-gradient(135deg, var(--primary), var(--primary-dark));
      border-radius: 16px;
      display: grid;
      place-items: center;
      color: white;
      font-weight: 800;
      font-size: 1.5rem;
      box-shadow: 0 8px 16px rgba(47, 168, 79, 0.25);
    }

    .banner-text h1 {
      margin: 0;
      font-size: 1.75rem;
      color: #0f172a;
      letter-spacing: -0.5px;
    }
    
    .banner-text p {
      margin: 0.25rem 0 0;
      color: var(--text-muted);
      font-size: 1rem;
    }

    .section-title {
      font-size: 1.25rem;
      color: #334155;
      margin: 2rem 0 1rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    /* Grid System */
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 1.5rem;
    }

    /* Glassmorphism Cards */
    .card {
      background: rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 1);
      border-radius: 16px;
      padding: 1.5rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      text-decoration: none;
      color: inherit;
      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;
    }

    .card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 100%;
      background: var(--card-color, var(--primary));
      transition: width 0.3s ease;
    }

    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    }
    
    .card:hover::before {
      width: 100%;
      opacity: 0.05;
    }

    .card-header {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
    }

    .icon-wrapper {
      flex-shrink: 0;
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: rgba(var(--color-rgb), 0.1);
      color: var(--card-color);
      display: grid;
      place-items: center;
    }
    
    .icon-wrapper svg {
      width: 24px;
      height: 24px;
    }

    .card-content h3 {
      margin: 0 0 0.25rem 0;
      font-size: 1.125rem;
      font-weight: 600;
      color: #1e293b;
    }

    .card-content p {
      margin: 0;
      font-size: 0.875rem;
      color: var(--text-muted);
      line-height: 1.5;
    }

    .card-footer {
      margin-top: 1.5rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 1rem;
      border-top: 1px solid rgba(0,0,0,0.05);
    }

    .chip {
      font-size: 0.75rem;
      font-weight: 700;
      padding: 0.25rem 0.75rem;
      border-radius: 9999px;
      background: rgba(var(--color-rgb), 0.1);
      color: var(--card-color);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .arrow {
      color: var(--card-color);
      width: 20px;
      height: 20px;
      transition: transform 0.3s ease;
    }

    .card:hover .arrow {
      transform: translateX(4px);
    }

    @media (max-width: 600px) {
      .grid { grid-template-columns: 1fr; }
      .banner { flex-direction: column; text-align: center; gap: 1rem; padding: 2rem 1rem; }
    }
  </style>
</head>
<body>
  <div class="container">

    <!-- Modern Header Banner -->
    <div class="banner">
      <div class="banner-logo">WS</div>
      <div class="banner-text">
        <h1><?php echo htmlspecialchars($siteTitle); ?></h1>
        <p>Municipal Waste Segregation Tracking & Operations Portal</p>
      </div>
    </div>

    <!-- Section 1: Executives -->
    <h2 class="section-title">
      <svg style="width:24px;height:24px;color:var(--primary)" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
      </svg>
      Field Executive Operations
    </h2>
    <div class="grid">
      <?php foreach($executive_links as $link): 
        // Helper to convert hex to rgb for rgba() usage
        list($r, $g, $b) = sscanf($link['color'], "#%02x%02x%02x");
        $rgb = "$r, $g, $b";
      ?>
      <a href="<?php echo htmlspecialchars($link['href']); ?>" class="card" style="--card-color: <?php echo $link['color']; ?>; --color-rgb: <?php echo $rgb; ?>;">
        <div class="card-header">
          <div class="icon-wrapper">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
              <?php echo $link['icon']; ?>
            </svg>
          </div>
          <div class="card-content">
            <h3><?php echo htmlspecialchars($link['label']); ?></h3>
            <p><?php echo htmlspecialchars($link['desc']); ?></p>
          </div>
        </div>
        <div class="card-footer">
          <span class="chip">Open</span>
          <svg class="arrow" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3" />
          </svg>
        </div>
      </a>
      <?php endforeach; ?>
    </div>

    <!-- Section 2: Administration -->
    <h2 class="section-title" style="margin-top: 3rem;">
      <svg style="width:24px;height:24px;color:#ef4444" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
      </svg>
      Administration & Analytics
    </h2>
    <div class="grid">
      <?php foreach($admin_links as $link): 
        list($r, $g, $b) = sscanf($link['color'], "#%02x%02x%02x");
        $rgb = "$r, $g, $b";
      ?>
      <a href="<?php echo htmlspecialchars($link['href']); ?>" class="card" style="--card-color: <?php echo $link['color']; ?>; --color-rgb: <?php echo $rgb; ?>;">
        <div class="card-header">
          <div class="icon-wrapper">
            <svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
              <?php echo $link['icon']; ?>
            </svg>
          </div>
          <div class="card-content">
            <h3><?php echo htmlspecialchars($link['label']); ?></h3>
            <p><?php echo htmlspecialchars($link['desc']); ?></p>
          </div>
        </div>
        <div class="card-footer">
          <span class="chip">Open</span>
          <svg class="arrow" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3" />
          </svg>
        </div>
      </a>
      <?php endforeach; ?>
    </div>

  </div>
</body>
</html>
