"use client";

import React, { useState } from "react";
import Link from "next/link";
import {
  MapPin,
  Phone,
  Mail,
  Clock,
  ChevronRight,
  Award,
  CheckCircle2,
  Calendar,
  Users,
  BookOpen,
  GraduationCap,
  UtensilsCrossed,
  ArrowRight,
  Download,
  Send,
  Building2,
  ShieldCheck,
  Menu,
  X,
  FileSpreadsheet,
  FileText,
  Sparkles,
} from "lucide-react";
import { toast } from "sonner";

export default function LandingHomePage() {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
  const [activeProgramTab, setActiveProgramTab] = useState<
    "all" | "ug" | "pg" | "diploma" | "certificate"
  >("all");

  // Contact Form State
  const [contactName, setContactName] = useState("");
  const [contactEmail, setContactEmail] = useState("");
  const [contactSubject, setContactSubject] = useState("");
  const [contactMessage, setContactMessage] = useState("");
  const [isSending, setIsSending] = useState(false);

  const handleContactSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!contactName.trim() || !contactEmail.trim() || !contactMessage.trim()) {
      toast.error("Please fill in your Name, Email, and Message.");
      return;
    }
    setIsSending(true);
    setTimeout(() => {
      setIsSending(false);
      toast.success(
        `Thank you, ${contactName}! Your enquiry has been received by IHM Kolkata Admissions.`
      );
      setContactName("");
      setContactEmail("");
      setContactSubject("");
      setContactMessage("");
    }, 600);
  };

  const programs = [
    {
      id: "bsc",
      category: "ug",
      title: "B.Sc. in Hospitality & Hotel Administration",
      duration: "3 Years • 6 Semesters",
      mode: "Full Time • NCHMCT & IGNOU",
      desc: "Flagship undergraduate program combining food production, F&B service, front office, accommodation management, and industry internship.",
      image: "/images/ihm_service_dining.jpg",
      featured: true,
    },
    {
      id: "msc",
      category: "pg",
      title: "M.Sc. in Hospitality Administration",
      duration: "2 Years • 4 Semesters",
      mode: "Full Time • Post Graduate",
      desc: "Advanced executive leadership, strategic revenue management, hospitality human resources, and international tourism policy.",
      image: "/images/ihm_campus_bg.jpg",
      featured: true,
    },
    {
      id: "dip-fp",
      category: "diploma",
      title: "Diploma in Food Production",
      duration: "1.5 Years • Full Time",
      mode: "Intensive Kitchen Practical",
      desc: "Rigorous culinary arts training covering continental, Indian regional cuisines, larder, butchery, and commercial kitchen operations.",
      image: "/images/ihm_culinary_kitchen.jpg",
      featured: true,
    },
    {
      id: "dip-fb",
      category: "diploma",
      title: "Diploma in Food & Beverage Service",
      duration: "1.5 Years • Full Time",
      mode: "Hospitality Operations",
      desc: "Professional restaurant service techniques, mixology, banqueting logistics, sommelier foundation, and guest relationship management.",
      image: "/images/ihm_service_dining.jpg",
      featured: false,
    },
    {
      id: "dip-hk",
      category: "diploma",
      title: "Diploma in Housekeeping Operations",
      duration: "1.5 Years • Full Time",
      mode: "Accommodation Sector",
      desc: "Interior aesthetics, linen room logistics, laundry operations, eco-friendly sanitization, and luxury hotel guestroom upkeep.",
      image: "/images/ihm_campus_bg.jpg",
      featured: false,
    },
    {
      id: "cert-bakery",
      category: "certificate",
      title: "Certificate in Bakery & Confectionery",
      duration: "1 Year • Full Time",
      mode: "Specialized Pastry Studio",
      desc: "Hands-on mastery of artisanal breads, Viennoiserie, wedding cakes, Belgian chocolate tempering, and modern dessert presentation.",
      image: "/images/ihm_bakery_pastry.jpg",
      featured: true,
    },
  ];

  const filteredPrograms = programs.filter((p) => {
    if (activeProgramTab === "all") return true;
    return p.category === activeProgramTab;
  });

  return (
    <div className="min-h-screen bg-white text-[#1E293B] font-sans selection:bg-[#F4B400] selection:text-[#081A2E]">
      {/* ========================================================================= */}
      {/* 1. TOP NAVIGATION HEADER (MATCHING REFERENCE DESIGN)                     */}
      {/* ========================================================================= */}
      <header className="sticky top-0 z-50 bg-white/95 backdrop-blur-md border-b border-[#E2E8F0] shadow-xs">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex items-center justify-between h-20">
            {/* Brand Logo with Golden Seal */}
            <Link href="/" className="flex items-center gap-3 group">
              <div className="w-11 h-11 rounded-full border-2 border-[#D99A24] bg-[#05111F] flex items-center justify-center shrink-0 shadow-sm transition-transform group-hover:scale-105">
                <Award className="w-6 h-6 text-[#D99A24]" />
              </div>
              <div className="leading-tight">
                <span className="text-[10px] font-bold tracking-[0.2em] uppercase text-[#64748B] block">
                  INSTITUTE OF
                </span>
                <span className="text-[13px] font-extrabold tracking-wide uppercase text-[#071A4D] block font-heading">
                  HOTEL MANAGEMENT
                </span>
                <span className="text-[10px] font-bold tracking-[0.22em] uppercase text-[#D99A24] block">
                  KOLKATA
                </span>
              </div>
            </Link>

            {/* Desktop Navigation Links (Only basic sections: Home, About, Vision, Contact) */}
            <nav className="hidden lg:flex items-center gap-8 text-[13px] font-semibold text-[#334155]">
              <a href="#hero" className="hover:text-[#1769E8] transition-colors">
                Home
              </a>
              <a href="#about" className="hover:text-[#1769E8] transition-colors">
                About
              </a>
              <a href="#vision" className="hover:text-[#1769E8] transition-colors">
                Vision
              </a>
              <a href="#contact" className="hover:text-[#1769E8] transition-colors">
                Contact
              </a>
            </nav>

            {/* Desktop Single Login Action Button */}
            <div className="hidden sm:flex items-center">
              <Link
                href="/login"
                className="px-5 py-2.5 bg-[#F4B400] hover:bg-[#E0A400] text-[#081A2E] rounded-lg text-xs font-bold transition-all shadow-sm flex items-center gap-1.5 hover:shadow-md"
              >
                <ShieldCheck className="w-4 h-4 text-[#081A2E]" />
                <span>Login</span>
              </Link>
            </div>

            {/* Mobile Hamburger Button */}
            <div className="flex sm:hidden items-center gap-2">
              <Link
                href="/login"
                className="px-3 py-1.5 bg-[#F4B400] text-[#081A2E] rounded-lg text-xs font-bold shadow-xs"
              >
                Login
              </Link>
              <button
                onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
                className="p-2 rounded-lg text-[#334155] hover:bg-slate-100"
                aria-label="Toggle menu"
              >
                {mobileMenuOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
              </button>
            </div>
          </div>
        </div>

        {/* Mobile Navigation Drawer (Home, About, Vision, Contact, Single Login) */}
        {mobileMenuOpen && (
          <div className="lg:hidden border-t border-[#E2E8F0] bg-white px-4 pt-3 pb-6 space-y-2 text-sm font-semibold">
            <a
              href="#hero"
              onClick={() => setMobileMenuOpen(false)}
              className="block py-2 text-[#071A4D] border-b border-slate-100"
            >
              Home
            </a>
            <a
              href="#about"
              onClick={() => setMobileMenuOpen(false)}
              className="block py-2 text-[#071A4D] border-b border-slate-100"
            >
              About
            </a>
            <a
              href="#vision"
              onClick={() => setMobileMenuOpen(false)}
              className="block py-2 text-[#071A4D] border-b border-slate-100"
            >
              Vision
            </a>
            <a
              href="#contact"
              onClick={() => setMobileMenuOpen(false)}
              className="block py-2 text-[#071A4D] border-b border-slate-100"
            >
              Contact
            </a>
            <div className="pt-3">
              <Link
                href="/login"
                onClick={() => setMobileMenuOpen(false)}
                className="w-full text-center py-2.5 bg-[#F4B400] text-[#081A2E] rounded-lg text-xs font-bold shadow-sm flex items-center justify-center gap-1.5"
              >
                <ShieldCheck className="w-4 h-4 text-[#081A2E]" />
                <span>Login</span>
              </Link>
            </div>
          </div>
        )}
      </header>

      {/* ========================================================================= */}
      {/* 2. HERO SECTION WITH CAMPUS BACKDROP (MATCHING REFERENCE 01)              */}
      {/* ========================================================================= */}
      <section id="hero" className="relative min-h-[560px] lg:min-h-[640px] flex items-center bg-[#071A4D] overflow-hidden">
        {/* Background Image with Layered Gradient Overlay */}
        <div className="absolute inset-0 z-0">
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src="/images/ihm_campus_bg.jpg"
            alt="IHM Kolkata Campus Heritage Building"
            className="w-full h-full object-cover object-center scale-105 transform motion-safe:animate-in motion-safe:fade-in duration-700"
          />
          <div className="absolute inset-0 bg-gradient-to-r from-[#071A4D]/95 via-[#071A4D]/85 to-[#071A4D]/40" />
          <div className="absolute inset-0 bg-gradient-to-t from-[#071A4D] via-transparent to-transparent" />
        </div>

        <div className="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 lg:py-24">
          <div className="max-w-2xl text-white space-y-6">
            {/* Tagline Badge */}
            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 backdrop-blur-md border border-white/20 text-[11px] font-bold uppercase tracking-wider text-[#F4B400]">
              <Sparkles className="w-3.5 h-3.5 text-[#F4B400]" />
              <span>ACADEMIC EXCELLENCE • HOSPITALITY • PROFESSIONAL EDUCATION</span>
            </div>

            {/* Main Headline */}
            <h1 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold font-heading tracking-tight leading-[1.15]" style={{ color: '#ffffff' }}>
              Shaping the Next Generation of{" "}
              <span className="text-[#F4B400] underline decoration-[#F4B400]/40 underline-offset-8">
                Hospitality Professionals
              </span>
            </h1>

            {/* Sub-text */}
            <p className="text-sm sm:text-base text-slate-200 leading-relaxed font-normal">
              An integrated academic environment providing rigorous culinary education, hands-on
              5-star hotel training, and statutory NCHMCT attendance tracking to prepare future leaders.
            </p>

            {/* Action Buttons */}
            <div className="flex flex-wrap items-center gap-4 pt-2">
              <a
                href="#programs"
                className="px-6 py-3.5 bg-[#F4B400] hover:bg-[#E0A400] text-[#081A2E] rounded-xl text-xs sm:text-sm font-bold transition-all shadow-lg hover:shadow-[#F4B400]/20 flex items-center gap-2 cursor-pointer"
              >
                <span>Explore Academics</span>
                <ArrowRight className="w-4 h-4" />
              </a>

              <Link
                href="/login"
                className="px-6 py-3.5 bg-white/10 hover:bg-white/20 backdrop-blur-md border border-white/30 text-white rounded-xl text-xs sm:text-sm font-bold transition-all shadow-sm flex items-center gap-2"
              >
                <Users className="w-4 h-4 text-[#F4B400]" />
                <span>Student &amp; Parent Portal</span>
              </Link>
            </div>
          </div>
        </div>
      </section>

      {/* ========================================================================= */}
      {/* 3. FOUR KEY PILLARS BAR (MATCHING REFERENCE 01 BOTTOM BAR)                */}
      {/* ========================================================================= */}
      <section className="relative z-20 -mt-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 bg-white rounded-2xl shadow-xl border border-[#E2E8F0] p-6 lg:p-7">
          {/* Card 1 */}
          <div className="flex items-start gap-3.5 p-3 rounded-xl hover:bg-slate-50 transition-colors">
            <div className="w-11 h-11 rounded-xl bg-blue-50 border border-blue-200 text-[#1769E8] flex items-center justify-center shrink-0">
              <Building2 className="w-5 h-5" />
            </div>
            <div>
              <h2 className="font-heading font-bold text-sm text-[#071A4D]">
                World-Class Facilities
              </h2>
              <p className="text-xs text-[#64748B] mt-1 leading-snug">
                ATK, QTK, and BTK modern commercial training kitchens and mock hotel suites.
              </p>
            </div>
          </div>

          {/* Card 2 */}
          <div className="flex items-start gap-3.5 p-3 rounded-xl hover:bg-slate-50 transition-colors">
            <div className="w-11 h-11 rounded-xl bg-amber-50 border border-amber-200 text-[#D99A24] flex items-center justify-center shrink-0">
              <BookOpen className="w-5 h-5" />
            </div>
            <div>
              <h2 className="font-heading font-bold text-sm text-[#071A4D]">
                Industry Curriculum
              </h2>
              <p className="text-xs text-[#64748B] mt-1 leading-snug">
                Accredited NCHMCT syllabus with international hospitality exposure.
              </p>
            </div>
          </div>

          {/* Card 3 */}
          <div className="flex items-start gap-3.5 p-3 rounded-xl hover:bg-slate-50 transition-colors">
            <div className="w-11 h-11 rounded-xl bg-indigo-50 border border-indigo-200 text-indigo-600 flex items-center justify-center shrink-0">
              <GraduationCap className="w-5 h-5" />
            </div>
            <div>
              <h2 className="font-heading font-bold text-sm text-[#071A4D]">
                Experienced Faculty
              </h2>
              <p className="text-xs text-[#64748B] mt-1 leading-snug">
                Master Chefs, certified sommeliers, and seasoned hospitality educators.
              </p>
            </div>
          </div>

          {/* Card 4 */}
          <div className="flex items-start gap-3.5 p-3 rounded-xl hover:bg-slate-50 transition-colors">
            <div className="w-11 h-11 rounded-xl bg-emerald-50 border border-emerald-200 text-emerald-600 flex items-center justify-center shrink-0">
              <Award className="w-5 h-5" />
            </div>
            <div>
              <h2 className="font-heading font-bold text-sm text-[#071A4D]">
                Placement Support
              </h2>
              <p className="text-xs text-[#64748B] mt-1 leading-snug">
                100% placement track record with top global hospitality chains and cruises.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* ========================================================================= */}
      {/* 4. ABOUT SECTION & STATS (MATCHING REFERENCE 02)                         */}
      {/* ========================================================================= */}
      <section id="about" className="py-20 bg-[#F8FAFC]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-16">
          {/* Part A: About IHM Kolkata */}
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-10 items-center">
            {/* Left Content */}
            <div className="lg:col-span-6 space-y-5">
              <div className="inline-flex items-center gap-1.5 text-xs font-bold text-[#1769E8] uppercase tracking-wider">
                <span>Home</span>
                <ChevronRight className="w-3.5 h-3.5 text-slate-400" />
                <span>About Us</span>
              </div>

              <h2 className="text-3xl sm:text-4xl font-extrabold font-heading text-[#071A4D] tracking-tight">
                About IHM Kolkata
              </h2>

              <p className="text-sm text-[#475569] leading-relaxed">
                The Institute of Hotel Management, Catering Technology and Applied Nutrition, Kolkata
                is a premier autonomous institution under the Ministry of Tourism, Government of India.
                Established in 1963, IHM Kolkata has pioneered benchmark hospitality training across
                Eastern India.
              </p>
              <p className="text-sm text-[#475569] leading-relaxed">
                Our campus features state-of-the-art training kitchens, commercial food production labs,
                mock front office lobbies, a licensed training restaurant, and an automated statutory
                attendance calculation system.
              </p>

              {/* 4 Metrics Strip */}
              <div className="grid grid-cols-2 sm:grid-cols-4 gap-4 pt-4 border-t border-slate-200">
                <div className="p-3 bg-white rounded-xl border border-slate-200/80 shadow-2xs">
                  <span className="font-heading font-extrabold text-2xl text-[#071A4D] block font-mono">
                    1963
                  </span>
                  <span className="text-[11px] font-medium text-[#64748B]">Year of Inception</span>
                </div>
                <div className="p-3 bg-white rounded-xl border border-slate-200/80 shadow-2xs">
                  <span className="font-heading font-extrabold text-2xl text-[#1769E8] block font-mono">
                    2000+
                  </span>
                  <span className="text-[11px] font-medium text-[#64748B]">Alumni Network</span>
                </div>
                <div className="p-3 bg-white rounded-xl border border-slate-200/80 shadow-2xs">
                  <span className="font-heading font-extrabold text-2xl text-emerald-600 block font-mono">
                    100%
                  </span>
                  <span className="text-[11px] font-medium text-[#64748B]">Placement Record</span>
                </div>
                <div className="p-3 bg-white rounded-xl border border-slate-200/80 shadow-2xs">
                  <span className="font-heading font-extrabold text-2xl text-[#D99A24] block">
                    Global
                  </span>
                  <span className="text-[11px] font-medium text-[#64748B]">Industry Exposure</span>
                </div>
              </div>
            </div>

            {/* Right Photo Preview (Split Angle) */}
            <div className="lg:col-span-6 relative">
              <div className="rounded-2xl overflow-hidden shadow-2xl border-4 border-white ring-1 ring-slate-200">
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src="/images/ihm_culinary_kitchen.jpg"
                  alt="IHM Kolkata Culinary Students Training"
                  className="w-full h-[360px] sm:h-[420px] object-cover"
                />
              </div>
              <div className="absolute -bottom-5 -left-5 bg-[#071A4D] text-white p-4 rounded-xl shadow-lg border border-white/20 hidden sm:block">
                <div className="text-xs font-bold text-[#F4B400] uppercase tracking-wider">
                  NCHMCT Centre of Excellence
                </div>
                <div className="text-xs text-slate-200 mt-0.5">
                  Ministry of Tourism, Govt. of India
                </div>
              </div>
            </div>
          </div>

          {/* Part B: Our Vision */}
          <div id="vision" className="grid grid-cols-1 lg:grid-cols-12 gap-10 items-center pt-8 border-t border-slate-200 scroll-mt-24">
            {/* Left Content */}
            <div className="lg:col-span-6 space-y-4">
              <h2 className="text-2xl sm:text-3xl font-extrabold font-heading text-[#071A4D] tracking-tight">
                Our Vision &amp; Mission
              </h2>
              <p className="text-sm text-[#475569] leading-relaxed">
                To be a globally recognized center of excellence in hospitality and tourism education,
                developing skilled leaders who exemplify professionalism, ethical values, innovation,
                and international standards of guest service.
              </p>
              <div className="space-y-2 pt-2">
                <div className="flex items-center gap-2.5 text-xs text-[#334155] font-semibold">
                  <CheckCircle2 className="w-4 h-4 text-emerald-600 shrink-0" />
                  <span>Rigorous practical pedagogy across 5 core operational departments</span>
                </div>
                <div className="flex items-center gap-2.5 text-xs text-[#334155] font-semibold">
                  <CheckCircle2 className="w-4 h-4 text-emerald-600 shrink-0" />
                  <span>Statutory attendance compliance with 75% minimum contact hours rule</span>
                </div>
                <div className="flex items-center gap-2.5 text-xs text-[#334155] font-semibold">
                  <CheckCircle2 className="w-4 h-4 text-emerald-600 shrink-0" />
                  <span>Holistic character development, culinary arts, and hotel management acumen</span>
                </div>
              </div>

              <div className="pt-2">
                <a
                  href="#programs"
                  className="inline-flex items-center gap-2 px-5 py-2.5 bg-[#F4B400] hover:bg-[#E0A400] text-[#081A2E] rounded-lg text-xs font-bold transition-all shadow-xs"
                >
                  <span>Learn More</span>
                  <ArrowRight className="w-3.5 h-3.5" />
                </a>
              </div>
            </div>

            {/* Right Campus Building Photo */}
            <div className="lg:col-span-6">
              <div className="rounded-2xl overflow-hidden shadow-xl border-4 border-white ring-1 ring-slate-200">
                {/* eslint-disable-next-line @next/next/no-img-element */}
                <img
                  src="/images/ihm_campus_bg.jpg"
                  alt="IHM Kolkata Campus Classical Front Colonnade"
                  className="w-full h-[280px] sm:h-[320px] object-cover"
                />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ========================================================================= */}
      {/* 5. ACADEMIC PROGRAMS SECTION (MATCHING REFERENCE 03)                     */}
      {/* ========================================================================= */}
      <section id="programs" className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-10">
          <div className="text-center max-w-2xl mx-auto space-y-3">
            <span className="text-xs font-bold uppercase tracking-wider text-[#1769E8]">
              NCHMCT Accredited Curriculum
            </span>
            <h2 className="text-3xl sm:text-4xl font-extrabold font-heading text-[#071A4D] tracking-tight">
              Academic Programs
            </h2>
            <p className="text-sm text-[#64748B]">
              Comprehensive undergraduate degree, postgraduate management, and specialized craft
              diplomas structured to deliver direct industry readiness.
            </p>
          </div>

          {/* Program Category Filter Tabs */}
          <div className="flex items-center justify-center gap-2 flex-wrap">
            {[
              { id: "all", label: "All Programs" },
              { id: "ug", label: "Undergraduate" },
              { id: "pg", label: "Postgraduate" },
              { id: "diploma", label: "Diploma" },
              { id: "certificate", label: "Certificate" },
            ].map((tab) => (
              <button
                key={tab.id}
                onClick={() => setActiveProgramTab(tab.id as typeof activeProgramTab)}
                className={`px-4 py-2 rounded-lg text-xs font-bold transition-all cursor-pointer ${
                  activeProgramTab === tab.id
                    ? "bg-[#F4B400] text-[#081A2E] shadow-xs"
                    : "bg-slate-100 hover:bg-slate-200 text-slate-700"
                }`}
              >
                {tab.label}
              </button>
            ))}
          </div>

          {/* Programs Grid (6 Cards) */}
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {filteredPrograms.map((prog) => (
              <div
                key={prog.id}
                className="bg-white rounded-2xl border border-[#E5EAF0] shadow-xs hover:shadow-xl transition-all overflow-hidden flex flex-col group"
              >
                <div className="relative h-48 overflow-hidden bg-slate-100">
                  {/* eslint-disable-next-line @next/next/no-img-element */}
                  <img
                    src={prog.image}
                    alt={prog.title}
                    className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
                  />
                  <div className="absolute top-3 left-3 bg-[#071A4D]/90 backdrop-blur-xs text-white text-[10px] font-bold px-2.5 py-1 rounded-md uppercase tracking-wider">
                    {prog.duration}
                  </div>
                </div>

                <div className="p-5 flex-1 flex flex-col justify-between space-y-4">
                  <div className="space-y-2">
                    <span className="text-[11px] font-semibold text-[#1769E8] font-mono">
                      {prog.mode}
                    </span>
                    <h3 className="font-heading font-bold text-base text-[#071A4D] group-hover:text-[#1769E8] transition-colors leading-snug">
                      {prog.title}
                    </h3>
                    <p className="text-xs text-[#64748B] leading-relaxed">{prog.desc}</p>
                  </div>

                  <div className="pt-3 border-t border-slate-100 flex items-center justify-between">
                    <a
                      href="#admissions"
                      className="text-xs font-bold text-[#D99A24] hover:text-[#071A4D] flex items-center gap-1 transition-colors"
                    >
                      <span>Learn More</span>
                      <ChevronRight className="w-3.5 h-3.5" />
                    </a>
                    <Link
                      href="/login"
                      className="text-[11px] font-semibold text-slate-500 hover:text-[#1769E8]"
                    >
                      View Timetable &gt;
                    </Link>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ========================================================================= */}
      {/* 6. ADMISSIONS SECTION WITH PROGRESS STEPPER (MATCHING REFERENCE 04)      */}
      {/* ========================================================================= */}
      <section id="admissions" className="py-20 bg-[#F8FAFC]">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-12">
          <div className="text-center max-w-2xl mx-auto space-y-2">
            <span className="text-xs font-bold uppercase tracking-wider text-[#1769E8]">
              Admissions 2026–2027
            </span>
            <h2 className="text-3xl sm:text-4xl font-extrabold font-heading text-[#071A4D] tracking-tight">
              Admission Procedure &amp; Schedule
            </h2>
            <p className="text-sm text-[#64748B]">
              Admissions are conducted through the National Council for Hotel Management Joint Entrance
              Examination (NCHM JEE) and institutional merit for specialized diplomas.
            </p>
          </div>

          {/* 4-Step Progress Stepper (Matching Ref 04) */}
          <div className="bg-white rounded-2xl border border-[#E5EAF0] p-6 lg:p-8 shadow-xs">
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 relative">
              {[
                { step: "1", title: "Online Application", desc: "Submit NCHMCT JEE registration or direct application." },
                { step: "2", title: "Document Verification", desc: "Scrutiny of 10+2 certificates, ID proofs, and medical fitness." },
                { step: "3", title: "Entrance / Interview", desc: "Rank allocation via NCHMCT national counselling rounds." },
                { step: "4", title: "Admission Confirmation", desc: "Tuition fee deposit & biometric ERP account provisioning." },
              ].map((s, idx) => (
                <div key={s.step} className="flex flex-col items-center text-center space-y-2 relative">
                  <div className="w-12 h-12 rounded-full bg-[#FEF3C7] text-[#D97706] font-bold text-base flex items-center justify-center border-2 border-[#F4B400] shadow-sm font-mono">
                    {s.step}
                  </div>
                  <h3 className="font-heading font-bold text-sm text-[#071A4D] pt-1">
                    {s.title}
                  </h3>
                  <p className="text-xs text-[#64748B] leading-snug">{s.desc}</p>
                  {idx < 3 && (
                    <div className="hidden lg:block absolute top-6 left-[65%] w-[70%] border-t-2 border-dashed border-slate-200 pointer-events-none" />
                  )}
                </div>
              ))}
            </div>
          </div>

          {/* Important Dates Table & Apply Online Banner */}
          <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
            {/* Dates Table (7 cols) */}
            <div className="lg:col-span-7 bg-white rounded-2xl border border-[#E5EAF0] shadow-xs p-6 space-y-4">
              <div className="flex items-center gap-2 pb-3 border-b border-slate-100">
                <Calendar className="w-4 h-4 text-[#1769E8]" />
                <h3 className="font-heading font-bold text-base text-[#071A4D]">
                  Important Admission Dates (Academic Session 2026–2027)
                </h3>
              </div>

              <div className="overflow-x-auto text-xs">
                <table className="w-full text-left">
                  <thead className="bg-slate-50 border-b border-slate-200 text-[#475569] font-bold uppercase tracking-wider text-[11px]">
                    <tr>
                      <th className="py-2.5 px-3">Admission Milestone</th>
                      <th className="py-2.5 px-3 text-right">Key Date</th>
                    </tr>
                  </thead>
                  <tbody className="divide-y divide-slate-100 font-medium text-[#334155]">
                    <tr>
                      <td className="py-3 px-3">Application Start Date</td>
                      <td className="py-3 px-3 text-right font-mono font-bold text-[#071A4D]">01 March 2026</td>
                    </tr>
                    <tr>
                      <td className="py-3 px-3">Last Date to Submit Application</td>
                      <td className="py-3 px-3 text-right font-mono font-bold text-[#DC2626]">30 April 2026</td>
                    </tr>
                    <tr>
                      <td className="py-3 px-3">National Entrance Examination (NCHM JEE)</td>
                      <td className="py-3 px-3 text-right font-mono font-bold text-[#1769E8]">15 May 2026</td>
                    </tr>
                    <tr>
                      <td className="py-3 px-3">Result Declaration &amp; Merit Ranks</td>
                      <td className="py-3 px-3 text-right font-mono font-bold text-emerald-600">30 May 2026</td>
                    </tr>
                    <tr>
                      <td className="py-3 px-3">Centralized Counselling &amp; Seat Allocation</td>
                      <td className="py-3 px-3 text-right font-mono font-bold text-[#D97706]">10 June 2026</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            {/* Apply Online Card (5 cols) */}
            <div className="lg:col-span-5 bg-gradient-to-br from-[#071A4D] to-[#0A266E] text-white rounded-2xl shadow-xl p-7 space-y-5 border border-blue-900/40">
              <div className="space-y-1">
                <span className="text-[11px] font-bold text-[#F4B400] uppercase tracking-wider">
                  Direct Enrollment
                </span>
                <h3 className="font-heading font-extrabold text-xl" style={{ color: '#ffffff' }}>
                  Apply Online for 2026–2027
                </h3>
                <p className="text-xs text-slate-300">
                  Begin your hospitality leadership journey at India&apos;s foremost hotel management institute.
                </p>
              </div>

              <div className="p-3.5 bg-white/10 rounded-xl border border-white/15 space-y-1 text-xs">
                <div className="text-[#F4B400] font-bold">Registration Portal Ready</div>
                <div className="text-slate-200">
                  Fill candidate registration, attach marksheets, and generate institutional student account.
                </div>
              </div>

              <div className="space-y-3">
                <Link
                  href="/admin/people/students/register"
                  className="w-full py-3 bg-[#F4B400] hover:bg-[#E0A400] text-[#081A2E] rounded-xl text-xs font-bold transition-all shadow-md flex items-center justify-center gap-2"
                >
                  <span>Start Student Registration</span>
                  <ArrowRight className="w-4 h-4" />
                </Link>

                <button
                  type="button"
                  onClick={() => toast.success("Downloading IHM Kolkata Academic Prospectus (PDF)...")}
                  className="w-full py-2.5 bg-white/10 hover:bg-white/15 border border-white/20 text-white rounded-xl text-xs font-semibold transition-all flex items-center justify-center gap-2 cursor-pointer"
                >
                  <Download className="w-3.5 h-3.5 text-[#F4B400]" />
                  <span>Download Prospectus (PDF)</span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ========================================================================= */}
      {/* 7. CONTACT US SECTION (MATCHING REFERENCE 05)                            */}
      {/* ========================================================================= */}
      <section id="contact" className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-12">
          <div className="text-center max-w-2xl mx-auto space-y-2">
            <span className="text-xs font-bold uppercase tracking-wider text-[#1769E8]">
              Get In Touch
            </span>
            <h2 className="text-3xl sm:text-4xl font-extrabold font-heading text-[#071A4D] tracking-tight">
              Contact Us
            </h2>
            <p className="text-sm text-[#64748B]">
              We would love to hear from you. Get in touch with our admissions office, principal&apos;s secretariat,
              or campus administration.
            </p>
          </div>

          <div className="grid grid-cols-1 lg:grid-cols-12 gap-8 items-start">
            {/* Left Column: Official Campus Contact Details & Map (5 cols) */}
            <div className="lg:col-span-5 space-y-6">
              <div className="bg-slate-50 rounded-2xl border border-[#E5EAF0] p-6 space-y-5">
                <h3 className="font-heading font-bold text-base text-[#071A4D]">
                  Campus Headquarters
                </h3>

                <div className="space-y-4 text-xs text-[#334155]">
                  <div className="flex items-start gap-3">
                    <MapPin className="w-4 h-4 text-[#1769E8] shrink-0 mt-0.5" />
                    <div>
                      <div className="font-bold text-[#071A4D]">Campus Address:</div>
                      <div className="text-slate-600 leading-relaxed mt-0.5">
                        P-16, Taratala Road, CPT Colony, Alipore, Kolkata, West Bengal - 700088
                      </div>
                    </div>
                  </div>

                  <div className="flex items-start gap-3">
                    <Phone className="w-4 h-4 text-[#1769E8] shrink-0 mt-0.5" />
                    <div>
                      <div className="font-bold text-[#071A4D]">Telephone Contacts:</div>
                      <div className="text-slate-600 mt-0.5 font-mono">
                        +91 (033) 2401-4124 / 4235
                      </div>
                    </div>
                  </div>

                  <div className="flex items-start gap-3">
                    <Mail className="w-4 h-4 text-[#1769E8] shrink-0 mt-0.5" />
                    <div>
                      <div className="font-bold text-[#071A4D]">Institutional Email:</div>
                      <div className="text-slate-600 mt-0.5 font-mono">
                        principal@ihmkolkata.edu.in
                      </div>
                      <div className="text-slate-600 font-mono">
                        admissions@ihmkolkata.edu.in
                      </div>
                    </div>
                  </div>

                  <div className="flex items-start gap-3">
                    <Clock className="w-4 h-4 text-[#1769E8] shrink-0 mt-0.5" />
                    <div>
                      <div className="font-bold text-[#071A4D]">Academic Office Timings:</div>
                      <div className="text-slate-600 mt-0.5">
                        Monday to Friday: 9:00 AM – 5:30 PM (Closed on declared statutory holidays)
                      </div>
                    </div>
                  </div>
                </div>

                {/* Styled Map Preview Card (Matching Ref 05) */}
                <div className="pt-2">
                  <div className="rounded-xl overflow-hidden border border-slate-200 bg-slate-200 relative h-36 flex items-center justify-center group shadow-inner">
                    <div className="absolute inset-0 bg-gradient-to-br from-blue-50 to-slate-200 flex items-center justify-center">
                      <div className="text-center space-y-1">
                        <MapPin className="w-8 h-8 text-rose-500 mx-auto animate-bounce" />
                        <span className="text-[11px] font-bold text-[#071A4D] block font-heading">
                          IHM Kolkata Campus (Taratala)
                        </span>
                        <span className="text-[10px] text-slate-500 block">
                          Lat: 22.5085° N, Long: 88.3175° E
                        </span>
                      </div>
                    </div>
                    <button
                      type="button"
                      onClick={() => toast.info("Opening Google Maps location for IHM Kolkata...")}
                      className="absolute bottom-2.5 right-2.5 px-3 py-1 bg-white hover:bg-slate-50 border border-slate-300 rounded-md text-[10px] font-bold text-[#071A4D] shadow-xs cursor-pointer"
                    >
                      View on Map
                    </button>
                  </div>
                </div>
              </div>
            </div>

            {/* Right Column: Contact & Enquiry Form (7 cols) */}
            <div className="lg:col-span-7 bg-white rounded-2xl border border-[#E5EAF0] shadow-xs p-6 lg:p-8">
              <h3 className="font-heading font-bold text-lg text-[#071A4D] mb-1">
                Send Us a Message
              </h3>
              <p className="text-xs text-[#64748B] mb-6">
                Fill out the form below and our academic admissions desk will respond within 24 business hours.
              </p>

              <form onSubmit={handleContactSubmit} className="space-y-4">
                <div>
                  <label className="block text-xs font-bold text-[#334155] mb-1.5 uppercase tracking-wider">
                    Your Full Name <span className="text-rose-500">*</span>
                  </label>
                  <input
                    type="text"
                    required
                    value={contactName}
                    onChange={(e) => setContactName(e.target.value)}
                    placeholder="e.g. Priyanshu Das"
                    className="w-full px-3.5 py-2.5 bg-white border border-[#CBD5E1] rounded-lg text-xs text-[#0F172A] placeholder:text-[#94A3B8] focus:ring-2 focus:ring-[#1769E8]/20 focus:border-[#1769E8] outline-none transition-all font-medium"
                  />
                </div>

                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                  <div>
                    <label className="block text-xs font-bold text-[#334155] mb-1.5 uppercase tracking-wider">
                      Email Address <span className="text-rose-500">*</span>
                    </label>
                    <input
                      type="email"
                      required
                      value={contactEmail}
                      onChange={(e) => setContactEmail(e.target.value)}
                      placeholder="your.email@example.com"
                      className="w-full px-3.5 py-2.5 bg-white border border-[#CBD5E1] rounded-lg text-xs text-[#0F172A] placeholder:text-[#94A3B8] focus:ring-2 focus:ring-[#1769E8]/20 focus:border-[#1769E8] outline-none transition-all font-mono"
                    />
                  </div>

                  <div>
                    <label className="block text-xs font-bold text-[#334155] mb-1.5 uppercase tracking-wider">
                      Subject / Program
                    </label>
                    <input
                      type="text"
                      value={contactSubject}
                      onChange={(e) => setContactSubject(e.target.value)}
                      placeholder="e.g. B.Sc. H&HA Admissions 2026"
                      className="w-full px-3.5 py-2.5 bg-white border border-[#CBD5E1] rounded-lg text-xs text-[#0F172A] placeholder:text-[#94A3B8] focus:ring-2 focus:ring-[#1769E8]/20 focus:border-[#1769E8] outline-none transition-all font-medium"
                    />
                  </div>
                </div>

                <div>
                  <label className="block text-xs font-bold text-[#334155] mb-1.5 uppercase tracking-wider">
                    Message <span className="text-rose-500">*</span>
                  </label>
                  <textarea
                    rows={4}
                    required
                    value={contactMessage}
                    onChange={(e) => setContactMessage(e.target.value)}
                    placeholder="Please specify your query regarding course eligibility, hostel, syllabus, or fee structure..."
                    className="w-full px-3.5 py-2.5 bg-white border border-[#CBD5E1] rounded-lg text-xs text-[#0F172A] placeholder:text-[#94A3B8] focus:ring-2 focus:ring-[#1769E8]/20 focus:border-[#1769E8] outline-none transition-all font-medium"
                  />
                </div>

                <button
                  type="submit"
                  disabled={isSending}
                  className="w-full sm:w-auto px-7 py-3 bg-[#F4B400] hover:bg-[#E0A400] text-[#081A2E] rounded-xl text-xs font-bold transition-all shadow-md flex items-center justify-center gap-2 cursor-pointer disabled:opacity-50"
                >
                  <Send className="w-3.5 h-3.5" />
                  <span>{isSending ? "Sending Enquiry..." : "Send Message"}</span>
                </button>
              </form>
            </div>
          </div>
        </div>
      </section>

      {/* ========================================================================= */}
      {/* 8. INSTITUTIONAL FOOTER                                                   */}
      {/* ========================================================================= */}
      <footer className="bg-[#05111F] text-slate-300 pt-16 pb-12 border-t border-white/10 font-sans">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-12">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
            {/* Col 1: Brand & Ministry Affiliation */}
            <div className="space-y-4">
              <div className="flex items-center gap-3">
                <div className="w-9 h-9 rounded-full border border-[#D99A24] bg-[#081A2E] flex items-center justify-center shrink-0">
                  <Award className="w-5 h-5 text-[#D99A24]" />
                </div>
                <div className="leading-tight">
                  <span className="text-[12px] font-extrabold tracking-wide uppercase text-white block font-heading">
                    IHM KOLKATA
                  </span>
                  <span className="text-[9px] font-bold tracking-[0.2em] uppercase text-[#D99A24] block">
                    ESTD. 1963
                  </span>
                </div>
              </div>
              <p className="text-xs text-slate-400 leading-relaxed">
                Autonomous institute under Ministry of Tourism, Government of India. Affiliated with
                NCHMCT and IGNOU for premier hospitality and catering technology degrees.
              </p>
            </div>

            {/* Col 2: Academic Programs */}
            <div className="space-y-3">
              <h3 className="font-heading font-bold text-sm uppercase tracking-wider" style={{ color: '#ffffff' }}>
                Programs Offered
              </h3>
              <ul className="space-y-2 text-xs text-slate-400">
                <li>B.Sc. in Hospitality &amp; Hotel Admin</li>
                <li>M.Sc. in Hospitality Administration</li>
                <li>Diploma in Food Production</li>
                <li>Diploma in Food &amp; Beverage Service</li>
                <li>Diploma in Housekeeping Operations</li>
                <li>Certificate in Bakery &amp; Confectionery</li>
              </ul>
            </div>

            {/* Col 3: Quick Navigation */}
            <div className="space-y-3">
              <h3 className="font-heading font-bold text-sm uppercase tracking-wider" style={{ color: '#ffffff' }}>
                Quick Links
              </h3>
              <ul className="space-y-2 text-xs text-slate-400">
                <li>
                  <a href="#hero" className="hover:text-white transition-colors">
                    Home
                  </a>
                </li>
                <li>
                  <a href="#about" className="hover:text-white transition-colors">
                    About IHM Kolkata
                  </a>
                </li>
                <li>
                  <a href="#vision" className="hover:text-white transition-colors">
                    Vision &amp; Mission
                  </a>
                </li>
                <li>
                  <a href="#contact" className="hover:text-white transition-colors">
                    Contact Us
                  </a>
                </li>
                <li>
                  <Link href="/login" className="hover:text-[#F4B400] transition-colors font-medium text-amber-400">
                    Login to Portal &rarr;
                  </Link>
                </li>
              </ul>
            </div>

            {/* Col 4: Statutory Attendance Engine Badge */}
            <div className="space-y-3">
              <h3 className="font-heading font-bold text-sm uppercase tracking-wider" style={{ color: '#ffffff' }}>
                Statutory Attendance Portal
              </h3>
              <div className="p-3.5 bg-white/5 rounded-xl border border-white/10 space-y-2 text-xs">
                <div className="text-[#F4B400] font-bold flex items-center gap-1.5">
                  <ShieldCheck className="w-4 h-4" />
                  <span>NCHMCT Compliance Engine</span>
                </div>
                <p className="text-[11px] text-slate-400">
                  Hour-based statutory attendance tracking: 1 hour theory lecture, 4 hours practical kitchen laboratory session.
                </p>
                <Link
                  href="/login"
                  className="inline-flex items-center gap-1 text-[11px] font-bold text-blue-400 hover:text-blue-300"
                >
                  <span>Launch ERP System &rarr;</span>
                </Link>
              </div>
            </div>
          </div>

          <div className="pt-8 border-t border-white/10 flex flex-col sm:flex-row items-center justify-between text-xs text-slate-500 gap-4">
            <div>
              &copy; {new Date().getFullYear()} Institute of Hotel Management, Catering Technology &amp; Applied
              Nutrition, Kolkata. All Rights Reserved.
            </div>
            <div className="flex items-center gap-4 text-slate-400">
              <span>National Council for Hotel Management (NCHMCT)</span>
              <span>•</span>
              <span>Govt. of India</span>
            </div>
          </div>
        </div>
      </footer>
    </div>
  );
}