Spaces:

cloud254
/

undefined

Running

App Files Files Community

undefined / index.html

cloud254

Manual changes saved

a175c52 verified 11 months ago

Raw

History Blame Contribute Delete

113 kB

	d<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Kenyan Wrestling Studio - Home of African Wrestling Excellence</title>
	<meta name="description" content="Discover, upload and monetize premium Kenyan wrestling content. Join our community of wrestling enthusiasts and creators.">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
	<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
	<style>
	/* ===== Global Styles ===== */
	:root {
	--primary: #2c3e50;
	--primary-dark: #1a252f;
	--primary-light: rgba(44, 62, 80, 0.1);
	--secondary: #2c3e50;
	--secondary-dark: #1a252f;
	--light: #ecf0f1;
	--dark: #2c3e50;
	--white: #fff;
	--black: #000;
	--gray: #95a5a6;
	--light-gray: #f8f9fa;
	--success: #27ae60;
	--error: #e74c3c;

	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
	--transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	--border-radius: 8px;
	--max-width: 1400px;
	}

	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	html {
	scroll-behavior: smooth;
	font-size: 16px;
	}

	body {
	font-family: 'Poppins', sans-serif;
	background-color: var(--light-gray);
	color: var(--dark);
	line-height: 1.6;
	overflow-x: hidden;
	position: relative;
	}

	h1, h2, h3, h4 {
	line-height: 1.2;
	font-weight: 700;
	}

	a {
	text-decoration: none;
	color: inherit;
	}

	img {
	max-width: 100%;
	height: auto;
	}

	.container {
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
	padding: 0 2rem;
	}

	section {
	padding: 6rem 0;
	position: relative;
	}

	/* ===== Utility Classes ===== */
	.text-primary {
	color: var(--primary);
	}

	.text-center {
	text-align: center;
	}

	.mt-1 { margin-top: 1rem; }
	.mt-2 { margin-top: 2rem; }
	.mb-1 { margin-bottom: 1rem; }
	.mb-2 { margin-bottom: 2rem; }

	.btn {
	display: inline-block;
	padding: 0.8rem 1.8rem;
	background-color: var(--primary);
	color: var(--white);
	border: none;
	border-radius: var(--border-radius);
	font-weight: 600;
	cursor: pointer;
	transition: var(--transition);
	text-transform: uppercase;
	font-size: 0.9rem;
	letter-spacing: 0.5px;
	text-align: center;
	box-shadow: var(--shadow-sm);
	}

	.btn:hover {
	background-color: var(--primary-dark);
	transform: translateY(-3px);
	box-shadow: var(--shadow-lg);
	}

	.btn-outline {
	background-color: transparent;
	border: 2px solid var(--secondary);
	color: var(--secondary);
	}

	.btn-outline:hover {
	background-color: var(--secondary);
	color: var(--white);
	}

	.btn-large {
	padding: 1rem 2.5rem;
	font-size: 1rem;
	}

	.btn-block {
	display: block;
	width: 100%;
	}

	.btn:disabled {
	background-color: var(--gray);
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
	}

	.btn:disabled:hover {
	background-color: var(--gray);
	transform: none;
	box-shadow: none;
	}

	/* ===== Header ===== */
	header {
	background-color: var(--white);
	box-shadow: var(--shadow-md);
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 1000;
	transition: var(--transition);
	}

	.header-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 0;
	height: 80px;
	}

	.logo {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--secondary);
	}

	.logo-icon {
	color: var(--primary);
	font-size: 1.8rem;
	}

	.logo span {
	color: var(--primary);
	}

	nav ul {
	display: flex;
	list-style: none;
	gap: 2rem;
	}

	nav ul li {
	position: relative;
	}

	nav ul li a {
	color: var(--secondary);
	font-weight: 600;
	transition: var(--transition);
	padding: 0.5rem 0;
	font-size: 1rem;
	display: flex;
	align-items: center;
	gap: 0.3rem;
	}

	nav ul li a:hover {
	color: var(--primary);
	}

	nav ul li a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background-color: var(--primary);
	transition: var(--transition);
	}

	nav ul li a:hover::after {
	width: 100%;
	}

	.auth-buttons {
	display: flex;
	align-items: center;
	gap: 1rem;
	}

	.user-menu {
	position: relative;
	}

	.user-avatar {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--primary-light);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--primary);
	font-weight: 600;
	cursor: pointer;
	transition: var(--transition);
	}

	.user-avatar:hover {
	background-color: var(--primary);
	color: var(--white);
	}

	.dropdown-menu {
	position: absolute;
	right: 0;
	top: 120%;
	background-color: var(--white);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow-lg);
	min-width: 200px;
	opacity: 0;
	visibility: hidden;
	transition: var(--transition);
	z-index: 100;
	}

	.dropdown-menu.active {
	opacity: 1;
	visibility: visible;
	top: 100%;
	}

	.dropdown-menu a {
	display: block;
	padding: 0.8rem 1.5rem;
	color: var(--secondary);
	transition: var(--transition);
	}

	.dropdown-menu a:hover {
	background-color: var(--primary-light);
	color: var(--primary);
	padding-left: 1.8rem;
	}

	.dropdown-menu a i {
	margin-right: 0.8rem;
	width: 20px;
	text-align: center;
	}

	/* ===== Custom Order Dropdown ===== */
	.custom-order-menu {
	position: relative;
	}

	.custom-order-dropdown {
	position: absolute;
	top: 120%;
	left: 0;
	background-color: var(--white);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow-lg);
	min-width: 350px;
	opacity: 0;
	visibility: hidden;
	transition: var(--transition);
	z-index: 100;
	padding: 1.5rem;
	}

	.custom-order-dropdown.active {
	opacity: 1;
	visibility: visible;
	top: 100%;
	}

	.custom-order-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	}

	.custom-order-form h3 {
	margin-bottom: 0.5rem;
	color: var(--secondary);
	font-size: 1.2rem;
	}

	.custom-order-form .form-group {
	margin-bottom: 0;
	}

	.custom-order-form label {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 600;
	color: var(--secondary);
	font-size: 0.9rem;
	}

	.custom-order-form input,
	.custom-order-form select,
	.custom-order-form textarea {
	width: 100%;
	padding: 0.6rem 0.8rem;
	border: 1px solid #ddd;
	border-radius: var(--border-radius);
	font-family: 'Poppins', sans-serif;
	transition: var(--transition);
	background-color: var(--light-gray);
	font-size: 0.9rem;
	}

	.custom-order-form textarea {
	min-height: 80px;
	resize: vertical;
	}

	.custom-order-form input:focus,
	.custom-order-form select:focus,
	.custom-order-form textarea:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.2);
	background-color: var(--white);
	}

	.timeframe-options {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	}

	.timeframe-option {
	flex: 1;
	min-width: 80px;
	}

	.timeframe-option input {
	display: none;
	}

	.timeframe-option label {
	display: block;
	padding: 0.5rem;
	text-align: center;
	background-color: var(--light-gray);
	border-radius: var(--border-radius);
	cursor: pointer;
	transition: var(--transition);
	border: 1px solid transparent;
	}

	.timeframe-option input:checked + label {
	background-color: var(--primary);
	color: var(--white);
	border-color: var(--primary);
	}

	.custom-order-price {
	background-color: var(--primary-light);
	padding: 0.8rem;
	border-radius: var(--border-radius);
	text-align: center;
	font-weight: 600;
	color: var(--primary);
	margin: 0.5rem 0;
	}

	/* ===== Wrestlers Dropdown ===== */
	.wrestlers-menu {
	position: relative;
	}

	.wrestlers-dropdown {
	position: absolute;
	top: 120%;
	left: 0;
	background-color: var(--white);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow-lg);
	min-width: 300px;
	opacity: 0;
	visibility: hidden;
	transition: var(--transition);
	z-index: 100;
	padding: 1.5rem;
	}

	.wrestlers-dropdown.active {
	opacity: 1;
	visibility: visible;
	top: 100%;
	}

	.wrestlers-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 1rem;
	max-height: 300px;
	overflow-y: auto;
	padding-right: 0.5rem;
	}

	.wrestlers-grid::-webkit-scrollbar {
	width: 6px;
	}

	.wrestlers-grid::-webkit-scrollbar-track {
	background: var(--light-gray);
	border-radius: 10px;
	}

	.wrestlers-grid::-webkit-scrollbar-thumb {
	background: var(--primary);
	border-radius: 10px;
	}

	.wrestler-card {
	text-align: center;
	cursor: pointer;
	transition: var(--transition);
	padding: 0.5rem;
	border-radius: var(--border-radius);
	}

	.wrestler-card:hover {
	transform: translateY(-5px);
	background-color: var(--primary-light);
	}

	.wrestler-avatar {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 auto 0.5rem;
	border: 3px solid var(--primary-light);
	transition: var(--transition);
	}

	.wrestler-card:hover .wrestler-avatar {
	border-color: var(--primary);
	}

	.wrestler-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	}

	.wrestler-name {
	font-weight: 600;
	font-size: 0.9rem;
	margin-bottom: 0.2rem;
	color: var(--secondary);
	}

	.wrestler-region {
	font-size: 0.8rem;
	color: var(--gray);
	}

	.view-all-wrestlers {
	text-align: center;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--light-gray);
	}

	/* ===== Mobile Menu ===== */
	.mobile-menu-toggle {
	display: none;
	background: none;
	border: none;
	font-size: 1.5rem;
	color: var(--secondary);
	cursor: pointer;
	}

	/* ===== Hero Section ===== */
	.hero {
	height: 100vh;
	min-height: 800px;
	background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://huggingface.co/spaces/muhohodev/kenyan-wrestling-warriors-hub/resolve/main/images/shifuu.png') no-repeat center center/cover;
	display: flex;
	align-items: center;
	color: var(--white);
	text-align: center;
	padding-top: 80px;
	position: relative;
	}

	.hero-content {
	max-width: 800px;
	margin: 0 auto;
	animation: fadeIn 1s ease-in-out;
	}

	.hero h1 {
	font-size: 3.5rem;
	margin-bottom: 1.5rem;
	text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
	}

	.hero p {
	font-size: 1.3rem;
	margin-bottom: 2.5rem;
	opacity: 0.9;
	text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	}

	.hero-buttons {
	display: flex;
	gap: 1.5rem;
	justify-content: center;
	flex-wrap: wrap;
	}

	.scroll-down {
	position: absolute;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
	color: var(--white);
	font-size: 1.8rem;
	animation: bounce 2s infinite;
	cursor: pointer;
	z-index: 10;
	}

	/* ===== Videos Section ===== */
	.videos {
	background-color: var(--white);
	}

	.section-header {
	text-align: center;
	margin-bottom: 3rem;
	}

	.section-title {
	font-size: 2.5rem;
	color: var(--secondary);
	position: relative;
	display: inline-block;
	margin-bottom: 1rem;
	}

	.section-title::after {
	content: '';
	display: block;
	width: 80px;
	height: 4px;
	background-color: var(--primary);
	margin: 1rem auto;
	}

	.section-subtitle {
	color: var(--gray);
	max-width: 700px;
	margin: 0 auto;
	font-size: 1.1rem;
	}

	.video-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 2rem;
	}

	.video-card {
	background-color: var(--white);
	border-radius: var(--border-radius);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	transition: var(--transition);
	cursor: pointer;
	position: relative;
	}

	.video-card:hover {
	transform: translateY(-10px);
	box-shadow: var(--shadow-lg);
	}

	.video-badge {
	position: absolute;
	top: 1rem;
	left: 1rem;
	background-color: var(--primary);
	color: var(--white);
	padding: 0.3rem 0.8rem;
	border-radius: 4px;
	font-size: 0.8rem;
	font-weight: 600;
	z-index: 1;
	text-transform: uppercase;
	}

	.video-thumbnail {
	position: relative;
	height: 200px;
	overflow: hidden;
	border-radius: var(--border-radius) var(--border-radius) 0 0;
	}

	.video-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: var(--transition);
	}

	.video-card:hover .video-thumbnail img {
	transform: scale(1.05);
	}

	.play-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 60px;
	height: 60px;
	background-color: rgba(230, 126, 34, 0.9);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: var(--transition);
	}

	.video-card:hover .play-icon {
	opacity: 1;
	}

	.play-icon i {
	color: var(--white);
	font-size: 1.5rem;
	margin-left: 0.2rem;
	}

	.duration-badge {
	position: absolute;
	bottom: 0.8rem;
	right: 0.8rem;
	background-color: rgba(0, 0, 0, 0.7);
	color: white;
	padding: 0.2rem 0.6rem;
	border-radius: 4px;
	font-size: 0.8rem;
	font-weight: 600;
	}

	.video-info {
	padding: 1.5rem;
	}

	.video-title {
	font-size: 1.2rem;
	margin-bottom: 0.8rem;
	color: var(--secondary);
	font-weight: 600;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 3.2rem;
	}

	.video-meta {
	display: flex;
	justify-content: space-between;
	color: var(--gray);
	font-size: 0.9rem;
	}

	.video-views {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	}

	.video-price {
	color: var(--primary);
	font-weight: 700;
	}

	.view-more {
	text-align: center;
	margin-top: 3rem;
	}

	/* ===== Stats Section ===== */
	.stats {
	background-color: var(--primary);
	color: var(--white);
	padding: 5rem 0;
	}

	.stats-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 2rem;
	text-align: center;
	}

	.stat-item {
	padding: 1.5rem;
	}

	.stat-number {
	font-size: 3rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
	}

	.stat-label {
	font-size: 1.1rem;
	opacity: 0.9;
	text-transform: uppercase;
	letter-spacing: 1px;
	}

	/* ===== Upload Section ===== */
	.upload {
	background-color: var(--light);
	}

	.upload-container {
	max-width: 800px;
	margin: 0 auto;
	background-color: var(--white);
	padding: 3rem;
	border-radius: var(--border-radius);
	box-shadow: var(--shadow-md);
	}

	.upload-area {
	border: 2px dashed var(--gray);
	border-radius: var(--border-radius);
	padding: 3rem;
	text-align: center;
	margin-bottom: 2rem;
	cursor: pointer;
	transition: var(--transition);
	position: relative;
	}

	.upload-area:hover {
	border-color: var(--primary);
	background-color: var(--primary-light);
	}

	.upload-area i {
	font-size: 3rem;
	color: var(--primary);
	margin-bottom: 1rem;
	}

	.upload-area h3 {
	margin-bottom: 0.8rem;
	color: var(--secondary);
	font-size: 1.3rem;
	}

	.upload-area p {
	margin-bottom: 1rem;
	color: var(--gray);
	}

	.upload-preview {
	display: none;
	margin-top: 1.5rem;
	position: relative;
	}

	.upload-preview video {
	max-width: 100%;
	border-radius: var(--border-radius);
	box-shadow: var(--shadow-md);
	}

	.remove-video {
	position: absolute;
	top: 0.8rem;
	right: 0.8rem;
	background-color: rgba(0, 0, 0, 0.7);
	color: white;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 1;
	transition: var(--transition);
	}

	.remove-video:hover {
	background-color: var(--error);
	}

	/* Upload Progress */
	.upload-progress {
	display: none;
	margin-top: 1rem;
	background-color: var(--light-gray);
	border-radius: var(--border-radius);
	overflow: hidden;
	}

	.progress-bar {
	height: 6px;
	background-color: var(--primary);
	width: 0%;
	transition: width 0.3s ease;
	}

	.progress-text {
	text-align: center;
	padding: 0.5rem;
	font-size: 0.9rem;
	color: var(--gray);
	}

	/* ===== Form Styles ===== */
	.form-group {
	margin-bottom: 1.5rem;
	}

	.form-group label {
	display: block;
	margin-bottom: 0.6rem;
	font-weight: 600;
	color: var(--secondary);
	}

	.form-group input,
	.form-group textarea,
	.form-group select {
	width: 100%;
	padding: 0.8rem 1rem;
	border: 1px solid #ddd;
	border-radius: var(--border-radius);
	font-family: 'Poppins', sans-serif;
	transition: var(--transition);
	background-color: var(--light-gray);
	}

	.form-group textarea {
	min-height: 120px;
	resize: vertical;
	}

	.form-group input:focus,
	.form-group textarea:focus,
	.form-group select:focus {
	outline: none;
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.2);
	background-color: var(--white);
	}

	.form-message {
	padding: 0.8rem;
	border-radius: var(--border-radius);
	margin-bottom: 1rem;
	display: none;
	}

	.form-message.success {
	background-color: rgba(39, 174, 96, 0.1);
	color: var(--success);
	border: 1px solid var(--success);
	display: block;
	}

	.form-message.error {
	background-color: rgba(231, 76, 60, 0.1);
	color: var(--error);
	border: 1px solid var(--error);
	display: block;
	}

	/* ===== About Section ===== */
	.about {
	background-color: var(--white);
	}

	.about-content {
	display: flex;
	align-items: center;
	gap: 4rem;
	}

	.about-image {
	flex: 1;
	border-radius: var(--border-radius);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
	}
	.about-image img {
	width: 100%;
	height: auto;
	display: block;
	transition: var(--transition);
	border-radius: var(--border-radius);
	margin-bottom: 1rem;
	}

	.about-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem;
	margin-top: 1.5rem;
	}

	.about-gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--border-radius);
	transition: var(--transition);
	box-shadow: var(--shadow-sm);
	}

	.about-gallery img:hover {
	transform: scale(1.05);
	box-shadow: var(--shadow-md);
	}
	.about-image:hover img {
	transform: scale(1.03);
	}

	.about-text {
	flex: 1;
	}

	.about-text h2 {
	font-size: 2.2rem;
	margin-bottom: 1.5rem;
	color: var(--secondary);
	}

	.about-text p {
	margin-bottom: 1.2rem;
	color: var(--gray);
	font-size: 1.1rem;
	}

	/* ===== Testimonials Section ===== */
	.testimonials {
	background-color: var(--light);
	}

	.testimonials-container {
	max-width: 1200px;
	margin: 0 auto;
	}

	.testimonial-slider {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: 2rem;
	padding: 1rem 0;
	scrollbar-width: none; /* Firefox */
	}

	.testimonial-slider::-webkit-scrollbar {
	display: none; /* Chrome, Safari, Opera */
	}

	.testimonial-card {
	min-width: 350px;
	background-color: var(--white);
	border-radius: var(--border-radius);
	padding: 2rem;
	box-shadow: var(--shadow-md);
	scroll-snap-align: start;
	}

	.testimonial-content {
	font-style: italic;
	margin-bottom: 1.5rem;
	color: var(--secondary);
	}

	.testimonial-author {
	display: flex;
	align-items: center;
	gap: 1rem;
	}

	.author-avatar {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	overflow: hidden;
	}

	.author-info h4 {
	font-size: 1.1rem;
	color: var(--secondary);
	}

	.author-info p {
	color: var(--gray);
	font-size: 0.9rem;
	}

	/* ===== Pricing Section ===== */
	.pricing {
	background-color: var(--white);
	}

	.pricing-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
	margin-top: 3rem;
	}

	.pricing-card {
	background-color: var(--white);
	border-radius: var(--border-radius);
	padding: 2.5rem;
	box-shadow: var(--shadow-md);
	transition: var(--transition);
	text-align: center;
	border: 2px solid transparent;
	}

	.pricing-card:hover {
	transform: translateY(-10px);
	box-shadow: var(--shadow-lg);
	border-color: var(--primary);
	}

	.pricing-card.popular {
	border-color: var(--primary);
	position: relative;
	}

	.popular-badge {
	position: absolute;
	top: -12px;
	right: 20px;
	background-color: var(--primary);
	color: var(--white);
	padding: 0.3rem 1.5rem;
	border-radius: 20px;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	}

	.pricing-plan {
	font-size: 1.5rem;
	font-weight: 600;
	margin-bottom: 1rem;
	color: var(--secondary);
	}

	.pricing-price {
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--primary);
	margin-bottom: 1.5rem;
	}

	.pricing-price span {
	font-size: 1rem;
	font-weight: 400;
	color: var(--gray);
	}

	.pricing-features {
	list-style: none;
	margin-bottom: 2rem;
	}

	.pricing-features li {
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--light-gray);
	color: var(--gray);
	}

	.pricing-features li:last-child {
	border-bottom: none;
	}

	.pricing-features li i {
	color: var(--primary);
	margin-right: 0.5rem;
	width: 20px;
	text-align: center;
	}

	/* ===== FAQ Section ===== */
	.faq {
	background-color: var(--light);
	}

	.faq-container {
	max-width: 800px;
	margin: 0 auto;
	}

	.faq-item {
	background-color: var(--white);
	border-radius: var(--border-radius);
	margin-bottom: 1rem;
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	}

	.faq-question {
	padding: 1.5rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	font-weight: 600;
	color: var(--secondary);
	transition: var(--transition);
	}

	.faq-question:hover {
	color: var(--primary);
	}

	.faq-question i {
	transition: var(--transition);
	}

	.faq-answer {
	padding: 0 1.5rem;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
	color: var(--gray);
	}

	.faq-item.active .faq-question i {
	transform: rotate(180deg);
	}

	.faq-item.active .faq-answer {
	padding-bottom: 1.5rem;
	max-height: 500px;
	}

	/* ===== Call to Action ===== */
	.cta {
	background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('https://images.unsplash.com/photo-1540747913346-19e32dc3e97e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1605&q=80') no-repeat center center/cover;
	color: var(--white);
	text-align: center;
	padding: 6rem 0;
	}

	.cta h2 {
	font-size: 2.5rem;
	margin-bottom: 1.5rem;
	}

	.cta p {
	max-width: 700px;
	margin: 0 auto 2.5rem;
	font-size: 1.2rem;
	opacity: 0.9;
	}

	/* ===== Footer ===== */
	footer {
	background-color: var(--secondary-dark);
	color: var(--white);
	padding: 5rem 0 2rem;
	}

	.footer-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 3rem;
	margin-bottom: 3rem;
	}

	.footer-logo {
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
	display: flex;
	align-items: center;
	gap: 0.8rem;
	}

	.footer-logo-icon {
	color: var(--primary);
	font-size: 1.8rem;
	}

	.footer-about p {
	margin-bottom: 1.5rem;
	opacity: 0.8;
	line-height: 1.7;
	}

	.social-links {
	display: flex;
	gap: 1rem;
	}

	.social-links a {
	color: var(--white);
	background-color: rgba(255, 255, 255, 0.1);
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--transition);
	}

	.social-links a:hover {
	background-color: var(--primary);
	transform: translateY(-3px);
	}

	.footer-links h3 {
	font-size: 1.3rem;
	margin-bottom: 1.5rem;
	position: relative;
	padding-bottom: 0.8rem;
	}

	.footer-links h3::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 40px;
	height: 2px;
	background-color: var(--primary);
	}

	.footer-links ul {
	list-style: none;
	}

	.footer-links li {
	margin-bottom: 0.8rem;
	}

	.footer-links a {
	color: rgba(255, 255, 255, 0.8);
	transition: var(--transition);
	display: block;
	padding: 0.3rem 0;
	}

	.footer-links a:hover {
	color: var(--primary);
	padding-left: 0.5rem;
	}

	.footer-newsletter h3 {
	font-size: 1.3rem;
	margin-bottom: 1.5rem;
	position: relative;
	padding-bottom: 0.8rem;
	}

	.footer-newsletter h3::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 40px;
	height: 2px;
	background-color: var(--primary);
	}

	.footer-newsletter p {
	margin-bottom: 1.5rem;
	opacity: 0.8;
	line-height: 1.7;
	}

	.newsletter-form {
	display: flex;
	margin-bottom: 1.5rem;
	}

	.newsletter-form input {
	flex: 1;
	padding: 0.8rem 1rem;
	border: none;
	border-radius: var(--border-radius) 0 0 var(--border-radius);
	font-family: 'Poppins', sans-serif;
	background-color: rgba(255, 255, 255, 0.1);
	color: var(--white);
	}

	.newsletter-form input::placeholder {
	color: rgba(255, 255, 255, 0.7);
	}

	.newsletter-form button {
	background-color: var(--primary);
	color: var(--white);
	border: none;
	padding: 0 1.5rem;
	border-radius: 0 var(--border-radius) var(--border-radius) 0;
	cursor: pointer;
	transition: var(--transition);
	}

	.newsletter-form button:hover {
	background-color: var(--primary-dark);
	}

	.footer-bottom {
	text-align: center;
	padding-top: 2rem;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-size: 0.9rem;
	opacity: 0.8;
	}

	/* ===== Modals ===== */
	.modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 2000;
	overflow-y: auto;
	padding: 2rem;
	animation: fadeIn 0.3s ease;
	}

	.modal-content {
	background-color: var(--white);
	border-radius: var(--border-radius);
	width: 100%;
	max-width: 500px;
	margin: 2rem auto;
	padding: 2.5rem;
	position: relative;
	animation: modalSlideIn 0.3s ease;
	}

	.close-modal {
	position: absolute;
	top: 1rem;
	right: 1rem;
	font-size: 1.5rem;
	color: var(--gray);
	cursor: pointer;
	transition: var(--transition);
	background: none;
	border: none;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	}

	.close-modal:hover {
	color: var(--primary);
	transform: rotate(90deg);
	background-color: var(--primary-light);
	}

	.modal-title {
	margin-bottom: 1.5rem;
	color: var(--secondary);
	text-align: center;
	font-size: 1.8rem;
	}

	/* Video Player Modal */
	#videoModal .modal-content {
	max-width: 900px;
	padding: 1.5rem;
	}

	.video-player {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 aspect ratio */
	height: 0;
	margin-bottom: 1.5rem;
	background-color: #000;
	border-radius: var(--border-radius);
	overflow: hidden;
	}

	.video-player video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

	.modal-video-info {
	padding: 0 1rem;
	}

	.modal-video-info h3 {
	font-size: 1.5rem;
	margin-bottom: 1rem;
	color: var(--secondary);
	}

	.modal-video-info p {
	color: var(--gray);
	margin-bottom: 1.5rem;
	line-height: 1.7;
	}

	.modal-video-meta {
	display: flex;
	justify-content: space-between;
	margin-bottom: 1.5rem;
	color: var(--gray);
	font-size: 0.9rem;
	}

	/* Form options in auth modals */
	.form-options {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 1.5rem 0;
	font-size: 0.9rem;
	}

	.form-options a {
	color: var(--primary);
	text-decoration: none;
	transition: var(--transition);
	font-weight: 500;
	}

	.form-options a:hover {
	text-decoration: underline;
	}

	.auth-switch {
	text-align: center;
	margin-top: 1.5rem;
	color: var(--gray);
	}

	.auth-switch a {
	color: var(--primary);
	text-decoration: none;
	transition: var(--transition);
	font-weight: 500;
	}

	.auth-switch a:hover {
	text-decoration: underline;
	}

	/* ===== Animations ===== */
	@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
	}

	@keyframes modalSlideIn {
	from { opacity: 0; transform: translateY(-50px); }
	to { opacity: 1; transform: translateY(0); }
	}

	@keyframes bounce {
	0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
	40% { transform: translateY(-20px) translateX(-50%); }
	60% { transform: translateY(-10px) translateX(-50%); }
	}

	/* ===== Responsive ===== */
	@media (max-width: 1200px) {
	.container {
	padding: 0 1.5rem;
	}
	}

	@media (max-width: 992px) {
	.about-content {
	flex-direction: column;
	}

	.about-image,
	.about-text {
	flex: none;
	width: 100%;
	}

	.about-image {
	margin-bottom: 2rem;
	}

	.hero h1 {
	font-size: 3rem;
	}

	.wrestlers-dropdown,
	.custom-order-dropdown {
	min-width: 280px;
	}

	.wrestlers-grid {
	grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
	}
	}

	@media (max-width: 768px) {
	html {
	font-size: 15px;
	}

	section {
	padding: 4rem 0;
	}

	.header-container {
	flex-direction: column;
	height: auto;
	padding: 1rem 0;
	}

	nav {
	margin: 1rem 0;
	}

	nav ul {
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	}

	.auth-buttons {
	margin: 1rem 0;
	}

	.hero {
	min-height: 700px;
	}

	.hero h1 {
	font-size: 2.5rem;
	}

	.hero p {
	font-size: 1.1rem;
	}

	.hero-buttons {
	flex-direction: column;
	gap: 1rem;
	}

	.hero-buttons .btn {
	width: 100%;
	max-width: 250px;
	margin: 0 auto;
	}

	.section-title {
	font-size: 2rem;
	}

	.upload-container {
	padding: 2rem;
	}

	.upload-area {
	padding: 2rem;
	}

	.modal-content {
	padding: 1.5rem;
	}

	.footer-container {
	grid-template-columns: 1fr;
	gap: 2rem;
	}

	.wrestlers-dropdown,
	.custom-order-dropdown {
	left: -100px;
	min-width: 280px;
	}
	}

	@media (max-width: 576px) {
	html {
	font-size: 14px;
	}

	.hero h1 {
	font-size: 2rem;
	}

	.section-title {
	font-size: 1.8rem;
	}

	.video-grid {
	grid-template-columns: 1fr;
	}

	.testimonial-card {
	min-width: 280px;
	}

	.pricing-cards {
	grid-template-columns: 1fr;
	}

	.modal-content {
	padding: 1.5rem 1rem;
	}

	.cta h2 {
	font-size: 2rem;
	}

	.cta p {
	font-size: 1rem;
	}

	.wrestlers-dropdown,
	.custom-order-dropdown {
	left: -150px;
	min-width: 250px;
	}

	.wrestlers-grid {
	grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
	}

	.wrestler-avatar {
	width: 60px;
	height: 60px;
	}

	.timeframe-options {
	flex-direction: column;
	}
	}
	</style>
	</head>
	<body>
	<!-- Header -->
	<header>
	<div class="container header-container">
	<a href="#home" class="logo">
	<i class="fas fa-wrestling logo-icon"></i>
	<span>Kenyan <span>Wrestling</span> Studio</span>
	</a>
	<nav>
	<ul>
	<li><a href="#home">Home</a></li>
	<li><a href="#videos">Videos</a></li>
	<li class="wrestlers-menu">
	<a href="#wrestlers" id="wrestlersBtn">Wrestlers <i class="fas fa-chevron-down"></i></a>
	<div class="wrestlers-dropdown" id="wrestlersDropdown">
	<div class="wrestlers-grid" id="wrestlersGrid">
	<!-- Wrestler profiles will be loaded here -->
	</div>
	<div class="view-all-wrestlers">
	<a href="#wrestlers" class="btn btn-outline">View All Wrestlers</a>
	</div>
	</div>
	</li>
	<li class="custom-order-menu">
	<a href="#custom-order" id="customOrderBtn">Custom Order <i class="fas fa-chevron-down"></i></a>
	<div class="custom-order-dropdown" id="customOrderDropdown">
	<h3>Request Custom Video</h3>
	<form class="custom-order-form" id="customOrderForm">
	<div class="form-group">
	<label for="customCategory">Video Category</label>
	<select id="customCategory" required>
	<option value="">Select a category</option>
	<option value="traditional">Traditional Wrestling</option>
	<option value="modern">Modern Techniques</option>
	<option value="training">Training & Drills</option>
	<option value="competition">Competitions</option>
	<option value="documentary">Documentaries</option>
	<option value="catfights">Catfights</option>
	<option value="submission">Submission Wrestling</option>
	</select>
	</div>
	<div class="form-group">
	<label>Video Timeframe</label>
	<div class="timeframe-options">
	<div class="timeframe-option">
	<input type="radio" id="timeframe-5" name="timeframe" value="5" required>
	<label for="timeframe-5">5 min</label>
	</div>
	<div class="timeframe-option">
	<input type="radio" id="timeframe-10" name="timeframe" value="10">
	<label for="timeframe-10">10 min</label>
	</div>
	<div class="timeframe-option">
	<input type="radio" id="timeframe-15" name="timeframe" value="15">
	<label for="timeframe-15">15 min</label>
	</div>
	<div class="timeframe-option">
	<input type="radio" id="timeframe-30" name="timeframe" value="30">
	<label for="timeframe-30">30 min</label>
	</div>
	</div>
	</div>
	<div class="form-group">
	<label for="customDescription">Special Requirements</label>
	<textarea id="customDescription" placeholder="Describe what you want in the custom video..."></textarea>
	</div>
	<div class="custom-order-price" id="customOrderPrice">Estimated Price: $0</div>
	<button type="submit" class="btn btn-block">Submit Request</button>
	</form>
	</div>
	</li>
	<li><a href="#upload">Upload</a></li>
	<li><a href="#pricing">Pricing</a></li>
	<li><a href="#about">About</a></li>
	</ul>
	</nav>
	<div class="auth-buttons" id="authButtons">
	<button class="btn btn-outline" id="loginBtn">Login</button>
	<button class="btn" id="signupBtn">Sign Up</button>
	</div>
	<div class="user-menu" id="userMenu" style="display: none;">
	<div class="user-avatar" id="userAvatar">T</div>
	<div class="dropdown-menu" id="dropdownMenu">
	<a href="#"><i class="fas fa-user"></i> My Profile</a>
	<a href="#"><i class="fas fa-video"></i> My Videos</a>
	<a href="#"><i class="fas fa-shopping-cart"></i> Purchases</a>
	<a href="#"><i class="fas fa-cog"></i> Settings</a>
	<a href="#" id="logoutBtn"><i class="fas fa-sign-out-alt"></i> Logout</a>
	</div>
	</div>
	</div>
	</header>
	<!-- Hero Section -->
	<section class="hero" id="home">
	<div class="container">
	<div class="hero-content" style="text-align: right; margin-left: auto; max-width: 600px; color: #fff; background-color: rgba(44, 62, 80, 0.8); padding: 2rem; border-radius: 8px;">
	<h1 style="color: #fff;">Kenyan Wrestling Studio</h1>
	<p style="color: #ecf0f1;">Join Africa's premier wrestling community. Access exclusive content, training and connect with top wrestlers across the continent.</p>
	<div class="hero-buttons">
	<button class="btn btn-large" id="browseVideosBtn" style="background-color: #2c3e50; border-color: #2c3e50;">Browse Videos</button>
	<button class="btn btn-large btn-outline" id="learnMoreBtn" style="border-color: #fff; color: #fff;">Membership ($5)</button>
	</div>
	</div>
	</div>
	<div class="scroll-down" id="scrollDown">
	<i class="fas fa-chevron-down"></i>
	</div>
	</section>

	<!-- Videos Section -->
	<section class="videos" id="videos">
	<div class="container">
	<div class="section-header">
	<h2 class="section-title">Featured Wrestling Videos</h2>
	<p class="section-subtitle">Premium content showcasing the best of Kenyan wrestling traditions and modern techniques</p>
	</div>
	<div class="video-grid" id="videoGrid">
	<!-- Videos with thumbnails will be loaded here -->
	</div>
	<div class="view-more">
	<button class="btn btn-outline" id="viewMoreBtn">View More Videos</button>
	</div>
	</div>
	</section>

	<!-- Stats Section -->
	<section class="stats">
	<div class="container stats-container">
	<div class="stat-item">
	<div class="stat-number" id="videoCount">500+</div>
	<div class="stat-label">Premium Videos</div>
	</div>
	<div class="stat-item">
	<div class="stat-number" id="userCount">10K+</div>
	<div class="stat-label">Active Users</div>
	</div>
	<div class="stat-item">
	<div class="stat-number" id="creatorCount">200+</div>
	<div class="stat-label">Content Creators</div>
	</div>
	<div class="stat-item">
	<div class="stat-number" id="countryCount">15+</div>
	<div class="stat-label">Kenyan Regions</div>
	</div>
	</div>
	</section>
	<!-- Admin Upload Section -->
	<section class="upload" id="adminUpload">
	<div class="container">
	<div class="section-header">
	<h2 class="section-title">Admin Video Upload</h2>
	<p class="section-subtitle">Upload premium wrestling content to the platform</p>
	</div>
	<div class="upload-container" id="adminUploadContainer" style="display: none;">
	<div class="upload-area" id="adminUploadArea">
	<i class="fas fa-cloud-upload-alt"></i>
	<h3>Drag & Drop your video here</h3>
	<p>or click to browse files</p>
	<input type="file" id="adminVideoUpload" accept="video/*" style="display: none;">
	</div>
	<div class="upload-progress" id="adminUploadProgress">
	<div class="progress-bar" id="adminProgressBar"></div>
	<div class="progress-text" id="adminProgressText">0% uploaded</div>
	</div>
	<div id="adminUploadFormMessages"></div>
	<div class="form-group">
	<label for="adminVideoTitle">Video Title</label>
	<input type="text" id="adminVideoTitle" placeholder="Enter video title">
	</div>
	<div class="form-group">
	<label for="adminVideoDescription">Description</label>
	<textarea id="adminVideoDescription" placeholder="Enter video description"></textarea>
	</div>
	<div class="form-group">
	<label for="adminVideoCategory">Category</label>
	<select id="adminVideoCategory">
	<option value="">Select a category</option>
	<option value="traditional">Traditional Wrestling</option>
	<option value="modern">Modern Techniques</option>
	<option value="training">Training & Drills</option>
	<option value="competition">Competitions</option>
	<option value="documentary">Documentaries</option>
	<option value="catfights">Catfights</option>
	<option value="submission">Submission Wrestling</option>
	</select>
	</div>
	<div class="form-group">
	<label for="adminVideoPrice">Price ($)</label>
	<input type="number" id="adminVideoPrice" placeholder="Enter price to view" min="1" step="0.01">
	</div>
	<div class="upload-preview" id="adminUploadPreview">
	<div class="remove-video" id="adminRemoveVideo">
	<i class="fas fa-times"></i>
	</div>
	<video controls id="adminVideoPreview"></video>
	</div>
	<button class="btn btn-block" id="adminUploadBtn">Upload Video</button>
	</div>
	<div id="adminLoginPrompt" class="text-center">
	<p>Please login as admin to upload videos</p>
	<button class="btn" id="adminLoginBtn">Admin Login</button>
	</div>
	</div>
	</section>
	<!-- About Section -->
	<section class="about" id="about">
	<div class="container">
	<div class="about-content">
	<div class="about-image">
	<img src="https://huggingface.co/spaces/muhohodev/kenyan-wrestling-warriors-hub/resolve/main/images/IMG_20250731_184422_076 (1).jpg" alt="Kenyan Wrestling Studio Team">
	<div class="about-gallery">
	</div>
	</div>
	<div class="about-text">
	<h2>About Kenyan Wrestling Studio</h2>
	<p>Kenyan Wrestling Studio is the premier platform dedicated to preserving and promoting the rich heritage of Kenyan wrestling traditions while showcasing modern developments in the sport.</p>
	<p>Founded in 2025, our mission is to connect wrestling enthusiasts, athletes, and content creators from across Kenya and the diaspora.</p>
	<p>We provide a marketplace for premium wrestling content, offering fans access to exclusive videos while enabling creators to monetize their skills and knowledge.</p>
	<button class="btn" id="aboutLearnMoreBtn">Learn More About Us</button>
	</div>
	</div>
	</div>
	</section>

	<!-- Testimonials Section -->
	<section class="testimonials">
	<div class="container">
	<div class="section-header">
	<h2 class="section-title">What Our Users Say</h2>
	<p class="section-subtitle">Hear from wrestlers, coaches, and fans who use our platform</p>
	</div>
	<div class="testimonials-container">
	<div class="testimonial-slider">
	<div class="testimonial-card">
	<div class="testimonial-content">
	"Kenyan Wrestling Studio has transformed how I train. The techniques I've learned from traditional wrestlers across our country have taken my skills to the next level."
	</div>
	<div class="testimonial-author">
	<div class="author-avatar">
	<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User">
	</div>
	<div class="author-info">
	<h4>Kamau Ochieng</h4>
	<p>Professional Wrestler, Nairobi</p>
	</div>
	</div>
	</div>
	<div class="testimonial-card">
	<div class="testimonial-content">
	"As a coach, I use videos from this platform to teach my students. The quality of content is exceptional, and it's amazing to have access to so many different wrestling styles from across Kenya."
	</div>
	<div class="testimonial-author">
	<div class="author-avatar">
	<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User">
	</div>
	<div class="author-info">
	<h4>Wanjiku Mwangi</h4>
	<p>Wrestling Coach, Mombasa</p>
	</div>
	</div>
	</div>
	<div class="testimonial-card">
	<div class="testimonial-content">
	"I've been able to monetize my wrestling tutorials and reach a global audience. The platform makes it easy to upload and sell my content while connecting with fans of Kenyan wrestling."
	</div>
	<div class="testimonial-author">
	<div class="author-avatar">
	<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="User">
	</div>
	<div class="author-info">
	<h4>Jabali Okoth</h4>
	<p>Content Creator, Kisumu</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Pricing Section -->
	<section class="pricing" id="pricing">
	<div class="container">
	<div class="section-header">
	<h2 class="section-title">Simple, Transparent Pricing</h2>
	<p class="section-subtitle">Choose the plan that works best for you</p>
	</div>
	<div class="pricing-cards">
	<div class="pricing-card">
	<div class="pricing-plan">Fan</div>
	<div class="pricing-price">$5 <span>/ month</span></div>
	<ul class="pricing-features">
	<li><i class="fas fa-check"></i> 5 videos/month</li>
	<li><i class="fas fa-check"></i> Community access</li>
	<li><i class="fas fa-check"></i> Live Q&A sessions</li>
	<li><i class="fas fa-check"></i> Standard support</li>
	</ul>
	<button class="btn btn-outline btn-block pricing-btn" data-plan="fan">Join Now</button>
	</div>
	<div class="pricing-card popular">
	<div class="popular-badge">Most Popular</div>
	<div class="pricing-plan">Warrior</div>
	<div class="pricing-price">$15 <span>/ month</span></div>
	<ul class="pricing-features">
	<li><i class="fas fa-check"></i> Unlimited videos</li>
	<li><i class="fas fa-check"></i> Training programs</li>
	<li><i class="fas fa-check"></i> 75% revenue share</li>
	<li><i class="fas fa-check"></i> Priority support</li>
	<li><i class="fas fa-check"></i> Private coaching</li>
	</ul>
	<button class="btn btn-block pricing-btn" data-plan="warrior">Train Like A Pro</button>
	</div>
	<div class="pricing-card">
	<div class="pricing-plan">Champion</div>
	<div class="pricing-price">$30 <span>/ month</span></div>
	<ul class="pricing-features">
	<li><i class="fas fa-check"></i> All Warrior benefits</li>
	<li><i class="fas fa-check"></i> Exclusive events</li>
	<li><i class="fas fa-check"></i> 85% revenue share</li>
	<li><i class="fas fa-check"></i> 24/7 VIP support</li>
	<li><i class="fas fa-check"></i> Sponsorship deals</li>
	<li><i class="fas fa-check"></i> Promotional support</li>
	</ul>
	<button class="btn btn-outline btn-block pricing-btn" data-plan="champion">Become Elite</button>
	</div>
	</div>
	</div>
	</section>

	<!-- FAQ Section -->
	<section class="faq">
	<div class="container">
	<div class="section-header">
	<h2 class="section-title">Frequently Asked Questions</h2>
	<p class="section-subtitle">Find answers to common questions about our platform</p>
	</div>
	<div class="faq-container">
	<div class="faq-item">
	<div class="faq-question">
	<span>How do I upload videos to the platform?</span>
	<i class="fas fa-chevron-down"></i>
	</div>
	<div class="faq-answer">
	<p>Uploading videos is simple! Just go to the Upload section, drag and drop your video file or click to browse, fill in the required information (title, description, category, and price), and click the Upload button. Our system supports most common video formats up to 100MB in size.</p>
	</div>
	</div>
	<div class="faq-item">
	<div class="faq-question">
	<span>How do I get paid for my content?</span>
	<i class="fas fa-chevron-down"></i>
	</div>
	<div class="faq-answer">
	<p>We pay content creators monthly via M-Pesa or bank transfer. You'll receive 70-80% of the revenue from your video sales, depending on your membership level. Payouts are processed on the 15th of each month for the previous month's earnings, provided you've reached the minimum payout threshold of KSh 5,000.</p>
	</div>
	</div>
	<div class="faq-item">
	<div class="faq-question">
	<span>Can I watch videos for free?</span>
	<i class="fas fa-chevron-down"></i>
	</div>
	<div class="faq-answer">
	<p>Yes! We have a selection of free videos available to all registered users. Additionally, our Basic plan includes 3 premium videos per month. To access all premium content unlimitedly, you'll need to upgrade to our Pro or Creator plans.</p>
	</div>
	</div>
	<div class="faq-item">
	<div class="faq-question">
	<span>What types of wrestling videos are allowed?</span>
	<i class="fas fa-chevron-down"></i>
	</div>
	<div class="faq-answer">
	<p>We accept all forms of Kenyan wrestling content including traditional styles, modern techniques, training drills, competition highlights, and documentaries. All content must be original and respect our community guidelines (no violence, hate speech, or inappropriate content).</p>
	</div>
	</div>
	<div class="faq-item">
	<div class="faq-question">
	<span>How do custom orders work?</span>
	<i class="fas fa-chevron-down"></i>
	</div>
	<div class="faq-answer">
	<p>Custom orders allow you to request specific wrestling content tailored to your preferences. Simply use the Custom Order dropdown to select your desired category, timeframe, and add any special requirements. Our team will review your request and provide a quote within 24 hours.</p>
	</div>
	</div>
	</div>
	</div>
	</section>

	<!-- Call to Action -->
	<section class="cta">
	<div class="container">
	<h2>Ready to Join Our Wrestling Community?</h2>
	<p>Whether you're a wrestling enthusiast, athlete, or content creator, Kenyan Wrestling Studio has something for you. Sign up today and start exploring or sharing premium wrestling content.</p>
	<button class="btn btn-large" id="ctaSignupBtn">Sign Up Now</button>
	</div>
	</section>

	<!-- Footer -->
	<footer>
	<div class="container">
	<div class="footer-container">
	<div class="footer-about">
	<div class="footer-logo">
	<i class="fas fa-wrestling footer-logo-icon"></i>
	<span>Kenyan Wrestling Studio</span>
	</div>
	<p>Connecting wrestling traditions across Kenya through premium content and community. Our mission is to preserve, promote, and celebrate Kenyan wrestling heritage.</p>
	<div class="social-links">
	<a href="#"><i class="fab fa-facebook-f"></i></a>
	<a href="#"><i class="fab fa-twitter"></i></a>
	<a href="#"><i class="fab fa-instagram"></i></a>
	<a href="#"><i class="fab fa-youtube"></i></a>
	</div>
	</div>
	<div class="footer-links">
	<h3>Quick Links</h3>
	<ul>
	<li><a href="#home">Home</a></li>
	<li><a href="#videos">Videos</a></li>
	<li><a href="#wrestlers">Wrestlers</a></li>
	<li><a href="#custom-order">Custom Order</a></li>
	<li><a href="#upload">Upload</a></li>
	<li><a href="#pricing">Pricing</a></li>
	<li><a href="#about">About</a></li>
	<li><a href="#">FAQ</a></li>
	</ul>
	</div>
	<div class="footer-links">
	<h3>Categories</h3>
	<ul>
	<li><a href="#">African catfights</a></li>
	<li><a href="#">Catfights</a></li>
	<li><a href="#">Kickboxing</a></li>
	<li><a href="#">Footfetish</a></li>
	<li><a href="#">Mud wrestling</a></li>
	<li><a href="#">Oil wrestling</a></li>
	<li><a href="#">Submission</a></li>
	</ul>
	</div>
	<div class="footer-newsletter">
	<h3>Newsletter</h3>
	<p>Subscribe to get updates on new videos, features, and wrestling events across Kenya.</p>
	<form class="newsletter-form" id="newsletterForm">
	<input type="email" placeholder="Your email address" required>
	<button type="submit"><i class="fas fa-paper-plane"></i></button>
	</form>
	<p>By subscribing, you agree to our <a href="#" style="color: var(--primary);">Privacy Policy</a>.</p>
	</div>
	</div>
	<div class="footer-bottom">
	<p>© 2025 Kenyan Wrestling Studio. All rights reserved. \| <a href="#" style="color: var(--primary);">Terms of Service</a> \| <a href="#" style="color: var(--primary);">Privacy Policy</a></p>
	</div>
	</div>
	</footer>

	<!-- Login Modal -->
	<div class="modal" id="loginModal">
	<div class="modal-content">
	<button class="close-modal">×</button>
	<h2 class="modal-title">Login to Your Account</h2>
	<form id="loginForm">
	<div id="loginFormMessages"></div>
	<div class="form-group">
	<label for="loginEmail">Email</label>
	<input type="email" id="loginEmail" placeholder="Enter your email" required>
	</div>
	<div class="form-group">
	<label for="loginPassword">Password</label>
	<input type="password" id="loginPassword" placeholder="Enter your password" required>
	</div>
	<div class="form-options">
	<label>
	<input type="checkbox"> Remember me
	</label>
	<a href="#">Forgot password?</a>
	</div>
	<button type="submit" class="btn btn-block">Login</button>
	<div class="auth-switch">
	Don't have an account? <a href="#" id="switchToSignup">Sign up</a>
	</div>
	</form>
	</div>
	</div>

	<!-- Signup Modal -->
	<div class="modal" id="signupModal">
	<div class="modal-content">
	<button class="close-modal">×</button>
	<h2 class="modal-title">Create Your Account</h2>
	<form id="signupForm">
	<div id="signupFormMessages"></div>
	<div class="form-group">
	<label for="signupName">Full Name</label>
	<input type="text" id="signupName" placeholder="Enter your full name" required>
	</div>
	<div class="form-group">
	<label for="signupEmail">Email</label>
	<input type="email" id="signupEmail" placeholder="Enter your email" required>
	</div>
	<div class="form-group">
	<label for="signupPassword">Password</label>
	<input type="password" id="signupPassword" placeholder="Create a password (min 6 characters)" required>
	</div>
	<div class="form-group">
	<label for="signupConfirm">Confirm Password</label>
	<input type="password" id="signupConfirm" placeholder="Confirm your password" required>
	</div>
	<div class="form-group">
	<label>
	<input type="checkbox" required> I agree to the <a href="#" style="color: var(--primary);">Terms of Service</a> and <a href="#" style="color: var(--primary);">Privacy Policy</a>
	</label>
	</div>
	<button type="submit" class="btn btn-block">Create Account</button>
	<div class="auth-switch">
	Already have an account? <a href="#" id="switchToLogin">Login</a>
	</div>
	</form>
	</div>
	</div>

	<!-- Video Player Modal -->
	<div class="modal" id="videoModal">
	<div class="modal-content">
	<button class="close-modal">×</button>
	<div class="video-player">
	<video controls id="modalVideoPlayer"></video>
	</div>
	<div class="modal-video-info">
	<h3 id="modalVideoTitle"></h3>
	<p id="modalVideoDescription"></p>
	<div class="modal-video-meta">
	<span id="modalVideoDuration"></span>
	<span id="modalVideoPrice"></span>
	</div>
	<button class="btn btn-block" id="purchaseBtn">Purchase Video</button>
	</div>
	</div>
	</div>

	<script>
	// DOM Elements
	const loginBtn = document.getElementById('loginBtn');
	const signupBtn = document.getElementById('signupBtn');
	const authButtons = document.getElementById('authButtons');
	const userMenu = document.getElementById('userMenu');
	const userAvatar = document.getElementById('userAvatar');
	const dropdownMenu = document.getElementById('dropdownMenu');
	const logoutBtn = document.getElementById('logoutBtn');
	const browseVideosBtn = document.getElementById('browseVideosBtn');
	const learnMoreBtn = document.getElementById('learnMoreBtn');
	const scrollDown = document.getElementById('scrollDown');
	const loginModal = document.getElementById('loginModal');
	const signupModal = document.getElementById('signupModal');
	const videoModal = document.getElementById('videoModal');
	const closeModals = document.querySelectorAll('.close-modal');
	const switchToSignup = document.getElementById('switchToSignup');
	const switchToLogin = document.getElementById('switchToLogin');
	const videoGrid = document.getElementById('videoGrid');
	const uploadArea = document.getElementById('uploadArea');
	const videoUpload = document.getElementById('videoUpload');
	const videoPreview = document.getElementById('videoPreview');
	const uploadPreview = document.getElementById('uploadPreview');
	const removeVideo = document.getElementById('removeVideo');
	const uploadBtn = document.getElementById('uploadBtn');
	const modalVideoPlayer = document.getElementById('modalVideoPlayer');
	const purchaseBtn = document.getElementById('purchaseBtn');
	const loginFormMessages = document.getElementById('loginFormMessages');
	const signupFormMessages = document.getElementById('signupFormMessages');
	const uploadFormMessages = document.getElementById('uploadFormMessages');
	const viewMoreBtn = document.getElementById('viewMoreBtn');
	const aboutLearnMoreBtn = document.getElementById('aboutLearnMoreBtn');
	const ctaSignupBtn = document.getElementById('ctaSignupBtn');
	const pricingBtns = document.querySelectorAll('.pricing-btn');
	const newsletterForm = document.getElementById('newsletterForm');
	const uploadProgress = document.getElementById('uploadProgress');
	const progressBar = document.getElementById('progressBar');
	const progressText = document.getElementById('progressText');
	const wrestlersBtn = document.getElementById('wrestlersBtn');
	const wrestlersDropdown = document.getElementById('wrestlersDropdown');
	const wrestlersGrid = document.getElementById('wrestlersGrid');
	const customOrderBtn = document.getElementById('customOrderBtn');
	const customOrderDropdown = document.getElementById('customOrderDropdown');
	const customOrderForm = document.getElementById('customOrderForm');
	const customOrderPrice = document.getElementById('customOrderPrice');
	const customCategory = document.getElementById('customCategory');
	const timeframeOptions = document.querySelectorAll('input[name="timeframe"]');
	const customDescription = document.getElementById('customDescription');

	// Sample video data with thumbnails
	const videos = [
	{
	id: 1,
	title: "Traditional Kenyan Wrestling Techniques",
	description: "Authentic wrestling techniques from Kenya's rich wrestling tradition. Learn the moves that have been passed down for generations in this comprehensive tutorial featuring champion wrestlers from across Kenya.",
	duration: "12:45",
	price: "$4.99",
	thumbnail: "https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
	videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4",
	isPaid: true,
	views: "1.2K",
	category: "traditional",
	featured: true
	},
	{
	id: 2,
	title: "Modern Kenyan Wrestling Techniques",
	description: "Contemporary wrestling moves from across Kenya, blending traditional styles with modern athleticism. Perfect for competitors looking to expand their repertoire with techniques from different regions.",
	duration: "18:30",
	price: "$5.99",
	thumbnail: "https://images.unsplash.com/photo-1540747913346-19e32dc3e97e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1605&q=80",
	videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4",
	isPaid: true,
	views: "2.5K",
	category: "modern",
	featured: true
	},
	{
	id: 3,
	title: "Wrestling Training Camp in Kenya",
	description: "Behind the scenes at a wrestling training camp in Nairobi. See how champions are made through rigorous training and traditional methods. Follow a day in the life of aspiring wrestlers.",
	duration: "25:15",
	price: "$6.99",
	thumbnail: "https://images.unsplash.com/photo-1540206395-68808572332f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1626&q=80",
	videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4",
	isPaid: true,
	views: "3.1K",
	category: "training",
	featured: true
	},
	{
	id: 4,
	title: "National Wrestling Championship Highlights",
	description: "Highlights from the national championship featuring the best wrestlers from across Kenya. Witness incredible athleticism and traditional techniques in this action-packed compilation of the season's best matches.",
	duration: "45:20",
	price: "$7.99",
	thumbnail: "https://images.unsplash.com/photo-1518611012118-696072aa579a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
	videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4",
	isPaid: true,
	views: "5.7K",
	category: "competition",
	featured: true
	},
	{
	id: 5,
	title: "The History of Kenyan Wrestling",
	description: "Explore the origins and evolution of wrestling in Kenya. This documentary features interviews with veteran wrestlers and historians from different communities across the country.",
	duration: "32:10",
	price: "$5.49",
	thumbnail: "https://images.unsplash.com/photo-1541534741688-6078c6bfb5c5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1469&q=80",
	videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4",
	isPaid: true,
	views: "2.3K",
	category: "documentary",
	featured: true
	},
	{
	id: 6,
	title: "Basic Wrestling Drills for Beginners",
	description: "Fundamental drills to build strength, agility, and technique for aspiring wrestlers of all ages. Perfect for coaches and athletes looking to master the basics of Kenyan wrestling styles.",
	duration: "15:45",
	price: "FREE",
	thumbnail: "https://images.unsplash.com/photo-1571019614242-c955b17d1b8a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80",
	videoUrl: "https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4",
	isPaid: false,
	views: "8.9K",
	category: "training",
	featured: true
	}
	];
	// Sample wrestler data
	const wrestlers = [
	{
	id: 1,
	name: "Mitchell",
	region: "Nairobi",
	specialty: "Submission Wrestling",
	image: "https://huggingface.co/spaces/blackdimensionafrica/kenyan-wrestling-glory-hub/resolve/main/images/mitchell,21,65.jpg.jpg",
	wins: 28,
	losses: 12,
	videos: 8,
	description: "Mitchell is a submission specialist from Nairobi. Her technical prowess and knowledge of joint locks make her a formidable opponent.",
	featured: true
	},
	{
	id: 2,
	name: "Shiphrah",
	region: "Nairobi",
	specialty: "Strength & Power",
	image: "https://huggingface.co/spaces/blackdimensionafrica/kenyan-wrestling-glory-hub/resolve/main/images/shiphrah.jpg",
	wins: 39,
	losses: 6,
	videos: 10,
	description: "Shiphrah is known for her incredible strength and powerful takedowns. This Nairobi-based wrestler dominates her opponents with raw power and technique.",
	featured: true
	},
	{
	id: 3,
	name: "Brigit",
	region: "Nairobi",
	specialty: "Speed & Agility",
	image: "http://static.photos/sport/200x200/42",
	wins: 31,
	losses: 9,
	videos: 7,
	description: "Irene's lightning-fast movements and agility make her one of Nairobi's most exciting wrestlers to watch. She specializes in evasive techniques.",
	featured: true
	},
	{
	id: 4,
	name: "Terry",
	region: "Nairobi",
	specialty: "Technical Wrestling",
	image: "https://huggingface.co/spaces/blackdimensionafrica/kenyan-wrestling-glory-hub/resolve/main/images/shiprah22.jpg.jpg",
	wins: 26,
	losses: 14,
	videos: 9,
	description: "Terry is Nairobi's technical master with a deep understanding of wrestling fundamentals. Her precision and technique are unmatched.",
	featured: true
	},
	{
	id: 5,
	name: "Ruth",
	region: "Nairobi",
	specialty: "All-Rounder",
	image: "https://huggingface.co/spaces/blackdimensionafrica/kenyan-wrestling-glory-hub/resolve/main/images/ruth,22,58c,5.8.jpg.jpg",
	wins: 32,
	losses: 10,
	videos: 12,
	description: "Ruth is Nairobi's versatile wrestler with balanced skills in both offense and defense. Her adaptability makes her a tough competitor in any match.",
	featured: true
	},
	{
	id: 6,
	name: "Pixy",
	region: "Nairobi",
	specialty: "Modern Techniques",
	image: "https://huggingface.co/spaces/blackdimensionafrica/kenyan-wrestling-glory-hub/resolve/main/images/IMG-20250714-WA0017(1).jpg",
	wins: 35,
	losses: 5,
	videos: 12,
	description: "Pixy combines traditional wrestling with modern athletic techniques. Based in Nairobi, she is known for her agility and strategic approach to matches.",
	featured: true
	},
	{
	id: 7,
	name: "Faith",
	region: "Nairobi",
	specialty: "Traditional Wrestling",
	image: "https://huggingface.co/spaces/blackdimensionafrica/kenyan-wrestling-glory-hub/resolve/main/images/IMG-20250714-WA0014.jpg",
	wins: 42,
	losses: 8,
	videos: 15,
	description: "Faith is a champion wrestler from Nairobi with over 10 years of experience in traditional Kenyan wrestling. She specializes in ground techniques and submissions.",
	featured: true
	}
	];
	// Current user state
	let currentUser = null;

	// Function to show form message
	function showFormMessage(element, type, message) {
	const messageDiv = document.createElement('div');
	messageDiv.className = `form-message ${type}`;
	messageDiv.innerHTML = message;
	element.innerHTML = '';
	element.appendChild(messageDiv);

	if (type === 'success') {
	setTimeout(() => {
	messageDiv.style.opacity = '0';
	setTimeout(() => {
	element.removeChild(messageDiv);
	}, 300);
	}, 5000);
	}
	}

	// Function to calculate custom order price
	function calculateCustomOrderPrice() {
	const category = customCategory.value;
	const timeframe = document.querySelector('input[name="timeframe"]:checked');

	if (!category \|\| !timeframe) {
	customOrderPrice.textContent = 'Estimated Price: $0';
	return;
	}

	// Base price based on category
	let basePrice = 0;
	switch(category) {
	case 'traditional':
	case 'modern':
	basePrice = 50;
	break;
	case 'training':
	case 'competition':
	basePrice = 75;
	break;
	case 'documentary':
	basePrice = 100;
	break;
	case 'catfights':
	case 'submission':
	basePrice = 60;
	break;
	default:
	basePrice = 50;
	}

	// Multiply by timeframe
	const timeframeValue = parseInt(timeframe.value);
	const totalPrice = basePrice * (timeframeValue / 5); // 5 minutes is the base

	customOrderPrice.textContent = `Estimated Price: $${totalPrice.toFixed(2)}`;
	}

	// Function to load videos with thumbnails
	function loadVideos() {
	videoGrid.innerHTML = '';

	const featuredVideos = videos.filter(video => video.featured);

	featuredVideos.forEach(video => {
	const videoCard = document.createElement('div');
	videoCard.className = 'video-card';
	videoCard.innerHTML = `
	${video.isPaid ? '<div class="video-badge">Premium</div>' : ''}
	<div class="video-thumbnail">
	<img src="${video.thumbnail}" alt="${video.title}" loading="lazy">
	<div class="play-icon">
	<i class="fas fa-play"></i>
	</div>
	<span class="duration-badge">${video.duration}</span>
	</div>
	<div class="video-info">
	<h3 class="video-title">${video.title}</h3>
	<div class="video-meta">
	<span class="video-views"><i class="fas fa-eye"></i> ${video.views}</span>
	${video.isPaid ? `<span class="video-price">${video.price}</span>` : '<span class="video-price">FREE</span>'}
	</div>
	</div>
	`;

	videoCard.addEventListener('click', () => openVideoModal(video));
	videoGrid.appendChild(videoCard);
	});
	}

	// Function to load wrestlers for dropdown
	function loadWrestlersDropdown() {
	wrestlersGrid.innerHTML = '';

	wrestlers.forEach(wrestler => {
	const wrestlerCard = document.createElement('div');
	wrestlerCard.className = 'wrestler-card';
	wrestlerCard.innerHTML = `
	<div class="wrestler-avatar">
	<img src="${wrestler.image}" alt="${wrestler.name}">
	</div>
	<div class="wrestler-name">${wrestler.name}</div>
	<div class="wrestler-region">${wrestler.region}</div>
	`;

	wrestlerCard.addEventListener('click', () => {
	document.querySelector('#wrestlers').scrollIntoView({
	behavior: 'smooth'
	});
	wrestlersDropdown.classList.remove('active');
	});

	wrestlersGrid.appendChild(wrestlerCard);
	});
	}

	// Open video modal
	function openVideoModal(video) {
	if (video.isPaid && !currentUser) {
	showFormMessage(loginFormMessages, 'error', 'Please login to purchase this video');
	loginModal.style.display = 'block';
	return;
	}

	document.getElementById('modalVideoTitle').textContent = video.title;
	document.getElementById('modalVideoDescription').textContent = video.description;
	document.getElementById('modalVideoDuration').textContent = `Duration: ${video.duration}`;
	document.getElementById('modalVideoPrice').textContent = video.isPaid ? `Price: ${video.price}` : 'FREE';
	modalVideoPlayer.src = video.videoUrl;

	if (video.isPaid && !(currentUser?.purchasedVideos?.includes(video.id) \|\| !currentUser)) {
	purchaseBtn.style.display = 'block';
	purchaseBtn.textContent = `Purchase for ${video.price}`;
	modalVideoPlayer.controls = false;
	} else {
	purchaseBtn.style.display = 'none';
	modalVideoPlayer.controls = true;
	}

	videoModal.style.display = 'block';
	}

	// Update UI based on user state
	function updateUserUI() {
	if (currentUser) {
	authButtons.style.display = 'none';
	userMenu.style.display = 'block';
	userAvatar.textContent = currentUser.name.charAt(0).toUpperCase();
	} else {
	authButtons.style.display = 'flex';
	userMenu.style.display = 'none';
	}
	}

	// Toggle dropdown menu
	function toggleDropdown() {
	dropdownMenu.classList.toggle('active');
	}

	// Toggle wrestlers dropdown
	function toggleWrestlersDropdown() {
	wrestlersDropdown.classList.toggle('active');
	// Close custom order dropdown if open
	customOrderDropdown.classList.remove('active');
	}

	// Toggle custom order dropdown
	function toggleCustomOrderDropdown() {
	customOrderDropdown.classList.toggle('active');
	// Close wrestlers dropdown if open
	wrestlersDropdown.classList.remove('active');
	}

	// Close dropdown when clicking outside
	function closeDropdown(e) {
	if (!userMenu.contains(e.target)) {
	dropdownMenu.classList.remove('active');
	}
	if (!wrestlersBtn.contains(e.target) && !wrestlersDropdown.contains(e.target)) {
	wrestlersDropdown.classList.remove('active');
	}
	if (!customOrderBtn.contains(e.target) && !customOrderDropdown.contains(e.target)) {
	customOrderDropdown.classList.remove('active');
	}
	}

	// Simulate upload progress
	function simulateAdminUploadProgress() {
	let progress = 0;
	adminUploadProgress.style.display = 'block';

	const interval = setInterval(() => {
	progress += Math.random() * 10;
	if (progress >= 100) {
	progress = 100;
	clearInterval(interval);
	setTimeout(() => {
	adminUploadProgress.style.display = 'none';
	}, 1000);
	}

	adminProgressBar.style.width = `${progress}%`;
	adminProgressText.textContent = `${Math.round(progress)}% uploaded`;
	}, 200);
	}

	function checkAdminStatus() {
	const isAdmin = currentUser && currentUser.email === 'admin@kenyanwrestling.com';
	if (isAdmin) {
	document.getElementById('adminLoginPrompt').style.display = 'none';
	document.getElementById('adminUploadContainer').style.display = 'block';
	} else {
	document.getElementById('adminLoginPrompt').style.display = 'block';
	document.getElementById('adminUploadContainer').style.display = 'none';
	}
	}
	// Setup event listeners
	function setupEventListeners() {
	// Scroll down button
	scrollDown.addEventListener('click', () => {
	document.querySelector('#videos').scrollIntoView({
	behavior: 'smooth'
	});
	});

	// Browse videos button
	browseVideosBtn.addEventListener('click', () => {
	document.querySelector('#videos').scrollIntoView({
	behavior: 'smooth'
	});
	});

	// Learn more button
	learnMoreBtn.addEventListener('click', () => {
	document.querySelector('#about').scrollIntoView({
	behavior: 'smooth'
	});
	});

	// View more videos button
	viewMoreBtn.addEventListener('click', () => {
	document.querySelector('#videos').scrollIntoView({
	behavior: 'smooth'
	});
	});

	// About learn more button
	aboutLearnMoreBtn.addEventListener('click', () => {
	document.querySelector('#about').scrollIntoView({
	behavior: 'smooth'
	});
	});

	// CTA signup button
	ctaSignupBtn.addEventListener('click', () => {
	signupModal.style.display = 'block';
	});

	// Pricing buttons
	pricingBtns.forEach(btn => {
	btn.addEventListener('click', () => {
	if (!currentUser) {
	showFormMessage(signupFormMessages, 'info', 'Please sign up to select a plan');
	signupModal.style.display = 'block';
	} else {
	const plan = btn.getAttribute('data-plan');
	showFormMessage(uploadFormMessages, 'success', `Successfully subscribed to the ${plan} plan!`);
	}
	});
	});

	// Newsletter form
	newsletterForm.addEventListener('submit', (e) => {
	e.preventDefault();
	const email = newsletterForm.querySelector('input[type="email"]').value;
	showFormMessage(uploadFormMessages, 'success', `Thank you for subscribing with ${email}!`);
	newsletterForm.reset();
	});

	// User avatar click
	userAvatar.addEventListener('click', toggleDropdown);

	// Wrestlers button click
	wrestlersBtn.addEventListener('click', (e) => {
	e.preventDefault();
	toggleWrestlersDropdown();
	});

	// Custom order button click
	customOrderBtn.addEventListener('click', (e) => {
	e.preventDefault();
	toggleCustomOrderDropdown();
	});

	document.addEventListener('click', closeDropdown);

	// Custom order form events
	customCategory.addEventListener('change', calculateCustomOrderPrice);
	timeframeOptions.forEach(option => {
	option.addEventListener('change', calculateCustomOrderPrice);
	});

	// Custom order form submission
	customOrderForm.addEventListener('submit', (e) => {
	e.preventDefault();

	if (!currentUser) {
	showFormMessage(signupFormMessages, 'error', 'Please login to place a custom order');
	signupModal.style.display = 'block';
	customOrderDropdown.classList.remove('active');
	return;
	}

	const category = customCategory.value;
	const timeframe = document.querySelector('input[name="timeframe"]:checked');
	const description = customDescription.value;

	if (!category \|\| !timeframe) {
	showFormMessage(uploadFormMessages, 'error', 'Please select a category and timeframe');
	return;
	}

	// Calculate price
	calculateCustomOrderPrice();
	const price = customOrderPrice.textContent.replace('Estimated Price: $', '');

	// In a real app, this would send the custom order request to the backend
	showFormMessage(uploadFormMessages, 'success', `Custom order submitted successfully! Our team will contact you within 24 hours to discuss your ${timeframe.value}-minute ${category} video. Estimated cost: $${price}`);

	// Reset form
	customOrderForm.reset();
	customOrderPrice.textContent = 'Estimated Price: $0';
	customOrderDropdown.classList.remove('active');
	});

	// Logout button
	logoutBtn.addEventListener('click', (e) => {
	e.preventDefault();
	currentUser = null;
	updateUserUI();
	dropdownMenu.classList.remove('active');
	showFormMessage(loginFormMessages, 'success', 'You have been logged out successfully');
	});

	// Modal toggle
	loginBtn.addEventListener('click', () => {
	loginModal.style.display = 'block';
	loginFormMessages.innerHTML = '';
	});

	signupBtn.addEventListener('click', () => {
	signupModal.style.display = 'block';
	signupFormMessages.innerHTML = '';
	});

	// Close modals
	closeModals.forEach(btn => {
	btn.addEventListener('click', () => {
	loginModal.style.display = 'none';
	signupModal.style.display = 'none';
	videoModal.style.display = 'none';
	modalVideoPlayer.pause();
	});
	});

	// Switch between login/signup
	switchToSignup.addEventListener('click', (e) => {
	e.preventDefault();
	loginModal.style.display = 'none';
	signupModal.style.display = 'block';
	signupFormMessages.innerHTML = '';
	});

	switchToLogin.addEventListener('click', (e) => {
	e.preventDefault();
	signupModal.style.display = 'none';
	loginModal.style.display = 'block';
	loginFormMessages.innerHTML = '';
	});

	// Close modal when clicking outside
	window.addEventListener('click', (e) => {
	if (e.target === loginModal) {
	loginModal.style.display = 'none';
	}
	if (e.target === signupModal) {
	signupModal.style.display = 'none';
	}
	if (e.target === videoModal) {
	videoModal.style.display = 'none';
	modalVideoPlayer.pause();
	}
	});
	// Admin upload area click
	adminUploadArea.addEventListener('click', () => adminVideoUpload.click());

	// Admin video upload change
	adminVideoUpload.addEventListener('change', (e) => {
	const file = e.target.files[0];
	if (file) {
	if (file.size > 100 * 1024 * 1024) { // 100MB limit
	showFormMessage(adminUploadFormMessages, 'error', 'Video file size should be less than 100MB');
	return;
	}

	if (!file.type.includes('video/')) {
	showFormMessage(adminUploadFormMessages, 'error', 'Please upload a valid video file');
	return;
	}

	const videoURL = URL.createObjectURL(file);
	adminVideoPreview.src = videoURL;
	adminUploadPreview.style.display = 'block';
	adminUploadFormMessages.innerHTML = '';
	}
	});

	// Admin remove video
	adminRemoveVideo.addEventListener('click', (e) => {
	e.stopPropagation();
	adminVideoPreview.src = '';
	adminUploadPreview.style.display = 'none';
	adminVideoUpload.value = '';
	});

	// Admin login button
	adminLoginBtn.addEventListener('click', () => {
	loginModal.style.display = 'block';
	loginFormMessages.innerHTML = '';
	});
	// Admin upload button
	adminUploadBtn.addEventListener('click', () => {
	const title = document.getElementById('adminVideoTitle').value.trim();
	const price = document.getElementById('adminVideoPrice').value;
	const description = document.getElementById('adminVideoDescription').value.trim();
	const category = document.getElementById('adminVideoCategory').value;

	if (!title \|\| !price \|\| !description \|\| !category \|\| !adminVideoUpload.files[0]) {
	showFormMessage(adminUploadFormMessages, 'error', 'Please fill all fields and select a video');
	return;
	}

	// Check if user is admin
	const isAdmin = currentUser && currentUser.email === 'admin@kenyanwrestling.com';

	if (!isAdmin) {
	showFormMessage(adminUploadFormMessages, 'error', 'Only admin users can upload videos');
	return;
	}

	// Disable upload button during upload
	adminUploadBtn.disabled = true;
	adminUploadBtn.textContent = 'Uploading...';

	// Simulate upload progress
	simulateAdminUploadProgress();
	// In a real app, this would upload to a backend
	setTimeout(() => {
	showFormMessage(adminUploadFormMessages, 'success', 'Video uploaded successfully as admin!');
	// Reset form
	document.getElementById('adminVideoTitle').value = '';
	document.getElementById('adminVideoPrice').value = '';
	document.getElementById('adminVideoDescription').value = '';
	document.getElementById('adminVideoCategory').value = '';
	adminVideoUpload.value = '';
	adminUploadPreview.style.display = 'none';

	// Re-enable upload button
	adminUploadBtn.disabled = false;
	adminUploadBtn.textContent = 'Upload Video';
	}, 3000);
	});

	// Purchase button
	purchaseBtn.addEventListener('click', () => {
	if (!currentUser) {
	showFormMessage(loginFormMessages, 'error', 'Please login to purchase videos');
	loginModal.style.display = 'block';
	videoModal.style.display = 'none';
	return;
	}

	// In a real app, this would process payment
	const videoTitle = document.getElementById('modalVideoTitle').textContent;
	const videoPrice = document.getElementById('modalVideoPrice').textContent.replace('Price: ', '');
	showFormMessage(uploadFormMessages, 'success', `Payment of ${videoPrice} processed successfully for "${videoTitle}"! Enjoy your video.`);

	// Mark video as purchased for this user
	const videoId = videos.find(v => v.title === videoTitle)?.id;
	if (videoId) {
	if (!currentUser.purchasedVideos) {
	currentUser.purchasedVideos = [];
	}
	currentUser.purchasedVideos.push(videoId);
	}

	modalVideoPlayer.controls = true;
	purchaseBtn.style.display = 'none';
	});

	// Form submissions
	document.getElementById('loginForm').addEventListener('submit', (e) => {
	e.preventDefault();
	const email = document.getElementById('loginEmail').value.trim();
	const password = document.getElementById('loginPassword').value;

	if (!email \|\| !password) {
	showFormMessage(loginFormMessages, 'error', 'Please fill in all fields');
	return;
	}

	// In a real app, this would authenticate with backend
	currentUser = {
	email,
	name: 'Test User',
	// Simulate some purchased videos
	purchasedVideos: [1, 3]
	};

	showFormMessage(loginFormMessages, 'success', `Welcome back, ${currentUser.name}!`);
	loginModal.style.display = 'none';
	// Update UI to reflect logged in state
	updateUserUI();
	checkAdminStatus();
	checkAdminStatus();
	});

	document.getElementById('signupForm').addEventListener('submit', (e) => {
	e.preventDefault();
	const name = document.getElementById('signupName').value.trim();
	const email = document.getElementById('signupEmail').value.trim();
	const password = document.getElementById('signupPassword').value;
	const confirm = document.getElementById('signupConfirm').value;

	if (!name \|\| !email \|\| !password \|\| !confirm) {
	showFormMessage(signupFormMessages, 'error', 'Please fill in all fields');
	return;
	}

	if (password !== confirm) {
	showFormMessage(signupFormMessages, 'error', 'Passwords do not match');
	return;
	}

	if (password.length < 6) {
	showFormMessage(signupFormMessages, 'error', 'Password must be at least 6 characters');
	return;
	}

	// In a real app, this would register with backend
	currentUser = {
	email,
	name
	};

	showFormMessage(signupFormMessages, 'success', `Welcome to Kenyan Wrestling Studio, ${name}!`);
	signupModal.style.display = 'none';

	// Update UI to reflect logged in state
	updateUserUI();
	});

	// FAQ accordion
	const faqQuestions = document.querySelectorAll('.faq-question');
	faqQuestions.forEach(question => {
	question.addEventListener('click', () => {
	const item = question.parentElement;
	const isActive = item.classList.contains('active');

	// Close all items
	document.querySelectorAll('.faq-item').forEach(faqItem => {
	faqItem.classList.remove('active');
	});

	// Open clicked item if it wasn't active
	if (!isActive) {
	item.classList.add('active');
	}
	});
	});

	// Smooth scrolling for navigation links
	document.querySelectorAll('nav a').forEach(anchor => {
	anchor.addEventListener('click', function(e) {
	if (this.getAttribute('href').startsWith('#')) {
	e.preventDefault();
	const targetId = this.getAttribute('href');
	const targetSection = document.querySelector(targetId);

	if (targetSection) {
	targetSection.scrollIntoView({
	behavior: 'smooth'
	});
	}
	}
	});
	});
	}

	// Initialize the app with thumbnails
	document.addEventListener('DOMContentLoaded', () => {
	loadVideos();
	loadWrestlersDropdown();
	setupEventListeners();
	updateUserUI();
	checkAdminStatus();
	// Animate stats counting
	const stats = [
	{ element: document.getElementById('videoCount'), target: 850, duration: 2000 },
	{ element: document.getElementById('userCount'), target: 12500, duration: 2000 },
	{ element: document.getElementById('creatorCount'), target: 350, duration: 2000 },
	{ element: document.getElementById('countryCount'), target: 22, duration: 2000 }
	];

	stats.forEach(stat => {
	const start = parseInt(stat.element.textContent.replace(/[^0-9]/g, ''));
	const increment = stat.target / (stat.duration / 16);
	let current = start;

	const timer = setInterval(() => {
	current += increment;
	if (current >= stat.target) {
	clearInterval(timer);
	current = stat.target;
	}
	stat.element.textContent = Math.floor(current) + (stat.element.id === 'countryCount' ? '+' : '+');
	}, 16);
	});
	});
	</script>
	</body>
	</html>