@extends('layouts.app')

@section('content')
    {{-- Render sections dynamically based on database order --}}
    @foreach($pageSections as $section)
        @if($section->section_key === 'hero')
            {{-- Modern Hero Section with Mesh Gradient --}}
            <header id="home" class="hero-section">
                <div class="bg-mesh">
                    <div class="mesh-circle-1"></div>
                    <div class="mesh-circle-2"></div>
                </div>
                <div class="container hero-content">
                    <h1 data-aos="fade-up">{{ $section->title ?? $settings['hero_title'] ?? 'Innovating Your Digital Future' }}</h1>
                    <p class="lead" data-aos="fade-up" data-aos-delay="200">{{ $section->description ?? $settings['hero_subtitle'] ?? 'We build scalable, secure, and high-performance software solutions tailored to your business needs.' }}</p>
                    <div class="d-flex justify-content-center gap-3 flex-wrap" data-aos="fade-up" data-aos-delay="400">
                        <a href="{{ $settings['hero_btn_1_link'] ?? '#services' }}" class="btn btn-primary px-5">{{ $settings['hero_btn_1_text'] ?? 'Our Services' }}</a>
                        <a href="{{ $settings['hero_btn_2_link'] ?? '#portfolio' }}" class="btn btn-outline-light px-5">{{ $settings['hero_btn_2_text'] ?? 'View Work' }}</a>
                    </div>
                </div>
            </header>

        @elseif($section->section_key === 'about')
            {{-- Minimalist About Section --}}
            <section id="about">
                <div class="container">
                    <div class="row align-items-center g-5">
                        <div class="col-lg-6" data-aos="fade-right">
                            <div class="position-relative">
                                <img src="{{ $settings['about_image'] ?? 'https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&q=80' }}" alt="About Us" class="img-fluid rounded-5 shadow-lg">
                                <div class="position-absolute bottom-0 end-0 bg-primary p-4 rounded-5 m-n3 shadow-lg d-none d-md-block">
                                    <h2 class="text-white mb-0 h1 fw-bold">10+</h2>
                                    <p class="text-white-50 mb-0">Years Excellence</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6 ps-lg-5" data-aos="fade-left">
                            <h6 class="text-primary text-uppercase fw-bold ls-2 mb-3">
                                <i class="fa-solid fa-circle-nodes me-2"></i>Who We Are
                            </h6>
                            <h2 class="display-5 fw-bold mb-4">{{ $section->title ?? 'Crafting Digital Excellence' }}</h2>
                            <p class="text-muted mb-4 lead">{{ $section->description ?? ($settings['site_name'] ?? 'TechNova') . ' is a premier software development company dedicated to transforming ideas into powerful digital reality.' }}</p>
                            <p class="text-muted mb-5">{{ $settings['about_secondary_description'] ?? 'Founded in 2015, we have helped hundreds of businesses streamline their operations and engage their customers through cutting-edge technology.' }}</p>

                            <div class="row g-4 mb-5">
                                <div class="col-sm-6">
                                    <div class="modern-card p-4">
                                        <i class="fa-solid fa-microchip text-primary mb-3"></i>
                                        <h5 class="mb-2">Advanced Tech</h5>
                                        <p class="text-muted small mb-0">Utilizing the most stable and innovative tech stacks.</p>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="modern-card p-4">
                                        <i class="fa-solid fa-shield-halved text-primary mb-3"></i>
                                        <h5 class="mb-2">Secure by Design</h5>
                                        <p class="text-muted small mb-0">Military-grade security embedded from day one.</p>
                                    </div>
                                </div>
                            </div>
                            <a href="#contact" class="btn btn-outline-light px-4">Contact Our Strategists</a>
                        </div>
                    </div>
                </div>
            </section>

        @elseif($section->section_key === 'services')
            {{-- Services Section with Bento Grid --}}
            <section id="services" class="bg-dark-accent">
                <div class="container">
                    <div class="section-title" data-aos="fade-up">
                        <h2>{{ $section->title ?? 'Our Services' }}</h2>
                        <p>{{ $section->description ?? 'Empowering your enterprise with state-of-the-art solutions.' }}</p>
                    </div>

                    <div class="services-grid">
                        @foreach($services as $index => $service)
                            <div class="service-card" data-aos="fade-up" data-aos-delay="{{ $index * 100 }}">
                                <div class="service-icon">
                                    <i class="{{ str_replace('fas', 'fa-solid', $service->icon) }}"></i>
                                </div>
                                <h3 class="h4 mb-3">{{ $service->title }}</h3>
                                <p class="text-muted mb-4">{{ $service->description }}</p>
                            </div>
                        @endforeach
                    </div>
                </div>
            </section>

        @elseif($section->section_key === 'portfolio')
            {{-- Portfolio Section --}}
            <section id="portfolio">
                <div class="container">
                    <div class="section-title" data-aos="fade-up">
                        <h2>{{ $section->title ?? 'Global Impact' }}</h2>
                        <p>{{ $section->description ?? 'Explore our portfolio of industry-disrupting projects.' }}</p>
                    </div>
                    <div class="row g-4">
                        @foreach($projects as $index => $project)
                        <div class="col-md-6 col-lg-4" data-aos="fade-up" data-aos-delay="{{ $index * 100 }}">
                            <div class="portfolio-card position-relative shadow-sm"
                                 data-project-id="{{ $project->id }}"
                                 data-project-title="{{ $project->title }}"
                                 data-project-category="{{ $project->category }}"
                                 data-project-description="{{ $project->description ?? 'No description available.' }}"
                                 data-project-image="{{ $project->image_url }}">
                                <img src="{{ $project->image_url }}" class="img-fluid" alt="{{ $project->title }}">
                                <div class="portfolio-details">
                                    <span class="badge bg-primary mb-2">{{ $project->category }}</span>
                                    <h4 class="text-white mb-3">{{ $project->title }}</h4>
                                    <button class="btn btn-outline-light btn-sm view-project-btn"
                                            data-project-id="{{ $project->id }}"
                                            data-project-title="{{ $project->title }}"
                                            data-project-category="{{ $project->category }}"
                                            data-project-description="{{ $project->description ?? 'No description available.' }}"
                                            data-project-image="{{ $project->image_url }}">
                                        View Details
                                    </button>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </section>

        @elseif($section->section_key === 'team')
            {{-- Team Section --}}
            <section id="team" class="bg-dark-accent">
                <div class="container">
                    <div class="section-title" data-aos="fade-up">
                        <h2>{{ $section->title ?? 'The Collective' }}</h2>
                        <p>{{ $section->description ?? 'Visionary minds building tomorrow, today.' }}</p>
                    </div>
                    <div class="row g-4">
                        @foreach($teamMembers as $index => $member)
                        <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="{{ $index * 100 }}">
                            <div class="modern-card text-center p-5">
                                <div class="member-img mb-4 position-relative overflow-hidden rounded-circle mx-auto" style="width: 140px; height: 140px;">
                                    <img src="{{ $member->image_url }}" class="img-fluid w-100 h-100 object-fit-cover" alt="{{ $member->name }}">
                                </div>
                                <h5 class="mb-1">{{ $member->name }}</h5>
                                <p class="text-primary small fw-bold mb-3">{{ $member->role }}</p>
                                <div class="social-links d-flex justify-content-center gap-3">
                                    @if(isset($member->social_links['twitter']))
                                    <a href="{{ $member->social_links['twitter'] }}" class="text-muted hover-white"><i class="fab fa-twitter"></i></a>
                                    @endif
                                    @if(isset($member->social_links['linkedin']))
                                    <a href="{{ $member->social_links['linkedin'] }}" class="text-muted hover-white"><i class="fab fa-linkedin-in"></i></a>
                                    @endif
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </section>

        @elseif($section->section_key === 'testimonials')
            {{-- Modern Testimonials --}}
            <section id="testimonials">
                <div class="container">
                    <div class="section-title" data-aos="fade-up">
                        <h2>{{ $section->title ?? 'Client Voices' }}</h2>
                    </div>
                    <div id="testimonialCarousel" class="carousel slide" data-bs-ride="carousel">
                        <div class="carousel-inner">
                            @foreach($testimonials as $index => $testimonial)
                            <div class="carousel-item {{ $index == 0 ? 'active' : '' }}">
                                <div class="row justify-content-center">
                                    <div class="col-lg-8">
                                        <div class="modern-card testimonial-card p-5 text-center" data-aos="zoom-in">
                                            <div class="testimonial-icon mb-4 mx-auto d-flex align-items-center justify-content-center">
                                                <i class="fas fa-quote-left"></i>
                                            </div>
                                            <p class="lead fw-medium mb-5 px-lg-5">"{{ $testimonial->quote }}"</p>
                                            <div class="d-flex align-items-center justify-content-center">
                                                <img src="{{ $testimonial->image_url }}" class="rounded-circle me-3 shadow testimonial-img" alt="{{ $testimonial->name }}" width="60">
                                                <div class="text-start">
                                                    <h5 class="mb-0">{{ $testimonial->name }}</h5>
                                                    <p class="text-muted small mb-0">{{ $testimonial->role }}, {{ $testimonial->company }}</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        <div class="carousel-indicators position-relative mt-5">
                            @foreach($testimonials as $index => $testimonial)
                                <button type="button" data-bs-target="#testimonialCarousel" data-bs-slide-to="{{ $index }}" class="{{ $index == 0 ? 'active' : '' }}" aria-current="true" aria-label="Slide {{ $index + 1 }}"></button>
                            @endforeach
                        </div>
                    </div>
                </div>
            </section>

        @elseif($section->section_key === 'contact')
            {{-- Contact Section --}}
            <section id="contact" class="bg-dark-accent">
                <div class="container">
                    <div class="row g-5">
                        <div class="col-lg-5" data-aos="fade-right">
                            <h6 class="text-primary text-uppercase fw-bold ls-2 mb-3">Contact Us</h6>
                            <h2 class="display-5 fw-bold mb-4">{{ $section->title ?? 'Let\'s Start a Conversation' }}</h2>
                            <p class="text-muted mb-5">{{ $section->description ?? 'Ready to elevate your digital presence? Reach out to our team.' }}</p>

                            <div class="contact-info">
                                <div class="d-flex mb-4">
                                    <div class="icon-box bg-primary text-white rounded-circle me-4 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; flex-shrink: 0;">
                                        <i class="fas fa-map-marker-alt"></i>
                                    </div>
                                    <div>
                                        <h5 class="mb-1">Headquarters</h5>
                                        <p class="text-muted mb-0">{{ $settings['address'] ?? '123 Innovation Drive, Tech Valley, CA 94043' }}</p>
                                    </div>
                                </div>
                                <div class="d-flex mb-4">
                                    <div class="icon-box bg-primary text-white rounded-circle me-4 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px; flex-shrink: 0;">
                                        <i class="fas fa-envelope"></i>
                                    </div>
                                    <div>
                                        <h5 class="mb-1">Email Strategy</h5>
                                        <p class="text-muted mb-0">{{ $settings['contact_email'] ?? 'hello@technova.com' }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-7" data-aos="fade-left">
                            <div class="modern-card p-5">
                                <form id="contact-form" action="{{ route('contact.submit') }}" method="POST">
                                    @csrf
                                    <div class="row g-4">
                                        <div class="col-md-6">
                                            <label class="form-label small text-muted">Your Name</label>
                                            <input type="text" name="name" class="form-control glass-input" placeholder="John Doe" required>
                                        </div>
                                        <div class="col-md-6">
                                            <label class="form-label small text-muted">Your Email</label>
                                            <input type="email" name="email" class="form-control glass-input" placeholder="john@example.com" required>
                                        </div>
                                        <div class="col-12">
                                            <label class="form-label small text-muted">Subject</label>
                                            <input type="text" name="subject" class="form-control glass-input" placeholder="Project Inquiry" required>
                                        </div>
                                        <div class="col-12">
                                            <label class="form-label small text-muted">Message</label>
                                            <textarea name="message" class="form-control glass-input" rows="5" placeholder="Tell us about your project..." required></textarea>
                                        </div>
                                        <div class="col-12">
                                            <button type="submit" class="btn btn-primary w-100 py-3">Dispatch Message</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        @endif
    @endforeach

    <!-- Project Details Modal -->
    <div class="modal fade" id="projectModal" tabindex="-1" aria-labelledby="projectModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl modal-dialog-centered">
            <div class="modal-content modern-modal border-0 shadow-2xl">
                <div class="modal-header border-0 pb-0">
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4 p-md-5 pt-0">
                    <div class="row g-5 align-items-center">
                        <div class="col-lg-7">
                            <div class="modal-image-wrapper p-2 rounded-4 bg-dark-accent border border-white border-opacity-10 shadow-lg">
                                <img id="modal-project-image" src="" alt="Project Image" class="img-fluid rounded-3">
                            </div>
                        </div>
                        <div class="col-lg-5">
                            <div class="ps-lg-4">
                                <div class="mb-4">
                                    <span class="badge bg-primary text-white px-3 py-2 rounded-pill font-monospace text-uppercase ls-1" style="font-size: 0.7rem;">
                                        <i class="fa-solid fa-tag me-2"></i><span id="modal-project-category"></span>
                                    </span>
                                </div>
                                <h2 id="modal-project-title" class="display-5 fw-bold text-white mb-4"></h2>
                                <div class="mb-5">
                                    <h6 class="text-primary text-uppercase fw-bold ls-2 mb-3">Project Narrative</h6>
                                    <p id="modal-project-description" class="text-muted lead" style="line-height: 1.8;"></p>
                                </div>
                                <div class="d-flex gap-3">
                                    <button type="button" class="btn btn-primary px-5 py-3" data-bs-dismiss="modal">Close Brief</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection