@extends('landlord.public-section.layouts.modern')
@section('body-class', 'pp-workday-home')
@push('css')
<link rel="stylesheet" href="{{ asset('saas-assets/workday-home.css') }}?v={{ filemtime(public_path('saas-assets/workday-home.css')) }}">
@endpush
@push('scripts')
<script src="{{ asset('saas-assets/workday-home.js') }}?v={{ filemtime(public_path('saas-assets/workday-home.js')) }}" defer></script>
@endpush
@section('content')
@php
    $trialPackage = $packages->firstWhere('is_free_trial', true);
    $startUrl = route('public.signup', $trialPackage ? ['package'=>$trialPackage->id] : []);
    $defaultHero = !$hero?->heading || in_array($hero->heading, [
        'A better workday starts with better HR.',
        'PeoplePro - best HRM SaaS with payroll, attendance and project management.',
    ], true);
    $subheading = $hero?->sub_heading;
    if (!$subheading || $subheading === 'Unlock the full potential of your business with PeoplePro SaaS application. Streamline HR processes, effortlessly manage attendance, and seamlessly conquer projects. Enhance collaboration and productivity in one interactive platform, making your organization more efficient and successful than ever before.') {
        $subheading = 'Bring employee records, attendance, leave and payroll together. Give your team a simpler way to work, from the first clock-in to the next payslip.';
    }
@endphp
<section class="wd-hero">
    <div class="pp-container">
        <a href="#features" class="wd-intro"><span class="wd-status-dot" aria-hidden="true"></span>{{ __('A connected HR workspace') }}<span aria-hidden="true">↗</span></a>
        <h1>@if($defaultHero){{ __('Your people. Your workday.') }}<br><span>{{ __('One connected workspace.') }}</span>@else{{ __($hero->heading) }}@endif</h1>
        <p class="wd-hero-description">{{ __($subheading) }}</p>
        <div class="wd-hero-actions">
            <a class="pp-button" href="{{ $startUrl }}">{{ $trialPackage ? __('Start your :days-day trial', ['days'=>$trialDays]) : __('Create your workspace') }}<span aria-hidden="true">↗</span></a>
            <a class="pp-button pp-button-outline" href="#features"><span class="wd-play" aria-hidden="true">▷</span>{{ __('Explore the workspace') }}</a>
        </div>
        <ul class="wd-hero-points"><li>{{ __('Day and night shifts') }}</li><li>{{ __('Employee self service') }}</li><li>{{ __('Plans that fit your team') }}</li></ul>
        <div class="wd-product-stage">
            <div class="wd-product-frame">
                <div class="wd-browser-bar"><span class="wd-window-dots" aria-hidden="true"><i></i><i></i><i></i></span><span>{{ __('Your team, at a glance') }}</span><span class="wd-preview-label">{{ __('Product preview') }}</span></div>
                <picture><source media="(max-width:540px)" srcset="{{ asset('saas-assets/product-preview/dashboard-mobile.jpg') }}?v={{ filemtime(public_path('saas-assets/product-preview/dashboard-mobile.jpg')) }}"><img class="wd-dashboard-image" src="{{ asset('saas-assets/product-preview/dashboard.jpg') }}?v={{ filemtime(public_path('saas-assets/product-preview/dashboard.jpg')) }}" alt="{{ __('PeoplePro HR dashboard with employee, attendance and payroll summaries') }}" width="1265" height="712" fetchpriority="high"></picture>
            </div>
            <div class="wd-shift-note"><span class="wd-moon" aria-hidden="true">☾</span><div><small>{{ __('Night shifts, covered.') }}</small><strong><bdi>22:00</bdi><span aria-hidden="true">→</span><bdi>06:00</bdi></strong><span>{{ __('One shift. Two calendar days.') }}</span></div><span class="wd-note-check" aria-hidden="true">✓</span></div>
            <div class="wd-team-note"><span class="wd-note-symbol" aria-hidden="true">✦</span><div><strong>{{ __('A little more clarity.') }}</strong><span>{{ __('People, attendance and payroll in view.') }}</span></div></div>
        </div>
        <p class="wd-preview-caption">{{ __('Illustrative workspace with sample data. Available modules depend on your plan.') }}</p>
    </div>
