@extends('layouts.app_rtl')

@section('content')
@php
    $content = $fullTimeLiveInContent ?? [];
    $hero = $content['hero'] ?? [];
    $packages = $content['packages_section'] ?? [];
    $pricing = $content['pricing'] ?? [];
    $contact = $content['contact'] ?? [];
    $comparison = $content['comparison_table_section'] ?? [];
    $pointIcons = ['fa-circle-check', 'fa-globe', 'fa-users', 'fa-shield-heart'];
@endphp
<style>
    .hero-section .hero-btn-whatsapp {
        background: #25D366 !important;
        border-color: #25D366 !important;
        color: #fff !important;
        box-shadow: 0 22px 44px rgba(20, 157, 73, 0.22) !important;
        animation: none !important;
    }
    .hero-section .hero-btn-whatsapp:hover {
        background: #1EBE57 !important;
        border-color: #1EBE57 !important;
        color: #fff !important;
    }
    .contact-strip .strip-box {
        font-size: 20px;
        min-width: 20%;
    }
    .ftl-landing-page .panel-shell {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 250, 254, 0.98) 100%);
        border: 1px solid rgba(62, 115, 218, 0.1);
        box-shadow: 0 20px 46px rgba(18, 27, 45, 0.1);
        padding: 18px 14px 20px;
        border-radius: 26px;
    }
    @media (min-width: 768px) {
        .ftl-landing-page .panel-shell {
            padding: 20px 20px 22px;
        }
    }
    .ftl-landing-page .main-container {
        padding-left: 12px;
        padding-right: 12px;
    }
    @media (min-width: 576px) {
        .ftl-landing-page .main-container {
            padding-left: 16px;
            padding-right: 16px;
        }
    }
    .ftl-landing-page .panel-shell .section-head {
        margin-bottom: 1rem;
    }
    .ftl-landing-page .section-head h2 {
        color: #17385f;
        letter-spacing: -0.02em;
    }
    .ftl-landing-page .section-head p {
        color: #4b5b70;
    }
    .ftl-landing-page .ftl-packages-row > [class*="col-"] {
        display: flex;
        flex-direction: column;
    }
    .ftl-landing-page .service-card {
        width: 100%;
    }
    .ftl-landing-page .ftl-sponsorship-card {
        min-height: 0;
        padding: 1.1rem 0.95rem 1rem;
        border-radius: 22px;
        border: 1px solid rgba(62, 115, 218, 0.14);
        background:
            radial-gradient(120% 80% at 100% 0%, rgba(62, 115, 218, 0.07) 0%, transparent 55%),
            radial-gradient(90% 60% at 0% 100%, rgba(31, 182, 220, 0.06) 0%, transparent 50%),
            linear-gradient(180deg, #ffffff 0%, rgba(248, 251, 255, 0.96) 100%);
        box-shadow:
            0 1px 2px rgba(62, 115, 218, 0.06),
            0 18px 48px rgba(18, 42, 66, 0.1),
            0 6px 16px rgba(18, 27, 45, 0.05);
    }
    .ftl-landing-page .service-card .service-body {
        width: 100%;
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    .ftl-landing-page .ftl-sponsorship-card .service-body {
        flex: 1;
        min-height: 0;
    }
    .ftl-landing-page .ftl-sponsorship-card .ftl-package-grid-wrap {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    .ftl-package-grid-wrap {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
    .ftl-package-grid {
        margin-top: 8px;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        align-items: stretch;
        flex: none;
        width: 100%;
        min-width: 0;
    }
    .ftl-landing-page .ftl-sponsorship-card .ftl-package-grid {
        flex: 1;
    }
    .ftl-package-group {
        margin-top: 0;
        border: 1px solid rgba(62, 115, 218, 0.14);
        border-radius: 12px;
        padding: 10px 10px 8px;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(246, 250, 255, 0.96) 100%);
        height: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
        word-wrap: break-word;
    }
    .service-body .ftl-card-title-wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
        flex-direction: row-reverse;
        margin: 0 0 12px;
        text-align: center;
    }
    .service-body .ftl-card-title-icon {
        width: 48px;
        height: 48px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 247, 255, 0.98) 100%);
        border: none;
        color: #1f58a9;
        font-size: 1.2rem;
        box-shadow:
            0 2px 8px rgba(62, 115, 218, 0.12),
            0 10px 24px rgba(62, 115, 218, 0.1);
    }
    .service-body .ftl-card-title-text {
        font-size: clamp(1.45rem, 2.3vw, 1.85rem);
        font-weight: 900;
        letter-spacing: -0.01em;
        color: #3368d3;
        text-shadow: 0 6px 16px rgba(20, 63, 115, 0.12);
        line-height: 1.15;
    }
    .ftl-package-subtitle {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px;
        flex-direction: row-reverse;
        margin: 0 0 8px;
        padding: 6px 10px;
        border-radius: 999px;
        font-size: clamp(10px, 2.8vw, 11px);
        font-weight: 900;
        color: #1f58a9;
        background: linear-gradient(135deg, rgba(62, 115, 218, 0.12) 0%, rgba(31, 182, 220, 0.1) 100%);
        border: 1px solid rgba(62, 115, 218, 0.18);
        letter-spacing: 0.02em;
        text-align: center;
        line-height: 2.25;
    }
    .ftl-package-subtitle > i {
        font-size: 0.85rem;
        opacity: 0.95;
        color: #1f58a9;
    }
    .ftl-package-group .service-points {
        margin-bottom: 0;
        gap: 8px;
    }
    .ftl-package-group .service-points li {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: clamp(0.85rem, 2.6vw, 0.95rem);
        line-height: 1.45;
        min-width: 0;
    }
    .ftl-package-group .service-points li > i {
        flex-shrink: 0;
        margin-top: 3px;
    }
    .ftl-package-group .service-points li > span {
        flex: 1;
        min-width: 0;
    }
    @media (max-width: 767.98px) {
        .ftl-package-grid {
            grid-template-columns: 1fr;
            gap: 12px;
        }
    }
    .ftl-compare-wrap {
        margin-top: 8px;
        border-radius: 20px;
        border: 1px solid rgba(62, 115, 218, 0.14);
        overflow: hidden;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 250, 254, 0.98) 100%);
        box-shadow: 0 14px 34px rgba(18, 27, 45, 0.08);
    }
    .ftl-compare-table {
        width: 100%;
        border-collapse: collapse;
        margin: 0;
    }
    .ftl-compare-table th,
    .ftl-compare-table td {
        border: 1px solid rgba(40, 88, 146, 0.18);
        padding: 14px 14px;
        vertical-align: top;
    }
    .ftl-compare-corner {
        width: 160px;
        background: linear-gradient(180deg, #f5f9fe 0%, #edf4fb 100%);
    }
    .ftl-compare-table thead th:not(.ftl-compare-corner) {
        background: linear-gradient(135deg, #1fb6dc 0%, #3469d6 42%, #7d5cff 100%);
        color: #fff;
        font-size: 15px;
        font-weight: 900;
        text-align: center;
    }
    .ftl-compare-th {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    .ftl-compare-table tbody th[scope="row"] {
        text-align: right;
        font-size: 14px;
        font-weight: 900;
        color: #17385f;
        background: linear-gradient(180deg, #fbfdff 0%, #f3f8ff 100%);
    }
    .ftl-compare-table tbody td {
        font-size: 14px;
        line-height: 1.7;
        color: #2e4661;
    }
    .ftl-compare-table tbody td:nth-child(3) {
        background: linear-gradient(180deg, rgba(31, 182, 220, 0.06) 0%, rgba(125, 92, 255, 0.05) 100%);
    }
    .ftl-compare-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: grid;
        gap: 8px;
    }
    .ftl-compare-list li {
        display: flex;
        gap: 8px;
        align-items: flex-start;
    }
    .ftl-compare-list i {
        color: #2f78d6;
        margin-top: 3px;
        font-size: 12px;
    }
    .ftl-compare-list strong {
        color: #163e73;
        font-weight: 900;
    }
    .ftl-pricing-table {
        width: 100%;
        border-collapse: collapse;
    }
    .ftl-pricing-table th,
    .ftl-pricing-table td {
        border: 1px solid rgba(40, 88, 146, 0.22);
        padding: 10px 12px;
        text-align: center;
        font-weight: 700;
        color: #183a62;
    }
    .ftl-pricing-table th {
        background: linear-gradient(180deg, #f5f9fe 0%, #edf4fb 100%);
    }
    .ftl-pricing-table th:last-child {
        background: linear-gradient(135deg, #1fb6dc 0%, #3469d6 42%, #7d5cff 100%);
        color: #fff;
    }
    .ftl-pricing-table tbody tr:nth-child(odd) td {
        background: rgba(255, 255, 255, 0.75);
    }
    .ftl-pricing-table tbody tr:nth-child(even) td {
        background: rgba(248, 251, 255, 0.95);
    }
    .ftl-pricing-table tbody tr:hover td {
        background: rgba(230, 241, 255, 0.75);
    }
    .ftl-pricing-box {
        margin-top: 8px;
        padding: 18px 16px 16px;
        border-radius: 18px;
        border: 1px solid rgba(62, 115, 218, 0.14);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(243, 248, 253, 0.96) 100%);
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    .ftl-landing-page .ftl-pricing-box .table-responsive {
        width: 100%;
        max-width: 100%;
    }
    .ftl-landing-page .ftl-pricing-box .ftl-pricing-table {
        width: 100%;
        min-width: 100%;
        table-layout: fixed;
    }
    .ftl-landing-page .ftl-pricing-box .ftl-pricing-table th,
    .ftl-landing-page .ftl-pricing-box .ftl-pricing-table td {
        vertical-align: middle;
        overflow-wrap: anywhere;
    }
    @media (max-width: 767.98px) {
        .ftl-pricing-table th,
        .ftl-pricing-table td {
            font-size: 13px;
            padding: 8px 6px;
        }
    }
    .ftl-pricing-title {
        margin: 0 0 12px;
        text-align: center;
        font-size: 1.35rem;
        font-weight: 900;
        color: var(--dark);
    }
    .ftl-package-box-title {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        flex-wrap: wrap;
        margin: 0 0 1rem;
        text-align: center;
    }
    .ftl-package-box-title-icon {
        width: 46px;
        height: 46px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.95) 0%, rgba(240, 247, 255, 0.98) 100%);
        border: none;
        color: #1f58a9;
        font-size: 1.15rem;
        box-shadow:
            0 2px 8px rgba(62, 115, 218, 0.12),
            0 10px 24px rgba(62, 115, 218, 0.1);
    }
    .ftl-package-th-inner {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        flex-wrap: wrap;
    }
    .ftl-package-th-inner i {
        font-size: 1.05rem;
        opacity: 0.95;
    }
    .ftl-package-cell {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .ftl-package-cell > i {
        color: #2f78d6;
        margin-top: 3px;
        flex-shrink: 0;
    }
    .ftl-package-compare-row {
        margin-top: 8px;
        --ftl-package-table-fs: clamp(0.82rem, 0.72rem + 0.35vw, 0.95rem);
    }
    .ftl-package-compare-row .ftl-package-compare-wrap {
        margin-top: 0;
        margin-bottom: 0;
        height: 100%;
        border: none;
        border-radius: 22px;
        padding: 1.35rem 1.15rem 1.2rem;
        overflow: hidden;
        background:
            radial-gradient(120% 80% at 100% 0%, rgba(62, 115, 218, 0.07) 0%, transparent 55%),
            radial-gradient(90% 60% at 0% 100%, rgba(31, 182, 220, 0.06) 0%, transparent 50%),
            linear-gradient(180deg, #ffffff 0%, rgba(248, 251, 255, 0.96) 100%);
        box-shadow:
            0 1px 2px rgba(62, 115, 218, 0.06),
            0 18px 48px rgba(18, 42, 66, 0.1),
            0 6px 16px rgba(18, 27, 45, 0.05);
    }
    .ftl-package-compare-row .ftl-package-compare-table {
        font-size: var(--ftl-package-table-fs);
        border-radius: 14px;
        overflow: hidden;
    }
    .ftl-package-compare-row .ftl-package-compare-table th,
    .ftl-package-compare-row .ftl-package-compare-table td {
        padding: 8px 9px;
    }
    .ftl-package-compare-wrap {
        margin-top: 10px;
        margin-bottom: 18px;
    }
    .ftl-package-compare-table {
        width: 100%;
        border-collapse: collapse;
        direction: rtl;
    }
    .ftl-package-compare-table th,
    .ftl-package-compare-table td {
        border: 1px solid rgba(40, 88, 146, 0.22);
        padding: 10px 12px;
        vertical-align: top;
        text-align: right;
        color: #203a57;
    }
    .ftl-package-compare-table thead th {
        color: #fff;
        font-weight: 900;
        text-align: center;
    }
    .ftl-package-compare-table tbody tr:nth-child(odd) td {
        background: rgba(255, 255, 255, 0.75);
    }
    .ftl-package-compare-table tbody tr:nth-child(even) td {
        background: rgba(248, 251, 255, 0.95);
    }
    .ftl-package-cell-stack {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .ftl-package-compare-row .ftl-package-compare-table thead tr {
        background: linear-gradient(135deg, #1fb6dc 0%, #3469d6 42%, #7d5cff 100%);
    }
    .ftl-package-compare-row .ftl-package-compare-table thead th {
        background: transparent;
        border-left: none;
        border-right: none;
        border-bottom: none;
    }
    .ftl-package-compare-row .ftl-package-compare-table th,
    .ftl-package-compare-row .ftl-package-compare-table td {
        border-left: none;
        border-right: none;
    }
    .ftl-package-compare-row .ftl-package-compare-table tbody td {
        border-top: none;
        border-bottom: 1px solid rgba(40, 88, 146, 0.07);
    }
    .ftl-package-compare-row .ftl-package-compare-table tbody tr:last-child td {
        border-bottom: none;
    }
    @media (max-width: 991.98px) {
        .ftl-compare-corner {
            width: 120px;
        }
    }
    @media (max-width: 575.98px) {
        .ftl-compare-table thead {
            display: none;
        }
        .ftl-compare-table tbody tr {
            display: block;
            border-bottom: 1px solid rgba(40, 88, 146, 0.22);
        }
        .ftl-compare-table tbody tr:last-child {
            border-bottom: none;
        }
        .ftl-compare-table tbody th[scope="row"] {
            display: block;
            width: 100%;
            border-bottom: 1px solid rgba(40, 88, 146, 0.12);
        }
        .ftl-compare-table tbody td {
            display: block;
            width: 100%;
            border: none;
        }
        .ftl-compare-table tbody td::before {
            display: block;
            font-weight: 900;
            color: #1f58a9;
            margin-bottom: 6px;
            font-size: 13px;
        }
        .ftl-compare-table tbody tr:nth-child(1) td:nth-child(2)::before {
            content: "رعاية تدبير";
        }
        .ftl-compare-table tbody tr:nth-child(1) td:nth-child(3)::before {
            content: "رعاية عائلية";
        }
        .ftl-compare-table tbody tr:nth-child(2) td:nth-child(2)::before {
            content: "رعاية تدبير";
        }
        .ftl-compare-table tbody tr:nth-child(2) td:nth-child(3)::before {
            content: "رعاية عائلية";
        }
    }

    .ftl-cost-section-panel {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 250, 254, 0.98) 100%);
        border: 1px solid rgba(62, 115, 218, 0.1);
        box-shadow: 0 20px 46px rgba(18, 27, 45, 0.08);
        border-radius: 18px;
        position: relative;
        overflow: hidden;
    }

    .ftl-cost-section-panel::before {
        content: "";
        position: absolute;
        inset: -2px;
        background:
            radial-gradient(circle at 90% 0%, rgba(31, 182, 220, 0.28) 0%, rgba(31, 182, 220, 0) 55%),
            radial-gradient(circle at 10% 20%, rgba(52, 105, 214, 0.22) 0%, rgba(52, 105, 214, 0) 54%),
            radial-gradient(circle at 50% 90%, rgba(125, 92, 255, 0.18) 0%, rgba(125, 92, 255, 0) 55%);
        pointer-events: none;
        z-index: 0;
    }

    .ftl-cost-section-panel > * {
        position: relative;
        z-index: 1;
    }
    .ftl-cost-kicker {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px;
        border-radius: 999px;
        font-size: 12px;
        font-weight: 900;
        color: #1f58a9;
        background: linear-gradient(135deg, rgba(62, 115, 218, 0.12) 0%, rgba(31, 182, 220, 0.1) 100%);
        border: 1px solid rgba(62, 115, 218, 0.18);
    }
    .ftl-cost-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
        margin-top: 18px;
    }
    .ftl-cost-card {
        border: 1px solid rgba(40, 88, 146, 0.18);
        border-radius: 14px;
        overflow: hidden;
        background: rgba(255, 255, 255, 0.88);
        box-shadow: 0 14px 30px rgba(18, 27, 45, 0.06);
        transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
    }

    .ftl-cost-card:hover {
        transform: translateY(-3px);
        border-color: rgba(62, 115, 218, 0.28);
        box-shadow: 0 18px 44px rgba(18, 27, 45, 0.09);
    }
    .ftl-cost-card-head {
        padding: 12px 14px;
        text-align: center;
        background: linear-gradient(135deg, #1fb6dc 0%, #3469d6 42%, #7d5cff 100%);
        color: #fff;
        font-weight: 900;
        font-size: 15px;
    }
    .ftl-cost-card-body {
        padding: 12px;
    }
    .ftl-cost-table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
        direction: rtl;
    }
    .ftl-cost-table th,
    .ftl-cost-table td {
        border: 1px solid rgba(40, 88, 146, 0.22);
        padding: 10px 10px;
        text-align: center;
        vertical-align: top;
    }
    .ftl-cost-table thead th {
        background: linear-gradient(135deg, rgba(31, 182, 220, 0.16) 0%, rgba(52, 105, 214, 0.12) 55%, rgba(125, 92, 255, 0.10) 100%);
        color: #17385f;
        font-weight: 900;
        font-size: 13px;
    }

    .ftl-cost-table tbody td {
        font-weight: 600;
        color: #203a57;
    }

    .ftl-cost-table tbody tr:nth-child(odd) td {
        background: rgba(31, 182, 220, 0.045);
    }

    .ftl-cost-table tbody tr:nth-child(even) td {
        background: rgba(52, 105, 214, 0.025);
    }

    .ftl-cost-table tbody tr:hover td {
        background: rgba(230, 241, 255, 0.92);
    }
    .ftl-cost-top-note {
        margin-top: 12px;
        font-size: 1rem;
        color: #123457;
        line-height: 1.7;
        padding: 10px 16px;
        border-radius: 16px;
        border: 1px solid rgba(62, 115, 218, 0.18);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(246, 250, 254, 0.55) 100%);
        display: flex;
        gap: 10px;
        align-items: flex-start;
        justify-content: center;
        max-width: 860px;
        margin-left: auto;
        margin-right: auto;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
    .ftl-cost-top-note-icon {
        flex: 0 0 auto;
        width: 28px;
        height: 28px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(135deg, rgba(31, 182, 220, 0.18) 0%, rgba(52, 105, 214, 0.10) 100%);
        border: 1px solid rgba(31, 182, 220, 0.25);
        color: #0d3e7a;
        box-shadow: 0 10px 20px rgba(18, 27, 45, 0.05);
    }
    .ftl-cost-top-note-content {
        text-align: center;
        width: 100%;
        direction: rtl;
        font-size: 1.1rem;
        line-height: 1.8;
    }
    .ftl-cost-top-note-content ul {
        padding-right: 18px;
        margin: 8px 0 0;
    }
    .ftl-cost-top-note-content li {
        margin-bottom: 6px;
    }

    .ftl-savings-banner {
        margin-top: 16px;
        width: 100%;
        max-width: 100%;
        position: relative;
        border-radius: 22px;
        overflow: hidden;
        text-align: initial;
        box-shadow: 0 18px 46px rgba(180, 40, 90, 0.22), 0 8px 20px rgba(18, 27, 45, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.22);
    }
    .ftl-savings-banner::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(108deg, #9d1f6a 0%, #e11d48 42%, #f97316 100%);
        z-index: 0;
    }
    .ftl-savings-ad {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: row-reverse;
        align-items: center;
        gap: 16px 20px;
        padding: 18px 18px 18px 16px;
        min-height: 132px;
    }
    .ftl-savings-ad-orb {
        flex: 0 0 auto;
        width: 104px;
        height: 104px;
        border-radius: 50%;
        background: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        box-shadow: 0 14px 32px rgba(0, 0, 0, 0.14);
        color: #e11d48;
        text-align: center;
        line-height: 1.05;
    }
    .ftl-savings-ad-orb-line1 {
        font-size: 1.35rem;
        font-weight: 950;
        letter-spacing: -0.02em;
    }
    .ftl-savings-ad-orb-line2 {
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        opacity: 0.92;
    }
    .ftl-savings-ad-hero {
        flex: 1 1 auto;
        min-width: 0;
        color: #fff;
        direction: rtl;
        text-align: right;
    }
    .ftl-savings-ad-title {
        font-size: 1.06rem;
        font-weight: 900;
        line-height: 1.35;
        margin: 0 0 10px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    }
    .ftl-savings-ad-title strong,
    .ftl-savings-ad-title b {
        color: inherit;
        font-weight: inherit;
    }
    .ftl-savings-ad-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .ftl-savings-ad-list li {
        position: relative;
        padding-right: 1.1rem;
        padding-left: 0;
        font-size: 0.92rem;
        font-weight: 650;
        line-height: 1.45;
        opacity: 0.98;
    }
    .ftl-savings-ad-list li::before {
        content: "";
        position: absolute;
        right: 0;
        top: 0.55em;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.95);
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
    }
    .ftl-savings-ad-list li strong,
    .ftl-savings-ad-list li b {
        color: #fff;
        font-weight: 900;
        background: rgba(255, 255, 255, 0.16);
        padding: 1px 6px;
        border-radius: 6px;
    }
    .ftl-savings-ad-cta {
        flex: 0 0 auto;
        position: relative;
        width: min(200px, 34%);
        min-height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .ftl-savings-ad-blob {
        position: absolute;
        inset: -8px 0 -8px -12px;
        background: #fff;
        border-radius: 52% 48% 58% 42% / 48% 52% 48% 52%;
        opacity: 0.96;
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.1);
        z-index: 0;
    }
    .ftl-savings-ad-bubble {
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.35);
        z-index: 1;
        pointer-events: none;
    }
    .ftl-savings-ad-bubble-1 { width: 14px; height: 14px; left: 8px; top: 18%; }
    .ftl-savings-ad-bubble-2 { width: 22px; height: 22px; left: 28px; top: 8%; opacity: 0.85; }
    .ftl-savings-ad-bubble-3 { width: 10px; height: 10px; left: 18px; bottom: 22%; }
    .ftl-savings-ad-badge {
        position: relative;
        z-index: 2;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px 8px 14px;
        border-radius: 999px;
        background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
        color: #fff;
        font-weight: 900;
        font-size: 0.82rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        box-shadow: 0 10px 22px rgba(234, 88, 12, 0.35);
    }
    /* SVG Repo: recommended — https://www.svgrepo.com/svg/311137/recommended */
    .ftl-savings-ad-badge-ico {
        width: 36px;
        height: 36px;
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        filter: drop-shadow(0 2px 5px rgba(202, 138, 4, 0.45));
    }
    .ftl-savings-ad-badge-ico svg {
        width: 100%;
        height: 100%;
        display: block;
    }

    .ftl-cost-savings-pill {
        margin-top: 12px;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        gap: 12px;
        padding: 12px 18px;
        border-radius: 22px;
        border: 1px solid rgba(255, 196, 0, 0.45);
        background: linear-gradient(
            135deg,
            rgba(255, 196, 0, 0.24) 0%,
            rgba(125, 92, 255, 0.14) 50%,
            rgba(31, 182, 220, 0.12) 100%
        );
        color: #0f3353;
        font-weight: 850;
        font-size: 1.02rem;
        letter-spacing: 0.1px;
        line-height: 1.35;
        box-shadow: 0 18px 44px rgba(255, 196, 0, 0.16), 0 10px 24px rgba(18, 27, 45, 0.06);
        position: relative;
        overflow: hidden;
        text-align: center;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
        max-width: 980px;
        width: fit-content;
    }
    .ftl-cost-savings-pill::after {
        content: "";
        position: absolute;
        top: -60%;
        left: -25%;
        width: 60%;
        height: 220%;
        background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%);
        transform: rotate(18deg);
        pointer-events: none;
        opacity: 0.55;
    }
    .ftl-cost-savings-pill:hover::after {
        opacity: 0.85;
    }

    .ftl-cost-savings-pill:hover {
        transform: translateY(-2px);
        box-shadow: 0 24px 58px rgba(255, 196, 0, 0.24), 0 14px 28px rgba(18, 27, 45, 0.08);
        border-color: rgba(255, 196, 0, 0.55);
    }
    .ftl-cost-savings-pill-icon {
        flex: 0 0 auto;
        width: 30px;
        height: 30px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 196, 0, 0.20);
        border: 1px solid rgba(255, 196, 0, 0.30);
        color: #7a4b00;
        box-shadow: 0 12px 26px rgba(255, 196, 0, 0.16);
        margin-top: 2px;
    }
    .ftl-cost-savings-pill-icon i {
        font-size: 14px;
    }
    .ftl-cost-savings-pill-text {
        position: relative;
        z-index: 1;
        line-height: 1.5;
        flex: 1 1 240px;
        direction: rtl;
    }

    .ftl-cost-savings-pill-text strong,
    .ftl-cost-savings-pill-text b {
        color: inherit;
        display: inline-block;
        padding: 2px 10px;
        border-radius: 999px;
        background: rgba(255, 196, 0, 0.16);
        border: 1px solid rgba(255, 196, 0, 0.35);
        font-weight: 950;
    }
    @media (max-width: 991.98px) {
        .ftl-cost-grid { grid-template-columns: 1fr; }
        .ftl-cost-savings-pill { font-size: 1rem; }
        .ftl-savings-ad-cta { width: min(180px, 38%); }
    }

    @media (max-width: 575.98px) {
        .ftl-savings-ad {
            flex-direction: column;
            align-items: stretch;
            padding: 16px 14px;
            padding-bottom: 0;
            min-height: 0;
        }
        .ftl-savings-ad-orb {
            width: 88px;
            height: 88px;
            margin: 0 auto;
        }
        .ftl-savings-ad-orb-line1 { font-size: 1.1rem; }
        .ftl-savings-ad-hero { text-align: center; }
        .ftl-savings-ad-title { font-size: 0.98rem; margin-bottom: 8px; }
        .ftl-savings-ad-list {
            text-align: right;
            max-width: 420px;
            margin: 0 auto;
        }
        .ftl-savings-ad-cta {
            position: relative;
            width: 100%;
            margin-top: 14px;
            min-height: 0;
            left: auto;
            right: auto;
            bottom: auto;
            justify-content: center;
        }
        .ftl-savings-ad-blob {
            inset: auto;
            left: -12px;
            right: -12px;
            bottom: -8px;
            top: auto;
            height: 56px;
            border-radius: 18px;
            opacity: 0.94;
        }
        .ftl-savings-ad-bubble-1 { left: 12%; top: auto; bottom: 36px; }
        .ftl-savings-ad-bubble-2 { left: 22%; bottom: 44px; top: auto; }
        .ftl-savings-ad-bubble-3 { left: 30%; bottom: 32px; }
        .ftl-savings-ad-badge {
            margin: 0 auto;
        }
        .ftl-cost-savings-pill {
            width: 100%;
            justify-content: flex-start;
            padding: 12px 14px;
            border-radius: 18px;
            gap: 12px;
            text-align: right;
        }
        .ftl-cost-savings-pill-icon {
            width: 32px;
            height: 32px;
        }
        .ftl-cost-savings-pill-icon i {
            font-size: 15px;
        }
        .ftl-cost-savings-pill-text {
            text-align: right;
            flex-basis: 0;
        }
        .ftl-cost-savings-pill:hover {
            transform: none;
            box-shadow: 0 18px 44px rgba(255, 196, 0, 0.16), 0 10px 24px rgba(18, 27, 45, 0.06);
            border-color: rgba(255, 196, 0, 0.45);
        }
        .ftl-cost-savings-pill::after {
            display: none;
        }
        .ftl-savings-ad-badge-ico {
            width: 30px;
            height: 30px;
        }
    }
