<?php
/**
 * Main Index Page for Han Portfolio
 * Contains sections: Hero, About, Education, Skills, Dreams, Portfolio Gallery, and Contact Form.
 * Also handles Contact Form POST submissions (both AJAX and standard postback).
 */

$alertMessage = "";
$alertClass = "";

// Handle Form POST Submission
if ($_SERVER["REQUEST_METHOD"] === "POST") {
    // Sanitize and validate inputs
    $name = strip_tags(trim($_POST["name"] ?? ''));
    $email = filter_var(trim($_POST["email"] ?? ''), FILTER_VALIDATE_EMAIL);
    $message = strip_tags(trim($_POST["message"] ?? ''));
    $isAjax = isset($_POST["ajax"]) && $_POST["ajax"] === "1";

    if (empty($name) || !$email || empty($message)) {
        $status = "error";
        $msgText = "กรุณากรอกข้อมูลในฟอร์มให้ครบถ้วนและใช้อีเมลที่ถูกต้อง";
    } else {
        // Save submission to a local JSON file (no SQL database needed)
        $submissionFile = __DIR__ . '/submissions.json';
        $currentSubmissions = [];
        
        if (file_exists($submissionFile)) {
            $jsonContent = file_get_contents($submissionFile);
            $currentSubmissions = json_decode($jsonContent, true) ?? [];
        }

        // Add new message details
        $newSubmission = [
            'name' => $name,
            'email' => $email,
            'message' => $message,
            'submitted_at' => date('Y-m-d H:i:s'),
            'ip_address' => $_SERVER['REMOTE_ADDR'] ?? 'Unknown'
        ];

        $currentSubmissions[] = $newSubmission;

        // Save back with lock to prevent concurrent write issues
        if (file_put_contents($submissionFile, json_encode($currentSubmissions, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE), LOCK_EX)) {
            $status = "success";
            $msgText = "ส่งข้อความสำเร็จ! ขอบคุณสำหรับการติดต่อครับ ผมจะรีบตอบกลับโดยเร็วที่สุด";
        } else {
            $status = "error";
            $msgText = "เกิดข้อผิดพลาดทางเทคนิค ไม่สามารถบันทึกข้อความได้ในขณะนี้";
        }
    }

    // Return AJAX response if requested
    if ($isAjax) {
        header('Content-Type: application/json; charset=utf-8');
        echo json_encode(['status' => $status, 'message' => $msgText]);
        exit;
    } else {
        $alertMessage = $msgText;
        $alertClass = $status === "success" ? "success" : "error";
    }
}

// Load Header template
include_once 'includes/header.php';
?>

<!-- 1. Hero Section -->
<section id="hero" class="hero-section">
    <!-- Animated background shapes -->
    <div class="hero-bg-shapes">
        <div class="bg-shape bg-shape-1"></div>
        <div class="bg-shape bg-shape-2"></div>
    </div>
    
    <div class="container">
        <div class="row align-items-center gy-5">
            <!-- Hero text details -->
            <div class="col-lg-7 text-center text-lg-start" data-aos="fade-right">
                <span class="hero-subtitle">ยินดีต้อนรับสู่พอร์ตโฟลิโอของผม</span>
                <h1 class="hero-title">
                    สวัสดีครับ ผม <span class="name">นายหาญ</span><br>
                    <span class="highlight font-monospace"><span class="typed-text"></span></span>
                </h1>
                <p class="typed-text-wrapper mb-4">
                    <span class="fs-5 text-secondary">" Dream • Create • Inspire "</span>
                </p>
                <div class="d-flex flex-wrap justify-content-center justify-content-lg-start gap-3">
                    <a href="#about" class="btn btn-gold">
                        <i class="fa-regular fa-user me-2"></i>ดูประวัติส่วนตัว
                    </a>
                    <a href="#contact" class="btn btn-outline-custom">
                        <i class="fa-regular fa-paper-plane me-2"></i>ติดต่อฉัน
                    </a>
                    <a href="https://www.youtube.com/@sevennine8624" target="_blank" class="btn btn-outline-custom text-danger border-danger-subtle">
                        <i class="fa-brands fa-youtube me-2"></i>YouTube
                    </a>
                </div>
            </div>
            <!-- Profile image -->
            <div class="col-lg-5" data-aos="fade-left">
                <div class="hero-image-wrapper">
                    <div class="hero-image-glow"></div>
                    <div class="hero-img-container">
                        <img src="assets/images/profile.jpg" alt="นายหาญ" class="hero-profile-img">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 2. About Me Section -->
