import { motion, useScroll, useTransform } from "framer-motion";
import { useRef } from "react";
import { Counter } from "./Counter";
import about1 from "@/assets/about-3.png";
import about2 from "@/assets/about-2.jpg";
import { useI18n } from "@/i18n/I18nContext";

export function About() {
  const { t } = useI18n();
  const ref = useRef<HTMLDivElement>(null);
  const { scrollYProgress } = useScroll({ target: ref, offset: ["start end", "end start"] });
  const y1 = useTransform(scrollYProgress, [0, 1], [60, -60]);
  const y2 = useTransform(scrollYProgress, [0, 1], [-40, 40]);

  return (
    <section id="apropos" ref={ref} className="relative overflow-hidden bg-ink py-28 lg:py-40">
      <div className="mx-auto grid max-w-7xl grid-cols-1 gap-16 px-6 lg:grid-cols-2 lg:gap-24 lg:px-10">
        <div className="relative h-[500px] md:h-[620px]">
          <motion.div
            style={{ y: y1 }}
            initial={{ opacity: 0, x: -60 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true, margin: "-100px" }}
            transition={{ duration: 0.8, ease: "easeOut" }}
            className="absolute left-0 top-0 h-[70%] w-[70%] overflow-hidden rounded-sm shadow-elegant"
          >
            <img
              src={about1}
              alt={t.about.altCollage1}
              loading="lazy"
              className="h-full w-full object-cover"
            />
          </motion.div>
          <motion.div
            style={{ y: y2 }}
            initial={{ opacity: 0, x: 60 }}
            whileInView={{ opacity: 1, x: 0 }}
            viewport={{ once: true, margin: "-100px" }}
            transition={{ duration: 0.8, ease: "easeOut", delay: 0.2 }}
            className="absolute bottom-0 right-0 h-[60%] w-[60%] overflow-hidden rounded-sm border-2 border-gold/40 shadow-elegant"
          >
            <img
              src={about2}
              alt={t.about.altCollage2}
              loading="lazy"
              className="h-full w-full object-cover"
            />
          </motion.div>
          <div
            className="absolute -left-6 -top-6 h-32 w-32 border-l border-t border-gold/40"
            aria-hidden
          />
          <div
            className="absolute -bottom-6 -right-6 h-32 w-32 border-b border-r border-gold/40"
            aria-hidden
          />
        </div>

        <motion.div
          initial={{ opacity: 0, x: 60 }}
          whileInView={{ opacity: 1, x: 0 }}
          viewport={{ once: true, margin: "-100px" }}
          transition={{ duration: 0.8, ease: "easeOut", delay: 0.3 }}
          className="flex flex-col justify-center"
        >
          <p className="mb-5 text-xs font-semibold uppercase tracking-[0.35em] text-gold">
            {t.about.eyebrow}
          </p>
          <h2 className="font-serif text-4xl leading-tight text-cream md:text-5xl text-balance">
            {t.about.titleStart} <span className="italic text-gold">{t.about.titleHighlight}</span>.
          </h2>
          <div className="gold-divider my-8" />
          <p className="text-base leading-relaxed text-cream/70 md:text-lg">{t.about.body}</p>

          <div className="mt-12 grid grid-cols-2 gap-8 border-t border-gold/20 pt-10">
            <div>
              <div className="font-serif text-5xl text-gold md:text-6xl">
                <Counter to={10} suffix="+" />
              </div>
              <p className="mt-2 text-xs uppercase tracking-[0.2em] text-cream/60">
                {t.about.stat1}
              </p>
            </div>
            <div>
              <div className="font-serif text-5xl text-gold md:text-6xl">
                <Counter to={200} suffix="+" />
              </div>
              <p className="mt-2 text-xs uppercase tracking-[0.2em] text-cream/60">
                {t.about.stat2}
              </p>
            </div>
          </div>
        </motion.div>
      </div>
    </section>
  );
}