footer

"use client";

import { useEffect, useRef } from "react";

export default function Demo() {
  const edgeRef = useRef<HTMLDivElement>(null);
  const gridRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    // disable heavy motion on touch devices
    if (window.matchMedia("(pointer: coarse)").matches) return;

    const onMove = (e: MouseEvent) => {
      if (!edgeRef.current || !gridRef.current) return;

      const x = e.clientX / window.innerWidth - 0.5;
      const y = e.clientY / window.innerHeight - 0.5;

      edgeRef.current.style.transform =
        `translate3d(${x * 40}px, ${y * 8}px, 0)`;

      gridRef.current.style.transform =
        `perspective(1000px) rotateX(${y * -2}deg) rotateY(${x * 2}deg)`;
    };

    window.addEventListener("mousemove", onMove);
    return () => window.removeEventListener("mousemove", onMove);
  }, []);

  return (
    <>
      {/* Inline styles – no CSS import needed */}
      <style>{`
        :root {
          --bg: #030305;
          --glass: rgba(255,255,255,0.04);
          --stroke: rgba(255,255,255,0.12);
          --text: #e5e5e5;
        }

        .glass-footer {
          position: relative;
          padding: 4rem 1.5rem 3rem;
          background: var(--glass);
          backdrop-filter: blur(40px) saturate(160%);
          border-top: 1px solid var(--stroke);
          overflow: hidden;
        }

        .liquid-surface {
          position: absolute;
          inset: 0;
          background: linear-gradient(
            180deg,
            rgba(255,255,255,0.06),
            rgba(255,255,255,0.01)
          );
          z-index: -1;
        }

        .liquid-edge {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 2px;
          background: linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.8),
            transparent
          );
          opacity: 0.5;
          will-change: transform;
        }

        .footer-grid {
          max-width: 1400px;
          margin: auto;
          display: grid;
          gap: 2.5rem;
          grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
          transform-style: preserve-3d;
          will-change: transform;
        }

        .brand-title {
          font-size: clamp(2.5rem, 6vw, 4rem);
          font-weight: 900;
          line-height: 0.9;
          background: linear-gradient(#ffffff, #777777);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        .brand-sub {
          font-family: monospace;
          font-size: 0.75rem;
          opacity: 0.5;
          max-width: 220px;
        }

        .footer-heading {
          font-family: monospace;
          font-size: 0.75rem;
          letter-spacing: 0.2em;
          opacity: 0.4;
          margin-bottom: 1rem;
        }

        .footer-links li {
          list-style: none;
          margin-bottom: 0.5rem;
        }

        .footer-links a {
          color: var(--text);
          text-decoration: none;
          display: inline-block;
          transition: transform 0.3s ease, opacity 0.3s ease;
        }

        .footer-links a:hover {
          transform: translateX(6px);
          opacity: 1;
        }

        .status-panel {
          font-family: monospace;
          font-size: 0.75rem;
          opacity: 0.6;
        }

        .status-row {
          display: flex;
          justify-content: space-between;
          margin-bottom: 0.4rem;
        }

        .status-value {
          color: #ffffff;
        }

        @media (max-width: 640px) {
          .footer-grid {
            gap: 2rem;
          }
        }
      `}</style>

      <footer className="glass-footer">
        <div className="liquid-surface" />
        <div ref={edgeRef} className="liquid-edge" />

        <div ref={gridRef} className="footer-grid">
          <div>
            <h2 className="brand-title">
              Molten
              <br />
              Core
            </h2>
            <p className="brand-sub">
              EXPERIMENTAL INTERFACE V.04
              <br />
              REFRACTION ENABLED
            </p>
          </div>

          <div>
            <h4 className="footer-heading">NAVIGATION</h4>
            <ul className="footer-links">
              <li><a href="#">Architecture</a></li>
              <li><a href="#">Studio</a></li>
              <li><a href="#">Manifesto</a></li>
              <li><a href="#">Journal</a></li>
            </ul>
          </div>

          <div>
            <h4 className="footer-heading">CONNECT</h4>
            <ul className="footer-links">
              <li><a href="#">Twitter / X</a></li>
              <li><a href="#">GitHub</a></li>
              <li><a href="#">LinkedIn</a></li>
              <li><a href="#">Read.cv</a></li>
            </ul>
          </div>

          <div className="status-panel">
            <div className="status-row">
              <span>SYSTEM_LATENCY</span>
              <span className="status-value">14ms</span>
            </div>
            <div className="status-row">
              <span>REFRACTION_INDEX</span>
              <span className="status-value">1.45</span>
            </div>
            <div className="status-row">
              <span>VISCOSITY</span>
              <span className="status-value">HIGH</span>
            </div>

            <div style={{ marginTop: "1.5rem" }}>
              © 2026 21.dev
            </div>
          </div>
        </div>
      </footer>
    </>
  );
}