</style>

<section class="hero-section ftl-landing-page">
    <div class="main-container">
        <div class="hero-shell active">
            <div class="hero-inner">
                <div class="row align-items-center g-4 g-lg-5">
                    <div class="col-lg-5">
                        <div class="hero-content">
                            <span class="mini-badge">
                                <i class="fa-solid fa-shield-heart"></i>
                                {{ e($hero['kicker'] ?? 'خدمات منزلية موثوقة') }}
                            </span>

                            <div class="hero-title-wrap">
                                <h1
                                    class="hero-title-main"
                                    aria-label="{{ e($hero['title_aria_label'] ?? 'توظيف خادمة أو مربية مقيمة بدوام كامل في دبي') }}"
                                >
                                    <span class="hero-title-line show">{{ e($hero['title_line1'] ?? 'توظيف خادمة أو مربية مقيمة') }}</span>
                                    <span class="hero-title-or show">{{ e($hero['title_or'] ?? 'في') }}</span>
                                    <span class="hero-title-line show">{{ e($hero['title_line2'] ?? 'دبي') }}</span>
                                </h1>
                            </div>

                            <p class="hero-note" style="font-size: 1.1rem;">
                                {!! $hero['note'] ?? 'خيارات رعاية مرنة مع تسعير واضح وإجراءات أسرع. جاهز للتوظيف داخل الإمارات أو الاستقدام من الخارج مع دعم كامل.' !!}
                            </p>

                            <ul class="clean-list mb-4">
                                @foreach(($hero['points'] ?? []) as $idx => $point)
                                    <li>
                                        <i class="fa-solid {{ $pointIcons[$idx] ?? 'fa-circle-check' }}"></i>
                                        <span>{!! $point !!}</span>
                                    </li>
                                @endforeach
                            </ul>

                            <div class="hero-actions active" id="heroActionsFtlAr">
                                <div class="hero-action-item">
                                    <a href="#" class="btn-main hero-btn interactive desktop-only" data-bs-toggle="modal" data-bs-target="#callbackModal">
                                        <i class="fa-solid fa-phone-volume"></i>
                                        <span>{{ e($hero['actions']['call_me_back_text'] ?? 'اطلب اتصالا') }}</span>
                                    </a>
                                    <a
                                        href="{{ e($hero['actions']['call_now_href'] ?? 'tel:+97180032332') }}"
                                        class="btn-main hero-btn interactive mobile-only"
                                        aria-label="اتصل بنا"
                                    >
                                        <i class="fa-solid fa-phone-volume"></i>
                                        <span>{{ e($hero['actions']['call_now_text'] ?? 'اتصل الآن') }}</span>
                                    </a>
                                </div>
                                <div class="hero-action-item">
                                    <a
                                        href="{{ e($hero['actions']['whatsapp_href'] ?? 'https://wa.me/97180032332?text=%D9%85%D8%B1%D8%AD%D8%A8%D8%A7%D9%8B%D8%8C%20%D8%A3%D8%B1%D8%BA%D8%A8%20%D9%81%D9%8A%20%D8%AE%D8%AF%D9%85%D8%A9%20%D8%AE%D8%A7%D8%AF%D9%85%D8%A9%20%D9%85%D9%82%D9%8A%D9%85%D8%A9%20%D8%A8%D8%AF%D9%88%D8%A7%D9%85%20%D9%83%D8%A7%D9%85%D9%84.') }}"
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        class="btn-main hero-btn hero-btn-whatsapp interactive"
                                    >
                                        <i class="fa-brands fa-whatsapp" style="font-size: x-large;"></i>
                                        <span>{{ e($hero['actions']['whatsapp_text'] ?? 'واتساب') }}</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-7">
                        <div class="hero-slide-right hero-entry">
                            <img
                                class="w-100 rounded-4"
                                style="border-radius: 32px !important; box-shadow: var(--shadow-lg); max-height: 520px; object-fit: cover;"
                                        src="{{ e($hero['image_src'] ?? 'https://images.unsplash.com/photo-1581578731548-c64695cc6952?auto=format&fit=crop&w=1200&q=80') }}"
                                alt="{{ e($hero['image_alt'] ?? 'خدمة الخادمة المقيمة بدوام كامل') }}"
                            >
                        </div>
                    </div>
                </div>
            </div>
            <span class="hero-orb hero-orb-1"></span>
            <span class="hero-orb hero-orb-2"></span>
            <span class="hero-orb hero-orb-3"></span>
        </div>
    </div>
