@extends('layouts.main')
@section('style')
<style>
    .preview-banner {
        height: 500px;
        background-size: cover;
        background-position: center;
        position: relative;
    }

    .preview-banner-content {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: white;
    }

    .product-card {
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        overflow: hidden;
        transition: all 0.3s ease;
    }

    .product-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }

    .category-card {
        position: relative;
        height: 200px;
        border-radius: 8px;
        overflow: hidden;
    }

    .category-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
    }
</style>
@endsection

@section('content')
<div id="preview-container">
    <!-- Banner Section -->
    <div class="preview-banner mb-8" style="background-image: url('{{ $template->components['banners'][0] ?? '' }}');">
        <div class="preview-banner-content">
            <h1 class="text-4xl font-bold mb-4">{{ $template->name }}</h1>
            <p class="text-xl">Your Fashion Destination</p>
        </div>
    </div>

    <!-- Featured Products Section -->
    <div class="container mx-auto px-4 mb-8">
        <h2 class="text-2xl font-bold mb-6">Featured Products</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            @foreach($template->components['products'] as $product)
            <div class="product-card">
                <img src="{{ $product['image'] ?? '' }}" alt="{{ $product['name'] ?? '' }}" class="w-full h-48 object-cover">
                <div class="p-4">
                    <h3 class="font-semibold mb-2">{{ $product['name'] ?? '' }}</h3>
                    <p class="text-gray-600 mb-2">{{ $product['price'] ?? '' }}</p>
                    <button class="btn btn-primary w-full">Add to Cart</button>
                </div>
            </div>
            @endforeach
        </div>
    </div>

    <!-- Categories Section -->
    <div class="container mx-auto px-4 mb-8">
        <h2 class="text-2xl font-bold mb-6">Shop by Category</h2>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            @foreach($template->components['categories'] as $category)
            <div class="category-card">
                <img src="{{ $category['image'] ?? '' }}" alt="{{ $category['name'] ?? '' }}" class="w-full h-full object-cover">
                <div class="category-overlay">
                    <h3 class="text-xl font-semibold">{{ $category['name'] ?? '' }}</h3>
                </div>
            </div>
            @endforeach
        </div>
    </div>

    <!-- Footer Section -->
    <footer class="bg-gray-800 text-white py-12">
        <div class="container mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div>
                    <h4 class="text-lg font-semibold mb-4">About Us</h4>
                    <p>{{ $template->components['footer']['about'] ?? '' }}</p>
                </div>
                <div>
                    <h4 class="text-lg font-semibold mb-4">Contact Info</h4>
                    <p>Email: {{ $template->components['footer']['email'] ?? '' }}</p>
                    <p>Phone: {{ $template->components['footer']['phone'] ?? '' }}</p>
                    <p>Address: {{ $template->components['footer']['address'] ?? '' }}</p>
                </div>
                <div>
                    <h4 class="text-lg font-semibold mb-4">Follow Us</h4>
                    <div class="flex space-x-4">
                        @if($template->components['footer']['facebook'] ?? false)
                        <a href="{{ $template->components['footer']['facebook'] }}" class="hover:text-gray-300">
                            <i class="fab fa-facebook-f"></i>
                        </a>
                        @endif
                        @if($template->components['footer']['instagram'] ?? false)
                        <a href="{{ $template->components['footer']['instagram'] }}" class="hover:text-gray-300">
                            <i class="fab fa-instagram"></i>
                        </a>
                        @endif
                        @if($template->components['footer']['twitter'] ?? false)
                        <a href="{{ $template->components['footer']['twitter'] }}" class="hover:text-gray-300">
                            <i class="fab fa-twitter"></i>
                        </a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </footer>
</div>
@endsection

@section('script')
<script src="{{ asset('assets/js/website-editor.js') }}"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        let customizations = [];
        if (customizations) {
            const previewContainer = document.getElementById('preview-container');
            previewContainer.style.fontFamily = customizations.fontFamily || 'Inter';

            const buttons = document.querySelectorAll('.btn');
            buttons.forEach(button => {
                button.style.borderRadius = {
                    'rounded': '0.375rem',
                    'square': '0',
                    'pill': '9999px'
                } [customizations.buttonStyle] || '0.375rem';
            });

            const primaryElements = document.querySelectorAll('.btn-primary');
            primaryElements.forEach(element => {
                element.style.backgroundColor = customizations.themeColor || '#4f46e5';
                element.style.borderColor = customizations.themeColor || '#4f46e5';
            });
        }
    });
</script>
@endsection