@extends('layouts.app')

@section('title', 'نظام إدارة المطاعم والمقاهي - الحل الأمثل لإدارة مطعمك بكفاءة')

@section('meta')
<meta name="description" content="نظام إدارة المطاعم والمقاهي الأكثر تطوراً - حل متكامل للطلبات الذاتية، إدارة الطاولات، المحاسبة، والمخزون لتحسين كفاءة عملك وزيادة أرباحك.">
<meta name="keywords" content="نظام مطاعم, برنامج مقاهي, إدارة مطاعم, نظام محاسبة مطاعم, طلبات ذاتية, إدارة مخزون, برنامج كاشير, نظام نقاط بيع, POS">
<meta name="author" content="Coffee System">
<meta property="og:title" content="نظام إدارة المطاعم والمقاهي - الحل الأمثل لإدارة مطعمك بكفاءة">
<meta property="og:description" content="نظام إدارة المطاعم والمقاهي الأكثر تطوراً - حل متكامل للطلبات الذاتية، إدارة الطاولات، المحاسبة، والمخزون لتحسين كفاءة عملك وزيادة أرباحك.">
<meta property="og:image" content="{{ asset('images/cafe-bg.jpg') }}">
<meta property="og:url" content="{{ url('/') }}">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="نظام إدارة المطاعم والمقاهي - الحل الأمثل لإدارة مطعمك بكفاءة">
<meta name="twitter:description" content="نظام إدارة المطاعم والمقاهي الأكثر تطوراً - حل متكامل للطلبات الذاتية، إدارة الطاولات، المحاسبة، والمخزون.">
<meta name="twitter:image" content="{{ asset('images/cafe-bg.jpg') }}">
<link rel="canonical" href="{{ url('/') }}">
@endsection

@section('styles')
<style>
    .hero-section {
        background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('{{ asset('images/cafe-bg.jpg') }}') no-repeat center center;
        background-size: cover;
        color: #fff;
        padding: 100px 0;
        text-align: center;
    }
    
    .feature-icon {
        font-size: 3rem;
        margin-bottom: 1rem;
        color: #0d6efd;
    }
    
    .testimonial {
        background-color: #f8f9fa;
        border-radius: 10px;
        padding: 20px;
        margin-bottom: 20px;
    }
    
    .pricing-card {
        border: none;
        transition: transform 0.3s;
    }
    
    .pricing-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    
    .pricing-header {
        background-color: #0d6efd;
        color: white;
        padding: 20px;
        border-radius: 10px 10px 0 0;
    }
    
    .cta-section {
        background-color: #0d6efd;
        color: white;
        padding: 80px 0;
    }
    
    .section-padding {
        padding: 80px 0;
    }
    
    .benefit-card {
        height: 100%;
        transition: transform 0.3s;
    }
    
    .benefit-card:hover {
        transform: translateY(-5px);
    }
    
    .screenshot {
        border-radius: 10px;
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        transition: transform 0.3s;
    }
    
    .screenshot:hover {
        transform: scale(1.05);
    }
</style>
@endsection

@section('content')
<!-- Hero Section -->
<section class="hero-section">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 mx-auto">
                <h1 class="display-4 fw-bold mb-4">نظام إدارة المطاعم والمقاهي المتكامل</h1>
                <p class="lead mb-5">حل تقني ومحاسبي متكامل يلبي جميع احتياجات مطعمك أو مقهاك بكفاءة عالية</p>
                <div class="d-grid gap-2 d-sm-flex justify-content-sm-center">
                    <a href="#features" class="btn btn-primary btn-lg px-4 gap-3">استكشف المميزات</a>
                    <a href="#contact" class="btn btn-outline-light btn-lg px-4">تواصل معنا</a>
                    <a href="{{ route('login') }}" class="btn btn-success btn-lg px-4">تجربة البرنامج</a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Features Section -->
<section id="features" class="section-padding">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold">مميزات النظام الاحترافية</h2>
            <p class="lead text-muted">تم تصميم النظام ليوفر تجربة سلسة وفعالة لإدارة مطعمك أو مقهاك</p>
        </div>
        
        <div class="row g-4 py-5">
            @foreach($features as $feature)
            <div class="col-md-4 mb-4">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-body text-center">
                        <div class="feature-icon mb-3">
                            <i class="{{ $feature['icon'] }} fa-3x text-primary"></i>
                        </div>
                        <h4>{{ $feature['title'] }}</h4>
                        <p class="text-muted">{{ $feature['description'] }}</p>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>

