<?php
/**
 * The front page template.
 *
 * Displays the hero section, portfolio grid, testimonials, and CTA.
 *
 * @package Eshraq_Portfolio
 * @since 1.0.0
 */

get_header();

$hero_title    = get_theme_mod( 'eshraq_hero_title', 'Photography & Visual Arts' );
$hero_subtitle = get_theme_mod( 'eshraq_hero_subtitle', 'Delivering fashion and beauty artistically in portraits. Based in Los Angeles.' );
$cta_text      = get_theme_mod( 'eshraq_cta_text', 'Book a Session' );
$cta_url       = get_theme_mod( 'eshraq_cta_url', '#contact' );
?>

<!-- Hero Section -->
<section class="hero" id="hero">
	<div class="hero-inner">
		<div class="hero-content">
			<?php if ( ! empty( $hero_title ) ) : ?>
				<h1 class="hero-title" data-animate="fade-up">
					<?php echo esc_html( $hero_title ); ?>
				</h1>
			<?php endif; ?>
			<?php if ( ! empty( $hero_subtitle ) ) : ?>
				<p class="hero-subtitle" data-animate="fade-up" data-delay="100">
					<?php echo esc_html( $hero_subtitle ); ?>
				</p>
			<?php endif; ?>
			<?php if ( ! empty( $cta_text ) && ! empty( $cta_url ) ) : ?>
				<div class="hero-cta" data-animate="fade-up" data-delay="200">
					<a href="<?php echo esc_url( $cta_url ); ?>" class="btn btn-primary">
						<span><?php echo esc_html( $cta_text ); ?></span>
						<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
							<path d="M5 12h14M12 5l7 7-7 7"/>
						</svg>
					</a>
				</div>
			<?php endif; ?>
		</div>
		<div class="hero-visual">
			<div class="hero-circle" data-animate="scale-in">
				<div class="circle-label circle-label--1">
					<span>Beauty</span>
				</div>
				<div class="circle-label circle-label--2">
					<span>Family</span>
				</div>
				<div class="circle-label circle-label--3">
					<span>Cinematography</span>
				</div>
				<div class="circle-label circle-label--4">
					<span>Advertising</span>
				</div>
				<div class="circle-label circle-label--5">
					<span>Fashion</span>
				</div>
				<div class="circle-label circle-label--6">
					<span>Weddings</span>
				</div>
				<svg class="circle-svg" viewBox="0 0 400 400" fill="none" aria-hidden="true">
					<ellipse cx="200" cy="200" rx="180" ry="160" stroke="currentColor" stroke-width="0.5" opacity="0.3"/>
				</svg>
			</div>
		</div>
	</div>
	<div class="hero-scroll-indicator" aria-hidden="true">
		<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
			<path d="M12 5v14M19 12l-7 7-7-7"/>
		</svg>
	</div>
</section>

