<?php
/**
 * Template Name: Landing Page
 *
 * A custom page template for the IPTV landing page.
 *
 * @package StreamNow
 */

get_header();
?>

<main id="primary" class="site-main landing-page">

	<?php get_template_part( 'template-parts/slider' ); ?>

	<section id="features" class="features-section">
		<div class="container">
			<div class="section-header">
				<h2 class="section-title"><?php echo esc_html( get_theme_mod( 'features_title', 'Why Choose Our IPTV Service?' ) ); ?></h2>
				<p class="section-subtitle"><?php echo esc_html( get_theme_mod( 'features_subtitle', 'Discover the ultimate streaming experience with our premium IPTV service' ) ); ?></p>
			</div>
			
			<div class="features-grid">
				<div class="feature-item">
					<div class="feature-icon">
						<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"></path><line x1="4" y1="22" x2="4" y2="15"></line></svg>
					</div>
					<h3 class="feature-title">10,000+ Live Channels</h3>
					<p class="feature-description">Access thousands of live TV channels from around the world, including sports, news, entertainment, and more.</p>
				</div>
				
				<div class="feature-item">
					<div class="feature-icon">
						<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="2.18" ry="2.18"></rect><line x1="7" y1="2" x2="7" y2="22"></line><line x1="17" y1="2" x2="17" y2="22"></line><line x1="2" y1="12" x2="22" y2="12"></line><line x1="2" y1="7" x2="7" y2="7"></line><line x1="2" y1="17" x2="7" y2="17"></line><line x1="17" y1="17" x2="22" y2="17"></line><line x1="17" y1="7" x2="22" y2="7"></line></svg>
					</div>
					<h3 class="feature-title">Premium Movie Library</h3>
					<p class="feature-description">Enjoy our extensive collection of on-demand movies and TV shows, always updated with the latest releases.</p>
				</div>
				
				<div class="feature-item">
					<div class="feature-icon">
						<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="8" y1="21" x2="16" y2="21"></line><line x1="12" y1="17" x2="12" y2="21"></line></svg>
					</div>
					<h3 class="feature-title">Multi-Device Support</h3>
					<p class="feature-description">Watch on smart TVs, tablets, smartphones, computers, and streaming devices like Firestick and Android Box.</p>
				</div>
				
				<div class="feature-item">
					<div class="feature-icon">
						<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M16.2 7.8l-2 6.3-6.4 2.1 2-6.3z"></path></svg>
					</div>
					<h3 class="feature-title">HD & 4K Quality</h3>
					<p class="feature-description">Experience crystal-clear streaming with our HD and 4K Ultra HD channels for the ultimate viewing experience.</p>
				</div>
				
				<div class="feature-item">
					<div class="feature-icon">
						<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect><path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg>
					</div>
					<h3 class="feature-title">Secure Connections</h3>
					<p class="feature-description">Our service uses secure servers and encrypted connections to protect your privacy while streaming.</p>
				</div>
				
				<div class="feature-item">
					<div class="feature-icon">
						<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>
					</div>
					<h3 class="feature-title">24/7 Support</h3>
					<p class="feature-description">Get help anytime with our dedicated customer support team, available 24/7 via chat and email.</p>
				</div>
			</div>
		</div>
	</section>
	
	<section id="channels" class="channels-section">
		<div class="container">
			<div class="section-header">
				<h2 class="section-title"><?php echo esc_html( get_theme_mod( 'channels_title', 'Channel Categories' ) ); ?></h2>
				<p class="section-subtitle"><?php echo esc_html( get_theme_mod( 'channels_subtitle', 'Explore our vast selection of channels across various categories' ) ); ?></p>
			</div>
			
			<div class="channel-categories">
				<div class="category-item">
					<div class="category-icon">
						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z"></path><polygon points="9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02"></polygon></svg>
					</div>
					<h3>Entertainment</h3>
					<span class="channel-count">2,500+ Channels</span>
				</div>
				
				<div class="category-item">
					<div class="category-icon">
						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polygon points="10 8 16 12 10 16 10 8"></polygon></svg>
					</div>
					<h3>Sports</h3>
					<span class="channel-count">1,800+ Channels</span>
				</div>
				
				<div class="category-item">
					<div class="category-icon">
						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
					</div>
					<h3>News</h3>
					<span class="channel-count">800+ Channels</span>
				</div>
				
				<div class="category-item">
					<div class="category-icon">
						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"></path><circle cx="6" cy="18" r="3"></circle><circle cx="18" cy="16" r="3"></circle></svg>
					</div>
					<h3>Music</h3>
					<span class="channel-count">500+ Channels</span>
				</div>
				
				<div class="category-item">
					<div class="category-icon">
						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12h6"></path><path d="M22 12h-6"></path><path d="M12 2v6"></path><path d="M12 22v-6"></path><path d="M6 6l6 6"></path><path d="M18 18l-6-6"></path><path d="M6 18l6-6"></path><path d="M18 6l-6 6"></path></svg>
					</div>
					<h3>Kids</h3>
					<span class="channel-count">300+ Channels</span>
				</div>
				
				<div class="category-item">
					<div class="category-icon">
						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
					</div>
					<h3>Premium</h3>
					<span class="channel-count">1,000+ Channels</span>
				</div>
			</div>
		</div>
	</section>
	
	<section id="devices" class="devices-section">
		<div class="container">
			<div class="section-header">
				<h2 class="section-title"><?php echo esc_html( get_theme_mod( 'devices_title', 'Watch On Any Device' ) ); ?></h2>
				<p class="section-subtitle"><?php echo esc_html( get_theme_mod( 'devices_subtitle', 'Our service works on all your favorite devices' ) ); ?></p>
			</div>
			
			<div class="devices-grid">
				<div class="device-item">
					<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/smart-tv.svg" alt="Smart TV">
					<h3>Smart TVs</h3>
					<p>Samsung, LG, Sony, Android TV, and more</p>
				</div>
				
				<div class="device-item">
					<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/smartphone.svg" alt="Smartphone">
					<h3>Smartphones</h3>
					<p>iOS and Android devices</p>
				</div>
				
				<div class="device-item">
					<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/tablet.svg" alt="Tablet">
					<h3>Tablets</h3>
					<p>iPad, Android tablets, and Amazon Fire</p>
				</div>
				
				<div class="device-item">
					<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/streaming-device.svg" alt="Streaming Device">
					<h3>Streaming Devices</h3>
					<p>Firestick, Apple TV, Chromecast, Roku</p>
				</div>
				
				<div class="device-item">
					<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/laptop.svg" alt="Computer">
					<h3>Computers</h3>
					<p>Windows, Mac, and Linux</p>
				</div>
				
				<div class="device-item">
					<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/game-console.svg" alt="Gaming Console">
					<h3>Gaming Consoles</h3>
					<p>PlayStation and Xbox</p>
				</div>
			</div>
		</div>
	</section>
	
	<section id="pricing" class="pricing-section">
		<div class="container">
			<div class="section-header">
				<h2 class="section-title"><?php echo esc_html( get_theme_mod( 'pricing_title', 'Choose Your Plan' ) ); ?></h2>
				<p class="section-subtitle"><?php echo esc_html( get_theme_mod( 'pricing_subtitle', 'Select the perfect subscription plan for your entertainment needs' ) ); ?></p>
			</div>
			
			<div class="pricing-tables">
				<div class="pricing-table">
					<div class="pricing-header">
						<h3 class="pricing-title">Basic</h3>
						<div class="pricing-price">
							<span class="currency">$</span>
							<span class="amount">12</span>
							<span class="period">/month</span>
						</div>
					</div>
					<div class="pricing-features">
						<ul>
							<li>
								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
								5,000+ Live Channels
							</li>
							<li>
								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
								2,000+ Movies & TV Shows
							</li>
							<li>
								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
								HD Quality
							</li>
							<li>
								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
								1 Connection
							</li>
							<li>
								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
								24/7 Support
							</li>
							<li class="unavailable">
								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
								Premium Sports
							</li>
							<li class="unavailable">
								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
								4K Ultra HD
							</li>
						</ul>
					</div>
					<div class="pricing-footer">
						<a href="#" class="btn-subscribe">Subscribe Now</a>
					</div>
				</div>
				
				<div class="pricing-table featured">
					<div class="pricing-badge">Popular</div>
					<div class="pricing-header">
						<h3 class="pricing-title">Premium</h3>
						<div class="pricing-price">
							<span class="currency">$</span>
							<span class="amount">25</span>
							<span class="period">/month</span>
						</div>
					</div>
					<div class="pricing-features">
						<ul>
							<li>
								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
								10,000+ Live Channels
							</li>
							<li>
								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
								5,000+ Movies & TV Shows
							</li>
							<li>
								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
								HD & 4K Ultra HD
							</li>
							<li>
								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
								2 Connections
							</li>
							<li>
								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
								24/7 Priority Support
							</li>
							<li>
								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
								Premium Sports
							</li>
							<li>
								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
								4K Ultra HD
							</li>
						</ul>
					</div>
					<div class="pricing-footer">
						<a href="#" class="btn-subscribe">Subscribe Now</a>
					</div>
				</div>
				
				<div class="pricing-table">
					<div class="pricing-header">
						<h3 class="pricing-title">Family</h3>
						<div class="pricing-price">
							<span class="currency">$</span>
							<span class="amount">35</span>
							<span class="period">/month</span>
						</div>
					</div>
					<div class="pricing-features">
						<ul>
							<li>
								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
								10,000+ Live Channels
							</li>
							<li>
								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
								8,000+ Movies & TV Shows
							</li>
							<li>
								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
								HD & 4K Ultra HD
							</li>
							<li>
								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
								4 Connections
							</li>
							<li>
								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
								24/7 VIP Support
							</li>
							<li>
								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
								Premium Sports
							</li>
							<li>
								<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
								4K Ultra HD
							</li>
						</ul>
					</div>
					<div class="pricing-footer">
						<a href="#" class="btn-subscribe">Subscribe Now</a>
					</div>
				</div>
			</div>
		</div>
	</section>
	
	<section id="testimonials" class="testimonials-section">
		<div class="container">
			<div class="section-header">
				<h2 class="section-title"><?php echo esc_html( get_theme_mod( 'testimonials_title', 'What Our Customers Say' ) ); ?></h2>
				<p class="section-subtitle"><?php echo esc_html( get_theme_mod( 'testimonials_subtitle', 'Read testimonials from our satisfied customers' ) ); ?></p>
			</div>
			
			<div class="testimonials-slider">
				<div class="testimonials-container">
					<div class="testimonial">
						<div class="testimonial-content">
							<p>"I've been using this IPTV service for over a year now and I'm extremely satisfied. The channel selection is amazing and the streaming quality is excellent. Customer support is also very responsive."</p>
						</div>
						<div class="testimonial-author">
							<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/testimonial-1.jpg" alt="John Smith">
							<div class="author-info">
								<h4>John Smith</h4>
								<span>Premium Subscriber</span>
							</div>
						</div>
					</div>
					
					<div class="testimonial">
						<div class="testimonial-content">
							<p>"The Family plan is perfect for our household. We can all watch different channels on different devices at the same time. The 4K quality is spectacular on our smart TV, and the kids love the dedicated children's channels."</p>
						</div>
						<div class="testimonial-author">
							<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/testimonial-2.jpg" alt="Sarah Johnson">
							<div class="author-info">
								<h4>Sarah Johnson</h4>
								<span>Family Plan Subscriber</span>
							</div>
						</div>
					</div>
					
					<div class="testimonial">
						<div class="testimonial-content">
							<p>"As a sports enthusiast, I couldn't be happier with the sports channel lineup. I never miss any games now, even international leagues. The HD quality is consistent and the service rarely buffers. Worth every penny!"</p>
						</div>
						<div class="testimonial-author">
							<img src="<?php echo esc_url( get_template_directory_uri() ); ?>/assets/images/testimonial-3.jpg" alt="Robert Davis">
							<div class="author-info">
								<h4>Robert Davis</h4>
								<span>Premium Subscriber</span>
							</div>
						</div>
					</div>
				</div>
				
				<div class="testimonial-navigation">
					<button class="prev-testimonial" aria-label="Previous testimonial">
						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
					</button>
					
					<div class="testimonial-dots"></div>
					
					<button class="next-testimonial" aria-label="Next testimonial">
						<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
					</button>
				</div>
			</div>
		</div>
	</section>
	
	<section id="faq" class="faq-section">
		<div class="container">
			<div class="section-header">
				<h2 class="section-title"><?php echo esc_html( get_theme_mod( 'faq_title', 'Frequently Asked Questions' ) ); ?></h2>
				<p class="section-subtitle"><?php echo esc_html( get_theme_mod( 'faq_subtitle', 'Find answers to common questions about our IPTV service' ) ); ?></p>
			</div>
			
			<div class="faq-accordion">
				<div class="faq-item">
					<button class="faq-question">
						What is IPTV and how does it work?
						<svg class="faq-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
					</button>
					<div class="faq-answer">
						<p>IPTV (Internet Protocol Television) is a service that delivers television content over the internet rather than through traditional satellite or cable formats. It allows you to watch TV channels and on-demand content using your internet connection on various devices like smart TVs, smartphones, tablets, and streaming devices.</p>
					</div>
				</div>
				
				<div class="faq-item">
					<button class="faq-question">
						What devices are compatible with your IPTV service?
						<svg class="faq-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
					</button>
					<div class="faq-answer">
						<p>Our IPTV service is compatible with a wide range of devices including:</p>
						<ul>
							<li>Smart TVs (Samsung, LG, Sony, Android TV)</li>
							<li>Smartphones and tablets (iOS and Android)</li>
							<li>Streaming devices (Amazon Fire Stick, Apple TV, Roku, Chromecast)</li>
							<li>Computers (Windows, Mac, Linux)</li>
							<li>Gaming consoles (PlayStation, Xbox)</li>
						</ul>
					</div>
				</div>
				
				<div class="faq-item">
					<button class="faq-question">
						What internet speed do I need for streaming?
						<svg class="faq-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
					</button>
					<div class="faq-answer">
						<p>For smooth streaming, we recommend the following internet speeds:</p>
						<ul>
							<li>SD quality: 5+ Mbps</li>
							<li>HD quality: 10+ Mbps</li>
							<li>4K Ultra HD: 25+ Mbps</li>
						</ul>
						<p>The actual performance may vary depending on your network conditions and the number of devices connected simultaneously.</p>
					</div>
				</div>
				
				<div class="faq-item">
					<button class="faq-question">
						How many devices can I use with my subscription?
						<svg class="faq-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
					</button>
					<div class="faq-answer">
						<p>The number of simultaneous connections depends on your subscription plan:</p>
						<ul>
							<li>Basic Plan: 1 device connection</li>
							<li>Premium Plan: 2 device connections</li>
							<li>Family Plan: 4 device connections</li>
						</ul>
					</div>
				</div>
				
				<div class="faq-item">
					<button class="faq-question">
						Do you provide an Electronic Program Guide (EPG)?
						<svg class="faq-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
					</button>
					<div class="faq-answer">
						<p>Yes, we provide a comprehensive Electronic Program Guide (EPG) for most channels. The EPG displays program information including show titles, descriptions, and schedules, making it easy to see what's on and plan your viewing.</p>
					</div>
				</div>
				
				<div class="faq-item">
					<button class="faq-question">
						How do I get started with your IPTV service?
						<svg class="faq-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
					</button>
					<div class="faq-answer">
						<p>Getting started is simple:</p>
						<ol>
							<li>Choose a subscription plan that suits your needs</li>
							<li>Complete the payment process</li>
							<li>You'll receive login credentials and setup instructions via email</li>
							<li>Download our app on your preferred device or use one of our recommended IPTV players</li>
							<li>Enter your login credentials and start streaming</li>
						</ol>
						<p>Our customer support team is available 24/7 to assist you with the setup process if needed.</p>
					</div>
				</div>
			</div>
		</div>
	</section>
	
	<section id="contact" class="contact-section">
		<div class="container">
			<div class="contact-grid">
				<div class="contact-info">
					<div class="section-header">
						<h2 class="section-title"><?php echo esc_html( get_theme_mod( 'contact_title', 'Contact Us' ) ); ?></h2>
						<p class="section-subtitle"><?php echo esc_html( get_theme_mod( 'contact_subtitle', 'Get in touch with our support team' ) ); ?></p>
					</div>
					
					<div class="contact-methods">
						<div class="contact-method">
							<div class="contact-icon">
								<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
							</div>
							<div class="contact-details">
								<h3>Email Us</h3>
								<p><a href="mailto:<?php echo esc_html( get_theme_mod( 'contact_email', 'support@streamnowiptv.com' ) ); ?>"><?php echo esc_html( get_theme_mod( 'contact_email', 'support@streamnowiptv.com' ) ); ?></a></p>
							</div>
						</div>
						
						<div class="contact-method">
							<div class="contact-icon">
								<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
							</div>
							<div class="contact-details">
								<h3>Call Us</h3>
								<p><a href="tel:<?php echo esc_html( get_theme_mod( 'contact_phone', '+123 456 7890' ) ); ?>"><?php echo esc_html( get_theme_mod( 'contact_phone', '+123 456 7890' ) ); ?></a></p>
							</div>
						</div>
						
						<div class="contact-method">
							<div class="contact-icon">
								<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
							</div>
							<div class="contact-details">
								<h3>Live Chat</h3>
								<p>Available 24/7 on our website</p>
							</div>
						</div>
						
						<div class="contact-social">
							<h3>Follow Us</h3>
							<div class="social-icons">
								<?php if ( get_theme_mod( 'facebook_url' ) ) : ?>
									<a href="<?php echo esc_url( get_theme_mod( 'facebook_url' ) ); ?>" class="social-icon" target="_blank" rel="noopener noreferrer">
										<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
									</a>
								<?php else : ?>
									<a href="#" class="social-icon">
										<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"></path></svg>
									</a>
								<?php endif; ?>
								
								<?php if ( get_theme_mod( 'twitter_url' ) ) : ?>
									<a href="<?php echo esc_url( get_theme_mod( 'twitter_url' ) ); ?>" class="social-icon" target="_blank" rel="noopener noreferrer">
										<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
									</a>
								<?php else : ?>
									<a href="#" class="social-icon">
										<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z"></path></svg>
									</a>
								<?php endif; ?>
								
								<?php if ( get_theme_mod( 'instagram_url' ) ) : ?>
									<a href="<?php echo esc_url( get_theme_mod( 'instagram_url' ) ); ?>" class="social-icon" target="_blank" rel="noopener noreferrer">
										<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
									</a>
								<?php else : ?>
									<a href="#" class="social-icon">
										<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect><path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path><line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line></svg>
									</a>
								<?php endif; ?>
								
								<?php if ( get_theme_mod( 'whatsapp_number' ) ) : ?>
									<a href="https://wa.me/<?php echo esc_attr( preg_replace('/[^0-9]/', '', get_theme_mod( 'whatsapp_number' ) ) ); ?>" class="social-icon" target="_blank" rel="noopener noreferrer">
										<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
									</a>
								<?php else : ?>
									<a href="#" class="social-icon">
										<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path></svg>
									</a>
								<?php endif; ?>
							</div>
						</div>
					</div>
				</div>
				
				<div class="contact-form-container">
					<?php
					// Check if Contact Form 7 plugin is active
					if ( function_exists( 'wpcf7_contact_form' ) ) {
						// Display the contact form with ID 123 (replace with your form ID)
						echo do_shortcode( '[contact-form-7 id="123" title="Contact Form"]' );
					} else {
						// Fallback contact form
					?>
						<form class="contact-form" action="#" method="post">
							<div class="form-group">
								<label for="name">Your Name</label>
								<input type="text" id="name" name="name" required>
							</div>
							
							<div class="form-group">
								<label for="email">Your Email</label>
								<input type="email" id="email" name="email" required>
							</div>
							
							<div class="form-group">
								<label for="subject">Subject</label>
								<input type="text" id="subject" name="subject" required>
							</div>
							
							<div class="form-group">
								<label for="message">Your Message</label>
								<textarea id="message" name="message" rows="5" required></textarea>
							</div>
							
							<button type="submit" class="submit-btn">Send Message</button>
						</form>
					<?php } ?>
				</div>
			</div>
		</div>
	</section>
	
	<section id="newsletter" class="newsletter-section">
		<div class="container">
			<div class="newsletter-content">
				<h2>Subscribe to Our Newsletter</h2>
				<p>Get exclusive offers, updates on new channels, and special discounts directly to your inbox.</p>
				
				<form class="newsletter-form" action="#" method="post">
					<input type="email" placeholder="Your Email Address" required>
					<button type="submit" class="newsletter-btn">Subscribe</button>
				</form>
			</div>
		</div>
	</section>

</main><!-- #main -->

<?php
get_footer();
