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

    <!-- MAIN CONTENT -->
    <section class="py-5" style="background: #fff">
      <div class="container">
        <!-- Title -->
        <h1 class="fw-bold text-center mb-1" style="color: var(--ink)">
          Sun Cream Treatment
        </h1>
        <p class="text-center fw-semibold mb-4" style="color: #2a3b4c">
          Effective protection from the sun
        </p>

        <!-- Intro Paragraphs -->
        <div
          class="mx-auto"
          style="max-width: 900px; color: #2f4657; font-size: 1rem"
        >
          <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> over time.
          </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, protected, and youthful.
          </p>

          <p>
            Our range of sun protection products, from trusted brands such as
            <strong>Nivea</strong> and <strong>Piz Buin</strong>, includes
            creams, sprays, and aftersun lotions to help you stay safe whether
            you’re at home, on holiday, or spending time outdoors.
          </p>
        </div>

        <!-- Feature Icons -->
        <div class="d-flex flex-wrap justify-content-center gap-3 mt-4">
          <div class="feature-pill">🌞 UVA/UVB Protection</div>
          <div class="feature-pill">💧 Water Resistant</div>
          <div class="feature-pill">🧪 Dermatologically Tested</div>
          <div class="feature-pill">🇬🇧 UK Pharmacy-Regulated & Trusted</div>
        </div>
      </div>
    </section>

    <!-- PRODUCT CARDS -->
    <section class="py-5">
      <div class="container">
        <div class="row g-4">
          <!-- Product 1 -->
          <div class="col-md-4">
            <div class="product-card">
              <img src="{{ asset('redesigned-assets/images/nivea-sun-lotion-l-35589.webp') }}" />
              <h5 class="fw-semibold mt-3">
                Nivea Sun Protect & Moisture SPF 30 (200ml)
              </h5>
              <p class="text-muted small">
                Broad-spectrum SPF 30 sun lotion with moisturising vitamin E.
                Water resistant & dermatologically tested.
              </p>
              <a href="{{ route('redesigned.product.details') }}" class="btn-mint w-100">View Product</a>
            </div>
          </div>

          <!-- Product 2 -->
          <div class="col-md-4">
            <div class="product-card">
              <img src="{{ asset('redesigned-assets/images/piz-buin-allergy-l-35570.webp') }}" />
              <h5 class="fw-semibold mt-3">
                Piz Buin Tan & Protect SPF 15 (150ml)
              </h5>
              <p class="text-muted small">
                Lightweight oil offering UVA/UVB protection. Enhances natural
                tan. Quick-absorbing & non-greasy.
              </p>
              <a href="{{ route('redesigned.product.details') }}" class="btn-mint w-100">View Product</a>
            </div>
          </div>

          <!-- Product 3 -->
          <div class="col-md-4">
            <div class="product-card">
              <img src="{{ asset('redesigned-assets/images/nivea-after-sun-l-35594.webp') }}" />
              <h5 class="fw-semibold mt-3">
                Nivea After Sun Moisture Aloe Lotion (200ml)
              </h5>
              <p class="text-muted small">
                Cooling aftersun lotion enriched with aloe vera for hydration &
                skin comfort.
              </p>
              <a href="{{ route('redesigned.product.details') }}" class="btn-mint w-100">View Product</a>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- FAQ SECTION -->
    <section class="py-5" style="background: #fff">
      <div class="container">
        <h2 class="fw-bold mb-4" style="color: var(--ink)">FAQs</h2>

        <div class="row g-4">
          <div class="col-md-6">
            <div class="faq-question">1. What SPF should I use daily?</div>
            <p class="text-muted small">
              For most people: SPF 30 lotion with broad-spectrum protection.
              Water-resistant & dermatologically tested for daily use.
            </p>

            <div class="faq-question">
              2. Do I need sunscreen on cloudy days?
            </div>
            <p class="text-muted small">
              Yes — up to 80% of UV rays pass through clouds.
            </p>

            <div class="faq-question">
              3. Is sunscreen safe for sensitive skin?
            </div>
            <p class="text-muted small">
              Yes — choose formulas labelled “dermatologically tested” or “for
              sensitive skin”.
            </p>
          </div>

          <div class="col-md-6">
            <div class="faq-question">4. What does “broad-spectrum” mean?</div>
            <p class="text-muted small">
              It protects against both UVA (ageing) and UVB (burning) rays.
            </p>

            <div class="faq-question">
              5. What’s the difference between lotion, cream, and spray?
            </div>
            <p class="text-muted small">
              Cream = thicker & more moisturising. Spray = fast application &
              great for top-ups outdoors.
            </p>

            <div class="faq-question">6. How often should I reapply?</div>
            <p class="text-muted small">
              Every 2 hours, and immediately after swimming or sweating.
            </p>
          </div>
        </div>
      </div>
    </section>

    <section class="consultation-cta position-relative 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>

    <!-- <hr /> -->
    <div class=" bg-light">
      <div class="container">
        <div class="text-center mb-4">
          <h1 class="fs-3 fw-bold py-3" style="color: var(--charcoal-deep)">
            Related Articles
          </h1>
        </div>

        <div
          class="article-card p-4 rounded-4 bg-white shadow-sm mb-5"
          style="border: 1px solid #e9eef2; transition: 0.25s"
          onmouseover="this.style.transform='translateY(-6px)'; this.style.boxShadow='0 12px 34px rgba(0,0,0,0.10)'"
          onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 6px 18px rgba(0,0,0,0.06)'"
        >
          <div class="row g-4 align-items-center">
            <div class="col-md-8">
              <a
                href="#"
                class="d-block fw-semibold mb-2"
                style="font-size: 1.25rem; text-decoration: none"
              >
                Viagra vs Sildenafil: The Ultimate Comparison (2025)
              </a>

              <p class="text-secondary mb-3" style="line-height: 1.6">
                Discover key differences and similarities between two of the
                most popular ED treatments available in this detailed guide...
              </p>

              <a
                href="#"
                style="
                  color: var(--mint);
                  font-weight: 600;
                  text-decoration: none;
                "
              >
                Read full article →
              </a>
            </div>

            <div class="col-md-4 text-center">
              <div
                class="rounded-4 overflow-hidden shadow-sm"
                style="border: 2px solid var(--mint)"
              >
                <img
                  src="{{ asset('redesigned-assets/images/article_image.jpg') }}"
                  class="img-fluid"
                  alt="Article Image"
                />
              </div>
            </div>
          </div>
        </div>
        <div
          class="article-card p-4 rounded-4 bg-white shadow-sm mb-5"
          style="border: 1px solid #e9eef2; transition: 0.25s"
          onmouseover="this.style.transform='translateY(-6px)'; this.style.boxShadow='0 12px 34px rgba(0,0,0,0.10)'"
          onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 6px 18px rgba(0,0,0,0.06)'"
        >
          <div class="row g-4 align-items-center">
            <div class="col-md-8">
              <a
                href="#"
                class="d-block fw-semibold mb-2"
                style="font-size: 1.25rem; text-decoration: none"
              >
                Viagra vs Sildenafil: The Ultimate Comparison (2025)
              </a>

              <p class="text-secondary mb-3" style="line-height: 1.6">
                Discover key differences and similarities between two of the
                most popular ED treatments available in this detailed guide...
              </p>

              <a
                href="#"
                style="
                  color: var(--mint);
                  font-weight: 600;
                  text-decoration: none;
                "
              >
                Read full article →
              </a>
            </div>

            <div class="col-md-4 text-center">
              <div
                class="rounded-4 overflow-hidden shadow-sm"
                style="border: 2px solid var(--mint)"
              >
                <img
                  src="{{ asset('redesigned-assets/images/article_image2.jpg') }}"
                  class="img-fluid"
                  alt="Article Image"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>


@endsection