"use client";

import { useEffect, useRef, useState } from "react";
import { ScoreGauge } from "./score-gauge";
import { BRAND_NAME } from "@/lib/brand";

const SCORES: { score: number; label: string }[] = [
  { score: 93, label: "Performance" },
  { score: 100, label: "Accessibilité" },
  { score: 100, label: "Bonnes pratiques" },
  { score: 100, label: "SEO" },
];

export function PageSpeedMockup() {
  const ref = useRef<HTMLDivElement | null>(null);
  const [active, setActive] = useState(false);

  useEffect(() => {
    const node = ref.current;
    if (!node) return;
    if (typeof IntersectionObserver === "undefined") {
      setActive(true);
      return;
    }
    const obs = new IntersectionObserver(
      (entries) => {
        for (const e of entries) {
          if (e.isIntersecting) {
            setActive(true);
            obs.disconnect();
            break;
          }
        }
      },
      { threshold: 0.35 },
    );
    obs.observe(node);
    return () => obs.disconnect();
  }, []);

  return (
    <div ref={ref} className="mt-10 mx-auto max-w-3xl panel p-6 md:p-8">
      <div className="text-center">
        <div className="text-micro uppercase tracking-wider text-text-faint">
          PageSpeed Insights · Mobile
        </div>
        <h3 className="font-editorial mt-2 text-2xl md:text-3xl font-medium text-text">
          La différence est mesurable
        </h3>
      </div>

      <div className="mt-8 grid grid-cols-2 md:grid-cols-4 gap-4">
        {SCORES.map((s, i) => (
          <ScoreGauge
            key={s.label}
            target={s.score}
            label={s.label}
            active={active}
            delay={i * 120}
          />
        ))}
      </div>

      <p className="mt-6 text-xxs text-text-faint text-center italic">
        Test réalisé sur un site conçu par {BRAND_NAME}.
      </p>
    </div>
  );
}