"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import FeatureBento from '@/components/sections/feature/FeatureBento';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Instagram, Mail, Rocket, Sparkles, Target, Video, Zap } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="small"
      sizing="largeSmallSizeLargeTitles"
      background="none"
      cardStyle="gradient-bordered"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="solid"
      headingFontWeight="extrabold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleCentered
          brandName="InClips Media"
          navItems={[
            { name: "Services", id: "features" },
            { name: "Work", id: "product" },
            { name: "About", id: "about" },
            { name: "Testimonials", id: "testimonial" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Start Project", href: "contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard
          logoText="InClips Media"
          description="We craft compelling digital narratives that elevate your brand. From content creation to strategic marketing, we deliver results that matter."
          buttons={[
            { text: "Explore Our Work", href: "product" },
            { text: "Get in Touch", href: "contact" }
          ]}
          background={{ variant: "sparkles-gradient" }}
          imageSrc="https://img.b2bpic.net/free-photo/happy-young-colleagues-office-coworking_171337-17719.jpg"
          imageAlt="InClips Media team collaborating on creative strategy"
          frameStyle="card"
        />
      </div>

      <div id="about" data-section="about">
        <InlineImageSplitTextAbout
          heading={[
            { type: "text", content: "We are a creative-driven marketing agency transforming " },
            { type: "image", src: "https://img.b2bpic.net/free-vector/geometric-young-creative-agency-logo-template_742173-17664.jpg", alt: "InClips Media creative mark" },
            { type: "text", content: " brands through strategic storytelling and innovative digital solutions." }
          ]}
          buttons={[
            { text: "Learn More", href: "#about" },
            { text: "Let's Collaborate", href: "contact" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="product" data-section="product">
        <ProductCardOne
          title="Our Digital Services"
          description="Comprehensive marketing solutions tailored to elevate your brand presence and drive measurable growth."
          tag="Services"
          products={[
            {
              id: "1",              name: "Content Creation",              price: "Strategic Visual Storytelling",              imageSrc: "https://img.b2bpic.net/free-photo/young-happy-colleagues-sitting-office-coworking_171337-17717.jpg",              imageAlt: "Professional content creation and video production"
            },
            {
              id: "2",              name: "Social Media Marketing",              price: "Community Building & Engagement",              imageSrc: "https://img.b2bpic.net/free-photo/people-brainstorming-work-meeting_23-2148985491.jpg",              imageAlt: "Social media strategy and campaign management"
            },
            {
              id: "3",              name: "Brand Strategy",              price: "Identity & Positioning",              imageSrc: "https://img.b2bpic.net/free-vector/minimal-colorful-business-card-template_23-2148371471.jpg",              imageAlt: "Brand development and identity design"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureBento
          title="Why Choose InClips Media"
          description="We combine creative excellence with data-driven strategies to deliver marketing solutions that actually work."
          features={[
            {
              title: "Creative Excellence",              description: "Award-winning creative team producing visually stunning and strategically sound campaigns.",              bentoComponent: "reveal-icon",              icon: Sparkles
            },
            {
              title: "Data-Driven Strategy",              description: "Every campaign backed by analytics and insights to maximize ROI and measurable results.",              bentoComponent: "animated-bar-chart"
            },
            {
              title: "Multi-Channel Expertise",              description: "Seamless integration across social media, email, content, and paid advertising platforms.",              bentoComponent: "orbiting-icons",              centerIcon: Target,
              items: [
                { icon: Instagram, ring: 1 },
                { icon: Mail, ring: 2 },
                { icon: Video, ring: 2 },
                { icon: Zap, ring: 3 }
              ]
            },
            {
              title: "Rapid Turnaround",              description: "Agile workflow ensuring quick delivery without compromising quality or strategic depth.",              bentoComponent: "timeline",              heading: "Project Timeline",              subheading: "From brief to delivery",              items: [
                { label: "Discovery", detail: "Understanding your goals and audience" },
                { label: "Strategy", detail: "Developing comprehensive marketing plan" },
                { label: "Execution", detail: "Creating and launching campaigns" }
              ],
              completedLabel: "Complete"
            }
          ]}
          textboxLayout="default"
          animationType="blur-reveal"
          useInvertedBackground="noInvert"
          carouselMode="buttons"
        />
      </div>

      <div id="testimonial" data-section="testimonial">
        <TestimonialCardFifteen
          testimonial="InClips Media transformed our brand's online presence. Their strategic approach and creative execution delivered a 250% increase in engagement within three months. Truly exceptional work."
          rating={5}
          author="Sarah Mitchell, CEO of TechVenture"
          avatars={[
            { src: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "Sarah Mitchell" },
            { src: "https://img.b2bpic.net/free-photo/smiling-homosexual-man-official-suit-looking-camera-close-up-shot-happy-gay-getting-dressed-wedding-ceremony-standing-hotel-room-with-his-partner-background-love-emotion-concept_74855-22675.jpg", alt: "James Chen" },
            { src: "https://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg", alt: "Emma Rodriguez" },
            { src: "https://img.b2bpic.net/free-photo/closeup-handsome-middle-aged-business-leader_1262-4822.jpg", alt: "David Kim" }
          ]}
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqSplitMedia
          title="Common Questions"
          description="Find answers to frequently asked questions about our services, process, and partnership approach."
          faqs={[
            {
              id: "1",              title: "What is your typical project timeline?",              content: "Most projects range from 4-12 weeks depending on scope. We work with you to establish realistic timelines and maintain clear communication throughout the process."
            },
            {
              id: "2",              title: "How do you measure campaign success?",              content: "We establish clear KPIs at project start and provide detailed analytics reports. We track engagement, conversions, reach, and ROI to ensure every marketing dollar is optimized."
            },
            {
              id: "3",              title: "What industries do you specialize in?",              content: "We work across diverse sectors including tech startups, e-commerce, professional services, and consumer brands. Our experience spans multiple industries with proven results."
            },
            {
              id: "4",              title: "Do you offer ongoing retainer services?",              content: "Yes, we provide flexible retainer packages for ongoing social media management, content creation, and strategy consultation tailored to your needs."
            },
            {
              id: "5",              title: "How much does a campaign typically cost?",              content: "Pricing varies based on scope, complexity, and deliverables. We provide custom quotes after understanding your goals. We work with all budget sizes from startups to enterprises."
            },
            {
              id: "6",              title: "Can you help with content distribution?",              content: "Absolutely. We handle the complete content lifecycle from creation to strategic distribution across your preferred channels for maximum impact."
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/people-working-call-center_23-2149288189.jpg"
          imageAlt="InClips Media team providing customer support"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          mediaPosition="left"
          animationType="smooth"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Get Started"
          title="Ready to Elevate Your Brand?"
          description="Let's discuss how InClips Media can transform your digital marketing strategy. Get in touch to schedule a consultation with our team."
          tagIcon={Rocket}
          background={{ variant: "gradient-bars" }}
          useInvertedBackground="noInvert"
          inputPlaceholder="your@email.com"
          buttonText="Schedule Consultation"
          termsText="We respect your privacy. Your information is secure and we'll never spam you."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="InClips Media"
          columns={[
            {
              title: "Services",              items: [
                { label: "Content Creation", href: "#services" },
                { label: "Social Media Marketing", href: "#services" },
                { label: "Brand Strategy", href: "#services" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About Us", href: "#about" },
                { label: "Work", href: "#work" },
                { label: "Testimonials", href: "#testimonial" }
              ]
            },
            {
              title: "Connect",              items: [
                { label: "Contact", href: "#contact" },
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "Instagram", href: "https://instagram.com" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "#privacy" },
                { label: "Terms of Service", href: "#terms" },
                { label: "Contact Policy", href: "#contact-policy" }
              ]
            }
          ]}
          copyrightText="© 2025 InClips Media. All rights reserved."
        />
      </div>
    </ThemeProvider>
  );
}