@extends('layouts.default')

@section('content')

<div class="pf-rd">
    <div class="pf-rd-wrap">

        <h1 class="pf-rd-heading">{{ __('rd-pipeline.page_title') }}</h1>

        <section class="pf-rd-hero">
            <div class="pf-rd-hero-text">
                <p class="pf-rd-eyebrow">{{ __('rd-pipeline.project_code') }}</p>
                <h2>{{ __('rd-pipeline.working_title') }}</h2>
                <p class="pf-rd-hero-p">{!! __('rd-pipeline.hero_text') !!}</p>
            </div>
            <div class="pf-rd-hero-img">
                <img src="{{ asset('images/rd/pharmacist-lab-tech.jpg') }}" alt="{{ __('rd-pipeline.image_alt_researcher') }}">
            </div>
        </section>

        <section class="pf-rd-panel">
            <div class="pf-rd-body">

                <p>{!! __('rd-pipeline.focus_text') !!}</p>

                <p>{!! __('rd-pipeline.project_description') !!}</p>

                <p>{{ __('rd-pipeline.strategy_text') }}</p>

                <p>{{ __('rd-pipeline.business_text') }}</p>

                <ul class="pf-rd-contact">
                    <li>
                        <i class="fa fa-envelope" aria-hidden="true"></i>
                        <strong>{{ __('rd-pipeline.contact_label') }}</strong>
                        <a href="mailto:info@panamfarma.com">info@panamfarma.com</a>
                    </li>

                    <li>
                        <i class="fa fa-phone" aria-hidden="true"></i>
                        <strong>{{ __('rd-pipeline.telephone_label') }}</strong>
                        <a href="tel:+523223080021">+52 322 308 0021</a> |
                        <a href="tel:+17133229272">+1 713 322 9272</a>
                    </li>

                    <li>
                        <i class="fa fa-globe" aria-hidden="true"></i>
                        <strong>{{ __('rd-pipeline.whatsapp_label') }}</strong>
                        <a
                            href="https://wa.me/14097899957"
                            target="_blank"
                            rel="noopener"
                        >+1 409 789 9957</a>
                    </li>
                </ul>

                <div class="pf-rd-cta">
                    <a href="{{ url('/contact-us') }}" class="pf-rd-btn">
                        {{ __('rd-pipeline.contact_button') }}
                    </a>
                </div>

            </div>
        </section>

       
        <div class="pf-rd-image">
            <img src="{{ asset('images/rd/clean_lab-768x432.webp') }}" alt="Pharmaceutical manufacturing and development laboratory" loading="lazy">
        </div>

       
        <section class="pf-rd-panel pf-rd-closing">
            <h2 class="pf-rd-label">{{ __('rd-pipeline.page_title') }}</h2>
            <h3>{{ __('rd-pipeline.company_name') }}</h3>
            <a href="{{ url('/contact-us') }}" class="pf-rd-btn">{{ __('rd-pipeline.contact_button') }}</a>
        </section>

    </div>
</div>
<script>
    document.addEventListener("DOMContentLoaded", () => {
    const image = document.querySelector(".pf-rd-image img");

    if (!image) return;

    window.addEventListener("scroll", () => {
        const rect = image.getBoundingClientRect();
        const windowHeight = window.innerHeight;

        // Animation tab chale jab image viewport mein ho
        if (rect.top < windowHeight && rect.bottom > 0) {
            const progress =
                (windowHeight - rect.top) /
                (windowHeight + rect.height);

            const moveX = (progress - 0.5) * 80;

            image.style.transform = `translateX(${moveX}px)`;
        }
    }, { passive: true });
});
</script>
@stop