// ── 404 / NotFound ───────────────────────────────────────
// Used for unknown hash routes. Quiet, branded, points to the main paths.

function NotFound({ theme, dark, lang, nav, pageData }) {
  const slug = pageData?.slug;
  const destinations = [
    { id: "home",       label: { en: "Home",                es: "Inicio" } },
    { id: "archive",    label: { en: "Archive · " + (window.WS_CURRENT && window.WS_CURRENT.num || 191) + " editions", es: "Archivo · " + (window.WS_CURRENT && window.WS_CURRENT.num || 191) + " ediciones" } },
    { id: "activities", label: { en: "Activities",          es: "Actividades" } },
    { id: "audiobooks", label: { en: "Audio · Podcast",     es: "Audio · Podcast" } },
    { id: "tailor",     label: { en: "TailorAudioBooks",    es: "TailorAudioBooks" } },
    { id: "packs",      label: { en: "Activity packs",      es: "Packs de actividades" } },
    { id: "profile",    label: { en: "My library",          es: "Mi biblioteca" } },
    { id: "about",      label: { en: "About · Press · Contact · Legal", es: "Sobre · Prensa · Contacto · Legal" } },
  ];

  return (
    <div style={{ background: theme.bg, color: theme.text, paddingTop:"5rem", minHeight:"100vh" }}>
      <div style={{
        padding:"5rem clamp(1.5rem, 5vw, 5vw)",
        background: dark
          ? `radial-gradient(ellipse 60% 50% at 50% 100%, rgba(125,190,90,.08) 0%, transparent 60%)`
          : `radial-gradient(ellipse 60% 50% at 50% 100%, rgba(125,190,90,.06) 0%, transparent 60%)`,
        position:"relative", overflow:"hidden",
      }}>
        <Grain amount={.04}/>
        <div className="wrap-sm" style={{ position:"relative", textAlign:"center" }}>
          <div className="mono" style={{
            fontSize:".68rem", color: theme.sage, letterSpacing:".22em",
            textTransform:"uppercase", marginBottom:"1.25rem",
          }}>404 · {lang==="en"?"Not in this archive":"No en este archivo"}</div>

          <h1 className="serif" style={{
            fontStyle:"italic", fontWeight: 300, fontSize:"clamp(2.4rem, 6vw, 5rem)",
            color: theme.text, lineHeight: 1, letterSpacing:"-.025em", marginBottom:"1.25rem",
          }}>{lang==="en"
            ? <>The page <em style={{ color: theme.sage }}>you're looking for</em><br/>isn't here.</>
            : <>La página <em style={{ color: theme.sage }}>que buscas</em><br/>no está aquí.</>}</h1>

          <p style={{
            color: theme.text2, fontSize:"1.05rem", lineHeight: 1.7, fontWeight: 300,
            maxWidth: 540, margin:"0 auto 2.5rem",
          }}>
            {lang==="en"
              ? "It might have been moved, renamed, or never existed. WiseTip is a slow archive — nothing is published twice."
              : "Pudo moverse, renombrarse, o no haber existido. WiseTip es un archivo lento — nada se publica dos veces."}
          </p>

          {slug && (
            <div style={{
              display:"inline-block", padding:"7px 14px", borderRadius: 14,
              background: theme.sage3, border:`1px dashed ${theme.border2}`,
              fontSize:".78rem", color: theme.text3, marginBottom:"2rem",
            }}>
              <span className="mono">/{slug}</span>
            </div>
          )}

          <div style={{ display:"flex", gap: 12, justifyContent:"center", flexWrap:"wrap", marginBottom:"3.5rem" }}>
            <button onClick={() => nav("home")} style={{
              background: theme.sage, color: dark?"#050F07":"#fff", border:"none",
              padding:"12px 24px", borderRadius: 24, fontSize:".88rem", fontWeight: 600, cursor:"pointer",
            }}>← {lang==="en"?"Back to WiseTip":"Volver a WiseTip"}</button>
            <button onClick={() => nav("archive")} style={{
              background:"transparent", color: theme.text, border:`1px solid ${theme.border2}`,
              padding:"12px 24px", borderRadius: 24, fontSize:".88rem", cursor:"pointer",
            }}>{lang==="en"?"Browse the archive":"Explorar el archivo"} →</button>
          </div>
        </div>
      </div>

      <div className="section" style={{ padding:"3rem clamp(1.5rem, 5vw, 5vw) 4rem" }}>
        <div className="wrap-sm">
          <div className="label-tiny" style={{ color: theme.gold, marginBottom: 14, textAlign:"center" }}>
            {lang==="en"?"Or pick a destination":"O elige un destino"}
          </div>
          <div className="grid-2" style={{ gap: 8 }}>
            {destinations.map(d => (
              <button key={d.id} onClick={() => nav(d.id)} style={{
                background: dark ? theme.panel : "#fff", border:`1px solid ${theme.border}`,
                borderRadius: 6, padding:"14px 18px", textAlign:"left", cursor:"pointer",
                color: theme.text, fontSize:".88rem",
                display:"flex", justifyContent:"space-between", alignItems:"center",
                transition:"border-color .2s",
              }}>
                <span className="serif italic">{d.label[lang]}</span>
                <span style={{ color: theme.sage }}>→</span>
              </button>
            ))}
          </div>
        </div>
      </div>

      <Footer theme={theme} dark={dark} lang={lang} nav={nav}/>
    </div>
  );
}

Object.assign(window, { NotFound });