</section>

<section class="section-space pt-0 ftl-landing-page">
    <div class="main-container">
        <div class="panel-shell scroll-load">
            <div class="section-head mb-3 scroll-load text-center">
                    <span class="section-kicker"><i class="fa-solid fa-award"></i>{{ e($packages['kicker'] ?? 'الباقات والمزايا') }}</span>
                    <h2>{{ e($packages['h2'] ?? 'باقات الخادمة المقيمة بدوام كامل') }}</h2>
                    <p style="font-size: 1.1rem;">{!! $packages['p'] ?? 'قارن بين نوعي الرعاية واختر الأنسب لاحتياجات منزلك.' !!}</p>
            </div>

            @php
                $ftlTadbeerGroups = data_get($packages, 'tadbeer.groups', []);
                $ftlFamilyGroups = data_get($packages, 'family.groups', []);
            @endphp

            <div class="row g-3 g-lg-4 align-items-stretch ftl-packages-row">
                @foreach ([
                    ['groups' => $ftlTadbeerGroups, 'title' => data_get($packages, 'tadbeer.title', 'رعاية تدبير'), 'title_icon' => 'fa-building-columns'],
                    ['groups' => $ftlFamilyGroups, 'title' => data_get($packages, 'family.title', 'رعاية عائلية'), 'title_icon' => 'fa-house-user'],
                ] as $ftlCol)
                    <div class="col-12 col-lg-6">
                        <div class="service-card scroll-load h-100 ftl-sponsorship-card">
                            <div class="service-body">
                                <h3 class="ftl-card-title-wrap">
                                    <span class="ftl-card-title-icon" aria-hidden="true"><i class="fa-solid {{ $ftlCol['title_icon'] }}"></i></span>
                                    <span class="ftl-card-title-text">{{ e($ftlCol['title']) }}</span>
                                </h3>
                                <div class="ftl-package-grid-wrap">
                                <div class="ftl-package-grid">
                                    @foreach ($ftlCol['groups'] as $ftlGi => $ftlGroup)
                                        @php
                                            $ftlSubtitle = is_array($ftlGroup) ? (string) data_get($ftlGroup, 'subtitle', '') : '';
                                            $ftlPoints = is_array($ftlGroup) ? data_get($ftlGroup, 'points', []) : [];
                                            if (! is_array($ftlPoints)) {
                                                $ftlPoints = [];
                                            }
                                            $ftlGroupIcon = ((int) $ftlGi === 0) ? 'fa-location-dot' : 'fa-earth-americas';
                                        @endphp
                                        <div class="ftl-package-group">
                                            @if ($ftlSubtitle !== '')
                                                <div class="ftl-package-subtitle">
                                                    <i class="fa-solid {{ $ftlGroupIcon }}" aria-hidden="true"></i>
                                                    <span>{{ e($ftlSubtitle) }}</span>
                                                </div>
                                            @endif
                                            <ul class="service-points">
                                                @foreach ($ftlPoints as $ftlPoint)
                                                    @if (is_string($ftlPoint) && trim(strip_tags($ftlPoint)) !== '')
                                                        <li><i class="fa-solid fa-circle-check" aria-hidden="true"></i><span>{!! $ftlPoint !!}</span></li>
                                                    @endif
                                                @endforeach
                                            </ul>
                                        </div>
                                    @endforeach
                                </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="mt-3 pt-2 ftl-pricing-box">
                <h3 class="ftl-pricing-title">{{ e($pricing['title'] ?? 'خيارات المرشحات والأسعار') }}</h3>
                <div class="table-responsive w-100">
                    <table class="ftl-pricing-table w-100">
                        <thead>
                            <tr>
                                @foreach(($pricing['table_headers'] ?? []) as $th)
                                    <th>{{ e($th) }}</th>
                                @endforeach
                            </tr>
                        </thead>
                        <tbody>
                            @foreach(($pricing['rows'] ?? []) as $row)
                                <tr>
                                    <td>{{ e($row['sponsorship_type'] ?? '') }}</td>
                                    <td>{{ e($row['uae'] ?? '') }}</td>
                                    <td>{{ e($row['overseas'] ?? '') }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <div class="text-center mt-4">
                    <a href="{{ route('ar.profiles') }}" class="btn-main interactive">
                        <i class="fa-solid fa-users"></i> {{ e($pricing['button_text'] ?? 'عرض ملفات المرشحات') }}
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section-space pt-0" id="comparison-table-section">
    <div class="main-container">
        <div class="panel-shell scroll-load ftl-cost-section-panel">
            <div class="section-head mb-4 scroll-load text-center">
                <span class="ftl-cost-kicker">
                    <i class="fa-solid fa-chart-column"></i>
                    {{ e($comparison['kicker'] ?? 'تكلفة التوظيف حسب الجنسية') }}
                </span>
                <h2>{{ e($comparison['h2'] ?? 'تكلفة التوظيف حسب الجنسية') }}</h2>
                @if (!empty($comparison['preferred_nationalities_html']))
                    <p style="font-size: 1.1rem;">{!! $comparison['preferred_nationalities_html'] !!}</p>
                @elseif (!empty($comparison['description']))
                    <p style="font-size: 1.1rem;">{!! $comparison['description'] !!}</p>
                @endif
                @if (!empty($comparison['savings_banner_html']))
                    @php
                        $sbRaw = trim((string) $comparison['savings_banner_html']);
                        $sbSegs = preg_split('/<br\s*\/?>/i', $sbRaw, -1, PREG_SPLIT_NO_EMPTY);
                        $sbSegs = array_values(array_filter(array_map('trim', $sbSegs)));
                        $sbSplit = count($sbSegs) >= 3;
                        $sbCol2 = $sbSplit ? implode('<br>', array_slice($sbSegs, 2)) : '';
                    @endphp
                    @if ($sbSplit)
                        <div class="ftl-savings-banner" role="region" aria-label="{{ e($comparison['savings_banner_aria'] ?? 'الرعاية الموصى بها وخيارات التوفير') }}">
                            <div class="ftl-savings-ad">
                                <div class="ftl-savings-ad-orb" aria-hidden="true">
                                    <span class="ftl-savings-ad-orb-line1">{{ e($comparison['savings_ad_orb_line1'] ?? 'أفضل') }}</span>
                                    <span class="ftl-savings-ad-orb-line2">{{ e($comparison['savings_ad_orb_line2'] ?? 'توفير') }}</span>
                                </div>
                                <div class="ftl-savings-ad-hero">
                                    <div class="ftl-savings-ad-title">{!! $sbSegs[0] !!}</div>
                                    <ul class="ftl-savings-ad-list">
                                        <li>{!! $sbSegs[1] !!}</li>
                                        <li>{!! $sbCol2 !!}</li>
                                    </ul>
                                </div>
                                <div class="ftl-savings-ad-cta">
                                    <div class="ftl-savings-ad-blob" aria-hidden="true"></div>
                                    <span class="ftl-savings-ad-bubble ftl-savings-ad-bubble-1" aria-hidden="true"></span>
                                    <span class="ftl-savings-ad-bubble ftl-savings-ad-bubble-2" aria-hidden="true"></span>
                                    <span class="ftl-savings-ad-bubble ftl-savings-ad-bubble-3" aria-hidden="true"></span>
                                    <div class="ftl-savings-ad-badge">
                                        <span class="ftl-savings-ad-badge-ico" aria-hidden="true">
                                            <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" role="img" focusable="false">
                                                <defs>
                                                    <linearGradient id="ftlRecommendedGoldRtl" x1="0%" y1="0%" x2="100%" y2="100%">
                                                        <stop offset="0%" stop-color="#fef9c3"/>
                                                        <stop offset="28%" stop-color="#fef08c"/>
                                                        <stop offset="62%" stop-color="#facc15"/>
                                                        <stop offset="100%" stop-color="#eab308"/>
                                                    </linearGradient>
                                                </defs>
                                                <path fill="url(#ftlRecommendedGoldRtl)" d="M17.0020594,17.4830721 L17.0007001,22.2453233 C17.0007001,22.7945586 16.4297842,23.157512 15.9324488,22.9244522 L12.0005291,21.0818879 L8.07069102,22.9243915 C7.5733438,23.1575726 7.00231009,22.7946207 7.00231009,22.2453233 L7.00260026,17.4861909 C8.43218245,18.4424048 10.1509746,19 12,19 C13.8510348,19 15.5715531,18.4411922 17.0020594,17.4830721 Z M12,2 C16.418278,2 20,5.581722 20,10 C20,14.418278 16.418278,18 12,18 C7.581722,18 4,14.418278 4,10 C4,5.581722 7.581722,2 12,2 Z M11.8084497,6.58610926 L11.7712148,6.64234387 L10.8586922,8.49499737 L8.81472896,8.79035658 C8.62860433,8.81725218 8.54185205,9.02358857 8.63135587,9.17274189 L8.67333197,9.22553178 L10.1533251,10.6658938 L9.80260908,12.7010893 C9.77067264,12.8864156 9.94010228,13.0326834 10.1096137,12.9936511 L10.1727912,12.9700424 L12,12.0075816 L13.8272087,12.9700424 C13.9935181,13.0576439 14.1849216,12.9418506 14.2003028,12.7686538 L14.1974269,12.7012993 L13.8484251,10.6658938 L15.326776,9.22542655 C15.4614232,9.09422981 15.4102807,8.87641205 15.2502405,8.80838398 L15.185271,8.79035658 L13.1413078,8.49499737 L12.2287851,6.64234387 C12.1560771,6.494728 11.9762193,6.46192448 11.8558892,6.54393329 L11.8084497,6.58610926 L11.8084497,6.58610926 Z"/>
                                            </svg>
                                        </span>
                                        <span>{{ e($comparison['savings_ad_badge'] ?? 'موصى به') }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="ftl-cost-savings-pill" role="note" aria-label="Savings banner">
                            <span class="ftl-cost-savings-pill-icon" aria-hidden="true">
                                <i class="fa-solid fa-bolt"></i>
                            </span>
                            <div class="ftl-cost-savings-pill-text">
                                {!! $comparison['savings_banner_html'] !!}
                            </div>
                        </div>
                    @endif
                @endif
            </div>

            <div class="ftl-cost-grid">
                <div class="ftl-cost-card">
                    <div class="ftl-cost-card-head">{{ e(data_get($comparison, 'tadbeer.title', 'تحت رعاية تدبير')) }}</div>
                    <div class="ftl-cost-card-body">
                        <table class="ftl-cost-table">
                            <thead>
                                <tr>
                                    <th>الجنسية</th>
                                    <th>{{ e(data_get($comparison, 'tadbeer.uae_header', 'جاهزة للتوظيف داخل الإمارات')) }}</th>
                                    <th>{{ e(data_get($comparison, 'tadbeer.overseas_header', 'الاستقدام من الخارج')) }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach((data_get($comparison, 'tadbeer.rows', [])) as $row)
                                    <tr>
                                        <td>{{ e($row['nationality'] ?? '') }}</td>
                                        <td>{{ e($row['uae'] ?? '') }}</td>
                                        <td>{{ e($row['overseas'] ?? '') }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="ftl-cost-card">
                    <div class="ftl-cost-card-head">{{ e(data_get($comparison, 'family.title', 'تحت رعاية عائلية')) }}</div>
                    <div class="ftl-cost-card-body">
                        <table class="ftl-cost-table">
                            <thead>
                                <tr>
                                    <th>الجنسية</th>
                                    <th>{{ e(data_get($comparison, 'family.uae_header', 'جاهزة للتوظيف داخل الإمارات')) }}</th>
                                    <th>{{ e(data_get($comparison, 'family.overseas_header', 'الاستقدام من الخارج')) }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach((data_get($comparison, 'family.rows', [])) as $row)
                                    <tr>
                                        <td>{{ e($row['nationality'] ?? '') }}</td>
                                        <td>{{ e($row['uae'] ?? '') }}</td>
                                        <td>{{ e($row['overseas'] ?? '') }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section-space pt-0" id="contact-section">
    <div class="main-container">
        <div class="panel-shell scroll-load">
            <div class="contact-title-wrap scroll-load">
                    <span class="section-kicker"><i class="fa-solid fa-headset"></i>{{ e($contact['kicker'] ?? 'تواصل معنا') }}</span>
                    <h2>{{ e($contact['h2'] ?? 'ساعدك في التوظيف بسرعة') }}</h2>
                    <p style="font-size: 1.1rem;">{!! $contact['p'] ?? 'تواصل مع فريقنا لاختيار نوع الرعاية والمرشحة الأنسب لمنزلك.' !!}</p>
            </div>

                @php($strip = $contact['strip'] ?? [])
            <div class="contact-strip scroll-load" style="display: flex; gap: 14px; justify-content: center;">
                    <a href="{{ e($strip[0]['href'] ?? 'tel:80032332') }}" class="strip-box strip-blue interactive {{ e($strip[0]['variant'] ?? 'mobile-only') }}" style="background: linear-gradient(145deg, #4c72ca 0%, #63a2dd 90%, #7ecbed 100%)"><i class="fa-solid fa-phone"></i><span>{{ e($strip[0]['text'] ?? 'اتصل بنا') }}</span></a>
                    <a href="{{ e($strip[1]['href'] ?? '#') }}" class="strip-box strip-blue interactive {{ e($strip[1]['variant'] ?? 'desktop-only') }}" data-bs-toggle="modal" data-bs-target="#callbackModal" style="background: linear-gradient(145deg, #4c72ca 0%, #63a2dd 90%, #7ecbed 100%)"><i class="fa-solid fa-phone-volume"></i><span>{{ e($strip[1]['text'] ?? 'اطلب اتصالا') }}</span></a>
                    <a href="{{ e($strip[2]['href'] ?? 'https://wa.me/97180032332?text=%D9%85%D8%B1%D8%AD%D8%A8%D8%A7%D9%8B%D8%8C%20%D8%A3%D8%B1%D8%BA%D8%A8%20%D9%81%D9%8A%20%D8%AE%D8%AF%D9%85%D8%A9%20%D8%AE%D8%A7%D8%AF%D9%85%D8%A9%20%D9%85%D9%82%D9%8A%D9%85%D8%A9%20%D8%A8%D8%AF%D9%88%D8%A7%D9%85%20%D9%83%D8%A7%D9%85%D9%84.') }}" target="_blank" rel="noopener" class="strip-box strip-green interactive"><i class="fa-brands fa-whatsapp" style="font-size: x-large;"></i><span>{{ e($strip[2]['text'] ?? 'واتساب') }}</span></a>
                    <a href="{{ e($strip[3]['href'] ?? 'https://www.google.com/maps/place/Alebdaa+Workers+Employment+Services+Center/@@25.252939,55.3378645,17z/data=!3m1!4b1!4m6!3m5!1s0x3e5f5dbd5a3e933d:0x68ec4a5c2fcccd84!8m2!3d25.2529342!4d55.3404394!16s%2Fg%2F11txnkpfgv?hl=en-US&entry=ttu') }}" style="background: linear-gradient(145deg, #4c72ca 0%, #63a2dd 90%, #7ecbed 100%)" target="_blank" rel="noopener" class="strip-box strip-blue interactive"><i class="fa-solid fa-location-dot"></i><span>{{ e($strip[3]['text'] ?? 'الموقع') }}</span></a>
            </div>

            <div class="contact-wrap scroll-load">
                <div class="row g-0 align-items-stretch contact-layout">
                    <div class="col-lg-5 contact-col">
                        <div class="map-panel contact-panel">
                            <div class="contact-panel-head" style="margin-right: 15px; text-align: right;">
                                <h3>{{ e($contact['office_title'] ?? 'زوروا مكتبنا') }}</h3>
                                <p style="font-size: 1.1rem;">
                                    {!! $contact['office_address_html'] ?? '<strong>مركز الإبداع لتوظيف خدمات العمالة</strong><br>مبنى سرايا أفنيو - بلوك B - الطابق الأرضي<br>القرهود، دبي، الإمارات' !!}
                                </p>
                            </div>
                            <div class="map-embed interactive" style="min-height: 390px;">
                                <iframe src="https://www.openstreetmap.org/export/embed.html?bbox=55.1785%2C25.1423%2C55.3959%2C25.3119&amp;layer=mapnik&amp;marker=25.2048%2C55.2708" loading="lazy" allowfullscreen referrerpolicy="no-referrer-when-downgrade"></iframe>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-7 contact-col">
                        <div class="form-panel contact-panel">
                            <div class="form-panel-head">
                                <h3>{{ e($contact['form_title'] ?? 'أرسل استفسارك') }}</h3>
                                <p style="font-size: 1.1rem;">{!! $contact['form_p'] ?? 'استفسر عن توظيف خادمة مقيمة بدوام كامل وخيارات الرعاية والأسعار وتوفر المرشحات.' !!}</p>
                            </div>

                            <form class="inquiry-form" method="POST" action="{{ route(($locale ?? 'en') === 'ar' ? 'ar.contact.inquiry' : 'contact.inquiry') }}">
                                @csrf
                                <input type="hidden" name="source_page" value="{{ request()->path() }}">
                                <div class="row g-3">
                                    <div class="col-md-6">
                                        <input type="text" name="first_name" class="form-control interactive" placeholder="{{ e($contact['first_name_placeholder'] ?? 'الاسم الأول') }}" required>
                                    </div>
                                    <div class="col-md-6">
                                        <input type="text" name="last_name" class="form-control interactive" placeholder="{{ e($contact['last_name_placeholder'] ?? 'اسم العائلة') }}">
                                    </div>
                                    <div class="col-md-6">
                                        <input type="tel" name="mobile" class="form-control interactive" placeholder="{{ e($contact['phone_placeholder'] ?? 'رقم الهاتف') }}" required>
                                    </div>
                                    <div class="col-md-6">
                                        <input type="email" name="email" class="form-control interactive" placeholder="{{ e($contact['email_placeholder'] ?? 'البريد الإلكتروني') }}">
                                    </div>
                                    <div class="col-12">
                                        <textarea name="message" class="form-control interactive" placeholder="{{ e($contact['message_placeholder'] ?? 'اكتب لنا نوع الخدمة أو المعلومات المطلوبة') }}"></textarea>
                                    </div>
                                    <div class="col-12">
                                        <button type="submit" class="submit-btn btn-main interactive" style="font-size: 18px;">
                                            <i class="fa-solid fa-paper-plane"></i>
                                            <span>{{ e($contact['submit_text'] ?? 'إرسال الاستفسار') }}</span>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@endsection
