import Image from "next/image";

function BlogCard({
  title,
  category,
  excerpt,
}: {
  title: string;
  category: string;
  excerpt: string;
}) {
  return (
    <article className="rounded-2xl border border-[#d7e1ff] bg-white p-4 sm:p-5">
      <p className="text-[11px] uppercase tracking-[0.12em] text-[#5571cc]">
        {category}
      </p>
      <h3 className="mt-2 text-lg sm:text-xl font-bold text-[#1a237e] leading-snug">
        {title}
      </h3>
      <p className="mt-3 text-sm leading-relaxed text-[#536086]">{excerpt}</p>
      <a
        href="#"
        className="mt-4 inline-flex items-center gap-2 text-sm font-semibold text-[#1a237e] hover:underline"
      >
        Read Article
        <span aria-hidden="true">&rarr;</span>
      </a>
    </article>
  );
}

function FeaturedBlogPost() {
  return (
    <article className="overflow-hidden rounded-2xl border border-[#d7e1ff] bg-white">
      <Image
        src="/vido_galary/futureleaders.jpg"
        alt="Students in a classroom during a lesson"
        width={900}
        height={620}
        className="h-56 sm:h-64 md:h-72 w-full object-cover"
      />
      <div className="p-4 sm:p-5 md:p-6">
        <p className="text-[11px] uppercase tracking-[0.12em] text-[#5571cc]">
          Featured Story
        </p>
        <h3 className="mt-2 text-xl sm:text-2xl font-bold text-[#1a237e] leading-tight">
          How Vido Learners Build Confidence in Every Class
        </h3>
        <p className="mt-3 text-sm leading-relaxed text-[#536086]">
          Discover how our in-center, online, and home tutoring pathways help
          learners stay engaged, improve results, and grow with confidence.
        </p>
        <a
          href="#"
          className="mt-4 inline-flex items-center gap-2 text-sm font-semibold text-[#1a237e] hover:underline"
        >
          Read Featured Story
          <span aria-hidden="true">&rarr;</span>
        </a>
      </div>
    </article>
  );
}

export default function BlogsSection() {
  return (
    <section className="site-container py-8 md:py-12">
      <h2 className="mt-2 text-2xl md:text-3xl font-bold text-[#1a237e]">
        Latest Updates from Vido School
      </h2>
      <p className="mt-2 max-w-3xl text-sm md:text-base text-[#5b678d] leading-relaxed">
        News, highlights, and insights from our learning community.
      </p>

      <div className="mt-6 grid grid-cols-1 gap-5 md:gap-6 lg:grid-cols-[1.08fr_1fr]">
        <FeaturedBlogPost />

        <div className="grid grid-cols-1 gap-4">
          <BlogCard
            title="Fine Arts Showcase"
            category="School Events"
            excerpt="A celebration of student creativity, performance, and artistic expression from our senior learners."
          />
          <BlogCard
            title="Science and Engineering Fair"
            category="Academic Highlights"
            excerpt="Students presented practical science projects and innovative experiments during our annual fair."
          />
          <BlogCard
            title="Mentorship and Career Day"
            category="Career Guidance"
            excerpt="Families connected with colleges and mentors to explore future academic and career opportunities."
          />
        </div>
      </div>
    </section>
  );
}