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

@section('title', 'SmoothRide – App gegen Reisekrankheit für macOS | Arthur Kotsch')
@section('meta_description', 'SmoothRide ist die ruhige macOS-App gegen Reisekrankheit: Bewegungsrhythmus, Atem-Timer, Pausenplanung und persönliche Trigger in einem klaren Reise-Cockpit.')

@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
        .smooth-page { padding: 150px 5% 100px; background: linear-gradient(180deg, #ecfeff 0%, #fff 48%, #f8fafc 100%); }
    @endif
    .smooth-ui { min-height: @if($isMonitor) 100vh @else 620px @endif; font-family: -apple-system, BlinkMacSystemFont, 'Plus Jakarta Sans', sans-serif; color: #0f172a; background: linear-gradient(135deg, #e0f2fe 0%, #f0fdfa 45%, #ffffff 100%); position: relative; overflow: hidden; }
    .smooth-ui::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(14,165,233,.08) 0 2px, transparent 2px 34px); }
    .sr-top { position: relative; height: 38px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; background: rgba(255,255,255,.74); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(148,163,184,.22); font-size: .78rem; font-weight: 800; }
    .sr-dashboard { position: relative; padding: 28px; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; height: calc(100% - 38px); }
    .sr-hero { align-self: stretch; border-radius: 30px; padding: 28px; background: rgba(255,255,255,.82); border: 1px solid #bae6fd; box-shadow: 0 30px 80px -48px rgba(14,116,144,.5); }
    .sr-hero h2 { margin: 0 0 12px; font-size: clamp(2rem, 6vw, 4rem); line-height: .9; letter-spacing: -2px; }
    .sr-hero p { margin: 0; color: #64748b; line-height: 1.65; max-width: 560px; }
    .sr-wave { height: 160px; margin-top: 28px; border-radius: 24px; background: linear-gradient(180deg, #0ea5e9, #0891b2); position: relative; overflow: hidden; }
    .sr-wave::after { content: ''; position: absolute; left: -10%; right: -10%; bottom: 35px; height: 90px; background: rgba(255,255,255,.34); border-radius: 50%; animation: rideWave 4s ease-in-out infinite; }
    @keyframes rideWave { 0%,100% { transform: translateX(-4%) translateY(8px) rotate(-2deg); } 50% { transform: translateX(4%) translateY(-8px) rotate(2deg); } }
    .sr-meter { position: absolute; right: 28px; top: 28px; width: 190px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#10b981 0 248deg, rgba(148,163,184,.22) 248deg); }
    .sr-meter div { width: 138px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: white; text-align: center; box-shadow: inset 0 0 0 1px #e2e8f0; }
    .sr-meter strong { font-size: 2rem; line-height: 1; }
    .sr-side { display: grid; gap: 14px; }
    .sr-card { padding: 18px; border-radius: 22px; background: rgba(255,255,255,.86); border: 1px solid #bae6fd; }
    .sr-card span { display: block; color: #64748b; font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
    .sr-card strong { font-size: 1.3rem; letter-spacing: -.5px; }
    .sr-route { display: grid; gap: 10px; }
    .sr-route div { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; color: #334155; }
    @if(!$isMonitor)
        .smooth-wrap { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: center; }
        .smooth-copy h1 { font-size: clamp(3rem, 7vw, 5rem); line-height: .92; letter-spacing: -3px; margin: 0 0 20px; }
        .smooth-copy p { color: #64748b; font-size: 1.16rem; line-height: 1.75; }
        .smooth-frame { border-radius: 28px; overflow: hidden; box-shadow: 0 36px 90px -42px rgba(15,23,42,.45); border: 1px solid #bae6fd; }
        @media(max-width:900px){ .smooth-wrap{grid-template-columns:1fr;} }
    @endif
    @media(max-width:720px){ .sr-dashboard{grid-template-columns:1fr; padding:18px;} .sr-meter{position:relative; right:auto; top:auto; width:150px; margin-top:18px;} }
</style>
@endsection

@section('mac-content')
@if(!$isMonitor)
<section class="smooth-page">
    <div class="smooth-wrap">
        <div class="smooth-copy reveal">
            <span class="label">macOS Travel Health</span>
            <h1>SmoothRide gegen Reisekrankheit.</h1>
            <p>Eine ruhige, übersichtliche App für Fahrten, Bahnreisen und lange Strecken. SmoothRide kombiniert Bewegungsrhythmus, Atem-Timer, Pausenplanung und persönliche Trigger zu einem klaren Reise-Cockpit.</p>
        </div>
        <div class="smooth-frame reveal">
@endif
            <div class="smooth-ui">
                <div class="sr-top"><strong>SmoothRide</strong><span>Route aktiv · 42 min</span></div>
                <div class="sr-dashboard">
                    <div class="sr-hero">
                        <h2>Stabil bleiben.</h2>
                        <p>Sanfte Orientierungspunkte, Pausenfenster und Atemrhythmus reduzieren visuelle Unruhe während der Reise.</p>
                        <div class="sr-wave"></div>
                        <div class="sr-meter"><div><strong>69%</strong><span>ruhig</span></div></div>
                    </div>
                    <div class="sr-side">
                        <div class="sr-card"><span>Risiko</span><strong>Niedrig</strong></div>
                        <div class="sr-card"><span>Nächste Pause</span><strong>18 min</strong></div>
                        <div class="sr-card"><span>Atemrhythmus</span><strong>4-6</strong></div>
                        <div class="sr-card sr-route">
                            <span>Reiseplan</span>
                            <div><b>Start</b><em>Oberlungwitz</em></div>
                            <div><b>Kurve</b><em>reduzieren</em></div>
                            <div><b>Ziel</b><em>stabil</em></div>
                        </div>
                    </div>
                </div>
            </div>
@if(!$isMonitor)
        </div>
    </div>
</section>
@endif
@endsection