const { useState, useEffect, useRef } = React;

const TWEAKS = {
  glowIntensity: 1,
  sweep: true,
  logoSize: 110,
  linkedinUrl: "https://www.linkedin.com/in/rasheemtareq/",
  resumeUrl: "https://docs.google.com/document/d/1OLbpicfREnHwZsHyHCnTCaDGeVT3fJWeg9-vLnnugMc/edit?usp=sharing",
  grain: 0.22,
};

// Slowly cycles a soft accent color through the hue wheel.
function useCyclingAccent(periodMs = 24000) {
  const [hue, setHue] = useState(210);
  useEffect(() => {
    let raf;
    const start = performance.now();
    const tick = (t) => {
      const elapsed = (t - start) % periodMs;
      setHue((elapsed / periodMs) * 360);
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [periodMs]);
  // hsl with high lightness, modest saturation reads as "soft glow"
  return `hsl(${hue.toFixed(1)}, 80%, 72%)`;
}

// Blur + fade in via motion.dev once on mount.
function useBlurFadeIn(delay = 0, duration = 1.2) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el || !window.Motion) return;
    window.Motion.animate(
      el,
      { opacity: [0, 1], filter: ["blur(20px)", "blur(0px)"] },
      { duration, delay, easing: [0.22, 1, 0.36, 1] }
    );
  }, [delay, duration]);
  return ref;
}

// Per-frame canvas noise — actual moving "film grain" overlay.
function FilmGrain({ opacity = 0.22 }) {
  const ref = useRef(null);
  useEffect(() => {
    const canvas = ref.current;
    if (!canvas) return;
    const ctx = canvas.getContext("2d");
    const W = 2400, H = 2400;
    canvas.width = W;
    canvas.height = H;
    let raf;
    let last = 0;
    const draw = (t) => {
      // ~24fps for a filmic feel without burning CPU
      if (t - last > 42) {
        const img = ctx.createImageData(W, H);
        const d = img.data;
        for (let i = 0; i < d.length; i += 4) {
          const v = (Math.random() * 255) | 0;
          d[i] = v; d[i+1] = v; d[i+2] = v; d[i+3] = 255;
        }
        ctx.putImageData(img, 0, 0);
        last = t;
      }
      raf = requestAnimationFrame(draw);
    };
    raf = requestAnimationFrame(draw);
    return () => cancelAnimationFrame(raf);
  }, []);
  return (
    <canvas
      ref={ref}
      aria-hidden
      style={{
        position: "fixed",
        inset: 0,
        width: "100%",
        height: "100%",
        opacity,
        mixBlendMode: "overlay",
        pointerEvents: "none",
        zIndex: 9999,
      }}
    />
  );
}

function AnimatedLogo({ size, intensity, sweep, accent }) {
  const aspect = RT_VIEWBOX_W / RT_VIEWBOX_H;
  const w = size;
  const h = size / aspect;

  return (
    <div
      style={{
        position: "relative",
        width: w,
        height: h,
        animation: "logoFloat 7s ease-in-out infinite",
      }}
    >
      <div
        style={{
          position: "absolute",
          inset: `${-w * 1.1}px`,
          background: `radial-gradient(closest-side, ${accent}55 0%, ${accent}22 30%, ${accent}0a 60%, transparent 78%)`,
          filter: "blur(50px)",
          animation: "haloPulse 7s cubic-bezier(0.4, 0, 0.6, 1) infinite",
          opacity: intensity,
          pointerEvents: "none",
        }}
      />
      <div
        style={{
          position: "absolute",
          inset: `${-w * 0.5}px`,
          background: `radial-gradient(closest-side, ${accent}88 0%, ${accent}44 32%, transparent 72%)`,
          filter: "blur(28px)",
          animation: "haloPulse 7s cubic-bezier(0.4, 0, 0.6, 1) infinite",
          opacity: intensity,
          pointerEvents: "none",
        }}
      />
      <RtPath
        style={{
          position: "absolute",
          inset: 0,
          width: "100%",
          height: "100%",
          color: accent,
          filter: `blur(${16 * intensity}px)`,
          opacity: 0.8 * intensity,
          mixBlendMode: "screen",
          animation: "bloomPulse 7s cubic-bezier(0.4, 0, 0.6, 1) infinite",
        }}
      />
      <RtPath
        style={{
          position: "absolute",
          inset: 0,
          width: "100%",
          height: "100%",
          color: accent,
          filter: `blur(${5 * intensity}px)`,
          opacity: 0.9 * intensity,
          mixBlendMode: "screen",
          animation: "bloomPulse 7s cubic-bezier(0.4, 0, 0.6, 1) infinite",
        }}
      />
      <RtLogoWithSweep
        accent={accent}
        core="#eaf6ff"
        sweep={sweep}
        sweepDur={9}
        style={{
          position: "absolute",
          inset: 0,
          width: "100%",
          height: "100%",
          filter: `drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 10px ${accent}) drop-shadow(0 0 22px ${accent}cc)`,
        }}
      />
    </div>
  );
}

