// page-404.jsx — Oops, fel adress

function Page404() {
  return (
    <div style={{
      minHeight: "70vh",
      display: "flex",
      flexDirection: "column",
      alignItems: "center",
      justifyContent: "center",
      textAlign: "center",
      padding: "var(--gutter)",
      gap: "2rem",
    }}>
      <div style={{
        fontFamily: "var(--f-display)",
        fontSize: "clamp(6rem, 20vw, 14rem)",
        fontWeight: 900,
        lineHeight: 1,
        color: "var(--maroon)",
        letterSpacing: "-0.02em",
      }}>
        404
      </div>

      <div>
        <h1 style={{
          fontFamily: "var(--f-display)",
          fontSize: "clamp(1.8rem, 5vw, 3rem)",
          fontWeight: 800,
          color: "var(--navy)",
          marginBottom: "0.5rem",
        }}>
          Oj då, det gick lite tokigt!
        </h1>
        <p style={{ color: "var(--stone)", maxWidth: "36ch", margin: "0 auto" }}>
          Den här sidan finns inte — kanske försvann den i tacklingen.
        </p>
      </div>

      <img
        src="/assets/404.png"
        alt="Rugbyspelarna är lika förvirrade som du"
        style={{
          width: "min(420px, 90vw)",
          borderRadius: "var(--r-3)",
          boxShadow: "0 8px 32px rgba(14,22,40,0.18)",
          transform: "rotate(-2deg)",
        }}
      />

      <Link
        to="/"
        style={{
          display: "inline-block",
          background: "var(--maroon)",
          color: "var(--cream)",
          fontFamily: "var(--f-display)",
          fontWeight: 700,
          fontSize: "1.15rem",
          letterSpacing: "0.04em",
          padding: "0.75rem 2.5rem",
          borderRadius: "var(--r-2)",
          textTransform: "uppercase",
        }}
      >
        Tillbaka till startsidan
      </Link>
    </div>
  );
}