<!-- Portfolio Grid Section -->
<section class="portfolio-section" id="portfolio">
	<div class="container">
		<div class="section-header" data-animate="fade-up">
			<h2 class="section-title"><?php esc_html_e( 'Selected Work', 'eshraq-portfolio' ); ?></h2>
			<div class="portfolio-filters" role="tablist" aria-label="<?php esc_attr_e( 'Filter portfolio', 'eshraq-portfolio' ); ?>">
				<?php
				$categories = get_terms( array(
					'taxonomy'   => 'portfolio_category',
					'hide_empty' => false,
				) );

				if ( ! empty( $categories ) && ! is_wp_error( $categories ) ) :
					?>
					<button class="filter-btn is-active" data-filter="all" role="tab" aria-selected="true">
						<?php esc_html_e( 'All', 'eshraq-portfolio' ); ?>
					</button>
					<?php foreach ( $categories as $category ) : ?>
						<button class="filter-btn" data-filter="<?php echo esc_attr( $category->slug ); ?>" role="tab" aria-selected="false">
							<?php echo esc_html( $category->name ); ?>
						</button>
					<?php endforeach; ?>
				<?php endif; ?>
			</div>
		</div>

		<div class="portfolio-grid" id="portfolio-grid">
			<?php
			$portfolio_query = new WP_Query( array(
				'post_type'      => 'portfolio',
				'posts_per_page' => 12,
				'post_status'    => 'publish',
				'orderby'        => 'menu_order',
				'order'          => 'ASC',
			) );

			if ( $portfolio_query->have_posts() ) :
				while ( $portfolio_query->have_posts() ) :
					$portfolio_query->the_post();
					$categories = get_the_terms( get_the_ID(), 'portfolio_category' );
					$cat_slugs  = ! empty( $categories ) && ! is_wp_error( $categories )
						? array_map( function( $c ) { return $c->slug; }, $categories )
						: array();
					?>
					<article class="portfolio-item" data-categories="<?php echo esc_attr( implode( ' ', $cat_slugs ) ); ?>" data-animate="fade-up">
						<a href="<?php the_permalink(); ?>" class="portfolio-link" aria-label="<?php the_title_attribute(); ?>">
							<div class="portfolio-image">
								<?php if ( has_post_thumbnail() ) : ?>
									<?php the_post_thumbnail( 'eshraq-portfolio', array(
										'loading' => 'lazy',
										'class'   => 'portfolio-thumb',
									) ); ?>
								<?php else : ?>
									<div class="portfolio-placeholder">
										<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
											<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
											<circle cx="8.5" cy="8.5" r="1.5"/>
											<polyline points="21 15 16 10 5 21"/>
										</svg>
									</div>
								<?php endif; ?>
								<div class="portfolio-overlay">
									<span class="portfolio-title"><?php the_title(); ?></span>
								</div>
							</div>
						</a>
					</article>
					<?php
				endwhile;
				wp_reset_postdata();
			else :
				?>
				<div class="portfolio-empty" data-animate="fade-up">
					<p><?php esc_html_e( 'No portfolio items found. Add some projects to get started.', 'eshraq-portfolio' ); ?></p>
				</div>
			<?php endif; ?>
		</div>
	</div>
</section>

<!-- About Preview Section -->
<section class="about-preview" id="about-preview">
	<div class="container">
		<div class="about-preview-grid">
			<div class="about-preview-text" data-animate="fade-up">
				<h2 class="section-title"><?php esc_html_e( 'About', 'eshraq-portfolio' ); ?></h2>
				<p class="about-preview-description">
					<?php
					$bio = get_theme_mod( 'eshraq_about_bio', 'Delivering high fashion and beauty artistically, while providing excellent personal attention and demonstrating a unique experience for each and every client.' );
					echo esc_html( $bio );
					?>
				</p>
				<a href="<?php echo esc_url( get_permalink( get_option( 'page_on_front' ) ) ); ?>" class="btn btn-outline">
					<span><?php esc_html_e( 'Learn More', 'eshraq-portfolio' ); ?></span>
					<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
						<path d="M5 12h14M12 5l7 7-7 7"/>
					</svg>
				</a>
			</div>
			<div class="about-preview-visual" data-animate="fade-up" data-delay="100">
				<div class="about-preview-image">
					<?php
					$about_image = get_theme_mod( 'eshraq_about_image', '' );
					if ( ! empty( $about_image ) ) :
						?>
						<img src="<?php echo esc_url( $about_image ); ?>" alt="<?php esc_attr_e( 'Portrait', 'eshraq-portfolio' ); ?>" loading="lazy">
					<?php else : ?>
						<div class="image-placeholder">
							<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
								<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
								<circle cx="12" cy="7" r="4"/>
							</svg>
						</div>
					<?php endif; ?>
				</div>
			</div>
		</div>
	</div>
</section>

