<?php
session_start();
require_once __DIR__ . '/config/db.php';

$page_title = 'Services - Faren Interior Design';
$page_description = 'Explore our comprehensive interior design and architecture services';
$user_name = isset($_SESSION['user_name']) ? htmlspecialchars($_SESSION['user_name']) : '';

function ensureServicesTable(mysqli $connection): bool
{
    $sql = "CREATE TABLE IF NOT EXISTS services (
        id INT AUTO_INCREMENT PRIMARY KEY,
        title VARCHAR(255) NOT NULL,
        image VARCHAR(500) NOT NULL,
        link VARCHAR(500) DEFAULT '#',
        description TEXT NOT NULL,
        sort_order INT NOT NULL DEFAULT 0,
        is_active TINYINT(1) NOT NULL DEFAULT 1,
        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
        updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4";

    if (!$connection->query($sql)) {
        return false;
    }

    $requiredColumns = [
        'title' => "ALTER TABLE services ADD COLUMN title VARCHAR(255) NOT NULL DEFAULT ''",
        'image' => "ALTER TABLE services ADD COLUMN image VARCHAR(500) NOT NULL DEFAULT ''",
        'link' => "ALTER TABLE services ADD COLUMN link VARCHAR(500) DEFAULT '#'",
        'description' => "ALTER TABLE services ADD COLUMN description TEXT NOT NULL",
        'sort_order' => "ALTER TABLE services ADD COLUMN sort_order INT NOT NULL DEFAULT 0",
        'is_active' => "ALTER TABLE services ADD COLUMN is_active TINYINT(1) NOT NULL DEFAULT 1",
        'created_at' => "ALTER TABLE services ADD COLUMN created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP",
        'updated_at' => "ALTER TABLE services ADD COLUMN updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP",
    ];

    $existingColumns = [];
    $columnsResult = $connection->query("SHOW COLUMNS FROM services");
    if ($columnsResult) {
        while ($column = $columnsResult->fetch_assoc()) {
            $existingColumns[] = $column['Field'];
        }
    }

    foreach ($requiredColumns as $columnName => $alterSql) {
        if (!in_array($columnName, $existingColumns, true)) {
            if (!$connection->query($alterSql)) {
                return false;
            }
        }
    }

    return true;
}

function ensureServiceFavoritesTable(mysqli $connection): bool
{
    $sql = "CREATE TABLE IF NOT EXISTS service_favorites (
        id INT AUTO_INCREMENT PRIMARY KEY,
        user_id INT NOT NULL,
        service_id INT NOT NULL,
        service_title VARCHAR(255) NOT NULL,
        service_image VARCHAR(500) NOT NULL,
        service_description TEXT,
        added_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
        UNIQUE KEY unique_user_service (user_id, service_id),
        INDEX idx_user_id (user_id),
        INDEX idx_service_id (service_id)
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4";

    return (bool) $connection->query($sql);
}

function seedServicesFromHtmlIfEmpty(mysqli $connection): void
{
    $countResult = $connection->query("SELECT COUNT(*) AS total FROM services");
    $row = $countResult ? $countResult->fetch_assoc() : ['total' => 0];
    $total = (int) ($row['total'] ?? 0);

    if ($total > 0) {
        return;
    }

    $serviceFile = __DIR__ . '/service.html';
    if (!file_exists($serviceFile)) {
        return;
    }

    $html = file_get_contents($serviceFile);
    if ($html === false) {
        return;
    }

    $pattern = '/<div class="col-md-6 col-xl-4">\s*<div class="service-box[^>]*>\s*<div class="box-img[^>]*><img src="([^"]+)"[^>]*><\/div>\s*<div class="box-content">\s*<h3 class="box-title"><a href="([^"]*)">([^<]+)<\/a><\/h3>\s*<p class="box-text">\s*(.*?)\s*<\/p>/si';
    if (!preg_match_all($pattern, $html, $matches, PREG_SET_ORDER)) {
        return;
    }

    $insert = $connection->prepare("INSERT INTO services (title, image, link, description, sort_order, is_active) VALUES (?, ?, ?, ?, ?, 1)");
    if (!$insert) {
        return;
    }

    foreach ($matches as $index => $item) {
        $image = trim(html_entity_decode($item[1], ENT_QUOTES | ENT_HTML5, 'UTF-8'));
        $link = trim(html_entity_decode($item[2], ENT_QUOTES | ENT_HTML5, 'UTF-8'));
        $title = trim(html_entity_decode($item[3], ENT_QUOTES | ENT_HTML5, 'UTF-8'));
        $description = trim(strip_tags(html_entity_decode($item[4], ENT_QUOTES | ENT_HTML5, 'UTF-8')));
        $sortOrder = $index + 1;

        if ($title === '' || $image === '' || $description === '') {
            continue;
        }

        $insert->bind_param('ssssi', $title, $image, $link, $description, $sortOrder);
        $insert->execute();
    }

    $insert->close();
}

$services = [];
$favoriteServiceIds = [];
$isCustomerLoggedIn = isset($_SESSION['user_id']);

if (ensureServicesTable($connection)) {
    seedServicesFromHtmlIfEmpty($connection);

    $result = $connection->query("SELECT id, title, image, link, description FROM services WHERE is_active = 1 ORDER BY sort_order ASC, id ASC");
    if ($result && $result->num_rows > 0) {
        while ($row = $result->fetch_assoc()) {
            $services[] = $row;
        }
    }
}