<!-- Benefits Section -->
<section class="bg-light section-padding">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold">لماذا تختار نظامنا؟</h2>
            <p class="lead text-muted">مزايا تنافسية تجعل نظامنا الخيار الأمثل لمطعمك أو مقهاك</p>
        </div>
        
        <div class="row g-4">
            <div class="col-md-6">
                <div class="card benefit-card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <h4><i class="fas fa-tachometer-alt text-primary me-2"></i> تحسين الكفاءة التشغيلية</h4>
                        <p>تقليل وقت انتظار العملاء وتسريع دوران الطاولات مما يزيد من الإيرادات اليومية</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="card benefit-card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <h4><i class="fas fa-smile text-primary me-2"></i> تحسين تجربة العملاء</h4>
                        <p>تجربة طلب سلسة وسريعة تمكن العملاء من متابعة حالة طلباتهم وطلب المساعدة عند الحاجة</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="card benefit-card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <h4><i class="fas fa-hand-holding-usd text-primary me-2"></i> توفير التكاليف</h4>
                        <p>تقليل الأخطاء البشرية وتحسين إدارة المخزون مما يؤدي إلى تقليل الهدر وزيادة الأرباح</p>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="card benefit-card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <h4><i class="fas fa-chart-pie text-primary me-2"></i> قرارات مبنية على البيانات</h4>
                        <p>تحليلات وتقارير مفصلة تساعدك على فهم سلوك العملاء واتخاذ قرارات تجارية أفضل</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Statistics Section -->
<section class="section-padding bg-primary text-white">
    <div class="container">
        <div class="row text-center">
            <div class="col-md-3 mb-4">
                <div class="stat-item">
                    <h2 class="display-4 fw-bold">{{ $statistics['efficiency_increase'] }}</h2>
                    <p class="lead">زيادة في الكفاءة</p>
                </div>
            </div>
            <div class="col-md-3 mb-4">
                <div class="stat-item">
                    <h2 class="display-4 fw-bold">{{ $statistics['time_saved'] }}</h2>
                    <p class="lead">توفير في الوقت</p>
                </div>
            </div>
            <div class="col-md-3 mb-4">
                <div class="stat-item">
                    <h2 class="display-4 fw-bold">{{ $statistics['revenue_increase'] }}</h2>
                    <p class="lead">زيادة في الإيرادات</p>
                </div>
            </div>
            <div class="col-md-3 mb-4">
                <div class="stat-item">
                    <h2 class="display-4 fw-bold">{{ $statistics['customer_satisfaction'] }}</h2>
                    <p class="lead">رضا العملاء</p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Screenshots Section -->
<section class="section-padding">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold">لقطات من النظام</h2>
            <p class="lead text-muted">تصفح واجهات النظام السهلة والعملية</p>
        </div>
        
        <div class="row g-4">
            <div class="col-md-4">
                <img src="{{ asset('images/screenshot-1.jpg') }}" alt="واجهة طلبات العملاء" class="img-fluid screenshot mb-3">
                <h5 class="text-center">واجهة طلبات العملاء</h5>
            </div>
            
            <div class="col-md-4">
                <img src="{{ asset('images/screenshot-2.jpg') }}" alt="لوحة تحكم النادل" class="img-fluid screenshot mb-3">
                <h5 class="text-center">لوحة تحكم النادل</h5>
            </div>
            
            <div class="col-md-4">
                <img src="{{ asset('images/screenshot-3.jpg') }}" alt="نظام المحاسبة" class="img-fluid screenshot mb-3">
                <h5 class="text-center">نظام المحاسبة</h5>
            </div>
        </div>
    </div>
</section>

<!-- Testimonials Section -->
<section class="bg-light section-padding">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold">آراء عملائنا</h2>
            <p class="lead text-muted">ماذا يقول أصحاب المطاعم والمقاهي عن تجربتهم مع نظامنا</p>
        </div>
        
        <div class="row">
            @foreach($testimonials as $testimonial)
            <div class="col-md-4 mb-4">
                <div class="testimonial shadow-sm">
                    <div class="d-flex align-items-center mb-3">
                        <div class="flex-shrink-0">
                            <img src="{{ asset('images/' . $testimonial['image']) }}" alt="صورة العميل" class="rounded-circle" width="60">
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <h5 class="mb-0">{{ $testimonial['name'] }}</h5>
                            <p class="text-muted mb-0">{{ $testimonial['position'] }}</p>
                        </div>
                    </div>
                    <p class="mb-0">"{{ $testimonial['text'] }}"</p>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>


