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

  <!-- about-hero -->
    <section class="about-hero">
      <div class="container">
        <div class="row align-items-center g-5">
          <div class="col-lg-6">
            <h1 class="display-4 fw-bold">
              Redefining Confidence Through
              <span class="mint-text">Modern Healthcare</span>
            </h1>
            <p class="lead mt-3">
              We combine clinically proven treatments, licensed medical experts,
              and discreet delivery to help you feel your best—privately and
              confidently.
            </p>
          </div>
          <div class="col-lg-6">
            <div class="about-hero-img">
              <img
                src="{{ asset('redesigned-assets/images/about-header.jpg') }}"
                class="img-fluid"
                alt="About Image"
              />
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- WHO WE ARE -->
    <section class="py-5">
      <div class="container">
        <div class="glass-box">
          <h2 class="section-title">Who We Are</h2>
          <p class="mb-0">
            ifeelshy was founded with one goal:
            <strong>
              to make personal healthcare accessible, discreet, and stigma-free.
            </strong>
            Our fully licensed medical team provides carefully selected
            treatments backed by scientific research.
          </p>
        </div>
      </div>
    </section>

    <!-- VALUES -->
    <section class="py-5">
      <div class="container">
        <h2 class="section-title text-center mb-5">Our Core Values</h2>

        <div class="row g-4 justify-content-center">
          <div class="col-md-4">
            <div class="value-card text-center">
              <i class="fa-solid fa-shield-halved fa-2x mb-3 mint-text"></i>
              <h4 class="fw-bold">Safety First</h4>
              <p>
                Every treatment is assessed by qualified professionals following
                strict clinical protocols.
              </p>
            </div>
          </div>

          <div class="col-md-4">
            <div class="value-card text-center">
              <i class="fa-solid fa-user-secret fa-2x mb-3 mint-text"></i>
              <h4 class="fw-bold">True Privacy</h4>
              <p>
                Your consultations and treatments remain completely
                confidential, always.
              </p>
            </div>
          </div>

          <div class="col-md-4">
            <div class="value-card text-center">
              <i
                class="fa-solid fa-hand-holding-heart fa-2x mb-3 mint-text"
              ></i>
              <h4 class="fw-bold">Empathy & Care</h4>
              <p>
                We focus on human-centered care that supports your emotional and
                physical well-being.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- PHARMACY CREDENTIALS -->
    <section class="py-5">
      <div class="container">
        <div class="glass-box">
          <h2 class="section-title">Registered Pharmacy & Medical Oversight</h2>

          <div class="row g-4 align-items-center">
            <div class="col-md-6">
              <div class="timeline">
                <div class="timeline-item">
                  <h5>Licensed UK Pharmacists</h5>
                  <p class="text-light">
                    All prescriptions are issued and reviewed by GPhC-registered
                    professionals.
                  </p>
                </div>
                <div class="timeline-item">
                  <h5>Regulated Supply Chain</h5>
                  <p class="text-light">
                    We follow strict pharmaceutical distribution standards.
                  </p>
                </div>
                <div class="timeline-item">
                  <h5>Safe Clinical Protocols</h5>
                  <p class="text-light">
                    Every treatment undergoes rigorous medical screening.
                  </p>
                </div>
              </div>
            </div>

            <div class="col-md-6 text-center">
              <img
                src="{{ asset('redesigned-assets/images/lab.jpg') }}"
                class="img-fluid rounded-4 shadow-lg"
                alt="Pharmacy Credentials"
              />
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- TEAM -->
    <section class="py-5">
      <div class="container">
        <h2 class="section-title text-center">Meet the Team</h2>
        <p class="text-center mb-5 text-light">
          A team of licensed experts dedicated to responsible, modern
          healthcare.
        </p>

        <div class="row g-4 justify-content-center">
          <div class="col-md-4">
            <div class="team-card text-center">
              <img src="{{ asset('redesigned-assets/images/doctor4.png') }}" class="img-team rounded mb-3" />
              <h5 class="fw-bold">Dr. Sarah Thompson</h5>
              <p class="mb-0">Chief Medical Officer</p>
            </div>
          </div>

          <div class="col-md-4">
            <div class="team-card text-center">
              <img src="{{ asset('redesigned-assets/images/doctor3.png') }}" class="img-team rounded mb-3" />
              <h5 class="fw-bold">James Carter</h5>
              <p class="mb-0">Head Pharmacist</p>
            </div>
          </div>

          <div class="col-md-4">
            <div class="team-card text-center">
              <img src="{{ asset('redesigned-assets/images/doctor5.png') }}" class="img-team rounded mb-3" />
              <h5 class="fw-bold">Emily Richards</h5>
              <p class="mb-0">Clinical Lead</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- STATISTICS -->
    <section class="py-5">
      <div class="container">
        <div class="row g-4 text-center">
          <div class="col-md-4">
            <div class="stats-box">
              <span>240k+</span><br />
              Verified Customers
            </div>
          </div>

          <div class="col-md-4">
            <div class="stats-box">
              <span>4.9/5</span><br />
              Review Rating
            </div>
          </div>

          <div class="col-md-4">
            <div class="stats-box">
              <span>1.2M+</span><br />
              Orders Delivered
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- CTA -->
    <section class="py-5">
      <div class="container">
        <div class="cta-banner text-center rounded-4">
          <h2 class="fw-bold">Ready to Begin Your Journey?</h2>
          <p class="lead">
            Start a free online consultation and get personalised treatment
            options instantly.
          </p>
          <button class="btn btn-dark px-4 py-2 rounded-pill fw-bold">
            Start Consultation
          </button>
        </div>
      </div>
    </section>
@endsection