<?php
$siteName = "AhmadTech";
$tagline = "Complete Digital Solutions";
$phone = "0320 8694803";
$whatsapp = "923208694803";
$email = "admin@writerblouch.com";
$address = "Rawalpindi, Punjab, Pakistan";

$ownerName = "Ahmad Nawaz";
$ownerPhone = "03208694803";
$ownerWhatsapp = "923208694803";

$teamName = "Office Team";
$teamPhone = "03208694803";
$teamWhatsapp = "923208694803";

$facebook = "https://www.facebook.com/yourpage";
$instagram = "https://www.instagram.com/yourpage";

$services = [
    ["icon" => "bi-keyboard", "title" => "Data Entry", "desc" => "All types of data entry, formatting, conversion and office support work."],
    ["icon" => "bi-journal-text", "title" => "Assignment Work", "desc" => "Handwritten assignment support, typing and academic formatting services."],
    ["icon" => "bi-cart-check", "title" => "Amazon Services", "desc" => "Amazon account handling, product listing and seller support."],
    ["icon" => "bi-file-earmark-richtext", "title" => "SEO Content Writing", "desc" => "Blogs, articles, product descriptions and optimized content writing."],
    ["icon" => "bi-megaphone", "title" => "Social Media Management", "desc" => "Page setup, posting plans, management and audience growth."],
    ["icon" => "bi-code-slash", "title" => "Web Development", "desc" => "Business, earning, custom and ecommerce websites."],
    ["icon" => "bi-bag-check", "title" => "E-commerce Website", "desc" => "Online stores, product pages, cart setup and order-friendly design."],
    ["icon" => "bi-speedometer2", "title" => "Website Optimization", "desc" => "Error fixing, redesign, speed optimization and performance improvement."],
    ["icon" => "bi-search", "title" => "SEO Services", "desc" => "Search engine optimization, ranking improvement and on-page SEO."],
    ["icon" => "bi-palette", "title" => "Graphic Designing", "desc" => "Logo design, banners, social posts and complete brand visuals."],
    ["icon" => "bi-mortarboard", "title" => "Courses & Guidance", "desc" => "Online courses, freelancing guidance and digital business consultancy."],
    ["icon" => "bi-briefcase", "title" => "Jobs & Opportunities", "desc" => "Office jobs, online jobs and career support."],
];

$packages = [
    ["name" => "Starter", "price" => "15,000", "features" => ["1 Page Website", "Mobile Responsive", "Basic Contact Form", "WhatsApp Button", "Fast Delivery"]],
    ["name" => "Business", "price" => "35,000", "features" => ["Multi Page Website", "Services Section", "Portfolio Section", "Contact Form + SEO Basics", "Professional UI"]],
    ["name" => "Premium", "price" => "75,000", "features" => ["Custom Design", "Ecommerce / Advanced Setup", "Speed Optimization", "Full Support & Branding", "Priority Revisions"]],
];

$testimonials = [
    ["name" => "Business Client", "text" => "Professional service, fast communication and very smooth project handling from start to finish."],
    ["name" => "Startup Owner", "text" => "The office team was cooperative and the owner guided us properly for our website and branding project."],
    ["name" => "Marketing Client", "text" => "Very professional presentation, social media support and excellent communication on WhatsApp."]
];

$teamMembers = [
    [
        "name" => "Your Name 1",
        "role" => "Your Role 1",
        "image" => "https://via.placeholder.com/400x400.png?text=Member+1",
        "whatsapp" => "923000000001"
    ],
    [
        "name" => "Your Name 2",
        "role" => "Your Role 2",
        "image" => "https://via.placeholder.com/400x400.png?text=Member+2",
        "whatsapp" => "923000000002"
    ],
    [
        "name" => "Your Name 3",
        "role" => "Your Role 3",
        "image" => "https://via.placeholder.com/400x400.png?text=Member+3",
        "whatsapp" => "923000000003"
    ],
    [
        "name" => "Your Name 4",
        "role" => "Your Role 4",
        "image" => "https://via.placeholder.com/400x400.png?text=Member+4",
        "whatsapp" => "923000000004"
    ],
    [
        "name" => "Your Name 5",
        "role" => "Your Role 5",
        "image" => "https://via.placeholder.com/400x400.png?text=Member+5",
        "whatsapp" => "923000000005"
    ],
    [
        "name" => "Your Name 6",
        "role" => "Your Role 6",
        "image" => "https://via.placeholder.com/400x400.png?text=Member+6",
        "whatsapp" => "923000000006"
    ],
    [
        "name" => "Your Name 7",
        "role" => "Your Role 7",
        "image" => "https://via.placeholder.com/400x400.png?text=Member+7",
        "whatsapp" => "923000000007"
    ],
    [
        "name" => "Your Name 8",
        "role" => "Your Role 8",
        "image" => "https://via.placeholder.com/400x400.png?text=Member+8",
        "whatsapp" => "923000000008"
    ]
];

