@extends('layouts.home_page.master')

@section('content')
    <style>
        :root {
            --primary-color: {{ $settings['theme_primary_color'] ?? '#56cc99' }};
            --secondary-color: {{ $settings['theme_secondary_color'] ?? '#215679' }};
            --secondary-color1: {{ $settings['theme_secondary_color_1'] ?? '#38a3a5' }};
            --primary-background-color: {{ $settings['theme_primary_background_color'] ?? '#f2f5f7' }};
            --text--secondary-color: {{ $settings['theme_text_secondary_color'] ?? '#5c788c' }};
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', system-ui, -apple-system, 'Inter', sans-serif;
            background: var(--primary-background-color);
            color: #1e293b;
            line-height: 1.5;
        }

        /* Modern Reset */
        .btn-primary-custom {
            background: var(--primary-color);
            border: none;
            padding: 0.75rem 1.8rem;
            border-radius: 40px;
            font-weight: 600;
            color: white;
            transition: all 0.2s ease;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        }
        .btn-primary-custom:hover {
            background: var(--secondary-color);
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.1);
        }
        .btn-outline-custom {
            background: transparent;
            border: 1.5px solid var(--primary-color);
            padding: 0.75rem 1.8rem;
            border-radius: 40px;
            font-weight: 600;
            color: var(--primary-color);
        }
        .btn-outline-custom:hover {
            background: var(--primary-color);
            color: white;
        }
        .section-badge {
            display: inline-block;
            background: rgba(86, 204, 153, 0.15);
            color: var(--primary-color);
            padding: 0.3rem 1rem;
            border-radius: 30px;
            font-size: 0.8rem;
            font-weight: 600;
            letter-spacing: 0.5px;
            margin-bottom: 1rem;
        }
        .section-title {
            font-size: 2.2rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: #0f172a;
        }
        .section-subtitle {
            color: var(--text--secondary-color);
            max-width: 700px;
            margin-bottom: 2.5rem;
            font-size: 1.1rem;
        }

        /* Modern Navbar */
        .navbar-modern {
            background: rgba(255,255,255,0.92);
            backdrop-filter: blur(12px);
            box-shadow: 0 2px 15px rgba(0,0,0,0.03);
            padding: 0.8rem 0;
        }
        .nav-link {
            font-weight: 500;
            color: #1e293b !important;
            margin: 0 0.5rem;
            transition: 0.2s;
        }
        .nav-link:hover {
            color: var(--primary-color) !important;
        }

        /* Hero – No Image, Pure Text & CTA */
        .hero-section {
            padding: 6rem 0 5rem;
            background: linear-gradient(135deg, #ffffff 0%, var(--primary-background-color) 100%);
            text-align: center;
        }
        .hero-badge {
            background: rgba(86, 204, 153, 0.12);
            color: var(--primary-color);
            display: inline-block;
            padding: 0.3rem 1.2rem;
            border-radius: 40px;
            font-size: 0.85rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
        }
        .hero-title {
            font-size: 3.3rem;
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: 1.2rem;
            color: #0f172a;
        }
        .hero-desc {
            font-size: 1.2rem;
            color: var(--text--secondary-color);
            max-width: 700px;
            margin: 0 auto 2rem;
        }
        .hero-stats {
            display: flex;
            justify-content: center;
            gap: 3rem;
            margin-top: 3rem;
            flex-wrap: wrap;
        }
        .stat-item {
            text-align: center;
        }
        .stat-number {
            font-size: 2rem;
            font-weight: 800;
            color: var(--primary-color);
        }

        /* Feature Cards (No Images, Icon only) */
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }
        .feature-card {
            background: white;
            border-radius: 1.5rem;
            padding: 1.8rem;
            text-align: center;
            transition: all 0.25s ease;
            box-shadow: 0 5px 20px rgba(0,0,0,0.02);
            border: 1px solid rgba(0,0,0,0.03);
        }
        .feature-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 30px -12px rgba(0,0,0,0.1);
            border-color: var(--primary-color);
        }
        .feature-icon {
            font-size: 2.6rem;
            color: var(--primary-color);
            margin-bottom: 1rem;
        }
        .feature-card h4 {
            font-size: 1.3rem;
            font-weight: 600;
            margin-bottom: 0.8rem;
        }
        .feature-card p {
            color: var(--text--secondary-color);
            font-size: 0.9rem;
        }

        /* Info Sections (No Images) */
        .info-block {
            padding: 4rem 0;
        }
        .info-title {
            font-size: 2rem;
            font-weight: 700;
            margin-bottom: 1rem;
        }
        .info-list {
            list-style: none;
            padding-left: 0;
        }
        .info-list li {
            margin-bottom: 0.8rem;
            display: flex;
            align-items: center;
            gap: 0.6rem;
        }
        .info-list i {
            color: var(--primary-color);
            font-size: 1.2rem;
        }

        /* Pricing Cards */
        .pricing-card {
            background: white;
            border-radius: 1.5rem;
            padding: 2rem;
            height: 100%;
            transition: 0.2s;
            border: 1px solid #eef2ff;
        }
        .pricing-card.highlight {
            border: 2px solid var(--primary-color);
            position: relative;
            transform: scale(1.02);
            background: #ffffff;
        }
        .pricing-badge {
            background: var(--primary-color);
            color: white;
            padding: 0.2rem 1rem;
            border-radius: 30px;
            font-size: 0.7rem;
            font-weight: 700;
            position: absolute;
            top: -12px;
            right: 1rem;
        }
        .price {
            font-size: 2.2rem;
            font-weight: 800;
            color: #0f172a;
        }

        /* FAQ Accordion */
        .accordion-modern .accordion-item {
            border: none;
            background: white;
            margin-bottom: 1rem;
            border-radius: 1rem !important;
            overflow: hidden;
        }
        .accordion-modern .accordion-button {
            background: white;
            font-weight: 600;
            padding: 1.2rem;
        }
        .accordion-modern .accordion-button:not(.collapsed) {
            background: rgba(86, 204, 153, 0.08);
            color: var(--primary-color);
        }

        /* Contact Form */
        .contact-card {
            background: white;
            border-radius: 1.5rem;
            padding: 2rem;
            box-shadow: 0 10px 25px -5px rgba(0,0,0,0.05);
        }
        .contact-info {
            background: var(--primary-background-color);
            border-radius: 1.5rem;
            padding: 2rem;
            height: 100%;
        }

        /* Footer */
        .footer-modern {
            background: #0f172a;
            color: #94a3b8;
            padding: 3rem 0 2rem;
            margin-top: 4rem;
        }
        @media (max-width: 768px) {
            .hero-title { font-size: 2.2rem; }
            .section-title { font-size: 1.8rem; }
        }
    </style>

    <script src="{{ asset('assets/home_page/js/jquery-1-12-4.min.js') }}"></script>

    <!-- ==================== MODERN NAVBAR (NO CHANGES IN LOGIC) ==================== -->
    <nav class="navbar navbar-expand-lg navbar-modern fixed-top">
        <div class="container">
            <a class="navbar-brand fw-bold" href="{{ url('/') }}">
                <img src="{{ $settings['horizontal_logo'] ?? asset('assets/landing_page_images/Logo1.svg') }}" height="38" alt="Logo">
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="mainNav">
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item"><a class="nav-link" href="#home">{{ __('home') }}</a></li>
                    <li class="nav-item"><a class="nav-link" href="#features">{{ __('features') }}</a></li>
                    <li class="nav-item"><a class="nav-link" href="#about-us">{{ __('about_us') }}</a></li>
                    <li class="nav-item"><a class="nav-link" href="#pricing">{{ __('pricing') }}</a></li>
                    @if(count($faqs))<li class="nav-item"><a class="nav-link" href="#faq">{{ __('faqs') }}</a></li>@endif
                    <li class="nav-item"><a class="nav-link" href="#contact-us">{{ __('contact') }}</a></li>
                    @if(count($guidances))
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">{{ __('guidance') }}</a>
                        <ul class="dropdown-menu">
                            @foreach($guidances as $guidance)<li><a class="dropdown-item" href="{{ $guidance->link }}">{{ $guidance->name }}</a></li>@endforeach
                        </ul>
                    </li>
                    @endif
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">{{ __('language') }}</a>
                        <ul class="dropdown-menu">
                            @foreach($languages as $lang)<li><a class="dropdown-item" href="{{ url('set-language') . '/' . $lang->code }}">{{ $lang->name }}</a></li>@endforeach
                        </ul>
                    </li>
                </ul>
                <div class="d-flex gap-2">
                    <button class="btn btn-outline-custom redirect-login">{{ __('login') }}</button>
                    <button class="btn btn-primary-custom" data-bs-toggle="modal" data-bs-target="#staticBackdrop">{{ __('start_trial') }}</button>
                </div>
            </div>
        </div>
    </nav>

    <!-- ==================== HERO SECTION – NO IMAGES ==================== -->
    <section class="hero-section" id="home">
        <div class="container">
            <div class="hero-badge">{{ $settings['system_name'] ?? 'eSchool SaaS' }}</div>
            <h1 class="hero-title">{{ $settings['tag_line'] ?? 'Smart School Management, Effortless Excellence' }}</h1>
            <p class="hero-desc">{{ $settings['hero_description'] ?? 'All-in-one platform for schools – manage students, staff, fees, exams, and more. No image clutter, just pure efficiency.' }}</p>
            <div class="d-flex gap-3 justify-content-center flex-wrap">
                <button class="btn btn-primary-custom" data-bs-toggle="modal" data-bs-target="#staticBackdrop">{{ __('register_your_school') }}</button>
                @if($isDemoSchool == 1)<a href="{{ $demoSchoolUrl ?? url('/') }}" target="_blank" class="btn btn-outline-custom">{{ __('demo_school') }}</a>@endif
            </div>

            @if($settings['display_counters'] ?? '1')
            <div class="hero-stats">
                <div class="stat-item"><div class="stat-number">{{ $counter['school'] ?? 0 }}+</div><div>{{ __('schools') }}</div></div>
                <div class="stat-item"><div class="stat-number">{{ $counter['teacher'] ?? 0 }}+</div><div>{{ __('teachers') }}</div></div>
                <div class="stat-item"><div class="stat-number">{{ $counter['student'] ?? 0 }}+</div><div>{{ __('students') }}</div></div>
            </div>
            @endif
        </div>
    </section>

    <!-- ==================== FEATURES GRID (ICON ONLY, NO IMAGES) ==================== -->
    <section class="container py-5" id="features">
        <div class="text-center">
            <span class="section-badge">{{ __('explore_our_top_features') }}</span>
            <h2 class="section-title">Everything you need to run your school</h2>
            <p class="section-subtitle">Powerful, integrated, and incredibly easy to use</p>
        </div>
        <div class="feature-grid">
            @foreach($features as $feature)
            <div class="feature-card">
                <div class="feature-icon"><i class="fas fa-graduation-cap"></i></div>
                <h4>{{ __($feature->name) }}</h4>
                <p>Powerful {{ __($feature->name) }} module with full automation.</p>
            </div>
            @endforeach
        </div>
        <div class="text-center mt-4">
            <button class="btn btn-outline-custom view-more-feature" value="1">{{ __('view_more_features') }}</button>
        </div>
    </section>

    <!-- ==================== DYNAMIC FEATURE SECTIONS (NO IMAGES, TEXT & ICONS) ==================== -->
    @foreach($featureSections as $key => $section)
    <section class="info-block" style="background: {{ $key % 2 == 0 ? 'white' : 'var(--primary-background-color)' }}">
        <div class="container">
            <div class="row align-items-center g-5">
                <div class="col-lg-6 {{ ($key+1) % 2 == 0 ? 'order-lg-2' : '' }}">
                    <span class="section-badge">{{ $section->title }}</span>
                    <h2 class="info-title">{{ $section->heading }}</h2>
                    <div class="mt-4">
                        @foreach($section->feature_section_list as $idx => $item)
                        <div class="mb-4 pb-2 border-bottom">
                            <div class="d-flex gap-3 align-items-start">
                                <i class="fas fa-check-circle fs-4" style="color: var(--primary-color);"></i>
                                <div>
                                    <h5>{{ $item->feature }}</h5>
                                    <p class="text-muted">{{ $item->description }}</p>
                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
                <div class="col-lg-6 {{ ($key+1) % 2 == 0 ? 'order-lg-1' : '' }}">
                    <div class="bg-white p-5 rounded-4 shadow-sm text-center">
                        <i class="fas fa-chalkboard-user fs-1" style="color: var(--primary-color);"></i>
                        <h4 class="mt-3">Seamless Experience</h4>
                        <p class="text-muted">{{ $section->heading }} – fully integrated into your daily workflow.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endforeach

    <!-- ==================== ABOUT US (NO IMAGES) ==================== -->
    <section class="container py-5" id="about-us">
        <div class="row align-items-center g-5">
            <div class="col-lg-6">
                <span class="section-badge">{{ $settings['about_us_title'] ?? 'Why choose us' }}</span>
                <h2 class="section-title">{{ $settings['about_us_heading'] ?? 'We simplify school administration' }}</h2>
                <p class="text-muted">{{ $settings['about_us_description'] ?? 'Our platform reduces paperwork, saves time, and connects all stakeholders.' }}</p>
                <ul class="info-list">
                    @foreach($about_us_lists as $point)
                    <li><i class="fas fa-check-circle"></i> {{ $point }}</li>
                    @endforeach
                </ul>
            </div>
            <div class="col-lg-6">
                <div class="bg-white p-5 rounded-4 shadow-sm">
                    <i class="fas fa-quote-left fs-1" style="color: var(--primary-color); opacity: 0.5;"></i>
                    <p class="mt-3 fst-italic">"A complete transformation for our school. No more manual work."</p>
                    <hr>
                    <div class="d-flex align-items-center gap-3">
                        <i class="fas fa-user-tie fs-3"></i>
                        <div><strong>Principal, Smart School</strong><br>Verified Customer</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- ==================== SCHOOL LOGOS CAROUSEL (LOGO IMAGES ONLY) ==================== -->
    @if($settings['display_school_logos'] ?? '1')
    <section class="container py-4">
        <div class="owl-carousel owl-theme school-logo-owl-carousel">
            @foreach($allSchools as $school)
            <div class="item"><div class="card p-3 border-0 shadow-sm text-center"><img src="{{ $school->logo }}" style="width: 70px; height: 70px; object-fit: cover; border-radius: 50%; margin:0 auto;" onerror="onErrorImage(event)"><h6 class="mt-2 small">{{ Str::limit($school->name, 20) }}</h6></div></div>
            @endforeach
        </div>
    </section>
    @endif

    <!-- ==================== PRICING ==================== -->
    <section class="container py-5" id="pricing">
        <div class="text-center">
            <span class="section-badge">{{ __('flexible_pricing_packages') }}</span>
            <h2 class="section-title">Simple, transparent pricing</h2>
            <p class="section-subtitle">No hidden fees. Upgrade or downgrade anytime.</p>
        </div>
        <div class="row g-4">
            @foreach($packages as $package)
            <div class="col-md-6 col-lg-4">
                <div class="pricing-card {{ $package->highlight ? 'highlight' : '' }}">
                    @if($package->highlight)<div class="pricing-badge">Popular</div>@endif
                    <h3 class="fw-bold">{{ __($package->name) }}</h3>
                    <div class="price mt-2">
                        @if($package->is_trial == 1) Free
                        @elseif($package->type == 0) {{ $settings['currency_symbol'] ?? '$' }}{{ number_format($package->charges, 2) }}
                        @else {{ $settings['currency_symbol'] ?? '$' }}{{ number_format($package->student_charge, 2) }}/student
                        @endif
                    </div>
                    <p class="text-muted">{{ $package->days }} {{ __('days') }}</p>
                    <hr>
                    <ul class="list-unstyled">
                        @foreach($features as $feature)
                        <li class="mb-2"><i class="fas {{ in_array($feature->id, $package->package_feature->pluck('feature_id')->toArray()) ? 'fa-check text-success' : 'fa-times text-muted' }} me-2"></i> {{ __($feature->name) }}</li>
                        @endforeach
                    </ul>
                    <button class="btn btn-primary-custom w-100 mt-3" data-bs-toggle="modal" data-bs-target="#staticBackdrop">{{ __('get_started') }}</button>
                </div>
            </div>
            @endforeach
        </div>
    </section>

    <!-- ==================== CUSTOM PACKAGE ==================== -->
    @if(isset($settings['custom_package_status']) && $settings['custom_package_status'])
    <section class="container py-4">
        <div class="bg-light rounded-4 p-5 text-center border">
            <i class="fas fa-rocket fs-1" style="color: var(--primary-color);"></i>
            <h3 class="mt-2">{{ __('custom_package') }}</h3>
            <p>{{ $settings['custom_package_description'] ?? 'Need a tailored solution? Contact us for a custom plan.' }}</p>
            <a href="#contact-us" class="btn btn-primary-custom">{{ __('get_in_touch') }}</a>
        </div>
    </section>
    @endif

    <!-- ==================== FAQ ==================== -->
    @if(count($faqs))
    <section class="container py-5" id="faq">
        <div class="text-center"><span class="section-badge">{{ __('frequently_asked_questions') }}</span><h2 class="section-title">Got questions? We have answers</h2></div>
        <div class="row justify-content-center"><div class="col-lg-8"><div class="accordion accordion-modern" id="faqAccordion">
            @foreach($faqs as $faq)
            <div class="accordion-item"><h2 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq{{ $faq->id }}">{{ $faq->title }}</button></h2><div id="faq{{ $faq->id }}" class="accordion-collapse collapse" data-bs-parent="#faqAccordion"><div class="accordion-body">{!! nl2br(e($faq->description)) !!}</div></div></div>
            @endforeach
        </div></div></div>
    </section>
    @endif

    <!-- ==================== CONTACT (NO IMAGES) ==================== -->
    <section class="container py-5" id="contact-us">
        <div class="text-center"><span class="section-badge">{{ __('lets_get_in_touch') }}</span><h2 class="section-title">Ready to transform your school?</h2><p class="section-subtitle">Talk to our team today</p></div>
        <div class="row g-5">
            <div class="col-lg-6">
                <div class="contact-card">
                    <form action="{{ url('contact') }}" method="post" class="create-form-with-captcha">
                        @csrf
                        <div class="mb-3"><input type="text" name="name" class="form-control" placeholder="{{ __('enter_your_name') }}" required></div>
                        <div class="mb-3"><input type="email" name="email" class="form-control" placeholder="{{ __('enter_your_email') }}" required></div>
                        <div class="mb-3"><textarea name="message" rows="5" class="form-control" placeholder="{{ __('send_your_message') }}" required></textarea></div>
                        @if(config('services.recaptcha.key'))<div class="mb-3"><div class="g-recaptcha" data-sitekey="{{ config('services.recaptcha.key') }}"></div></div>@endif
                        <button type="submit" class="btn btn-primary-custom w-100">{{ __('send') }}</button>
                    </form>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="contact-info">
                    <div class="d-flex gap-4 mb-4"><i class="fas fa-phone-volume fs-3" style="color: var(--primary-color);"></i><div><strong>{{ __('phone') }}</strong><br>{{ $settings['mobile'] ?? 'Not provided' }}</div></div>
                    <div class="d-flex gap-4 mb-4"><i class="fas fa-envelope fs-3" style="color: var(--primary-color);"></i><div><strong>{{ __('email') }}</strong><br>{{ $settings['mail_send_from'] ?? 'hello@eschool.com' }}</div></div>
                    <div class="d-flex gap-4"><i class="fas fa-map-marker-alt fs-3" style="color: var(--primary-color);"></i><div><strong>{{ __('location') }}</strong><br>{{ $settings['address'] ?? 'Online / Anywhere' }}</div></div>
                </div>
            </div>
        </div>
    </section>

    @include('registration_form')
@endsection

@section('script')
    <script async src="https://www.google.com/recaptcha/api.js"></script>
    <script>
        $(document).ready(function(){
            $('.school-logo-owl-carousel').owlCarousel({ loop:true, margin:20, autoplay:true, responsive:{0:{items:2},576:{items:3},768:{items:4},992:{items:5}} });
            $('.view-more-feature').click(function(){ $('.default-feature-list').slideToggle(); $(this).text($(this).text() == '{{ __("view_more_features") }}' ? '{{ __("view_less") }}' : '{{ __("view_more_features") }}'); });
        });
        @if(Session::has('success')) $.toast({ text:'{{ Session::get('success') }}', icon:'success', position:'top-right', bgColor:'#20CFB5' }); @endif
        @if(Session::has('error')) $.toast({ text:'{{ Session::get('error') }}', icon:'error', position:'top-right', bgColor:'#FE7C96' }); @endif
    </script>
@endsection