@php($isMonitor = request()->query('view') === 'monitor')
@extends('apple.mac_monitor_layout')

@section('mac-styles')
    @if($isMonitor)
        nav, footer { display: none !important; }
        html, body, main { margin: 0 !important; padding: 0 !important; width: 100%; height: 100%; overflow: hidden; background: transparent !important; }
    @else
        .mac-product-page { padding: 150px 5% 100px; background: radial-gradient(circle at 20% 0%, #dbeafe 0%, #fff 34%, #f8fafc 100%); }
    @endif
    .onebar-ui { min-height: @if($isMonitor) 100vh @else 620px @endif; font-family: -apple-system, BlinkMacSystemFont, 'Plus Jakarta Sans', sans-serif; background: linear-gradient(135deg, #eef2ff 0%, #f8fafc 48%, #e0f2fe 100%); color: #0f172a; position: relative; overflow: hidden; }
    .onebar-menubar { height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; background: rgba(255,255,255,0.72); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(148,163,184,0.22); font-size: 0.78rem; font-weight: 700; }
    .ob-left, .ob-right { display: flex; align-items: center; gap: 14px; }
    .ob-dot { width: 8px; height: 8px; border-radius: 999px; background: #10b981; box-shadow: 0 0 0 4px rgba(16,185,129,0.14); }
    .ob-popover { position: absolute; top: 50px; right: 28px; width: min(420px, calc(100% - 56px)); border: 1px solid rgba(148,163,184,0.28); border-radius: 26px; background: rgba(255,255,255,0.86); backdrop-filter: blur(28px); box-shadow: 0 34px 80px -38px rgba(15,23,42,0.48); padding: 18px; }
    .ob-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
    .ob-head h1 { margin: 0; font-size: 1.6rem; letter-spacing: -1px; }
    .ob-pill { padding: 7px 11px; border-radius: 999px; background: #0f172a; color: white; font-size: 0.72rem; font-weight: 800; }
    .ob-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .ob-card { padding: 14px; border-radius: 18px; background: rgba(248,250,252,0.9); border: 1px solid #e2e8f0; }
    .ob-card span { display: block; color: #64748b; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px; }
    .ob-card strong { font-size: 1.25rem; letter-spacing: -0.5px; }
    .ob-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
    .ob-action { min-height: 58px; display: grid; place-items: center; gap: 6px; border-radius: 16px; background: #0f172a; color: white; font-size: 0.72rem; font-weight: 800; text-align: center; }
    .ob-action i { font-size: 1rem; color: #93c5fd; }
    .ob-window { position: absolute; left: 38px; bottom: 40px; width: min(520px, calc(100% - 76px)); padding: 22px; border-radius: 26px; background: rgba(15,23,42,0.9); color: white; box-shadow: 0 32px 90px -44px rgba(15,23,42,0.85); }
    .ob-window h2 { margin: 0 0 10px; font-size: 2.1rem; letter-spacing: -1px; }
    .ob-window p { margin: 0; color: #cbd5e1; line-height: 1.6; }
    @if(!$isMonitor)
        .mac-product-wrap { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
        .mac-copy h1 { font-size: clamp(3rem, 7vw, 5rem); line-height: .92; letter-spacing: -3px; margin: 0 0 20px; }
        .mac-copy p { color: #64748b; font-size: 1.16rem; line-height: 1.75; }
        .mac-demo-frame { border-radius: 28px; overflow: hidden; box-shadow: 0 36px 90px -42px rgba(15,23,42,.55); border: 1px solid #e2e8f0; }
        @media(max-width:900px){ .mac-product-wrap{grid-template-columns:1fr;} }
    @endif
</style>
@endsection

@section('mac-content')
@if(!$isMonitor)
<section class="mac-product-page">
    <div class="mac-product-wrap">
        <div class="mac-copy reveal">
            <span class="label">macOS Menu Bar</span>
            <h1>OneBar bündelt deinen Mac.</h1>
            <p>Eine schlanke Menüleisten-App für Systemwerte, Schnellaktionen, Fokus-Status, Kalender, Netzwerk und smarte Workflows. Alles oben erreichbar, ohne Fensterchaos.</p>
        </div>
        <div class="mac-demo-frame reveal">
@endif
            <div class="onebar-ui">
                <div class="onebar-menubar">
                    <div class="ob-left"><strong>OneBar</strong><span>Datei</span><span>Aktionen</span><span>Fokus</span></div>
                    <div class="ob-right"><span>CPU 18%</span><span>RAM 62%</span><span>WLAN</span><span class="ob-dot"></span></div>
                </div>
                <div class="ob-popover">
                    <div class="ob-head"><h1>Command Center</h1><span class="ob-pill">Live</span></div>
                    <div class="ob-grid">
                        <div class="ob-card"><span>Akku</span><strong>87%</strong></div>
                        <div class="ob-card"><span>Nächster Termin</span><strong>14:30</strong></div>
                        <div class="ob-card"><span>Netzwerk</span><strong>842 Mbit</strong></div>
                        <div class="ob-card"><span>Fokus</span><strong>Deep Work</strong></div>
                    </div>
                    <div class="ob-actions">
                        <div class="ob-action"><i class="fas fa-moon"></i>Fokus</div>
                        <div class="ob-action"><i class="fas fa-broom"></i>Clean</div>
                        <div class="ob-action"><i class="fas fa-bolt"></i>Shortcut</div>
                    </div>
                </div>
                <div class="ob-window">
                    <h2>Alles Wichtige. Ein Klick.</h2>
                    <p>OneBar legt Status, Aktionen und Automationen direkt in die macOS-Menüleiste.</p>
                </div>
            </div>
@if(!$isMonitor)
        </div>
    </div>
</section>
@endif
@endsection