"use client";

import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
import AboutMetric from '@/components/sections/about/AboutMetric';
import FeatureCardTwelve from '@/components/sections/feature/FeatureCardTwelve';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import ContactSplit from '@/components/sections/contact/ContactSplit';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { ThemeProvider } from '@/providers/themeProvider/ThemeProvider';
import { TrendingUp, Users, Heart, Zap, Instagram, Camera, BarChart3, MessageSquare } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-bubble"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="small"
      sizing="largeSmallSizeMediumTitles"
      background="blurBottom"
      cardStyle="outline"
      primaryButtonStyle="double-inset"
      secondaryButtonStyle="layered"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingOverlay
          brandName="Fopo"
          navItems={[
            { name: "Portfolio", id: "portfolio" },
            { name: "Services", id: "services" },
            { name: "Results", id: "metrics" },
            { name: "FAQ", id: "faq" }
          ]}
          button={{ text: "Get Started", href: "#contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardGallery
          title="Your Story Deserves to Be Seen"
          description="We create scroll-stopping content and data-driven strategies that turn scrollers into customers. Join 150+ brands that grew 3x faster with Fopo."
          tag="Social Media Agency"
          tagAnimation="slide-up"
          buttons={[
            { text: "View Our Work", href: "#portfolio" },
            { text: "Book a Call", href: "#contact" }
          ]}
          buttonAnimation="slide-up"
          mediaItems={[
            {
              imageSrc: "http://img.b2bpic.net/free-psd/flat-design-mother-s-day-template_23-2150250724.jpg",              imageAlt: "instagram feed aesthetic grid layout"
            },
            {
              imageSrc: "http://img.b2bpic.net/free-psd/instagram-stories-templates-creative-events-with-custom-photo-cut-outs_23-2152033951.jpg",              imageAlt: "instagram story animation visual effect"
            },
            {
              imageSrc: "http://img.b2bpic.net/free-psd/best-video-call-app-banner-template_23-2148564740.jpg",              imageAlt: "instagram reel video content square format"
            }
          ]}
          mediaAnimation="slide-up"
          background={{ variant: "plain" }}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <AboutMetric
          title="Results That Speak Louder Than Followers"
          metrics={[
            { icon: TrendingUp, label: "Average Growth", value: "3x Faster" },
            { icon: Users, label: "Brands Served", value: "150+" },
            { icon: Heart, label: "Avg Engagement", value: "8.5%" },
            { icon: Zap, label: "Conversion Lift", value: "42%" }
          ]}
          metricsAnimation="slide-up"
          useInvertedBackground={false}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTwelve
          title="Services Built for Instagram Growth"
          description="From strategy to community management, we handle every aspect of your social presence with Instagram-native expertise."
          tag="Our Expertise"
          tagAnimation="slide-up"
          features={[
            {
              id: "content-strategy",              label: "Strategy",              title: "Feed Strategy",              items: [
                "Instagram algorithm optimization",                "Aesthetic consistency planning",                "Audience targeting",                "Trending content calendar"
              ]
            },
            {
              id: "content-creation",              label: "Content",              title: "Visual Storytelling",              items: [
                "Photography & videography",                "Feed-optimized designs",                "Reels & Stories editing",                "Brand aesthetic creation"
              ]
            },
            {
              id: "community-management",              label: "Community",              title: "Engagement Focus",              items: [
                "Daily post scheduling",                "DM & comment management",                "Community building",                "Influencer partnerships"
              ]
            },
            {
              id: "analytics-reporting",              label: "Analytics",              title: "Data-Driven Results",              items: [
                "Monthly performance reports",                "ROI tracking",                "Follower demographics",                "Content performance testing"
              ]
            }
          ]}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="portfolio" data-section="portfolio">
        <ProductCardTwo
          title="Portfolio: Real Results from Real Brands"
          description="Instagram campaigns that captured attention, built communities, and drove measurable business results."
          tag="Case Studies"
          tagAnimation="slide-up"
          products={[
            {
              id: "case-1",              brand: "Fashion Collective",              name: "3x Follower Growth",              price: "120K followers",              rating: 5,
              reviewCount: "Q2 2024",              imageSrc: "http://img.b2bpic.net/free-vector/abstract-fashion-sale-instagram-post-set_23-2148316889.jpg",              imageAlt: "fashion brand instagram feed aesthetic"
            },
            {
              id: "case-2",              brand: "Wellness Brand",              name: "Community Engagement",              price: "42% increase",              rating: 5,
              reviewCount: "Q1 2024",              imageSrc: "http://img.b2bpic.net/free-photo/top-view-wedding-planning-resources-arrangement_23-2150279496.jpg",              imageAlt: "lifestyle brand instagram content"
            },
            {
              id: "case-3",              brand: "Beauty E-commerce",              name: "Conversion Campaign",              price: "$280K revenue",              rating: 5,
              reviewCount: "Q3 2024",              imageSrc: "http://img.b2bpic.net/free-photo/cropped-front-end-developers-designing-mobile-application-interface_1098-20471.jpg",              imageAlt: "beauty brand social media content"
            }
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardThirteen
          title="What Brands Say About Fopo"
          description="Real feedback from businesses we've partnered with and grown."
          tag="Client Stories"
          tagAnimation="slide-up"
          testimonials={[
            {
              id: "1",              name: "Sarah Chen",              handle: "@sarahchen_co",              testimonial: "Fopo transformed our Instagram presence. We went from 5K to 50K followers in 6 months while maintaining authentic engagement. Their strategy is unmatched.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/young-woman-sitting-library_273609-15845.jpg",              imageAlt: "professional woman headshot"
            },
            {
              id: "2",              name: "Marcus Williams",              handle: "@marcus.retail",              testimonial: "Their content calendar and creative direction completely elevated our brand. Sales increased 35% after their first campaign. Highly recommend!",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/close-up-competitive-employee_1098-2870.jpg",              imageAlt: "professional man headshot"
            },
            {
              id: "3",              name: "Emma Rodriguez",              handle: "@emmabeauty.co",              testimonial: "Finally an agency that understands both aesthetics and analytics. Every post is a masterclass in visual storytelling with measurable business results.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/elderly-businesswoman-sitting-outside-cafe_1303-19462.jpg",              imageAlt: "professional woman founder headshot"
            },
            {
              id: "4",              name: "David Kim",              handle: "@davidkimpro",              testimonial: "We trusted Fopo with our complete social strategy and haven't looked back. Professional, responsive, and results-driven from day one.",              rating: 5,
              imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1649.jpg",              imageAlt: "professional man entrepreneur headshot"
            }
          ]}
          showRating={true}
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="social-proof" data-section="social-proof">
        <SocialProofOne
          title="Trusted by Leading Brands"
          description="We partner with ambitious e-commerce and lifestyle brands that demand Instagram excellence and real growth."
          names={[
            "Fashion Collective",            "Wellness Co",            "Beauty Labs",            "Retail Plus",            "Lifestyle Group",            "Commerce Hub",            "Brand Studios"
          ]}
          logos={[
            "http://img.b2bpic.net/free-vector/circular-fashion-logo-template_23-2150217223.jpg",            "http://img.b2bpic.net/free-vector/flat-design-authentic-business-card-design_23-2151027133.jpg",            "http://img.b2bpic.net/free-vector/vintage-style-hand-drawn-floral-logo-template-set_1017-60675.jpg",            "http://img.b2bpic.net/free-psd/marketing-template-design_23-2151334215.jpg",            "http://img.b2bpic.net/free-vector/abstract-colorful-shapes_1025-453.jpg",            "http://img.b2bpic.net/free-vector/lager-beer-label-pack_23-2147500701.jpg",            "http://img.b2bpic.net/free-vector/colorful-hexagonal-logotype-photography_1057-1787.jpg"
          ]}
          textboxLayout="default"
          useInvertedBackground={false}
          showCard={true}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqDouble
          title="Frequently Asked Questions"
          description="Everything you need to know about working with Fopo."
          tag="Get Answers"
          tagAnimation="slide-up"
          faqs={[
            {
              id: "1",              title: "How quickly will we see Instagram growth?",              content: "Most clients see engagement improvements within 2-3 weeks. Follower growth accelerates around week 6-8. We focus on sustainable, authentic growth rather than vanity metrics that don't convert."
            },
            {
              id: "2",              title: "Do you create the content yourself?",              content: "Yes, we handle full content creation including photography, videography, graphic design, and copywriting optimized for Instagram. You can also provide content for us to edit and enhance. It's completely flexible."
            },
            {
              id: "3",              title: "What Instagram features do you specialize in?",              content: "We're experts in feed posts, Reels, Stories, Carousel posts, and Instagram Shopping. We optimize every format for maximum engagement and algorithm performance on the platform."
            },
            {
              id: "4",              title: "How do you measure Instagram success?",              content: "We track follower growth, engagement rate (likes, comments, shares), reach, impressions, and most importantly, conversions and revenue impact. You get detailed monthly reports with actionable insights."
            },
            {
              id: "5",              title: "What's your pricing for Instagram management?",              content: "We offer tiered packages starting at $2,500/month for full management and strategy, with content creation available as add-ons. We also offer project-based rates for specific campaigns. Custom quotes available."
            },
            {
              id: "6",              title: "Can you work with my existing Instagram content?",              content: "Absolutely. We can optimize and schedule your existing content, edit it for Instagram specs, and create a cohesive visual strategy. We also add new content creation to complement what you already have."
            }
          ]}
          faqsAnimation="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactSplit
          tag="Ready to Grow?"
          title="Let's Amplify Your Instagram Presence"
          description="Schedule a free strategy call with our team. We'll audit your Instagram account and create a custom growth plan for your brand."
          tagAnimation="slide-up"
          background={{ variant: "plain" }}
          useInvertedBackground={false}
          imageSrc="http://img.b2bpic.net/free-photo/people-working-together-project_23-2148816845.jpg"
          imageAlt="creative team collaboration workspace"
          mediaAnimation="slide-up"
          mediaPosition="right"
          inputPlaceholder="Enter your email"
          buttonText="Schedule Call"
          termsText="We respect your privacy. Unsubscribe at any time."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="Fopo"
          columns={[
            {
              items: [
                { label: "Home", href: "/" },
                { label: "Portfolio", href: "#portfolio" },
                { label: "Services", href: "#services" },
                { label: "Contact", href: "#contact" }
              ]
            },
            {
              items: [
                { label: "Instagram", href: "https://instagram.com" },
                { label: "TikTok", href: "https://tiktok.com" },
                { label: "LinkedIn", href: "https://linkedin.com" },
                { label: "Twitter", href: "https://twitter.com" }
              ]
            },
            {
              items: [
                { label: "About Us", href: "#" },
                { label: "Blog", href: "#" },
                { label: "Resources", href: "#" },
                { label: "Careers", href: "#" }
              ]
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Contact Us", href: "#contact" },
                { label: "hello@fopo.com", href: "mailto:hello@fopo.com" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
