@extends('frontend.layouts.app')
@section('style')
    <style>
        .long-btn.center-placeholder {
            width: 100%;
            max-width: 400px;
            height: 50px;
            display: block;
            margin: 16px auto 0 auto;
            border: 2px solid #0A5F83;
            border-radius: 25px;
            padding: 0 20px;
            font-size: 1.1em;
            background: #f9f9f9;
            box-shadow: 0 2px 8px rgba(10, 95, 131, 0.07);
            outline: none;
            transition: border-color 0.2s, box-shadow 0.2s;
            text-align: center;
        }

        .long-btn.center-placeholder:focus {
            border-color: #25c481;
            box-shadow: 0 4px 16px rgba(37, 196, 129, 0.13);
        }

        .long-btn.center-placeholder::placeholder {
            text-align: center;
            color: #888;
            opacity: 1;
            font-size: 1.1em;
        }
    </style>

    <style>
        .modal {
            display: none;
            position: fixed;
            z-index: 50;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            overflow: auto;
            padding-top: 60px;
            text-align: center;
        }

        .modal-content {
            background-color: #fff;
            margin: 5% auto;
            padding: 20px;
            border-radius: 10px;
            width: 80%;
            max-width: 600px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }

        .modal-content h3 {
            font-size: 1.5em;
            color: #333;
            margin-bottom: 20px;
        }

        .modal-content p {
            font-size: 1.1em;
            color: #555;
            margin-bottom: 20px;
        }

        .modal-content .close {
            background-color: #25c481;
            color: white;
            font-size: 1.2em;
            border: none;
            border-radius: 25px;
            padding: 10px 20px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .modal-content .close:hover {
            background-color: #1f9b6c;
        }
    </style>
@endsection
@section('content')

    <section class="hero" id="home">
        <video autoplay muted loop playsinline class="background-video">
            <source src="{{ asset('video/header_video.mp4') }}" type="video/mp4">
            Your browser does not support the video tag.
        </video>
        <div class="hero-content">

        </div>
    </section>



    {{-- <section class="hero" id="home">
        <div class="hero-content">
            <h1>
                تمكين
                <span class="typing-text">
                    </span>
                    <br />في المملكة العربية السعودية

            </h1>
            <p>
                منصة شاملة للنمو التجاري، والتجارة الإلكترونية، وتيسير التصدير،
                 والمزيد—
                مصممة للمنشآت الصغيرة والمتوسطة وروّاد الأعمال.
            </p>
            <div class="hero-buttons">
                <button class="btn-hero btn-primary-hero" onclick="location.href='/login'">
                    أنشئ حسابك
                </button>
                <button class="btn-hero btn-secondary-hero" onclick="location.href='{{ route('frontend.business_center') }}'">
                    استكشف الميزات
                </button>
            </div>
        </div>
    </section> --}}

    <section class="cta-section">
        <h1 style="color: #ffffff;">مزايا ومجالات مستهدفة</h1>
        <br>
        <p style="color: #ffffff; font-size: 1.2rem;">سيدات الأعمال</p>
        <p style="color: #ffffff; font-size: 1.2rem;">القطاع غير الربحي</p>
        <p style="color: #ffffff; font-size: 1.2rem;">الإستثمار الإجتماعي</p>
        <p style="color: #ffffff; font-size: 1.2rem;">قريباً...</p>
    </section>

    <section class="cta-section">
        <h2 id="cta-text">تعرف على مزايا همام عبر الذكاء الاصطناعي</h2>
        <div class="cta-input-group">
            <input type="text" class="long-btn center-placeholder" placeholder="اسأل ما يخطر في ذهنك؟">
        </div>
    </section>

    <section class="features" id="features">
        <h2>أهم مزايا همّام</h2>
        <div class="feature-grid">
            <div class="feature-item">
                <i class="icon fa fa-briefcase"></i>
                <h3>مركز الأعمال</h3>
                <p>تحكم في متجرك، وتتبع التحليلات، وتعاون مع منشآت أخرى في مكان واحد.</p>
            </div>
            <div class="feature-item">
                <i class="icon fa fa-calendar-check"></i>
                <h3>الفعاليات والتدريب</h3>
                <p>انضم إلى ورش عمل وفعاليات مصممة خصيصًا لتطويرك وتوسيع شبكتك.</p>
            </div>
            <div class="feature-item">
                <i class="icon fa fa-globe"></i>
                <h3>التصدير والاستثمار</h3>
                <p>انطلق عالميًا، وابحث عن المستثمرين، واستكشف آفاق نجاح جديدة لمنشأتك.</p>
            </div>
            <div class="feature-item">
                <i class="icon fa fa-people-carry"></i>
                <h3>لوحة الوظائف</h3>
                <p>ابحث عن كفاءات مميزة أو اكتشف فرصًا وظيفية جديدة تناسب طموحك.</p>
            </div>
        </div>
    </section>

    <section class="cta-banner">
        <h2>جاهز للانطلاقة؟</h2>
        <p>
            أنشئ حسابك الآن وتمتع بجميع ميزات همّام المصممة خصيصًا لأصحاب الأعمال
            والمنشآت الصغيرة والمتوسطة.
        </p>
        <button class="btn-cta" onclick="location.href='/login'">
            أنشئ حسابك
        </button>
    </section>
@endsection
@section('script')
    <script>
        window.onload = function() {
            var modal = document.getElementById('infoModal');
            var closeButton = document.getElementById('closeModal');

            modal.style.display = 'block';

            closeButton.onclick = function() {
                modal.style.display = 'none';
            }

            window.onclick = function(event) {
                if (event.target === modal) {
                    modal.style.display = 'none';
                }
            }
        }


        const messages = [
            "تعرف على مزايا همام عبر الذكاء الاصطناعي",
            "التسويق الذاتي المجاني مع همام",
        ];
        let currentMessageIndex = 0;
        let textElement = document.getElementById("cta-text");

        function typeText(text, i, callback) {
            if (i < text.length) {
                textElement.textContent += text.charAt(i);
                i++;
                setTimeout(function() {
                    typeText(text, i, callback);
                }, 100);
            } else {
                callback();
            }
        }

        function changeMessage() {
            textElement.textContent = '';
            typeText(messages[currentMessageIndex], 0, function() {
                currentMessageIndex = (currentMessageIndex + 1) % messages.length;
                setTimeout(changeMessage, 1000);
            });
        }
        changeMessage();
    </script>
@endsection