"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroLogoBillboardSplit from '@/components/sections/hero/HeroLogoBillboardSplit';
import MediaAbout from '@/components/sections/about/MediaAbout';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import ProductCardSix from '@/components/sections/product/ProductCardSix';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterSplit from '@/components/sections/footer/FooterSplit';
import { Phone, Mail, MapPin } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="pill"
      contentWidth="small"
      sizing="largeSizeMediumTitles"
      background="plain"
      cardStyle="inset"
      primaryButtonStyle="neon-glow-border"
      secondaryButtonStyle="layered"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          navItems={[
            { name: "Home", id: "home" },
            { name: "Services", id: "services" },
            { name: "Work", id: "work" },
            { name: "About", id: "about" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Get Started", href: "contact" }}
          brandName="APEX"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboardSplit
          logoText="APEX MARKETING"
          description="Transform your brand with bold creative strategies and data-driven campaigns. We deliver results that matter."
          buttons={[
            { text: "View Our Work", href: "work" },
            { text: "Schedule Consultation", href: "contact" }
          ]}
          layoutOrder="default"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766318235322-2valyx4m.jpg"
          imageAlt="Marketing agency team collaboration"
          frameStyle="browser"
        />
      </div>

      <div id="about" data-section="about">
        <MediaAbout
          title="Your Growth Partner"
          description="We are a forward-thinking marketing agency dedicated to building brands that resonate. With expertise in digital strategy, creative design, and performance marketing, we help businesses reach their full potential."
          tag="About Us"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766320179601-o8gildtx.jpg"
          imageAlt="Our talented team"
          buttons={[{ text: "Learn Our Story", href: "#" }]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTwentyOne
          title="What We Do"
          description="Comprehensive marketing solutions tailored to your business needs."
          tag="Services"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140104217-wfflli6f.jpg"
          imageAlt="Marketing services showcase"
          accordionItems={[
            {
              id: "1",
              title: "Digital Strategy & Consulting",
              content: "We develop data-driven strategies that align with your business goals, including market analysis, competitor research, and growth roadmaps."
            },
            {
              id: "2",
              title: "Brand Development & Design",
              content: "From logo design to complete brand identity systems, we create visual languages that captivate and communicate your brand's unique value."
            },
            {
              id: "3",
              title: "Content & Social Media Marketing",
              content: "Engaging content creation and social media management that builds community, drives engagement, and converts followers into customers."
            },
            {
              id: "4",
              title: "Performance Marketing & Analytics",
              content: "Data-driven paid advertising campaigns across Google, Meta, and other platforms with detailed ROI tracking and optimization."
            }
          ]}
          buttons={[{ text: "Explore Services", href: "#" }]}
          useInvertedBackground="noInvert"
          mediaPosition="left"
        />
      </div>

      <div id="work" data-section="work">
        <ProductCardSix
          title="Recent Work"
          description="Discover the brands we've helped grow through strategic marketing and creative excellence."
          tag="Portfolio"
          products={[
            {
              id: "1",
              name: "Tech Startup Growth Campaign",
              price: "3x Growth",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140104217-wfflli6f.jpg",
              imageAlt: "Tech startup marketing campaign"
            },
            {
              id: "2",
              name: "Premium Brand Rebranding",
              price: "New Identity",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766787041844-tzssa0wc.jpg",
              imageAlt: "Brand rebranding project"
            },
            {
              id: "3",
              name: "E-commerce Sales Campaign",
              price: "250% ROI",
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766787045743-6gjau4zf.jpg",
              imageAlt: "E-commerce marketing campaign"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="What Clients Say"
          description="Trusted by brands that want to make an impact."
          tag="Testimonials"
          testimonials={[
            {
              id: "1",
              name: "Sarah Mitchell",
              handle: "@sarahm_ventures",
              testimonial: "APEX transformed our brand from startup to industry leader. Their strategic approach and creative execution exceeded our expectations.",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140101670-ttp7xdlv.jpg",
              imageAlt: "Sarah Mitchell"
            },
            {
              id: "2",
              name: "Michael Chen",
              handle: "@mchen_tech",
              testimonial: "The team's data-driven strategy delivered 3x return on our marketing investment in just 6 months. Exceptional results.",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140152452-p4x3ah4p.jpg",
              imageAlt: "Michael Chen"
            },
            {
              id: "3",
              name: "Jessica Rodriguez",
              handle: "@jrodriguez_co",
              testimonial: "Creative excellence meets strategic thinking. APEX consistently delivers campaigns that drive real business growth.",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140103339-f3be0gdh.jpg",
              imageAlt: "Jessica Rodriguez"
            },
            {
              id: "4",
              name: "David Kim",
              handle: "@davidkim_brands",
              testimonial: "Working with APEX was the best marketing decision we made. Professional, innovative, and results-oriented team.",
              rating: 5,
              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766140104217-wfflli6f.jpg",
              imageAlt: "David Kim"
            }
          ]}
          showRating={true}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Let's Create Something Great"
          description="Ready to transform your marketing? Get in touch with our team. We'd love to discuss your brand's potential."
          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: "Tell us about your project",
            rows: 5,
            required: true
          }}
          useInvertedBackground="noInvert"
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766320179601-o8gildtx.jpg"
          imageAlt="Let's connect"
          mediaPosition="right"
          buttonText="Send Message"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterSplit
          logoText="APEX"
          title="Ready to grow your brand? Let's start the conversation today."
          columns={[
            {
              title: "Services",
              items: [
                { label: "Digital Strategy", href: "#services" },
                { label: "Brand Design", href: "#services" },
                { label: "Content Marketing", href: "#services" },
                { label: "Performance Ads", href: "#services" }
              ]
            },
            {
              title: "Company",
              items: [
                { label: "About Us", href: "#about" },
                { label: "Our Work", href: "#work" },
                { label: "Blog", href: "#" },
                { label: "Careers", href: "#" }
              ]
            },
            {
              title: "Legal",
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Cookie Policy", href: "#" }
              ]
            }
          ]}
          contactItems={[
            { icon: Phone, text: "(555) 123-4567" },
            { icon: Mail, text: "hello@apexmarketing.com" },
            { icon: MapPin, text: "New York, NY" }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}