---
import { getCollection } from 'astro:content';
import Base from '../layouts/Base.astro';

const posts = (await getCollection('news', ({ data }) => !data.draft))
  .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
  .slice(0, 3);
const fmt = (d) => new Intl.DateTimeFormat('en-GB', { dateStyle: 'long' }).format(d);
const iso = (d) => d.toISOString().slice(0, 10);
// Reading time from the Markdown body (~220 wpm) — differentiating card metadata;
// category/author are identical across all articles, so cards omit them (NN/g).
const readMin = (p) => Math.max(1, Math.round((p.body ?? '').split(/\s+/).length / 220));
// Services per the Science Portal spec; unbuilt ones are labelled, never faked.
const services = [
  { title: 'Proposals', href: '/proposals', desc: 'Submit observation proposals, including ToO / MWL requests.', badge: 'mock' },
  { title: 'Data Explorer', href: 'https://padc-ctao-data-explorer.obspm.fr/', ext: true, desc: 'Search and download CTAO science data products.', badge: 'ext' },
  { title: 'Dashboard', href: '/dashboard', desc: 'Your proposals, data products and support tickets in one place.', badge: 'mock' },
  { title: 'User Support', href: '/support', desc: 'Help desk, FAQ, user forum and mailing lists.', badge: 'mock' },
  { title: 'Software', desc: 'Science analysis tools and pipelines.', badge: 'tbd' },
  { title: 'Documentation', desc: 'User guides and technical documentation.', badge: 'tbd' },
];
---
<Base title="CTAO Science Portal" description="News, observation proposals, data and user services of the Cherenkov Telescope Array Observatory" ambient>
  <section class="hero-band">
    <div class="band-bg" aria-hidden="true"></div>
    <div class="container hero">
      <div class="eyebrow">Cherenkov Telescope Array Observatory</div>
      <h1>CTAO Science Portal</h1>
      <p>Exploring the Universe at the Highest Energies</p>
      {/* Search lives in the header (one search location); the hero carries the
          two core scientist tasks per SPEC §3.1 instead — classic hero-CTA pair. */}
      <div class="hero-cta">
        <a class="btn external" href="https://padc-ctao-data-explorer.obspm.fr/" target="_blank" rel="noopener">Explore the data</a>
        <a class="btn btn--ghost" href="/proposals">Submit a proposal</a>
      </div>
      {posts[0] && (
        <p class="hero-teaser">Latest: <a href={`/news/${posts[0].id}`}>{posts[0].data.title}</a></p>
      )}
    </div>
  </section>

  {/* Surface rhythm (DESIGN.md): services on Moon Gray, editorial news on white */}
  <section class="band--moon">
    <div class="container page">
      <div class="section-head"><h2>Services</h2></div>
      <div class="grid">
        {services.map((s) => (
          <article class="card tile">
            <h3>{s.href
              ? (s.ext
                  ? <a class="external" href={s.href} target="_blank" rel="noopener">{s.title}</a>
                  : <a href={s.href}>{s.title}</a>)
              : s.title}</h3>
            <p class="desc">{s.desc}</p>
            {s.badge === 'mock' && <span class="badge-mock">Mock</span>}
            {s.badge === 'ext' && <span class="badge-ext">External — LUX team</span>}
            {s.badge === 'tbd' && <span class="badge-ext">Planned — not yet available</span>}
          </article>
        ))}
      </div>
    </div>
  </section>

  <section class="container page">
    <div class="section-head">
      <h2>Latest news</h2>
      <a class="more" href="/news">All news →</a>
    </div>
    <div class="grid">
      {posts.map((post) => (
        <article class="card">
          {post.data.cover && <img class="cover" src={encodeURI(post.data.cover)} alt="" loading="lazy" />}
          <div class="body">
            <h3><a href={`/news/${post.id}`}>{post.data.title}</a></h3>
            <p class="desc">{post.data.description}</p>
            <div class="meta"><time datetime={iso(post.data.date)}>{fmt(post.data.date)}</time> · {readMin(post)} min read</div>
          </div>
        </article>
      ))}
    </div>
  </section>
</Base>