<!-- CTA Section -->
<section class="cta-section">
    <div class="container text-center">
        <h2 class="display-5 fw-bold mb-4">جاهز لتطوير أعمالك؟</h2>
        <p class="lead mb-5">احصل على تجربة مجانية لمدة 14 يوماً واكتشف كيف يمكن لنظامنا تحسين أداء مطعمك أو مقهاك</p>
        <a href="#contact" class="btn btn-light btn-lg px-5">ابدأ الآن</a>
    </div>
</section>

<!-- Contact Section -->
<section id="contact" class="section-padding">
    <div class="container">
        <div class="row">
            <div class="col-lg-6 mx-auto">
                <div class="card border-0 shadow">
                    <div class="card-body p-5 text-center">
                        <h2 class="text-center mb-4">تواصل معنا</h2>
                        <p class="lead mb-4">يمكنك التواصل معنا مباشرة عبر الواتساب للاستفسار عن خدماتنا أو طلب عرض سعر</p>
                        
                        <div class="d-grid gap-3">
                            <a href="https://wa.me/96894141330" target="_blank" class="btn btn-success btn-lg">
                                <i class="fab fa-whatsapp me-2"></i> تواصل معنا عبر الواتساب
                            </a>
                            <p class="text-muted mt-2">رقم الواتساب: 96894141330</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Footer Section -->
<footer class="bg-dark text-white py-5 mt-5">
    <div class="container">
        <div class="row">
            <!-- Company Info -->
            <div class="col-lg-4 mb-4">
                <h5 class="fw-bold mb-3">عن SOT</h5>
                <p>شركة مصادر التكنولوجيا هي علامة مسجلة في سلطنة عمان ، تبني مبادئ الإبتكار والتطوير المستمر، حيث تسعى جاهدة لتلبية احتياجات السوق وتقديم الحلول المبتكرة التي تساهم في نجاح عملائها.</p>
            </div>
            
            <!-- Contact Info -->
            <div class="col-lg-4 mb-4">
                <h5 class="fw-bold mb-3">معلومات الاتصال</h5>
                <p><i class="fas fa-map-marker-alt me-2"></i> مسقط - بوشر - شارع 4229 - بلوك 242 - شارع 18 نوفمبر - بناء رقم 1/1665 - الطابق الرابع - رقم المكتب 44</p>
                <p><i class="fas fa-phone me-2"></i> 0096894141330</p>
                <p><i class="fas fa-phone me-2"></i> 0096877553144</p>
                <p><i class="fas fa-envelope me-2"></i> info@sot.om</p>
                <p><i class="fas fa-envelope me-2"></i> support@sot.om</p>
            </div>
            
            <!-- Quick Links -->
            <div class="col-lg-4 mb-4">
                <h5 class="fw-bold mb-3">روابط سريعة</h5>
                <ul class="list-unstyled">
                    <li class="mb-2"><a href="#" class="text-white text-decoration-none">الرئيسية</a></li>
                    <li class="mb-2"><a href="#" class="text-white text-decoration-none">من نحن</a></li>
                    <li class="mb-2"><a href="#" class="text-white text-decoration-none">خدماتنا</a></li>
                    <li class="mb-2"><a href="#" class="text-white text-decoration-none">منتجاتنا</a></li>
                    <li class="mb-2"><a href="#" class="text-white text-decoration-none">المتجر</a></li>
                    <li class="mb-2"><a href="#" class="text-white text-decoration-none">مقالات</a></li>
                    <li class="mb-2"><a href="#" class="text-white text-decoration-none">سياسة الاسترجاع</a></li>
                    <li class="mb-2"><a href="#" class="text-white text-decoration-none">سياسة الخصوصية</a></li>
                    <li class="mb-2"><a href="#contact" class="text-white text-decoration-none">تواصل بنا</a></li>
                </ul>
            </div>
        </div>
        
        <!-- Copyright -->
        <div class="border-top border-secondary pt-4 mt-4 text-center">
            <p>&copy; {{ date('Y') }} SOT - شركة مصادر التكنولوجيا. جميع الحقوق محفوظة.</p>
        </div>
    </div>
</footer>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        // Smooth scrolling for anchor links
        $('a[href^="#"]').on('click', function(e) {
            e.preventDefault();
            
            var target = this.hash;
            var $target = $(target);
            
            $('html, body').animate({
                'scrollTop': $target.offset().top - 70
            }, 800, 'swing');
        });
    });
</script>
@endsection