@extends('layouts.front-layout')
@section('content')
    <style>
        .icon-box {
            background: #30BEAB;
            color: white;
            border-radius: 10px;
            padding: 15px;
            display: flex;
            justify-content: space-around;
            text-align: center;
            font-size: 15px;
        }

        .product-card img {
            height: 160px;
            object-fit: contain;
        }

        .button-product {
            background-color: #30BEAB;
            color: white;
            border-radius: 10px;
            padding: 10px 20px;
            text-align: center;
        }
    </style>

    <div class="container py-5">
        <div class="text-center mb-4">
            <h2 class="mt-3 fw-bold fs-1">{{ $category_detail->category_name }}</h2>
            <h5 class="text fs-4">    {!! $category_detail->short_description ? : '' !!}</h5>
        </div>

        <div class="font18 my-5">
            {{-- <p>
                Enjoying the sunshine is one of life's simple pleasures, but too much exposure can be harmful.
                <strong>Sunburn</strong> isn’t just uncomfortable — it can accelerate
                <strong>skin ageing</strong> and increase the risk of <strong>skin cancer</strong>.
            </p>
            <p>
                The good news is that sun damage is entirely preventable. By applying a
                <strong>high‑quality sunscreen</strong> regularly, you can keep your skin healthy and protected.
            </p>
            <p>
                Our range of sun protection products, from trusted brands such as Nivea and Piz Buin,
                includes creams, sprays, and aftersun lotions to help you stay safe whether you’re at home,
                on holiday, or outdoors.
            </p> --}}

             {!! $category_detail->long_description ? : '' !!}
        </div>

        <!-- Icon Row -->
        <div class="icon-box mb-5">
            <div>🌞<br />UVA/UVB Protection</div>
            <div>💧<br />Water Resistant</div>
            <div>🧪<br />Dermatologically Tested</div>
            <div>🏥<br />Pharmacy‑Trusted</div>
        </div>

        <!-- Products Row -->
        <div class="row g-4 mb-5">
          @foreach ($category_detail->products as $product)
            <div class="col-md-4">
                <div class="card product-card p-3 shadow-small">
                        <h3 class="text-center blue">  {{ $product->product_name }}</h3>

                    <img src="{{ $product->productImage('product_main_image')  }}" class="card-img-top" />
                    <div class="card-body">
                        <p>   {!!   $product->product_detail_page_short_description !!}</p>
                    </div>
                    <a href="{{ route('product.detail.slug', $product->slug) }}" class="btn button-product w-100">View Product  <i class="fa fa-chevron-right ms-1"></i></a>
                </div>
            </div>
  @endforeach
            {{-- <div class="col-md-4">
                <div class="card product-card p-3 shadow-small">
                    <img src="pizbuin.png" class="card-img-top" />
                    <div class="card-body text-center">
                        <h6>Piz Buin Tan & Protect SPF 15 (150ml)</h6>
                        <p>Lightweight oil offering UVA/UVB protection. Quick‑absorbing.</p>
                    </div>
                    <a href="#" class="btn button-product w-100">View Product</a>
                </div>
            </div>

            <div class="col-md-4">
                <div class="card product-card p-3 shadow-small">
                    <img src="nivea2.png" class="card-img-top" />
                    <div class="card-body text-center">
                        <h6>Nivea After Sun Moisture Aloe Vera Lotion</h6>
                        <p>Cooling aftersun lotion with aloe vera for hydration.</p>
                      </div>
                      <a href="#" class="btn button-product w-100">View Product</a>
                </div>
            </div> --}}
        </div>

        <div class="container my-5">
  <h4 class="mb-4 fw-bold">FAQs</h4>

  <div class="row">
    {{-- <!-- Left Column -->
    <div class="col-md-6">
      
      <!-- FAQ 1 -->
      <div class="faq-item mb-4">
        <p class="fw-bold mb-1">1. What SPF should I use daily?</p>
        <ul class="mb-0">
          <li>For most people: SPF 50 lotion with broad-spectrum protection.</li>
          <li>Water-resistant and dermatologically tested for daily use.</li>
        </ul>
      </div>

      <!-- FAQ 2 -->
      <div class="faq-item mb-4">
        <p class="fw-bold mb-1">2. Do I need sunscreen on cloudy days?</p>
        <ul class="mb-0">
          <li>Yes; up to 25% of UV rays pass through clouds.</li>
        </ul>
      </div>
      <!-- FAQ 3 -->
      <div class="faq-item mb-4">
        <p class="fw-bold mb-1">3. Do I need sunscreen on cloudy days?</p>
        <ul class="mb-0">
          <li>Yes; up to 25% of UV rays pass through clouds.</li>
        </ul>
      </div>

    </div>

    <!-- Right Column -->
    <div class="col-md-6">

      <!-- FAQ 4 -->
      <div class="faq-item mb-4">
        <p class="fw-bold mb-1">4. What does “broad-spectrum” mean?</p>
        <ul class="mb-0">
          <li>Sunscreen reduces damage, but you may still tan.</li>
          <li>For cream — thicker and more moisturising for dry skin.</li>
          <li>For spray — quick, even coverage; great for reapplication outdoors.</li>
        </ul>
      </div>

      <!-- FAQ 5 -->
      <div class="faq-item mb-4">
        <p class="fw-bold mb-1">5. What’s the difference between lotion, cream and spray?</p>
        <ul class="mb-0">
          <li>Lotion: Lightweight and spreads easily.</li>
          <li>Cream: Thicker and for deeper moisturisation.</li>
          <li>Spray: Fast application and good for reapplication outdoors.</li>
        </ul>
      </div>

    </div> --}}

@foreach ($category_detail->frequentlyAskedQuestions as $ques)
  <div class="faq-item mb-4">
    <p class="fw-bold mb-1">{!! $ques->frequently_asked_questions_title !!}</p>
    <ul class="mb-0">
      <li>{!! $ques->frequently_asked_questions_description !!}</li>
    </ul>
  </div>
@endforeach


  </div>
</div>

    </div>
@endsection