"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import SplitAbout from '@/components/sections/about/SplitAbout';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import TeamCardThree from '@/components/sections/team/TeamCardThree';
import TestimonialCardEleven from '@/components/sections/testimonial/TestimonialCardEleven';
import ContactInline from '@/components/sections/contact/ContactInline';
import FooterBase from '@/components/sections/footer/FooterBase';
import ButtonIconArrow from '@/components/button/ButtonIconArrow';
import { Users, Share2, Handshake, TrendingUp, Linkedin, Twitter, Instagram, Github, Mail } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="directional-hover"
      defaultTextAnimation="entrance-slide"
      borderRadius="rounded"
      contentWidth="mediumSmall"
      sizing="mediumLargeSizeMediumTitles"
      background="none"
      cardStyle="inset"
      primaryButtonStyle="outline"
      secondaryButtonStyle="layered"
      headingFontWeight="bold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline 
          brandName="NEXUS"
          navItems={[
            { name: "About", id: "about" },
            { name: "Services", id: "features" },
            { name: "Results", id: "metrics" },
            { name: "Contact", id: "contact" }
          ]}
          button={{ text: "Get Started", href: "contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroLogoBillboard 
          logoText="Creator Economy Unleashed"
          description="We amplify creator voices through strategic management, multi-platform distribution, and partnership acceleration. Trusted by Southeast Asia's top creators since 2015."
          imageSrc="https://img.b2bpic.net/free-photo/cozy-dark-loft-attractive-student-is-sitting-table-while-studying_613910-13260.jpg"
          imageAlt="Creative studio and production team workspace"
          frameStyle="card"
          logoLineHeight={1.1}
        />
      </div>

      <div id="about" data-section="about">
        <SplitAbout 
          tag="Our Story"
          title="Building Creator Empires Across Asia"
          description="With nearly a decade of experience in digital content strategy, we've evolved from a boutique agency into the region's most trusted creator management platform. We understand the creator economy—because we helped shape it."
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          imagePosition="right"
          bulletPoints={[
            {
              title: "Creator Management",              description: "Full-service talent management for digital creators, handling contracts, negotiations, and career growth strategies.",              icon: Users
            },
            {
              title: "Mass Distribution",              description: "Proprietary platform pushing content across 50+ channels simultaneously, maximizing reach and engagement metrics.",              icon: Share2
            },
            {
              title: "Strategic Partnerships",              description: "Connecting creators with premium brands for lucrative collaborations and sponsored content opportunities.",              icon: Handshake
            },
            {
              title: "Data-Driven Growth",              description: "Real-time analytics and optimization ensuring every campaign delivers measurable ROI and audience expansion.",              icon: TrendingUp
            }
          ]}
          imageSrc="https://img.b2bpic.net/free-photo/smiling-female-influencer-talking-about-beauty-products-while-vlogging-from-home_637285-4353.jpg"
          imageAlt="Team collaborating on content strategy"
          buttons={[
            { text: "Explore Services", href: "features" }
          ]}
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardThree 
          title="What Sets Us Apart"
          description="Comprehensive creator solutions powered by years of industry expertise and cutting-edge technology"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          gridVariant="bento-grid"
          features={[
            {
              id: "01",              title: "Content Distribution Network",              description: "Automated distribution to TikTok, Instagram, YouTube, Facebook, Twitter, and 45+ platforms simultaneously",              imageSrc: "https://img.b2bpic.net/free-photo/world-tablet_1155-26.jpg",              imageAlt: "Multi-platform content distribution visualization"
            },
            {
              id: "02",              title: "Audience Growth Strategy",              description: "Targeted growth campaigns that build engaged audiences through proven content frameworks and timing optimization",              imageSrc: "https://img.b2bpic.net/free-photo/digital-marketing-graph-statistics-analysis-finance-market-conce_53876-15839.jpg",              imageAlt: "Audience growth metrics and analytics"
            },
            {
              id: "03",              title: "Campaign Management",              description: "End-to-end campaign orchestration from brief development through performance tracking and optimization",              imageSrc: "https://img.b2bpic.net/free-photo/office-workers-working-together-as-team_23-2149310881.jpg",              imageAlt: "Campaign management dashboard and tools"
            },
            {
              id: "04",              title: "Brand Partnership Engine",              description: "Direct access to premium brands and monetization opportunities matched to creator niche and audience",              imageSrc: "https://img.b2bpic.net/free-photo/two-people-giving-fist-bump_53876-13536.jpg",              imageAlt: "Brand partnership collaboration and agreements"
            }
          ]}
        />
      </div>

      <div id="metrics" data-section="metrics">
        <MetricCardEleven 
          title="Impact By The Numbers"
          description="Proven results across our creator network and distribution ecosystem"
          textboxLayout="default"
          useInvertedBackground="invertCard"
          animationType="slide-up"
          metrics={[
            {
              id: "1",              value: "250M+",              title: "Monthly Reach",              description: "Combined audience across all managed creators",              imageSrc: "https://img.b2bpic.net/free-photo/businessman-examining-graphs-digital-tablet-while-planning-with-coworkers-desk-office_662251-126.jpg",              imageAlt: "Engagement metrics visualization"
            },
            {
              id: "2",              value: "45+",              title: "Platform Distribution",              description: "Content reaching every major social network globally",              imageSrc: "https://img.b2bpic.net/free-photo/our-world-connected-social-networking-interconnection-concept_53876-21158.jpg",              imageAlt: "Multi-platform distribution network"
            },
            {
              id: "3",              value: "8.5 years",              title: "Industry Experience",              description: "Deep expertise in creator economy evolution and trends",              imageSrc: "https://img.b2bpic.net/free-photo/smiling-female-influencer-talking-about-beauty-products-while-vlogging-from-home_637285-4353.jpg",              imageAlt: "Team experience and expertise"
            },
            {
              id: "4",              value: "150+",              title: "Active Creators",              description: "Professional creators we actively manage and develop",              imageSrc: "https://img.b2bpic.net/free-photo/cozy-dark-loft-attractive-student-is-sitting-table-while-studying_613910-13260.jpg",              imageAlt: "Creator team and collaborators"
            }
          ]}
        />
      </div>

      <div id="team" data-section="team">
        <TeamCardThree 
          title="Leadership & Expertise"
          description="Meet the strategists, creators, and technologists driving creator success"
          textboxLayout="default"
          useInvertedBackground="noInvert"
          animationType="slide-up"
          members={[
            {
              id: "1",              name: "Somchai Keertiphol",              role: "Founder & CEO",              imageSrc: "https://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",              imageAlt: "Portrait of Somchai Keertiphol",              socialLinks: [
                { icon: Linkedin, url: "https://linkedin.com" },
                { icon: Twitter, url: "https://twitter.com" }
              ]
            },
            {
              id: "2",              name: "Niran Suwannawanit",              role: "Head of Creator Relations",              imageSrc: "https://img.b2bpic.net/free-photo/pensive-person-alone-corridor-serious_1262-1042.jpg",              imageAlt: "Portrait of Niran Suwannawanit",              socialLinks: [
                { icon: Linkedin, url: "https://linkedin.com" },
                { icon: Instagram, url: "https://instagram.com" }
              ]
            },
            {
              id: "3",              name: "Anon Thawinchai",              role: "Director of Platform Technology",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-businessman-conference-room-thinking-about-future_482257-25787.jpg",              imageAlt: "Portrait of Anon Thawinchai",              socialLinks: [
                { icon: Linkedin, url: "https://linkedin.com" },
                { icon: Github, url: "https://github.com" }
              ]
            },
            {
              id: "4",              name: "Dao Sophachith",              role: "Chief Strategy Officer",              imageSrc: "https://img.b2bpic.net/free-photo/happy-businessman-smiling-camera_1163-4660.jpg",              imageAlt: "Portrait of Dao Sophachith",              socialLinks: [
                { icon: Linkedin, url: "https://linkedin.com" },
                { icon: Mail, url: "mailto:dao@nexus.co" }
              ]
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardEleven 
          title="Creator Success Stories"
          description="Hear how we've transformed creators into full-time content entrepreneurs"
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          testimonials={[
            {
              id: "1",              nameTitle: "Chalee Sirinui, TikTok Creator - @chaleecreates",              quote: "NEXUS took me from 50K followers to 2M in 8 months. Their distribution strategy is unmatched. I went from part-time to fully supporting my family through content.",              imageSrc: "https://img.b2bpic.net/free-photo/confident-african-american-businessman-black-classic-jacket-isolated-dark-background_613910-17869.jpg",              imageAlt: "Chalee Sirinui portrait"
            },
            {
              id: "2",              nameTitle: "Porn Siranart, YouTube Content Producer",              quote: "The multi-platform distribution is game-changing. They handle all the technical heavy lifting while I focus on creative excellence. Revenue increased 300% in the first quarter.",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-elegant-bearded-man-dressed-wool-jacket-bow-tie_613910-15696.jpg",              imageAlt: "Porn Siranart portrait"
            },
            {
              id: "3",              nameTitle: "Mint Chutima, Instagram Influencer & Brand Partner",              quote: "NEXUS connected me with premium brands I never could have accessed alone. They secured 5 six-figure partnerships that aligned perfectly with my values.",              imageSrc: "https://img.b2bpic.net/free-photo/portrait-outdoor-businessman_23-2148763884.jpg",              imageAlt: "Mint Chutima portrait"
            },
            {
              id: "4",              nameTitle: "Tao Rattanakorn, Lifestyle Creator",              quote: "The analytics dashboard gives me insights into every metric that matters. I can see exactly which content resonates and optimize in real-time.",              imageSrc: "https://img.b2bpic.net/free-photo/businessman-close-up_1139-650.jpg",              imageAlt: "Tao Rattanakorn portrait"
            },
            {
              id: "5",              nameTitle: "Ravi Pattanakul, Tech & Vlog Creator",              quote: "After 3 years of plateau, NEXUS reignited my growth. Their team understands the creator economy better than anyone—they're not just agents, they're strategists.",              imageSrc: "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",              imageAlt: "Ravi Pattanakul portrait"
            },
            {
              id: "6",              nameTitle: "Fang Nuttapon, Beauty & Wellness Creator",              quote: "From content strategy to partnership negotiation to revenue optimization—NEXUS handles it all with professionalism and transparency. Highly recommend.",              imageSrc: "https://img.b2bpic.net/free-photo/caucasian-brunette-male-portrait_158595-7921.jpg",              imageAlt: "Fang Nuttapon portrait"
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactInline 
          text="Ready to amplify your creator business?"
          animationType="entrance-slide"
          inputPlaceholder="Your email address"
          buttonText="Start Conversation"
          useInvertedBackground="noInvert"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase 
          logoText="NEXUS"
          copyrightText="© 2025 NEXUS. Creator Management & Distribution. Bangkok, Thailand."
          columns={[
            {
              title: "Platform",              items: [
                { label: "Features", href: "features" },
                { label: "Creators", href: "team" },
                { label: "Results", href: "metrics" }
              ]
            },
            {
              title: "Company",              items: [
                { label: "About", href: "about" },
                { label: "Contact", href: "contact" },
                { label: "Careers", href: "https://careers.nexus.co" }
              ]
            },
            {
              title: "Legal",              items: [
                { label: "Privacy Policy", href: "https://nexus.co/privacy" },
                { label: "Terms of Service", href: "https://nexus.co/terms" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}