import { useRef } from "react";
import { motion, useScroll, useTransform, useReducedMotion } from "motion/react";

const HEADLINE = "A building's outer coat says everything about who lives within.".split(" ");

const STATS = [
  { value: 10, suffix: "+", label: "Years Experience" },
  { value: 300, suffix: "+", label: "Projects Completed" },
];

function Counter({ value, suffix }: { value: number; suffix: string }) {
  const ref = useRef<HTMLSpanElement>(null);
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start 90%", "start 45%"],
  });
  const text = useTransform(scrollYProgress, (p) => `${Math.round(p * value)}${suffix}`);

  return (
    <span ref={ref} className="text-ink block text-6xl font-black tracking-tighter">
      <motion.span>{text}</motion.span>
    </span>
  );
}

export default function About() {
  const ref = useRef<HTMLElement>(null);
  const reduce = useReducedMotion();
  const { scrollYProgress } = useScroll({ target: ref, offset: ["start start", "end end"] });
  const swatchY = useTransform(scrollYProgress, [0, 1], ["-12%", "12%"]);
  const swatchRotate = useTransform(scrollYProgress, [0, 1], [-8, 8]);

  return (
    <section id="about" ref={ref} className="relative w-full">
      <div className="h-[220svh]">
        <div className="sticky top-0 flex min-h-svh items-center overflow-hidden py-24">
          {/* parallax paint swatch */}
          <motion.div
            aria-hidden="true"
            style={reduce ? {} : { y: swatchY, rotate: swatchRotate }}
            className="pointer-events-none absolute top-1/2 -right-24 h-[520px] w-[520px] -translate-y-1/2 rounded-[80px] bg-[linear-gradient(135deg,#e6ded1_0%,#ef3b36_130%)] opacity-40 blur-3xl"
          />

          <div className="relative mx-auto grid w-full max-w-6xl grid-cols-1 gap-14 px-4 sm:px-6 lg:grid-cols-[1.2fr_1fr] lg:px-8">
            <h2 className="text-ink text-4xl leading-[1.08] font-black tracking-tighter sm:text-5xl lg:text-6xl">
              {HEADLINE.map((word, i) => {
                const start = 0.05 + (i / HEADLINE.length) * 0.55;
                const end = start + 0.12;
                // eslint-disable-next-line react-hooks/rules-of-hooks
                const opacity = useTransform(scrollYProgress, [start, end], [0.14, 1]);
                // eslint-disable-next-line react-hooks/rules-of-hooks
                const y = useTransform(scrollYProgress, [start, end], [14, 0]);
                return (
                  <motion.span
                    key={`${word}-${i}`}
                    style={reduce ? {} : { opacity, y }}
                    className="mr-[0.25em] inline-block"
                  >
                    {word}
                  </motion.span>
                );
              })}
            </h2>

            <div>
              <p className="border-brand text-ink-soft border-l-2 pl-5 text-lg leading-relaxed font-light">
                From specialized, high-quality textures to stunning, eco-friendly paint, Belarsen
                provides structures with that definitive soul that is essential for creating
                positive, lasting impressions.
              </p>
              <dl className="mt-14 grid grid-cols-2 gap-8">
                {STATS.map((s) => (
                  <div key={s.label}>
                    <dt className="sr-only">{s.label}</dt>
                    <dd>
                      <Counter value={s.value} suffix={s.suffix} />
                      <span className="text-ink-muted mt-2 block text-xs font-bold tracking-widest uppercase">
                        {s.label}
                      </span>
                    </dd>
                  </div>
                ))}
              </dl>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}