export default function BadmintonHubLanding() {
  const courts = Array.from({ length: 6 }, (_, i) => ({
    name: `Sân ${i + 1}`,
    standard: '80.000đ/giờ',
    peak: '120.000đ/giờ',
    status: i % 2 === 0 ? 'Còn trống' : 'Sắp kín'
  }));

  return (
    <div className='min-h-screen bg-white text-slate-800'>
      <nav className='sticky top-0 z-50 bg-white/90 backdrop-blur border-b'>
        <div className='max-w-7xl mx-auto px-6 py-4 flex justify-between items-center'>
          <h1 className='text-2xl font-bold text-green-600'>🏸 Badminton Hub</h1>
          <div className='hidden md:flex gap-6'>
            #courtsSân</a>
            <a href='#pricing'>Bảng giá</a>
            <a href='#services'>Dịch vụ</a>
            <a href='#contact'>Liên hệ</a>
          </div>
          <button className='bg-green-500 text-white px-5 py-2 rounded-2xl'>Đặt Sân Ngay</button>
        </div>
      </nav>

      <section className='bg-slate-900 text-white py-24'>
        <div className='max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-10 items-center'>
          <div>
            <h2 className='text-5xl font-bold mb-6'>Đặt Sân Cầu Lông Dễ Dàng – Chơi Hết Mình Mỗi Ngày</h2>
            <p className='text-lg text-slate-300 mb-8'>Sân tiêu chuẩn thi đấu, đặt lịch online nhanh chóng, đầy đủ nước uống và phụ kiện.</p>
            <div className='flex gap-4'>
              <button className='bg-green-500 px-6 py-3 rounded-2xl'>Đặt Sân Ngay</button>
              <button className='border border-white px-6 py-3 rounded-2xl'>Xem Bảng Giá</button>
            </div>
          </div>
          <div>
            <img className='rounded-3xl shadow-2xl' src='https://images.unsplash.com/photo-1546519638-68e109498ffc?q=80&w=1200' />
          </div>
        </div>
      </section>

      <section className='py-20 max-w-7xl mx-auto px-6'>
        <div className='grid md:grid-cols-4 gap-6'>
          {[
            '🏸 Sân Tiêu Chuẩn',
            '📅 Đặt Lịch Nhanh',
            '🚗 Bãi Đỗ Xe Rộng',
            '🛒 Cửa Hàng Phụ Kiện'
          ].map((item) => (
            <div key={item} className='p-6 rounded-3xl shadow-lg border'>
              <h3 className='font-bold text-xl'>{item}</h3>
            </div>
          ))}
        </div>
      </section>

      <section id='courts' className='bg-slate-50 py-20'>
        <div className='max-w-7xl mx-auto px-6'>
          <h2 className='text-4xl font-bold mb-10'>Hệ Thống Sân</h2>
          <div className='grid md:grid-cols-3 gap-6'>
            {courts.map((court) => (
              <div key={court.name} className='bg-white rounded-3xl overflow-hidden shadow-lg'>
                <img src='https://images.unsplash.com/photo-1626224583764-f87db24ac4ea?q=80&w=1200' />
                <div className='p-6'>
                  <h3 className='font-bold text-xl'>{court.name}</h3>
                  <p className='text-green-600'>{court.status}</p>
                  <p>Giờ thường: {court.standard}</p>
                  <p>Giờ cao điểm: {court.peak}</p>
                  <button className='mt-4 bg-green-500 text-white px-5 py-2 rounded-xl'>Đặt Ngay</button>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section id='pricing' className='py-20 max-w-5xl mx-auto px-6'>
        <h2 className='text-4xl font-bold text-center mb-10'>Bảng Giá</h2>
        <div className='bg-white shadow-xl rounded-3xl p-10'>
          <div className='flex justify-between py-4 border-b'>
            <span>05:00 - 17:00</span><span>80.000đ/giờ</span>
          </div>
          <div className='flex justify-between py-4 border-b'>
            <span>17:00 - 22:00</span><span>120.000đ/giờ</span>
          </div>
          <div className='flex justify-between py-4'>
            <span>Thuê cố định theo tháng</span><span>Liên hệ</span>
          </div>
        </div>
      </section>

      <section id='services' className='bg-slate-50 py-20'>
        <div className='max-w-7xl mx-auto px-6'>
          <h2 className='text-4xl font-bold mb-10'>Dịch Vụ Đi Kèm</h2>
          <div className='grid md:grid-cols-4 gap-6'>
            <div className='bg-white p-6 rounded-3xl shadow'>🥤 Nước giải khát</div>
            <div className='bg-white p-6 rounded-3xl shadow'>🏸 Vợt cầu lông</div>
            <div className='bg-white p-6 rounded-3xl shadow'>🎒 Phụ kiện</div>
            <div className='bg-white p-6 rounded-3xl shadow'>🛠️ Đan vợt</div>
          </div>
        </div>
      </section>

      <section className='py-20 max-w-7xl mx-auto px-6'>
        <div className='bg-gradient-to-r from-green-500 to-green-700 text-white rounded-3xl p-12 text-center'>
          <h2 className='text-4xl font-bold mb-4'>🔥 Giảm 20% Cho Khách Đặt Sân Lần Đầu</h2>
          <button className='bg-white text-green-600 px-6 py-3 rounded-2xl font-bold'>Nhận Ưu Đãi</button>
        </div>
      </section>

      <section id='contact' className='py-20 bg-slate-900 text-white'>
        <div className='max-w-7xl mx-auto px-6 text-center'>
          <h2 className='text-4xl font-bold mb-6'>Sẵn Sàng Ra Sân?</h2>
          <p className='mb-8'>Đặt sân chỉ trong 30 giây và nhận xác nhận ngay lập tức.</p>
          <div className='flex justify-center gap-4 mb-10'>
            <button className='bg-green-500 px-6 py-3 rounded-2xl'>Đặt Sân Ngay</button>
            <button className='border border-white px-6 py-3 rounded-2xl'>Hotline: 0909 123 456</button>
          </div>
          <p>📍 123 Nguyễn Văn A, TP.HCM</p>
          <p>📧 contact@badmintonhub.vn</p>
        </div>
      </section>
    </div>
  );
}