import React, { useState } from "react";

export default function PhiloClassicalAcademy() {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const colors = {
    primary: "#4b1d95", // Purple
    accent: "#e0c45c", // Gold
    bgLight: "#f8f5f0", // Beige
    bgSection: "#ece7df", // Light beige
    border: "#d9c79b", // Soft gold
  };

  const navLinks = [
    { href: "#home", label: "Home" },
    { href: "#academics", label: "Academics" },
    { href: "#faculty", label: "Faculty" },
    { href: "#contact", label: "Contact" },
  ];

  const academicLevels = [
    {
      title: "Grammar School",
      desc: "Foundational learning focused on memory, imitation, and joy in discovery.",
    },
    {
      title: "Logic School",
      desc: "Developing reasoning and discernment through language, argument, and wonder.",
    },
    {
      title: "Rhetoric School",
      desc: "Training in expression, persuasion, and leadership rooted in truth and beauty.",
    },
  ];

  const faculty = [
    {
      name: "Dr. Elizabeth Moore",
      role: "Head of School",
      img: "https://randomuser.me/api/portraits/women/65.jpg",
      alt: "Portrait of Dr. Elizabeth Moore",
    },
    {
      name: "Mr. Thomas Reed",
      role: "Logic & Philosophy",
      img: "https://randomuser.me/api/portraits/men/43.jpg",
      alt: "Portrait of Mr. Thomas Reed",
    },
    {
      name: "Mrs. Anna Clarke",
      role: "Latin & Literature",
      img: "https://randomuser.me/api/portraits/women/68.jpg",
      alt: "Portrait of Mrs. Anna Clarke",
    },
  ];

  return (
    <div className="font-serif bg-[#f8f5f0] text-gray-800 scroll-smooth">
      {/* Header */}
      <header
        className="bg-[#4b1d95] text-white shadow-lg sticky top-0 z-50 border-b-2 border-[#e0c45c]"
        style={{ borderColor: colors.accent, backgroundColor: colors.primary }}
      >
        <nav className="max-w-7xl mx-auto px-6 py-6 flex justify-between items-center">
          <h1 className="text-4xl md:text-5xl font-bold tracking-wide text-[#e0c45c]">
            Philo Classical Academy
          </h1>
          {/* Desktop Nav */}
          <ul className="hidden md:flex space-x-8 text-lg">
            {navLinks.map((link) => (
              <li key={link.label}>
                <a
                  href={link.href}
                  className="hover:text-[#e0c45c] transition-colors"
                >
                  {link.label}
                </a>
              </li>
            ))}
          </ul>
          {/* Mobile Menu Button */}
          <button
            className="md:hidden text-white text-3xl focus:outline-none"
            onClick={() => setIsMenuOpen(!isMenuOpen)}
            aria-label="Toggle navigation menu"
          >
            {isMenuOpen ? "✕" : "☰"}
          </button>
        </nav>
        {/* Mobile Nav */}
        {isMenuOpen && (
          <ul className="md:hidden flex flex-col items-center space-y-4 pb-4 bg-[#4b1d95]">
            {navLinks.map((link) => (
              <li key={link.label}>
                <a
                  href={link.href}
                  className="text-lg hover:text-[#e0c45c] transition-colors"
                  onClick={() => setIsMenuOpen(false)}
                >
                  {link.label}
                </a>
              </li>
            ))}
          </ul>
        )}
      </header>

      {/* Hero Section with School of Athens */}
      <section
        id="home"
        className="relative h-[80vh] flex items-center justify-center border-b-2 border-[#e0c45c] bg-cover bg-center"
        style={{
          backgroundImage: "url('https://upload.wikimedia.org/wikipedia/commons/thumb/9/94/Sanzio_01.jpg/1200px-Sanzio_01.jpg')",
          borderColor: colors.accent,
        }}
      >
        <div className="absolute inset-0 bg-black/40"></div>
        <div className="relative text-center text-white max-w-3xl px-6">
          <h2 className="text-5xl md:text-7xl font-bold mb-4">
            Wisdom. Virtue. Eloquence.
          </h2>
          <p className="text-lg md:text-xl italic">
            Forming minds and hearts through the riches of classical education.
          </p>
        </div>
      </section>

      {/* Mission Section */}
      <section
        className="py-16 px-6 max-w-5xl mx-auto text-center border-b-2 border-[#e0c45c]"
        style={{ borderColor: colors.accent }}
      >
        <h3 className="text-3xl font-semibold text-[#4b1d95] mb-6">
          Our Mission
        </h3>
        <p className="text-lg leading-relaxed">
          At Philo Classical Academy, we are devoted to nurturing wisdom and
          virtue through a time-honored liberal arts education rooted in the
          Christian tradition. Our curriculum cultivates a love of truth,
          goodness, and beauty — shaping students to think deeply, speak
          eloquently, and live faithfully.
        </p>
      </section>

      {/* Academics Section */}
      <section
        id="academics"
        className="bg-[#ece7df] py-16 px-6 border-b-2 border-[#e0c45c]"
        style={{ backgroundColor: colors.bgSection, borderColor: colors.accent }}
      >
        <div className="max-w-6xl mx-auto">
          <h3 className="text-3xl font-semibold text-center text-[#4b1d95] mb-10">
            Academics
          </h3>
          <div className="grid md:grid-cols-3 gap-8">
            {academicLevels.map((level) => (
              <div
                key={level.title}
                className="bg-white shadow-lg rounded-2xl p-6 border border-[#d9c79b] hover:shadow-xl transition-shadow"
                style={{ borderColor: colors.border }}
              >
                <h4 className="text-2xl font-semibold text-[#4b1d95] mb-3">
                  {level.title}
                </h4>
                <p>{level.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Faculty Section */}
      <section id="faculty" className="py-16 px-6 max-w-6xl mx-auto text-center">
        <h3 className="text-3xl font-semibold text-[#4b1d95] mb-10">Faculty</h3>
        <div className="grid md:grid-cols-3 gap-8">
          {faculty.map((person) => (
            <div
              key={person.name}
              className="bg-white rounded-2xl shadow-lg overflow-hidden border border-[#d9c79b]"
              style={{ borderColor: colors.border }}
            >
              <img
                src={person.img}
                alt={person.alt}
                className="w-full h-64 object-cover"
                loading="lazy"
              />
              <div className="p-6">
                <h4 className="text-xl font-semibold text-[#4b1d95]">
                  {person.name}
                </h4>
                <p className="italic">{person.role}</p>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Contact Section */}
      <section
        id="contact"
        className="bg-[#4b1d95] text-white py-16 px-6 border-t-2 border-[#e0c45c]"
        style={{ backgroundColor: colors.primary, borderColor: colors.accent }}
      >
        <div className="max-w-5xl mx-auto text-center pt-10">
          <h3 className="text-3xl font-semibold text-[#e0c45c] mb-6">
            Contact Us
          </h3>
          <p className="mb-4 text-lg">
            We welcome inquiries from families seeking a classical Christian
            education.
          </p>
          <p>Email: info@philoclassical.org</p>
          <p>Phone: (715) 555-1234</p>
        </div>
      </section>

      {/* Footer */}
      <footer
        className="bg-[#3a166e] text-[#e0c45c] text-center py-6 border-t-2 border-[#e0c45c]"
        style={{ borderColor: colors.accent }}
      >
        <p>
          © {new Date().getFullYear()} Philo Classical Academy — All Rights
          Reserved.
        </p>
      </footer>
    </div>
  );
}