<section id="about" class="section-padding">
    <div class="container">
        <div class="section-title-wrapper text-center">
            <span class="section-subtitle">About Me</span>
            <h2 class="section-title">แนะนำตัว</h2>
        </div>
        
        <div class="row g-4 align-items-stretch">
            <!-- Narrative Card -->
            <div class="col-lg-6" data-aos="fade-up">
                <div class="glass-card about-desc-card d-flex flex-column justify-content-between">
                    <div>
                        <h3 class="h4 fw-bold mb-3" style="color: var(--accent-gold);">ประวัติความเป็นมา</h3>
                        <p class="lh-lg" style="text-indent: 30px;">
                            สวัสดีครับ ผมชื่อ <strong>นายหาญ</strong> ไม่มีนามสกุลครับ สาเหตุที่ไม่มีนามสกุล เพราะผมเป็นคน <strong>ไทยใหญ่ (ฉาน)</strong> พ่อและแม่พาอพยพเดินทางมาจากประเทศเมียนมาร์ และได้เข้ามาพึ่งพิงอาศัยอยู่ในผืนแผ่นดินไทยเป็นเวลานานกว่า 10 ปีแล้วครับ
                        </p>
                        <p class="lh-lg" style="text-indent: 30px;">
                            ปัจจุบันผมมีความมุ่งมั่นและตั้งใจอย่างสูงในการพัฒนาทักษะทางด้านเทคโนโลยีคอมพิวเตอร์ การวาดภาพดิจิทัล (Digital Art) ตลอดจนการผลิตและสร้างสรรค์สื่อดิจิทัลคอนเทนต์ต่าง ๆ เพื่อปูแนวทางเพื่อก้าวไปสู่การเป็น <strong>YouTuber</strong> และ <strong>สตรีมเมอร์ (Streamer)</strong> มืออาชีพในอนาคตอันใกล้ครับ
                        </p>
                    </div>
                    <div class="mt-4 pt-3 border-top border-secondary-subtle">
                        <p class="mb-0 text-secondary italic">"ความฝันที่ชัดเจนและการเรียนรู้อย่างไม่หยุดยั้ง คือแรงขับเคลื่อนชีวิตของผม"</p>
                    </div>
                </div>
            </div>
            
            <!-- Personal Info Card -->
            <div class="col-lg-6" data-aos="fade-up" data-aos-delay="100">
                <div class="glass-card h-100">
                    <h3 class="h4 fw-bold mb-4" style="color: var(--accent-gold);">ข้อมูลส่วนตัว</h3>
                    <ul class="personal-info-list">
                        <li>
                            <span class="info-title">วันเกิด</span>
                            <span class="info-val">19 กันยายน 2546 (อายุ 22 ปี)</span>
                        </li>
                        <li>
                            <span class="info-title">ที่อยู่</span>
                            <span class="info-val">77 หมู่ 10 บ้านแม่ปาน ตำบลช่างเคิ่ง อำเภอแม่แจ่ม จังหวัดเชียงใหม่</span>
                        </li>
                        <li>
                            <span class="info-title">โทรศัพท์</span>
                            <span class="info-val"><a href="tel:0621562410">062-156-2410</a></span>
                        </li>
                        <li>
                            <span class="info-title">อีเมล</span>
                            <span class="info-val"><a href="mailto:paladinxx03@gmail.com">paladinxx03@gmail.com</a></span>
                        </li>
                        <li>
                            <span class="info-title">Facebook</span>
                            <span class="info-val"><a href="https://www.facebook.com/profile.php?id=100062402121703" target="_blank">หาญ ฯ’</a></span>
                        </li>
                        <li>
                            <span class="info-title">YouTube</span>
                            <span class="info-val"><a href="https://www.youtube.com/@sevennine8624" target="_blank">@sevennine8624</a></span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 3. Education Timeline Section -->
