import type { Metadata } from "next";
import Image from "next/image";
import { PageHero } from "@/components/PageHero";
import { Reveal } from "@/components/Reveal";
import { IMG, NEWS } from "@/lib/data";

export const metadata: Metadata = {
  title: "Actualités",
  description: "News du club de tir STO Ostwald.",
};

export default function NewsPage() {
  return (
    <>
      <PageHero
        kicker="Journal de bord"
        title="Ce qui se passe au stand."
        lead="Parc d’armes, concours, formations. Le STO ne dort pas."
        image={IMG.action}
        pos="center 35%"
      />
      <section className="px-5 py-16 md:px-8 md:py-24">
        <div className="mx-auto max-w-7xl space-y-16">
          {NEWS.map((item, i) => (
            <Reveal key={item.slug}>
              <article className="grid gap-8 lg:grid-cols-12">
                <div className={`hud-frame relative aspect-16/10 overflow-hidden lg:col-span-7 ${i % 2 ? "lg:order-2" : ""}`}>
                  <Image src={item.image} alt="" fill className="object-cover object-[center_22%]" />
                </div>
                <div className="flex flex-col justify-center lg:col-span-5">
                  <p className="font-mono text-[10px] tracking-[0.28em] text-brass uppercase">{item.date}</p>
                  <h2 className="font-display mt-3 text-3xl normal-case tracking-tight md:text-4xl">{item.title}</h2>
                  <p className="mt-4 text-mute">{item.excerpt}</p>
                </div>
              </article>
            </Reveal>
          ))}
        </div>
      </section>
    </>
  );
}