"use client";

import { motion, useReducedMotion, useScroll, useTransform } from "framer-motion";
import Image from "next/image";
import { useRef } from "react";
import { ArrowUpRight, InstagramIcon, PinIcon } from "@/components/icons";
import { RevealText, SectionLabel } from "@/components/motion";
import { heroImage, studio } from "@/lib/content";
import type { Project } from "@/lib/data";

const MARQUEE = [
  "Product Design",
  "Lighting",
  "Modular Shelving",
  "Interior Design",
  "Barcelona",
  "Since 2011",
];

export default function Hero({ projects }: { projects: Project[] }) {
  const ref = useRef<HTMLDivElement>(null);
  const reduce = useReducedMotion();
  const { scrollYProgress } = useScroll({
    target: ref,
    offset: ["start start", "end start"],
  });
  const y = useTransform(scrollYProgress, [0, 1], [0, reduce ? 0 : 120]);
  const opacity = useTransform(scrollYProgress, [0, 0.85], [1, 0]);

  const hero = projects[0];
  const konnex = projects.find((p) => p.slug === "konnex") ?? projects[1] ?? hero;

  return (
    <section id="top" ref={ref} className="relative overflow-hidden pt-28 md:pt-36">
      <div className="mx-auto max-w-[1600px] px-5 md:px-10">
        <div className="grid grid-cols-1 gap-10 lg:grid-cols-12 lg:gap-8">
          <div className="lg:col-span-7">
            <SectionLabel>Product &amp; Interior Design</SectionLabel>

            <RevealText
              as="h1"
              text="Objects that adapt to the way you live."
              delay={0.15}
              className="mt-6 max-w-[16ch] text-[clamp(2.6rem,7.2vw,6.4rem)] font-medium leading-[0.94] tracking-display text-balance"
            />

            <motion.p
              initial={{ opacity: 0, y: 18 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.75, duration: 0.9, ease: [0.16, 1, 0.3, 1] }}
              className="mt-8 max-w-[54ch] text-[15px] leading-relaxed text-mute md:text-base"
            >
              Florian Gross is a Barcelona-based product and interior designer working
              across modular shelving, adaptive lighting and retail spaces. His
              award-winning Konnex system — manufactured by Müller Möbelwerkstätten —
              has been shown at Imm Cologne, Ambiente and FuoriSalone Milan.
            </motion.p>

            <motion.div
              initial={{ opacity: 0, y: 18 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ delay: 0.9, duration: 0.9, ease: [0.16, 1, 0.3, 1] }}
              className="mt-10 flex flex-wrap items-center gap-3"
            >
              <a
                href="#work"
                className="group inline-flex items-center gap-3 rounded-full bg-[#0a0a0a] px-7 py-4 text-[11px] font-medium uppercase tracking-[0.22em] text-white transition-all duration-300 hover:bg-[#2a2a2a]"
              >
                Explore the work
                <ArrowUpRight className="h-4 w-4 transition-transform duration-300 group-hover:-translate-y-0.5 group-hover:translate-x-0.5" />
              </a>
              {konnex?.buyUrl && (
                <a
                  href={konnex.buyUrl}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="inline-flex items-center gap-3 rounded-full border border-[#e0e0e0] px-7 py-4 text-[11px] font-medium uppercase tracking-[0.22em] text-ink-soft transition-all duration-300 hover:border-[#0a0a0a]"
                >
                  Buy Konnex
                  <span className="text-faint">Worldwide</span>
                </a>
              )}
            </motion.div>

            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              transition={{ delay: 1.15, duration: 1 }}
              className="mt-12 flex flex-wrap items-center gap-x-8 gap-y-3 text-[12px] text-mute"
            >
              <span className="flex items-center gap-2">
                <PinIcon className="h-4 w-4 text-[#c2c2c2]" />
                Barcelona, Spain
              </span>
              <a
                href={studio.instagram}
                target="_blank"
                rel="noopener noreferrer"
                className="flex items-center gap-2 text-ink-soft transition-colors hover:text-mute"
              >
                <InstagramIcon className="h-4 w-4 text-[#c2c2c2]" />
                {studio.instagramHandle}
              </a>
              <span className="text-faint">Est. 2011</span>
            </motion.div>
          </div>

          <motion.div
            style={{ y, opacity }}
            className="relative lg:col-span-5"
            initial={{ opacity: 0, scale: 1.03 }}
            animate={{ opacity: 1, scale: 1 }}
            transition={{ delay: 0.3, duration: 1.3, ease: [0.16, 1, 0.3, 1] }}
          >
            <div
              className="relative w-full overflow-hidden bg-white"
              style={{ aspectRatio: String(heroImage.aspect) }}
            >
              <Image
                src={heroImage.src}
                alt={heroImage.alt}
                fill
                priority
                sizes="(max-width: 1024px) 100vw, 42vw"
                quality={90}
                className="object-contain"
              />
              <motion.div
                initial={{ y: "0%" }}
                animate={{ y: "-101%" }}
                transition={{ delay: 0.55, duration: 1.15, ease: [0.76, 0, 0.24, 1] }}
                className="absolute inset-0 bg-white"
              />
            </div>
            <div className="mt-3 flex items-baseline justify-between text-[11px] uppercase tracking-[0.22em] text-faint">
              <span>Kobe — Modulable Lighting</span>
              <span>{hero?.category ?? "Lighting"}</span>
            </div>
          </motion.div>
        </div>
      </div>

      {/* marquee */}
      <div className="relative mt-20 overflow-hidden border-y border-[#efefef] py-5 md:mt-28">
        <div className="flex w-max animate-[marquee_38s_linear_infinite] items-center gap-10 whitespace-nowrap">
          {[...MARQUEE, ...MARQUEE, ...MARQUEE, ...MARQUEE].map((item, i) => (
            <span
              key={`${item}-${i}`}
              className="flex items-center gap-10 text-[11px] uppercase tracking-[0.34em] text-[#b8b8b8]"
            >
              {item}
              <span className="h-[3px] w-[3px] rounded-full bg-[#d6d6d6]" />
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}