$success = "";
$error = "";

$name = "";
$userEmail = "";
$message = "";

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $name = trim($_POST['name'] ?? '');
    $userEmail = trim($_POST['email'] ?? '');
    $message = trim($_POST['message'] ?? '');

    if ($name === '' || $userEmail === '' || $message === '') {
        $error = "Please fill all required fields.";
    } elseif (!filter_var($userEmail, FILTER_VALIDATE_EMAIL)) {
        $error = "Please enter a valid email address.";
    } else {
        $to = $email;
        $subject = "New Contact Form Message from " . $name;
        $body = "You received a new message from your website.\n\n"
              . "Name: " . $name . "\n"
              . "Email: " . $userEmail . "\n\n"
              . "Message:\n" . $message . "\n";

        $headers = "From: " . $email . "\r\n";
        $headers .= "Reply-To: " . $userEmail . "\r\n";
        $headers .= "Content-Type: text/plain; charset=UTF-8\r\n";

        if (mail($to, $subject, $body, $headers)) {
            $success = "Thank you! Your message has been sent successfully.";
            $name = "";
            $userEmail = "";
            $message = "";
        } else {
            $error = "Message could not be sent. Please try again later or contact us on WhatsApp.";
        }
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><?php echo htmlspecialchars($siteName); ?> - <?php echo htmlspecialchars($tagline); ?></title>
    <meta name="description" content="AhmadTech provides web development, SEO, social media management, graphic design, ecommerce setup and complete digital business solutions.">

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">

    <style>
        :root {
            --primary: #0d6efd;
            --dark: #081420;
            --accent: #19c2ff;
            --soft: #f5f8fc;
            --gold: #ffc857;
            --text: #1d2a35;
        }

        body {
            font-family: Arial, sans-serif;
            color: var(--text);
            background: #fff;
            scroll-behavior: smooth;
        }

        a { text-decoration: none; }

        .topbar {
            background: var(--dark);
            color: #fff;
            font-size: 14px;
        }

        .topbar a { color: #fff; }

        .top-social a {
            width: 34px;
            height: 34px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: rgba(255,255,255,.12);
            margin-left: 8px;
            transition: .3s ease;
        }

        .top-social a:hover { background: rgba(255,255,255,.24); }

        .navbar { box-shadow: 0 2px 20px rgba(0,0,0,.07); }
        .nav-link { font-weight: 600; }

        .hero {
            min-height: 94vh;
            display: flex;
            align-items: center;
            background: linear-gradient(135deg, #081420 0%, #0b3f78 55%, #19c2ff 100%);
            color: #fff;
            position: relative;
            overflow: hidden;
        }

        .hero::before,
        .hero::after {
            content: "";
            position: absolute;
            border-radius: 50%;
            background: rgba(255,255,255,.06);
        }

        .hero::before {
            width: 320px;
            height: 320px;
            top: -120px;
            right: -80px;
        }

        .hero::after {
            width: 220px;
            height: 220px;
            bottom: -60px;
            left: -60px;
        }

        .badge-custom {
            background: rgba(255,255,255,.14);
            border: 1px solid rgba(255,255,255,.18);
            color: #fff;
            padding: 10px 16px;
            border-radius: 999px;
            display: inline-block;
        }

        .hero-list i, .check-list i { color: var(--gold); }

        .hero-visual {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .hero-screen {
            width: 100%;
            max-width: 430px;
            min-height: 430px;
            background: rgba(255,255,255,.10);
            border: 1px solid rgba(255,255,255,.18);
            border-radius: 28px;
            padding: 20px;
            backdrop-filter: blur(12px);
            box-shadow: 0 20px 50px rgba(0,0,0,.18);
        }

        .mock-topbar {
            display: flex;
            gap: 8px;
            margin-bottom: 18px;
        }

        .mock-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255,255,255,.75);
        }

        .mock-badge {
            display: inline-block;
            padding: 8px 14px;
            border-radius: 999px;
            background: rgba(255,255,255,.14);
            color: #fff;
            font-size: 14px;
            margin-bottom: 14px;
        }

        .mock-title {
            font-size: 28px;
            font-weight: 800;
            line-height: 1.3;
        }

        .mock-lines span {
            display: block;
            height: 10px;
            border-radius: 10px;
            background: rgba(255,255,255,.25);
            margin-bottom: 10px;
        }

        .mock-lines span:nth-child(1) { width: 100%; }
        .mock-lines span:nth-child(2) { width: 85%; }
        .mock-lines span:nth-child(3) { width: 65%; }

        .mock-illus {
            height: 150px;
            border-radius: 20px;
            background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.05));
        }

        .section-title {
            font-size: 2.2rem;
            font-weight: 800;
            margin-bottom: 12px;
        }

        .section-subtitle {
            color: #62707c;
            max-width: 760px;
            margin: 0 auto 40px;
            font-size: 1.05rem;
        }

        .soft-bg { background: linear-gradient(180deg, #f7faff 0%, #f2f7fc 100%); }

        .service-card,
        .package-card,
        .contact-card,
        .testimonial-card,
        .faq-item,
        .social-card,
        .why-card,
        .portfolio-card,
        .stat-card {
            border: none;
            border-radius: 24px;
            box-shadow: 0 18px 45px rgba(8,20,32,.08);
            transition: .35s ease;
            height: 100%;
            background: #fff;
            overflow: hidden;
        }

        .service-card:hover,
        .package-card:hover,
        .testimonial-card:hover,
        .social-card:hover,
        .portfolio-card:hover,
        .stat-card:hover,
        .why-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 22px 50px rgba(8,20,32,.12);
        }

        .service-top {
            height: 5px;
            width: 100%;
            background: linear-gradient(90deg, #0d6efd, #19c2ff);
            border-radius: 20px;
            margin-bottom: 18px;
        }

        .service-icon,
        .social-icon {
            width: 70px;
            height: 70px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 20px;
            background: linear-gradient(135deg, rgba(13,110,253,.14), rgba(25,194,255,.14));
            color: var(--primary);
            font-size: 30px;
            margin-bottom: 18px;
        }

        .stat-number {
            font-size: 2.15rem;
            font-weight: 800;
            color: var(--primary);
        }

        .team-section-dark {
            background: linear-gradient(135deg, #162536 0%, #1d2f45 100%);
            padding: 90px 0;
            color: #fff;
        }

        .team-section-dark .section-title,
        .team-section-dark .section-subtitle {
            color: #fff;
        }

        .team-section-dark .section-subtitle { opacity: .8; }

        .team-member-card {
            text-align: center;
            padding: 20px 10px 10px;
            transition: .35s ease;
        }

        .team-member-card:hover { transform: translateY(-8px); }

        .team-member-image {
            width: 180px;
            height: 180px;
            margin: 0 auto 18px;
            border-radius: 50%;
            overflow: hidden;
            border: 4px solid rgba(255,255,255,.08);
            box-shadow: 0 15px 35px rgba(0,0,0,.25);
            background: #dfe8f3;
        }

        .team-member-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .team-member-name {
            font-size: 1.55rem;
            font-weight: 800;
            margin-bottom: 6px;
            color: #fff;
        }

        .team-member-role {
            color: #c7d7ea;
            font-size: .98rem;
            margin-bottom: 16px;
        }

        .team-divider {
            width: 50px;
            height: 2px;
            background: rgba(255,255,255,.28);
            margin: 0 auto 16px;
            border-radius: 50px;
        }

        .team-social {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 18px;
        }

        .team-social a {
            width: 38px;
            height: 38px;
            border-radius: 50%;
            border: 1px solid #0d6efd;
            color: #0d6efd;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: .3s ease;
            background: transparent;
        }

        .team-social a:hover {
            background: #0d6efd;
            color: #fff;
            transform: translateY(-2px);
        }

        .team-read-btn {
            display: inline-block;
            background: #0d6efd;
            color: #fff;
            padding: 11px 26px;
            border-radius: 0;
            font-weight: 600;
            transition: .3s ease;
        }

        .team-read-btn:hover {
            background: #0b5ed7;
            color: #fff;
        }

        .owner-section {
            background: linear-gradient(180deg, #f8fbff 0%, #eef5fc 100%);
            padding: 90px 0;
        }

        .owner-card {
            background: #fff;
            border-radius: 30px;
            overflow: hidden;
            box-shadow: 0 25px 60px rgba(8,20,32,.12);
            position: relative;
        }

        .owner-card::before {
            content: "";
            position: absolute;
            inset: 0 0 auto 0;
            height: 6px;
            background: linear-gradient(90deg, #081420, #0d6efd, #19c2ff);
        }

        .owner-left {
            background: linear-gradient(135deg, #081420 0%, #0d6efd 100%);
            color: #fff;
            padding: 40px;
            height: 100%;
        }

        .owner-image-wrap {
            width: 220px;
            height: 220px;
            margin: 0 auto 25px;
            border-radius: 50%;
            overflow: hidden;
            border: 6px solid rgba(255,255,255,.16);
            box-shadow: 0 18px 40px rgba(0,0,0,.24);
            background: #fff;
        }

        .owner-image-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .owner-badge {
            display: inline-block;
            padding: 8px 16px;
            border-radius: 999px;
            background: rgba(255,255,255,.14);
            border: 1px solid rgba(255,255,255,.18);
            font-size: .9rem;
            font-weight: 700;
            margin-bottom: 14px;
        }

        .owner-name {
            font-size: 2.2rem;
            font-weight: 800;
            margin-bottom: 8px;
        }

        .owner-role {
            font-size: 1.05rem;
            color: #d7e7ff;
            margin-bottom: 14px;
            font-weight: 600;
        }

        .owner-desc {
            color: #e7f0ff;
            line-height: 1.8;
            margin-bottom: 24px;
        }

        .owner-contact-btns {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .owner-contact-btns .btn {
            border-radius: 12px;
            padding: 12px 18px;
            font-weight: 700;
        }

        .owner-right { padding: 40px; }

        .owner-info-title {
            font-size: 1.8rem;
            font-weight: 800;
            color: #0d2a54;
            margin-bottom: 14px;
        }

        .owner-info-text {
            color: #5d6e82;
            line-height: 1.8;
            margin-bottom: 24px;
        }

        .owner-feature-box {
            background: #f7fbff;
            border: 1px solid #e2edf8;
            border-radius: 18px;
            padding: 18px 18px;
            margin-bottom: 14px;
        }

        .owner-feature-box h6 {
            font-weight: 800;
            margin-bottom: 8px;
            color: #0d2a54;
        }

        .owner-feature-box p {
            margin: 0;
            color: #617387;
        }

        .cta {
            background: linear-gradient(135deg, #081420 0%, #0d6efd 55%, #19c2ff 100%);
            color: #fff;
            border-radius: 32px;
            box-shadow: 0 18px 45px rgba(13,110,253,.22);
        }

        .footer {
            background: linear-gradient(135deg, #081420 0%, #0b2c54 100%);
            color: #cfd8e3;
        }

        .footer a { color: #cfd8e3; }

        .whatsapp-float {
            position: fixed;
            right: 22px;
            bottom: 22px;
            z-index: 999;
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background: #25d366;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 31px;
            box-shadow: 0 18px 35px rgba(37,211,102,.35);
        }

        @media (max-width: 991px) {
            .hero {
                min-height: auto;
                padding-top: 60px;
                padding-bottom: 60px;
            }

            .mock-title { font-size: 24px; }
            .owner-left, .owner-right { padding: 28px; }
            .owner-name { font-size: 1.8rem; }
            .team-member-image {
                width: 150px;
                height: 150px;
            }
        }
    </style>
</head>
<body>

<div class="topbar py-2">
    <div class="container d-flex flex-column flex-md-row justify-content-between align-items-center gap-2">
        <div>
            <i class="bi bi-telephone"></i> <?php echo htmlspecialchars($phone); ?>
            &nbsp; | &nbsp;
            <i class="bi bi-envelope"></i> <?php echo htmlspecialchars($email); ?>
        </div>
        <div class="d-flex align-items-center">
            <span class="me-2"><i class="bi bi-geo-alt"></i> <?php echo htmlspecialchars($address); ?></span>
            <div class="top-social">
                <a href="<?php echo htmlspecialchars($facebook); ?>" target="_blank"><i class="bi bi-facebook"></i></a>
                <a href="<?php echo htmlspecialchars($instagram); ?>" target="_blank"><i class="bi bi-instagram"></i></a>
            </div>
        </div>
    </div>
</div>

<nav class="navbar navbar-expand-lg bg-white sticky-top py-3">
    <div class="container">
        <a class="navbar-brand fw-bold fs-3 text-primary" href="#home"><?php echo htmlspecialchars($siteName); ?></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="mainNav">
            <ul class="navbar-nav ms-auto mb-2 mb-lg-0 gap-lg-2">
                <li class="nav-item"><a class="nav-link" href="#home">Home</a></li>
                <li class="nav-item"><a class="nav-link" href="#about">About</a></li>
                <li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
                <li class="nav-item"><a class="nav-link" href="#team">Team</a></li>
                <li class="nav-item"><a class="nav-link" href="#owner">Owner</a></li>
                <li class="nav-item"><a class="nav-link" href="#connect">Connect</a></li>
                <li class="nav-item"><a class="nav-link" href="#pricing">Pricing</a></li>
                <li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
            </ul>
        </div>
    </div>
</nav>

<section class="hero" id="home">
    <div class="container py-5 position-relative" style="z-index:2;">
        <div class="row align-items-center g-4">
            <div class="col-lg-7">
                <span class="badge-custom mb-3">Complete Digital & Online Services</span>
                <h1 class="display-4 fw-bold mb-3"><?php echo htmlspecialchars($siteName); ?> – Professional Digital Services for Business Growth</h1>
                <p class="lead mb-4">Web development, ecommerce, SEO, branding, social media management, content writing and complete digital business setup — all in one place.</p>
                <div class="hero-list mb-4">
                    <div class="mb-2"><i class="bi bi-check-circle-fill"></i> Professional support for business, brands and startups</div>
                    <div class="mb-2"><i class="bi bi-check-circle-fill"></i> Direct WhatsApp support from office team and owner</div>
                    <div><i class="bi bi-check-circle-fill"></i> Facebook and Instagram presence for easy connection</div>
                </div>
                <div class="d-flex flex-wrap gap-3">
                    <a href="#contact" class="btn btn-light btn-lg px-4">Start Your Project</a>
                    <a href="#connect" class="btn btn-outline-light btn-lg px-4">Connect Now</a>
                </div>
            </div>
            <div class="col-lg-5">
                <div class="hero-visual">
                    <div class="hero-screen">
                        <div class="mock-topbar">
                            <span class="mock-dot"></span>
                            <span class="mock-dot"></span>
                            <span class="mock-dot"></span>
                        </div>
                        <span class="mock-badge">Professional Business Agency</span>
                        <div class="mock-title">Smart digital solutions with direct team and owner support</div>
                        <div class="mock-lines mt-4">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                        <div class="mock-illus mt-4"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-5">
    <div class="container py-3">
        <div class="row g-4">
            <div class="col-md-3"><div class="stat-card p-4 text-center"><div class="stat-number">150+</div><div class="text-muted">Projects Support</div></div></div>
            <div class="col-md-3"><div class="stat-card p-4 text-center"><div class="stat-number">24/7</div><div class="text-muted">Client Assistance</div></div></div>
            <div class="col-md-3"><div class="stat-card p-4 text-center"><div class="stat-number">100%</div><div class="text-muted">Responsive Design</div></div></div>
            <div class="col-md-3"><div class="stat-card p-4 text-center"><div class="stat-number">4+</div><div class="text-muted">Direct Contact Channels</div></div></div>
        </div>
    </div>
</section>

<section class="py-5" id="about">
    <div class="container py-4">
        <div class="row align-items-center g-4">
            <div class="col-lg-6">
                <h2 class="section-title">About <?php echo htmlspecialchars($siteName); ?></h2>
                <p><?php echo htmlspecialchars($siteName); ?> provides complete digital and online services for students, startups, businesses and growing brands. We focus on modern design, strong communication and business-friendly solutions.</p>
                <p>Our office team handles support and project coordination, while the owner remains available for direct communication for serious business discussions and premium clients.</p>
                <div class="row g-3 mt-2">
                    <div class="col-sm-6"><div class="why-card p-3"><strong>Professional Team</strong><span class="text-muted"> Expert handling of each service.</span></div></div>
                    <div class="col-sm-6"><div class="why-card p-3"><strong>Modern Solutions</strong><span class="text-muted"> Updated digital tools and methods.</span></div></div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="soft-bg rounded-5 p-4 p-md-5">
                    <h4 class="fw-bold mb-3">Why Clients Choose Us</h4>
                    <ul class="list-unstyled m-0 check-list">
                        <li class="mb-3"><i class="bi bi-check-circle-fill"></i> Modern business websites and ecommerce stores</li>
                        <li class="mb-3"><i class="bi bi-check-circle-fill"></i> SEO and branding under one roof</li>
                        <li class="mb-3"><i class="bi bi-check-circle-fill"></i> Office team support for daily communication</li>
                        <li class="mb-3"><i class="bi bi-check-circle-fill"></i> Direct owner connection for priority projects</li>
                        <li><i class="bi bi-check-circle-fill"></i> Facebook and Instagram social presence</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-5 soft-bg" id="services">
    <div class="container py-4">
        <div class="text-center mb-5">
            <h2 class="section-title">Our Services</h2>
            <p class="section-subtitle">Everything you need for digital growth and professional online business setup.</p>
        </div>
        <div class="row g-4">
            <?php foreach ($services as $service): ?>
                <div class="col-md-6 col-lg-4">
                    <div class="service-card p-4">
                        <div class="service-top"></div>
                        <div class="service-icon"><i class="bi <?php echo htmlspecialchars($service['icon']); ?>"></i></div>
                        <h4 class="fw-bold"><?php echo htmlspecialchars($service['title']); ?></h4>
                        <p class="text-muted mb-0"><?php echo htmlspecialchars($service['desc']); ?></p>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<section class="team-section-dark" id="team">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="section-title">Our Office Team</h2>
            <p class="section-subtitle">Meet our professional team members handling development, SEO, design, marketing and business support.</p>
        </div>

        <div class="row g-5 justify-content-center">
            <?php foreach ($teamMembers as $member): ?>
                <div class="col-6 col-md-4 col-lg-3">
                    <div class="team-member-card">
                        <div class="team-member-image">
                            <img src="<?php echo htmlspecialchars($member['image']); ?>" alt="<?php echo htmlspecialchars($member['name']); ?>">
                        </div>

                        <div class="team-member-name"><?php echo htmlspecialchars($member['name']); ?></div>
                        <div class="team-member-role"><?php echo htmlspecialchars($member['role']); ?></div>
                        <div class="team-divider"></div>

                        <div class="team-social">
                            <a href="#"><i class="bi bi-facebook"></i></a>
                            <a href="#"><i class="bi bi-instagram"></i></a>
                            <a href="#"><i class="bi bi-linkedin"></i></a>
                            <a href="https://wa.me/<?php echo htmlspecialchars($member['whatsapp']); ?>" target="_blank"><i class="bi bi-whatsapp"></i></a>
                        </div>

                        <a href="https://wa.me/<?php echo htmlspecialchars($member['whatsapp']); ?>" target="_blank" class="team-read-btn">WhatsApp</a>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<section class="owner-section" id="owner">
    <div class="container">
        <div class="text-center mb-5">
            <h2 class="section-title">Meet The Owner</h2>
            <p class="section-subtitle">Directly connect with the owner for high-priority projects, partnerships and premium consultations.</p>
        </div>

        <div class="owner-card">
            <div class="row g-0 align-items-stretch">
                <div class="col-lg-5">
                    <div class="owner-left text-center text-lg-start">
                        <div class="text-center">
                            <div class="owner-image-wrap">
                                <img src="https://images.pexels.com/photos/2379004/pexels-photo-2379004.jpeg?auto=compress&cs=tinysrgb&w=1200" alt="Owner">
                            </div>
                        </div>

                        <span class="owner-badge">Founder & CEO</span>
                        <div class="owner-name"><?php echo htmlspecialchars($ownerName); ?></div>
                        <div class="owner-role">Business Strategy • Final Consultation • Premium Clients</div>
                        <p class="owner-desc">
                            As the owner, I personally oversee premium projects, business partnerships, long-term strategy and major client decisions to ensure quality, trust and results.
                        </p>

                        <div class="owner-contact-btns">
                            <a href="https://wa.me/<?php echo htmlspecialchars($ownerWhatsapp); ?>" target="_blank" class="btn btn-light">
                                <i class="bi bi-whatsapp"></i> WhatsApp
                            </a>
                            <a href="tel:<?php echo htmlspecialchars($ownerPhone); ?>" class="btn btn-outline-light">
                                <i class="bi bi-telephone-fill"></i> Call Now
                            </a>
                        </div>
                    </div>
                </div>

                <div class="col-lg-7">
                    <div class="owner-right">
                        <div class="owner-info-title">Why Contact The Owner Directly?</div>
                        <p class="owner-info-text">
                            If you have a serious business inquiry, large project, custom package, collaboration proposal or want direct final discussion, you can contact the owner personally.
                        </p>

                        <div class="owner-feature-box">
                            <h6>Custom Project Discussion</h6>
                            <p>Best for premium website development, ecommerce systems, branding and growth planning.</p>
                        </div>

                        <div class="owner-feature-box">
                            <h6>Business Partnerships</h6>
                            <p>Ideal for agencies, resellers, investors and long-term business collaboration opportunities.</p>
                        </div>

                        <div class="owner-feature-box">
                            <h6>Priority Client Support</h6>
                            <p>Direct attention for urgent, sensitive or high-value projects requiring final approval and guidance.</p>
                        </div>

                        <div class="mt-4">
                            <a href="#contact" class="btn btn-primary btn-lg me-2">Send Message</a>
                            <a href="#services" class="btn btn-outline-primary btn-lg">View Services</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-5 soft-bg" id="connect">
    <div class="container py-4">
        <div class="text-center mb-5">
            <h2 class="section-title">Connect With Us</h2>
            <p class="section-subtitle">Choose the contact option that suits you best.</p>
        </div>

        <div class="row g-4">
            <div class="col-md-6 col-lg-3">
                <div class="social-card">
                    <div class="social-icon"><i class="bi bi-people-fill"></i></div>
                    <h5>Office Team</h5>
                    <p>Contact our office team for quick guidance, services and project support.</p>
                    <a href="https://wa.me/<?php echo htmlspecialchars($teamWhatsapp); ?>" target="_blank" class="btn btn-primary w-100">Contact Team</a>
                </div>
            </div>

            <div class="col-md-6 col-lg-3">
                <div class="social-card">
                    <div class="social-icon"><i class="bi bi-person-badge-fill"></i></div>
                    <h5>Office Owner</h5>
                    <p>Direct contact for premium clients, business discussions and custom deals.</p>
                    <a href="https://wa.me/<?php echo htmlspecialchars($ownerWhatsapp); ?>" target="_blank" class="btn btn-dark w-100">Contact Owner</a>
                </div>
            </div>

            <div class="col-md-6 col-lg-3">
                <div class="social-card">
                    <div class="social-icon"><i class="bi bi-facebook"></i></div>
                    <h5>Facebook</h5>
                    <p>Follow our Facebook page for updates, offers and portfolio content.</p>
                    <a href="<?php echo htmlspecialchars($facebook); ?>" target="_blank" class="btn btn-outline-primary w-100">Open Facebook</a>
                </div>
            </div>

            <div class="col-md-6 col-lg-3">
                <div class="social-card">
                    <div class="social-icon"><i class="bi bi-instagram"></i></div>
                    <h5>Instagram</h5>
                    <p>Visit our Instagram for visuals, branding work and social media presence.</p>
                    <a href="<?php echo htmlspecialchars($instagram); ?>" target="_blank" class="btn btn-outline-danger w-100">Open Instagram</a>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-5" id="portfolio">
    <div class="container py-4">
        <div class="text-center mb-5">
            <h2 class="section-title">Featured Solutions</h2>
            <p class="section-subtitle">You can replace these with your real portfolio screenshots and client projects later.</p>
        </div>
        <div class="row g-4">
            <div class="col-md-4"><div class="portfolio-card p-4"><h5 class="fw-bold">Business Website</h5><p class="text-muted mb-0">Professional website for brands, agencies and offices.</p></div></div>
            <div class="col-md-4"><div class="portfolio-card p-4"><h5 class="fw-bold">Ecommerce Store</h5><p class="text-muted mb-0">Online stores with product pages, checkout and mobile-friendly design.</p></div></div>
            <div class="col-md-4"><div class="portfolio-card p-4"><h5 class="fw-bold">SEO & Growth</h5><p class="text-muted mb-0">Content, ranking, audits and visibility improvement for websites.</p></div></div>
        </div>
    </div>
</section>

<section class="py-5 soft-bg">
    <div class="container py-4">
        <div class="text-center mb-5">
            <h2 class="section-title">Client Feedback</h2>
            <p class="section-subtitle">A more professional review section for stronger trust and branding.</p>
        </div>
        <div class="row g-4">
            <?php foreach ($testimonials as $testimonial): ?>
                <div class="col-md-4">
                    <div class="testimonial-card p-4">
                        <div class="mb-3 text-warning">
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                            <i class="bi bi-star-fill"></i>
                        </div>
                        <p class="text-muted"><?php echo htmlspecialchars($testimonial['text']); ?></p>
                        <strong>— <?php echo htmlspecialchars($testimonial['name']); ?></strong>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<section class="py-5" id="pricing">
    <div class="container py-4">
        <div class="text-center mb-5">
            <h2 class="section-title">Pricing Packages</h2>
            <p class="section-subtitle">Flexible options for different business needs.</p>
        </div>
        <div class="row g-4 justify-content-center">
            <?php foreach ($packages as $package): ?>
                <div class="col-md-6 col-lg-4">
                    <div class="package-card p-4 text-center">
                        <h4 class="fw-bold"><?php echo htmlspecialchars($package['name']); ?></h4>
                        <div class="display-6 fw-bold text-primary my-3">PKR <?php echo htmlspecialchars($package['price']); ?></div>
                        <ul class="list-unstyled mb-4">
                            <?php foreach ($package['features'] as $feature): ?>
                                <li class="mb-2"><i class="bi bi-check-circle-fill text-success"></i> <?php echo htmlspecialchars($feature); ?></li>
                            <?php endforeach; ?>
                        </ul>
                        <a href="#contact" class="btn btn-primary">Choose Package</a>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</section>

<section class="py-5 soft-bg">
    <div class="container py-4">
        <div class="text-center mb-5">
            <h2 class="section-title">Frequently Asked Questions</h2>
            <p class="section-subtitle">A professional FAQ section makes the site more complete and trustworthy.</p>
        </div>
        <div class="row g-4">
            <div class="col-md-4">
                <div class="faq-item">
                    <h5 class="fw-bold">How do I place an order?</h5>
                    <p class="text-muted mb-0">You can contact us directly through WhatsApp or send a message from the contact form.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="faq-item">
                    <h5 class="fw-bold">Do you provide complete digital setup?</h5>
                    <p class="text-muted mb-0">Yes, we offer websites, SEO, design, technical setup, content and business guidance in one place.</p>
                </div>
            </div>
            <div class="col-md-4">
                <div class="faq-item">
                    <h5 class="fw-bold">Can I contact the owner directly?</h5>
                    <p class="text-muted mb-0">Yes, the owner contact option is available for serious projects, partnerships and custom deals.</p>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="py-5">
    <div class="container">
        <div class="cta p-4 p-md-5 text-center">
            <h2 class="fw-bold mb-3">Need Help From Team or Want Direct Owner Contact?</h2>
            <p class="mb-4">Start with our office team or connect directly with the owner for custom project discussion.</p>
            <div class="d-flex flex-wrap gap-3 justify-content-center">
                <a href="https://wa.me/<?php echo htmlspecialchars($teamWhatsapp); ?>" target="_blank" class="btn btn-light btn-lg px-4">Contact Team</a>
                <a href="https://wa.me/<?php echo htmlspecialchars($ownerWhatsapp); ?>" target="_blank" class="btn btn-outline-light btn-lg px-4">Contact Owner</a>
            </div>
        </div>
    </div>
</section>

<section class="py-5 soft-bg" id="contact">
    <div class="container py-4">
        <div class="row g-4 align-items-stretch">
            <div class="col-lg-5">
                <div class="contact-card p-4 h-100">
                    <h3 class="fw-bold mb-3">Contact Details</h3>
                    <p><i class="bi bi-telephone-fill text-primary"></i> <?php echo htmlspecialchars($phone); ?></p>
                    <p><i class="bi bi-envelope-fill text-primary"></i> <?php echo htmlspecialchars($email); ?></p>
                    <p><i class="bi bi-geo-alt-fill text-primary"></i> <?php echo htmlspecialchars($address); ?></p>
                    <p><i class="bi bi-facebook text-primary"></i> <a href="<?php echo htmlspecialchars($facebook); ?>" target="_blank">Facebook Page</a></p>
                    <p><i class="bi bi-instagram text-danger"></i> <a href="<?php echo htmlspecialchars($instagram); ?>" target="_blank">Instagram Profile</a></p>

                    <div class="d-grid gap-2 mt-3">
                        <a href="https://wa.me/<?php echo htmlspecialchars($teamWhatsapp); ?>" target="_blank" class="btn btn-primary">WhatsApp Office Team</a>
                        <a href="https://wa.me/<?php echo htmlspecialchars($ownerWhatsapp); ?>" target="_blank" class="btn btn-dark">WhatsApp Office Owner</a>
                    </div>
                </div>
            </div>

            <div class="col-lg-7">
                <div class="contact-card p-4 h-100">
                    <h3 class="fw-bold mb-3">Send Us a Message</h3>

                    <?php if ($success): ?>
                        <div class="alert alert-success"><?php echo htmlspecialchars($success); ?></div>
                    <?php endif; ?>

                    <?php if ($error): ?>
                        <div class="alert alert-danger"><?php echo htmlspecialchars($error); ?></div>
                    <?php endif; ?>

                    <form method="post" action="#contact">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">Your Name</label>
                                <input type="text" name="name" class="form-control form-control-lg" required value="<?php echo htmlspecialchars($name); ?>">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">Your Email</label>
                                <input type="email" name="email" class="form-control form-control-lg" required value="<?php echo htmlspecialchars($userEmail); ?>">
                            </div>
                            <div class="col-12">
                                <label class="form-label">Your Message</label>
                                <textarea name="message" rows="5" class="form-control form-control-lg" required><?php echo htmlspecialchars($message); ?></textarea>
                            </div>
                            <div class="col-12">
                                <button type="submit" class="btn btn-primary btn-lg">Send Message</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<footer class="footer py-5">
    <div class="container">
        <div class="row g-4">
            <div class="col-lg-4">
                <h4 class="fw-bold text-white"><?php echo htmlspecialchars($siteName); ?></h4>
                <p><?php echo htmlspecialchars($tagline); ?></p>
                <p class="mb-0">Professional digital services, business support and direct communication options for clients.</p>
            </div>

            <div class="col-lg-4">
                <h5 class="text-white fw-bold">Quick Links</h5>
                <ul class="list-unstyled">
                    <li class="mb-2"><a href="#about">About</a></li>
                    <li class="mb-2"><a href="#services">Services</a></li>
                    <li class="mb-2"><a href="#team">Team</a></li>
                    <li class="mb-2"><a href="#owner">Owner</a></li>
                    <li class="mb-2"><a href="#connect">Connect</a></li>
                    <li class="mb-2"><a href="#contact">Contact</a></li>
                </ul>
            </div>

            <div class="col-lg-4">
                <h5 class="text-white fw-bold">Follow & Contact</h5>
                <p class="mb-2"><a href="<?php echo htmlspecialchars($facebook); ?>" target="_blank"><i class="bi bi-facebook"></i> Facebook</a></p>
                <p class="mb-2"><a href="<?php echo htmlspecialchars($instagram); ?>" target="_blank"><i class="bi bi-instagram"></i> Instagram</a></p>
                <p class="mb-2"><a href="https://wa.me/<?php echo htmlspecialchars($teamWhatsapp); ?>" target="_blank"><i class="bi bi-whatsapp"></i> Office Team</a></p>
                <p class="mb-0"><a href="https://wa.me/<?php echo htmlspecialchars($ownerWhatsapp); ?>" target="_blank"><i class="bi bi-person-badge"></i> Office Owner</a></p>
            </div>
        </div>

        <hr class="border-secondary my-4">

        <div class="text-center">
            <p class="mb-1">&copy; <?php echo date('Y'); ?> <?php echo htmlspecialchars($siteName); ?>. All Rights Reserved.</p>
            <small><?php echo htmlspecialchars($tagline); ?> | Web Development | SEO | Branding | Social Media</small>
        </div>
    </div>
</footer>

<a class="whatsapp-float" href="https://wa.me/<?php echo htmlspecialchars($teamWhatsapp); ?>" target="_blank" aria-label="WhatsApp">
    <i class="bi bi-whatsapp"></i>
</a>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>