// notfound-page.jsx — /404 page (desktop + mobile)
//
// Tone: warm + transit-themed. "Endstation" = end of the line.
// Reuses Header / Footer + page-frame styles. No new color tokens.

const NF_QUICK_LINKS = [
  {icon: <I.Clock/>,    label: 'Online-Fahrplan',     hint: 'Verbindung suchen'},
  {icon: <I.Map/>,      label: 'Linien & Karte',      hint: 'Alle Buslinien im Kanton Uri'},
  {icon: <I.Alert/>,    label: 'Aktuelle Störungen',  hint: 'Was läuft heute nicht rund?'},
  {icon: <I.Ticket/>,   label: 'Tickets & Tarife',    hint: 'Billette, Abos, Spezialangebote'},
];

// ───────── Desktop NotFound ─────────
function NotFoundPage() {
  return (
    <div className="page-frame">
      <Header/>

      {/* Hero — quiet warm surface, oversized 404 paired with copy */}
      <div style={{background: 'var(--bg-warm)', borderBottom: '1px solid var(--line-2)'}}>
        <div className="block-inner" style={{paddingTop: 72, paddingBottom: 72}}>
          <div style={{
            display: 'grid',
            gridTemplateColumns: '1fr 1fr',
            gap: 80,
            alignItems: 'center',
          }}>
            {/* Left — copy */}
            <div>
              <div style={{
                fontFamily: 'var(--font-display)',
                fontWeight: 700,
                fontSize: 11,
                letterSpacing: '0.16em',
                textTransform: 'uppercase',
                color: 'var(--brand-orange-dark)',
                marginBottom: 18,
                display: 'inline-flex',
                alignItems: 'center',
                gap: 10,
              }}>
                <span style={{width: 28, height: 1.5, background: 'var(--brand-orange)'}}/>
                Fehler 404
              </div>
              <h1 style={{
                fontSize: 80,
                fontWeight: 800,
                letterSpacing: '-0.03em',
                lineHeight: 0.98,
                marginBottom: 22,
                color: 'var(--gray-900)',
              }}>
                Endstation.
              </h1>
              <p style={{
                fontSize: 19,
                color: 'var(--gray-600)',
                lineHeight: 1.55,
                maxWidth: 520,
                marginBottom: 28,
              }}>
                Diese Seite haben wir leider nicht gefunden. Vielleicht wurde sie
                verschoben, umbenannt — oder es hat sich ein Tippfehler in die URL
                eingeschlichen.
              </p>

              {/* Search — pulls user back into the system */}
              <form onSubmit={(e) => e.preventDefault()} style={{
                display: 'flex',
                alignItems: 'center',
                gap: 10,
                background: 'white',
                border: '1.5px solid var(--gray-900)',
                borderRadius: 999,
                padding: '6px 6px 6px 22px',
                maxWidth: 520,
                marginBottom: 22,
                boxShadow: 'var(--shadow-card)',
              }}>
                <span style={{color: 'var(--gray-600)'}}><I.Search/></span>
                <input
                  type="text"
                  placeholder="Wonach suchen Sie?"
                  style={{
                    flex: 1,
                    border: 0,
                    outline: 'none',
                    background: 'transparent',
                    fontFamily: 'var(--font-body)',
                    fontSize: 16,
                    color: 'var(--gray-900)',
                    padding: '12px 0',
                    minWidth: 0,
                  }}
                />
                <button type="submit" className="btn btn-primary" style={{padding: '12px 22px'}}>
                  Suchen
                </button>
              </form>

              <div style={{display: 'flex', alignItems: 'center', gap: 22, flexWrap: 'wrap'}}>
                <a href="#" className="btn btn-ghost" style={{padding: '14px 24px'}}>
                  Zur Startseite
                </a>
                <a href="#" className="link-arrow" style={{fontSize: 15}}>
                  Kontakt aufnehmen <I.Arrow/>
                </a>
              </div>
            </div>

            {/* Right — oversized 404 with stop-flag metaphor */}
            <div style={{display: 'flex', justifyContent: 'center', alignItems: 'center'}}>
              <NotFoundGlyph/>
            </div>
          </div>
        </div>
      </div>

      {/* Quick-link rail */}
      <div className="block-inner" style={{paddingTop: 56, paddingBottom: 80}}>
        <div style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'baseline',
          marginBottom: 22,
        }}>
          <h2 style={{
            fontFamily: 'var(--font-display)',
            fontSize: 26,
            fontWeight: 700,
            letterSpacing: '-0.015em',
          }}>So kommen Sie weiter</h2>
          <a href="#" className="link-arrow" style={{fontSize: 14}}>
            Alle Bereiche <I.Arrow/>
          </a>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gap: 16,
        }}>
          {NF_QUICK_LINKS.map(l => (
            <a key={l.label} href="#" style={{
              display: 'flex',
              flexDirection: 'column',
              gap: 14,
              padding: '22px 22px 20px',
              background: 'white',
              border: '1px solid var(--line-2)',
              borderRadius: 14,
              textDecoration: 'none',
              color: 'inherit',
              minHeight: 168,
            }}>
              <span style={{
                width: 44, height: 44,
                borderRadius: 12,
                background: 'var(--brand-orange-tint)',
                color: 'var(--brand-orange-dark)',
                display: 'inline-flex',
                alignItems: 'center',
                justifyContent: 'center',
              }}>{l.icon}</span>
              <div style={{flex: 1}}>
                <div style={{
                  fontFamily: 'var(--font-display)',
                  fontWeight: 700,
                  fontSize: 17,
                  color: 'var(--gray-900)',
                  marginBottom: 4,
                  letterSpacing: '-0.01em',
                }}>{l.label}</div>
                <div style={{fontSize: 13, color: 'var(--gray-600)', lineHeight: 1.5}}>{l.hint}</div>
              </div>
              <span style={{color: 'var(--gray-600)', display: 'inline-flex'}}><I.Arrow/></span>
            </a>
          ))}
        </div>
      </div>

      <Footer/>
    </div>
  );
}

