<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Al Mirag Poultry - Fresh Poultry & Quality Meats</title>
    
    <!-- PWA Meta Tags -->
    <meta name="description" content="Al Mirag Poultry - Fresh Poultry & Quality Meats. Your trusted source for premium poultry products with comprehensive ordering and delivery system." />
    <meta name="theme-color" content="#4CAF50" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <meta name="apple-mobile-web-app-title" content="Al Mirag Poultry" />
    <meta name="msapplication-TileColor" content="#2E7D32" />
    <meta name="msapplication-tap-highlight" content="no" />
    
    <!-- PWA Manifest -->
    <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}" />
    
    <!-- Apple Touch Icons -->
    <link rel="apple-touch-icon" href="{{ url_for('static', filename='icons/icon-152x152.png') }}" />
    <link rel="apple-touch-icon" sizes="152x152" href="{{ url_for('static', filename='icons/icon-152x152.png') }}" />
    <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='icons/icon-192x192.png') }}" />
    
    <!-- Favicon -->
    <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='icons/icon-32x32.png') }}" />
    <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='icons/icon-72x72.png') }}" />
    
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/js/all.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            line-height: 1.6;
            color: #333;
            overflow-x: hidden;
        }

        /* Header */
        .header {
            background: linear-gradient(135deg, #2E7D32 0%, #388E3C 100%);
            color: white;
            padding: 1rem 0;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 20px rgba(0,0,0,0.1);
        }

        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 2rem;
        }

        .logo {
            font-size: 1.8rem;
            font-weight: 700;
            color: #fff;
            text-decoration: none;
        }

        .nav-links {
            display: flex;
            list-style: none;
            gap: 2rem;
        }

        .nav-links a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .nav-links a:hover {
            color: #FFD700;
        }

        .login-btn {
            background: linear-gradient(135deg, #FF6B35, #F7931E);
            color: white;
            padding: 0.8rem 2rem;
            border: none;
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(255, 107, 53, 0.3);
            cursor: pointer;
        }

        .login-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
        }

        .install-btn {
            background: linear-gradient(135deg, #4CAF50, #45a049);
            color: white;
            padding: 0.8rem 2rem;
            border: none;
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
            cursor: pointer;
            margin-right: 1rem;
            font-size: 0.9rem;
        }

        .install-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
        }

        .install-btn i {
            margin-right: 0.5rem;
        }

        /* Hero Section */
        .hero {
            background: linear-gradient(135deg, #2E7D32 0%, #4CAF50 50%, #8BC34A 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><defs><radialGradient id="a" cx="50%" cy="50%"><stop offset="0%" stop-color="%23ffffff" stop-opacity="0.1"/><stop offset="100%" stop-color="%23ffffff" stop-opacity="0"/></radialGradient></defs><circle cx="200" cy="200" r="100" fill="url(%23a)"/><circle cx="800" cy="300" r="150" fill="url(%23a)"/><circle cx="400" cy="700" r="120" fill="url(%23a)"/></svg>');
            opacity: 0.3;
        }

        .hero-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
            position: relative;
            z-index: 2;
        }

        .hero-text h1 {
            font-size: 3.5rem;
            font-weight: 700;
            color: white;
            margin-bottom: 1.5rem;
            line-height: 1.2;
        }

        .hero-text p {
            font-size: 1.2rem;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 2rem;
            line-height: 1.6;
        }

        .cta-buttons {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
        }

        .btn-primary {
            background: linear-gradient(135deg, #4CAF50, #45a049);
            color: white;
            padding: 1rem 2.5rem;
            border: none;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
        }

        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(76, 175, 80, 0.4);
        }

        .btn-secondary {
            background: transparent;
            color: white;
            padding: 1rem 2.5rem;
            border: 2px solid white;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .btn-secondary:hover {
            background: white;
            color: #2E7D32;
        }

        .hero-image {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .hero-image i {
            font-size: 15rem;
            color: rgba(255, 255, 255, 0.2);
            animation: float 6s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }

        /* Login Popup Modal */
        .modal {
            display: none;
            position: fixed;
            z-index: 2000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            backdrop-filter: blur(5px);
        }

        .modal-content {
            background: white;
            margin: 5% auto;
            padding: 0;
            border-radius: 20px;
            width: 90%;
            max-width: 450px;
            box-shadow: 0 20px 40px rgba(0,0,0,0.2);
            animation: modalSlideIn 0.3s ease-out;
        }

        @keyframes modalSlideIn {
            from {
                opacity: 0;
                transform: translateY(-50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .modal-header {
            background: linear-gradient(135deg, #2E7D32, #4CAF50);
            color: white;
            padding: 2rem;
            border-radius: 20px 20px 0 0;
            text-align: center;
            position: relative;
        }

        .close {
            position: absolute;
            right: 1rem;
            top: 1rem;
            color: white;
            font-size: 2rem;
            font-weight: bold;
            cursor: pointer;
            transition: color 0.3s ease;
        }

        .close:hover {
            color: #FFD700;
        }

        .modal-body {
            padding: 2rem;
        }

        .form-group {
            margin-bottom: 1.5rem;
        }

        .form-group label {
            display: block;
            margin-bottom: 0.5rem;
            font-weight: 500;
            color: #333;
        }

        .form-group input {
            width: 100%;
            padding: 1rem;
            border: 2px solid #e1e5e9;
            border-radius: 10px;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        .form-group input:focus {
            outline: none;
            border-color: #4CAF50;
            box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.1);
        }

        .btn-login {
            width: 100%;
            background: linear-gradient(135deg, #4CAF50, #45a049);
            color: white;
            padding: 1rem;
            border: none;
            border-radius: 10px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .btn-login:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
        }

        .demo-credentials {
            background: #f8f9fa;
            border: 1px solid #e9ecef;
            border-radius: 10px;
            padding: 1rem;
            margin-bottom: 1.5rem;
            font-size: 0.9rem;
            color: #666;
        }

        .demo-credentials strong {
            color: #333;
        }

        /* Services Section */
        .services {
            padding: 6rem 0;
            background: linear-gradient(135deg, #f8f9fa 0%, #e8f5e8 100%);
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        .section-title {
            text-align: center;
            margin-bottom: 4rem;
        }

        .section-title h2 {
            font-size: 2.5rem;
            font-weight: 700;
            color: #2E7D32;
            margin-bottom: 1rem;
        }

        .section-title p {
            font-size: 1.1rem;
            color: #666;
            max-width: 600px;
            margin: 0 auto;
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

        .service-card {
            background: white;
            padding: 2.5rem;
            border-radius: 20px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            border: 1px solid #e9ecef;
            position: relative;
            overflow: hidden;
        }

        .service-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(135deg, #4CAF50, #FF6B35);
        }

        .service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        }

        .service-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #4CAF50, #45a049);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            font-size: 2rem;
            color: white;
        }

        .service-card h3 {
            font-size: 1.5rem;
            font-weight: 600;
            color: #2E7D32;
            margin-bottom: 1rem;
        }

        .service-card p {
            color: #666;
            line-height: 1.6;
            margin-bottom: 1rem;
        }

        .price {
            font-size: 1.2rem;
            font-weight: 700;
            color: #FF6B35;
        }

        /* Features Section */
        .features {
            padding: 6rem 0;
            background: white;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
        }

        .feature-card {
            background: #f8f9fa;
            padding: 2.5rem;
            border-radius: 20px;
            text-align: center;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            border: 1px solid #e9ecef;
        }

        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        }

        .feature-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #2E7D32, #4CAF50);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            font-size: 2rem;
            color: white;
        }

        .feature-card h3 {
            font-size: 1.5rem;
            font-weight: 600;
            color: #333;
            margin-bottom: 1rem;
        }

        .feature-card p {
            color: #666;
            line-height: 1.6;
        }

        /* Stats Section */
        .stats {
            background: linear-gradient(135deg, #2E7D32 0%, #388E3C 100%);
            color: white;
            padding: 4rem 0;
        }

        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            text-align: center;
        }

        .stat-item h3 {
            font-size: 3rem;
            font-weight: 700;
            color: #FFD700;
            margin-bottom: 0.5rem;
        }

        .stat-item p {
            font-size: 1.1rem;
            color: rgba(255, 255, 255, 0.9);
        }

        /* Footer */
        .footer {
            background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
            color: white;
            padding: 4rem 0 2rem;
            position: relative;
            overflow: hidden;
        }

        .footer::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(135deg, #4CAF50, #FF6B35);
        }

        .footer-content {
            display: grid;
            grid-template-columns: 2fr 1fr 1fr 1fr;
            gap: 3rem;
            margin-bottom: 3rem;
        }

        .footer-brand {
            text-align: left;
        }

        .footer-logo {
            font-size: 2rem;
            font-weight: 700;
            color: #4CAF50;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .footer-description {
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.6;
            margin-bottom: 1.5rem;
            max-width: 300px;
        }

        .footer-social {
            display: flex;
            gap: 1rem;
        }

        .social-link {
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, #4CAF50, #45a049);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            text-decoration: none;
            transition: all 0.3s ease;
            font-size: 1.2rem;
        }

        .social-link:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
        }

        .footer-section h3 {
            color: #4CAF50;
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
            position: relative;
        }

        .footer-section h3::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 30px;
            height: 2px;
            background: linear-gradient(135deg, #4CAF50, #FF6B35);
        }

        .footer-links {
            list-style: none;
            padding: 0;
        }

        .footer-links li {
            margin-bottom: 0.8rem;
        }

        .footer-links a {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .footer-links a:hover {
            color: #4CAF50;
            transform: translateX(5px);
        }

        .footer-contact {
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.6;
        }

        .contact-item {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            margin-bottom: 1rem;
        }

        .contact-icon {
            width: 20px;
            color: #4CAF50;
        }

        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 2rem;
            text-align: center;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
        }

        .footer-copyright {
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.9rem;
        }

        .footer-tagline {
            color: #4CAF50;
            font-size: 0.9rem;
            font-weight: 500;
        }

        .footer-developer {
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.85rem;
        }

        .footer-developer a {
            color: #4CAF50;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .footer-developer a:hover {
            color: #FF6B35;
        }

        /* Responsive Design */
        @media (max-width: 1024px) {
            .nav-container {
                padding: 0 1rem;
            }
            
            .hero-content {
                gap: 3rem;
            }
            
            .hero-text h1 {
                font-size: 3rem;
            }
        }

        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }

            .nav-container {
                padding: 0 1rem;
                flex-wrap: wrap;
                gap: 0.5rem;
            }

            .install-btn {
                padding: 0.6rem 1.5rem;
                font-size: 0.8rem;
                margin-right: 0.5rem;
            }

            .hero {
                padding-top: 80px;
            }

            .hero-content {
                grid-template-columns: 1fr;
                text-align: center;
                gap: 2rem;
                padding: 2rem 1rem;
            }

            .hero-text h1 {
                font-size: 2.5rem;
                line-height: 1.1;
            }

            .hero-text p {
                font-size: 1.1rem;
            }

            .hero-image {
                order: -1;
                margin-bottom: 1rem;
            }

            .hero-image img {
                max-width: 80%;
                height: auto;
            }

            .cta-buttons {
                justify-content: center;
                flex-direction: column;
                gap: 1rem;
            }

            .btn-primary, .btn-secondary {
                width: 100%;
                max-width: 300px;
                margin: 0 auto;
            }

            .services-grid, .features-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }

            .service-card, .feature-card {
                padding: 2rem;
            }

            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 1.5rem;
            }

            .section-title h2 {
                font-size: 2rem;
            }

            .modal-content {
                margin: 10% auto;
                width: 95%;
            }

            .modal-header {
                padding: 1.5rem;
            }

            .modal-body {
                padding: 1.5rem;
            }
        }

        @media (max-width: 480px) {
            .nav-container {
                padding: 0 0.5rem;
            }

            .logo {
                font-size: 1.5rem;
            }

            .login-btn {
                padding: 0.6rem 1.5rem;
                font-size: 0.9rem;
            }

            .hero {
                padding-top: 70px;
            }

            .hero-content {
                padding: 1rem 0.5rem;
            }

            .hero-text h1 {
                font-size: 2rem;
                margin-bottom: 1rem;
            }

            .hero-text p {
                font-size: 1rem;
                margin-bottom: 1.5rem;
            }

            .hero-image img {
                max-width: 90%;
            }

            .btn-primary, .btn-secondary {
                padding: 0.8rem 1.5rem;
                font-size: 1rem;
                width: 100%;
            }

            .service-card, .feature-card {
                padding: 1.5rem;
            }

            .service-icon, .feature-icon {
                width: 60px;
                height: 60px;
                font-size: 1.5rem;
            }

            .service-card h3, .feature-card h3 {
                font-size: 1.3rem;
            }

            .stats-grid {
                grid-template-columns: 1fr;
                gap: 1rem;
            }

            .stat-item h3 {
                font-size: 2.5rem;
            }

            .section-title h2 {
                font-size: 1.8rem;
            }

            .section-title p {
                font-size: 1rem;
            }

            .modal-content {
                margin: 5% auto;
                width: 98%;
            }

            .modal-header {
                padding: 1rem;
            }

            .modal-header h2 {
                font-size: 1.5rem;
            }

            .modal-body {
                padding: 1rem;
            }

            .footer-content {
                grid-template-columns: 1fr;
                gap: 2rem;
                text-align: center;
            }

            .footer-brand {
                text-align: center;
            }

            .footer-description {
                max-width: 100%;
            }

            .footer-social {
                justify-content: center;
            }

            .footer-bottom {
                flex-direction: column;
                text-align: center;
                gap: 0.5rem;
            }
        }

        @media (max-width: 360px) {
            .hero-text h1 {
                font-size: 1.8rem;
            }

            .service-card, .feature-card {
                padding: 1rem;
            }

            .service-card h3, .feature-card h3 {
                font-size: 1.2rem;
            }

            .stat-item h3 {
                font-size: 2rem;
            }

            .section-title h2 {
                font-size: 1.6rem;
            }
        }
    </style>
</head>
<body>
    <!-- Header -->
    <header class="header">
        <div class="nav-container">
            <a href="#" class="logo">
                <i class="fas fa-feather-alt"></i> Al Mirag Poultry
            </a>
            <nav>
                <ul class="nav-links">
                    <li><a href="#services">Our Products</a></li>
                    <li><a href="#features">Features</a></li>
                    <li><a href="#about">About</a></li>
                    <li><a href="#contact">Contact</a></li>
                </ul>
            </nav>
            <button id="pwa-install-btn" class="install-btn" style="display: none;">
                <i class="fas fa-download"></i> Install App
            </button>
            <button onclick="openLoginModal()" class="login-btn">
                <i class="fas fa-sign-in-alt"></i> Login
            </button>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="hero">
        <div class="hero-content">
            <div class="hero-text">
                <h1>Fresh Poultry & Quality Meats</h1>
                <p>Your trusted source for premium poultry products. From farm-fresh chicken to quality meats, we deliver excellence to your doorstep with our comprehensive ordering and delivery system.</p>
                <div class="cta-buttons">
                    <button onclick="openLoginModal()" class="btn-primary">
                        <i class="fas fa-shopping-cart"></i> Order Now
                    </button>
                    <a href="#services" class="btn-secondary">
                        <i class="fas fa-eye"></i> View Products
                    </a>
                </div>
            </div>
            <div class="hero-image">
                <img src="{{ url_for('static', filename='home.png') }}" alt="Al Mirag Poultry - Fresh Poultry & Quality Meats" style="max-width: 100%; height: auto;">
            </div>
        </div>
    </section>

    <!-- Services Section -->
    <section class="services" id="services">
        <div class="container">
            <div class="section-title">
                <h2>Our Premium Products</h2>
                <p>Fresh, quality poultry products delivered to your doorstep</p>
            </div>
            <div class="services-grid">
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-drumstick-bite"></i>
                    </div>
                    <h3>Fresh Chicken</h3>
                    <p>Farm-fresh chicken, cut and prepared to your specifications. Available in whole, half, or custom cuts.</p>
                    <div class="price">From PKR 350/kg</div>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-egg"></i>
                    </div>
                    <h3>Fresh Eggs</h3>
                    <p>Premium quality eggs from free-range chickens. Available in various sizes and quantities.</p>
                    <div class="price">From PKR 15/dozen</div>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-utensils"></i>
                    </div>
                    <h3>Processed Meats</h3>
                    <p>Ready-to-cook processed poultry products including sausages, nuggets, and marinated cuts.</p>
                    <div class="price">From PKR 450/kg</div>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-truck"></i>
                    </div>
                    <h3>Home Delivery</h3>
                    <p>Convenient home delivery service with same-day or scheduled delivery options available.</p>
                    <div class="price">PKR 100 delivery</div>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-calendar-alt"></i>
                    </div>
                    <h3>Bulk Orders</h3>
                    <p>Special pricing for restaurants, hotels, and bulk orders. Custom packaging and delivery arrangements.</p>
                    <div class="price">Contact for quote</div>
                </div>
                <div class="service-card">
                    <div class="service-icon">
                        <i class="fas fa-certificate"></i>
                    </div>
                    <h3>Quality Guarantee</h3>
                    <p>100% fresh guarantee with proper storage and handling. All products meet health and safety standards.</p>
                    <div class="price">Quality Assured</div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="features" id="features">
        <div class="container">
            <div class="section-title">
                <h2>Why Choose Al Mirag Poultry?</h2>
                <p>Experience the convenience of modern poultry ordering and management</p>
            </div>
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-mobile-alt"></i>
                    </div>
                    <h3>Easy Online Ordering</h3>
                    <p>Simple and intuitive online platform to place orders, track deliveries, and manage your account.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-clock"></i>
                    </div>
                    <h3>Fast Delivery</h3>
                    <p>Quick and reliable delivery service with real-time tracking and flexible scheduling options.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h3>Fresh Guarantee</h3>
                    <p>All products are guaranteed fresh with proper cold chain management and quality control.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-credit-card"></i>
                    </div>
                    <h3>Secure Payments</h3>
                    <p>Multiple payment options including online payments, cash on delivery, and account credits.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-headset"></i>
                    </div>
                    <h3>24/7 Support</h3>
                    <p>Round-the-clock customer support to assist with orders, deliveries, and any inquiries.</p>
                </div>
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <h3>Order Tracking</h3>
                    <p>Complete order history, delivery tracking, and account management in one convenient platform.</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Stats Section -->
    <section class="stats">
        <div class="container">
            <div class="stats-grid">
                <div class="stat-item">
                    <h3>100%</h3>
                    <p>Fresh Guarantee</p>
                </div>
                <div class="stat-item">
                    <h3>24/7</h3>
                    <p>Order Support</p>
                </div>
                <div class="stat-item">
                    <h3>PKR</h3>
                    <p>Competitive Pricing</p>
                </div>
                <div class="stat-item">
                    <h3>Fast</h3>
                    <p>Same Day Delivery</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Login Modal -->
    <div id="loginModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <span class="close" onclick="closeLoginModal()">&times;</span>
                <h2><i class="fas fa-feather-alt"></i> Al Mirag Poultry Login</h2>
                <p>Access your account to place orders</p>
            </div>
            <div class="modal-body">
                <form method="post" action="{{ url_for('dashboard') }}">
                    <div class="form-group">
                        <label for="email">
                            <i class="fas fa-envelope"></i> Email Address
                        </label>
                        <input type="email" id="email" name="email" placeholder="Enter your email" required>
                    </div>

                    <div class="form-group">
                        <label for="password">
                            <i class="fas fa-lock"></i> Password
                        </label>
                        <input type="password" id="password" name="password" placeholder="Enter your password" required>
                    </div>

                    <button type="submit" class="btn-login">
                        <i class="fas fa-sign-in-alt"></i> Sign In
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <!-- Brand Section -->
                <div class="footer-brand">
                    <div class="footer-logo">
                        <i class="fas fa-feather-alt"></i>
                        Al Mirag Poultry
                    </div>
                    <p class="footer-description">
                        Your trusted source for premium poultry products. We deliver fresh, quality meats to your doorstep with our comprehensive ordering and delivery system.
                    </p>
                    <div class="footer-social">
                        <a href="#" class="social-link">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        <a href="#" class="social-link">
                            <i class="fab fa-instagram"></i>
                        </a>
                        <a href="#" class="social-link">
                            <i class="fab fa-whatsapp"></i>
                        </a>
                        <a href="#" class="social-link">
                            <i class="fab fa-twitter"></i>
                        </a>
                    </div>
                </div>

                <!-- Quick Links -->
                <div class="footer-section">
                    <h3>Quick Links</h3>
                    <ul class="footer-links">
                        <li><a href="#services"><i class="fas fa-chevron-right"></i> Our Products</a></li>
                        <li><a href="#features"><i class="fas fa-chevron-right"></i> Features</a></li>
                        <li><a href="#about"><i class="fas fa-chevron-right"></i> About Us</a></li>
                        <li><a href="#contact"><i class="fas fa-chevron-right"></i> Contact</a></li>
                        <li><a href="#" onclick="openLoginModal()"><i class="fas fa-chevron-right"></i> Login</a></li>
                    </ul>
                </div>

                <!-- Products -->
                <div class="footer-section">
                    <h3>Our Products</h3>
                    <ul class="footer-links">
                        <li><a href="#services"><i class="fas fa-chevron-right"></i> Fresh Chicken</a></li>
                        <li><a href="#services"><i class="fas fa-chevron-right"></i> Fresh Eggs</a></li>
                        <li><a href="#services"><i class="fas fa-chevron-right"></i> Processed Meats</a></li>
                        <li><a href="#services"><i class="fas fa-chevron-right"></i> Bulk Orders</a></li>
                        <li><a href="#services"><i class="fas fa-chevron-right"></i> Home Delivery</a></li>
                    </ul>
                </div>

                <!-- Contact Info -->
                <div class="footer-section">
                    <h3>Contact Info</h3>
                    <div class="footer-contact">
                        <div class="contact-item">
                            <i class="fas fa-map-marker-alt contact-icon"></i>
                            <span>Lahore, Pakistan</span>
                        </div>
                        <div class="contact-item">
                            <i class="fas fa-phone contact-icon"></i>
                            <span>+92 300 123 4567</span>
                        </div>
                        <div class="contact-item">
                            <i class="fas fa-envelope contact-icon"></i>
                            <span>info@almiragpoultry.com</span>
                        </div>
                        <div class="contact-item">
                            <i class="fas fa-clock contact-icon"></i>
                            <span>24/7 Order Support</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Footer Bottom -->
            <div class="footer-bottom">
                <div class="footer-copyright">
                    &copy; 2024 Al Mirag Poultry. All rights reserved.
                </div>
                <div class="footer-tagline">
                    Fresh Poultry & Quality Meats
                </div>
                <div class="footer-developer">
                    Developed by <a href="https://ursoftsolutions.com" target="_blank" rel="noopener noreferrer">UR SOFT</a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // Login Modal Functions
        function openLoginModal() {
            document.getElementById('loginModal').style.display = 'block';
        }

        function closeLoginModal() {
            document.getElementById('loginModal').style.display = 'none';
        }

        // Close modal when clicking outside
        window.onclick = function(event) {
            const modal = document.getElementById('loginModal');
            if (event.target == modal) {
                modal.style.display = 'none';
            }
        }

        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        // Add scroll effect to header
        window.addEventListener('scroll', function() {
            const header = document.querySelector('.header');
            if (window.scrollY > 100) {
                header.style.background = 'rgba(46, 125, 50, 0.95)';
                header.style.backdropFilter = 'blur(10px)';
            } else {
                header.style.background = 'linear-gradient(135deg, #2E7D32 0%, #388E3C 100%)';
                header.style.backdropFilter = 'none';
            }
        });

        // PWA Service Worker Registration
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', function() {
                navigator.serviceWorker.register('{{ url_for("static", filename="sw.js") }}')
                    .then(function(registration) {
                        console.log('ServiceWorker registration successful with scope: ', registration.scope);
                        
                        // Check for updates
                        registration.addEventListener('updatefound', function() {
                            const newWorker = registration.installing;
                            newWorker.addEventListener('statechange', function() {
                                if (newWorker.state === 'installed' && navigator.serviceWorker.controller) {
                                    // New content is available, show update notification
                                    if (confirm('New version available! Reload to update?')) {
                                        window.location.reload();
                                    }
                                }
                            });
                        });
                    })
                    .catch(function(err) {
                        console.log('ServiceWorker registration failed: ', err);
                    });
            });
        }
    </script>
    
    <!-- Universal PWA Installation Script -->
    <script src="{{ url_for('static', filename='js/pwa-install.js') }}"></script>
</body>
</html>
