<?php
// ❌ ตัดการเชื่อมต่อฐานข้อมูลออกทั้งหมด

// ข่าวสารแบบจำลอง (ไม่ใช้ DB)
$news = [
    [
        "id" => 1,
        "title" => "เปิดเว็บไซต์วัดโลกโมฬี",
        "content" => "เว็บไซต์นี้จัดทำขึ้นเพื่อการศึกษาและเผยแพร่ข้อมูลวัดโลกโมฬี",
        "image" => null
    ],
    [
        "id" => 2,
        "title" => "แนะนำสถานที่ท่องเที่ยว",
        "content" => "วัดโลกโมฬีเป็นหนึ่งในวัดสำคัญของจังหวัดเชียงใหม่ เหมาะแก่การท่องเที่ยวเชิงวัฒนธรรม",
        "image" => null
    ]
];

$topics = [
    "history" => [
        [
            "title" => "ประวัติวัดโลกโมฬี",
            "text" => "วัดโลกโมฬีเป็นวัดโบราณในจังหวัดเชียงใหม่ ปรากฏชื่อในตำนานวัดพระธาตุดอยสุเทพ 
แสดงให้เห็นว่าวัดแห่งนี้มีความสำคัญต่อประวัติศาสตร์ล้านนา",
            "image" => "images/lokmolee1.jpg"
        ],
        [
            "title" => "ยุคอาณาจักรล้านนา",
            "text" => "ในสมัยพญากือนา วัดโลกโมฬีถูกใช้เป็นสถานที่รับรองพระสงฆ์จากต่างเมือง 
และเป็นศูนย์กลางการเผยแผ่พระพุทธศาสนา",
            "image" => "images/lokmolee2.jpg"
        ]
    ],

    "highlight" => [
        [
            "title" => "ขอพรความรัก",
            "text" => "สักการะพระมหาเทวีจิรประภา ใช้ธูป 6 ดอก 
เชื่อว่าจะช่วยเสริมดวงความรักและเมตตามหานิยม",
            "image" => "images/highlight1.jpg"
        ]
    ],

    "festival" => [
        [
            "title" => "ประเพณีปี๋ใหม่เมือง",
            "text" => "จัดในช่วงสงกรานต์ มีพิธีสรงน้ำพระธาตุ ก่อเจดีย์ทราย และทำบุญตักบาตร",
            "image" => "images/festival1.jpg"
        ]
    ]
];
?>
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<title>วัดโลกโมฬี</title>

<style>
@import url('https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;600;700&display=swap');
*{margin:0;padding:0;box-sizing:border-box;font-family:'Sarabun',sans-serif}
body{background:#f5f5f5;color:#333;line-height:1.8}
header{height:100vh;background:url("images/lokmolee1.jpg") center/cover fixed no-repeat;position:relative}
header::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.7),rgba(0,0,0,.4))}
.header-content{position:absolute;z-index:2;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#fff}
.header-content h1{font-size:72px}
.header-content p{font-size:24px;margin-top:20px}
nav{position:fixed;top:25px;right:35px;z-index:10}
nav a{color:#fff;text-decoration:none;margin-left:12px;padding:10px 22px;border-radius:40px;background:rgba(0,0,0,.45)}
nav a:hover{background:#d4af37;color:#000}
section{max-width:1150px;margin:auto;padding:90px 20px}
h2{text-align:center;font-size:42px;margin-bottom:60px;color:#8b6508}
.home-card{background:#fff;border-radius:30px;text-align:center;padding:55px;font-size:22px;box-shadow:0 20px 40px rgba(0,0,0,.1)}
.card{background:#fff;border-radius:25px;box-shadow:0 18px 40px rgba(0,0,0,.1);margin-bottom:35px;overflow:hidden}
.card-header{padding:25px 30px;font-size:22px;background:linear-gradient(135deg,#8b6508,#d4af37);color:#fff;cursor:pointer}
.card-body{display:none;padding:30px}
.card-body img{width:100%;margin-top:25px;border-radius:20px}
footer{background:#111;color:#fff;text-align:center;padding:30px}
</style>

<script>
function toggle(id){
    document.querySelectorAll('.card-body').forEach(e=>{
        if(e.id!==id) e.style.display="none";
    });
    let el=document.getElementById(id);
    el.style.display = (el.style.display==="block") ? "none" : "block";
}
</script>
</head>

<body>

<header>
    <div class="header-content">
        <h1>วัดโลกโมฬี</h1>
        <p>แหล่งประวัติศาสตร์และศรัทธาแห่งล้านนา</p>
    </div>
    <nav>
        <a href="#news">ข่าวสาร</a>
        <a href="#history">ประวัติ</a>
        <a href="#highlight">จุดเด่น</a>
        <a href="#festival">เทศกาล</a>
    </nav>
</header>

<section class="home-card">
📍 ถนนมณีนพรัตน์ ต.ศรีภูมิ อ.เมือง จ.เชียงใหม่
</section>

<!-- ข่าวสาร -->
<section id="news">
<h2>ข่าวสาร</h2>
<?php foreach($news as $n){ ?>
<div class="card">
    <div class="card-header" onclick="toggle('news<?= $n['id'] ?>')">
        <?= $n['title'] ?>
    </div>
    <div class="card-body" id="news<?= $n['id'] ?>">
        <p><?= nl2br($n['content']) ?></p>
    </div>
</div>
<?php } ?>
</section>

<!-- ประวัติ / จุดเด่น / เทศกาล -->
<?php foreach($topics as $section=>$items){ ?>
<section id="<?= $section ?>">
<h2><?= $section=="history"?"ประวัติ":($section=="highlight"?"จุดเด่น":"เทศกาล") ?></h2>
<?php foreach($items as $i=>$row){ ?>
<div class="card">
    <div class="card-header" onclick="toggle('<?= $section.$i ?>')">
        <?= $row['title'] ?>
    </div>
    <div class="card-body" id="<?= $section.$i ?>">
        <p><?= nl2br($row['text']) ?></p>
        <img src="<?= $row['image'] ?>">
    </div>
</div>
<?php } ?>
</section>
<?php } ?>

<footer>
© 2026 วัดโลกโมฬี | เว็บไซต์เพื่อการศึกษา
</footer>

</body>
</html>