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

<!-- blog-hero -->
<section class="blog-hero">
  <div class="container">

    <div class="row align-items-center g-5">
      <div class="col-lg-6">
        <h1 class="display-4 fw-bold mb-3">Health Hub</h1>
        <p class="blog-hero-sub mb-4">
          Trusted, clinically verified health guidance — written by real healthcare professionals.
        </p>
        <a href="#articles" class="btn">
          Explore Articles <i class="fa-solid fa-arrow-right ms-2"></i>
        </a>
      </div>

      <div class="col-lg-6 text-center">
        <img src="{{ asset('redesigned-assets/images/blog.jpg') }}" alt="Health Hub"
             class="img-fluid rounded-4 shadow"
             style="height:350px; object-fit:cover;">
      </div>
    </div>

  </div>
</section>



<!-- FILTER + SEARCH -->
<section class="container py-5">

  <div class="row justify-content-between align-items-center mb-4">
    <div class="col-md-7 d-flex flex-wrap gap-2">

      <span class="filter-pill">All</span>
      <span class="filter-pill">Weight Loss</span>
      <span class="filter-pill">Hair Loss</span>
      <span class="filter-pill">Men's Health</span>
      <span class="filter-pill">Women's Health</span>
      <span class="filter-pill">Sexual Health</span>
      <span class="filter-pill">Wellness</span>

    </div>

    <div class="col-md-4">
      <div class="search-box mt-2">
        <input class="form-control" placeholder="Search articles...">
      </div>
    </div>
  </div>

</section>



<!-- ARTICLES -->
<section id="articles" class="container pb-5">

  <div class="row g-4">

    <!-- CARD -->
    <div class="col-md-4">
      <div class="blog-card">
        <img src="{{ asset('redesigned-assets/images/article.jpg') }}">

        <div class="p-3">
          <h5 class="fw-semibold mb-1">Mounjaro Weight Loss: Week-by-Week Results</h5>
          <small class="text-muted">Updated: 26 June 2025</small>

          <p class="mt-3 mb-4 text-muted">
            What to expect on your weight loss journey, dosage guidance, side effects and clinical outcomes.
          </p>

          <a href="#" class="btn">Read More</a>
        </div>
      </div>
    </div>

    <!-- CARD -->
    <div class="col-md-4">
      <div class="blog-card">
        <img src="{{ asset('redesigned-assets/images/article.jpg') }}">

        <div class="p-3">
          <h5 class="fw-semibold mb-1">Top 6 Clinician-Approved Hair Loss Treatments</h5>
          <small class="text-muted">Updated: 1 July 2025</small>

          <p class="mt-3 mb-4 text-muted">
            Explore effective hair loss solutions tailored to men and women, backed by scientific studies.
          </p>

          <a href="#" class="btn">Read More</a>
        </div>
      </div>
    </div>

    <!-- CARD -->
    <div class="col-md-4">
      <div class="blog-card">
        <img src="{{ asset('redesigned-assets/images/article.jpg') }}">

        <div class="p-3">
          <h5 class="fw-semibold mb-1">Ozempic vs Wegovy: What’s the Difference?</h5>
          <small class="text-muted">Updated: 28 June 2025</small>

          <p class="mt-3 mb-4 text-muted">
            Which is better for weight loss? Compare side effects, clinical performance and cost.
          </p>

          <a href="#" class="btn">Read More</a>
        </div>
      </div>
    </div>

  </div>

</section>



<!-- SIDEBAR + MORE ARTICLES -->
<section class="container pb-5">

  <div class="row g-5">

    <!-- LEFT COLUMN -->
    <div class="col-lg-8">

      <div class="row g-4">

        <!-- Duplicate a few cards -->
        <div class="col-md-6">
          <div class="blog-card">
            <img src="{{ asset('redesigned-assets/images/article.jpg') }}">
            <div class="p-3">
              <h5 class="fw-semibold mb-1">How to Talk to a Clinician About Weight Loss</h5>
              <small class="text-muted">Updated: 25 June 2025</small>
              <p class="mt-3 mb-4 text-muted">
                A guide to overcoming stigma, understanding treatment options and expectations.
              </p>
              <a href="#" class="btn">Read More</a>
            </div>
          </div>
        </div>

        <div class="col-md-6">
          <div class="blog-card">
            <img src="{{ asset('redesigned-assets/images/article.jpg') }}">
            <div class="p-3">
              <h5 class="fw-semibold mb-1">Understanding Erectile Dysfunction</h5>
              <small class="text-muted">Updated: 19 June 2025</small>
              <p class="mt-3 mb-4 text-muted">
                Causes, treatments, prevention strategies and psychological factors explained.
              </p>
              <a href="#" class="btn">Read More</a>
            </div>
          </div>
        </div>

      </div>

    </div>

    <!-- RIGHT COLUMN -->
    <div class="col-lg-4">

      <!-- SIDEBAR CARD -->
      <div class="sidebar-box mb-4">
        <h6 class="fw-bold mb-3 text-black">Filter by Category</h6>
        <select class="form-select">
          <option>All</option>
          <option>Weight Loss</option>
          <option>Hair Loss</option>
          <option>Sexual Health</option>
          <option>General Health</option>
        </select>
      </div>

      <!-- STATS -->
      <div class="mint-box text-center mb-4">
        <h1>228,380</h1>
        <p class="mb-3 fs-5">Verified Reviews</p>
        <div class="mb-2">
          <i class="fa fa-star text-warning"></i>
          <i class="fa fa-star text-warning"></i>
          <i class="fa fa-star text-warning"></i>
          <i class="fa fa-star text-warning"></i>
          <i class="fa fa-star text-warning"></i>
        </div>
        <a href="#" class="text-white text-decoration-underline">See all reviews</a>
      </div>

      <!-- TRUST -->
      <div class="trusted-card text-center mb-4">
        <h6 class="fw-bold mb-2">100% Discreet Packaging</h6>
        <p class="text-light opacity-75 mb-3">
          Your order arrives in plain packaging without branding or product labels.
        </p>
        <img src="{{ asset('redesigned-assets/images/discreet.png') }}" class="img-fluid" style="height:80px;">
      </div>

    </div>

  </div>

</section>



<!-- CTA -->
<section class="container pb-5">
  <div class="footer-cta text-center p-5 rounded-4" >
    <h3 class="text-white fw-bold mb-4">Get Health Insights, Straight to Your Inbox</h3>

    <form class="row justify-content-center g-3">
      <div class="col-md-5">
        <input class="form-control form-control-lg" placeholder="Enter your email">
      </div>
      <div class="col-md-2">
        <button class="btn btn-mint btn-lg w-100">Subscribe</button>
      </div>
    </form>

    <small class="text-white-50">
      We never spam. Unsubscribe anytime.
    </small>
  </div>
</section>


@endsection