<div id="box_visitor"><span class="title_visitor">អ្នកចូលទស្សនា</span>
 <div class="clear" style="height: 0px;"></div>
<?php include ("Visitor_Counter/counter_value.php"); ?>

</div>
<div id="box_facebook"><span class="title_facebook">បណ្តាញទំនាក់ទំនងសង្គម</span>
	<div class="clear"></div> 
	
	<div class="fb_custom_card" style="position: relative; width: 500px; height: 260px; border-radius: 6px; overflow: hidden; border: 1px solid #fc5ea5; box-shadow: 0 4px 12px rgba(0,0,0,0.15); font-family: Arial, Helvetica, sans-serif; background: #fff;">
		
		<!-- TOP HEADER (EIFFEL TOWER COVER PHOTO BACKGROUND) -->
		<div style="position: relative; width: 100%; height: 130px; background: url('images/fb_cover.jpg') no-repeat center center; background-size: cover;">
			<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.65) 100%);"></div>
			
			<!-- AVATAR LOGO & TITLE OVERLAY -->
			<div style="position: absolute; top: 12px; left: 15px; display: flex; align-items: center; gap: 12px; z-index: 2;">
				<a href="https://www.facebook.com/loveweddingcam" target="_blank" style="text-decoration: none;">
					<div style="width: 54px; height: 54px; border-radius: 50%; border: 2px solid #ffffff; overflow: hidden; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.3);">
						<img src="images/logo.png" alt="Loveweddingcam.com" style="width: 100%; height: 100%; object-fit: contain;" />
					</div>
				</a>
				<div>
					<a href="https://www.facebook.com/loveweddingcam" target="_blank" style="text-decoration: none; color: #ffffff; font-size: 16px; font-weight: bold; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); display: block; line-height: 1.2;">
						Loveweddingcam.com
					</a>
					<span style="color: #f0f2f5; font-size: 12px; text-shadow: 1px 1px 2px rgba(0,0,0,0.8); margin-top: 3px; display: block;">
						13,063 followers
					</span>
				</div>
			</div>
			
			<!-- ACTION BUTTONS: FOLLOW PAGE & SHARE -->
			<div style="position: absolute; bottom: 10px; left: 15px; right: 15px; display: flex; justify-content: space-between; align-items: center; z-index: 2;">
				<a href="https://www.facebook.com/loveweddingcam" target="_blank" style="text-decoration: none; background: #1877f2; color: #ffffff; padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: bold; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.2);">
					<span style="font-weight: bold; font-family: Tahoma, sans-serif;">f</span> Follow Page
				</a>
				<a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.loveweddingcam.com" target="_blank" style="text-decoration: none; background: rgba(255,255,255,0.92); color: #050505; padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: bold; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 2px 4px rgba(0,0,0,0.15);">
					<span style="font-weight: bold;">&#10140;</span> Share
				</a>
			</div>
		</div>
		
		<!-- BOTTOM MAGAZINE/PHOTOS PREVIEW SECTION (HEIGHT: 130PX) -->
		<div style="width: 100%; height: 130px; background: #ffffff; padding: 6px; box-sizing: border-box; display: flex; gap: 6px; overflow-x: auto;">
			<?php 
				$fb_photos = array();
				$q_fb = mysql_query("SELECT image FROM tblmagazine ORDER BY id DESC LIMIT 4");
				if ($q_fb) {
					while ($r_fb = mysql_fetch_array($q_fb)) {
						if (!empty($r_fb['image']) && file_exists("images/mag/" . $r_fb['image'])) {
							$fb_photos[] = "images/mag/" . $r_fb['image'];
						}
					}
				}
				if (count($fb_photos) < 4) {
					$fb_photos = array("images/photo/p1.jpg", "images/photo/p2.jpg", "images/photo/p3.jpg", "images/photo/p4.jpg");
				}
				foreach ($fb_photos as $p_img) {
			?>
				<div style="flex: 1; min-width: 110px; height: 118px; border-radius: 4px; overflow: hidden; border: 1px solid #e0e0e0; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
					<img src="<?php echo $p_img; ?>" style="width: 100%; height: 100%; object-fit: cover; display: block;" />
				</div>
			<?php } ?>
		</div>

	</div>
</div>