export default function HabibaLandingPage() {
  return (
    <div className="min-h-screen bg-[#041B73] text-white overflow-hidden font-sans">
      {/* Background Effects */}
      <div className="absolute inset-0 bg-[radial-gradient(circle_at_top_right,rgba(37,99,235,0.35),transparent_30%),radial-gradient(circle_at_bottom_left,rgba(59,130,246,0.25),transparent_25%)]"></div>
      <div className="absolute inset-0 opacity-10 bg-[linear-gradient(to_right,#ffffff22_1px,transparent_1px),linear-gradient(to_bottom,#ffffff22_1px,transparent_1px)] bg-[size:60px_60px]"></div>

      {/* Hero Section */}
      <section className="relative z-10 px-6 lg:px-20 pt-10 pb-20">
        <nav className="flex items-center justify-between mb-16">
          <div>
            <h1 className="text-3xl font-black tracking-tight text-yellow-400">Habiba v4.0</h1>
            <p className="text-sm text-blue-100">An Online Learning Platform</p>
          </div>

          <div className="hidden md:flex items-center gap-8 text-sm font-medium text-blue-100">
            <a href="#about" className="hover:text-yellow-400 transition">About</a>
            <a href="#features" className="hover:text-yellow-400 transition">Features</a>
            <a href="#schedule" className="hover:text-yellow-400 transition">Schedule</a>
            <a href="#apply" className="hover:text-yellow-400 transition">Apply</a>
          </div>

          <button className="bg-yellow-400 text-[#041B73] px-5 py-3 rounded-full font-bold shadow-xl hover:scale-105 transition">
            Enroll Now
          </button>
        </nav>

        <div className="grid lg:grid-cols-2 gap-16 items-center">
          <div>
            <div className="inline-flex items-center gap-2 bg-white/10 border border-white/10 rounded-full px-4 py-2 mb-6 backdrop-blur-md">
              <span className="w-2 h-2 rounded-full bg-green-400 animate-pulse"></span>
              <p className="text-sm text-blue-100">6th Batch • Limited Seats Available</p>
            </div>

            <h2 className="text-5xl md:text-7xl font-black leading-tight mb-6">
              Becoming the <span className="text-yellow-400">Best Version</span> of You
            </h2>

            <p className="text-lg text-blue-100 leading-relaxed max-w-xl mb-8">
              Habiba v4.0 is a transformational 11-day online course designed exclusively for girls aged 14–25. Learn Islamic values, develop life skills, and grow through task-based learning experiences.
            </p>

            <div className="flex flex-wrap gap-4 mb-10">
              <button className="bg-yellow-400 text-[#041B73] px-8 py-4 rounded-2xl font-bold shadow-2xl hover:scale-105 transition">
                Apply Today
              </button>

              <button className="border border-white/20 bg-white/5 backdrop-blur-lg px-8 py-4 rounded-2xl font-semibold hover:bg-white/10 transition">
                Download Brochure
              </button>
            </div>

            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
              {[
                ['11 Days', 'Interactive Course'],
                ['14–25', 'Girls Only'],
                ['Task Based', 'Skill Learning'],
                ['₹249', 'Affordable Fee'],
              ].map(([title, subtitle]) => (
                <div key={title} className="bg-white/10 border border-white/10 rounded-2xl p-5 backdrop-blur-lg">
                  <h3 className="text-2xl font-black text-yellow-400">{title}</h3>
                  <p className="text-sm text-blue-100 mt-1">{subtitle}</p>
                </div>
              ))}
            </div>
          </div>

          <div className="relative">
            <div className="absolute -top-8 -right-8 w-32 h-32 bg-yellow-400 rounded-full blur-3xl opacity-30"></div>
            <div className="absolute -bottom-10 left-0 w-40 h-40 bg-blue-400 rounded-full blur-3xl opacity-30"></div>

            <div className="relative bg-gradient-to-br from-blue-600 to-blue-800 rounded-[40px] border border-white/10 shadow-[0_25px_80px_rgba(0,0,0,0.5)] overflow-hidden">
              <img
                src="/mnt/data/habiba v4 2nd.png"
                alt="Habiba Course Poster"
                className="w-full h-full object-cover opacity-90"
              />

              <div className="absolute inset-0 bg-gradient-to-t from-[#041B73] via-transparent to-transparent"></div>

              <div className="absolute bottom-8 left-8 right-8 bg-white/10 border border-white/20 backdrop-blur-xl rounded-3xl p-6">
                <div className="flex items-center justify-between mb-4">
                  <div>
                    <p className="text-sm text-blue-100">Application Deadline</p>
                    <h3 className="text-4xl font-black text-yellow-400">May 14</h3>
                  </div>

                  <div className="bg-yellow-400 text-[#041B73] px-5 py-3 rounded-2xl font-black text-lg shadow-xl">
                    ₹249
                  </div>
                </div>

                <button className="w-full bg-white text-[#041B73] py-4 rounded-2xl font-bold hover:scale-[1.02] transition">
                  Reserve Your Seat
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Features Section */}
      <section id="features" className="relative z-10 px-6 lg:px-20 py-24">
        <div className="text-center mb-16">
          <p className="text-yellow-400 uppercase tracking-[0.3em] text-sm font-bold mb-4">Course Highlights</p>
          <h2 className="text-4xl md:text-6xl font-black mb-6">Why Join Habiba?</h2>
          <p className="text-blue-100 max-w-2xl mx-auto text-lg">
            Carefully crafted sessions combining spirituality, productivity, confidence building, and real-life skill development.
          </p>
        </div>

        <div className="grid md:grid-cols-2 xl:grid-cols-4 gap-8">
          {[
            {
              title: 'Islamic Values',
              desc: 'Practical guidance to apply Islamic teachings in everyday life.',
              icon: '☪️',
            },
            {
              title: 'Task-Based Learning',
              desc: 'Interactive assignments and activities to ensure real growth.',
              icon: '📘',
            },
            {
              title: 'Skill Development',
              desc: 'Build communication, productivity, and self-confidence.',
              icon: '🚀',
            },
            {
              title: 'Supportive Community',
              desc: 'Connect with like-minded girls focused on self-improvement.',
              icon: '💙',
            },
          ].map((item) => (
            <div
              key={item.title}
              className="group bg-white/10 border border-white/10 rounded-3xl p-8 backdrop-blur-xl hover:-translate-y-2 transition duration-300"
            >
              <div className="w-16 h-16 rounded-2xl bg-yellow-400 text-3xl flex items-center justify-center mb-6 shadow-xl group-hover:rotate-6 transition">
                {item.icon}
              </div>

              <h3 className="text-2xl font-bold mb-4">{item.title}</h3>
              <p className="text-blue-100 leading-relaxed">{item.desc}</p>
            </div>
          ))}
        </div>
      </section>

      {/* Schedule */}
      <section id="schedule" className="relative z-10 px-6 lg:px-20 py-24">
        <div className="grid lg:grid-cols-2 gap-12 items-center">
          <div>
            <p className="text-yellow-400 uppercase tracking-[0.3em] text-sm font-bold mb-4">Course Timeline</p>
            <h2 className="text-4xl md:text-5xl font-black mb-6">
              11 Days of Purposeful Transformation
            </h2>
            <p className="text-blue-100 text-lg leading-relaxed mb-10">
              Each day includes engaging sessions, reflective tasks, mentorship, and skill-building workshops designed to help participants grow spiritually and personally.
            </p>

            <div className="space-y-6">
              {[
                'Daily live interactive sessions',
                'Practical assignments & reflections',
                'Confidence and communication training',
                'Islamic lifestyle & mindset development',
              ].map((point) => (
                <div key={point} className="flex items-center gap-4">
                  <div className="w-10 h-10 rounded-full bg-yellow-400 text-[#041B73] flex items-center justify-center font-black">
                    ✓
                  </div>
                  <p className="text-lg text-blue-50">{point}</p>
                </div>
              ))}
            </div>
          </div>

          <div className="bg-white/10 border border-white/10 backdrop-blur-xl rounded-[40px] p-10 shadow-2xl">
            <div className="flex items-center justify-between mb-10">
              <div>
                <p className="text-blue-100">Course Starts</p>
                <h3 className="text-5xl font-black text-yellow-400">May 14</h3>
              </div>

              <div className="bg-blue-500/20 border border-blue-300/20 px-6 py-4 rounded-2xl">
                <p className="text-sm text-blue-100">Duration</p>
                <h4 className="text-2xl font-bold">11 Days</h4>
              </div>
            </div>

            <div className="space-y-5">
              {[
                ['Age Group', '14–25'],
                ['Mode', 'Online'],
                ['Batch', '6th Batch'],
                ['Language', 'Malayalam'],
                ['Fee', '₹249 Only'],
              ].map(([label, value]) => (
                <div key={label} className="flex items-center justify-between border-b border-white/10 pb-4">
                  <p className="text-blue-100">{label}</p>
                  <h4 className="text-xl font-bold">{value}</h4>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section id="apply" className="relative z-10 px-6 lg:px-20 pb-24">
        <div className="relative overflow-hidden bg-gradient-to-r from-yellow-400 to-yellow-300 rounded-[40px] p-10 md:p-16 text-[#041B73] shadow-[0_25px_80px_rgba(250,204,21,0.35)]">
          <div className="absolute top-0 right-0 w-72 h-72 bg-white/30 rounded-full blur-3xl"></div>

          <div className="relative z-10 grid lg:grid-cols-2 gap-12 items-center">
            <div>
              <p className="uppercase tracking-[0.3em] text-sm font-black mb-4">Limited Seats Only</p>
              <h2 className="text-4xl md:text-6xl font-black leading-tight mb-6">
                Never Miss the Chance.
              </h2>
              <p className="text-lg leading-relaxed max-w-xl">
                Join hundreds of girls in a journey of self-development, spiritual growth, and meaningful transformation.
              </p>
            </div>

            <div className="bg-white rounded-[32px] p-8 shadow-2xl">
              <h3 className="text-3xl font-black mb-6">Apply Now</h3>

              <form className="space-y-5">
                <input
                  type="text"
                  placeholder="Full Name"
                  className="w-full px-5 py-4 rounded-2xl border border-slate-200 outline-none focus:ring-4 focus:ring-yellow-300"
                />

                <input
                  type="tel"
                  placeholder="Phone Number"
                  className="w-full px-5 py-4 rounded-2xl border border-slate-200 outline-none focus:ring-4 focus:ring-yellow-300"
                />

                <input
                  type="email"
                  placeholder="Email Address"
                  className="w-full px-5 py-4 rounded-2xl border border-slate-200 outline-none focus:ring-4 focus:ring-yellow-300"
                />

                <select className="w-full px-5 py-4 rounded-2xl border border-slate-200 outline-none focus:ring-4 focus:ring-yellow-300 text-slate-600">
                  <option>Select Age Group</option>
                  <option>14–18</option>
                  <option>19–22</option>
                  <option>23–25</option>
                </select>

                <button className="w-full bg-[#041B73] text-white py-4 rounded-2xl text-lg font-bold hover:opacity-90 transition shadow-xl">
                  Submit Application
                </button>
              </form>

              <div className="mt-6 text-center text-slate-600">
                Contact: <span className="font-bold text-[#041B73]">+91 8714407772</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="relative z-10 border-t border-white/10 px-6 lg:px-20 py-10 flex flex-col md:flex-row items-center justify-between gap-4">
        <div>
          <h3 className="text-2xl font-black text-yellow-400">Surayya</h3>
          <p className="text-blue-100">Daiya Islamic Academy for Women | Alumnae</p>
        </div>

        <div className="flex items-center gap-6 text-blue-100 text-sm">
          <a href="#" className="hover:text-yellow-400 transition">Instagram</a>
          <a href="#" className="hover:text-yellow-400 transition">WhatsApp</a>
          <a href="#" className="hover:text-yellow-400 transition">Telegram</a>
        </div>
      </footer>
    </div>
  )
}