{{--
    Professional Home Dashboard - Professional Bootstrap Design
    Clean Professional Resume Builder Dashboard
    
    @author David Valera Melendez <david@valera-melendez.de>
    @created 2025-08-09
    @location Made in Germany 🇩🇪
--}}

@extends('layouts.app')

@section('title', 'Professional Resume Builder - Dashboard')
@section('page_class', 'home-page')

@section('content')
<!-- Professional Home Page - Bootstrap Design -->
<div class="home-container">
    <!-- Hero Section -->
    <section class="hero-section">
        <div class="card hero-card">
            <div class="card-body">
                <div class="hero-content">
                    <div class="hero-icon">
                        <i class="bi bi-person-badge large-icon"></i>
                    </div>
                    <h1 class="hero-title">Professional Resume Builder</h1>
                    <p class="hero-subtitle">
                        Create impressive, professional resumes with modern design and expert guidance
                    </p>
                    <p class="author-signature">
                        <strong>Created by David Valera Melendez</strong> | Made in Germany 🇩🇪
                    </p>
                    <div class="hero-actions">
                        <a href="{{ route('resume-builder.create') }}" class="btn primary-cta">
                            <i class="bi bi-pencil-square"></i>
                            Start Building Your Resume
                        </a>
                        <a href="{{ route('resume-builder.create') }}" class="btn secondary-cta">
                            <i class="bi bi-plus-circle"></i>
                            Create New Resume
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section class="features-section">
        <div class="section-header">
            <h2>Why Choose Our Resume Builder?</h2>
            <p>Professional features designed for modern job seekers</p>
        </div>
        
        <div class="row g-4 features-grid">
            <div class="col-lg-4 col-md-6">
                <div class="card feature-card h-100">
                    <div class="card-header d-flex align-items-center">
                        <div class="feature-avatar me-3">
                            <i class="bi bi-palette"></i>
                        </div>
                        <h5 class="card-title mb-0">Professional Design</h5>
                    </div>
                    <div class="card-body">
                        <p>Modern, clean templates that make a lasting impression on employers and hiring managers.</p>
                        <ul class="feature-highlights">
                            <li>
                                <i class="bi bi-check-circle check-icon"></i>
                                Clean, modern layouts
                            </li>
                            <li>
                                <i class="bi bi-check-circle check-icon"></i>
                                ATS-friendly formats
                            </li>
                            <li>
                                <i class="bi bi-check-circle check-icon"></i>
                                Professional typography
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4 col-md-6">
                <div class="card feature-card h-100">
                    <div class="card-header d-flex align-items-center">
                        <div class="feature-avatar me-3">
                            <i class="bi bi-lightning"></i>
                        </div>
                        <h5 class="card-title mb-0">Easy to Use</h5>
                    </div>
                    <div class="card-body">
                        <p>Intuitive step-by-step builder that guides you through creating your perfect resume.</p>
                        <ul class="feature-highlights">
                            <li>
                                <i class="bi bi-check-circle check-icon"></i>
                                Step-by-step guidance
                            </li>
                            <li>
                                <i class="bi bi-check-circle check-icon"></i>
                                Real-time preview
                            </li>
                            <li>
                                <i class="bi bi-check-circle check-icon"></i>
                                Smart suggestions
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            
            <div class="col-lg-4 col-md-6">
                <div class="card feature-card h-100">
                    <div class="card-header d-flex align-items-center">
                        <div class="feature-avatar me-3">
                            <i class="bi bi-download"></i>
                        </div>
                        <h5 class="card-title mb-0">Export Options</h5>
                    </div>
                    <div class="card-body">
                        <p>Download your resume in multiple formats, optimized for different use cases.</p>
                        <ul class="feature-highlights">
                            <li>
                                <i class="bi bi-check-circle check-icon"></i>
                                PDF export
                            </li>
                            <li>
                                <i class="bi bi-check-circle check-icon"></i>
                                Print-ready format
                            </li>
                            <li>
                                <i class="bi bi-check-circle check-icon"></i>
                                Mobile optimized
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Technology Stack Section -->
    <section class="tech-section">
        <div class="section-header">
            <h2>Built with Modern Technology</h2>
            <p>Powered by enterprise-grade tools and frameworks</p>
        </div>
        
        <div class="tech-stack">
            <div class="tech-item">
                <i class="bi bi-code-slash"></i>
                <span>Laravel 10</span>
            </div>
            <div class="tech-item">
                <i class="bi bi-bootstrap"></i>
                <span>Bootstrap 5</span>
            </div>
            <div class="tech-item">
                <i class="bi bi-palette2"></i>
                <span>SCSS</span>
            </div>
            <div class="tech-item">
                <i class="bi bi-phone"></i>
                <span>Responsive</span>
            </div>
            <div class="tech-item">
                <i class="bi bi-speedometer2"></i>
                <span>Fast</span>
            </div>
        </div>
        <p class="tech-description">
            This resume builder is built with Laravel 10, Bootstrap 5, and modern SCSS, 
            ensuring a professional, responsive, and user-friendly experience across all devices.
        </p>
    </section>
</div>

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Add smooth scrolling and animations
        const cards = document.querySelectorAll('.feature-card');
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('animate-fade-in');
                }
            });
        });
        
        cards.forEach(card => {
            observer.observe(card);
        });
    });
</script>
@endpush
@endsection