@extends('layouts.app')

@section('content')

    <style>
        /* =========================================================
           1. RESET & STANDALONE
           ========================================================= */
        nav { display: none !important; } 
        footer { display: none !important; } 
        main { padding-top: 0 !important; }

        :root {
            --c-primary: #8b5e34; /* Coffee Brown */
            --c-accent: #d4a373;  /* Latte Gold */
            --c-bg: #fefae0;      /* Cream White */
            --c-dark: #283618;    /* Dark Roast Green */
            --c-white: #ffffff;
        }

        body { 
            background-color: var(--c-bg); 
            color: var(--c-dark); 
            font-family: 'Plus Jakarta Sans', sans-serif;
            overflow-x: hidden;
        }

        /* =========================================================
           2. CUSTOM CAFE NAVIGATION
           ========================================================= */
        .cafe-nav {
            position: absolute; top: 0; width: 100%; padding: 40px 8%;
            display: flex; justify-content: space-between; align-items: center;
            z-index: 100;
        }
        .cafe-logo { font-family: 'Cormorant Garamond', serif; font-size: 2rem; font-style: italic; font-weight: 700; color: var(--c-dark); }
        .cafe-nav-links a { color: var(--c-dark); text-decoration: none; margin-left: 35px; font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; }

        /* =========================================================
           3. THE AROMA HERO (ANIMATED ELEMENTS)
           ========================================================= */
        .hero-cafe {
            height: 100vh; width: 100%; display: flex; align-items: center;
            justify-content: center; position: relative; overflow: hidden;
            text-align: center; background: #fff;
        }

        /* Animierte Bohnen & Dampf */
        .aroma-particle {
            position: absolute; color: var(--c-primary); opacity: 0.1;
            animation: floatAroma 10s infinite linear; pointer-events: none;
        }
        @keyframes floatAroma {
            0% { transform: translateY(0) rotate(0deg); opacity: 0; }
            50% { opacity: 0.2; }
            100% { transform: translateY(-100vh) rotate(360deg); opacity: 0; }
        }

        /* Rotierende Special-Disc */
        .special-disc {
            position: absolute; right: -50px; bottom: 10%;
            width: 250px; height: 250px; background: var(--c-dark);
            border-radius: 50%; display: flex; align-items: center; justify-content: center;
            color: white; text-align: center; padding: 20px;
            animation: rotateDisc 15s linear infinite;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            z-index: 10;
        }
        @keyframes rotateDisc { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

        .hero-text { position: relative; z-index: 5; }
        .hero-text h1 { 
            font-family: 'Cormorant Garamond', serif; font-style: italic;
            font-size: clamp(4rem, 12vw, 8rem); font-weight: 300; line-height: 0.8; 
            letter-spacing: -2px; color: var(--c-dark); margin-bottom: 30px;
        }
        .hero-text h1 span { display: block; font-family: 'Plus Jakarta Sans', sans-serif; font-style: normal; font-weight: 900; letter-spacing: 5px; font-size: 1.5rem; color: var(--c-primary); margin-top: 10px; }

        .btn-cafe {
            padding: 20px 50px; border: 2px solid var(--c-dark); color: var(--c-dark);
            text-decoration: none; font-weight: 800; text-transform: uppercase;
            letter-spacing: 3px; transition: 0.4s; display: inline-block;
        }
        .btn-cafe:hover { background: var(--c-dark); color: white; transform: translateY(-5px); }

        /* =========================================================
           4. SECTIONS (Minimal & Clean)
           ========================================================= */
        section { padding: 150px 8%; }
        .label { color: var(--c-primary); font-weight: 800; text-transform: uppercase; letter-spacing: 4px; font-size: 0.75rem; display: block; margin-bottom: 20px; }

        .menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 40px; }
        .menu-item {
            background: var(--c-white); padding: 40px; border-radius: 4px;
            border-bottom: 5px solid var(--c-accent); transition: 0.4s;
        }
        .menu-item:hover { transform: translateY(-10px); box-shadow: 0 30px 60px rgba(0,0,0,0.05); }
        .menu-item h3 { font-size: 1.8rem; margin-bottom: 10px; font-family: 'Cormorant Garamond', serif; font-weight: 700; }
        .price { font-weight: 900; color: var(--c-primary); font-size: 1.2rem; }

        /* =============================================
           5. ATMOSPHERE SHOWCASE
           ============================================= */
        .atmosphere { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; height: 600px; }
        .atmo-img { background-size: cover; background-position: center; border-radius: 4px; }

        /* =============================================
           6. RESERVATION (High End Form)
           ============================================= */
        .reserve-box {
            background: var(--c-dark); color: white; padding: 100px 8%; border-radius: 40px;
            text-align: center; margin: 0 4%;
        }
        .reserve-box input { 
            background: transparent; border: none; border-bottom: 2px solid rgba(255,255,255,0.2); 
            padding: 15px; color: white; font-size: 1.2rem; margin: 20px; width: 300px; text-align: center; outline: none;
        }
        .reserve-box input:focus { border-bottom-color: var(--c-accent); }

        .subtle-kotsch { text-align: center; padding: 40px; font-size: 0.6rem; letter-spacing: 5px; opacity: 0.3; text-transform: uppercase; }

        @media (max-width: 1024px) {
            .atmosphere { grid-template-columns: 1fr; height: auto; }
            .atmo-img { height: 300px; }
            .reserve-box input { width: 100%; margin: 10px 0; }
        }
    </style>

    <!-- CUSTOM NAV -->
    <nav class="cafe-nav">
        <div class="cafe-logo">Café Aroma</div>
        <div class="cafe-nav-links">
            <a href="#menu">Menu</a>
            <a href="#reservation">Table</a>
            <a href="/kontakt">Contact</a>
        </div>
    </nav>

    <!-- ANIMATED HERO -->
    <header class="hero-cafe">
        <!-- Partikel-Bohnen -->
        <i class="fas fa-seedling aroma-particle" style="left: 10%; animation-delay: 0s;"></i>
        <i class="fas fa-coffee aroma-particle" style="left: 30%; animation-delay: 3s;"></i>
        <i class="fas fa-seedling aroma-particle" style="left: 70%; animation-delay: 1s;"></i>
        <i class="fas fa-mug-hot aroma-particle" style="left: 90%; animation-delay: 5s;"></i>

        <div class="hero-text reveal active">
            <span class="label">Authentic Brew</span>
            <h1>Art of<br>Coffee.<span>EST. 2026 BERLIN</span></h1>
            <a href="#menu" class="btn-cafe">View the Menu</a>
        </div>

        <div class="special-disc">
            <span style="font-size: 0.8rem; letter-spacing: 2px;">SPECIAL OF THE WEEK<br><strong>ETHIOPIAN GOLD</strong><br>3.50€</span>
        </div>
    </header>

    <!-- MENU -->
    <section id="menu">
        <div class="container reveal">
            <span class="label">Morning Selection</span>
            <h2 style="font-family: 'Cormorant Garamond', serif; font-size: 3.5rem; margin-bottom: 60px;">Our Favorites.</h2>
            
            <div class="menu-grid">
                <div class="menu-item">
                    <h3>Caramel Macchiato</h3>
                    <p style="color: #666; margin-bottom: 20px;">Double espresso with velvety steamed milk and vanilla syrup.</p>
                    <span class="price">4,80 €</span>
                </div>
                <div class="menu-item">
                    <h3>Avocado Toast Deluxe</h3>
                    <p style="color: #666; margin-bottom: 20px;">Sourdough bread, poached egg, chili flakes and fresh lime.</p>
                    <span class="price">12,50 €</span>
                </div>
                <div class="menu-item">
                    <h3>Cold Brew Nitro</h3>
                    <p style="color: #666; margin-bottom: 20px;">12-hour slow drip coffee infused with nitrogen for a creamy finish.</p>
                    <span class="price">5,20 €</span>
                </div>
            </div>
        </div>
    </section>

    <!-- ATMOSPHERE -->
    <section style="padding-top: 0;">
        <div class="atmosphere reveal">
            <div class="atmo-img" style="background-image: url('https://images.pexels.com/photos/1015568/pexels-photo-1015568.jpeg?auto=compress&cs=tinysrgb&w=800');"></div>
            <div class="atmo-img" style="background-image: url('https://images.pexels.com/photos/1560657/pexels-photo-1560657.jpeg?auto=compress&cs=tinysrgb&w=800');"></div>
        </div>
    </section>

    <!-- RESERVATION -->
    <section id="reservation">
        <div class="reserve-box reveal">
            <span class="label" style="color: var(--c-accent);">Waitlist</span>
            <h2 style="font-family: 'Cormorant Garamond', serif; font-size: 3rem; color: white;">Join our Table.</h2>
            <p style="opacity: 0.6; margin-bottom: 40px;">Sichern Sie sich Ihren Platz im Herzen Berlins.</p>
            <form>
                <input type="text" placeholder="GUESTS" required>
                <input type="text" placeholder="DATE" onfocus="(this.type='date')" required>
                <div style="margin-top: 40px;">
                    <button type="submit" class="btn-cafe" style="border-color: var(--c-accent); color: var(--c-accent);">RESERVE NOW</button>
                </div>
            </form>
        </div>
    </section>

    <div class="subtle-kotsch">
        Designed by kotsch.tech
    </div>

@endsection