import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Flame, BookOpen, Users, Lightbulb, Globe, Mic } from "lucide-react";

export default function HomePage() {
  return (
    <main className="bg-white text-gray-800 min-h-screen">
      {/* Hero Section */}
      <section className="bg-gradient-to-r from-indigo-600 to-purple-600 text-white py-20 px-4 text-center">
        <h1 className="text-5xl font-bold mb-4">Never a Dull Teacher</h1>
        <p className="text-xl max-w-2xl mx-auto mb-6">
          Empowering educators to lead, inspire, and transform schools through innovative solutions and resources.
        </p>
        <Button className="text-lg px-6 py-3 bg-white text-indigo-700 hover:bg-gray-200">
          Explore Our Programs
        </Button>
      </section>

      {/* Introduction Section */}
      <section className="py-16 px-6 bg-gray-100 text-center">
        <h2 className="text-4xl font-bold mb-4">About Never a Dull Teacher</h2>
        <p className="max-w-4xl mx-auto text-lg text-gray-700 mb-6">
          Never a Dull Teacher is an initiative committed to transforming education by placing teachers at the heart of change. We believe that empowered, inspired, and well-supported teachers are the key to building thriving learning environments. Our work is centered on innovation, collaboration, and inclusion.
        </p>
        <div className="max-w-3xl mx-auto">
          <h3 className="text-2xl font-semibold mt-4 mb-2">Our Mission</h3>
          <p className="text-gray-600 mb-4">
            To equip teachers with the tools, training, and support they need to lead and inspire their classrooms, schools, and communities.
          </p>
          <h3 className="text-2xl font-semibold mt-4 mb-2">Our Vision</h3>
          <p className="text-gray-600">
            A world where every teacher is a change-maker, and every student thrives through joyful, inclusive, and high-quality education.
          </p>
        </div>
      </section>

      {/* Services Section */}
      <section className="py-16 px-6 bg-gray-50">
        <h2 className="text-3xl font-semibold text-center mb-12">What We Offer</h2>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-6xl mx-auto">
          <ServiceCard icon={<Flame />} title="Six Pack Solutions Program" desc="A holistic school transformation strategy for academic and institutional excellence." />
          <ServiceCard icon={<Mic />} title="Morning Assembly Enhancement" desc="Create inspiring, structured, and impactful school assemblies that foster daily motivation." />
          <ServiceCard icon={<Lightbulb />} title="School Improvement" desc="Action plans, training, and evaluation for sustainable school growth." />
          <ServiceCard icon={<Users />} title="Teacher Development" desc="Leadership programs, pedagogical training, and reflective teaching practices." />
          <ServiceCard icon={<BookOpen />} title="Teaching Resources" desc="Free, high-quality materials for lesson planning, assessments, and classroom engagement." />
          <ServiceCard icon={<Globe />} title="Language Learning" desc="Immersive resources and activities to enhance language skills across age groups." />
        </div>
      </section>

      {/* Join Community Section */}
      <section className="py-20 px-4 text-center bg-indigo-600 text-white">
        <h2 className="text-3xl font-semibold mb-4">Be Part of a Thriving Teaching Community</h2>
        <p className="max-w-2xl mx-auto mb-6">
          Join our online forum to connect, collaborate, and grow with other passionate educators.
        </p>
        <Button className="bg-white text-indigo-700 hover:bg-gray-200" onClick={() => window.location.href = "https://neveradullteacher.in/community/"}>
          Join the Forum
        </Button>
      </section>

      {/* Donate Section */}
      <section className="py-16 px-4 bg-gray-100 text-center">
        <h2 className="text-3xl font-bold mb-4">Support Our Mission</h2>
        <p className="max-w-xl mx-auto mb-6 text-lg">
          Your contribution helps us empower more teachers and enhance the learning experience for countless students.
        </p>
        <Button className="bg-green-600 text-white text-lg px-6 py-3 hover:bg-green-700" onClick={() => window.location.href = "https://neveradullteacher.in/donate-now/"}>
          Donate Now
        </Button>
      </section>
    </main>
  );
}

function ServiceCard({ icon, title, desc }) {
  return (
    <Card className="rounded-2xl shadow-md hover:shadow-xl transition-shadow duration-300">
      <CardContent className="p-6 text-center">
        <div className="text-indigo-600 mb-4 text-4xl flex justify-center">{icon}</div>
        <h3 className="text-xl font-semibold mb-2">{title}</h3>
        <p className="text-gray-600">{desc}</p>
      </CardContent>
    </Card>
  );
}