<!-- Testimonials Section -->
<section class="testimonials-section" id="testimonials">
	<div class="container">
		<div class="section-header" data-animate="fade-up">
			<h2 class="section-title"><?php esc_html_e( 'What People Say', 'eshraq-portfolio' ); ?></h2>
		</div>

		<div class="testimonials-slider">
			<?php
			$testimonials = new WP_Query( array(
				'post_type'      => 'testimonial',
				'posts_per_page' => 6,
				'post_status'    => 'publish',
			) );

			if ( $testimonials->have_posts() ) :
				while ( $testimonials->have_posts() ) :
					$testimonials->the_post();
					?>
					<div class="testimonial-item" data-animate="fade-up">
						<blockquote class="testimonial-quote">
							<div class="testimonial-content">
								<?php the_content(); ?>
							</div>
							<footer class="testimonial-footer">
								<?php if ( has_post_thumbnail() ) : ?>
									<div class="testimonial-avatar">
										<?php the_post_thumbnail( 'thumbnail', array(
											'class'   => 'avatar-img',
											'loading' => 'lazy',
										) ); ?>
									</div>
								<?php endif; ?>
								<div class="testimonial-meta">
									<cite class="testimonial-name"><?php the_title(); ?></cite>
									<?php
									$role = get_post_meta( get_the_ID(), '_testimonial_role', true );
									if ( ! empty( $role ) ) :
										?>
										<span class="testimonial-role"><?php echo esc_html( $role ); ?></span>
									<?php endif; ?>
								</div>
							</footer>
						</blockquote>
					</div>
					<?php
				endwhile;
				wp_reset_postdata();
			else :
				?>
				<div class="testimonial-item" data-animate="fade-up">
					<blockquote class="testimonial-quote">
						<div class="testimonial-content">
							<p>&ldquo;An incredible eye for detail and a unique ability to capture the essence of every subject. The experience was nothing short of extraordinary.&rdquo;</p>
						</div>
						<footer class="testimonial-footer">
							<div class="testimonial-meta">
								<cite class="testimonial-name">Sarah Johnson</cite>
								<span class="testimonial-role">Model & Actress</span>
							</div>
						</footer>
					</blockquote>
				</div>
				<div class="testimonial-item" data-animate="fade-up" data-delay="100">
					<blockquote class="testimonial-quote">
						<div class="testimonial-content">
							<p>&ldquo;Working together was a seamless experience. The vision, the lighting, the composition &mdash; everything was perfect. Highly recommended for any creative project.&rdquo;</p>
						</div>
						<footer class="testimonial-footer">
							<div class="testimonial-meta">
								<cite class="testimonial-name">Marcus Chen</cite>
								<span class="testimonial-role">Creative Director, Vogue</span>
							</div>
						</footer>
					</blockquote>
				</div>
				<div class="testimonial-item" data-animate="fade-up" data-delay="200">
					<blockquote class="testimonial-quote">
						<div class="testimonial-content">
							<p>&ldquo;The attention to personal experience combined with artistic excellence sets this work apart. Every frame tells a story.&rdquo;</p>
						</div>
						<footer class="testimonial-footer">
							<div class="testimonial-meta">
								<cite class="testimonial-name">Aisha Williams</cite>
								<span class="testimonial-role">Brand Manager, Mugler</span>
							</div>
						</footer>
					</blockquote>
				</div>
			<?php endif; ?>
		</div>
	</div>
</section>

<!-- CTA Section -->
<section class="cta-section" id="contact">
	<div class="container">
		<div class="cta-content" data-animate="fade-up">
			<h2 class="cta-title"><?php esc_html_e( 'Let\'s Create Something Beautiful', 'eshraq-portfolio' ); ?></h2>
			<p class="cta-text"><?php esc_html_e( 'Ready to bring your vision to life? Get in touch to discuss your next project.', 'eshraq-portfolio' ); ?></p>
			<div class="cta-actions">
				<a href="<?php echo esc_url( home_url( '/book' ) ); ?>" class="btn btn-primary btn-large">
					<span><?php esc_html_e( 'Book a Session', 'eshraq-portfolio' ); ?></span>
					<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
						<path d="M5 12h14M12 5l7 7-7 7"/>
					</svg>
				</a>
				<a href="mailto:<?php echo esc_attr( get_theme_mod( 'eshraq_social_email', 'hello@example.com' ) ); ?>" class="btn btn-outline btn-large">
					<span><?php esc_html_e( 'Send an Email', 'eshraq-portfolio' ); ?></span>
				</a>
			</div>
		</div>
	</div>
</section>

<?php get_footer(); ?>
