/* Basic Reset & Body Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%; /* Ensures body takes full height */
}

body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
    display: flex; /* Flexbox for sticky footer */
    flex-direction: column; /* Column direction for sticky footer */
}

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

/* Navigation Bar */
.navbar {
    background: #fff;
    color: #333;
    padding: 15px 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar .logo a {
    font-size: 1.8em;
    font-weight: 700;
    color: #007bff; /* Primary brand color */
    text-decoration: none;
}

.navbar .nav-links ul {
    list-style: none;
    display: flex;
}

.navbar .nav-links ul li {
    margin-left: 30px;
}

.navbar .nav-links ul li a {
    color: #555;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.navbar .nav-links ul li a:hover {
    color: #007bff;
}

/* Hero Section */
.hero-section {
    background: linear-gradient(to right, #e0f2f7, #c9e6f1);
    padding: 80px 0;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1; /* Allows hero section to grow and fill available space */
}

.hero-section .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

@media (min-width: 768px) {
    .hero-section .container {
        flex-direction: row;
        text-align: left;
    }
    .hero-content {
        flex: 1;
        padding-right: 40px;
    }
    .hero-image {
        flex: 1;
    }
}


.hero-section h1 {
    font-size: 3em;
    color: #222;
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero-section p {
    font-size: 1.2em;
    color: #555;
    margin-bottom: 30px;
}

.hero-section .btn-primary {
    display: inline-block;
    background: #007bff;
    color: #fff;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 1.1em;
    transition: background 0.3s ease;
}

.hero-section .btn-primary:hover {
    background: #0056b3;
}

.hero-section .hero-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Clients Section */
.clients-section {
    padding: 60px 0;
    background-color: #fff;
    text-align: center;
    overflow: hidden; /* Hide overflow for the scrolling effect */
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.clients-section h2 {
    font-size: 2.2em;
    color: #222;
    margin-bottom: 40px;
}

.client-logos-container {
    width: 100%;
    white-space: nowrap; /* Prevent logos from wrapping */
    overflow: hidden; /* Hide scrollbar but allow content to flow for animation */
    position: relative;
}

.client-logos {
    display: inline-block; /* Make it a single line block */
    animation: scrollLogos 20s linear infinite; /* Animation for continuous scroll */
}

.client-logos:hover {
    animation-play-state: paused; /* Pause animation on hover */
}

.client-logos img {
    height: 60px; /* Adjust logo height as needed */
    width: auto; /* Maintain aspect ratio */
    margin: 0 40px; /* Space between logos */
    vertical-align: middle; /* Align images nicely */
    filter: grayscale(100%); /* Desaturate logos */
    opacity: 0.6; /* Make them slightly transparent */
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.client-logos img:hover {
    filter: grayscale(0%); /* Full color on hover */
    opacity: 1; /* Full opacity on hover */
}

/* Keyframe animation for continuous scroll */
@keyframes scrollLogos {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Scrolls half of the total width (due to duplication) */
    }
}


/* Footer */
.footer {
    background: #fff; /* White background */
    color: #333; /* Default text color */
    padding: 40px 0 20px; /* Adjust padding for better spacing */
    border-top: 1px solid #eee; /* Subtle top border */
}

.footer .container {
    display: flex;
    flex-wrap: wrap; /* Allow columns to wrap on smaller screens */
    justify-content: space-between;
    gap: 30px; /* Space between columns */
    padding-bottom: 20px;
}

.footer-col {
    flex: 1;
    min-width: 200px; /* Minimum width for columns before wrapping */
}

.footer-col h3 {
    font-size: 1.3em;
    color: #007bff; /* Blue like the title */
    margin-bottom: 20px;
}

.footer-col p {
    font-size: 0.95em;
    margin-bottom: 10px;
    color: #666; /* Slightly whiter than default text */
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 10px;
}

.footer-col ul li a {
    color: #666; /* Slightly whiter than default text */
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 0.95em;
}

.footer-col ul li a:hover {
    color: #007bff;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: #007bff; /* Blue background for icons */
    color: #fff;
    border-radius: 50%;
    text-decoration: none;
    font-size: 1.2em;
    transition: background 0.3s ease;
}

.social-icon:hover {
    background: #0056b3;
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #eee;
    margin-top: 20px;
}

.footer-bottom p {
    color: #666;
    font-size: 0.9em;
}

@extends('layouts.app')

@section('title', 'QueueFlow - Smart Queue Management')

@section('content')
    <section class="hero-section">
        <div class="container">
            <div class="hero-content">
                <h1>Streamline Your Business with Smart Queue Management</h1>
                <p>Reduce wait times, improve customer satisfaction, and optimize your operations with QueueFlow's intuitive system.</p>
                <a href="{{ url('/get-started') }}" class="btn-primary">Get Started Today</a>
            </div>
            <div class="hero-image">
                <img src="https://via.placeholder.com/600x400?text=Queue+Management+System" alt="Queue Management System Illustration">
            </div>
        </div>
    </section>

    <section class="clients-section">
        <div class="container">
            <h2>Our Valued Clients</h2>
            <div class="client-logos-container">
                <div class="client-logos">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/1200px-Google_2015_logo.svg.png" alt="Google Logo">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/2021_Facebook_icon.svg/1200px-2021_Facebook_icon.svg.png" alt="Facebook Logo">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Amazon_logo.svg/1200px-Amazon_logo.svg.png" alt="Amazon Logo">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/1200px-Apple_logo_black.svg.png" alt="Apple Logo">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Microsoft_logo.svg/1200px-Microsoft_logo.svg.png" alt="Microsoft Logo">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Tokopedia_Logo.png/800px-Tokopedia_Logo.png" alt="Tokopedia Logo">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Gojek_logo.svg/1200px-Gojek_logo.svg.png" alt="Gojek Logo">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Traveloka_Logo.svg/1200px-Traveloka_Logo.svg.png" alt="Traveloka Logo">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/1200px-Google_2015_logo.svg.png" alt="Google Logo">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b8/2021_Facebook_icon.svg/1200px-2021_Facebook_icon.svg.png" alt="Facebook Logo">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Amazon_logo.svg/1200px-Amazon_logo.svg.png" alt="Amazon Logo">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/1200px-Apple_logo_black.svg.png" alt="Apple Logo">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cf/Microsoft_logo.svg/1200px-Microsoft_logo.svg.png" alt="Microsoft Logo">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/Tokopedia_Logo.png/800px-Tokopedia_Logo.png" alt="Tokopedia Logo">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/41/Gojek_logo.svg/1200px-Gojek_logo.svg.png" alt="Gojek Logo">
                    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Traveloka_Logo.svg/1200px-Traveloka_Logo.svg.png" alt="Traveloka Logo">
                </div>
            </div>
        </div>
    </section>

    <section class="features-section py-16">
        <div class="container mx-auto px-4">
            <h2 class="text-4xl font-bold text-center text-gray-800 mb-4">Fitur & Layanan Kami</h2>
            <p class="text-lg text-center text-gray-600 mb-12 max-w-3xl mx-auto">
                Temukan bagaimana QueueFlow dapat merevolusi operasi bisnis Anda dengan fitur-fitur canggih kami.
            </p>

            <div class="features-grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                <!-- Feature Card 1: Smart Queueing -->
                <div class="feature-card bg-white rounded-lg shadow-lg p-8 flex flex-col items-center text-center transform hover:scale-105 transition-transform duration-300">
                    <div class="feature-icon mb-6">
                        <i class="fas fa-ticket-alt text-5xl text-blue-500"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-3">Antrian Cerdas</h3>
                    <p class="text-gray-600 text-base mb-6">Sistem antrian yang intuitif dan mudah digunakan, mengurangi waktu tunggu pelanggan Anda secara signifikan.</p>
                    <a href="{{ url('/features#smart-queueing') }}" class="btn-secondary">Pelajari Lebih Lanjut</a>
                </div>

                <!-- Feature Card 2: Real-time Analytics -->
                <div class="feature-card bg-white rounded-lg shadow-lg p-8 flex flex-col items-center text-center transform hover:scale-105 transition-transform duration-300">
                    <div class="feature-icon mb-6">
                        <i class="fas fa-chart-line text-5xl text-green-500"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-3">Analitik Real-time</h3>
                    <p class="text-gray-600 text-base mb-6">Dapatkan wawasan mendalam tentang alur pelanggan dan performa layanan dengan laporan analitik yang akurat.</p>
                    <a href="{{ url('/features#analytics') }}" class="btn-secondary">Pelajari Lebih Lanjut</a>
                </div>

                <!-- Feature Card 3: Multi-location Support -->
                <div class="feature-card bg-white rounded-lg shadow-lg p-8 flex flex-col items-center text-center transform hover:scale-105 transition-transform duration-300">
                    <div class="feature-icon mb-6">
                        <i class="fas fa-map-marker-alt text-5xl text-red-500"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-3">Dukungan Multi-lokasi</h3>
                    <p class="text-gray-600 text-base mb-6">Kelola semua cabang Anda dari satu dashboard terpusat, memudahkan ekspansi bisnis Anda.</p>
                    <a href="{{ url('/features#multi-location') }}" class="btn-secondary">Pelajari Lebih Lanjut</a>
                </div>

                <!-- Feature Card 4: Customizable Displays -->
                <div class="feature-card bg-white rounded-lg shadow-lg p-8 flex flex-col items-center text-center transform hover:scale-105 transition-transform duration-300">
                    <div class="feature-icon mb-6">
                        <i class="fas fa-palette text-5xl text-purple-500"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-3">Tampilan Kustom</h3>
                    <p class="text-gray-600 text-base mb-6">Sesuaikan tampilan antrian digital Anda agar sesuai dengan branding dan estetika bisnis Anda.</p>
                    <a href="{{ url('/features#custom-display') }}" class="btn-secondary">Pelajari Lebih Lanjut</a>
                </div>

                <!-- Feature Card 5: SMS/WhatsApp Notifications -->
                <div class="feature-card bg-white rounded-lg shadow-lg p-8 flex flex-col items-center text-center transform hover:scale-105 transition-transform duration-300">
                    <div class="feature-icon mb-6">
                        <i class="fas fa-bell text-5xl text-orange-500"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-3">Notifikasi Otomatis</h3>
                    <p class="text-gray-600 text-base mb-6">Kirim notifikasi real-time via SMS atau WhatsApp kepada pelanggan tentang status antrian mereka.</p>
                    <a href="{{ url('/features#notifications') }}" class="btn-secondary">Pelajari Lebih Lanjut</a>
                </div>

                <!-- Feature Card 6: Staff Management -->
                <div class="feature-card bg-white rounded-lg shadow-lg p-8 flex flex-col items-center text-center transform hover:scale-105 transition-transform duration-300">
                    <div class="feature-icon mb-6">
                        <i class="fas fa-users-cog text-5xl text-teal-500"></i>
                    </div>
                    <h3 class="text-xl font-bold text-gray-800 mb-3">Manajemen Staf</h3>
                    <p class="text-gray-600 text-base mb-6">Alokasikan tugas, pantau kinerja staf, dan optimalkan efisiensi operasional dengan mudah.</p>
                    <a href="{{ url('/features#staff-management') }}" class="btn-secondary">Pelajari Lebih Lanjut</a>
                </div>
            </div>
        </div>
    </section>
@endsection

<style>
    /* Add these styles to your public/css/style.css */

    .features-section {
        background-color: #e0f7fa; /* A light, calming background color */
        padding-top: 4rem; /* Consistent top padding */
        padding-bottom: 4rem; /* Consistent bottom padding */
    }

    .features-section h2 {
        font-size: 2.5em; /* Slightly larger for main section heading */
        color: #222;
        margin-bottom: 1rem;
    }

    .features-section p.text-lg {
        font-size: 1.1em;
        color: #555;
        margin-bottom: 3rem;
    }

    .features-grid {
        display: grid;
        grid-template-columns: 1fr; /* Single column on small screens */
        gap: 2rem; /* Space between cards */
        max-width: 1200px; /* Max width for the grid */
        margin: 0 auto; /* Center the grid */
    }

    @media (min-width: 768px) {
        .features-grid {
            grid-template-columns: repeat(2, 1fr); /* Two columns on medium screens */
        }
    }

    @media (min-width: 1024px) {
        .features-grid {
            grid-template-columns: repeat(3, 1fr); /* Three columns on large screens */
        }
    }

    .feature-card {
        background-color: #ffffff;
        border-radius: 0.75rem; /* Slightly more rounded corners */
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Slightly stronger shadow */
        padding: 2.5rem; /* More padding inside cards */
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    }

    .feature-card:hover {
        transform: translateY(-8px); /* More pronounced lift on hover */
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); /* Enhanced shadow on hover */
    }

    .feature-icon {
        width: 80px; /* Fixed size for icon container */
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%; /* Circular background for icons */
        background-color: #f0f8ff; /* Very light blue background for icons */
        margin-bottom: 1.5rem;
        box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Subtle shadow for icon circle */
    }

    .feature-icon i {
        font-size: 3.5rem; /* Larger icons */
        line-height: 1; /* Ensure icon is centered vertically */
    }

    /* Specific icon colors */
    .feature-icon .fa-ticket-alt { color: #007bff; } /* Blue */
    .feature-icon .fa-chart-line { color: #28a745; } /* Green */
    .feature-icon .fa-map-marker-alt { color: #dc3545; } /* Red */
    .feature-icon .fa-palette { color: #6f42c1; } /* Purple */
    .feature-icon .fa-bell { color: #fd7e14; } /* Orange */
    .feature-icon .fa-users-cog { color: #20c997; } /* Teal */


    .feature-card h3 {
        font-size: 1.5em; /* Feature title size */
        font-weight: 700;
        color: #333;
        margin-bottom: 0.75rem;
    }

    .feature-card p {
        font-size: 1em;
        color: #666;
        line-height: 1.6;
        margin-bottom: 1.5rem;
    }

    .feature-card .btn-secondary {
        display: inline-block;
        background: #e9ecef; /* Light grey background */
        color: #007bff; /* Primary blue text */
        padding: 10px 20px;
        text-decoration: none;
        border-radius: 5px;
        font-size: 0.95em;
        font-weight: 500;
        transition: background 0.3s ease, color 0.3s ease;
        border: 1px solid #ced4da; /* Subtle border */
    }

    .feature-card .btn-secondary:hover {
        background: #007bff; /* Blue background on hover */
        color: #fff; /* White text on hover */
        border-color: #007bff;
    }
</style>