// ───────── The big "404" glyph — playful stop-flag treatment ─────────
function NotFoundGlyph() {
  return (
    <div style={{position: 'relative', width: 420, height: 360}}>
      {/* "404" — display numeral, orange, slight overlap */}
      <div style={{
        position: 'absolute',
        inset: 0,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontFamily: 'var(--font-display)',
        fontWeight: 800,
        fontSize: 280,
        letterSpacing: '-0.06em',
        lineHeight: 1,
        color: 'var(--brand-orange)',
      }}>
        404
      </div>

      {/* Stop-request flag — sits on top of the "0" like a bus stop */}
      <div style={{
        position: 'absolute',
        top: 28,
        left: '50%',
        transform: 'translateX(-50%)',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        pointerEvents: 'none',
      }}>
        <div style={{
          background: 'var(--gray-900)',
          color: 'white',
          fontFamily: 'var(--font-display)',
          fontWeight: 700,
          fontSize: 10,
          letterSpacing: '0.18em',
          textTransform: 'uppercase',
          padding: '6px 12px',
          borderRadius: 999,
          marginBottom: 6,
        }}>
          Nicht gefunden
        </div>
        <div style={{
          width: 2,
          height: 18,
          background: 'var(--gray-900)',
        }}/>
      </div>
    </div>
  );
}

