"use client";
import * as React from "react";
import { cn } from "@/lib/utils";
import { agencyContent, type AgencyContent } from "./data";
import { Navbar } from "./sections/navbar";
import { Hero } from "./sections/hero";
import { ServicesMarquee, Statement } from "./sections/marquee";
import { Work } from "./sections/work";
import { Capabilities, Process, Recognition } from "./sections/studio";
import { Team, Testimonials } from "./sections/people";
import { Contact, Footer } from "./sections/contact";

export interface AgencyTemplateProps {
  /** Override any top-level content block. Missing keys fall back to the demo copy. */
  content?: Partial<AgencyContent>;
  className?: string;
}

/**
 * Lumen Studio — a bold, typographic creative-agency site.
 * Split-text hero, service marquees, scroll-lit manifesto, case-study grid with cursor reveals, capabilities,
 * scroll-drawn process, numbers & awards, team, testimonial carousel, contact form and a giant footer wordmark.
 */
export function AgencyTemplate({ content, className }: AgencyTemplateProps) {
  const c: AgencyContent = { ...agencyContent, ...content };
  return (
    <div className={cn("relative w-full bg-background font-sans text-foreground antialiased selection:bg-[#d4ff3a] selection:text-black", className)}>
      <Navbar content={c} />
      <main>
        <Hero content={c.hero} />
        <ServicesMarquee services={c.services} />
        <Statement text={c.statement} />
        <Work content={c.work} />
        <Capabilities items={c.capabilities} />
        <Process steps={c.process} />
        <Recognition stats={c.stats} awards={c.awards} />
        <Team content={c.team} />
        <Testimonials items={c.testimonials} />
        <Contact content={c.contact} />
      </main>
      <Footer brand={c.brand} nav={c.nav} content={c.footer} email={c.contact.email} />
    </div>
  );
}

export default AgencyTemplate;