"use client";

import { useEffect, useRef } from "react";
import type { PortfolioProjectView } from "@/lib/portfolio-data";
import type { Testimonial } from "@/lib/proof";
import type { ServiceLink } from "@/lib/site-navigation";
import About from "../About";
import type { ClientLink } from "../ClientStrip";
import Contact from "../Contact";
import EngineeringWithAI from "../EngineeringWithAI";
import Hero, { type HeroStats } from "../Hero";
import HomeFaq from "../HomeFaq";
import Projects from "../Projects";
import { displayUrl } from "../showcase/BrowserFrame";
import Testimonials from "../Testimonials";
import { WorkModalities } from "../WorkModalities";
import { useCinematicScroll } from "./useCinematicScroll";
import { useHomeFragmentNavigation } from "./useHomeFragmentNavigation";

/** Projeto cujo endereço aparece na barra do navegador de HeroWork (a SEV Moda Íntima, com domínio próprio). */
const HERO_WORK_PROJECT = "sev-modaintima";

export default function CinematicHome({
  projects,
  clients,
  testimonials,
  serviceLinks,
  heroStats,
}: {
  heroStats?: HeroStats;
  /** Só projetos de cliente (o filtro é de app/page.tsx). */
  projects: PortfolioProjectView[];
  clients?: ClientLink[];
  testimonials?: Testimonial[];
  /** Serviços do hub; lib/site-content.ts só pode ser lido no servidor, então a página os entrega prontos. */
  serviceLinks?: ServiceLink[];
}) {
  const shownUrl = displayUrl({
    demoUrl: projects.find((project) => project.id === HERO_WORK_PROJECT)
      ?.demoUrl,
  });
  // endereço de hospedagem (vercel.app) nunca vai para a barra: sem domínio próprio, ela mostra "pré-visualização"
  const heroWorkUrl =
    shownUrl && !/vercel\.app/i.test(shownUrl.text) ? shownUrl : null;
  const onLayoutReady = useHomeFragmentNavigation();
  const mainRef = useRef<HTMLElement>(null);
  useCinematicScroll(mainRef);
  // o layout da home é estável na montagem: a chegada por fragmento (#contato etc.) já pode ser resolvida
  useEffect(() => onLayoutReady(), [onLayoutReady]);

  return (
    <div className="overflow-x-clip">
      {/* Cada filho direto de <main> é uma cena; useCinematicScroll liga as passagens entre elas. O rodapé vem do layout. */}
      <main ref={mainRef} className="ds-main relative z-0">
        <Hero stats={heroStats} clients={clients} workUrl={heroWorkUrl} />

        <Projects projects={projects} />

        <About />

        <WorkModalities serviceLinks={serviceLinks} />

        <EngineeringWithAI />

        <Testimonials items={testimonials} />

        <HomeFaq />

        <Contact />
      </main>
    </div>
  );
}