"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import FooterCard from '@/components/sections/footer/FooterCard';
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
import MetricCardSeven from '@/components/sections/metrics/MetricCardSeven';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
import TestimonialCardTen from '@/components/sections/testimonial/TestimonialCardTen';
import { ShieldCheck } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="bounce-effect"
        defaultTextAnimation="entrance-slide"
        borderRadius="pill"
        contentWidth="compact"
        sizing="largeSmall"
        background="noise"
        cardStyle="glass-depth"
        primaryButtonStyle="flat"
        secondaryButtonStyle="layered"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "About",
          id: "#about",
        },
        {
          name: "Services",
          id: "#services",
        },
        {
          name: "FAQ",
          id: "#faq",
        },
        {
          name: "Support",
          id: "#contact",
        },
      ]}
      brandName="Ecosystem Services"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroLogoBillboard
      background={{
        variant: "gradient-bars",
      }}
      logoText="Secure Ecosystem Platform"
      description="Premium service management with total administrative control. Safe, efficient, and transparent cryptocurrency-based operations."
      buttons={[
        {
          text: "Get Started",
          href: "#contact",
        },
        {
          text: "Learn More",
          href: "#about",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/businessman-working-futuristic-office_23-2151003753.jpg"
      mediaAnimation="slide-up"
      imageAlt="digital technology dashboard dark mode"
    />
  </div>

  <div id="about" data-section="about">
      <TestimonialAboutCard
      useInvertedBackground={false}
      tag="About Us"
      title="Your Trusted Service Ecosystem"
      description="We offer a closed, highly secure environment for your service needs. You manage every detail, ensuring perfect alignment between client requirements and staff execution."
      subdescription="Built for security, managed with total administrative authority over every conversation and transaction."
      imageSrc="http://img.b2bpic.net/free-photo/solar-panels-plant-specialist-using-chroma-key-tablet-study-energy-systems_482257-126105.jpg"
      mediaAnimation="blur-reveal"
      imageAlt="professional developer working"
      icon={ShieldCheck}
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardTwentyOne
      useInvertedBackground={true}
      title="Core Features & Security"
      description="Everything you need to run your business securely on our platform."
      accordionItems={[
        {
          id: "f1",
          title: "Administrative Control",
          content: "You have full access to view, monitor, and moderate every single communication and file transfer.",
        },
        {
          id: "f2",
          title: "Cryptocurrency Payments",
          content: "Instant, secure payments using USDT, TON, BTC, or ETH, verified automatically by the system.",
        },
        {
          id: "f3",
          title: "Escrow Workflow",
          content: "Funds are held securely until the project work is finalized and approved by you.",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/beautiful-cryptocurrency-hologram-design_23-2149250221.jpg"
      mediaAnimation="slide-up"
      imageAlt="secure crypto payment icon"
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardSeven
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",
          value: "100%",
          title: "Security Control",
          items: [
            "Communication monitoring",
            "Transaction transparency",
          ],
        },
        {
          id: "m2",
          value: "24/7",
          title: "Support Access",
          items: [
            "AI assistance",
            "Human oversight",
          ],
        },
        {
          id: "m3",
          value: "5+",
          title: "Expert Staff",
          items: [
            "Vetted professionals",
            "Verified quality",
          ],
        },
      ]}
      title="Platform Excellence"
      description="We guarantee security and satisfaction through proven project management metrics."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTen
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "1",
          title: "Great Experience",
          quote: "The platform's control features are unmatched. Everything is professional.",
          name: "John Doe",
          role: "CEO",
          imageSrc: "http://img.b2bpic.net/free-photo/confident-businessman-smiling_107420-84734.jpg",
        },
        {
          id: "2",
          title: "Safe Transactions",
          quote: "Using crypto on this platform made my payments feel entirely secure.",
          name: "Sarah Smith",
          role: "Director",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-successful-young-businessman-with-his-arms-crossed-looking-camera_23-2148176207.jpg",
        },
        {
          id: "3",
          title: "Professionalism",
          quote: "Great communication with staff, all kept organized and secure.",
          name: "Michael Brown",
          role: "Project Lead",
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-middle-aged-business-leader-window_1262-5674.jpg",
        },
        {
          id: "4",
          title: "Reliable",
          quote: "The escrow system gives me total peace of mind for all projects.",
          name: "Emily White",
          role: "Manager",
          imageSrc: "http://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",
        },
        {
          id: "5",
          title: "Highly Recommend",
          quote: "Total control over every detail of my service request.",
          name: "David Wilson",
          role: "Product Owner",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-businessman-conference-room-thinking-about-future_482257-25787.jpg",
        },
      ]}
      title="Trusted by Our Clients"
      description="Secure, efficient, and professional. Our platform is the choice for clients who value control."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="split"
      useInvertedBackground={false}
      faqs={[
        {
          id: "q1",
          title: "Is my communication monitored?",
          content: "Yes, as the administrator, you see everything to maintain the highest quality and safety standards.",
        },
        {
          id: "q2",
          title: "How does payment work?",
          content: "You pay securely using cryptocurrency and we hold the funds until the project completion.",
        },
        {
          id: "q3",
          title: "Can I request changes?",
          content: "Absolutely, all project changes can be discussed through the secure in-platform chat.",
        },
      ]}
      title="Frequently Asked Questions"
      description="Get answers about platform security and your workflows."
      faqsAnimation="blur-reveal"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={true}
      background={{
        variant: "sparkles-gradient",
      }}
      tag="Get Started"
      title="Ready to Start Your Project?"
      description="Join the ecosystem where security and control meet professional service execution."
      buttons={[
        {
          text: "Connect with Admin",
          href: "#",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterCard
      logoText="Ecosystem Services"
      copyrightText="© 2025 | Controlled Platform"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
