import type { FooterContent } from "@/app/lib/content";

export default function Footer({ content }: { content: FooterContent }) {
  return (
    <footer className="mt-8 w-full overflow-hidden bg-[#1f3fb8] text-white">
      <div className="site-container relative">
        <div className="relative pt-7 pb-5 md:pt-8 md:pb-6 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-6">
          <div className="space-y-3">
            <h3 className="text-xl font-bold tracking-tight leading-tight">
              {content.title}
            </h3>
            <p className="text-sm md:text-[15px] text-white/90 leading-relaxed max-w-md">
              {content.description}
            </p>
            <p className="text-sm text-white/85 leading-relaxed whitespace-pre-line">
              {content.address}
            </p>
          </div>

          <div>
            <h4 className="text-sm font-semibold uppercase tracking-[0.12em] text-white/95">
              {content.programsHeading}
            </h4>
            <ul className="mt-3 space-y-1.5 text-sm text-white/90">
              {content.programs.map((program) => (
                <li key={program.id} className="flex items-start gap-2">
                  <span className="mt-1 h-1.5 w-1.5 rounded-full bg-white/80" />
                  <span>{program.label}</span>
                </li>
              ))}
            </ul>
          </div>

          <div className="space-y-3">
            <h4 className="text-sm font-semibold uppercase tracking-[0.12em] text-white/95">
              {content.contactHeading}
            </h4>
            <div className="text-sm text-white/90 space-y-0.5">
              <p>{content.phone}</p>
              <p>{content.email}</p>
            </div>
          </div>
        </div>

        <div className="relative py-3 text-xs md:text-sm text-white/85 flex flex-col md:flex-row gap-2 md:items-center md:justify-between border-t border-white/15">
          <p>© {new Date().getFullYear()} Vido School. All rights reserved.</p>
        </div>
      </div>
    </footer>
  );
}
