"use client";

import React, { useRef } from "react";
import { motion, useTransform } from "motion/react";
import { Parallax } from "@/components/parallax/Parallax";
import { Reveal } from "@/components/motion/Reveal";
import { Stagger } from "@/components/motion/Stagger";
import { TRANSITIONS } from "@/lib/animation";

export function AboutSection() {
  const imageRef = useRef<HTMLDivElement>(null);

  return (
    <section
      id="about"
      aria-label="About"
      className="relative w-full overflow-clip py-24 md:py-36"
    >
      {/* Ambient vignette */}
      <Parallax speed={0.06} className="pointer-events-none absolute inset-0 -z-10">
        <div className="absolute inset-0 bg-[radial-gradient(800px_400px_at_80%_10%,rgba(255,255,255,0.08),transparent_70%)]" />
      </Parallax>

      <div className="mx-auto grid w-full max-w-6xl grid-cols-1 items-center gap-10 px-6 md:grid-cols-12 md:gap-12">
        {/* Copy */}
        <div className="md:col-span-6 lg:col-span-7">
          <Stagger delayChildren={0.05}>
            <Reveal>
              <h2 className="text-pretty text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl bg-clip-text text-transparent bg-gradient-to-b from-neutral-100 to-neutral-300">
                Craft meets code.
              </h2>
            </Reveal>
            <Reveal delay={0.05}>
              <p className="mt-4 text-balance text-base leading-relaxed text-neutral-300 md:text-lg">
                I shape cinematic experiences for the web—where motion guides, parallax breathes, and details
                obsess. From VFX supervision to full‑stack development, I build interfaces that feel alive while
                staying accessible and fast.
              </p>
            </Reveal>
            <Reveal delay={0.1}>
              <ul className="mt-6 grid grid-cols-1 gap-3 text-sm text-neutral-200 sm:grid-cols-2">
                <li className="rounded-lg glass p-3">
                  • Smooth-scrolling narratives with Lenis
                </li>
                <li className="rounded-lg glass p-3">
                  • Scroll-linked motion via Framer Motion
                </li>
                <li className="rounded-lg glass p-3">
                  • Performance-first, a11y conscious
                </li>
                <li className="rounded-lg glass p-3">
                  • Filmic depth, considered typography
                </li>
              </ul>
            </Reveal>
          </Stagger>
        </div>

        {/* Visual */}
        <div className="md:col-span-6 lg:col-span-5">
          <motion.div
            ref={imageRef}
            className="relative aspect-[4/5] w-full overflow-hidden rounded-2xl glass-strong"
            initial={{ opacity: 0, y: 16 }}
            whileInView={{ opacity: 1, y: 0 }}
            viewport={{ once: true, margin: "0px 0px -10% 0px" }}
            transition={TRANSITIONS.base}
          >
            {/* Parallax layers */}
            <Parallax speed={0.12} className="absolute -inset-8">
              <div className="h-full w-full bg-[radial-gradient(600px_300px_at_30%_10%,rgba(255,255,255,0.10),transparent_70%)]" />
            </Parallax>
            <Parallax speed={-0.08} className="absolute inset-0">
              <div className="h-full w-full bg-[linear-gradient(180deg,transparent,rgba(255,255,255,0.06)_40%,transparent_80%)]" />
            </Parallax>

            {/* Grid accent */}
            <motion.div
              className="absolute inset-0 opacity-[0.08]"
              style={{
                backgroundImage:
                  "linear-gradient(to right, currentColor 1px, transparent 1px), linear-gradient(to bottom, currentColor 1px, transparent 1px)",
                backgroundSize: "24px 24px",
                color: "rgb(255 255 255)",
              }}
            />

            {/* Caption */}
            <motion.div
              className="absolute bottom-0 left-0 right-0 p-4 text-xs text-neutral-300/80 backdrop-blur-sm"
              initial={{ opacity: 0, y: 6 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ ...TRANSITIONS.base, delay: 0.1 }}
            >
              Parallax composition with layered gradients and light bloom.
            </motion.div>
          </motion.div>
        </div>
      </div>
    </section>
  );
}