import 'package:flutter/material.

dart';
import 'package:weqa/ui/widgets/social_links.dart';

class HomePage extends StatelessWidget {

const HomePage({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;

return Scaffold(
body: Stack(
children: [
// Background Image
Positioned.fill(
child: Image.asset(
'assets/images/pexels-vishnurnair-1105666.jpg', // Background image path
fit: BoxFit.cover,
),
),
// Semi-Transparent Overlay
Positioned.fill(
child: Container(
color: Colors.black.withOpacity(0.6),
),
),
// Main Content
LayoutBuilder(
builder: (context, constraints) {
return SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 40.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Navigation Bar
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"LOGO",
style: TextStyle(
fontSize: size.width * 0.03,
fontWeight: FontWeight.bold,
 color: Colors.yellow,
),
),
if (size.width > 600)
Row(
children: [
_navLink("Home"),
_navLink("About"),
_navLink("Contact"),
_navLink("Register"),
_signInButton(),
],
)
else
IconButton(
icon: const Icon(Icons.menu, color: Colors.white),
onPressed: () {
// Handle navigation drawer logic here
},
),
],
),
const SizedBox(height: 50),
// Hero Section with Vertical Social Media Icons
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: FittedBox(
fit: BoxFit.scaleDown,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Music",
style: TextStyle(
fontFamily: 'NeueMontreal',
color: Colors.white,
fontSize: size.width * 0.03,
fontWeight: FontWeight.w700,
),
),
Text(
"Where Requests\nMeet Rhythm",
 style: TextStyle(
fontFamily: 'NeueMontreal',
color: Colors.white,
fontSize: size.width * 0.05,
fontWeight: FontWeight.w700,
),
),
],
),
),
),
const SizedBox(width: 20),
// Vertical Social Media Icons
const SocialLinks(isVertical: true),
],
),
const SizedBox(height: 16),
Text(
"Personalize your music experience, explore the music selection at your local or
events venue and request your favorite songs from your favorite DJs wherever you go.",
style: TextStyle(
fontFamily: 'NeueMontreal',
color: Colors.white,
fontSize: 14,
fontWeight: FontWeight.w500,
letterSpacing: 0.6,
),
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.yellow,
foregroundColor: Colors.black,
padding: EdgeInsets.symmetric(
horizontal: size.width * 0.04,
vertical: size.height * 0.02,
),
),
child: const Text(
"Feel the Music!",
style: TextStyle(
fontFamily: 'NeueMontreal',
color: Colors.black,
 fontSize: 14,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.italic,
letterSpacing: 0.6,
),
),
),
const SizedBox(height: 40),
// Media Section
Wrap(
spacing: 16,
runSpacing: 16,
children: [
_mediaCard('assets/images/pexels-orione-conceicao-1531154-8663203.jpg',
size),
_mediaCard('assets/images/pexels-yankrukov-9008836.jpg', size),
],
),
],
),
),
);
},
),
],
),
);
}

Widget _navLink(String text) {

return Padding(
padding: const EdgeInsets.symmetric(horizontal: 10),
child: Text(
text,
style: const TextStyle(fontSize: 16, color: Colors.white),
),
);
}

Widget _signInButton() {
return OutlinedButton(
onPressed: () {},
style: OutlinedButton.styleFrom(
side: const BorderSide(color: Colors.yellow),
 padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
),
child: const Text(
"Sign In",
style: TextStyle(color: Colors.yellow),
),
);
}

Widget _mediaCard(String imagePath, Size size) {

return Container(
width: size.width > 600 ? size.width * 0.3 : size.width * 0.9,
height: size.height * 0.2,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12),
image: DecorationImage(
image: AssetImage(imagePath),
fit: BoxFit.cover,
),
),
);
}
}