<section id="education" class="section-padding" style="background-color: var(--bg-secondary); transition: background-color var(--transition-normal);">
    <div class="container">
        <div class="section-title-wrapper text-center">
            <span class="section-subtitle">Education</span>
            <h2 class="section-title">ประวัติการศึกษา</h2>
        </div>
        
        <div class="row justify-content-center">
            <div class="col-lg-8" data-aos="fade-up">
                <div class="timeline-wrapper">
                    <!-- Timeline Item: Current -->
                    <div class="timeline-item">
                        <div class="timeline-dot"></div>
                        <div class="timeline-content">
                            <span class="timeline-year">ปัจจุบัน</span>
                            <h3 class="timeline-title">วิทยาลัยเทคนิคเชียงใหม่</h3>
                            <p class="timeline-institution">แผนกอิเล็กทรอนิกส์ สาขาวิชา เทคโนโลยีคอมพิวเตอร์</p>
                            <span class="timeline-gpa">
                                <i class="fa-solid fa-book text-warning"></i> กำลังศึกษาอยู่
                            </span>
                        </div>
                    </div>

                    <!-- Timeline Item 1 -->
                    <div class="timeline-item">
                        <div class="timeline-dot"></div>
                        <div class="timeline-content">
                            <span class="timeline-year">ประถมศึกษา</span>
                            <h3 class="timeline-title">โรงเรียนบ้านแม่ปาน</h3>
                            <p class="timeline-institution">อำเภอแม่แจ่ม จังหวัดเชียงใหม่</p>
                            <span class="timeline-gpa">
                                <i class="fa-solid fa-graduation-cap text-warning"></i> เกรดเฉลี่ยสะสม (GPA): <strong>3.98</strong>
                            </span>
                        </div>
                    </div>
                    
                    <!-- Timeline Item 2 -->
                    <div class="timeline-item">
                        <div class="timeline-dot"></div>
                        <div class="timeline-content">
                            <span class="timeline-year">มัธยมศึกษาตอนต้น</span>
                            <h3 class="timeline-title">โรงเรียนราชประชานุเคราะห์ 31</h3>
                            <p class="timeline-institution">โรงเรียนศึกษาสงเคราะห์ อำเภอแม่แจ่ม จังหวัดเชียงใหม่</p>
                            <span class="timeline-gpa">
                                <i class="fa-solid fa-graduation-cap text-warning"></i> เกรดเฉลี่ยสะสม (GPA): <strong>3.98</strong>
                            </span>
                        </div>
                    </div>
                    
                    <!-- Timeline Item 3 -->
                    <div class="timeline-item">
                        <div class="timeline-dot"></div>
                        <div class="timeline-content">
                            <span class="timeline-year">มัธยมศึกษาตอนปลาย</span>
                            <h3 class="timeline-title">สกร. ระดับอำเภอแม่แจ่ม</h3>
                            <p class="timeline-institution">ส่งเสริมการเรียนรู้อำเภอแม่แจ่ม (กศน. เดิม)</p>
                            <span class="timeline-gpa">
                                <i class="fa-solid fa-graduation-cap text-warning"></i> เกรดเฉลี่ยสะสม (GPA): <strong>3.45</strong>
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 4. Skills Section -->
<section id="skills" class="section-padding">
    <div class="container">
        <div class="section-title-wrapper text-center">
            <span class="section-subtitle">Skills</span>
            <h2 class="section-title">ความสามารถทางด้านเทคนิค</h2>
        </div>
        
        <div class="row g-5 align-items-center">
            <!-- Skills list with bars -->
            <div class="col-lg-7" data-aos="fade-right">
                <div class="glass-card">
                    <!-- Computer -->
                    <div class="skill-bar-wrapper">
                        <div class="skill-info">
                            <span class="skill-name">Computer Skills (คอมพิวเตอร์ทั่วไป)</span>
                            <span class="skill-stars">
                                <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-regular fa-star"></i><i class="fa-regular fa-star"></i>
                            </span>
                        </div>
                        <div class="progress progress-custom">
                            <div class="progress-bar-custom" data-width="60"></div>
                        </div>
                    </div>
                    
                    <!-- Digital Art -->
                    <div class="skill-bar-wrapper">
                        <div class="skill-info">
                            <span class="skill-name">Digital Art (วาดภาพดิจิทัล)</span>
                            <span class="skill-stars">
                                <i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-regular fa-star"></i>
                            </span>
                        </div>
                        <div class="progress progress-custom">
                            <div class="progress-bar-custom" data-width="80"></div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Animated Stats Card -->
            <div class="col-lg-5" data-aos="fade-left">
                <div class="row g-4">
                    <div class="col-6">
                        <div class="glass-card counter-box">
                            <div class="counter-num" data-target="10">0</div>
                            <div class="counter-title">ปีที่อยู่ในไทย</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="glass-card counter-box">
                            <div class="counter-num" data-target="4">0</div>
                            <div class="counter-title">ประวัติการศึกษา</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="glass-card counter-box">
                            <div class="counter-num" data-target="4">0</div>
                            <div class="counter-title">เป้าหมาย & ความฝัน</div>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="glass-card counter-box">
                            <div class="counter-num" data-target="2">0</div>
                            <div class="counter-title">ทักษะความสามารถ</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 5. Dreams & Targets Section -->