</section>
<div class="wd-workflow-strip"><div class="pp-container"><span>{{ __('Built for the whole workday') }}</span><strong>{{ __('People') }}</strong><i aria-hidden="true"></i><strong>{{ __('Attendance') }}</strong><i aria-hidden="true"></i><strong>{{ __('Leave') }}</strong><i aria-hidden="true"></i><strong>{{ __('Payroll') }}</strong><i aria-hidden="true"></i><strong>{{ __('Reports') }}</strong></div></div>

<section class="pp-section wd-benefits">
    <div class="pp-container">
        <div class="wd-section-heading"><span class="pp-eyebrow">{{ __('WHY PEOPLEPRO') }}</span><h2>{{ __('Less scattered admin.') }}<br><span>{{ __('More space for your people.') }}</span></h2><p>{{ __('Bring the everyday decisions, records and requests into one place your team can get to know.') }}</p></div>
        <div class="wd-benefit-grid">
            @foreach([
                ['01','People, all in one place','Keep employee details, documents and your company structure organized.'],
                ['02','A workspace of your own','Keep your company settings, records and language choices within your own workspace.'],
                ['03','Clarity for the whole team','Give HR and employees access to the tools they need, with roles and company access that you control.']
            ] as [$number,$heading,$description])
            <article class="wd-benefit"><span class="wd-benefit-icon" aria-hidden="true">@include('landlord.public-section.pages.home-parts.icon', ['name'=>$number])</span><h3>{{ __($heading) }}</h3><p>{{ __($description) }}</p></article>
            @endforeach
        </div>
    </div>
</section>

<section id="features" class="pp-section wd-capabilities">
    <div class="pp-container">
        <div class="wd-section-heading"><span class="pp-eyebrow">{{ __('EXPLORE THE WORKSPACE') }}</span><h2>{{ __('All the moving parts.') }}<br><span>{{ __('One familiar place.') }}</span></h2><p>{{ __('Take a closer look at the tools behind a better workday. Choose a module to see it in action.') }}</p></div>
        <div class="wd-explorer" data-module-explorer>
            <div class="wd-module-tabs" role="tablist" aria-label="{{ __('HR modules') }}">
                @foreach($productModules as $module)
                <button type="button" role="tab" id="module-tab-{{ $module['id'] }}" aria-controls="module-panel-{{ $module['id'] }}" aria-selected="{{ $loop->first ? 'true' : 'false' }}" tabindex="{{ $loop->first ? 0 : -1 }}" data-module-tab="{{ $module['id'] }}">{{ __($module['label']) }}</button>
                @endforeach
            </div>
            @foreach($productModules as $module)
            <div id="module-panel-{{ $module['id'] }}" class="wd-module-panel" role="tabpanel" aria-labelledby="module-tab-{{ $module['id'] }}" tabindex="0" @if(!$loop->first) hidden @endif>
                <div class="wd-module-copy"><span class="pp-eyebrow">{{ __($module['label']) }}</span><h3>{{ __($module['title']) }}</h3><p>{{ __($module['description']) }}</p><ul class="wd-check-list">@foreach($module['points'] as $point)<li>{{ __($point) }}</li>@endforeach</ul><a href="#pricing" class="wd-text-link">{{ __('Find the plan for your team') }}<span aria-hidden="true">↗</span></a></div>
                <figure class="wd-module-figure"><div class="wd-small-browser"><span class="wd-window-dots" aria-hidden="true"><i></i><i></i><i></i></span><span>{{ __('Product preview') }}</span></div><img src="{{ asset('saas-assets/product-preview/'.$module['image']) }}?v={{ filemtime(public_path('saas-assets/product-preview/'.$module['image'])) }}" alt="{{ __(':module workspace preview with sample data', ['module'=>__($module['label'])]) }}" width="1265" height="712" loading="lazy"></figure>
            </div>
            @endforeach
        </div>
        <p class="wd-module-footnote">{{ __('Choose a package to see its included modules, user accounts and employee limits.') }}</p>
    </div>
</section>

