"use client";
import { motion, useScroll, useTransform } from "framer-motion";
import Image from "next/image";
import { useRef } from "react";
import { hero } from "@/content/content";
import { Magnetic } from "@/components/ui/Magnetic";
import { SmartLink } from "@/components/ui/SmartLink";
import { cn } from "@/lib/cn";
import { useReducedMotionPref } from "@/lib/hooks";
const delay = (s: number) => ({ "--d": `${s}s` }) as React.CSSProperties;
/**
* A palavra do pôster é desenhada duas vezes com a mesma geometria:
* a versão sólida fica atrás da foto e a de contorno na frente. Onde a foto
* cobre as letras, só o contorno aparece (o efeito "POR[TF]OLIO").
*/
function PosterWord({ variant }: { variant: "solid" | "outline" }) {
// Em telas em pé a palavra quebra no meio (PORT / FOLIO)
const letters = [...hero.word];
const cut = Math.floor(letters.length / 2);
const lines = [letters.slice(0, cut), letters.slice(cut)];
return (
<p aria-hidden className={cn("poster-word", variant === "outline" && "poster-word--outline")}>
{lines.map((line, l) => (
<span key={l} className="poster-line">
{line.map((ch, i) => (
<span key={i} className="poster-letter" style={delay(0.05 + (l * cut + i) * 0.045)}>
{ch}
</span>
))}
</span>
))}
</p>
);
}
function LongArrow({ className }: { className?: string }) {
return (
<svg viewBox="0 0 76 12" fill="none" className={className} aria-hidden>
<path d="M0 6h74M69 1l5 5-5 5" stroke="currentColor" strokeWidth="1.2" />
</svg>
);
}
export function Hero() {
const ref = useRef<HTMLElement>(null);
const still = useReducedMotionPref();
const { scrollYProgress } = useScroll({ target: ref, offset: ["start start", "end start"] });
const wordY = useTransform(scrollYProgress, [0, 1], ["0%", "-14%"]);
const photoY = useTransform(scrollYProgress, [0, 1], ["0%", "6%"]);
return (
<section
ref={ref}
aria-labelledby="hero-title"
className="poster relative isolate h-[100svh] min-h-[34rem] overflow-hidden"
>
<h1 id="hero-title" className="sr-only">
{hero.srTitle}
</h1>
{/* Luz suave atrás da cabeça */}
<div
aria-hidden
className="absolute inset-0 -z-10"
style={{
background:
"radial-gradient(42% 55% at 50% 42%, color-mix(in oklab, var(--color-cream) 7%, transparent), transparent 70%)",
}}
/>
{/* 1. Palavra sólida (atrás) */}
<motion.div style={still ? undefined : { y: wordY }} className="pointer-events-none absolute inset-0 z-0">
<PosterWord variant="solid" />
</motion.div>
{/* 2. Foto */}
<motion.div style={still ? undefined : { y: photoY }} className="poster-photo pointer-events-none z-10">
<div className="intro-photo relative h-full w-full">
<Image
src={hero.photo}
alt={hero.photoAlt}
fill
preload
fetchPriority="high"
sizes="(min-aspect-ratio: 1/1) 87vh, 100vw"
className="object-contain object-bottom"
/>
</div>
</motion.div>
{/* A camiseta some no fundo, sem corte reto no fim da dobra */}
<div
aria-hidden
className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-[22svh] bg-gradient-to-t from-ink to-transparent"
/>
{/* 3. Palavra só no contorno (na frente) */}
<motion.div style={still ? undefined : { y: wordY }} className="pointer-events-none absolute inset-0 z-20">
<PosterWord variant="outline" />
</motion.div>
{/* Cantos do pôster */}
<div className="pointer-events-none relative z-30 shell flex h-full flex-col justify-between pt-24 pb-6 text-[0.95rem] text-cream/90 md:pt-28 md:pb-10">
<div className="flex items-start justify-between gap-6">
<p className="intro-fade" style={delay(0.55)}>
{hero.role}
</p>
<div className="intro-fade pointer-events-auto" style={delay(0.6)}>
<Magnetic strength={0.35}>
<SmartLink
href={hero.cta.href}
aria-label={hero.cta.label}
className="group flex items-center gap-3 py-2 text-cream transition-colors duration-500 hover:text-accent"
>
<span className="hidden translate-x-2 text-sm opacity-0 transition-all duration-500 ease-out-expo group-hover:translate-x-0 group-hover:opacity-100 md:block">
{hero.cta.label}
</span>
<LongArrow className="h-3 w-[4.75rem] transition-transform duration-500 ease-out-expo group-hover:translate-x-1.5" />
</SmartLink>
</Magnetic>
</div>
</div>
<div className="flex items-end justify-between gap-6">
<p className="intro-fade" style={delay(0.65)}>
{hero.signature}
</p>
<p className="intro-fade" style={delay(0.7)}>
{hero.website}
</p>
</div>
</div>
</section>
);
}
