@extends('website.layouts.main')

@section('meta_title', 'KiyoHRMS - Smart HR & Payroll for Growing Businesses')
@section('meta_description', 'KiyoHRMS helps Indian businesses automate HR, attendance, leave, and payroll with compliance-ready workflows.')

@section('content')
<section class="section-space brand-gradient" style="padding: 3rem 0rem">
    <div class="container">
        <div class="row align-items-center g-4">
            <div class="col-lg-6 col-md-6">
                <h1 class="display-5 fw-bold mb-3 hr-title">Smart HR & Payroll for <span class="text-kiyo">Growing Businesses</span></h1>
                <p class="lead text-muted mb-4">Streamline employee management, attendance, leave, and salary processing in one secure platform designed for India-first compliance.</p>
                <div class="d-flex flex-wrap gap-2">
                    <a href="{{ route('register') }}" class="btn btn-kiyo btn-lg px-4">Start Free Trial <i class="bi bi-arrow-right-short"></i></a>
                    <a href="{{ route('website.contact') }}" class="btn demo-btn btn-lg px-4">Book Demo <i class="bi bi-calendar-check"></i></a>
                </div>
            </div>
            <div class="col-lg-6 col-md-6">
                <div class="card border-0 p-3 bg-transparent">
                    <img src="{{ asset('website/images/image.png') }}" class="img-fluid rounded-4 image-rotate" alt="KiyoHRMS product dashboard preview">
                </div>
            </div>
        </div>
    </div>
</section>

{{-- <section class="py-5 border-bottom">
    <div class="container">
        <p class="text-center text-muted mb-4">Trusted by fast-growing teams across India</p>
        <div class="row row-cols-2 row-cols-md-4 row-cols-lg-6 g-3 text-center">
            @for($i = 1; $i <= 6; $i++)
                <div class="col"><div class="py-3 border rounded-3 bg-light">Logo {{ $i }}</div></div>
            @endfor
        </div>
    </div>
</section> --}}

