import { motion } from "framer-motion";
import { useState, useEffect } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Phone, MapPin, Award, Users, BookOpen, Star, Target, ClipboardCheck, GraduationCap } from "lucide-react";

// AUTHORITY / ALLEN-STYLE CONTENT
const results = [
  { title: "JEE Advanced", value: "Top Selections" },
  { title: "NEET", value: "High Scores" },
  { title: "Consistency", value: "Year-on-Year Results" },
];

const faculty = [
  { name: "Ajay Prasad", subject: "Mathematics · IIT Delhi" },
  { name: "Govind Kumar", subject: "Chemistry · IIT Kanpur" },
  { name: "Zaffar", subject: "Physics · NIT Rourkela" },
  { name: "Dr. Rajnish Kumar", subject: "Biology" },
];

const reviews = [
  { name: "Rohit Sharma", text: "Strong discipline and regular testing helped me improve a lot.", rating: 5 },
  { name: "Sneha Patil", text: "Faculty focus on concepts, not shortcuts. Very effective.", rating: 5 },
  { name: "Aman Verma", text: "Best institute for serious IIT & NEET preparation.", rating: 4 },
];

export default function VisionaryAcademyWebsite() {
  const [facultyIndex, setFacultyIndex] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setFacultyIndex((prev) => (prev + 1) % faculty.length);
    }, 4000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div className="font-sans text-slate-900">

      {/* NAVBAR */}
      <nav className="fixed top-0 left-0 right-0 bg-white border-b z-50">
        <div className="max-w-7xl mx-auto px-6 h-16 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <img src="/ChatGPT Image Jan 23, 2026, 07_23_40 PM.png" className="w-10" alt="Visionary Logo" />
            <span className="font-semibold text-lg">Visionary IIT & NEET Academy</span>
          </div>
          <div className="hidden md:flex gap-8 text-sm font-medium">
            <a href="#home" className="hover:text-blue-800">Home</a>
            <a href="#results" className="hover:text-blue-800">Results</a>
            <a href="#methodology" className="hover:text-blue-800">Methodology</a>
            <a href="#programs" className="hover:text-blue-800">Programs</a>
            <a href="#faculty" className="hover:text-blue-800">Faculty</a>
            <a href="#reviews" className="hover:text-blue-800">Reviews</a>
            <a href="#contact" className="hover:text-blue-800">Contact</a>
          </div>
          <Button className="bg-blue-800 hover:bg-blue-900">Admission Enquiry</Button>
        </div>
      </nav>

      <div className="pt-16">

                        {/* HERO – NEW DESIGN */}
        <section id="home" className="relative h-[90vh] overflow-hidden">
          {/* New Background Image */}
          <img
            src="https://images.unsplash.com/photo-1503676260728-1c00da094a0b"
            className="absolute inset-0 w-full h-full object-cover"
            alt="Students studying in classroom"
          />
          <div className="absolute inset-0 bg-black/65" />

                    {/* Hero Image Grid – FIXED */}
          <div className="hidden md:grid absolute right-12 top-1/2 -translate-y-1/2 grid-cols-2 gap-4 z-10">
            {["classroom","students studying","teacher teaching","study room"].map((q, i) => (
              <img
                key={i}
                src={`https://source.unsplash.com/400x300/?${encodeURIComponent(q)}`}
                className="w-44 h-32 object-cover rounded-xl shadow-xl border border-white/20"
                alt="Classroom environment"
              />
            ))}
          </div>

          {/* Content */}
          <div className="relative max-w-7xl mx-auto px-6 h-full flex items-center">
            <motion.div initial={{ opacity: 0, y: 30 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.8 }}>
              <h1 className="text-white text-4xl md:text-6xl font-bold mb-6 max-w-3xl">
                Building Strong Foundations for IIT‑JEE & NEET Success
              </h1>
              <p className="text-slate-200 text-lg mb-8 max-w-2xl">
                Real classrooms. Serious teaching. Disciplined preparation for competitive exams.
              </p>
              <div className="flex gap-4">
                <Button className="px-10 py-5 text-lg bg-blue-700 hover:bg-blue-800">Apply for Admission</Button>
                <Button variant="outline" className="px-10 py-5 text-lg text-white border-white hover:bg-white/10">
                  Visit Campus
                </Button>
              </div>
            </motion.div>
          </div>
        </section>

                {/* RESULTS */}
        <section id="results" className="py-20 bg-white">
          <div className="max-w-6xl mx-auto grid md:grid-cols-3 gap-10 px-6 text-center">
            {results.map((r, i) => (
              <motion.div key={i} initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }}>
                <Award className="mx-auto mb-4 text-blue-800" />
                <h3 className="text-2xl font-bold mb-2">{r.title}</h3>
                <p className="text-slate-600">{r.value}</p>
              </motion.div>
            ))}
          </div>
        </section>

        {/* ABOUT US */}
        <section id="about" className="py-24 bg-slate-100">
          <div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-14 px-6 items-center">
            <motion.div initial={{ opacity: 0, x: -40 }} whileInView={{ opacity: 1, x: 0 }}>
              <h2 className="text-3xl font-bold mb-6">About Visionary IIT & NEET Academy</h2>
              <p className="text-slate-700 mb-4">
                Visionary IIT & NEET Academy is a dedicated coaching institute built on academic discipline, concept clarity, and consistent performance in competitive examinations.
              </p>
              <p className="text-slate-700 mb-4">
                Our teaching system focuses on strong fundamentals, structured classroom programs, regular evaluation, and continuous mentoring to help students achieve success in IIT‑JEE, NEET, and other competitive exams.
              </p>
              <p className="text-slate-700">
                We believe serious preparation, guided by experienced faculty, creates confident and successful students.
              </p>
            </motion.div>
            <motion.img
              initial={{ opacity: 0, x: 40 }}
              whileInView={{ opacity: 1, x: 0 }}
              src="https://images.unsplash.com/photo-1524995997946-a1c2e315a42f"
              className="rounded-2xl shadow-lg"
              alt="About Institute"
            />
          </div>
        </section>

        {/* TEACHING METHODOLOGY */}
        <section id="methodology" className="py-24 bg-slate-100">
          <h2 className="text-3xl font-bold text-center mb-16">Our Teaching Methodology</h2>
          <div className="max-w-6xl mx-auto grid md:grid-cols-3 gap-10 px-6 text-center">
            <div>
              <Target className="mx-auto mb-4 text-blue-800" />
              <h3 className="text-xl font-semibold mb-2">Concept Clarity</h3>
              <p className="text-slate-600">Strong fundamentals with step-by-step explanation.</p>
            </div>
            <div>
              <ClipboardCheck className="mx-auto mb-4 text-blue-800" />
              <h3 className="text-xl font-semibold mb-2">Regular Evaluation</h3>
              <p className="text-slate-600">Weekly tests, analysis, and performance tracking.</p>
            </div>
            <div>
              <GraduationCap className="mx-auto mb-4 text-blue-800" />
              <h3 className="text-xl font-semibold mb-2">Personal Mentoring</h3>
              <p className="text-slate-600">Individual guidance to strengthen weak areas.</p>
            </div>
          </div>
        </section>

        {/* CAMPUS & CLASSROOM GALLERY */}
        <section className="py-24 bg-white">
          <h2 className="text-3xl font-bold text-center mb-16">Campus & Classroom Environment</h2>
          <div className="max-w-7xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-6 px-6">
            {[1,2,3,4,5,6,7,8].map((i) => (
              <motion.img
                key={i}
                whileHover={{ scale: 1.03 }}
                src={`https://images.unsplash.com/800x600/?classroom,students,study&sig=${i}`}
                alt="Classroom"
                className="rounded-xl h-48 w-full object-cover shadow-sm"
              />
            ))}
          </div>
        </section>

        {/* PROGRAMS */}
        <section id="programs" className="py-24 bg-white">
          <h2 className="text-3xl font-bold text-center mb-16">Programs Offered</h2>
          <div className="max-w-6xl mx-auto grid md:grid-cols-4 gap-8 px-6 text-center">
            {["IIT-JEE", "NEET", "MHT-CET", "Foundation"].map((p, i) => (
              <Card key={i} className="border">
                <CardContent className="p-6">
                  <BookOpen className="mx-auto mb-4 text-blue-800" />
                  <h3 className="font-semibold text-lg mb-2">{p}</h3>
                  <p className="text-sm text-slate-600">Structured classroom & test-based preparation</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </section>

                        {/* FACULTY – AUTO SLIDER WITH BUTTONS */}
        <section id="faculty" className="py-24 bg-slate-50">
          <h2 className="text-3xl font-bold text-center mb-16">Our Faculty</h2>

          <div className="relative max-w-6xl mx-auto px-6">
            

            {/* Slider */}
            <div className="overflow-hidden">
              <motion.div
                className="flex gap-8"
                animate={{ x: `-${facultyIndex * (280 + 32)}px` }}
                transition={{ duration: 0.6, ease: "easeInOut" }}
              >
                {faculty.concat(faculty).map((f, i) => (
                  <div key={i} className="min-w-[280px]">
                    <Card className="rounded-2xl shadow-md">
                      <div className="bg-blue-600 rounded-t-2xl h-28 flex justify-center items-end">
                        <img
                          src={`https://randomuser.me/api/portraits/${i % 2 === 0 ? "men" : "women"}/${30 + (i % faculty.length)}.jpg`}
                          alt={f.name}
                          className="w-20 h-20 rounded-full border-4 border-white mb-[-40px] bg-white"
                        />
                      </div>
                      <CardContent className="pt-14 text-center">
                        <h3 className="font-semibold text-lg">{f.name}</h3>
                        <p className="text-sm text-slate-600 mb-4">{f.subject}</p>
                        <Button size="sm" className="bg-blue-600 hover:bg-blue-700">View More</Button>
                      </CardContent>
                    </Card>
                  </div>
                ))}
              </motion.div>
            </div>

            {/* Controls */}
            <button
              onClick={() => setFacultyIndex((prev) => (prev === 0 ? faculty.length - 1 : prev - 1))}
              className="absolute left-0 top-1/2 -translate-y-1/2 bg-white shadow rounded-full w-10 h-10 flex items-center justify-center"
            >
              ‹
            </button>
            <button
              onClick={() => setFacultyIndex((prev) => (prev + 1) % faculty.length)}
              className="absolute right-0 top-1/2 -translate-y-1/2 bg-white shadow rounded-full w-10 h-10 flex items-center justify-center"
            >
              ›
            </button>
          </div>
        </section>

        {/* STUDENT LIFE & ACTIVITIES */}
        <section className="py-24 bg-slate-100">
          <h2 className="text-3xl font-bold text-center mb-16">Student Life & Academic Culture</h2>
          <div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-10 px-6 items-center">
            <motion.img
              initial={{ opacity: 0, x: -30 }}
              whileInView={{ opacity: 1, x: 0 }}
              src="https://images.unsplash.com/photo-1529070538774-1843cb3265df"
              className="rounded-2xl shadow-lg"
              alt="Students"
            />
            <motion.div initial={{ opacity: 0, x: 30 }} whileInView={{ opacity: 1, x: 0 }}>
              <h3 className="text-2xl font-semibold mb-4">A Focused, Disciplined Environment</h3>
              <p className="text-slate-600 mb-3">
                Our classrooms maintain academic discipline, punctual schedules, and a competitive yet supportive environment.
              </p>
              <p className="text-slate-600">
                Students are trained to handle pressure, manage time effectively, and consistently improve performance.
              </p>
            </motion.div>
          </div>
        </section>

        {/* REVIEWS */}
        <section id="reviews" className="py-24 bg-white">
          <h2 className="text-3xl font-bold text-center mb-16">Student Reviews</h2>
          <div className="max-w-4xl mx-auto grid gap-6 px-6">
            {reviews.map((r, i) => (
              <Card key={i} className="border">
                <CardContent className="p-6">
                  <div className="flex justify-between items-center mb-2">
                    <h4 className="font-semibold">{r.name}</h4>
                    <div className="flex">
                      {[...Array(r.rating)].map((_, i) => (
                        <Star key={i} className="w-4 h-4 fill-yellow-400 text-yellow-400" />
                      ))}
                    </div>
                  </div>
                  <p className="text-slate-600">{r.text}</p>
                </CardContent>
              </Card>
            ))}
          </div>
        </section>

        {/* CTA */}
        <section className="py-20 bg-blue-900 text-white text-center">
          <h2 className="text-3xl font-bold mb-6">Admissions Open for IIT‑JEE & NEET</h2>
          <p className="mb-8 text-slate-200">Limited seats • Entrance-based admission • Personal mentoring</p>
          <Button className="px-10 py-5 text-lg bg-white text-blue-900 hover:bg-slate-200">Apply Now</Button>
        </section>

        {/* FOOTER */}
        <section id="contact" className="py-20 bg-slate-900 text-slate-200 text-center">
          <h2 className="text-2xl font-semibold mb-6">Contact</h2>
          <p className="flex justify-center gap-2 mb-3"><Phone /> 720-805-6403 / 885-012-6734</p>
          <p className="flex justify-center gap-2 text-slate-400"><MapPin /> Kharghar & Ulwe, Navi Mumbai</p>
        </section>

      </div>
    </div>
  );
}