<section id="dreams" class="section-padding" style="background-color: var(--bg-secondary); transition: background-color var(--transition-normal);">
    <div class="container">
        <div class="section-title-wrapper text-center">
            <span class="section-subtitle">My Future Goals</span>
            <h2 class="section-title">ความฝันและเป้าหมาย</h2>
        </div>
        
        <div class="row g-4">
            <!-- YouTuber -->
            <div class="col-sm-6 col-lg-3" data-aos="fade-up">
                <div class="glass-card dream-card">
                    <div class="dream-icon-wrapper">
                        <i class="fa-brands fa-youtube"></i>
                    </div>
                    <h3 class="dream-title">YouTuber</h3>
                    <p class="dream-desc">
                        มุ่งมั่นทำช่องวิดีโอสร้างสรรค์เนื้อหาความบันเทิง เทคโนโลยี การทำคอนเทนต์ที่มีคุณภาพ และส่งต่อแรงบันดาลใจให้แก่ผู้ชม
                    </p>
                </div>
            </div>
            
            <!-- Streamer -->
            <div class="col-sm-6 col-lg-3" data-aos="fade-up" data-aos-delay="100">
                <div class="glass-card dream-card">
                    <div class="dream-icon-wrapper">
                        <i class="fa-solid fa-gamepad"></i>
                    </div>
                    <h3 class="dream-title">Streamer</h3>
                    <p class="dream-desc">
                        สร้างคอมมูนิตี้สตรีมมิ่งไลฟ์สด เล่นเกม และพูดคุยแลกเปลี่ยนความคิดเห็นกับเพื่อน ๆ คอยแบ่งปันรอยยิ้มและความสุขแบบเรียลไทม์
                    </p>
                </div>
            </div>
            
            <!-- Digital Artist -->
            <div class="col-sm-6 col-lg-3" data-aos="fade-up" data-aos-delay="200">
                <div class="glass-card dream-card">
                    <div class="dream-icon-wrapper">
                        <i class="fa-solid fa-palette"></i>
                    </div>
                    <h3 class="dream-title">Digital Artist</h3>
                    <p class="dream-desc">
                        ฝึกฝนและสร้างสรรค์ผลงานภาพวาดแฟนอาร์ต ภาพวาดดิจิทัล สไตล์สองมิติ (2D Art) พัฒนาเอกลักษณ์และสร้างมูลค่าจากงานศิลปะ
                    </p>
                </div>
            </div>
            
            <!-- Content Creator -->
            <div class="col-sm-6 col-lg-3" data-aos="fade-up" data-aos-delay="300">
                <div class="glass-card dream-card">
                    <div class="dream-icon-wrapper">
                        <i class="fa-solid fa-wand-magic-sparkles"></i>
                    </div>
                    <h3 class="dream-title">Content Creator</h3>
                    <p class="dream-desc">
                        เขียนคอนเทนต์ ออกแบบกราฟิก และนำเสนอแนวคิดใหม่ ๆ ผ่านช่องทางออนไลน์ที่หลากหลายอย่างไร้ขีดจำกัด
                    </p>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 6. Portfolio Gallery Section -->
