"use client";

import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import TextAbout from '@/components/sections/about/TextAbout';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="shift-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="smallMedium"
      sizing="mediumSizeLargeTitles"
      background="none"
      cardStyle="outline"
      primaryButtonStyle="diagonal-gradient"
      secondaryButtonStyle="layered"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="FGA Growth"
          navItems={[
            { name: "Case Studies", id: "testimonial" },
            { name: "Results", id: "metrics" },
            { name: "Services", id: "services" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Book Strategy Call", href: "#contact" }}
        />
      </div>

      <div id="testimonial" data-section="testimonial">
        <TestimonialCardSix
          title="Proven Results"
          description="Numbers That Don't Lie"
          tag="Case Studies"
          tagAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          animationType="slide-up"
          testimonials={[
            {
              id: "1",              name: "Streetwear Brand Argentina",              handle: "ROAS 17x+ | $0 → $42M ARS",              testimonial: "Scaled from $0 to $42M ARS in 4 months through precision Meta Ads targeting across customer archetypes. Meta Ads, TikTok Ads, Lead Gen",              imageSrc: "http://img.b2bpic.net/free-vector/online-shopping-sales-landing-page-template_23-2148826283.jpg",              imageAlt: "Case study 1 performance metrics"
            },
            {
              id: "2",              name: "Fashion Jewelry Store",              handle: "ROAS 2.89 | $51K → $227K/mo",              testimonial: "Grew monthly revenue from $51K to $227K through integrated Meta Ads and Google Ads campaigns with creative hook optimization. Meta Ads, Google Ads",              imageSrc: "http://img.b2bpic.net/free-vector/admin-dashboard-panel-template_23-2147904141.jpg?_wi=1",              imageAlt: "Case study 2 revenue growth"
            },
            {
              id: "3",              name: "High-End Jewelry Store",              handle: "ROAS 3.27 | $9K → $32K/mo",              testimonial: "Tripled monthly revenue through luxury-focused TikTok Ads and Google Ads strategy targeting high-value customer segments. TikTok Ads, Google Ads",              imageSrc: "http://img.b2bpic.net/free-photo/unrecognizable-man-working-with-tablet_23-2147717389.jpg",              imageAlt: "Case study 3 luxury targeting results"
            },
            {
              id: "4",              name: "Gold Jewelry Store",              handle: "ROAS 4.79 | $8K → $23K/mo",              testimonial: "Nearly tripled revenue through data-driven Meta Ads campaigns and lead generation strategy with continuous testing framework. Meta Ads, Lead Gen",              imageSrc: "http://img.b2bpic.net/free-vector/admin-dashboard-panel-template_23-2147904141.jpg?_wi=2",              imageAlt: "Case study 4 jewelry performance"
            },
            {
              id: "5",              name: "Premium E-Commerce Brand",              handle: "ROAS 5.2+ | Featured Results",              testimonial: "Implemented comprehensive testing framework around customer archetypes and creative hooks enabling rapid scaling across all channels. Meta Ads, TikTok Ads, Google Ads",              imageSrc: "http://img.b2bpic.net/free-photo/people-analyzing-checking-finance-graphs-office_23-2150377179.jpg?_wi=1",              imageAlt: "Premium brand success metrics"
            },
            {
              id: "6",              name: "Luxury Fashion Retailer",              handle: "ROAS 3.8+ | Scaling Success",              testimonial: "Built resilient growth system through channel diversification and audience segmentation resulting in consistent 30% monthly growth. Meta Ads, Google Ads, Lead Gen",              imageSrc: "http://img.b2bpic.net/free-photo/smiley-business-man-outdoor_23-2148479594.jpg",              imageAlt: "Luxury retail brand growth"
            }
          ]}
          speed={40}
          topMarqueeDirection="left"
        />
      </div>

      <div id="featured-quote" data-section="featured-quote">
        <TextAbout
          tag="Client Testimonial"
          title="Fran built a testing framework around customer archetypes and creative hooks that allowed us to scale faster than we thought possible."
          useInvertedBackground={true}
          buttons={[
            { text: "Read Full Case Study", href: "#testimonial" }
          ]}
        />
      </div>

      <div id="cta" data-section="cta">
        <ContactSplitForm
          title="Ready to Scale Your Performance?"
          description="Book a 30-minute strategy call with our team. We'll analyze your current marketing performance and identify high-impact optimization opportunities."
          inputs={[
            { name: "name", type: "text", placeholder: "Your name", required: true },
            { name: "email", type: "email", placeholder: "your@email.com", required: true },
            { name: "company", type: "text", placeholder: "Company name", required: true }
          ]}
          textarea={{ name: "message", placeholder: "Brief description of your business and current marketing challenges", rows: 4, required: false }}
          buttonText="Book a Strategy Call →"
          useInvertedBackground={false}
          imageSrc="http://img.b2bpic.net/free-photo/people-analyzing-checking-finance-graphs-office_23-2150377179.jpg?_wi=2"
          imageAlt="modern office workspace professional environment"
          mediaAnimation="slide-up"
          mediaPosition="right"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoReveal
          logoText="FGA Growth"
          leftLink={{ text: "Privacy Policy", href: "#" }}
          rightLink={{ text: "Terms of Service", href: "#" }}
        />
      </div>
    </ThemeProvider>
  );
}
