// import { Page, Card, Text } from "@shopify/polaris";

// export default function NotFound() {
//   return (
//     <Page>
//       <Card>
//         <Text variant="headingLg" as="h1">
//           404 - Page Not Found
//         </Text>
//         <Text as="p">
//           The page you are looking for does not exist.
//         </Text>
//       </Card>
//     </Page>
//   );
// }


import {Page, Card, Text, Button, Box, BlockStack, InlineStack, Link} from "@shopify/polaris";

export default function NotFound() {
  return (
    <Page fullWidth>
      {/* Animated gradient background */}
      <div className="notfound-gradient">
        <div className="gradient-overlay" />
        <div className="gradient-blur" />
      </div>

      {/* Content layer */}
      <Box minHeight="80vh" padding="400" position="relative" zIndex="1">
        <Box
          maxWidth="720px"
          marginInline="auto"
          paddingBlockStart="400"
          paddingBlockEnd="600"
        >
          {/* Glassy card with subtle border glow */}
          <div className="glass-wrap">
            <Card>
              <Box padding="600">
                <BlockStack gap="400" align="center">
                  {/* Decorative SVG */}
                  <div className="hero-icon" aria-hidden="true">
                    <svg
                      width="140"
                      height="140"
                      viewBox="0 0 140 140"
                      role="img"
                      aria-label="Lost page"
                    >
                      <defs>
                        <linearGradient id="g1" x1="0%" y1="0%" x2="100%" y2="100%">
                          <stop offset="0%" stopColor="rgba(99, 102, 241, 1)"/>
                          <stop offset="100%" stopColor="rgba(236, 72, 153, 1)"/>
                        </linearGradient>
                      </defs>
                      <circle cx="70" cy="70" r="64" fill="url(#g1)" opacity="0.15"/>
                      <g transform="translate(20,22)">
                        <text
                          x="50"
                          y="62"
                          textAnchor="middle"
                          fontSize="56"
                          fontWeight="700"
                          fill="url(#g1)"
                          className="shimmer"
                        >
                          404
                        </text>
                        <circle cx="94" cy="94" r="6" fill="url(#g1)" className="floaty"/>
                        <circle cx="16" cy="18" r="4" fill="url(#g1)" className="floaty delay"/>
                      </g>
                    </svg>
                  </div>

                  <Text as="h1" variant="heading2xl" alignment="center">
                    404 — Page not found
                  </Text>
                  <Text as="p" variant="bodyLg" tone="subdued" alignment="center">
                    The page you’re looking for doesn’t exist or may have moved.
                  </Text>

                  {/* Actions */}
                  <InlineStack gap="300" align="center">
                    <Button
                      variant="primary"
                      url="/"
                      onClick={(e) => {
                        // keep SPA routers happy—adjust if you use react-router/next/navigation
                      }}
                    >
                      Go to dashboard
                    </Button>
                    <Button onClick={() => window.history.length > 1 ? window.history.back() : (window.location.href = "/")}>
                      Go back
                    </Button>
                    <Button variant="tertiary" onClick={() => window.location.reload()}>
                      Reload
                    </Button>
                  </InlineStack>

                  {/* Helpful links (optional) */}
                  <InlineStack gap="300" align="center">
                    <Text as="span" tone="subdued">
                      Or check{" "}
                      <Link url="/help" removeUnderline>Help Center</Link>{" "}
                      or{" "}
                      <Link url="/contact" removeUnderline>Contact support</Link>.
                    </Text>
                  </InlineStack>
                </BlockStack>
              </Box>
            </Card>
          </div>
        </Box>
      </Box>

      {/* component-scoped styles */}
      <style jsx>{`
        .notfound-gradient {
          position: fixed;
          inset: 0;
          overflow: hidden;
          z-index: 0;
          pointer-events: none;
        }
        .gradient-overlay {
          position: absolute;
          inset: -20%;
          background: linear-gradient(120deg,
            #6366f1 0%,
            #8b5cf6 25%,
            #ec4899 50%,
            #f97316 75%,
            #22d3ee 100%
          );
          animation: gradientShift 14s ease-in-out infinite alternate;
          filter: saturate(1.1) contrast(1.05);
          opacity: 0.25;
        }
        .gradient-blur {
          position: absolute;
          inset: 0;
          backdrop-filter: blur(48px);
          -webkit-backdrop-filter: blur(48px);
        }

        .glass-wrap {
          position: relative;
          border-radius: 16px;
          overflow: hidden;
          background: rgba(255, 255, 255, 0.65);
          box-shadow:
            0 10px 30px rgba(17, 24, 39, 0.12),
            inset 0 0 0 1px rgba(99, 102, 241, 0.12);
        }
        .glass-wrap::before {
          content: "";
          position: absolute;
          inset: -1px;
          border-radius: 18px;
          background: conic-gradient(
            from 180deg at 50% 50%,
            rgba(99,102,241,0.45),
            rgba(236,72,153,0.45),
            rgba(34,211,238,0.45),
            rgba(99,102,241,0.45)
          );
          filter: blur(18px);
          opacity: 0.35;
          z-index: -1;
          animation: rotateGlow 10s linear infinite;
        }

        .hero-icon {
          transform: translateZ(0);
          will-change: transform, opacity;
        }
        .floaty {
          animation: float 6s ease-in-out infinite;
          transform-origin: center;
        }
        .floaty.delay {
          animation-delay: 1.5s;
        }
        .shimmer {
          fill: url(#g1);
          animation: shimmer 2.8s ease-in-out infinite;
        }

        /* Animations */
        @keyframes gradientShift {
          0% { transform: translate3d(-6%, -6%, 0) scale(1.05); }
          100% { transform: translate3d(6%, 6%, 0) scale(1.05); }
        }
        @keyframes rotateGlow {
          to { transform: rotate(360deg); }
        }
        @keyframes float {
          0%, 100% { transform: translateY(0px); }
          50% { transform: translateY(-6px); }
        }
        @keyframes shimmer {
          0%, 100% { opacity: 0.85; }
          50% { opacity: 1; }
        }

        /* Buttons: subtle interactive motion */
        :global(button.Polaris-Button) {
          transition: transform 160ms ease, box-shadow 160ms ease;
        }
        :global(button.Polaris-Button:hover) {
          transform: translateY(-1px);
          box-shadow: 0 6px 18px rgba(99, 102, 241, 0.15);
        }
        :global(button.Polaris-Button:active) {
          transform: translateY(0);
          box-shadow: 0 2px 8px rgba(99, 102, 241, 0.12);
        }

        /* Respect dark mode if your app toggles a dark surface */
        @media (prefers-color-scheme: dark) {
          .glass-wrap {
            background: rgba(17, 24, 39, 0.6);
            box-shadow:
              0 10px 30px rgba(0, 0, 0, 0.35),
              inset 0 0 0 1px rgba(148, 163, 184, 0.12);
          }
        }
      `}</style>
    </Page>
  );
}