<section class="pp-section wd-night-section"><div class="pp-container wd-spotlight-grid">
    <div><span class="pp-eyebrow">{{ __('BUILT AROUND REAL WORKDAYS') }}</span><h2>{{ __('Work does not always') }}<br><span>{{ __('end at midnight.') }}</span></h2><p>{{ __('An overnight shift is one workday. Keep the previous evening’s clock-in and the next morning’s clock-out together, under the day the shift starts.') }}</p><ul class="wd-check-list"><li>{{ __('Shifts that cross midnight') }}</li><li>{{ __('Attendance corrections and CSV imports') }}</li><li>{{ __('A clear record for HR to review') }}</li></ul><a href="#features" data-open-module="attendance" class="wd-text-link">{{ __('Explore attendance') }}<span aria-hidden="true">↗</span></a></div>
    <div class="wd-night-visual" aria-label="{{ __('Example overnight shift: clock in at 22:00 and clock out at 06:00 the next day') }}">
        <div class="wd-night-top"><span>{{ __('Night shift') }}</span><span class="wd-night-icon" aria-hidden="true">☾</span></div>
        <h3>{{ __('A new day.') }}<br>{{ __('The same shift.') }}</h3>
        <div class="wd-shift-timeline"><div><span class="wd-timeline-dot"></span><small>{{ __('Clock in') }}</small><strong><bdi>22:00</bdi></strong><span>{{ __('Shift start day') }}</span></div><span class="wd-midnight"><bdi>00:00</bdi><small>{{ __('Midnight') }}</small></span><div><span class="wd-timeline-dot end"></span><small>{{ __('Clock out') }}</small><strong><bdi>06:00</bdi></strong><span>{{ __('The next morning') }}</span></div></div>
        <div class="wd-night-bottom"><span aria-hidden="true">✓</span>{{ __('One attendance record for the shift') }}</div>
    </div>
</div></section>

<section class="pp-section wd-self-service"><div class="pp-container wd-spotlight-grid">
    <figure class="wd-portal-visual"><div class="wd-portal-label"><span class="wd-status-dot" aria-hidden="true"></span>{{ __('Employee self service') }}</div><img src="{{ asset('saas-assets/product-preview/employee-portal.jpg') }}?v={{ filemtime(public_path('saas-assets/product-preview/employee-portal.jpg')) }}" alt="{{ __('Employee dashboard with personal attendance, payslips and assigned work') }}" width="1280" height="900" loading="lazy"><figcaption>{{ __('A familiar place for everyday requests.') }}</figcaption></figure>
    <div><span class="pp-eyebrow">{{ __('FOR EVERYONE ON YOUR TEAM') }}</span><h2>{{ __('HR that brings') }}<br><span>{{ __('your people in.') }}</span></h2><p>{{ __('Let employees review their information, clock in and out, request leave and find their payslips through the features you make available to them.') }}</p><ul class="wd-check-list"><li>{{ __('Personal information and payslips') }}</li><li>{{ __('Attendance and leave requests') }}</li><li>{{ __('Assigned work and company updates') }}</li></ul><a href="{{ $startUrl }}" class="wd-text-link">{{ __('Bring your team together') }}<span aria-hidden="true">↗</span></a></div>
</div></section>

<section class="pp-section wd-get-started"><div class="pp-container"><div class="wd-section-heading"><span class="pp-eyebrow">{{ __('A SIMPLE START') }}</span><h2>{{ __('From choosing a plan') }}<br><span>{{ __('to your first workday.') }}</span></h2></div><ol class="wd-start-steps">
    @foreach([['Find your fit','Choose a plan for the size and needs of your team.'],['Make it yours','Create your workspace and set up your organization.'],['Bring your people in','Add employees, set up shifts and start your everyday HR workflows.']] as [$title,$description])
    <li><span>{{ str_pad($loop->iteration, 2, '0', STR_PAD_LEFT) }}</span><h3>{{ __($title) }}</h3><p>{{ __($description) }}</p></li>
    @endforeach
</ol></div></section>

@include('landlord.public-section.pages.home-parts.pricing')
@include('landlord.public-section.pages.home-parts.faq')

<section class="pp-section wd-final-section"><div class="pp-container"><div class="wd-final-cta"><span class="pp-eyebrow">{{ __('YOUR NEXT CHAPTER') }}</span><h2>{{ __('A calmer workday') }}<br>{{ __('starts here.') }}</h2><p>{{ __('Give your people and your HR team a place to work better together.') }}</p><a href="{{ $startUrl }}" class="pp-button">{{ __('Create your workspace') }}<span aria-hidden="true">↗</span></a><div class="wd-cta-note">{{ __('Choose your plan. Make it yours. Bring your people in.') }}</div></div></div></section>
@endsection