"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroSplit from '@/components/sections/hero/HeroSplit';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
import { CheckCircle, Code, Palette, Rocket, ShieldCheck, TrendingUp } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="medium"
        sizing="medium"
        background="circleGradient"
        cardStyle="glass-elevated"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="glass"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        { name: "About", id: "#about" },
        { name: "Services", id: "#features" },
        { name: "Portfolio", id: "#testimonials" },
        { name: "Contact", id: "#contact" },
      ]}
      brandName="AgencyStudio"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplit
      background={{ variant: "plain" }}
      title="Elevating Digital Identity"
      description="We build high-performance websites that bridge the gap between creative design and technical excellence for global brands."
      buttons={[
        { text: "See Our Work", href: "#testimonials" },
        { text: "Contact Us", href: "#contact" },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/abstract-stain-with-ferromagnetic-liquid-metal-with-copy-space_23-2148253549.jpg?_wi=1"
      mediaAnimation="slide-up"
      avatars={[
        { src: "http://img.b2bpic.net/free-photo/close-up-portrait-middle-aged-man-with-beard-hairstyle-dressed-elegant-blue-suit-textured-dark-background-studio_613910-19853.jpg", alt: "professional entrepreneur portrait" },
        { src: "http://img.b2bpic.net/free-photo/blonde-businesswoman-portrait-with-copy-space_1194-633470.jpg", alt: "blonde businesswoman portrait" },
        { src: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-middle-aged-man-with-beard-hairstyle-dressed-elegant-formal-suit-textured-dark-background-studio_613910-19887.jpg", alt: "tech consultant portrait" },
        { src: "http://img.b2bpic.net/free-photo/handsome-bearded-african-american-businessman-brown-classic-jacket-isolated-dark-background_613910-6597.jpg", alt: "creative designer portrait" },
        { src: "http://img.b2bpic.net/free-photo/confident-african-businesswoman-mockup-psd-smiling-closeup-portr_53876-143279.jpg", alt: "project manager portrait" },
      ]}
      avatarText="Join 500+ satisfied clients"
      marqueeItems={[
        { type: "text", text: "Innovation" },
        { type: "text", text: "Performance" },
        { type: "text", text: "Scalability" },
        { type: "text", text: "Reliability" },
        { type: "text", text: "Creativity" },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <MediaAbout
      useInvertedBackground={false}
      title="Crafting Digital Future"
      description="Founded by industry experts, we focus on delivering scalable, secure, and visually stunning digital products that drive measurable business growth."
      imageSrc="http://img.b2bpic.net/free-photo/modern-minimalist-office_23-2151780713.jpg?_wi=1"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureHoverPattern
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        { icon: Code, title: "Custom Development", description: "Hand-coded solutions tailored to your unique requirements." },
        { icon: Palette, title: "UI/UX Design", description: "User-centric designs that maximize conversion rates." },
        { icon: Rocket, title: "Cloud Strategy", description: "Scalable architecture for growing businesses." },
      ]}
      title="Performance at Core"
      description="Our expertise spans across modern stacks and design patterns, ensuring your business stays ahead of the competition."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardOne
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      metrics={[
        { id: "m1", value: "150+", title: "Projects Shipped", description: "Delivered successfully.", icon: CheckCircle },
        { id: "m2", value: "20%", title: "Conversion Lift", description: "Average increase seen.", icon: TrendingUp },
        { id: "m3", value: "99.9%", title: "Uptime Rate", description: "Always available.", icon: ShieldCheck },
      ]}
      title="Impact Driven Results"
      description="We track every move, delivering data-backed performance that moves the needle for our partners."
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={["Innovate", "TechCorp", "GrowthCo", "LabCorp", "Zenith", "CloudSystem", "GlobalData"]}
      title="Trusted by Brands"
      description="We work with forward-thinking companies worldwide to build better digital experiences."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardFive
      textboxLayout="split"
      useInvertedBackground={false}
      testimonials={[
        { id: "t1", name: "Sarah J.", date: "Jan 2025", title: "CEO", quote: "The team transformed our presence entirely.", tag: "Brand Strategy", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-smiling-blonde-businesswoman-formal-dressed-isolated-dark-textured-background_613910-5399.jpg", imageSrc: "http://img.b2bpic.net/free-photo/abstract-stain-with-ferromagnetic-liquid-metal-with-copy-space_23-2148253549.jpg?_wi=2", imageAlt: "professional entrepreneur portrait" },
        { id: "t2", name: "Michael C.", date: "Dec 2024", title: "Creative Lead", quote: "An absolute joy to work with, pixel perfect execution.", tag: "UI/UX", avatarSrc: "http://img.b2bpic.net/free-photo/close-up-confident-corporate-woman-professional-entrepreneur-smiling-cross-arms-chest-smiling-enthusiastic-standing-white-background_1258-85600.jpg", imageSrc: "http://img.b2bpic.net/free-photo/modern-minimalist-office_23-2151780713.jpg?_wi=2", imageAlt: "professional entrepreneur portrait" },
        { id: "t3", name: "Emily R.", date: "Nov 2024", title: "Manager", quote: "Highly efficient and professional agency.", tag: "Development", avatarSrc: "http://img.b2bpic.net/free-photo/medium-shot-business-woman-posing_23-2149457761.jpg", imageSrc: "http://img.b2bpic.net/free-photo/young-businessman-happy-expression_1194-1604.jpg", imageAlt: "professional entrepreneur portrait" },
        { id: "t4", name: "David K.", date: "Oct 2024", title: "Product Lead", quote: "We saw instant conversion improvements.", tag: "Optimization", avatarSrc: "http://img.b2bpic.net/free-photo/bearded-man-brown-suit-wearing-glasses-looking-camera-happy-positive-with-arms-crossed-standing-purple-background_141793-110749.jpg", imageSrc: "http://img.b2bpic.net/free-vector/gradient-technology-logo_52683-8578.jpg", imageAlt: "professional entrepreneur portrait" },
        { id: "t5", name: "Olivia S.", date: "Sep 2024", title: "Founder", quote: "The best partner for scalable solutions.", tag: "Strategy", avatarSrc: "http://img.b2bpic.net/free-photo/design-creative-visual-trendy-ideas-style-purpose_53876-16492.jpg", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=w4jgk6", imageAlt: "professional entrepreneur portrait" },
      ]}
      title="Client Success Stories"
      description="Hear what our partners have to say about the impact we've made on their digital presence."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="split"
      useInvertedBackground={false}
      faqs={[
        { id: "f1", title: "What is your process?", content: "We follow a highly collaborative sprint-based approach." },
        { id: "f2", title: "Do you offer maintenance?", content: "Yes, we provide ongoing support and performance tuning." },
        { id: "f3", title: "How long do projects take?", content: "Timelines vary by complexity but average 8-12 weeks." },
      ]}
      title="Frequently Asked"
      description="Quick answers to common questions about our agency process and engagement model."
      faqsAnimation="slide-up"
      imageSrc="http://img.b2bpic.net/free-photo/modern-minimalist-office_23-2151780713.jpg?_wi=3"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={false}
      background={{ variant: "plain" }}
      tag="Ready to Start?"
      title="Let's Build Something Great"
      description="Get in touch to discuss your next project. We're ready to help you grow."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/3d-render-abstract-background-with-techno-cyber-particles_1048-14428.jpg"
      logoText="AgencyStudio"
      columns={[
        { title: "Company", items: [{ label: "About", href: "#about" }, { label: "Services", href: "#features" }] },
        { title: "Resources", items: [{ label: "FAQs", href: "#faq" }, { label: "Contact", href: "#contact" }] },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
