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

$connection->query("
    CREATE TABLE IF NOT EXISTS projects (
        id INT AUTO_INCREMENT PRIMARY KEY,
        title VARCHAR(255) NOT NULL,
        category VARCHAR(100) NOT NULL DEFAULT 'Interior',
        location VARCHAR(120) NOT NULL DEFAULT '',
        project_year VARCHAR(10) NOT NULL DEFAULT '',
        image VARCHAR(500) NOT NULL DEFAULT '',
        description TEXT,
        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,
        INDEX idx_sort_order (sort_order),
        INDEX idx_is_active (is_active)
    ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4
");

$projectId = isset($_GET['id']) ? (int)$_GET['id'] : 0;

$fallbackProjects = [
    1 => [
        'id' => 1,
        'title' => 'Saffron Courtyard Residence',
        'category' => 'Residential',
        'location' => 'Bangalore',
        'project_year' => '2026',
        'image' => 'assets/img/project/project_1_1.jpg',
        'description' => 'A warm, layered interior with crafted wood, natural light planning, and quiet luxury detailing.',
    ],
    2 => [
        'id' => 2,
        'title' => 'Vertex Executive Office',
        'category' => 'Commercial',
        'location' => 'Mumbai',
        'project_year' => '2025',
        'image' => 'assets/img/project/project_1_2.jpg',
        'description' => 'High-efficiency workspace with acoustic zoning, hospitality-style lounge areas, and premium material palette.',
    ],
    3 => [
        'id' => 3,
        'title' => 'Nadi Wellness Studio',
        'category' => 'Hospitality',
        'location' => 'Pune',
        'project_year' => '2025',
        'image' => 'assets/img/project/project_1_3.jpg',
        'description' => 'Biophilic interior direction that blends calm textures, tactile finishes, and ambient illumination.',
    ],
    4 => [
        'id' => 4,
        'title' => 'Amber Dining Pavilion',
        'category' => 'Restaurant',
        'location' => 'Hyderabad',
        'project_year' => '2024',
        'image' => 'assets/img/project/project_1_4.jpg',
        'description' => 'A modern dining concept balancing intimate seating clusters with dramatic statement lighting.',
    ],
    5 => [
        'id' => 5,
        'title' => 'Nordic Family Living',
        'category' => 'Residential',
        'location' => 'Chennai',
        'project_year' => '2026',
        'image' => 'assets/img/project/project_2_1.jpg',
        'description' => 'Clean-lined interiors with flexible family spaces, integrated storage, and muted Scandinavian tones.',
    ],
    6 => [
        'id' => 6,
        'title' => 'Harbor Retail Gallery',
        'category' => 'Retail',
        'location' => 'Ahmedabad',
        'project_year' => '2025',
        'image' => 'assets/img/project/project_2_2.jpg',
        'description' => 'Retail environment designed for visual storytelling through layered displays and circulation rhythm.',
    ],
    7 => [
        'id' => 7,
        'title' => 'Summit Co-Working Hub',
        'category' => 'Commercial',
        'location' => 'Delhi NCR',
        'project_year' => '2024',
        'image' => 'assets/img/project/project_3_1.jpg',
        'description' => 'Collaborative work destination with modular furniture planning and focused breakout ecosystems.',
    ],
    8 => [
        'id' => 8,
        'title' => 'Terra Boutique Stay',
        'category' => 'Hospitality',
        'location' => 'Goa',
        'project_year' => '2026',
        'image' => 'assets/img/project/project_4_1.jpg',
        'description' => 'Boutique hospitality interior featuring earthy material language, custom joinery, and curated art.',
    ],
];

$project = null;

if ($projectId > 0) {
    $stmt = $connection->prepare("SELECT id, title, category, location, project_year, image, description FROM projects WHERE id = ? AND is_active = 1 LIMIT 1");
    if ($stmt) {
        $stmt->bind_param('i', $projectId);
        $stmt->execute();
        $result = $stmt->get_result();
        if ($result && $result->num_rows > 0) {
            $project = $result->fetch_assoc();
        }
        $stmt->close();
    }
}

if (!$project) {
    if ($projectId > 0 && isset($fallbackProjects[$projectId])) {
        $project = $fallbackProjects[$projectId];
    } else {
        $latestResult = $connection->query("SELECT id, title, category, location, project_year, image, description FROM projects WHERE is_active = 1 ORDER BY sort_order ASC, id DESC LIMIT 1");
        if ($latestResult && $latestResult->num_rows > 0) {
            $project = $latestResult->fetch_assoc();
        } else {
            $project = reset($fallbackProjects);
        }
    }
}

$project = [
    'id' => (int)($project['id'] ?? 0),
    'title' => (string)($project['title'] ?? 'Project Details'),
    'category' => (string)($project['category'] ?? 'Interior'),
    'location' => (string)($project['location'] ?? 'Location not specified'),
    'project_year' => (string)($project['project_year'] ?? ''),
    'image' => (string)($project['image'] ?? 'assets/img/project/project_1_1.jpg'),
    'description' => (string)($project['description'] ?? 'Project description will be updated soon.'),
];

$relatedProjects = [];
if ($project['id'] > 0) {
    $relatedStmt = $connection->prepare("SELECT id, title, category, location, project_year, image FROM projects WHERE is_active = 1 AND id <> ? ORDER BY sort_order ASC, id DESC LIMIT 3");
    if ($relatedStmt) {
        $relatedStmt->bind_param('i', $project['id']);
        $relatedStmt->execute();
        $relatedResult = $relatedStmt->get_result();
        if ($relatedResult) {
            while ($row = $relatedResult->fetch_assoc()) {
                $relatedProjects[] = $row;
            }
        }
        $relatedStmt->close();
    }
}

if (count($relatedProjects) < 3) {
    foreach ($fallbackProjects as $fallback) {
        if ((int)$fallback['id'] === (int)$project['id']) {
            continue;
        }
        $relatedProjects[] = $fallback;
        if (count($relatedProjects) >= 3) {
            break;
        }
    }
}

$pageTitle = htmlspecialchars($project['title']) . ' | Faren Interior Design';
?>
<!doctype html>
<html class="no-js" lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title><?php echo $pageTitle; ?></title>
    <meta name="author" content="themeholy">
    <meta name="description" content="<?php echo htmlspecialchars($project['description']); ?>">
    <meta name="keywords" content="project details, interior portfolio, interior design case study">
    <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="192x192" href="assets/img/favicons/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="assets/img/favicons/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicons/favicon-16x16.png">
    <link rel="manifest" href="assets/img/favicons/manifest.json">

    <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">
    <script src="assets/js/auth-ui-global.js"></script>

    <style>
        :root {
            --pd-bg: #f4ede3;
            --pd-surface: #ffffff;
            --pd-border: #eadfce;
            --pd-text: #201a14;
            --pd-muted: #6f665c;
            --pd-accent: #b78d5e;
            --pd-accent-dark: #8f6945;
        }

        .project-details-page {
            min-height: 100vh;
            padding-bottom: 88px;
            background:
                radial-gradient(circle at 12% 12%, rgba(183, 141, 94, 0.16), transparent 35%),
                radial-gradient(circle at 84% 84%, rgba(143, 105, 69, 0.1), transparent 38%),
                linear-gradient(180deg, #f8f4ed 0%, var(--pd-bg) 100%);
        }

        .project-details-shell {
            width: min(1220px, calc(100% - 24px));
            margin: 0 auto;
        }

        .crumb-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 14px;
            flex-wrap: wrap;
        }

        .crumb-link {
            color: var(--pd-accent-dark);
            font-weight: 700;
            font-size: 14px;
            text-decoration: none;
        }

        .crumb-link:hover {
            color: #6f4d30;
        }

        .hero-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
            gap: 18px;
            margin-bottom: 20px;
        }

        .hero-media {
            background: #fff;
            border: 1px solid var(--pd-border);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 14px 35px rgba(33, 24, 16, 0.09);
            min-height: 430px;
        }

        .hero-media img {
            width: 100%;
            height: 100%;
            min-height: 430px;
            object-fit: cover;
            display: block;
        }

        .hero-content {
            background: linear-gradient(145deg, #1f1711 0%, #36281d 100%);
            border: 1px solid rgba(255, 255, 255, 0.12);
            border-radius: 20px;
            color: #fff;
            padding: clamp(20px, 3.4vw, 36px);
            box-shadow: 0 14px 35px rgba(21, 15, 10, 0.22);
        }

        .hero-kicker {
            margin: 0;
            text-transform: uppercase;
            letter-spacing: 0.11em;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.75);
            font-weight: 700;
        }

        .hero-title {
            margin: 10px 0 0;
            font-size: clamp(27px, 4.1vw, 46px);
            line-height: 1.08;
            font-weight: 800;
        }

        .hero-meta {
            margin-top: 18px;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
        }

        .hero-pill {
            border: 1px solid rgba(255, 255, 255, 0.14);
            border-radius: 12px;
            background: rgba(255, 255, 255, 0.08);
            padding: 12px;
        }

        .hero-pill strong {
            display: block;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: rgba(255, 255, 255, 0.75);
            margin-bottom: 4px;
            font-weight: 700;
        }

        .hero-pill span {
            font-size: 16px;
            line-height: 1.3;
            font-weight: 700;
            color: #fff;
        }

        .hero-desc {
            margin: 16px 0 0;
            color: rgba(255, 255, 255, 0.9);
            font-size: 16px;
            line-height: 1.75;
        }

        .hero-cta {
            margin-top: 18px;
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .pd-btn {
            border: 1px solid transparent;
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px 18px;
            font-size: 14px;
            font-weight: 700;
            text-decoration: none;
            transition: all 0.22s ease;
        }

        .pd-btn.primary {
            background: var(--pd-accent);
            color: #1e150d;
        }

        .pd-btn.primary:hover {
            background: #c79f74;
            color: #1e150d;
            transform: translateY(-1px);
        }

        .pd-btn.light {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            border-color: rgba(255, 255, 255, 0.2);
        }

        .pd-btn.light:hover {
            background: rgba(255, 255, 255, 0.2);
            color: #fff;
        }

        .content-grid {
            display: grid;
            grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
            gap: 18px;
            margin-bottom: 20px;
        }

        .panel {
            background: var(--pd-surface);
            border: 1px solid var(--pd-border);
            border-radius: 18px;
            padding: clamp(18px, 2.7vw, 28px);
            box-shadow: 0 10px 28px rgba(29, 20, 12, 0.06);
        }

        .panel h2 {
            margin: 0 0 10px;
            font-size: clamp(21px, 2.6vw, 30px);
            color: var(--pd-text);
            line-height: 1.2;
        }

        .panel p {
            margin: 0;
            color: var(--pd-muted);
            font-size: 16px;
            line-height: 1.78;
        }

        .feature-list {
            margin: 14px 0 0;
            padding: 0;
            list-style: none;
            display: grid;
            gap: 9px;
        }

        .feature-list li {
            border: 1px solid var(--pd-border);
            border-radius: 12px;
            padding: 10px 12px;
            color: #41352a;
            font-weight: 600;
            font-size: 14px;
            background: #fcfaf7;
        }

        .related-head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            margin-bottom: 10px;
        }

        .related-head h3 {
            margin: 0;
            font-size: clamp(24px, 3.1vw, 36px);
            color: #2d241b;
        }

        .related-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 14px;
        }

        .related-card {
            background: #fff;
            border: 1px solid var(--pd-border);
            border-radius: 14px;
            overflow: hidden;
            box-shadow: 0 8px 22px rgba(29, 20, 12, 0.06);
            display: flex;
            flex-direction: column;
            min-height: 100%;
        }

        .related-card img {
            width: 100%;
            height: 180px;
            object-fit: cover;
            display: block;
        }

        .related-card-body {
            padding: 14px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            height: 100%;
        }

        .related-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            font-size: 12px;
            color: #7f7264;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            font-weight: 700;
        }

        .related-title {
            margin: 0;
            font-size: 20px;
            line-height: 1.25;
            color: #221b15;
            font-weight: 800;
        }

        .related-link {
            margin-top: auto;
            text-decoration: none;
            font-weight: 700;
            color: var(--pd-accent-dark);
            font-size: 14px;
        }

        .related-link:hover {
            color: #6f4d30;
        }

        @media (max-width: 1199.98px) {
            .hero-grid {
                grid-template-columns: 1fr;
            }

            .hero-media,
            .hero-media img {
                min-height: 360px;
            }
        }

        @media (max-width: 991.98px) {
            .project-details-page {
                padding-top: 84px;
                padding-bottom: 72px;
            }

            .project-details-shell {
                width: min(1220px, calc(100% - 16px));
            }

            .content-grid,
            .related-grid {
                grid-template-columns: 1fr;
            }

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

        @media (max-width: 767.98px) {
            .hero-content,
            .hero-media,
            .panel,
            .related-card {
                border-radius: 12px;
            }

            .hero-media,
            .hero-media img {
                min-height: 260px;
            }

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

            .pd-btn {
                width: 100%;
            }
        }

        @media (max-width: 575.98px) {
            .project-details-page {
                padding-top: 68px;
            }

            .related-card img {
                height: 190px;
            }
        }
    </style>
</head>

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

    <main class="project-details-page">
        <div class="project-details-shell">
            <div class="crumb-row">
                <a href="project.php" class="crumb-link"><i class="fa-solid fa-arrow-left"></i> Back to Projects</a>
                <a href="contact.php" class="crumb-link">Need Similar Interior? Contact Team</a>
            </div>

            <section class="hero-grid" aria-label="Project overview">
                <div class="hero-media">
                    <img src="<?php echo htmlspecialchars($project['image']); ?>" alt="<?php echo htmlspecialchars($project['title']); ?>" loading="lazy">
                </div>

                <div class="hero-content">
                    <p class="hero-kicker">Project Details</p>
                    <h1 class="hero-title"><?php echo htmlspecialchars($project['title']); ?></h1>

                    <div class="hero-meta">
                        <div class="hero-pill">
                            <strong>Category</strong>
                            <span><?php echo htmlspecialchars($project['category']); ?></span>
                        </div>
                        <div class="hero-pill">
                            <strong>Location</strong>
                            <span><?php echo htmlspecialchars($project['location']); ?></span>
                        </div>
                        <div class="hero-pill">
                            <strong>Year</strong>
                            <span><?php echo htmlspecialchars($project['project_year'] !== '' ? $project['project_year'] : 'N/A'); ?></span>
                        </div>
                    </div>

                    <p class="hero-desc"><?php echo htmlspecialchars($project['description']); ?></p>

                    <div class="hero-cta">
                        <a href="contact.php" class="pd-btn primary"><i class="fa-solid fa-calendar-check"></i> Start Your Project</a>
                        <a href="project.php" class="pd-btn light"><i class="fa-solid fa-grid-2"></i> Browse More Projects</a>
                    </div>
                </div>
            </section>

            <section class="content-grid" aria-label="Project narrative">
                <article class="panel">
                    <h2>Design Approach</h2>
                    <p><?php echo htmlspecialchars($project['description']); ?></p>
                </article>

                <aside class="panel">
                    <h2>Project Snapshot</h2>
                    <ul class="feature-list">
                        <li>Tailored interior planning for <?php echo htmlspecialchars($project['category']); ?> spaces.</li>
                        <li>Location context aligned with <?php echo htmlspecialchars($project['location']); ?> lifestyle and climate.</li>
                        <li>Material selection and layout direction refined for long-term usability.</li>
                        <li>Execution-ready detailing support from concept to handover.</li>
                    </ul>
                </aside>
            </section>

            <section aria-label="Related projects">
                <div class="related-head">
                    <h3>Related Projects</h3>
                    <a href="project.php" class="crumb-link">View All</a>
                </div>

                <div class="related-grid">
                    <?php foreach ($relatedProjects as $related): ?>
                        <?php
                        $relatedId = (int)($related['id'] ?? 0);
                        $relatedTitle = (string)($related['title'] ?? 'Project');
                        $relatedCategory = (string)($related['category'] ?? 'Interior');
                        $relatedLocation = (string)($related['location'] ?? '');
                        $relatedYear = (string)($related['project_year'] ?? ($related['year'] ?? ''));
                        $relatedImage = (string)($related['image'] ?? 'assets/img/project/project_1_1.jpg');
                        ?>
                        <article class="related-card">
                            <img src="<?php echo htmlspecialchars($relatedImage); ?>" alt="<?php echo htmlspecialchars($relatedTitle); ?>" loading="lazy">
                            <div class="related-card-body">
                                <div class="related-meta">
                                    <span><?php echo htmlspecialchars($relatedCategory); ?></span>
                                    <?php if ($relatedLocation !== ''): ?><span><?php echo htmlspecialchars($relatedLocation); ?></span><?php endif; ?>
                                    <?php if ($relatedYear !== ''): ?><span><?php echo htmlspecialchars($relatedYear); ?></span><?php endif; ?>
                                </div>
                                <h4 class="related-title"><?php echo htmlspecialchars($relatedTitle); ?></h4>
                                <a class="related-link" href="project-details.php?id=<?php echo $relatedId; ?>">View Project <i class="fa-solid fa-arrow-right"></i></a>
                            </div>
                        </article>
                    <?php endforeach; ?>
                </div>
            </section>
        </div>
    </main>

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

    <div class="scroll-top">
        <svg class="progress-circle svg-content" width="100%" height="100%" viewbox="-1 -1 102 102">
            <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"
                style="transition: stroke-dashoffset 10ms linear 0s; stroke-dasharray: 307.919, 307.919; stroke-dashoffset: 307.919;">
            </path>
        </svg>
    </div>

    <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>
</body>
</html>