<section class="section-space">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold hr-title section-title-underline">Everything your HR team needs</h2>
        </div>
        <div class="row g-4">
            <div class="col-md-6 col-lg-3">@include('website.partials.feature-card', ['icon' => 'bi-people', 'title' => 'Employee Management', 'description' => 'Digitize employee records, onboarding, and lifecycle updates.', '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-3">@include('website.partials.feature-card', ['icon' => 'bi-calendar-check', 'title' => 'Attendance', 'description' => 'Track shifts, working hours, and regularizations with ease.', '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-3">@include('website.partials.feature-card', ['icon' => 'bi-airplane', 'title' => 'Leave Tracking', 'description' => 'Enable policy-driven leave requests and approvals.', '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-3">@include('website.partials.feature-card', ['icon' => 'bi-cash-stack', 'title' => 'Payroll Automation', 'description' => 'Run accurate monthly payroll and generate payslips quickly.', 'iconBackgroundClass' => 'bg-danger-subtle', 'iconTextClass' => 'text-danger', 'titleClass' => 'text-danger', 'cardClass' => 'feature-card-thick-top accent-danger'])</div>
        </div>
    </div>
</section>

<section class="section-space soft-bg">
    <div class="container">
        <div class="row g-4">
            <div class="col-md-4">@include('website.partials.feature-card', ['icon' => 'bi-clock-history', 'title' => 'Save Time', 'description' => 'Automate repetitive HR and payroll tasks to free up your team.', 'iconBackgroundClass' => 'bg-secondary-subtle', 'iconTextClass' => 'text-secondary', 'titleClass' => 'text-secondary', 'cardClass' => 'feature-card-thick-top accent-secondary'])</div>
            <div class="col-md-4">@include('website.partials.feature-card', ['icon' => 'bi-shield-check', 'title' => 'Reduce Errors', 'description' => 'Use standardized workflows to improve payroll accuracy.', 'iconBackgroundClass' => 'bg-success-subtle', 'iconTextClass' => 'text-success', 'titleClass' => 'text-success', 'cardClass' => 'feature-card-thick-top accent-success'])</div>
            <div class="col-md-4">@include('website.partials.feature-card', ['icon' => 'bi-file-earmark-check', 'title' => 'Compliance Ready (India)', 'description' => 'Build payroll cycles aligned with statutory and tax reporting needs.', 'iconBackgroundClass' => 'bg-dark-subtle', 'iconTextClass' => 'text-dark', 'titleClass' => 'text-dark', 'cardClass' => 'feature-card-thick-top accent-dark'])</div>
        </div>
    </div>
</section>

<section class="section-space">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold hr-title section-title-underline">KiyoHR in Action</h2>
        </div>
        <div class="row g-4">
            <div class="col-md-4"><img src="{{ asset('website/images/home-attendance.svg') }}" class="img-fluid rounded-4 card-soft" alt="Attendance module screenshot"></div>
            <div class="col-md-4"><img src="{{ asset('website/images/home-payroll.svg') }}" class="img-fluid rounded-4 card-soft" alt="Payroll module screenshot"></div>
            <div class="col-md-4"><img src="{{ asset('website/images/home-employee-profile.svg') }}" class="img-fluid rounded-4 card-soft" alt="Employee profile screenshot"></div>
        </div>
    </div>
</section>

<section class="section-space soft-bg">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="fw-bold hr-title section-title-underline">What customers say</h2>
        </div>
        <div class="row g-4">
            <div class="col-md-4"><div class="card-soft p-4 h-100 feature-card-thick-top accent-primary"><p class="mb-3">“KiyoHRMS reduced our payroll processing time by over 60%.”</p><strong class="text-primary">HR Head, IT Services Firm</strong></div></div>
            <div class="col-md-4"><div class="card-soft p-4 h-100 feature-card-thick-top accent-warning"><p class="mb-3">“The leave and attendance workflows are simple and reliable.”</p><strong class="text-warning-emphasis">COO, Manufacturing SME</strong></div></div>
            <div class="col-md-4"><div class="card-soft p-4 h-100 feature-card-thick-top accent-info"><p class="mb-3">“Great support team and an easy onboarding experience.”</p><strong class="text-info-emphasis">Founder, D2C Startup</strong></div></div>
        </div>
    </div>
</section>

{{-- <section class="section-space">
    <div class="container">
        <div class="d-flex justify-content-between align-items-end flex-wrap gap-2 mb-4">
            <h2 class="fw-bold mb-0 hr-title">Pricing preview</h2>
            <a href="{{ route('website.pricing') }}" class="text-decoration-none text-kiyo fw-semibold">View full pricing <i class="bi bi-arrow-right"></i></a>
        </div>
        <div class="row g-4">
            @forelse($plans as $plan)
                @php
                    $enabledFeatures = $plan->planFeatures
                        ->where('feature_value', '1')
                        ->pluck('feature_key')
                        ->map(fn ($key) => str($key)->replace('_', ' ')->title()->toString())
                        ->take(3)
                        ->values()
                        ->all();
                    $previewFeatures = array_merge(
                        [$plan->employee_limit ? ('Up to ' . $plan->employee_limit . ' employees') : 'Unlimited employees'],
                        $enabledFeatures
                    );
                @endphp
                <div class="col-md-4">
                    @include('website.partials.pricing-card', [
                        'name' => $plan->name,
                        'description' => $plan->description ?: 'Flexible plan for your business.',
                        'monthly' => number_format((float) $plan->base_price_monthly, 0),
                        'yearly' => number_format((float) $plan->base_price_yearly, 0),
                        'currencySymbol' => $plan->currency_symbol ?: '₹',
                        'features' => $previewFeatures,
                        'recommended' => (bool) $plan->is_popular,
                    ])
                </div>
            @empty
                <div class="col-12">
                    <div class="alert alert-info mb-0">No active plans configured yet. Please add plans from Super Admin.</div>
                </div>
            @endforelse
        </div>
    </div>
</section> --}}

@include('website.partials.cta-banner')
@endsection