@extends('layouts.redesigned-front-layout')
@section('content')

<!-- single-blog-hero -->
<section class="single-blog-hero">
  <div class="container text-center">
    <h1 class="display-5 mb-3">Understanding Treatment Options for Hair Loss</h1>
    <p class="lead mb-4">Expert review and comparison of leading medications to help you choose confidently.</p>
    <button class="btn-mint">
      Start Consultation <i class="fa-solid fa-arrow-right ms-2"></i>
    </button>
  </div>
</section>


<!-- ARTICLE + SIDEBAR -->
<div class="container my-5">
  <div class="row g-5">

    <!-- MAIN -->
    <div class="col-lg-8">

      <img src="{{ asset('redesigned-assets/images/article_image.jpg') }}" class="article-image" alt="article"/>

      <p>
        Hair loss affects millions worldwide and can significantly impact confidence. Luckily, modern treatments offer effective, medically proven solutions to reduce hair fall and stimulate regrowth. Below, we explore leading treatments, how they work, and who they are suitable for.
      </p>

      <p>
        Most medications fall into two categories: oral treatments and topical solutions. While both are effective, they differ in strength, duration, mechanism of action, and side effects.
      </p>


      <!-- COMPARISON SECTION -->
      <h3 class="fw-bold mt-5 mb-4">Compare Treatments</h3>

      <div class="row g-4">

        <div class="col-md-6">
          <div class="treatment-card-blog">
            <div class="d-flex justify-content-between align-items-center">
              <img src="{{ asset('redesigned-assets/images/nivea-sun-lotion-l-35589.webp') }}" class="img-fluid" alt="" style="max-height:120px;">
              <div class="text-end">
                <div class="compare-price">£5</div>
                <small class="text-muted">per pill</small>
              </div>
            </div>

            <h6 class="fw-bold mt-2 mb-2">Finasteride</h6>

            <ul class="m-0 ps-3 small">
              <li>Active Ingredient: Finasteride</li>
              <li>Works in: 3-6 months</li>
              <li>Duration: Continuous use required</li>
              <li>Generic: Yes</li>
            </ul>

            <button class="btn-mint mt-2 w-100">View Product</button>
          </div>
        </div>


        <div class="col-md-6">
          <div class="treatment-card-blog">
            <div class="d-flex justify-content-between align-items-center">
              <img src="{{ asset('redesigned-assets/images/nivea-after-sun-l-35594.webp') }}" class="img-fluid" alt="" style="max-height:120px;">
              <div class="text-end">
                <div class="compare-price">£7</div>
                <small class="text-muted">per pill</small>
              </div>
            </div>

            <h6 class="fw-bold mt-2 mb-2">Propecia</h6>

            <ul class="m-0 ps-3 small">
              <li>Active Ingredient: Finasteride</li>
              <li>Works in: 3 months</li>
              <li>Duration: Continuous use required</li>
              <li>Generic: No</li>
            </ul>

            <button class="btn-mint mt-2 w-100">View Product</button>
          </div>
        </div>

      </div>


      <!-- CTA -->
      <div class="text-center my-5">
        <button class="btn-mint btn-lg px-5">
          Start Consultation <i class="fa-solid fa-arrow-right ms-2"></i>
        </button>
        <div class="mt-3 small">
          Safe & regulated • Lowest price guarantee • Discreet delivery
        </div>
      </div>


      <!-- AUTHOR -->
      <div class="author-card mt-5">
        <div class="d-flex gap-4 align-items-center">
          <img src="{{ asset('redesigned-assets/images/carolina.webp') }}"
               style="width:90px; height:90px; border-radius:50%; object-fit:cover;">

          <div>
            <h6 class="fw-bold mb-1">Ana Carolina Goncalves</h6>
            <p class="small m-0 text-muted">Superintendent Pharmacist・GPHC #2088658</p>
          </div>
        </div>

        <p class="small mt-3 mb-0">
          With over 10 years of experience in men’s health, Ana ensures safe prescribing, patient support, and evidence-backed content.
        </p>
      </div>


      <!-- FAQ -->
      <h4 class="fw-bold mt-5 mb-4">Frequently Asked Questions</h4>

      <div class="faq-item mb-3">
        <button data-bs-toggle="collapse" data-bs-target="#q1">Does treatment work for everyone?</button>
        <div id="q1" class="collapse mt-2 small">
          Results vary, but most men experience reduced hair loss and regrowth over time.
        </div>
      </div>

      <div class="faq-item mb-3">
        <button data-bs-toggle="collapse" data-bs-target="#q2">How long does it take to see results?</button>
        <div id="q2" class="collapse mt-2 small">
          Usually between 3-6 months of consistent use.
        </div>
      </div>

      <div class="faq-item">
        <button data-bs-toggle="collapse" data-bs-target="#q3">Is treatment safe?</button>
        <div id="q3" class="collapse mt-2 small">
          Yes, when prescribed appropriately by regulated pharmacies.
        </div>
      </div>

    </div>


    <!-- SIDEBAR -->
    <div class="col-lg-4">

      <div class="sidebar-card mb-4">
        <h6 class="fw-bold mb-3 text-black">Categories</h6>
        <select class="form-select">
          <option>All treatments</option>
          <option>Hair Loss</option>
          <option>Weight Loss</option>
          <option>Sexual Health</option>
        </select>
        <button class="btn-mint mt-3 w-100">View</button>
      </div>

      <div class="sidebar-card mb-4 text-center">
        <i class="fa-solid fa-shield-halved fa-2x mb-2 text-success"></i>
        <h6 class="fw-bold mb-2">Safe & Regulated Pharmacy</h6>
        <p class="small text-muted m-0">Registered UK pharmacy providing safe, affordable treatment.</p>
      </div>

      <div class="sidebar-card mb-4 text-center">
        <h6 class="fw-bold mb-2 text-success">100% Discreet Packaging</h6>
        <img src="{{ asset('redesigned-assets/images/discreet.png') }}" class="img-fluid mb-3">
        <p class="small text-muted m-0">Plain packaging ensures complete discretion.</p>
      </div>

    </div>

  </div>
</div>



@endsection