function Banner({ tweaks }) {
  const logoRef = useBlurFadeIn(0.1, 1.4);
  const descRef = useBlurFadeIn(0.7, 1.2);
  const navRef = useBlurFadeIn(1.0, 1.0);
  const grainSvg =
    "data:image/svg+xml;utf8," +
    encodeURIComponent(
      `<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'>
        <filter id='n'>
          <feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/>
          <feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/>
        </filter>
        <rect width='100%' height='100%' filter='url(#n)'/>
      </svg>`
    );

  return (
    <section
      style={{
        position: "relative",
        minHeight: "100vh",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        padding: "48px 32px",
        background:
          "radial-gradient(ellipse 80% 50% at 50% 50%, #11141b 0%, #07080b 60%, #050609 100%)",
        overflow: "hidden",
      }}
    >
      <div
        aria-hidden
        style={{
          position: "absolute",
          inset: 0,
          background: `radial-gradient(ellipse 60% 40% at 50% 50%, ${tweaks.accent}10, transparent 70%)`,
          pointerEvents: "none",
        }}
      />
      <div
        aria-hidden
        style={{
          position: "absolute",
          inset: 0,
          background:
            "radial-gradient(ellipse 100% 80% at 50% 50%, transparent 50%, rgba(0,0,0,0.6) 100%)",
          pointerEvents: "none",
        }}
      />
      <div
        style={{
          position: "relative",
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          textAlign: "center",
          maxWidth: 720,
        }}
      >
        <div ref={logoRef} style={{ marginBottom: 56, opacity: 0, filter: "blur(20px)" }}>
          <AnimatedLogo
            size={tweaks.logoSize}
            intensity={tweaks.glowIntensity}
            sweep={tweaks.sweep}
            accent={tweaks.accent}
          />
        </div>

        <p
          ref={descRef}
          style={{
            margin: 0,
            fontFamily: '"Instrument Sans", system-ui, sans-serif',
            fontSize: 16,
            lineHeight: 1.6,
            color: "rgba(255,255,255,0.55)",
            maxWidth: 480,
            textWrap: "pretty",
            position: "relative",
            zIndex: 10000,
            opacity: 0,
            filter: "blur(20px)",
          }}
        >
          I'm rebuilding the site from the ground up — new work, new writing,
          new rough edges. Back online soon.
        </p>

        <nav ref={navRef} style={{ marginTop: 36, display: "flex", gap: 18, position: "relative", zIndex: 10000, opacity: 0, filter: "blur(20px)" }}>
          {[
            {
              label: "LinkedIn",
              href: tweaks.linkedinUrl,
              icon: (
                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
                  <path d="M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.04-1.85-3.04-1.86 0-2.14 1.45-2.14 2.95v5.66H9.36V9h3.41v1.56h.05c.48-.9 1.64-1.85 3.37-1.85 3.61 0 4.27 2.37 4.27 5.45v6.29zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.56V9h3.56v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.72v20.56C0 23.23.79 24 1.77 24h20.45C23.21 24 24 23.23 24 22.28V1.72C24 .77 23.21 0 22.22 0z"/>
                </svg>
              ),
            },
            {
              label: "Resume",
              href: tweaks.resumeUrl,
              icon: (
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
                  <path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/>
                  <path d="M14 3v5h5"/>
                  <path d="M9 13h6"/>
                  <path d="M9 17h6"/>
                  <path d="M9 9h2"/>
                </svg>
              ),
            },
          ].map((l) => (
            <a
              key={l.label}
              href={l.href || "#"}
              aria-label={l.label}
              target="_blank"
              rel="noopener noreferrer"
              style={{
                width: 44,
                height: 44,
                display: "inline-flex",
                alignItems: "center",
                justifyContent: "center",
                borderRadius: 12,
                border: "1px solid rgba(255,255,255,0.08)",
                background: "rgba(255,255,255,0.02)",
                color: "rgba(255,255,255,0.7)",
                textDecoration: "none",
                transition: "color 0.2s, border-color 0.2s, background 0.2s, transform 0.2s",
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.color = tweaks.accent;
                e.currentTarget.style.borderColor = `${tweaks.accent}55`;
                e.currentTarget.style.background = `${tweaks.accent}10`;
                e.currentTarget.style.transform = "translateY(-1px)";
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.color = "rgba(255,255,255,0.7)";
                e.currentTarget.style.borderColor = "rgba(255,255,255,0.08)";
                e.currentTarget.style.background = "rgba(255,255,255,0.02)";
                e.currentTarget.style.transform = "translateY(0)";
              }}
            >
              {l.icon}
            </a>
          ))}
        </nav>
      </div>

    </section>
  );
}

function App() {
  const accent = useCyclingAccent(28000);
  return (
    <>
      <Banner tweaks={{ ...TWEAKS, accent }} />
      <FilmGrain opacity={TWEAKS.grain} />
    </>
  );
}

const css = `
@keyframes haloPulse {
  0%, 100% { opacity: 0.75; transform: scale(0.97); }
  50%      { opacity: 1;    transform: scale(1.05); }
}
@keyframes bloomPulse {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}
@keyframes corePulse {
  0%, 100% { filter: drop-shadow(0 0 3px #ffffff) drop-shadow(0 0 10px #7cc8ff) drop-shadow(0 0 22px rgba(124,200,255,0.75)); }
  50%      { filter: drop-shadow(0 0 5px #ffffff) drop-shadow(0 0 16px #7cc8ff) drop-shadow(0 0 34px rgba(124,200,255,0.95)); }
}
@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@keyframes rtSweep {
  0%   { transform: translateX(-40%); }
  45%  { transform: translateX(40%); }
  100% { transform: translateX(40%); }
}
@keyframes grainShift {
  0%   { transform: translate(0, 0); }
  10%  { transform: translate(-3%, -2%); }
  20%  { transform: translate(2%, 3%); }
  30%  { transform: translate(-2%, 4%); }
  40%  { transform: translate(3%, -3%); }
  50%  { transform: translate(-4%, 1%); }
  60%  { transform: translate(4%, 2%); }
  70%  { transform: translate(-2%, -4%); }
  80%  { transform: translate(3%, 3%); }
  90%  { transform: translate(-3%, -1%); }
  100% { transform: translate(0, 0); }
}
`;
const styleEl = document.createElement("style");
styleEl.textContent = css;
document.head.appendChild(styleEl);

ReactDOM.createRoot(document.getElementById("root")).render(<App />);