@extends('layouts.redesigned-front-layout')
@section('content')
    <!-- HERO -->
    <section class="hero">
        <div class="container position-relative">
            <span class="badge-custom">GPhC-registered • UK-licensed medicines</span>

            <h1 class="headline">Discreet. Professional. Personal.</h1>

            <p class="sub">
                Your trusted online pharmacy – private, regulated and confidential.
                Complete a short consultation and our pharmacist will ensure your
                treatment is safe and right for you.
            </p>

            <div class="d-flex flex-wrap gap-3 mt-4">
                <a href="#" class="btn-mint">Start Consultation</a>
                <a href="#treatments" class="btn-ghost">Browse Treatments</a>
            </div>
        </div>

        <!-- Decorative rings -->
        <div class="hero-art">
            <span class="ring r1"></span>
            <span class="ring r2"></span>
            <span class="ring r3"></span>
        </div>
    </section>

    <!-- HOW IT WORKS -->
    <section id="how" class="py-5" style="background: linear-gradient(90deg, #2f3a3d 0%, #63c999 100%)">
        <div class="container">
            <div class="text-uppercase fw-semibold" style="color: var(--mint); font-size: 0.95rem">
                How it works
            </div>

            <h2 class="text-white mt-2 mb-4" style="font-size: 28px">
                Care that fits around you
            </h2>

            <div class="row g-4">
                <div class="col-md-4">
                    <div class="card h-100 p-3 text-white"
                        style="
                  background: #2f3a3d;
                  border: 1px solid rgba(255, 255, 255, 0.06);
                  border-radius: var(--radius);
                  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
                ">
                        <div class="d-flex justify-content-center align-items-center mb-3"
                            style="
                    width: 40px;
                    height: 40px;
                    border-radius: 10px;
                    background: rgba(127, 225, 176, 0.12);
                    color: var(--mint);
                  ">
                            1
                        </div>
                        <h3 class="h5">Complete a short consultation</h3>
                        <p class="text-light mb-0">
                            Answer a few medical questions securely — it takes minutes.
                        </p>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card h-100 p-3 text-white"
                        style="
                  background: #2f3a3d;
                  border: 1px solid rgba(255, 255, 255, 0.06);
                  border-radius: var(--radius);
                  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
                ">
                        <div class="d-flex justify-content-center align-items-center mb-3"
                            style="
                    width: 40px;
                    height: 40px;
                    border-radius: 10px;
                    background: rgba(127, 225, 176, 0.12);
                    color: var(--mint);
                  ">
                            2
                        </div>
                        <h3 class="h5">Pharmacist review</h3>
                        <p class="text-light mb-0">
                            Our UK pharmacist checks safety, suitability, and
                            interactions.
                        </p>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="card h-100 p-3 text-white"
                        style="
                  background: #2f3a3d;
                  border: 1px solid rgba(255, 255, 255, 0.06);
                  border-radius: var(--radius);
                  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
                ">
                        <div class="d-flex justify-content-center align-items-center mb-3"
                            style="
                    width: 40px;
                    height: 40px;
                    border-radius: 10px;
                    background: rgba(127, 225, 176, 0.12);
                    color: var(--mint);
                  ">
                            3
                        </div>
                        <h3 class="h5">Fast, discreet delivery</h3>
                        <p class="text-light mb-0">
                            Your medicine is dispatched in plain packaging with tracking.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- TREATMENTS -->
    <section id="treatments" class="py-5" style="background: var(--off); color: var(--ink)">
        <div class="container">
            <div class="fw-semibold text-uppercase" style="color: #0d7b56; letter-spacing: 0.3px; font-size: 0.95rem">
                Popular treatments
            </div>

            <h2 class="mt-1 mb-2" style="font-size: 28px; color: var(--ink)">
                What we can help with
            </h2>

            <p class="mb-4" style="color: #2f4657; max-width: 780px">
                Clinically-approved treatments with professional support. Explore
                categories and start your private consultation in minutes.
            </p>

            <div class="row g-4">
                <!-- 1 -->
                <div class="col-md-4">
                    <a href="{{route('redesigned.category.details')}}" class="text-decoration-none text-light">
                        <div class="card h-100 border-0 overflow-hidden"
                            style="
                    background: linear-gradient(
                      180deg,
                      #2f3a3d 0%,
                      #1f292b 100%
                    );
                    border-radius: 16px;
                    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
                    transition: all 0.25s ease;
                  "
                            onmouseover="this.style.transform='translateY(-6px)'; this.style.boxShadow='0 14px 32px rgba(127,225,176,0.25)';"
                            onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 10px 28px rgba(0,0,0,0.25)';">
                            <!-- Image -->
                            <div class="position-relative">
                                <img src="{{ asset('redesigned-assets/images/hair-loss-332.webp') }}" class="w-100"
                                    style="
                        height: 200px;
                        object-fit: cover;
                        border-radius: 16px 16px 0 0;
                        filter: brightness(0.92);
                        transition: 0.25s ease;
                      "
                                    onmouseover="this.style.filter='brightness(1)'"
                                    onmouseout="this.style.filter='brightness(0.92)'" />
                            </div>

                            <!-- Content -->
                            <div class="p-4 text-center">
                                <h5 class="fw-semibold mb-2" style="color: var(--mint); font-size: 1.2rem">
                                    Hair Loss
                                </h5>

                                <p class="mb-3" style="color: #cfd9e1; font-size: 0.9rem">
                                    Safe, clinically-approved treatment options.
                                </p>

                                <div class="d-inline-flex align-items-center gap-1 fw-semibold"
                                    style="color: var(--mint); font-size: 0.9rem">
                                    View options →
                                </div>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-md-4">
                    <a href="{{route('redesigned.category.details')}}" class="text-decoration-none text-light">
                        <div class="card h-100 border-0 overflow-hidden"
                            style="
                    background: linear-gradient(
                      180deg,
                      #2f3a3d 0%,
                      #1f292b 100%
                    );
                    border-radius: 16px;
                    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
                    transition: all 0.25s ease;
                  "
                            onmouseover="this.style.transform='translateY(-6px)'; this.style.boxShadow='0 14px 32px rgba(127,225,176,0.25)';"
                            onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 10px 28px rgba(0,0,0,0.25)';">
                            <!-- Image -->
                            <div class="position-relative">
                                <img src="{{ asset('redesigned-assets/images/erectile-dysfunction-332.webp') }}"
                                    class="w-100"
                                    style="
                        height: 200px;
                        object-fit: cover;
                        border-radius: 16px 16px 0 0;
                        filter: brightness(0.92);
                        transition: 0.25s ease;
                      "
                                    onmouseover="this.style.filter='brightness(1)'"
                                    onmouseout="this.style.filter='brightness(0.92)'" />
                            </div>

                            <!-- Content -->
                            <div class="p-4 text-center">
                                <h5 class="fw-semibold mb-2" style="color: var(--mint); font-size: 1.2rem">
                                    Erectile Dysfunction
                                </h5>

                                <p class="mb-3" style="color: #cfd9e1; font-size: 0.9rem">
                                    Safe, clinically-approved treatment options.
                                </p>

                                <div class="d-inline-flex align-items-center gap-1 fw-semibold"
                                    style="color: var(--mint); font-size: 0.9rem">
                                    View options →
                                </div>
                            </div>
                        </div>
                    </a>
                </div>

                <div class="col-md-4">
                    <a href="{{route('redesigned.category.details')}}" class="text-decoration-none text-light">
                        <div class="card h-100 border-0 overflow-hidden"
                            style="
                    background: linear-gradient(
                      180deg,
                      #2f3a3d 0%,
                      #1f292b 100%
                    );
                    border-radius: 16px;
                    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
                    transition: all 0.25s ease;
                  "
                            onmouseover="this.style.transform='translateY(-6px)'; this.style.boxShadow='0 14px 32px rgba(127,225,176,0.25)';"
                            onmouseout="this.style.transform='translateY(0)'; this.style.boxShadow='0 10px 28px rgba(0,0,0,0.25)';">
                            <!-- Image -->
                            <div class="position-relative">
                                <img src="{{ asset('redesigned-assets/images/weight-loss-332.webp') }}" class="w-100"
                                    style="
                        height: 200px;
                        object-fit: cover;
                        border-radius: 16px 16px 0 0;
                        filter: brightness(0.92);
                        transition: 0.25s ease;
                      "
                                    onmouseover="this.style.filter='brightness(1)'"
                                    onmouseout="this.style.filter='brightness(0.92)'" />
                            </div>

                            <!-- Content -->
                            <div class="p-4 text-center">
                                <h5 class="fw-semibold mb-2" style="color: var(--mint); font-size: 1.2rem">
                                    Weight Loss
                                </h5>

                                <p class="mb-3" style="color: #cfd9e1; font-size: 0.9rem">
                                    Safe, clinically-approved treatment options.
                                </p>

                                <div class="d-inline-flex align-items-center gap-1 fw-semibold"
                                    style="color: var(--mint); font-size: 0.9rem">
                                    View options →
                                </div>
                            </div>
                        </div>
                    </a>
                </div>
            </div>
        </div>
    </section>
    <div class="p-3 d-flex justify-content-center">
        <a href="{{ route('redesigned.treatments') }}" class="btn-browse">Browse more</a>
    </div>

    <!-- WHY CHOOSE US -->
    <section id="why" class="py-5" style="background: linear-gradient(90deg, #2f3a3d 0%, #63c999 100%)">
        <div class="container">
            <div class="fw-semibold text-uppercase" style="color: var(--mint); font-size: 0.95rem">
                Why choose us
            </div>

            <h2 class="text-white mt-2 mb-4" style="font-size: 28px">
                Discreet, professional care — always
            </h2>

            <div class="row g-4">
                <!-- Pillar -->
                <div class="col-md-6 col-lg-3">
                    <div class="p-3 h-100"
                        style="
                  background: #2f3a3d;
                  border: 1px solid rgba(255, 255, 255, 0.06);
                  border-radius: var(--radius);
                ">
                        <div class="ico mb-2"
                            style="
                    width: 40px;
                    height: 40px;
                    border-radius: 10px;
                    background: rgba(127, 225, 176, 0.12);
                    color: var(--mint);
                    display: grid;
                    place-items: center;
                  ">
                            ⚕️
                        </div>
                        <h3 class="h5">GPhC registered</h3>
                        <p class="text-light mb-0">
                            UK-regulated online pharmacy following strict clinical
                            standards.
                        </p>
                    </div>
                </div>

                <!-- Pillar -->
                <div class="col-md-6 col-lg-3">
                    <div class="p-3 h-100"
                        style="
                  background: #2f3a3d;
                  border: 1px solid rgba(255, 255, 255, 0.06);
                  border-radius: var(--radius);
                ">
                        <div class="ico mb-2"
                            style="
                    width: 40px;
                    height: 40px;
                    border-radius: 10px;
                    background: rgba(127, 225, 176, 0.12);
                    color: var(--mint);
                    display: grid;
                    place-items: center;
                  ">
                            🔒
                        </div>
                        <h3 class="h5">Private & secure</h3>
                        <p class="text-light mb-0">
                            Bank-level encryption and confidential assessment of your
                            data.
                        </p>
                    </div>
                </div>

                <!-- Pillar -->
                <div class="col-md-6 col-lg-3">
                    <div class="p-3 h-100"
                        style="
                  background: #2f3a3d;
                  border: 1px solid rgba(255, 255, 255, 0.06);
                  border-radius: var(--radius);
                ">
                        <div class="ico mb-2"
                            style="
                    width: 40px;
                    height: 40px;
                    border-radius: 10px;
                    background: rgba(127, 225, 176, 0.12);
                    color: var(--mint);
                    display: grid;
                    place-items: center;
                  ">
                            📦
                        </div>
                        <h3 class="h5">Discreet delivery</h3>
                        <p class="text-light mb-0">
                            Plain, unbranded packaging with tracked shipping options.
                        </p>
                    </div>
                </div>

                <!-- Pillar -->
                <div class="col-md-6 col-lg-3">
                    <div class="p-3 h-100"
                        style="
                  background: #2f3a3d;
                  border: 1px solid rgba(255, 255, 255, 0.06);
                  border-radius: var(--radius);
                ">
                        <div class="ico mb-2"
                            style="
                    width: 40px;
                    height: 40px;
                    border-radius: 10px;
                    background: rgba(127, 225, 176, 0.12);
                    color: var(--mint);
                    display: grid;
                    place-items: center;
                  ">
                            💬
                        </div>
                        <h3 class="h5">Pharmacist support</h3>
                        <p class="text-light mb-0">
                            Message our pharmacist for advice before or after treatment.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- TESTIMONIALS -->
    <section class="py-5" style="background: var(--off); color: var(--ink)">
        <div class="container">
            <div class="fw-semibold text-uppercase" style="color: #0d7b56; font-size: 0.95rem">
                Trusted by patients
            </div>

            <h2 class="mt-2 mb-4" style="font-size: 28px">
                Real people, real confidence
            </h2>

            <div class="row g-4">
                <div class="col-md-4">
                    <div class="p-3 h-100 bg-white"
                        style="
                  border-radius: var(--radius-sm);
                  border: 1px solid #e7ebee;
                  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
                ">
                        <div class="stars mb-2" style="color: #1e885f">★★★★★</div>
                        “The process was discreet and simple from start to finish.
                        Highly recommend.”
                        <footer class="mt-2 fw-semibold" style="color: #6fcb9f">
                            — Mark A.
                        </footer>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="p-3 h-100 bg-white"
                        style="
                  border-radius: var(--radius-sm);
                  border: 1px solid #e7ebee;
                  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
                ">
                        <div class="stars mb-2" style="color: #1e885f">★★★★★</div>
                        “Professional service and fast delivery. Great support from the
                        pharmacist.”
                        <footer class="mt-2 fw-semibold" style="color: #6fcb9f">
                            — Julia R.
                        </footer>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="p-3 h-100 bg-white"
                        style="
                  border-radius: var(--radius-sm);
                  border: 1px solid #e7ebee;
                  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
                ">
                        <div class="stars mb-2" style="color: #1e885f">★★★★★</div>
                        “Clear guidance, secure process, and the packaging was totally
                        private.”
                        <footer class="mt-2 fw-semibold" style="color: #6fcb9f">
                            — Omar S.
                        </footer>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection