@extends('layouts.front-layout')
@section('content')
    <style>
        .container-faq {
            background-color: #0f172a;
            color: #cbd5e1;
            border-radius: 8px;
            padding: 40px;

        }

        h2 {
            color: #fff;
            margin-bottom: 20px;
        }

        .faq-question {
            font-weight: 600;
            color: #30bfac;
        }

        .faq-item {
            margin-bottom: 30px;
        }

        .faq-icon {
            color: #38bdf8;
            margin-right: 10px;
        }

        hr {
            border-color: #1e293b;
        }

     .container-faq    label {
      font-size: 0.9rem;
      margin-bottom: 5px;
      color: #e2e8f0;
    }
    .container-faq .form-control {
      background-color: #1e293b;
      border: none;
      color: #f1f5f9;
    }
    .container-faq .form-control:focus {
      background-color: #1e293b;
      box-shadow: none;
      border: 1px solid #38bdf8;
      color: #fff;
    }
    .btn-custom {
      background-color: #30bfac;
      color: #fff;
      font-weight: 500;
    }
    .btn-custom:hover {
      background-color: #28a79c;
    }
    </style>
    <div class="container mt-5 container-faq py-5">
        <h2 class="fw-bold">{{ $pageData['Faqs']['top_banner_title'] ?? '' }}</h2>
        <hr>

        <div class="row">
            <!-- Column 1 -->
            @foreach($get_faqs as  $faq)
            <div class="col-md-6">
                <div class="faq-item">
                    <p class="faq-question">
                        <i class="faq-icon fa-solid fa-question"></i>{{$faq->title ? : ''}}
                    </p>
{{--                    <p>{!! \Illuminate\Support\Str::limit(strip_tags($faq->description), 80, '...') !!}</p>--}}
                    <p>{!! $faq->description ? :'' !!}</p>

                </div>


            </div>
            @endforeach

        </div>
    </div>

    <div class="container my-5 py-5 container-faq">
        <h1 class="fs-1 fw-bold text-white">{{ $pageData['Faqs']['form_title'] ?? '' }}</h1>
        <form>
    <!-- Name -->
    <div class="mb-3">
      <label for="name" class="form-label">Your Name</label>
      <input type="text" class="form-control" id="name" placeholder="Enter your name">
    </div>

    <!-- Email -->
    <div class="mb-3">
      <label for="email" class="form-label">Your Email</label>
      <input type="email" class="form-control" id="email" placeholder="Enter your email">
    </div>

    <!-- Message -->
    <div class="mb-3">
      <label for="message" class="form-label">Your Message</label>
      <textarea class="form-control" id="message" rows="5" placeholder="Enter your message"></textarea>
    </div>

    <!-- Submit -->
    <button type="submit" class="btn btn-custom w-100">Send Message</button>
  </form>
    </div>
@endsection