// ───────── Mobile NotFound ─────────
function MNotFoundPage() {
  return (
    <div className="page-frame" style={{fontSize: 15}}>
      <HeaderMobile/>

      <div style={{background: 'var(--bg-warm)', padding: '32px 16px 36px', borderBottom: '1px solid var(--line-2)'}}>
        <div style={{
          fontFamily: 'var(--font-display)',
          fontWeight: 700,
          fontSize: 10,
          letterSpacing: '0.16em',
          textTransform: 'uppercase',
          color: 'var(--brand-orange-dark)',
          marginBottom: 14,
        }}>
          Fehler 404
        </div>

        {/* Stacked: glyph on top, copy below */}
        <div style={{
          fontFamily: 'var(--font-display)',
          fontWeight: 800,
          fontSize: 140,
          letterSpacing: '-0.05em',
          lineHeight: 0.95,
          color: 'var(--brand-orange)',
          marginBottom: 12,
        }}>404</div>

        <h1 style={{
          fontSize: 36,
          fontWeight: 800,
          letterSpacing: '-0.02em',
          lineHeight: 1.02,
          marginBottom: 12,
        }}>
          Endstation.
        </h1>
        <p style={{fontSize: 15, color: 'var(--gray-600)', lineHeight: 1.55, marginBottom: 20}}>
          Diese Seite haben wir leider nicht gefunden. Vielleicht wurde sie
          verschoben oder es hat sich ein Tippfehler eingeschlichen.
        </p>

        <form onSubmit={(e) => e.preventDefault()} style={{
          display: 'flex',
          alignItems: 'center',
          gap: 8,
          background: 'white',
          border: '1.5px solid var(--gray-900)',
          borderRadius: 999,
          padding: '6px 6px 6px 18px',
          marginBottom: 16,
        }}>
          <span style={{color: 'var(--gray-600)', display: 'inline-flex'}}><I.Search/></span>
          <input
            type="text"
            placeholder="Suchen…"
            style={{
              flex: 1, border: 0, outline: 'none', background: 'transparent',
              fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--gray-900)',
              padding: '10px 0', minWidth: 0,
            }}
          />
          <button type="submit" className="btn btn-primary" style={{padding: '10px 18px', fontSize: 14}}>
            OK
          </button>
        </form>

        <a href="#" className="btn btn-ghost" style={{padding: '12px 22px', fontSize: 14}}>
          Zur Startseite
        </a>
      </div>

      {/* Quick links — stacked rows on mobile */}
      <div style={{padding: '24px 16px 28px'}}>
        <h2 style={{
          fontFamily: 'var(--font-display)',
          fontSize: 18,
          fontWeight: 700,
          letterSpacing: '-0.01em',
          marginBottom: 12,
        }}>So kommen Sie weiter</h2>

        <div style={{display: 'flex', flexDirection: 'column', gap: 10}}>
          {NF_QUICK_LINKS.map(l => (
            <a key={l.label} href="#" style={{
              display: 'flex',
              alignItems: 'center',
              gap: 14,
              padding: '14px 16px',
              background: 'white',
              border: '1px solid var(--line-2)',
              borderRadius: 12,
              textDecoration: 'none',
              color: 'inherit',
            }}>
              <span style={{
                width: 40, height: 40,
                borderRadius: 10,
                background: 'var(--brand-orange-tint)',
                color: 'var(--brand-orange-dark)',
                display: 'inline-flex',
                alignItems: 'center',
                justifyContent: 'center',
                flexShrink: 0,
              }}>{l.icon}</span>
              <div style={{flex: 1, minWidth: 0}}>
                <div style={{
                  fontFamily: 'var(--font-display)',
                  fontWeight: 700,
                  fontSize: 15,
                  color: 'var(--gray-900)',
                  marginBottom: 2,
                }}>{l.label}</div>
                <div style={{fontSize: 12, color: 'var(--gray-600)', lineHeight: 1.4}}>{l.hint}</div>
              </div>
              <span style={{color: 'var(--gray-600)', display: 'inline-flex', flexShrink: 0}}><I.Arrow/></span>
            </a>
          ))}
        </div>
      </div>

      <MFooter showMeta={false}/>
    </div>
  );
}

Object.assign(window, { NotFoundPage, MNotFoundPage });