import React from 'react';
import { 
  Compass, 
  Heart, 
  Target, 
  GraduationCap, 
  FileText, 
  ChevronRight,
  Anchor,
  Globe,
  Sun,
  Bird
} from 'lucide-react';

// Custom Peace Symbol SVG to ensure compatibility
const PeaceIcon = ({ size = 24, className = "" }) => (
  <svg 
    width={size} 
    height={size} 
    viewBox="0 0 24 24" 
    fill="none" 
    stroke="currentColor" 
    strokeWidth="2" 
    strokeLinecap="round" 
    strokeLinejoin="round" 
    className={className}
  >
    <circle cx="12" cy="12" r="10" />
    <line x1="12" y1="2" x2="12" y2="22" />
    <line x1="12" y1="12" x2="18.63" y2="18.63" />
    <line x1="12" y1="12" x2="5.37" y2="18.63" />
  </svg>
);

const VisionIllustration = () => (
  <div className="relative w-full h-64 md:h-80 bg-gradient-to-br from-blue-50 to-indigo-100 rounded-2xl flex items-center justify-center overflow-hidden border border-blue-200 shadow-inner">
    <div className="absolute top-0 left-0 w-full h-full opacity-10">
      <svg width="100%" height="100%">
        <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
          <path d="M 40 0 L 0 0 0 40" fill="none" stroke="currentColor" strokeWidth="1"/>
        </pattern>
        <rect width="100%" height="100%" fill="url(#grid)" />
      </svg>
    </div>
    
    <div className="relative flex items-center justify-center scale-110">
      <div className="absolute animate-ping w-32 h-32 bg-blue-400 rounded-full opacity-20"></div>
      <div className="relative bg-white p-6 rounded-full shadow-lg border-4 border-blue-500">
        <Sun size={60} className="text-blue-600 animate-pulse" />
      </div>
      
      <div className="absolute -top-12 animate-bounce">
        <div className="bg-indigo-600 p-2 rounded-lg text-white shadow-md">
          <Globe size={24} />
        </div>
      </div>
      <div className="absolute -bottom-10 -right-10">
        <div className="bg-amber-500 p-3 rounded-full text-white shadow-lg">
          <Target size={28} />
        </div>
      </div>
      <div className="absolute -bottom-5 -left-12">
        <div className="bg-emerald-500 p-2 rounded-full text-white shadow-md">
          <Compass size={24} />
        </div>
      </div>
    </div>
  </div>
);

const MissionIllustration = () => (
  <div className="relative w-full h-64 md:h-80 bg-gradient-to-br from-rose-50 to-orange-100 rounded-2xl flex items-center justify-center overflow-hidden border border-rose-200 shadow-inner">
    <div className="absolute top-0 left-0 w-full h-full opacity-10">
      <svg width="100%" height="100%">
        <circle cx="50%" cy="50%" r="100" fill="none" stroke="currentColor" strokeWidth="2" strokeDasharray="10 5" className="animate-spin-slow" />
        <circle cx="50%" cy="50%" r="150" fill="none" stroke="currentColor" strokeWidth="1" strokeDasharray="5 5" />
      </svg>
    </div>

    <div className="relative flex items-center justify-center scale-110">
      <div className="relative bg-white p-8 rounded-full shadow-xl border-t-8 border-rose-500">
        <div className="relative">
          <div className="flex flex-col items-center">
            <Bird size={48} className="text-rose-600 mb-1" />
            <PeaceIcon size={32} className="text-rose-500" />
          </div>
          <Heart size={24} className="absolute -bottom-2 -right-2 text-rose-500 fill-rose-500" />
        </div>
      </div>
      
      <div className="absolute -right-16 top-0 bg-white px-3 py-1 rounded-full shadow-sm border border-rose-200 text-rose-700 text-xs font-bold uppercase tracking-wider">
        Truth
      </div>
      <div className="absolute -left-16 bottom-10 bg-white px-3 py-1 rounded-full shadow-sm border border-rose-200 text-rose-700 text-xs font-bold uppercase tracking-wider">
        Justice
      </div>
      <div className="absolute top-[-50px] bg-white px-3 py-1 rounded-full shadow-sm border border-rose-200 text-rose-700 text-xs font-bold uppercase tracking-wider">
        Love
      </div>
    </div>
  </div>
);

const SidebarMenu = ({ title, items, activeItem }) => (
  <div className="bg-white rounded-xl shadow-sm border border-slate-200 overflow-hidden mb-8">
    <h4 className="bg-red-700 text-white px-6 py-4 font-bold text-lg flex items-center gap-2">
      <div className="w-2 h-2 bg-white rounded-full"></div>
      {title}
    </h4>
    <ul className="divide-y divide-slate-100">
      {items.map((item, idx) => (
        <li key={idx}>
          <a 
            href={item.link} 
            className={`flex items-center justify-between px-6 py-4 transition-colors hover:bg-slate-50 group ${activeItem === item.name ? 'bg-red-50 text-red-700 font-semibold' : 'text-slate-600'}`}
          >
            <span className="flex items-center gap-2">
              {item.icon && <item.icon size={18} className={activeItem === item.name ? 'text-red-700' : 'text-slate-400 group-hover:text-red-600'} />}
              {item.name}
            </span>
            <ChevronRight size={16} className={`${activeItem === item.name ? 'text-red-700' : 'text-slate-300'} group-hover:translate-x-1 transition-transform`} />
          </a>
        </li>
      ))}
    </ul>
  </div>
);

