@extends('layouts.app')

@section('content')
<div style="padding-top: 120px;">
    <!-- Product Hero -->
    <section style="padding: 80px 8%; display: flex; gap: 80px; align-items: center;">
        <div style="flex: 1;">
            <a href="/windows" style="color: #64748b; text-decoration: none; font-weight: 600;"><i class="fas fa-arrow-left"></i> Zurück zur Übersicht</a>
            <h1 style="font-size: 4rem; margin-top: 20px; letter-spacing: -2px;">{{ $product['name'] }}</h1>
            <p style="font-size: 1.5rem; color: #64748b; margin: 20px 0 40px;">{{ $product['long_desc'] }}</p>
            
            <div style="background: #f8fafc; padding: 40px; border-radius: 30px; border: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: space-between;">
                <div>
                    <span style="display: block; font-size: 0.9rem; color: #64748b;">Preis für Lifetime-Lizenz</span>
                    <span style="font-size: 2.5rem; font-weight: 800;">{{ $product['price'] }}</span>
                </div>
                <a href="#" style="background: {{ $product['color'] }}; color: white; padding: 20px 50px; border-radius: 15px; text-decoration: none; font-weight: 800; font-size: 1.2rem; box-shadow: 0 10px 30px -5px {{ $product['color'] }}66;">JETZT KAUFEN</a>
            </div>
        </div>
        <div style="flex: 0.8; height: 500px; background: #0f172a; border-radius: 40px; color: white; display: flex; flex-direction: column; justify-content: center; padding: 60px;">
            <h3 style="margin-bottom: 30px; font-size: 1.5rem;">Key Features</h3>
            <ul style="list-style: none;">
                @foreach($product['features'] as $feature)
                    <li style="margin-bottom: 20px; font-size: 1.2rem; display: flex; align-items: center; gap: 15px;">
                        <i class="fas fa-check-circle" style="color: {{ $product['color'] }};"></i> {{ $feature }}
                    </li>
                @endforeach
            </ul>
        </div>
    </section>

    <!-- FAQ oder Testimonials hier einfügen... -->
</div>
@endsection