<section id="portfolio" class="section-padding">
    <div class="container">
        <div class="section-title-wrapper text-center">
            <span class="section-subtitle">Creative Works</span>
            <h2 class="section-title">ผลงานของผม</h2>
        </div>
        
        <!-- Filter Tabs (For future extension / styling) -->
        <div class="text-center mb-5" data-aos="fade-up">
            <button class="gallery-filter-btn active">ทั้งหมด (All)</button>
            <a href="https://www.youtube.com/@sevennine8624" target="_blank" class="btn btn-outline-danger ms-2 btn-sm rounded-pill px-3">
                <i class="fa-brands fa-youtube me-2"></i>เปิดช่อง YouTube
            </a>
        </div>
        
        <!-- Gallery Grid -->
        <div class="row g-4" data-aos="fade-up">
            <!-- Gallery Item 1 -->
            <div class="col-md-6 col-lg-4">
                <div class="gallery-item-wrapper">
                    <img src="assets/images/profile.jpg" alt="ผลงานที่ 1 - รูปประจำตัวและตัวตน" class="gallery-img" loading="lazy">
                    <div class="gallery-overlay">
                        <h4 class="gallery-title">นายหาญ (Profile Banner)</h4>
                        <span class="gallery-category">รูปประจำตัว / อัตลักษณ์</span>
                        <a href="assets/images/profile.jpg" class="gallery-icon-btn lightbox-trigger" data-caption="รูปประจำตัวและอัตลักษณ์หลักของ นายหาญ (Han)">
                            <i class="fa-solid fa-up-right-and-down-left-from-center"></i>
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- Gallery Item 2 -->
            <div class="col-md-6 col-lg-4">
                <div class="gallery-item-wrapper">
                    <img src="assets/images/art1.jpg" alt="ผลงานภาพวาดดิจิทัล 1" class="gallery-img" loading="lazy">
                    <div class="gallery-overlay">
                        <h4 class="gallery-title">Fantasy Landscape</h4>
                        <span class="gallery-category">Digital Art / วาดภาพ</span>
                        <a href="assets/images/art1.jpg" class="gallery-icon-btn lightbox-trigger" data-caption="ผลงานภาพวาดธรรมชาติสไตล์แฟนตาซีแนวอนิเมะ">
                            <i class="fa-solid fa-up-right-and-down-left-from-center"></i>
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- Gallery Item 3 -->
            <div class="col-md-6 col-lg-4">
                <div class="gallery-item-wrapper">
                    <img src="assets/images/art2.jpg" alt="ผลงานภาพวาดดิจิทัล 2" class="gallery-img" loading="lazy">
                    <div class="gallery-overlay">
                        <h4 class="gallery-title">Character Illustration</h4>
                        <span class="gallery-category">Digital Art / คอนเซปต์อาร์ต</span>
                        <a href="assets/images/art2.jpg" class="gallery-icon-btn lightbox-trigger" data-caption="ผลงานวาดภาพตัวละครแนวแฟนตาซีพร้อมแสงเงาสมจริง">
                            <i class="fa-solid fa-up-right-and-down-left-from-center"></i>
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- Gallery Item 4 -->
            <div class="col-md-6 col-lg-4">
                <div class="gallery-item-wrapper">
                    <img src="assets/images/art3.jpg" alt="ผลงานภาพวาดดิจิทัล 3" class="gallery-img" loading="lazy">
                    <div class="gallery-overlay">
                        <h4 class="gallery-title">Cozy Setup Art</h4>
                        <span class="gallery-category">Digital Art / แนว Lo-Fi</span>
                        <a href="assets/images/art3.jpg" class="gallery-icon-btn lightbox-trigger" data-caption="ผลงานจำลองห้องคอมพิวเตอร์สตรีมเมอร์ในบรรยากาศ Lo-Fi สุดอบอุ่น">
                            <i class="fa-solid fa-up-right-and-down-left-from-center"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 7. Contact Section -->
