<?php
include "config/db.php";

$hero = mysqli_fetch_assoc(mysqli_query(
    $con,
    "SELECT * FROM site_content WHERE section_name='hero'"
));

$about = mysqli_fetch_assoc(mysqli_query(
    $con,
    "SELECT * FROM site_content WHERE section_name='about'"
));

$services = mysqli_query($con, "SELECT * FROM services");

$projects = mysqli_query($con, "SELECT * FROM projects");
?>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Bhesh Raj Pokhrel | Portfolio</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">

    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            background: #f4f7fc;
            color: #333;
        }

        /* NAVBAR */

        .navbar {
            background: #111827;
            padding: 18px 60px;
        }

        .navbar .logo {
            color: white;
            font-size: 28px;
            font-weight: bold;
            text-decoration: none;
        }

        /* HERO */

        .hero {
            min-height: 90vh;
            background: linear-gradient(to right, #111827, #1f2937);
            color: white;
            display: flex;
            align-items: center;
            padding: 60px;
        }

        .hero-container {
            width: 100%;
            max-width: 1200px;
            margin: auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 50px;
            flex-wrap: wrap;
        }

        .hero-text {
            flex: 1;
        }

        .hero-text h1 {
            font-size: 65px;
            margin-bottom: 20px;
        }

        .hero-text h2 {
            font-size: 28px;
            color: #cbd5e1;
            margin-bottom: 25px;
        }

        .hero-text p {
            font-size: 18px;
            line-height: 1.8;
            margin-bottom: 30px;
        }

        .hero-btn {
            display: inline-block;
            background: #4f46e5;
            color: white;
            padding: 15px 35px;
            text-decoration: none;
            border-radius: 8px;
            transition: 0.3s;
        }

        .hero-btn:hover {
            background: #4338ca;
        }

        .hero-image {
            flex: 1;
            text-align: center;
        }

        .hero-image img {
            width: 380px;
            max-width: 100%;
            border-radius: 20px;
            border: 5px solid white;
            box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.3);
        }

        /* SECTION */

        section {
            padding: 80px 60px;
        }

        .section-title {
            text-align: center;
            margin-bottom: 50px;
        }

        .section-title h2 {
            font-size: 42px;
            color: #111827;
        }

        /* ABOUT */

        .about-container {
            max-width: 1200px;
            margin: auto;
            display: flex;
            align-items: center;
            gap: 50px;
            flex-wrap: wrap;
        }

        .about-image {
            flex: 1;
            text-align: center;
        }

        .about-image img {
            width: 400px;
            max-width: 100%;
            border-radius: 20px;
        }

        .about-text {
            flex: 1;
        }

        .about-text p {
            font-size: 18px;
            line-height: 1.9;
            color: #555;
        }

        /* SERVICES */

        .service-grid {
            max-width: 1200px;
            margin: auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
        }

        .service-card {
            background: white;
            padding: 35px;
            border-radius: 15px;
            box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.08);
            transition: 0.3s;
        }

        .service-card:hover {
            transform: translateY(-8px);
        }

        .service-card i {
            font-size: 45px;
            color: #4f46e5;
            margin-bottom: 20px;
        }

        .service-card h3 {
            margin-bottom: 15px;
            font-size: 26px;
        }

        .price {
            color: #4f46e5;
            font-size: 22px;
            font-weight: bold;
            margin-bottom: 15px;
        }

        /* PROJECTS */

        .project-grid {
            max-width: 1200px;
            margin: auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 30px;
        }

        .project-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.08);
        }

        .project-card img {
            width: 100%;
            height: 250px;
            object-fit: cover;
        }

        .project-content {
            padding: 25px;
        }

        .project-content h3 {
            margin-bottom: 10px;
        }

        /* FOOTER */

        footer {
            background: #111827;
            color: white;
            text-align: center;
            padding: 25px;
        }

        /* MOBILE */

        @media(max-width:768px) {

            .hero-text h1 {
                font-size: 42px;
            }

            .hero-text h2 {
                font-size: 22px;
            }

            section {
                padding: 60px 20px;
            }

            .navbar {
                padding: 18px 20px;
            }
        }
    </style>

</head>

<body>

    <!-- NAVBAR -->

    <nav class="navbar">

        <a href="#" class="logo">
            Bhesh Raj Pokhrel
        </a>

    </nav>

    <!-- HERO SECTION -->

    <section class="hero">

        <div class="hero-container">

            <div class="hero-text">

                <h1>
                    <?php echo $hero['title']; ?>
                </h1>

                <h2>
                    <?php echo $hero['subtitle']; ?>
                </h2>

                <p>
                    Professional Software Engineer specialized in Java, backend systems,
                    PHP web applications, MySQL databases, and scalable solutions.
                </p>

                <a href="#about" class="hero-btn">
                    Explore More
                </a>

            </div>

            <div class="hero-image">

                <img src="uploads/<?php echo $hero['image']; ?>" alt="">

            </div>

        </div>

    </section>

    <!-- ABOUT SECTION -->

    <section id="about">

        <div class="section-title">
            <h2>About Me</h2>
        </div>

        <div class="about-container">

            <div class="about-image">

                <img src="uploads/<?php echo $about['image']; ?>" alt="">

            </div>

            <div class="about-text">

                <h2 style="margin-bottom:20px;">
                    <?php echo $about['title']; ?>
                </h2>

                <p>
                    <?php echo $about['description']; ?>
                </p>

            </div>

        </div>

    </section>

    <!-- SERVICES -->

    <section>

        <div class="section-title">
            <h2>My Services</h2>
        </div>

        <div class="service-grid">

            <?php while ($row = mysqli_fetch_assoc($services)) { ?>

                <div class="service-card">

                    <i class="bi <?php echo $row['icon']; ?>"></i>

                    <h3>
                        <?php echo $row['service_name']; ?>
                    </h3>

                    <div class="price">
                        <?php echo $row['price']; ?>
                    </div>

                    <p>
                        <?php echo $row['description']; ?>
                    </p>

                </div>

            <?php } ?>

        </div>

    </section>

    <!-- PROJECTS -->

    <section>

        <div class="section-title">
            <h2>Projects</h2>
        </div>

        <div class="project-grid">

            <?php while ($row = mysqli_fetch_assoc($projects)) { ?>

                <div class="project-card">

                    <img src="uploads/<?php echo $row['image']; ?>" alt="">

                    <div class="project-content">

                        <h3>
                            <?php echo $row['project_name']; ?>
                        </h3>

                        <p>
                            <?php echo $row['category']; ?>
                        </p>

                    </div>

                </div>

            <?php } ?>

        </div>

    </section>

    <!-- FOOTER -->

    <footer>

        <p>
            © <?php echo date("Y"); ?> Bhesh Raj Pokhrel |
            Software Engineer | Java Developer
        </p>

    </footer>

</body>

</html>