ArrowRight, Check, ChevronDown, ChevronLeft, ChevronRight, Gauge,
  Instagram, Menu, Play, Shield, Sparkles, Star, Wifi, X, Zap,
} from "lucide-react";
import { FormEvent, useEffect, useState } from "react";
import { FormEvent, useEffect, useRef, useState } from "react";

export const Route = createFileRoute("/")({
  head: () => ({
@@ -121,7 +121,7 @@ function Index() {

      <section id="performance" className="border-y border-white/10 bg-[#0d0d13] py-14">
        <div className="mx-auto grid max-w-7xl grid-cols-2 divide-x divide-white/10 px-5 md:grid-cols-4 lg:px-8">
          {[["3.2", "s", "0–100 km/h"], ["650", "cv", "Potência"], ["290", "km/h", "Velocidade máxima"], ["850", "Nm", "Torque"]].map((m) => <div key={m[2]} className="px-3 py-5 text-center md:px-8"><div className="display text-3xl font-bold md:text-5xl">{m[0]}<span className="ml-1 text-base text-[#d4af37]">{m[1]}</span></div><p className="mt-3 text-[10px] uppercase tracking-[.22em] text-white/45">{m[2]}</p></div>)}
          {[[3.2, "s", "0–100 km/h", 1], [650, "cv", "Potência", 0], [290, "km/h", "Velocidade máxima", 0], [850, "Nm", "Torque", 0]].map((m) => <div key={m[2]} className="px-3 py-5 text-center md:px-8"><div className="display text-3xl font-bold md:text-5xl"><AnimatedMetric value={m[0] as number} decimals={m[3] as number} /><span className="ml-1 text-base text-[#d4af37]">{m[1]}</span></div><p className="mt-3 text-[10px] uppercase tracking-[.22em] text-white/45">{m[2]}</p></div>)}
        </div>
      </section>

@@ -173,6 +173,42 @@ function Index() {
  );
}

function AnimatedMetric({ value, decimals }: { value: number; decimals: number }) {
  const ref = useRef<HTMLSpanElement>(null);
  const [display, setDisplay] = useState(0);
  const [started, setStarted] = useState(false);

  useEffect(() => {
    const node = ref.current;
    if (!node) return;
    const observer = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        setStarted(true);
        observer.disconnect();
      }
    }, { threshold: 0.5 });
    observer.observe(node);
    return () => observer.disconnect();
  }, []);

  useEffect(() => {
    if (!started) return;
    const duration = 1400;
    const start = performance.now();
    let frame = 0;
    const animate = (now: number) => {
      const progress = Math.min((now - start) / duration, 1);
      const eased = 1 - Math.pow(1 - progress, 4);
      setDisplay(value * eased);
      if (progress < 1) frame = requestAnimationFrame(animate);
    };
    frame = requestAnimationFrame(animate);
    return () => cancelAnimationFrame(frame);
  }, [started, value]);

  return <span ref={ref}>{display.toFixed(decimals)}</span>;
}

function SectionTitle({ eyebrow, title }: { eyebrow: string; title: string }) { return <div><p className="text-xs font-semibold uppercase tracking-[.35em] text-[#f5e56b]">{eyebrow}</p><h2 className="mt-4 max-w-4xl text-4xl font-black tracking-tight md:text-6xl">{title}</h2></div>; }
function Feature({ image, title, text, className = "" }: { image: string; title: string; text: string; className?: string }) { return <article className={`group relative overflow-hidden rounded-3xl ${className}`}><img src={image} alt={title} className="h-full w-full object-cover transition duration-700 group-hover:scale-105"/><div className="absolute inset-0 bg-gradient-to-t from-black via-black/15 to-transparent"/><div className="absolute inset-x-0 bottom-0 p-6"><h3 className="text-2xl font-bold">{title}</h3><p className="mt-2 max-w-md text-sm text-white/60">{text}</p></div></article>; }
function MiniFeature({ icon, title }: { icon: React.ReactNode; title: string }) { return <article className="glass flex flex-col justify-between rounded-3xl p-6 text-[#d4af37]"><span>{icon}</span><h3 className="text-xl font-bold text-white">{title}</h3></article>; }