if ($isCustomerLoggedIn && ensureServiceFavoritesTable($connection)) {
    $userId = (int) $_SESSION['user_id'];
    $favStmt = $connection->prepare("SELECT service_id FROM service_favorites WHERE user_id = ?");
    if ($favStmt) {
        $favStmt->bind_param('i', $userId);
        $favStmt->execute();
        $favResult = $favStmt->get_result();
        while ($favResult && $favRow = $favResult->fetch_assoc()) {
            $favoriteServiceIds[] = (int) $favRow['service_id'];
        }
        $favStmt->close();
    }
}

if (empty($services)) {
    $services = [
        [
            'id' => 1,
            'title' => 'Commercial Interiors',
            'image' => 'assets/img/service/service_2_1.jpg',
            'link' => '#',
            'description' => 'Designing elegant and functional commercial interiors that elevate brand identity and workflow.'
        ],
        [
            'id' => 2,
            'title' => 'Multipurpose Interiors',
            'image' => 'assets/img/service/service_2_2.jpg',
            'link' => '#',
            'description' => 'Creating adaptable interior spaces that seamlessly meet diverse functional and lifestyle requirements.'
        ],
        [
            'id' => 3,
            'title' => 'Residential Interiors',
            'image' => 'assets/img/service/service_2_3.jpg',
            'link' => '#',
            'description' => 'Crafting refined residential interiors that blend comfort, personalization, and timeless elegance.'
        ],
    ];
}
?>
<!doctype html>
<html class="no-js" lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Services | Faren Interior Design</title>
    <meta name="author" content="themeholy">
    <meta name="description" content="Faren interior design services for residential and commercial spaces.">
    <meta name="keywords" content="interior services, architecture, design studio">
    <meta name="robots" content="INDEX,FOLLOW">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

    <link rel="apple-touch-icon" sizes="57x57" href="assets/img/favicons/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="assets/img/favicons/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="assets/img/favicons/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="assets/img/favicons/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="assets/img/favicons/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="assets/img/favicons/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="assets/img/favicons/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="assets/img/favicons/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="assets/img/favicons/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicons/favicon-32x32.png">

    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/fontawesome.min.css">
    <link rel="stylesheet" href="assets/css/magnific-popup.min.css">
    <link rel="stylesheet" href="assets/css/swiper-bundle.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/responsive-chat.css">
    <script src="assets/js/auth-ui-global.js"></script>

    <style>
        :root {
            --svc-bg: #f4efe8;
            --svc-surface: #ffffff;
            --svc-ink: #1f1b17;
            --svc-muted: #6f665d;
            --svc-accent: #b58a5a;
            --svc-accent-dark: #8a643f;
            --svc-border: #e7dbce;
        }

        .services-page {
            position: relative;
            padding: 0px;
            background:
                radial-gradient(circle at 8% 12%, rgba(181, 138, 90, 0.18), transparent 34%),
                radial-gradient(circle at 92% 80%, rgba(131, 98, 66, 0.14), transparent 36%),
                linear-gradient(180deg, #f8f4ee 0%, #f2ece4 100%);
            
            overflow: hidden;
        }

        .services-shell {
            max-width: auto;
            margin: 0 auto;
            padding: 10px 10px;
        }

        .services-hero {
            display: grid;
            grid-template-columns: 1.1fr 0.9fr;
            gap: clamp(16px, 3vw, 28px);
            margin-bottom: clamp(24px, 4vw, 42px);
        }

        .hero-main,
        .hero-side {
            border: 1px solid var(--svc-border);
            background: var(--svc-surface);
            border-radius: 22px;
            box-shadow: 0 18px 38px rgba(42, 28, 13, 0.08);
        }

        .hero-main {
            padding: clamp(20px, 4vw, 40px);
        }

        .hero-kicker {
            margin: 0 0 12px;
            color: var(--svc-accent-dark);
            font-size: 13px;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            font-weight: 700;
        }

        .hero-title {
            margin: 0;
            color: var(--svc-ink);
            font-size: clamp(32px, 6vw, 58px);
            line-height: 1.05;
            letter-spacing: -0.02em;
            max-width: 14ch;
        }

        .hero-copy {
            margin: 16px 0 0;
            color: var(--svc-muted);
            font-size: clamp(15px, 2vw, 18px);
            line-height: 1.65;
            max-width: 56ch;
        }

        .hero-side {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            padding: 14px;
        }

        .metric {
            background: #fbf8f4;
            border: 1px solid #eee2d6;
            border-radius: 14px;
            padding: 14px;
        }

        .metric-value {
            display: block;
            color: var(--svc-ink);
            font-size: clamp(22px, 4vw, 30px);
            font-weight: 700;
            line-height: 1;
            margin-bottom: 6px;
        }

        .metric-label {
            color: var(--svc-muted);
            font-size: 13px;
            line-height: 1.4;
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: clamp(14px, 2vw, 22px);
        }

        .service-card {
            grid-column: span 4;
            background: var(--svc-surface);
            border: 1px solid var(--svc-border);
            border-radius: 18px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            min-height: 100%;
            box-shadow: 0 10px 30px rgba(42, 28, 13, 0.07);
            transition: transform 0.24s ease, box-shadow 0.24s ease;
        }

        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(42, 28, 13, 0.14);
        }

        .service-image {
            position: relative;
            aspect-ratio: 16 / 11;
            overflow: hidden;
            background: #ece4da;
        }

        .favorite-service-btn {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.75);
            background: rgba(255, 255, 255, 0.92);
            color: #8a643f;
            font-size: 16px;
            display: grid;
            place-items: center;
            z-index: 3;
            box-shadow: 0 10px 20px rgba(32, 21, 9, 0.18);
            transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
            cursor: pointer;
        }

        .favorite-service-btn:hover {
            transform: scale(1.06);
            background: #fff;
        }

        .favorite-service-btn.active {
            color: #fff;
            background: #c84d4d;
            border-color: #c84d4d;
        }

        .service-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.35s ease;
        }

        .service-card:hover .service-image img {
            transform: scale(1.06);
        }

        .service-body {
            padding: 18px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            flex-grow: 1;
        }

        .service-index {
            width: fit-content;
            font-size: 12px;
            color: var(--svc-accent-dark);
            font-weight: 700;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            background: #f9f2e9;
            border: 1px solid #eadccf;
            border-radius: 999px;
            padding: 5px 10px;
        }

        .service-title {
            margin: 2px 0 0;
            font-size: clamp(20px, 2.5vw, 26px);
            line-height: 1.2;
        }

        .service-title a {
            color: var(--svc-ink);
            text-decoration: none;
        }

        .service-title a:hover {
            color: var(--svc-accent-dark);
        }

        .service-text {
            margin: 0;
            color: var(--svc-muted);
            line-height: 1.65;
            font-size: 14px;
            flex-grow: 1;
        }

        .service-link {
            width: fit-content;
            text-decoration: none;
            color: var(--svc-accent-dark);
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .service-link i {
            transition: transform 0.2s ease;
        }

        .service-card:hover .service-link i {
            transform: translateX(4px);
        }

        .services-cta {
            margin-top: clamp(22px, 3.5vw, 36px);
            border: 1px solid var(--svc-border);
            background: linear-gradient(135deg, #fffdf9 0%, #f7f0e7 100%);
            border-radius: 18px;
            padding: clamp(18px, 3vw, 28px);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            flex-wrap: wrap;
        }

        .hero-actions {
            margin-top: 20px;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .hero-action-btn {
            border: 1px solid var(--svc-border);
            border-radius: 10px;
            padding: 10px 14px;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            text-decoration: none;
            color: var(--svc-accent-dark);
            background: #fff8f1;
        }

        .hero-action-btn.primary {
            color: #fff;
            border-color: transparent;
            background: linear-gradient(135deg, var(--svc-accent), var(--svc-accent-dark));
        }

        .services-cta h3 {
            margin: 0;
            font-size: clamp(20px, 3vw, 30px);
            color: var(--svc-ink);
            line-height: 1.2;
        }

        .services-cta p {
            margin: 8px 0 0;
            color: var(--svc-muted);
            font-size: 14px;
        }

        .cta-btn {
            border: 0;
            border-radius: 12px;
            padding: 12px 18px;
            color: #fff;
            text-decoration: none;
            font-size: 14px;
            font-weight: 700;
            background: linear-gradient(135deg, var(--svc-accent), var(--svc-accent-dark));
            box-shadow: 0 10px 22px rgba(138, 100, 63, 0.34);
            white-space: nowrap;
        }

        .cta-btn:hover {
            color: #fff;
            filter: brightness(1.03);
        }

        /* Card action row */
        .service-card-actions {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
            margin-top: 4px;
        }

        .get-quote-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 8px 16px;
            border-radius: 999px;
            background: linear-gradient(135deg, var(--svc-accent), var(--svc-accent-dark));
            color: #fff !important;
            font-size: 13px;
            font-weight: 700;
            text-decoration: none;
            letter-spacing: 0.04em;
            white-space: nowrap;
            box-shadow: 0 4px 14px rgba(138,100,63,0.30);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .get-quote-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(138,100,63,0.38);
            color: #fff !important;
        }

        @media (max-width: 480px) {
            .service-card-actions {
                flex-direction: column;
                align-items: flex-start;
            }
            .get-quote-btn {
                width: 100%;
                justify-content: center;
            }
        }

        @media (max-width: 1024px) {
            .service-card {
                grid-column: span 6;
            }
        }

        @media (max-width: 991.98px) {
            .services-page {
                padding-top: 92px;
            }

            .services-hero {
                grid-template-columns: 1fr;
            }

            .hero-side {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        @media (max-width: 767.98px) {
            .service-card {
                grid-column: span 12;
            }

            .hero-side {
                grid-template-columns: repeat(2, 1fr);
            }

            .services-cta {
                align-items: flex-start;
            }

            .favorite-service-btn {
                width: 38px;
                height: 38px;
            }
        }

        @media (max-width: 575.98px) {
            .services-page {
                padding-top: 72px;
            }

            .hero-main,
            .hero-side,
            .service-card,
            .services-cta {
                border-radius: 14px;
            }

            .hero-side {
                padding: 10px;
                gap: 8px;
            }

            .service-body {
                padding: 14px;
            }

            .metric {
                padding: 12px;
            }
        }

        .fav-toast {
            position: fixed;
            top: 18px;
            right: 18px;
            background: #1f1b17;
            color: #fff;
            border-radius: 10px;
            padding: 10px 14px;
            font-size: 13px;
            z-index: 20000;
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.24);
            display: none;
        }

        /* ===================== QUOTE MODAL ===================== */
        .quote-overlay {
            position: fixed;
            inset: 0;
            z-index: 30000;
            background: rgba(18, 14, 10, 0.55);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            padding: 16px;
        }
        .quote-overlay.active {
            opacity: 1;
            visibility: visible;
        }
        .quote-modal {
            position: relative;
            width: 100%;
            max-width: 820px;
            max-height: 90vh;
            background: #fff;
            border-radius: 22px;
            box-shadow: 0 32px 80px rgba(20, 12, 5, 0.28);
            display: flex;
            flex-direction: column;
            overflow: hidden;
            transform: translateY(30px) scale(0.96);
            transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
        }
        .quote-overlay.active .quote-modal {
            transform: translateY(0) scale(1);
        }

        /* Header */
        .quote-header {
            display: flex;
            align-items: center;
            gap: 16px;
            padding: 22px 28px;
            background: linear-gradient(135deg, #2c1e10 0%, #4a3322 100%);
            color: #fff;
            flex-shrink: 0;
        }
        .quote-header-img {
            width: 60px;
            height: 60px;
            border-radius: 14px;
            object-fit: cover;
            border: 2px solid rgba(255,255,255,0.18);
            flex-shrink: 0;
        }
        .quote-header-info {
            flex: 1;
            min-width: 0;
        }
        .quote-header-title {
            font-size: clamp(18px, 3vw, 24px);
            font-weight: 800;
            margin: 0 0 4px;
            line-height: 1.2;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .quote-header-sub {
            font-size: 13px;
            color: rgba(255,255,255,0.65);
            margin: 0;
        }
        .quote-close-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,0.2);
            background: rgba(255,255,255,0.08);
            color: #fff;
            font-size: 18px;
            display: grid;
            place-items: center;
            cursor: pointer;
            flex-shrink: 0;
            transition: background 0.2s, transform 0.2s;
        }
        .quote-close-btn:hover {
            background: rgba(255,255,255,0.18);
            transform: rotate(90deg);
        }

        /* Body */
        .quote-body {
            flex: 1;
            overflow-y: auto;
            padding: 24px 28px;
            overscroll-behavior: contain;
        }
        .quote-body::-webkit-scrollbar { width: 5px; }
        .quote-body::-webkit-scrollbar-thumb { background: #d4c4b0; border-radius: 99px; }

        /* Service meta strip */
        .quote-meta-strip {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 22px;
        }
        .quote-meta-chip {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: #f9f2e9;
            border: 1px solid #eadccf;
            border-radius: 999px;
            padding: 6px 14px;
            font-size: 12px;
            font-weight: 700;
            color: var(--svc-accent-dark);
            letter-spacing: 0.03em;
        }
        .quote-meta-chip i {
            font-size: 11px;
            opacity: 0.7;
        }

        /* Description */
        .quote-desc {
            color: var(--svc-muted);
            font-size: 14px;
            line-height: 1.7;
            margin-bottom: 24px;
            padding-bottom: 20px;
            border-bottom: 1px solid #eee;
        }

        /* Section label */
        .quote-section-label {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            font-weight: 800;
            color: var(--svc-ink);
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 14px;
        }
        .quote-section-label i {
            color: var(--svc-accent);
            font-size: 16px;
        }

        /* Product table */
        .quote-products-table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
            margin-bottom: 20px;
        }
        .quote-products-table thead th {
            background: #faf6f0;
            color: var(--svc-muted);
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            padding: 10px 14px;
            text-align: left;
            border-bottom: 2px solid #ecdfd0;
        }
        .quote-products-table thead th:first-child {
            border-radius: 10px 0 0 0;
        }
        .quote-products-table thead th:last-child {
            border-radius: 0 10px 0 0;
            text-align: right;
        }
        .quote-products-table tbody td {
            padding: 12px 14px;
            font-size: 14px;
            color: var(--svc-ink);
            border-bottom: 1px solid #f2ebe2;
            vertical-align: middle;
        }
        .quote-products-table tbody tr:last-child td {
            border-bottom: none;
        }
        .quote-products-table tbody tr {
            transition: background 0.15s;
        }
        .quote-products-table tbody tr:hover {
            background: #fdfaf6;
        }
        .quote-products-table .prod-index {
            width: 36px;
            height: 36px;
            border-radius: 10px;
            background: linear-gradient(135deg, var(--svc-accent), var(--svc-accent-dark));
            color: #fff;
            font-size: 12px;
            font-weight: 800;
            display: inline-grid;
            place-items: center;
        }
        .quote-products-table .prod-name {
            font-weight: 700;
        }
        .quote-products-table .prod-qty {
            text-align: center;
            color: var(--svc-muted);
            font-weight: 600;
        }
        .quote-products-table .prod-cost {
            text-align: right;
            font-weight: 800;
            color: var(--svc-accent-dark);
            white-space: nowrap;
        }

        /* Empty state */
        .quote-empty {
            text-align: center;
            padding: 32px 16px;
            color: var(--svc-muted);
        }
        .quote-empty i {
            font-size: 40px;
            opacity: 0.25;
            margin-bottom: 12px;
            display: block;
        }
        .quote-empty p {
            font-size: 14px;
            margin: 0;
        }

        /* Tools list */
        .quote-tools-list {
            list-style: none;
            padding: 0;
            margin: 0 0 20px;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .quote-tools-list li {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: #f0f9f5;
            border: 1px solid #d0e8da;
            border-radius: 999px;
            padding: 5px 12px;
            font-size: 12px;
            font-weight: 600;
            color: #2a5f4a;
        }
        .quote-tools-list li i {
            font-size: 10px;
            color: #1b8a67;
        }

        /* Footer / Totals */
        .quote-footer {
            flex-shrink: 0;
            padding: 20px 28px;
            background: linear-gradient(to top, #faf6f0, #fff);
            border-top: 1px solid #ece0d2;
        }
        .quote-totals {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 16px;
        }
        .quote-total-card {
            flex: 1;
            min-width: 130px;
            background: #fff;
            border: 1px solid #ece0d2;
            border-radius: 14px;
            padding: 14px 16px;
            text-align: center;
        }
        .quote-total-card.highlight {
            background: linear-gradient(135deg, #2c1e10 0%, #4a3322 100%);
            border-color: transparent;
            color: #fff;
        }
        .quote-total-label {
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            opacity: 0.65;
            margin-bottom: 4px;
        }
        .quote-total-value {
            font-size: clamp(18px, 3vw, 24px);
            font-weight: 800;
            line-height: 1.1;
        }
        .quote-total-card.highlight .quote-total-value {
            color: #f5d98b;
        }
        .quote-actions {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }
        .quote-action-btn {
            flex: 1;
            min-width: 140px;
            padding: 13px 18px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 700;
            text-decoration: none;
            text-align: center;
            cursor: pointer;
            border: none;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .quote-action-btn:hover {
            transform: translateY(-2px);
        }
        .quote-action-btn.primary {
            background: linear-gradient(135deg, var(--svc-accent), var(--svc-accent-dark));
            color: #fff;
            box-shadow: 0 8px 20px rgba(138,100,63,0.3);
        }
        .quote-action-btn.primary:hover {
            box-shadow: 0 12px 28px rgba(138,100,63,0.4);
            color: #fff;
        }
        .quote-action-btn.secondary {
            background: #fff;
            color: var(--svc-accent-dark);
            border: 1px solid var(--svc-border);
        }
        .quote-action-btn.secondary:hover {
            background: #fdf8f2;
            color: var(--svc-accent-dark);
        }

        /* Loading spinner */
        .quote-loading {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 60px 20px;
            gap: 16px;
        }
        .quote-spinner {
            width: 40px;
            height: 40px;
            border: 3px solid #ecdfd0;
            border-top-color: var(--svc-accent);
            border-radius: 50%;
            animation: q-spin 0.7s linear infinite;
        }
        @keyframes q-spin {
            to { transform: rotate(360deg); }
        }
        .quote-loading p {
            color: var(--svc-muted);
            font-size: 14px;
            margin: 0;
        }

        /* Print styles */
        @media print {
            .quote-overlay { position: static; background: none; backdrop-filter: none; padding: 0; }
            .quote-modal { max-height: none; box-shadow: none; border-radius: 0; }
            .quote-close-btn, .quote-actions { display: none !important; }
        }

        /* Responsive modal */
        @media (max-width: 767.98px) {
            .quote-overlay { padding: 0; align-items: flex-end; }
            .quote-modal {
                max-width: 100%;
                max-height: 94vh;
                border-radius: 22px 22px 0 0;
                transform: translateY(100%);
            }
            .quote-overlay.active .quote-modal {
                transform: translateY(0);
            }
            .quote-header { padding: 18px 20px; }
            .quote-header-img { width: 48px; height: 48px; border-radius: 10px; }
            .quote-body { padding: 18px 18px; }
            .quote-footer { padding: 16px 18px; }
            .quote-products-table thead { display: none; }
            .quote-products-table,
            .quote-products-table tbody,
            .quote-products-table tr,
            .quote-products-table td {
                display: block;
                width: 100%;
            }
            .quote-products-table tbody tr {
                background: #fdfaf6;
                border: 1px solid #f0e8dc;
                border-radius: 12px;
                padding: 14px;
                margin-bottom: 10px;
                display: grid;
                grid-template-columns: auto 1fr auto;
                grid-template-rows: auto auto;
                gap: 4px 12px;
                align-items: center;
            }
            .quote-products-table tbody td {
                padding: 0;
                border: none;
            }
            .quote-products-table tbody td:nth-child(1) { grid-row: 1 / 3; }
            .quote-products-table tbody td:nth-child(2) { grid-column: 2; grid-row: 1; font-size: 14px; }
            .quote-products-table tbody td:nth-child(3) { grid-column: 2; grid-row: 2; font-size: 12px; text-align: left; }
            .quote-products-table tbody td:nth-child(4) { grid-column: 3; grid-row: 1 / 3; text-align: right; }
            .quote-products-table .prod-qty::before { content: 'Qty: '; color: var(--svc-muted); font-weight: 600; }
        }
        @media (max-width: 480px) {
            .quote-header-title { font-size: 16px; }
            .quote-totals { flex-direction: column; }
            .quote-total-card { min-width: 100%; }
            .quote-actions { flex-direction: column; }
            .quote-action-btn { width: 100%; min-width: 0; }
        }
    </style>
</head>

<body id="show-grid">
    <?php include 'header-php.php'; ?>

    <main class="services-page">
        <div class="services-shell">
            

            <section class="services-grid" aria-label="Service listing">
                <?php foreach ($services as $index => $service): ?>
                    <?php
                    $title = htmlspecialchars((string) ($service['title'] ?? 'Service'));
                    $image = htmlspecialchars((string) ($service['image'] ?? 'assets/img/service/service_2_1.jpg'));
                    $serviceId = (int) ($service['id'] ?? ($index + 1));
                    $detailsLink = 'service-details.php?id=' . $serviceId;
                    $description = htmlspecialchars((string) ($service['description'] ?? ''));
                    $countLabel = str_pad((string) ($index + 1), 2, '0', STR_PAD_LEFT);
                    $isFavorite = in_array($serviceId, $favoriteServiceIds, true);
                    ?>
                    <article class="service-card">
                        <div class="service-image">
                            <button
                                class="favorite-service-btn <?php echo $isFavorite ? 'active' : ''; ?>"
                                type="button"
                                data-service-id="<?php echo $serviceId; ?>"
                                data-title="<?php echo $title; ?>"
                                data-image="<?php echo $image; ?>"
                                data-description="<?php echo $description; ?>"
                                aria-label="Toggle favorite service">
                                <i class="fa-solid fa-heart" aria-hidden="true"></i>
                            </button>
                            <img src="<?php echo $image; ?>" alt="<?php echo $title; ?>" loading="lazy">
                        </div>
                        <div class="service-body">
                            <span class="service-index">Service <?php echo $countLabel; ?></span>
                            <h2 class="service-title"><a href="<?php echo $detailsLink; ?>"><?php echo $title; ?></a></h2>
                            <p class="service-text"><?php echo $description; ?></p>
                            <div class="service-card-actions">
                                <a class="service-link" href="<?php echo $detailsLink; ?>">Explore Details <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
                                <button class="get-quote-btn" type="button" data-quote-service-id="<?php echo $serviceId; ?>">
                                    <i class="fa-solid fa-file-invoice"></i> Get Quote
                                </button>
                            </div>
                        </div>
                    </article>
                <?php endforeach; ?>
            </section>

            <section class="services-cta" aria-label="Consultation call to action">
                <div>
                    <h3>Need help selecting the right service package?</h3>
                    <p>Book a consultation with our design team and get a tailored plan for your space.</p>
                </div>
                <div style="display:flex; gap:10px; flex-wrap:wrap;">
                    <a class="cta-btn" href="contact.php">Book Free Consultation</a>
                    <a class="cta-btn" href="service-favorites.php">My Favorites</a>
                </div>
            </section>
        </div>
    </main>

    <!-- ===================== QUOTE MODAL ===================== -->
    <div class="quote-overlay" id="quoteOverlay" role="dialog" aria-modal="true" aria-label="Service Quote">
        <div class="quote-modal">
            <div class="quote-header">
                <img class="quote-header-img" id="quoteImg" src="" alt="">
                <div class="quote-header-info">
                    <h2 class="quote-header-title" id="quoteTitle"></h2>
                    <p class="quote-header-sub">Detailed service quotation</p>
                </div>
                <button class="quote-close-btn" id="quoteCloseBtn" type="button" aria-label="Close quote">
                    <i class="fa-solid fa-xmark"></i>
                </button>
            </div>
            <div class="quote-body" id="quoteBody">
                <div class="quote-loading" id="quoteLoading">
                    <div class="quote-spinner"></div>
                    <p>Loading service quote&hellip;</p>
                </div>
                <div id="quoteContent" style="display:none"></div>
            </div>
            <div class="quote-footer" id="quoteFooter" style="display:none">
                <div class="quote-totals" id="quoteTotals"></div>
                <div class="quote-actions" id="quoteActions"></div>
            </div>
        </div>
    </div>

    <?php include 'footer-section.html'; ?>

    

    <script src="assets/js/vendor/jquery-3.7.1.min.js"></script>
    <script src="assets/js/swiper-bundle.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/jquery.magnific-popup.min.js"></script>
    <script src="assets/js/jquery.counterup.min.js"></script>
    <script src="assets/js/circle-progress.js"></script>
    <script src="assets/js/jquery-ui.min.js"></script>
    <script src="assets/js/imagesloaded.pkgd.min.js"></script>
    <script src="assets/js/isotope.pkgd.min.js"></script>
    <script src="assets/js/nice-select.min.js"></script>
    <script src="assets/js/wow.min.js"></script>
    <script src="assets/js/threesixty.min.js"></script>
    <script src="assets/js/panolens.min.js"></script>
    <script src="assets/js/gsap.min.js"></script>
    <script src="assets/js/ScrollTrigger.min.js"></script>
    <script src="assets/js/SplitText.js"></script>
    <script src="assets/js/SplitType.js"></script>
    <script src="assets/js/lenis.min.js"></script>
    <script src="assets/js/CustomEase.min.js"></script>
    <script src="assets/js/main.js"></script>
    <script>
        (function () {
            var isAuthenticated = <?php echo $isCustomerLoggedIn ? 'true' : 'false'; ?>;
            var loginUrl = 'auth-system/login.php?redirect=service.php';
            var buttons = document.querySelectorAll('.favorite-service-btn');

            function showFavToast(message) {
                var toast = document.querySelector('.fav-toast');
                if (!toast) {
                    toast = document.createElement('div');
                    toast.className = 'fav-toast';
                    document.body.appendChild(toast);
                }
                toast.textContent = message;
                toast.style.display = 'block';
                setTimeout(function () {
                    toast.style.display = 'none';
                }, 2200);
            }

            buttons.forEach(function (button) {
                button.addEventListener('click', async function () {
                    if (!isAuthenticated) {
                        window.location.href = loginUrl;
                        return;
                    }

                    var serviceId = this.getAttribute('data-service-id');
                    var serviceTitle = this.getAttribute('data-title');
                    var serviceImage = this.getAttribute('data-image');
                    var serviceDescription = this.getAttribute('data-description');
                    var isActive = this.classList.contains('active');
                    var action = isActive ? 'remove' : 'add';

                    this.disabled = true;
                    try {
                        var response = await fetch('api/service-favorites-api.php?action=' + action, {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json' },
                            body: JSON.stringify({
                                service_id: serviceId,
                                service_title: serviceTitle,
                                service_image: serviceImage,
                                service_description: serviceDescription
                            })
                        });
                        var data = await response.json();

                        if (data.success) {
                            this.classList.toggle('active');
                            try {
                                var syncPayload = {
                                    source: 'service-page',
                                    action: action,
                                    service_id: Number(serviceId),
                                    ts: Date.now()
                                };
                                localStorage.setItem('serviceFavoritesSync', JSON.stringify(syncPayload));
                                window.dispatchEvent(new CustomEvent('service-favorites-updated', { detail: syncPayload }));
                            } catch (syncError) {
                                // Keep UX smooth even if localStorage is blocked
                            }
                            showFavToast(isActive ? 'Removed from favorite services' : 'Added to favorite services');
                        } else {
                            showFavToast(data.message || 'Unable to update favorite');
                        }
                    } catch (error) {
                        showFavToast('Network error while updating favorite');
                    } finally {
                        this.disabled = false;
                    }
                });
            });
        })();
    </script>

    <!-- ===================== QUOTE MODAL JS ===================== -->
    <script>
    (function() {
        var overlay  = document.getElementById('quoteOverlay');
        var closeBtn = document.getElementById('quoteCloseBtn');
        var loading  = document.getElementById('quoteLoading');
        var content  = document.getElementById('quoteContent');
        var footer   = document.getElementById('quoteFooter');
        var titleEl  = document.getElementById('quoteTitle');
        var imgEl    = document.getElementById('quoteImg');
        var totalsEl = document.getElementById('quoteTotals');
        var actionsEl= document.getElementById('quoteActions');

        function formatCurrency(n) {
            return '₹' + Number(n).toLocaleString('en-IN', { minimumFractionDigits: 0, maximumFractionDigits: 2 });
        }

        function openQuote(serviceId) {
            loading.style.display = 'flex';
            content.style.display = 'none';
            footer.style.display  = 'none';
            overlay.classList.add('active');
            document.body.style.overflow = 'hidden';

            fetch('api/service-quote-api.php?service_id=' + serviceId)
                .then(function(r) { return r.json(); })
                .then(function(data) {
                    if (!data.success) {
                        content.innerHTML = '<div class="quote-empty"><i class="fa-solid fa-circle-exclamation"></i><p>' + (data.message || 'Unable to load quote') + '</p></div>';
                        loading.style.display = 'none';
                        content.style.display = 'block';
                        return;
                    }

                    var svc = data.service;
                    var products = data.products || [];
                    var tools = data.tools || [];

                    titleEl.textContent = svc.title;
                    imgEl.src = svc.image || 'assets/img/service/service_2_1.jpg';
                    imgEl.alt = svc.title;

                    var html = '';

                    // Meta chips
                    html += '<div class="quote-meta-strip">';
                    if (svc.price > 0) html += '<span class="quote-meta-chip"><i class="fa-solid fa-tag"></i> Base: ' + formatCurrency(svc.price) + '</span>';
                    if (svc.area_sqft > 0) html += '<span class="quote-meta-chip"><i class="fa-solid fa-ruler-combined"></i> ' + svc.area_sqft.toLocaleString() + ' sqft</span>';
                    if (svc.duration) html += '<span class="quote-meta-chip"><i class="fa-solid fa-clock"></i> ' + svc.duration + '</span>';
                    if (svc.status) html += '<span class="quote-meta-chip"><i class="fa-solid fa-circle-check"></i> ' + svc.status + '</span>';
                    html += '</div>';

                    // Description
                    if (svc.description) {
                        html += '<p class="quote-desc">' + svc.description + '</p>';
                    }

                    // Products
                    if (products.length > 0) {
                        html += '<div class="quote-section-label"><i class="fa-solid fa-boxes-stacked"></i> Products &amp; Items Included (' + products.length + ')</div>';
                        html += '<table class="quote-products-table"><thead><tr>';
                        html += '<th>#</th><th>Product</th><th style="text-align:center">Qty</th><th style="text-align:right">Price</th>';
                        html += '</tr></thead><tbody>';

                        products.forEach(function(p, i) {
                            var qty = isNaN(Number(p.quantity)) ? p.quantity : Number(p.quantity);
                            var lineTotal = p.cost * (typeof qty === 'number' ? qty : 1);
                            html += '<tr>';
                            html += '<td><span class="prod-index">' + (i + 1) + '</span></td>';
                            html += '<td class="prod-name">' + p.product_name + '</td>';
                            html += '<td class="prod-qty">' + p.quantity + '</td>';
                            html += '<td class="prod-cost">' + formatCurrency(lineTotal) + '</td>';
                            html += '</tr>';
                        });

                        html += '</tbody></table>';
                    } else {
                        html += '<div class="quote-empty"><i class="fa-solid fa-cube"></i><p>No specific products listed for this service yet.</p></div>';
                    }

                    // Tools
                    if (tools.length > 0) {
                        html += '<div class="quote-section-label" style="margin-top:8px"><i class="fa-solid fa-screwdriver-wrench"></i> Tools &amp; Equipment</div>';
                        html += '<ul class="quote-tools-list">';
                        tools.forEach(function(t) {
                            html += '<li><i class="fa-solid fa-check"></i> ' + t.tool_name + '</li>';
                        });
                        html += '</ul>';
                    }

                    content.innerHTML = html;
                    loading.style.display = 'none';
                    content.style.display = 'block';

                    // Footer totals
                    var totalProd = data.total_product_cost || 0;
                    var basePrice = svc.price || 0;
                    var grandTotal = basePrice > 0 ? basePrice : totalProd;

                    var totalsHtml = '';
                    if (products.length > 0) {
                        totalsHtml += '<div class="quote-total-card"><div class="quote-total-label">Products Total</div><div class="quote-total-value">' + formatCurrency(totalProd) + '</div></div>';
                    }
                    if (basePrice > 0) {
                        totalsHtml += '<div class="quote-total-card"><div class="quote-total-label">Service Price</div><div class="quote-total-value">' + formatCurrency(basePrice) + '</div></div>';
                    }
                    totalsHtml += '<div class="quote-total-card highlight"><div class="quote-total-label">Estimated Total</div><div class="quote-total-value">' + formatCurrency(grandTotal > 0 ? grandTotal : totalProd) + '</div></div>';
                    totalsEl.innerHTML = totalsHtml;

                    // Actions
                    actionsEl.innerHTML = '<a class="quote-action-btn primary" href="service-booking.php?service_id=' + svc.id + '&service=' + encodeURIComponent(svc.title) + '"><i class="fa-solid fa-calendar-check"></i>&nbsp; Book Service</a>'
                        + '<button class="quote-action-btn secondary" type="button" onclick="downloadQuote()"><i class="fa-solid fa-download"></i>&nbsp; Download Quote</button>'
                        + '<a class="quote-action-btn secondary" href="service-details.php?id=' + svc.id + '"><i class="fa-solid fa-eye"></i>&nbsp; View Full Details</a>';

                    footer.style.display = 'block';
                })
                .catch(function() {
                    content.innerHTML = '<div class="quote-empty"><i class="fa-solid fa-circle-exclamation"></i><p>Network error. Please try again.</p></div>';
                    loading.style.display = 'none';
                    content.style.display = 'block';
                });
        }

        function closeQuote() {
            overlay.classList.remove('active');
            document.body.style.overflow = '';
        }

        // Bind close
        closeBtn.addEventListener('click', closeQuote);
        overlay.addEventListener('click', function(e) {
            if (e.target === overlay) closeQuote();
        });
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && overlay.classList.contains('active')) closeQuote();
        });

        // Bind Get Quote buttons
        document.querySelectorAll('.get-quote-btn[data-quote-service-id]').forEach(function(btn) {
            btn.addEventListener('click', function(e) {
                e.preventDefault();
                openQuote(this.getAttribute('data-quote-service-id'));
            });
        });
    })();

    /* ---- Download Quote as printable document ---- */
    function downloadQuote() {
        var title = document.getElementById('quoteTitle').textContent || 'Service Quote';
        var body = document.getElementById('quoteContent').innerHTML || '';
        var totals = document.getElementById('quoteTotals').innerHTML || '';
        var date = new Date().toLocaleDateString('en-IN', { year:'numeric', month:'long', day:'numeric' });

        var html = '<!DOCTYPE html><html><head><meta charset="utf-8"><title>Quote - ' + title + '</title>'
            + '<style>'
            + '*{margin:0;padding:0;box-sizing:border-box}'
            + 'body{font-family:Segoe UI,Tahoma,sans-serif;color:#1f1b17;padding:40px;max-width:800px;margin:0 auto}'
            + '.q-header{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:3px solid #b58a5a;padding-bottom:20px;margin-bottom:28px}'
            + '.q-brand{font-size:24px;font-weight:800;color:#2c1e10;letter-spacing:-0.5px}'
            + '.q-brand span{color:#b58a5a}'
            + '.q-info{text-align:right;font-size:12px;color:#6f665d;line-height:1.7}'
            + '.q-title{font-size:22px;font-weight:800;color:#2c1e10;margin-bottom:16px}'
            + '.q-meta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}'
            + '.q-chip{background:#f9f2e9;border:1px solid #eadccf;border-radius:99px;padding:5px 14px;font-size:11px;font-weight:700;color:#8a643f}'
            + '.q-desc{font-size:13px;color:#6f665d;line-height:1.7;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid #eee}'
            + '.q-label{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:0.1em;color:#1f1b17;margin-bottom:10px}'
            + 'table{width:100%;border-collapse:collapse;margin-bottom:20px}'
            + 'th{background:#faf6f0;color:#6f665d;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;padding:10px 12px;text-align:left;border-bottom:2px solid #ecdfd0}'
            + 'th:last-child{text-align:right}'
            + 'td{padding:10px 12px;font-size:13px;border-bottom:1px solid #f2ebe2}'
            + 'td:last-child{text-align:right;font-weight:700;color:#8a643f}'
            + '.q-totals{display:flex;gap:12px;margin-top:24px}'
            + '.q-total-card{flex:1;border:1px solid #ece0d2;border-radius:12px;padding:14px;text-align:center}'
            + '.q-total-card.hl{background:#2c1e10;border-color:transparent;color:#fff}'
            + '.q-total-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.08em;opacity:0.6;margin-bottom:4px}'
            + '.q-total-val{font-size:20px;font-weight:800}'
            + '.q-total-card.hl .q-total-val{color:#f5d98b}'
            + '.q-footer{margin-top:40px;text-align:center;font-size:11px;color:#999;border-top:1px solid #eee;padding-top:16px}'
            + '@media print{body{padding:20px}}'
            + '</style></head><body>'
            + '<div class="q-header"><div><div class="q-brand">FAREN <span>ARCHITECTS</span></div><div style="font-size:12px;color:#6f665d;margin-top:4px">Interior Design & Architecture</div></div>'
            + '<div class="q-info">QUOTATION<br>Date: ' + date + '<br>Ref: SQ-' + Date.now().toString(36).toUpperCase() + '</div></div>'
            + '<div class="q-title">' + title + '</div>'
            + body
            + '<div class="q-totals">' + totals.replace(/quote-total-card highlight/g,'q-total-card hl').replace(/quote-total-card/g,'q-total-card').replace(/quote-total-label/g,'q-total-lbl').replace(/quote-total-value/g,'q-total-val') + '</div>'
            + '<div class="q-footer">This is a computer-generated quotation. Prices are estimates and subject to change.<br>&copy; ' + new Date().getFullYear() + ' Faren Architects. All rights reserved.</div>'
            + '<script>window.onload=function(){window.print()}<\/script>'
            + '</body></html>';

        var w = window.open('', '_blank');
        if (w) { w.document.write(html); w.document.close(); }
    }
    </script>

    <!-- Chat Widget -->
    <?php include 'includes/chat-widget.html'; ?>
    <!-- Responsive Chat Script -->
    <script src="assets/js/responsive-chat-ai.js"></script>
</body>

</html>
