import Link from "next/link";

type NewsPost = {
  id: string;
  title: string;
  date: string;
  category: string;
  excerpt: string;
  bodyPreview: string;
  thumbnail: string;
};

const newsPosts: NewsPost[] = [
  {
    id: "news-1",
    title: "ACVE abre convocatoria para la cohorte de primavera",
    date: "15 de marzo de 2026",
    category: "Comunicado",
    excerpt: "Se habilitó la convocatoria para estudiantes y profesionales que buscan fortalecer inglés jurídico aplicado.",
    bodyPreview:
      "El proceso incluye evaluación de nivel, entrevista breve y acompañamiento para elegir la ruta formativa más adecuada según perfil profesional.",
    thumbnail:
      "https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?auto=format&fit=crop&w=1200&q=80",
  },
  {
    id: "news-2",
    title: "Nuevo ciclo de webinars con enfoque en redacción contractual",
    date: "08 de marzo de 2026",
    category: "Académico",
    excerpt: "Iniciamos una serie de sesiones en vivo para reforzar estructuras clave de contratos en inglés.",
    bodyPreview:
      "Cada webinar incluye ejemplos prácticos, análisis de cláusulas frecuentes y espacio de preguntas para conectar teoría con práctica legal real.",
    thumbnail:
      "https://images.unsplash.com/photo-1523240795612-9a054b0db644?auto=format&fit=crop&w=1200&q=80",
  },
  {
    id: "news-3",
    title: "ACVE fortalece su red de mentores en litigio internacional",
    date: "02 de marzo de 2026",
    category: "Institucional",
    excerpt: "Se integran nuevos especialistas para acompañar el desarrollo profesional de la comunidad ACVE.",
    bodyPreview:
      "La red de mentores cubrirá preparación de audiencias, argumentación oral y terminología crítica para contextos transnacionales.",
    thumbnail:
      "https://images.unsplash.com/photo-1560439514-4e9645039924?auto=format&fit=crop&w=1200&q=80",
  },
  {
    id: "news-4",
    title: "Publicamos guía práctica para entrevistas legales en inglés",
    date: "22 de febrero de 2026",
    category: "Recursos",
    excerpt: "Disponible un nuevo material descargable para preparar entrevistas y reuniones con clientes internacionales.",
    bodyPreview:
      "La guía presenta frases útiles, recomendaciones de tono profesional y checklist de preparación para mejorar seguridad comunicativa.",
    thumbnail:
      "https://images.unsplash.com/photo-1521791136064-7986c2920216?auto=format&fit=crop&w=1200&q=80",
  },
  {
    id: "news-5",
    title: "Comunidad ACVE inicia calendario de foros colaborativos",
    date: "12 de febrero de 2026",
    category: "Comunidad",
    excerpt: "Los foros temáticos permitirán compartir casos, dudas y mejores prácticas entre cohortes.",
    bodyPreview:
      "Las dinámicas estarán moderadas por el equipo docente y buscarán acelerar el aprendizaje aplicado con interacción entre perfiles diversos.",
    thumbnail:
      "https://images.unsplash.com/photo-1521737604893-d14cc237f11d?auto=format&fit=crop&w=1200&q=80",
  },
];

export default function NoticiasPage() {
  return (
    <div className="acve-page">
      <section className="acve-panel acve-section-base">
        <p className="acve-pill mb-4 w-fit">Noticias ACVE</p>
        <h1 className="acve-heading text-4xl md:text-5xl">Actualizaciones institucionales</h1>
        <p className="mt-3 max-w-3xl text-base text-muted-foreground md:text-lg">
          Formato tipo blog con tarjetas horizontales amplias, priorizando contenido textual y con miniaturas de apoyo.
        </p>

        <div className="acve-scrollbar-none mt-8 max-h-[72vh] space-y-4 overflow-y-auto pr-1">
          {newsPosts.map((post) => (
            <article key={post.id} className="rounded-2xl border border-border/80 bg-card p-4 shadow-sm md:p-6">
              <div className="flex flex-col gap-4 md:flex-row">
                <div className="h-32 w-full shrink-0 overflow-hidden rounded-xl border border-border/70 md:h-24 md:w-56">
                  <img alt={`Miniatura de ${post.title}`} className="h-full w-full object-cover" loading="lazy" src={post.thumbnail} />
                </div>

                <div className="flex-1">
                  <p className="text-xs font-semibold uppercase tracking-wide text-primary">
                    {post.category} · {post.date}
                  </p>
                  <h2 className="mt-1 text-xl font-semibold text-foreground md:text-2xl">{post.title}</h2>
                  <p className="mt-2 text-sm text-muted-foreground md:text-base">{post.excerpt}</p>
                  <p className="mt-2 text-sm leading-relaxed text-muted-foreground">{post.bodyPreview}</p>
                </div>
              </div>
            </article>
          ))}
        </div>

        <Link className="acve-button-secondary mt-6 inline-flex px-5 py-2.5 text-sm font-semibold hover:bg-accent" href="/">
          Regresar al inicio
        </Link>
      </section>
    </div>
  );
}