import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import {
  BackToTop,
  CustomCursor,
  Loader,
  Navbar,
  ScrollProgress,
  WhatsAppButton,
} from "@/components/site/Chrome";
import { Competitions, Hero, Skills, Stats, Timeline } from "@/components/site/SectionsTop";
import {
  Contact,
  Footer,
  Gallery,
  Lightbox,
  News,
  Sponsors,
  Testimonials,
  Videos,
} from "@/components/site/SectionsBottom";

const TITLE = "Mateo Ríos | Mediocampista Ofensivo — Portafolio Deportivo";
const DESCRIPTION =
  "Portafolio oficial de Mateo Ríos, mediocampista ofensivo: estadísticas, trayectoria, highlights, galería y contacto para clubes y representantes.";

export const Route = createFileRoute("/")({
  component: Index,
  head: () => ({
    meta: [
      { title: TITLE },
      { name: "description", content: DESCRIPTION },
      {
        name: "keywords",
        content:
          "futbolista, mediocampista, portafolio deportivo, highlights, scouting, fútbol profesional",
      },
      { property: "og:title", content: TITLE },
      { property: "og:description", content: DESCRIPTION },
      { property: "og:type", content: "profile" },
      { property: "og:url", content: "/" },
      { name: "twitter:card", content: "summary_large_image" },
      { name: "twitter:title", content: TITLE },
      { name: "twitter:description", content: DESCRIPTION },
    ],
    links: [{ rel: "canonical", href: "/" }],
    scripts: [
      {
        type: "application/ld+json",
        children: JSON.stringify({
          "@context": "https://schema.org",
          "@type": "Person",
          name: "Mateo Ríos",
          jobTitle: "Futbolista profesional — Mediocampista ofensivo",
          nationality: "ES",
          address: { "@type": "PostalAddress", addressLocality: "Valencia", addressCountry: "ES" },
          email: "management@mateorios.com",
          telephone: "+34600000000",
          description: DESCRIPTION,
        }),
      },
    ],
  }),
});

function Index() {
  const [image, setImage] = useState<{ src: string; alt: string } | null>(null);
  const [video, setVideo] = useState<string | null>(null);

  const close = () => {
    setImage(null);
    setVideo(null);
  };

  return (
    <>
      <Loader />
      <CustomCursor />
      <ScrollProgress />
      <Navbar />

      <main>
        <Hero />
        <Sponsors />
        <Stats />
        <Timeline />
        <Competitions />
        <Skills />
        <Videos
          onPlay={(id) => {
            setImage(null);
            setVideo(id);
          }}
        />
        <Gallery
          onOpen={(src, alt) => {
            setVideo(null);
            setImage({ src, alt });
          }}
        />
        <News />
        <Testimonials />
        <Contact />
      </main>

      <Footer />
      <BackToTop />
      <WhatsAppButton />
      <Lightbox image={image} video={video} onClose={close} />
    </>
  );
}