// Ashtaayaam Sansthan NGO Platform
// Frontend Prototype Structure
// Next.js + Tailwind CSS
// Future Integrations:
// - Razorpay
// - Admin Panel
// - Authentication
// - Member Dashboard
// - Referral System
// - Multilingual Support

export default function AshtaayaamSansthanHomepage() {
  return (
    <div className="min-h-screen bg-white text-gray-800">
      {/* Navbar */}
      <header className="sticky top-0 z-50 bg-white shadow-sm border-b">
        <div className="max-w-7xl mx-auto px-6 py-4 flex items-center justify-between">
          <div>
            <h1 className="text-2xl font-bold">Ashtaayaam Sansthan</h1>
            <p className="text-sm text-gray-500">Empowering Youth Through Skills & Swarojgaar</p>
          </div>

          <nav className="hidden md:flex gap-6 text-sm font-medium">
            <a href="#about" className="hover:text-blue-600">About</a>
            <a href="#mission" className="hover:text-blue-600">Mission</a>
            <a href="#training" className="hover:text-blue-600">Training</a>
            <a href="#register" className="hover:text-blue-600">Register</a>
            <a href="#contact" className="hover:text-blue-600">Contact</a>
          </nav>

          <div className="flex gap-3">
            <button className="px-4 py-2 rounded-xl border">हिन्दी</button>
            <button className="px-4 py-2 rounded-xl bg-black text-white">English</button>
          </div>
        </div>
      </header>

      {/* Hero */}
      <section className="relative overflow-hidden">
        <div className="max-w-7xl mx-auto px-6 py-24 grid md:grid-cols-2 gap-12 items-center">
          <div>
            <div className="inline-flex items-center rounded-full bg-gray-100 px-4 py-2 text-sm mb-6">
              Youth Swarojgaar Initiative
            </div>

            <h2 className="text-5xl font-bold leading-tight mb-6">
              Building a Self-Reliant Future for India’s Youth
            </h2>

            <p className="text-lg text-gray-600 mb-8 leading-relaxed">
              Ashtaayaam Sansthan works toward youth empowerment, training,
              self-employment opportunities, and sustainable community growth
              through impactful development programs.
            </p>

            <div className="flex flex-wrap gap-4">
              <button className="px-6 py-3 rounded-2xl bg-black text-white font-medium shadow-lg">
                Register Now
              </button>

              <button className="px-6 py-3 rounded-2xl border font-medium">
                Explore Programs
              </button>
            </div>
          </div>

          <div>
            <div className="rounded-3xl bg-gradient-to-br from-blue-100 via-green-100 to-yellow-100 h-[450px] shadow-2xl flex items-center justify-center text-center p-8">
              <div>
                <h3 className="text-3xl font-bold mb-4">Yuva Swarojgaar Training</h3>
                <p className="text-gray-700 text-lg">
                  Skill Development • Employment Guidance • Community Support
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* About */}
      <section id="about" className="py-20 bg-gray-50">
        <div className="max-w-6xl mx-auto px-6 text-center">
          <h3 className="text-4xl font-bold mb-6">About Ashtaayaam Sansthan</h3>

          <p className="text-lg text-gray-600 max-w-4xl mx-auto leading-relaxed">
            Ashtaayaam Sansthan is dedicated to creating opportunities for youth
            through skill training, self-employment awareness, social support,
            and empowerment initiatives. The organization focuses on building
            confidence, sustainability, and a brighter future for communities.
          </p>
        </div>
      </section>

      {/* Mission Vision */}
      <section id="mission" className="py-20">
        <div className="max-w-6xl mx-auto px-6 grid md:grid-cols-2 gap-8">
          <div className="p-10 rounded-3xl shadow-lg border bg-white">
            <h4 className="text-3xl font-bold mb-4">Our Mission</h4>
            <p className="text-gray-600 leading-relaxed text-lg">
              To empower youth through training, awareness, employment-oriented
              programs, and community development systems that encourage
              self-reliance and long-term growth.
            </p>
          </div>

          <div className="p-10 rounded-3xl shadow-lg border bg-white">
            <h4 className="text-3xl font-bold mb-4">Our Vision</h4>
            <p className="text-gray-600 leading-relaxed text-lg">
              To create a progressive society where every individual has access
              to opportunities, guidance, and support for a secure future.
            </p>
          </div>
        </div>
      </section>

      {/* Training */}
      <section id="training" className="py-20 bg-gray-50">
        <div className="max-w-7xl mx-auto px-6">
          <div className="text-center mb-14">
            <h3 className="text-4xl font-bold mb-4">Yuva Swarojgaar Training Program</h3>
            <p className="text-gray-600 text-lg">
              Empowering individuals between 18–40 years through practical
              training and development support.
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            {[
              'Skill Development',
              'Career Guidance',
              'Self Employment Support',
              'Community Participation',
              'Training Assistance',
              'Future Stipend Structure'
            ].map((item) => (
              <div
                key={item}
                className="bg-white rounded-3xl p-8 shadow-md border hover:shadow-xl transition"
              >
                <h4 className="text-xl font-semibold">{item}</h4>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Registration CTA */}
      <section id="register" className="py-24">
        <div className="max-w-5xl mx-auto px-6">
          <div className="rounded-[40px] bg-black text-white p-12 text-center shadow-2xl">
            <h3 className="text-4xl font-bold mb-6">
              Join the Youth Swarojgaar Initiative
            </h3>

            <p className="text-lg text-gray-300 mb-8 max-w-3xl mx-auto">
              Register today to become part of a training and empowerment system
              designed to support growth, opportunities, and self-reliance.
            </p>

            <button className="px-8 py-4 rounded-2xl bg-white text-black font-semibold shadow-lg">
              Start Registration
            </button>
          </div>
        </div>
      </section>

      {/* Referral System */}
      <section className="py-20 bg-gray-50">
        <div className="max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-12 items-center">
          <div>
            <h3 className="text-4xl font-bold mb-6">Referral & Member Network</h3>

            <p className="text-lg text-gray-600 leading-relaxed">
              Members can refer other participants and create connected profiles.
              Referral relationships will remain linked through the member
              dashboard system for future training and engagement activities.
            </p>
          </div>

          <div className="rounded-3xl bg-white p-10 shadow-xl border">
            <ul className="space-y-4 text-lg">
              <li>• Connected member profiles</li>
              <li>• Referral tracking</li>
              <li>• Member dashboard access</li>
              <li>• Future incentive compatibility</li>
              <li>• Admin monitoring system</li>
            </ul>
          </div>
        </div>
      </section>

      {/* Registration Form */}
      <section id="registration-form" className="py-24 bg-white">
        <div className="max-w-6xl mx-auto px-6">
          <div className="text-center mb-12">
            <h3 className="text-4xl font-bold mb-4">Youth Training Registration</h3>
            <p className="text-lg text-gray-600">
              Complete the registration form to join the Yuva Swarojgaar initiative.
            </p>
          </div>

          <div className="bg-gray-50 border rounded-[32px] p-8 md:p-12 shadow-xl">
            <div className="grid md:grid-cols-2 gap-6">
              <input className="border rounded-2xl px-5 py-4" placeholder="Full Name" />
              <input className="border rounded-2xl px-5 py-4" placeholder="Father / Mother Name" />
              <input className="border rounded-2xl px-5 py-4" placeholder="Mobile Number" />
              <input className="border rounded-2xl px-5 py-4" placeholder="Email Address" />
              <input className="border rounded-2xl px-5 py-4" placeholder="Date of Birth" />
              <input className="border rounded-2xl px-5 py-4" placeholder="Gender" />
              <input className="border rounded-2xl px-5 py-4" placeholder="Aadhaar Number" />
              <input className="border rounded-2xl px-5 py-4" placeholder="Education Qualification" />
            </div>

            <div className="mt-8">
              <textarea
                className="w-full border rounded-2xl px-5 py-4 h-32"
                placeholder="Full Address"
              />
            </div>

            <div className="grid md:grid-cols-2 gap-6 mt-8">
              <input className="border rounded-2xl px-5 py-4" placeholder="Bank Account Holder Name" />
              <input className="border rounded-2xl px-5 py-4" placeholder="Bank Name" />
              <input className="border rounded-2xl px-5 py-4" placeholder="Account Number" />
              <input className="border rounded-2xl px-5 py-4" placeholder="IFSC Code" />
            </div>

            <div className="grid md:grid-cols-2 gap-6 mt-8">
              <select className="border rounded-2xl px-5 py-4 bg-white">
                <option>Select Purpose</option>
                <option>Donation</option>
                <option>Membership</option>
                <option>Registration Fees</option>
                <option>Youth Training</option>
              </select>

              <input className="border rounded-2xl px-5 py-4" placeholder="Reference / Referral ID" />
            </div>

            <div className="grid md:grid-cols-2 gap-6 mt-8">
              <div className="border-2 border-dashed rounded-2xl p-6 bg-white text-center">
                Upload Passport Photo
              </div>

              <div className="border-2 border-dashed rounded-2xl p-6 bg-white text-center">
                Upload Aadhaar / Documents
              </div>
            </div>

            <div className="mt-8 flex items-start gap-3">
              <input type="checkbox" className="mt-1" />
              <p className="text-gray-600 text-sm">
                I confirm that the information provided is correct and I agree to the organization’s terms and training guidelines.
              </p>
            </div>

            <div className="mt-10 text-center">
              <button className="px-10 py-4 rounded-2xl bg-black text-white text-lg font-semibold shadow-xl">
                Proceed to Payment
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* Contact */}
      <section id="contact" className="py-24">
        <div className="max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-12">
          <div>
            <h3 className="text-4xl font-bold mb-6">Contact Us</h3>

            <div className="space-y-4 text-lg text-gray-700">
              <p><strong>Mobile:</strong> 9079343165 / 9414958243</p>
              <p><strong>Email:</strong> ashtaayaam@gmail.com</p>
              <p><strong>WhatsApp:</strong> 9079343165</p>
              <p><strong>Address:</strong> Editable from Admin Panel</p>
            </div>
          </div>

          <div className="rounded-3xl border shadow-lg p-8 bg-white">
            <h4 className="text-2xl font-bold mb-6">Quick Inquiry</h4>

            <div className="space-y-4">
              <input
                className="w-full border rounded-xl px-4 py-3"
                placeholder="Your Name"
              />

              <input
                className="w-full border rounded-xl px-4 py-3"
                placeholder="Mobile Number"
              />

              <textarea
                className="w-full border rounded-xl px-4 py-3 h-32"
                placeholder="Your Message"
              />

              <button className="w-full py-3 rounded-xl bg-black text-white font-medium">
                Submit Query
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* Admin & Security Features Preview */}
      <section className="py-24 bg-black text-white">
        <div className="max-w-7xl mx-auto px-6">
          <div className="text-center mb-14">
            <h3 className="text-4xl font-bold mb-4">Secure NGO Management Platform</h3>
            <p className="text-lg text-gray-300">
              Built with scalable architecture, admin control, member dashboards,
              and secure registration management.
            </p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            {[
              'Super Admin Access',
              'Razorpay Payment System',
              'Referral Linked Profiles',
              'Editable CMS Dashboard',
              'Member Login System',
              'Training Management',
              'Secure Document Uploads',
              'Bilingual Website Support',
              'Future Scalable Architecture'
            ].map((item) => (
              <div
                key={item}
                className="rounded-3xl border border-white/10 bg-white/5 p-8 backdrop-blur"
              >
                <h4 className="text-xl font-semibold">{item}</h4>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="border-t bg-white">
        <div className="max-w-7xl mx-auto px-6 py-8 flex flex-col md:flex-row items-center justify-between gap-4">
          <div>
            <h4 className="font-bold text-xl">Ashtaayaam Sansthan</h4>
            <p className="text-gray-500 text-sm">
              Youth Empowerment • Swarojgaar • Social Development
            </p>
          </div>

          <div className="flex gap-6 text-sm text-gray-600">
            <a href="#">Privacy Policy</a>
            <a href="#">Terms & Conditions</a>
            <a href="#">Contact</a>
          </div>
        </div>
      </footer>
    </div>
  )
}