"use client";
import * as React from "react";
import { cn } from "@/lib/utils";
import { saasContent, type SaasContent } from "./data";
import { Navbar } from "./sections/navbar";
import { Hero } from "./sections/hero";
import { Logos } from "./sections/logos";
import { Features } from "./sections/features";
import { FeatureRows } from "./sections/feature-rows";
import { Integrations } from "./sections/integrations";
import { Metrics, Testimonials } from "./sections/social-proof";
import { Pricing } from "./sections/pricing";
import { Faq, FinalCta, Footer } from "./sections/closing";

export interface SaasLandingTemplateProps {
  /** Override any top-level content block (brand, nav, hero, pricing…). Missing keys fall back to the demo copy. */
  content?: Partial<SaasContent>;
  className?: string;
}

/**
 * Orbit Analytics — a complete B2B SaaS landing page.
 * Sections: navbar, hero with live product mockup, logo marquee, features grid, alternating feature rows,
 * integrations orbit, metrics, testimonials, pricing, FAQ, final CTA and footer.
 */
export function SaasLandingTemplate({ content, className }: SaasLandingTemplateProps) {
  const c: SaasContent = { ...saasContent, ...content };
  return (
    <div className={cn("relative w-full bg-background font-sans text-foreground antialiased", className)}>
      <a
        href="#features"
        className="sr-only z-[60] rounded-md bg-foreground px-3 py-2 text-sm text-background focus:not-sr-only focus:fixed focus:left-3 focus:top-3"
      >
        Skip to content
      </a>
      <Navbar brand={c.brand} links={c.nav} cta={c.hero.primaryCta} />
      <main>
        <Hero content={c.hero} />
        <Logos content={c.logos} />
        <Features content={c.features} />
        <FeatureRows rows={c.rows} />
        <Integrations content={c.integrations} />
        <Metrics items={c.metrics} />
        <Testimonials content={c.testimonials} />
        <Pricing content={c.pricing} />
        <Faq content={c.faq} />
        <FinalCta content={c.cta} />
      </main>
      <Footer brand={c.brand} content={c.footer} />
    </div>
  );
}

export default SaasLandingTemplate;