@extends('layouts.app2')

@section('title', 'ROOT ERP | الصفحة الرئيسية')

@section('content')

<!-- Hero Image مباشرة تحت الهيدر -->
<section class="hero-full" style="margin:0; padding:0;">
  <img src="{{ asset('img/hero_image.png') }}" alt="ROOT ERP Hero Image" style="width:100%; display:block; margin:0; padding:0;">
</section>

<!-- Hero Text Section مع أزرار الأسعار وابدأ هسه -->
<section class="container hero-content">
  <div class="hero-text">
    <h1 id="heroTitle">@lang('home.heroTitle')</h1>
    <p id="heroDesc">@lang('home.heroDesc')</p>
    <div class="hero-sub" id="heroSub">@lang('home.heroSub')</div>
    <div style="margin-top:20px;">
      <a href="/pricing" class="btn btn-outline" id="priceBtn" style="color: var(--brand-blue); border-color: var(--brand-blue);">@lang('home.priceBtn')</a>
      <a class="btn btn-primary" href="" id="startBtn">@lang('home.startBtn')</a>
    </div>
  </div>
  <div class="hero-img">
    <img src="{{ asset('img/smart-invest.jpg') }}" alt="صورة توضيحية">
  </div>
</section>

<!-- Features Section -->
<section id="features" style="background:#F7F9FF;">
    <div class="container">
        <h2 class="section-title" id="featureTitle">@lang('home.featureTitle')</h2>
        <p class="section-sub" id="featureSub">@lang('home.featureSub')</p>
        <div class="grid">
            <div class="card">
                <h3 id="f1Title">@lang('home.f1Title')</h3>
                <p id="f1Text">@lang('home.f1Text')</p>
            </div>
            <div class="card">
                <h3 id="f2Title">@lang('home.f2Title')</h3>
                <p id="f2Text">@lang('home.f2Text')</p>
            </div>
            <div class="card">
                <h3 id="f3Title">@lang('home.f3Title')</h3>
                <p id="f3Text">@lang('home.f3Text')</p>
            </div>
            <div class="card">
                <h3 id="f4Title">@lang('home.f4Title')</h3>
                <p id="f4Text">@lang('home.f4Text')</p>
            </div>
        </div>
    </div>
</section>

<!-- Sections: Control, Reports, Companies -->
<section>
    <div class="container feature">
        <div class="feature-img">
            <img src="{{ asset('img/full-control.jpg') }}" alt="Control Image">
        </div>
        <div class="feature-text">
            <h3 id="controlTitle">@lang('home.controlTitle')</h3>
            <p id="controlText">@lang('home.controlText')</p>
        </div>
    </div>
</section>

<section style="background:#F7F9FF;">
    <div class="container feature">
        <div class="feature-text">
            <h3 id="reportTitle">@lang('home.reportTitle')</h3>
            <p id="reportText">@lang('home.reportText')</p>
        </div>
        <div class="feature-img">
            <img src="{{ asset('img/reports.jpg') }}" alt="Reports Image">
        </div>
    </div>
</section>

<section>
    <div class="container feature">
        <div class="feature-img">
            <img src="{{ asset('img/companies.jpg') }}" alt="Companies Image">
        </div>
        <div class="feature-text">
            <h3 id="companiesTitle">@lang('home.companiesTitle')</h3>
            <p id="companiesText">@lang('home.companiesText')</p>
        </div>
    </div>
</section>

@endsection