const App = () => {
  const managementMenu = [
    { name: "Profile", link: "#", icon: null },
    { name: "Vision & Mission", link: "#", icon: null },
    { name: "Principal's Message", link: "#", icon: null },
    { name: "Infrastructure & Facilities", link: "#", icon: null },
    { name: "Mandatory Disclosure", link: "#", icon: null },
  ];

  const usefulLinks = [
    { name: "Admission", link: "#", icon: GraduationCap },
    { name: "Notification", link: "#", icon: FileText },
  ];

  return (
    <div className="min-h-screen bg-slate-50 font-sans text-slate-900">
      <section className="relative bg-indigo-900 text-white py-20 lg:py-32 overflow-hidden">
        <div className="absolute inset-0 opacity-20">
          <div className="absolute top-0 left-0 w-96 h-96 bg-blue-500 rounded-full blur-[100px] -translate-x-1/2 -translate-y-1/2"></div>
          <div className="absolute bottom-0 right-0 w-96 h-96 bg-red-500 rounded-full blur-[100px] translate-x-1/2 translate-y-1/2"></div>
        </div>
        <div className="container mx-auto px-4 relative z-10">
          <div className="max-w-4xl">
            <h1 className="text-4xl md:text-6xl font-extrabold tracking-tight mb-4">
              Vision & Mission
            </h1>
            <div className="h-1.5 w-24 bg-red-500 rounded-full"></div>
            <p className="mt-6 text-xl text-indigo-100 max-w-2xl leading-relaxed">
              Shaping character and cultivating excellence at St. Alphonsa School.
            </p>
          </div>
        </div>
      </section>

      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="flex flex-col lg:flex-row gap-12">
            <div className="lg:w-2/3 space-y-20">
              
              <div className="flex flex-col md:flex-row gap-8 items-center group">
                <div className="w-full md:w-1/2 order-2 md:order-1">
                  <div className="inline-flex items-center gap-2 text-blue-600 font-bold uppercase tracking-widest text-sm mb-3">
                    <Sun size={18} />
                    Our Higher Goal
                  </div>
                  <h2 className="text-3xl font-bold mb-6 text-slate-800">Our Vision</h2>
                  <div className="bg-white p-8 rounded-2xl shadow-xl border-l-8 border-blue-500 relative">
                    <p className="text-lg leading-relaxed text-slate-600 italic">
                      "The Education Society of AMALA PROVINCE (FCC) aims at the formation of an integrated 
                      person with a mission of establishing the reign of God. The acceptance of the 
                      fatherhood of God and universal brotherhood is the motivation and goal of our 
                      education."
                    </p>
                  </div>
                </div>
                <div className="w-full md:w-1/2 order-1 md:order-2 group-hover:scale-[1.02] transition-transform duration-500">
                  <VisionIllustration />
                </div>
              </div>

              <div className="bg-red-700 rounded-2xl p-8 text-center text-white shadow-lg transform hover:scale-[1.01] transition-transform">
                <p className="text-sm uppercase tracking-[0.3em] font-medium opacity-80 mb-2">Our Core Motto</p>
                <h3 className="text-3xl md:text-5xl font-black italic">"Service and Sacrifice"</h3>
              </div>

              <div className="flex flex-col md:flex-row gap-8 items-center group">
                <div className="w-full md:w-1/2 group-hover:scale-[1.02] transition-transform duration-500">
                  <MissionIllustration />
                </div>
                <div className="w-full md:w-1/2">
                  <div className="inline-flex items-center gap-2 text-rose-600 font-bold uppercase tracking-widest text-sm mb-3">
                    <Anchor size={18} />
                    Our Daily Path
                  </div>
                  <h2 className="text-3xl font-bold mb-6 text-slate-800">Our Mission</h2>
                  <div className="bg-white p-8 rounded-2xl shadow-xl border-l-8 border-rose-500 relative">
                    <p className="text-lg leading-relaxed text-slate-600">
                      Trusting in the providence of God, we instil in our students the gospel values of 
                      <span className="font-bold text-slate-800"> love, truth, justice, forgiveness, tolerance</span> and 
                      concern for others and help them to achieve harmonious integration between religion 
                      and life and thereby become a <span className="font-bold text-rose-600">channel of peace.</span>
                    </p>
                  </div>
                </div>
              </div>

            </div>

            <div className="lg:w-1/3">
              <aside className="sticky top-8">
                <SidebarMenu 
                  title="Management" 
                  items={managementMenu} 
                  activeItem="Vision & Mission" 
                />
                
                <SidebarMenu 
                  title="Useful Links" 
                  items={usefulLinks} 
                  activeItem="" 
                />

                <div className="bg-slate-800 rounded-xl p-6 text-white overflow-hidden relative group">
                   <div className="absolute top-0 right-0 p-4 opacity-10 group-hover:scale-110 transition-transform">
                     <GraduationCap size={100} />
                   </div>
                   <h5 className="text-xl font-bold mb-4">Need help?</h5>
                   <p className="text-slate-400 text-sm mb-6">If you have any questions regarding our mission or admission process, please contact us.</p>
                   <a href="#" className="block w-full py-3 bg-red-600 hover:bg-red-500 text-white text-center font-bold rounded-lg transition-colors">
                     Contact Us
                   </a>
                </div>
              </aside>
            </div>
          </div>
        </div>
      </section>

      <footer className="bg-slate-100 border-t border-slate-200 py-12">
        <div className="container mx-auto px-4 text-center text-slate-500 text-sm">
          <p>© {new Date().getFullYear()} St. Alphonsa School, Jhirnia. All Rights Reserved.</p>
        </div>
      </footer>

      <style dangerouslySetInnerHTML={{ __html: `
        @keyframes spin-slow {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
        }
        .animate-spin-slow {
          animation: spin-slow 20s linear infinite;
        }
      `}} />
    </div>
  );
};

export default App;