@extends('layouts.app')

@section('content')

    <style>
        :root {
            --primary: #a855f7; /* Electric Purple */
            --accent: #f43f5e;  /* Rose Pink */
            --bg-dark: #050505;
            --card-bg: #111111;
            --text-light: #f8fafc;
            --text-muted: #94a3b8;
        }

        /* --- HEADER OVERRIDE: Entfernt kotsch.tech aus der Navi für diese Seite --- */
        nav .logo { font-family: 'Plus Jakarta Sans', sans-serif; color: var(--text-dark); }
        nav .logo i { color: var(--primary) !important; }
        nav .logo span { display: none; } /* Versteckt das ".TECH" */
        nav .logo::after { content: 'MUSIC'; color: var(--primary); margin-left: 5px; }

        body { background-color: var(--bg-dark); color: var(--text-light); }

        /* --- HERO --- */
        .music-hero {
            height: 100vh;
            display: flex;
            align-items: center;
            padding: 0 8%;
            background: radial-gradient(circle at 20% 30%, #1e1b4b 0%, #050505 50%);
            position: relative;
            overflow: hidden;
        }

        .hero-text h1 {
            font-size: clamp(4rem, 12vw, 8rem);
            font-weight: 900;
            line-height: 0.8;
            letter-spacing: -5px;
            text-transform: uppercase;
            margin-bottom: 30px;
        }

        .hero-text h1 span {
            display: block;
            background: linear-gradient(to right, var(--primary), var(--accent));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* Vinyl Animation */
        .vinyl-wrap {
            position: absolute;
            right: -10%;
            top: 50%;
            transform: translateY(-50%);
            width: 600px;
            height: 600px;
            pointer-events: none;
        }

        .record {
            width: 100%; height: 100%;
            background: url('https://images.unsplash.com/photo-1614613535308-eb5fbd3d2c17?q=80&w=1000&auto=format&fit=crop') center/cover;
            border-radius: 50%;
            border: 10px solid #111;
            box-shadow: 0 0 100px rgba(0,0,0,0.5);
            animation: rotateRecord 20s linear infinite;
        }

        @keyframes rotateRecord { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

        /* --- CONTENT SECTIONS --- */
        .section-label { color: var(--primary); font-weight: 800; text-transform: uppercase; letter-spacing: 4px; font-size: 0.8rem; display: block; margin-bottom: 20px; }
        
        .track-list { background: var(--card-bg); border-radius: 40px; padding: 60px; margin: 40px 0; border: 1px solid #222; }
        
        .track-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 25px 0;
            border-bottom: 1px solid #222;
            transition: 0.3s;
            cursor: pointer;
        }
        .track-item:hover { transform: translateX(15px); color: var(--primary); }
        .track-item:last-child { border-bottom: none; }
        
        /* --- TOUR --- */
        .tour-grid { display: grid; gap: 20px; }
        .tour-card {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #111;
            padding: 30px 50px;
            border-radius: 20px;
            border: 1px solid #222;
            transition: 0.4s;
        }
        .tour-card:hover { background: var(--primary); color: white; border-color: var(--primary); }
        .tour-card h4 { font-size: 1.5rem; font-weight: 800; }

        /* --- SUBTLE BRANDING (Footer) --- */
        .kotsch-signature {
            margin-top: 100px;
            padding: 40px;
            text-align: center;
            font-size: 0.6rem;
            text-transform: uppercase;
            letter-spacing: 5px;
            color: var(--text-muted);
            opacity: 0.2; /* Extrem unauffällig */
        }

        @media (max-width: 1024px) {
            .vinyl-wrap { display: none; }
            .hero-text h1 { font-size: 4rem; }
            .tour-card { flex-direction: column; text-align: center; gap: 20px; }
        }
    </style>

    <div class="music-hero">
        <div class="hero-text reveal active">
            <span class="section-label">New Album Release</span>
            <h1>Lost in<br><span>The Grid.</span></h1>
            <p style="max-width: 500px; color: var(--text-muted); font-size: 1.2rem; margin-bottom: 40px;">Synthesizer-Klänge aus dem Jahr 2026. Eine Reise durch digitalen Sound und analoge Gefühle.</p>
            <a href="#" class="btn-nav" style="background: var(--primary); color: white; padding: 20px 50px; border-radius: 50px;">ANHÖREN</a>
        </div>
        <div class="vinyl-wrap">
            <div class="record"></div>
        </div>
    </div>

    <section class="container">
        <div class="reveal">
            <span class="section-label">Discography</span>
            <h2>Tracklist.</h2>
            <div class="track-list">
                <div class="track-item">
                    <span>01. Digital Sunrise</span>
                    <strong>4:12</strong>
                </div>
                <div class="track-item">
                    <span>02. Overclocked Heartbeat</span>
                    <strong>3:45</strong>
                </div>
                <div class="track-item">
                    <span>03. Binary Emotions</span>
                    <strong>5:02</strong>
                </div>
                <div class="track-item">
                    <span>04. The Last Reboot</span>
                    <strong>4:58</strong>
                </div>
            </div>
        </div>
    </section>

    <section class="container">
        <div class="reveal">
            <span class="section-label">Live Dates</span>
            <h2 style="margin-bottom: 50px;">Tour 2026.</h2>
            <div class="tour-grid">
                <div class="tour-card">
                    <div>
                        <small style="color: var(--primary);">MAI 12</small>
                        <h4>BERLIN</h4>
                    </div>
                    <span>TEMPODROM</span>
                    <a href="#" style="color: inherit; font-weight: 800; text-decoration: none;">TICKETS →</a>
                </div>
                <div class="tour-card">
                    <div>
                        <small style="color: var(--primary);">MAI 15</small>
                        <h4>MÜNCHEN</h4>
                    </div>
                    <span>ZENITH</span>
                    <a href="#" style="color: inherit; font-weight: 800; text-decoration: none;">TICKETS →</a>
                </div>
                <div class="tour-card">
                    <div>
                        <small style="color: var(--primary);">MAI 20</small>
                        <h4>HAMBURG</h4>
                    </div>
                    <span>BARCLAYS ARENA</span>
                    <span style="opacity: 0.5;">AUSVERKAUFT</span>
                </div>
            </div>
        </div>
    </section>

    <div class="kotsch-signature">
        Designed & Built by kotsch.tech
    </div>

@endsection