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

<main class="container">

  <div class="sheet">
    <div class="row gy-4">

      <!-- LEFT COLUMN -->
      <div class="col-lg-7">
        <div class="row g-3">

          <!-- CAROUSEL -->
          <div class="col-12">
            <div class="carousel-card">
              <div id="productCarousel" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-inner">
                  <div class="carousel-item active"><img src="{{ asset('redesigned-assets/images/product1.webp') }}" class="d-block w-100"></div>
                  <div class="carousel-item"><img src="{{ asset('redesigned-assets/images/product2.webp') }}" class="d-block w-100"></div>
                  <div class="carousel-item"><img src="{{ asset('redesigned-assets/images/product3.webp') }}" class="d-block w-100"></div>
                </div>

                <button class="carousel-control-prev" type="button" data-bs-target="#productCarousel" data-bs-slide="prev">
                  <span class="carousel-control-prev-icon"></span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#productCarousel" data-bs-slide="next">
                  <span class="carousel-control-next-icon"></span>
                </button>
              </div>
            </div>
          </div>

          <!-- TRUST BADGES -->
          <div class="col-12">
            <div class="d-flex flex-wrap gap-3">
              <span class="badge bg-light text-dark"><i class="fa-regular fa-thumbs-up me-1"></i> MHRA-approved</span>
              <span class="badge bg-light text-dark"><i class="fa-solid fa-lock me-1"></i> Private & confidential</span>
              <span class="badge bg-light text-dark"><i class="fa-solid fa-truck-fast me-1"></i> Free delivery over £50</span>
              <span class="badge bg-light text-dark"><i class="fa-solid fa-user-check me-1"></i> 1.75M+ customers</span>
            </div>
          </div>

          <!-- PRODUCT TEXT -->
          <div class="col-12">
            <h1 class="product-title">Finasteride 1mg — Hair Loss Treatment</h1>
            <p class="product-short">Clinically-proven once-daily tablet to slow hair loss and stimulate regrowth.</p>

            <p style="color:#445b62">Finasteride is indicated for male pattern hair loss in men aged 18 and over...</p>
          </div>
        </div>
      </div>

      <!-- RIGHT COLUMN (BUY BOX) -->
      <aside class="col-lg-5">
        <div class="p-3 rounded" style="border:1px solid rgba(127,225,176,0.2); background:rgba(127,225,176,0.05);">

          <div class="d-flex justify-content-between">
            <div>
              <div class="text-muted small">Price</div>
              <div class="h3 fw-bold mb-0">£29.99</div>
              <div class="text-muted small">per 28 tablets</div>
            </div>
            <div class="text-end">
              <div class="text-muted small">Rating</div>
              <div class="fw-bold">4.9 ★</div>
              <div class="text-muted small">2,345 reviews</div>
            </div>
          </div>

          <hr>

          <!-- Brand -->
          <label class="form-label small fw-semibold">Brand / Option</label>
          <select class="form-select form-select-sm mb-3">
            <option selected>Standard</option>
            <option>Branded - Option A (+£5)</option>
            <option>Generic</option>
          </select>

          <!-- Quantity -->
          <label class="form-label small fw-semibold">Quantity</label>
          <div class="input-group mb-3" style="max-width:150px;">
            <button class="btn btn-outline-secondary btn-sm" id="qty-decr">-</button>
            <input id="qty" type="text" class="form-control text-center" value="1">
            <button class="btn btn-outline-secondary btn-sm" id="qty-incr">+</button>
          </div>

          <button class="btn-mint w-100 mb-2">Add to basket — £29.99</button>
          <button class="btn btn-outline-secondary w-100">Add to wishlist</button>

          <div class="mt-2 small text-muted">Dispatch: Next working day</div>

        </div>

        <div class="mt-3 p-3 bg-light rounded border ">
          <img src="{{ asset('redesigned-assets/images/trustpilot.png') }}" style="height:23px"> Rated 4.9/5  
          <p class="small text-muted mb-0 mt-2">Includes free private prescription.</p>
        </div>
      </aside>

      <!-- TABS -->
      <div class="col-12">
        <ul class="nav nav-tabs">
          <li class="nav-item"><button class="nav-link mint-text active" data-bs-target="#desc" data-bs-toggle="tab">Description</button></li>
          <li class="nav-item"><button class="nav-link mint-text" data-bs-target="#quick" data-bs-toggle="tab">Quick view</button></li>
          <li class="nav-item"><button class="nav-link mint-text" data-bs-target="#side" data-bs-toggle="tab">Side effects</button></li>
          <li class="nav-item"><button class="nav-link mint-text" data-bs-target="#more" data-bs-toggle="tab">More info</button></li>
        </ul>

        <div class="tab-content border border-top-0 p-3">
          <div class="tab-pane fade show active" id="desc">
            <h5>Finasteride Product Information</h5>
            <p class="text-muted">Finasteride is a treatment for male pattern hair loss...</p>

            <div class="accordion" id="faqAccordion">
              <div class="accordion-item">
                <h2 class="accordion-header">
                  <button class="accordion-button collapsed" data-bs-target="#faq1" data-bs-toggle="collapse">What is Finasteride used for?</button>
                </h2>
                <div id="faq1" class="accordion-collapse collapse">
                  <div class="accordion-body">Finasteride is primarily used to treat...</div>
                </div>
              </div>

              <div class="accordion-item">
                <h2 class="accordion-header">
                  <button class="accordion-button collapsed" data-bs-target="#faq2" data-bs-toggle="collapse">How long until it works?</button>
                </h2>
                <div id="faq2" class="accordion-collapse collapse">
                  <div class="accordion-body">You may see results after 3–6 months...</div>
                </div>
              </div>

              <div class="accordion-item">
                <h2 class="accordion-header">
                  <button class="accordion-button collapsed" data-bs-target="#faq3" data-bs-toggle="collapse">Are there side effects?</button>
                </h2>
                <div id="faq3" class="accordion-collapse collapse">
                  <div class="accordion-body">Possible effects include decreased libido...</div>
                </div>
              </div>

            </div>
          </div>

          <div class="tab-pane fade" id="quick">
            <p class="text-muted">Take once daily...</p>
          </div>

          <div class="tab-pane fade" id="side">
            <ul class="text-muted">
              <li>Decreased libido (rare)</li>
              <li>Mood changes (very rare)</li>
            </ul>
          </div>

          <div class="tab-pane fade" id="more">
            <p class="text-muted">Consult your healthcare provider...</p>
          </div>
        </div>
      </div>

      <!-- TEAM -->
      <div class="col-12">
        <h5>Written and reviewed by</h5>

        <div class="d-flex flex-wrap justify-content-around text-light gap-3">
          <div class="article-card d-flex gap-3">
            <img src="{{ asset('redesigned-assets/images/carolina.webp') }}" class="rounded-circle bg-light" style="width:70px;height:70px;">
            <div>
              <div class="small">Authored by</div>
              <div class="fw-bold">Ana Carolina Goncalves</div>
              <div class="small">Superintendent Pharmacist</div>
            </div>
          </div>

          <div class="article-card d-flex gap-3">
            <img src="{{ asset('redesigned-assets/images/rehma.webp') }}" class="rounded-circle bg-light" style="width:70px;height:70px;">
            <div>
              <div class="small ">Authored by</div>
              <div class="fw-bold">Dr. Rehma Smith</div>
              <div class="small ">Clinical Pharmacist</div>
            </div>
          </div>
        </div>
      </div>

      <!-- CONSULTATION CTA -->
     <section class="consultation-cta position-relative rounded py-5">
      <!-- Decorative Rings -->
      <div class="cta-art">
        <span class="ring r1"></span>
        <span class="ring r2"></span>
        <span class="ring r3"></span>
      </div>

      <div class="container position-relative" style="z-index: 2">
        <div
          class="rounded-4 p-4 p-md-5"
          style="
            background: rgba(255, 255, 255, 0.06);
            border: 1px solid rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(12px);
          "
        >
          <div class="row align-items-center justify-content-between">
            <!-- LEFT SIDE -->
            <div class="col-md-7 text-white">
              <h2 class="fw-bold mb-3" style="font-size: 2rem">
                <i
                  class="fa-regular fa-flag me-2"
                  style="color: var(--mint)"
                ></i>
                Start Your Online Consultation
              </h2>

              <p class="opacity-75 mb-4" style="font-size: 1.05rem">
                Complete our short questionnaire and our medical team will help
                you find safe and effective treatment options tailored to you.
              </p>

              <a
                href="#"
                class="btn-mint d-inline-flex align-items-center fs-6 px-4 py-2"
              >
                Start consultation
                <i class="fa-solid fa-chevron-right ms-2"></i>
              </a>

              <!-- FEATURES -->
              <div class="row mt-5 g-4">
                <div class="col-6 d-flex gap-3">
                  <div class="text-center w-100">
                    <i
                      class="fa-solid fa-clock fa-2x mb-2"
                      style="color: var(--mint)"
                    ></i>
                    <div class="fw-semibold">Takes less than 2 minutes</div>
                  </div>
                </div>

                <div class="col-6 d-flex gap-3">
                  <div class="text-center w-100">
                    <i
                      class="fa-solid fa-lock fa-2x mb-2"
                      style="color: var(--mint)"
                    ></i>
                    <div class="fw-semibold">Confidential & secure</div>
                  </div>
                </div>

                <div class="col-6 d-flex gap-3">
                  <div class="text-center w-100">
                    <i
                      class="fa-solid fa-cart-shopping fa-2x mb-2"
                      style="color: var(--mint)"
                    ></i>
                    <div class="fw-semibold">Quick checkout</div>
                  </div>
                </div>

                <div class="col-6 d-flex gap-3">
                  <div class="text-center w-100">
                    <i
                      class="fa-solid fa-users fa-2x mb-2"
                      style="color: var(--mint)"
                    ></i>
                    <div class="fw-semibold">1.75 million+ customers</div>
                  </div>
                </div>
              </div>
            </div>

            <!-- RIGHT SIDE -->
            <div class="col-md-4 text-center mt-5 mt-md-0">
              <div
                class="rounded-circle shadow-lg mx-auto"
                style="
                  width: 180px;
                  height: 180px;
                  background: white;
                  overflow: hidden;
                  padding: 6px;
                  border: 3px solid var(--mint);
                "
              >
                <img
                  src="{{ asset('redesigned-assets/images/carolina.webp') }}"
                  class="img-fluid rounded-circle"
                  alt="Doctor"
                />
              </div>

              <div class="fw-bold fs-4 text-white mt-3">
                Ana Carolina Goncalves
              </div>

              <div class="opacity-75 text-white small">
                Superintendent Pharmacist<br />GPhC Number 2088658
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
      <!-- DISCREET SERVICE -->
      <div class="col-12 my-3">
        <div class="row gap-3 justify-content-center">
          <div class="col-md-4 shadow-lg p-3 text-center">
            <img class=" rounded-circle p-3" src="{{ asset('redesigned-assets/images/discreet.png') }}" style="max-width:170px; background-color:var(--charcoal-deep);">
          </div>
          <div class="col-md-6 shadow-lg p-3">
            <h5>Discreet service</h5>
            <p class="text-muted small">All orders arrive in plain packaging...</p>
            <a href="#" class="fw-bold mint-text">Find out more →</a>
          </div>
        </div>
      </div>

      <!-- RELATED ARTICLES -->
      <div class="col-12">
        <h5>Related articles</h5>

        <div class="row g-3">

          <div class="col-md-6">
            <div class="article-card d-flex gap-3">
              <div class="flex-grow-1">
                <a class="fw-semibold text-light" >Comparing Hair Loss Products (2025)</a>
                <p class="small mb-1 text-light">A detailed guide...</p>
                <a href="#" style="color:var(--mint)">Read full article →</a>
              </div>
              <div style="width:110px;height:80px;border-radius:10px;overflow:hidden;">
                <img src="{{ asset('redesigned-assets/images/article_image2.jpg') }}">
              </div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="article-card d-flex gap-3">
              <div class="flex-grow-1">
                <a class="fw-semibold text-light">Sun Protection & Your Skin</a>
                <p class="small text-light mb-1">Everything you need to know...</p>
                <a href="#" style="color:var(--mint)">Read full article →</a>
              </div>
              <div style="width:110px;height:80px;border-radius:10px;overflow:hidden;">
                <img src="{{ asset('redesigned-assets/images/article_image.jpg') }}">
              </div>
            </div>
          </div>

        </div>

        <div class="text-center mt-3">
          <a class="btn btn-outline-secondary">View more articles</a>
        </div>

      </div>

    </div>
  </div>
</main>
@endsection