<section id="contact" class="section-padding" style="background-color: var(--bg-secondary); transition: background-color var(--transition-normal);">
    <div class="container">
        <div class="section-title-wrapper text-center">
            <span class="section-subtitle">Get in Touch</span>
            <h2 class="section-title">ติดต่อผม</h2>
        </div>
        
        <div class="row g-5 align-items-stretch">
            <!-- Contact Channels (Left Column) -->
            <div class="col-lg-5" data-aos="fade-right">
                <div class="glass-card contact-info-card d-flex flex-column justify-content-between">
                    <div>
                        <h3 class="h4 fw-bold mb-4" style="color: var(--accent-gold);">ช่องทางการติดต่อ</h3>
                        
                        <!-- Phone -->
                        <div class="contact-info-item">
                            <div class="contact-icon-box">
                                <i class="fa-solid fa-phone"></i>
                            </div>
                            <div class="contact-info-text">
                                <h6>เบอร์โทรศัพท์</h6>
                                <p><a href="tel:0621562410">062-156-2410</a></p>
                            </div>
                        </div>
                        
                        <!-- Email -->
                        <div class="contact-info-item">
                            <div class="contact-icon-box">
                                <i class="fa-solid fa-envelope"></i>
                            </div>
                            <div class="contact-info-text">
                                <h6>อีเมล</h6>
                                <p><a href="mailto:paladinxx03@gmail.com">paladinxx03@gmail.com</a></p>
                            </div>
                        </div>
                        
                        <!-- Facebook -->
                        <div class="contact-info-item">
                            <div class="contact-icon-box">
                                <i class="fa-brands fa-facebook"></i>
                            </div>
                            <div class="contact-info-text">
                                <h6>Facebook</h6>
                                <p><a href="https://www.facebook.com/profile.php?id=100062402121703" target="_blank">หาญ ฯ’</a></p>
                            </div>
                        </div>
                        
                        <!-- Address -->
                        <div class="contact-info-item">
                            <div class="contact-icon-box">
                                <i class="fa-solid fa-map-location-dot"></i>
                            </div>
                            <div class="contact-info-text">
                                <h6>ที่อยู่เพื่อส่งเอกสาร</h6>
                                <p>77 หมู่ 10 บ้านแม่ปาน ต.ช่างเคิ่ง อ.แม่แจ่ม จ.เชียงใหม่</p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="mt-4 pt-3 border-top border-secondary-subtle">
                        <h5 class="h6 fw-bold mb-2">ติดตามผลงานของผม</h5>
                        <p class="small text-secondary mb-0">คุณสามารถส่งอีเมลหาผมโดยตรง หรือเขียนส่งข้อความผ่านทางฟอร์มส่งข้อมูลขวามือนี้ได้ทันที!</p>
                    </div>
                </div>
            </div>
            
            <!-- Contact Form (Right Column) -->
            <div class="col-lg-7" data-aos="fade-left">
                <div class="glass-card">
                    <h3 class="h4 fw-bold mb-4" style="color: var(--accent-gold);">ส่งข้อความหาผม</h3>
                    
                    <!-- Alert Message Indicator -->
                    <div id="formAlert" class="form-alert <?php echo $alertClass; ?>">
                        <?php echo $alertMessage; ?>
                    </div>
                    
                    <form id="contactForm" method="POST" action="index.php">
                        <div class="form-group-custom">
                            <label for="name" class="form-label small fw-semibold text-secondary">ชื่อผู้ติดต่อ / หน่วยงาน *</label>
                            <input type="text" class="form-control-custom" id="name" name="name" required placeholder="กรอกชื่อของคุณที่นี่">
                        </div>
                        
                        <div class="form-group-custom">
                            <label for="email" class="form-label small fw-semibold text-secondary">ที่อยู่อีเมลของคุณ *</label>
                            <input type="email" class="form-control-custom" id="email" name="email" required placeholder="example@domain.com">
                        </div>
                        
                        <div class="form-group-custom">
                            <label for="message" class="form-label small fw-semibold text-secondary">ข้อความรายละเอียด *</label>
                            <textarea class="form-control-custom" id="message" name="message" required placeholder="พิมพ์ข้อความของคุณที่นี่..."></textarea>
                        </div>
                        
                        <button type="submit" class="btn btn-gold w-100 py-3">
                            <i class="fa-regular fa-paper-plane me-2"></i>ส่งข้อความหาผม
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>

<?php
// Load Footer template
include_once 'includes/footer.php';
?>
