/* global React */
const { useState: useStateB, useEffect: useEffectB } = React;

const POSTS = {
  "kyiv-rhinos": {
    tag: "Community",
    date: "April 2024",
    img: "assets/news-rhinos.jpg",
    title: "Hosting the Kyiv Rhinos in West Yorkshire",
    standfirst: "Raiseprint and The Original Metal Sign Company partnered with Keighley Cougars to give the Ukrainian boys' rugby team — Kyiv Rhinos — a tour of West Yorkshire.",
    body: [
      "When Keighley Cougars approached us to help host a youth rugby team from Kyiv, we said yes before they'd finished the sentence. The Kyiv Rhinos are an under-16 squad whose home pitch sits less than 200 miles from an active front line. Bringing them to Yorkshire for a week of rugby, food, and ordinary teenage joy felt like the only correct answer.",
      "We partnered with The Original Metal Sign Company to fund travel, kit and accommodation. The boys trained alongside Cougars' academy players, took in a Super League fixture, walked the moors above Haworth, and — for one afternoon — spent a few hours on the floor with us in Keighley, watching cartons come off the press.",
      "The thank-you cards they left behind are pinned in our break room. They will stay there.",
      "Slava Ukraini.",
    ],
  },
  "sbl-die-cutter": {
    tag: "Press",
    date: "March 2025",
    img: "assets/news-sbl.png",
    title: "A UK-first die-cutter from SBL",
    standfirst: "Raiseprint becomes the first UK printer to install SBL's flagship die-cutter — featured in Printweek.",
    body: [
      "The new SBL die-cutter on our floor is the first of its kind in the United Kingdom. It joins a process that already runs three shifts and lifts our die-cutting capacity by close to 40%.",
      "More importantly, it lifts the ceiling on what's possible: tighter tolerances, faster make-readies, and the ability to combine cut, crease, and stripping in a single pass on jobs that previously needed two.",
      "We chose SBL after a year of trials. The decision came down to a simple question — which press could hold a 0.2mm tolerance across a long run on micro-flute? Only this one.",
      "Featured in Printweek, March 2025.",
    ],
  },
  "cougars-sponsor": {
    tag: "Sponsorship",
    date: "December 2024",
    img: "assets/news-cougars.png",
    title: "Primary shirt sponsor for Keighley Cougars RLFC",
    standfirst: "We're proud to put our name on the front of the Keighley Cougars home shirt for the 2025 season.",
    body: [
      "Keighley Cougars are the rugby league club at the heart of our home town. We've been quiet supporters for decades — sponsoring training kit, donating prizes, taking blocks of seats for the kids' nights — and from the 2025 season our name sits on the front of the home shirt.",
      "It's a partnership rooted in something simple: both of us have been in Keighley a long time, both of us care about doing things properly, and both of us think the town deserves the same standard you'd find anywhere in the country.",
      "Come down to Cougar Park. Bring the family. Watch a match.",
    ],
  },
  "komori-press": {
    tag: "Press",
    date: "November 2017",
    img: "assets/news-komori.jpg",
    title: "Raiseprint boosts production with Komori buy",
    standfirst: "An investment in our litho line — adding a Komori GL-629 to the floor.",
    body: [
      "The Komori GL-629 has been a workhorse for us since the day it was commissioned. Six colours plus coater, B1 sheet, in-line UV — it expanded what we could promise on press and what we could deliver on time.",
      "Eight years on, it still runs daily. The press is part of the reason we can take on long-run premium carton work without compromising on colour fidelity, drying time, or finish.",
      "Originally featured in Printweek, November 2017.",
    ],
  },
};

function PostPage({ slug, onNavigate }) {
  useReveal();
  const post = POSTS[slug];
  if (!post) {
    return (
      <main className="page shell" style={{ padding: "120px 0", textAlign: "center" }}>
        <div className="crumb" style={{ justifyContent: "center", marginBottom: 16 }}>404</div>
        <h1 className="h-display" style={{ fontSize: 64, margin: "0 0 24px" }}>Post not <em>found</em></h1>
        <a className="btn" onClick={(e) => { e.preventDefault(); onNavigate("news"); }} href="#news">
          Back to news <span className="arr">→</span>
        </a>
      </main>
    );
  }
  return (
    <main className="page">
      <section className="shell page-hero">
        <div style={{ maxWidth: 820, margin: "0 auto" }}>
          <div className="crumb reveal" style={{ marginBottom: 24, cursor: "pointer" }} onClick={() => onNavigate("news")}>
            ← News · {post.tag} · {post.date}
          </div>
          <h1 className="reveal d1" style={{ fontFamily: "var(--f-display)", fontSize: "clamp(40px, 6vw, 84px)", letterSpacing: "-0.025em", lineHeight: 1, fontWeight: 400, margin: "16px 0 28px" }}>
            {post.title.split(" ").slice(0, -1).join(" ")} <em style={{ color: "var(--rust)", fontStyle: "italic" }}>{post.title.split(" ").slice(-1)}</em>
          </h1>
          <p className="lead reveal d2" style={{ fontSize: 20, lineHeight: 1.5, color: "var(--ink-soft)", margin: "0 0 8px", maxWidth: "none" }}>
            {post.standfirst}
          </p>
        </div>
      </section>

      <section className="shell" style={{ paddingTop: 40 }}>
        <div className="reveal" style={{ maxWidth: 1100, margin: "0 auto" }}>
          <img src={post.img} alt={post.title} style={{ width: "100%", aspectRatio: "16/10", objectFit: "cover", borderRadius: 4 }} />
        </div>
      </section>

      <section className="shell sec" style={{ paddingTop: 80 }}>
        <div style={{ maxWidth: 720, margin: "0 auto" }}>
          {post.body.map((p, i) => (
            <p key={i} className="reveal" style={{ fontSize: 18, lineHeight: 1.7, color: "var(--ink)", margin: "0 0 24px" }}>{p}</p>
          ))}
          <div style={{ marginTop: 48, paddingTop: 32, borderTop: "1px solid var(--hair)" }}>
            <a className="linkish" onClick={(e) => { e.preventDefault(); onNavigate("news"); }} href="#news">← All news</a>
          </div>
        </div>
      </section>

      <CTA onNavigate={onNavigate} />
    </main>
  );
}

Object.assign(window, { PostPage, POSTS });