@extends('website.layouts.main')

@section('meta_title', 'Product Overview - KiyoHRMS')
@section('meta_description', 'Explore KiyoHRMS features for employee management, attendance, leave, payroll processing, and analytics.')

@section('content')
<section class="section-space brand-gradient">
    <div class="container text-center">
        <h1 class="display-5 fw-bold mb-3">One platform for your entire <span class="text-kiyo">HR workflow</span></h1>
        <p class="lead text-muted col-lg-8 mx-auto">From onboarding to monthly payroll, KiyoHRMS keeps every people operation connected, visible, and compliant.</p>
    </div>
</section>

<section class="section-space">
    <div class="container">
        <div class="row g-4">
            <div class="col-md-6 col-lg-4">@include('website.partials.feature-card', ['icon' => 'bi-person-badge', 'title' => 'Employee Management', 'description' => 'Centralized employee records, documents, and lifecycle actions.', 'iconBackgroundClass' => 'bg-primary-subtle', 'iconTextClass' => 'text-primary', 'titleClass' => 'text-primary', 'cardClass' => 'feature-card-thick-top accent-primary'])</div>
            <div class="col-md-6 col-lg-4">@include('website.partials.feature-card', ['icon' => 'bi-stopwatch', 'title' => 'Attendance & Shift Tracking', 'description' => 'Track attendance by shift, location, and regularization flow.', 'iconBackgroundClass' => 'bg-warning-subtle', 'iconTextClass' => 'text-warning', 'titleClass' => 'text-warning-emphasis', 'cardClass' => 'feature-card-thick-top accent-warning'])</div>
            <div class="col-md-6 col-lg-4">@include('website.partials.feature-card', ['icon' => 'bi-calendar2-week', 'title' => 'Leave Management', 'description' => 'Configurable leave policies with approval workflows.', 'iconBackgroundClass' => 'bg-info-subtle', 'iconTextClass' => 'text-info', 'titleClass' => 'text-info-emphasis', 'cardClass' => 'feature-card-thick-top accent-info'])</div>
            <div class="col-md-6 col-lg-4">@include('website.partials.feature-card', ['icon' => 'bi-receipt', 'title' => 'Payroll Processing', 'description' => 'Automate monthly payroll calculations and payslips.', 'iconBackgroundClass' => 'bg-danger-subtle', 'iconTextClass' => 'text-danger', 'titleClass' => 'text-danger', 'cardClass' => 'feature-card-thick-top accent-danger'])</div>
            <div class="col-md-6 col-lg-4">@include('website.partials.feature-card', ['icon' => 'bi-graph-up-arrow', 'title' => 'Reports & Analytics', 'description' => 'Get workforce insights for better business decisions.', 'iconBackgroundClass' => 'bg-secondary-subtle', 'iconTextClass' => 'text-secondary', 'titleClass' => 'text-secondary', 'cardClass' => 'feature-card-thick-top accent-secondary'])</div>
            <div class="col-md-6 col-lg-4">@include('website.partials.feature-card', ['icon' => 'bi-shield-lock', 'title' => 'Role-based Access', 'description' => 'Secure sensitive HR and salary data with permission controls.', 'iconBackgroundClass' => 'bg-success-subtle', 'iconTextClass' => 'text-success', 'titleClass' => 'text-success', 'cardClass' => 'feature-card-thick-top accent-success'])</div>
        </div>
    </div>
</section>

<section class="section-space soft-bg">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold section-title-underline">How KiyoHRMS works</h2>
        </div>
        <div class="row g-4">
            <div class="col-md-3"><div class="card-soft p-4 h-100 feature-card-thick-top accent-success"><span class="badge text-bg-success mb-2">Step 1</span><h3 class="h5 text-success">Onboard</h3><p class="text-muted mb-0">Add employees, departments, and salary structures.</p></div></div>
            <div class="col-md-3"><div class="card-soft p-4 h-100 feature-card-thick-top accent-primary"><span class="badge text-bg-primary mb-2">Step 2</span><h3 class="h5 text-primary">Track</h3><p class="text-muted mb-0">Capture attendance, shifts, and leave in real time.</p></div></div>
            <div class="col-md-3"><div class="card-soft p-4 h-100 feature-card-thick-top accent-warning"><span class="badge text-bg-warning mb-2">Step 3</span><h3 class="h5 text-warning-emphasis">Process</h3><p class="text-muted mb-0">Run payroll with automated earnings and deductions.</p></div></div>
            <div class="col-md-3"><div class="card-soft p-4 h-100 feature-card-thick-top accent-info"><span class="badge text-bg-info mb-2">Step 4</span><h3 class="h5 text-info-emphasis">Analyze</h3><p class="text-muted mb-0">Review reports and improve HR efficiency each month.</p></div></div>
        </div>
    </div>
</section>

<section class="section-space">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold section-title-underline">UI previews</h2>
        </div>
        <div class="row g-4">
            <div class="col-lg-6"><img src="{{ asset('website/images/product-employee-directory.svg') }}" class="img-fluid rounded-4 card-soft" alt="Employee directory UI preview"></div>
            <div class="col-lg-6"><img src="{{ asset('website/images/product-payroll-cycle.svg') }}" class="img-fluid rounded-4 card-soft" alt="Payroll cycle UI preview"></div>
        </div>
    </div>
</section>

@include('website.partials.cta-banner', ['title' => 'See KiyoHRMS in action', 'subtitle' => 'Book a guided demo to discover the best HR and payroll workflow for your team.'])
@endsection