"use client";
import * as React from "react";
import { cn } from "@/lib/utils";
import { pulseContent, type PulseContent } from "./data";
import { Hero, Navbar } from "./sections/hero";
import { Features, HowItWorks, Stats } from "./sections/features";
import { Download, Faq, Footer, Pricing, Reviews } from "./sections/closing";

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

/**
 * Pulse Habits — a consumer mobile-app landing page.
 * Floating pill navbar, hero with a live CSS phone, stats, scroll-synced feature screens, how-it-works,
 * reviews marquee with rating, free/premium pricing, download CTA with QR art, FAQ and footer.
 */
export function MobileAppTemplate({ content, className }: MobileAppTemplateProps) {
  const c: PulseContent = { ...pulseContent, ...content };
  return (
    <div className={cn("relative w-full bg-background font-sans text-foreground antialiased selection:bg-rose-500/30", className)}>
      <Navbar brand={c.brand} links={c.nav} />
      <main>
        <Hero content={c.hero} habits={c.habits} />
        <Stats items={c.stats} />
        <Features content={c.features} habits={c.habits} />
        <HowItWorks steps={c.steps} />
        <Reviews rating={c.rating} reviews={c.reviews} />
        <Pricing content={c.pricing} />
        <Download content={c.download} />
        <Faq items={c.faq} />
      </main>
      <Footer brand={c.brand} content={c.footer} />
    </div>
  );
}

export default MobileAppTemplate;