"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactText from '@/components/sections/contact/ContactText';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import { Rocket, ShieldCheck, TrendingUp, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="small"
        sizing="medium"
        background="fluid"
        cardStyle="gradient-mesh"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="glass"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Features",          id: "#features"},
        {
          name: "Product",          id: "#product"},
        {
          name: "Pricing",          id: "#pricing"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      brandName="STEP ONE"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardScroll
      background={{
        variant: "gradient-bars"}}
      title="Your Journey Starts Here"
      description="Step One simplifies complex processes so you can focus on scaling your vision from day zero."
      tag="Innovative Startups"
      buttons={[
        {
          text: "Get Started",          href: "#contact"},
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/stone-ground-with-yellow-arrow-pointing-towards-crystal-bal_181624-11521.jpg"
      tagIcon={Rocket}
      imageAlt="start point concept"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardSeven
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      features={[
        {
          title: "Rapid Deployment",          description: "Get up and running in minutes, not hours.",          imageSrc: "http://img.b2bpic.net/free-vector/20-ux-ui-blue-color-icon-pack-like-list-vision-parameters-monitoring-volume_1142-24669.jpg",          imageAlt: "tech feature icon"},
        {
          title: "Data Insights",          description: "Make informed decisions with real-time analytics.",          imageSrc: "http://img.b2bpic.net/free-photo/graph-growth-success-strategy-marketing-computer-concept_53876-47081.jpg",          imageAlt: "data visualization icon"},
        {
          title: "Seamless Scaling",          description: "Infrastructure that grows alongside your business.",          imageSrc: "http://img.b2bpic.net/free-photo/business-network-background-connecting-dots-technology-design_53876-160270.jpg",          imageAlt: "network nodes tech"},
      ]}
      title="Why Choose Step One?"
      description="Powerful features designed to accelerate your growth."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardThree
      animationType="depth-3d"
      textboxLayout="default"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",          title: "Users Served",          value: "50K+",          icon: Users,
        },
        {
          id: "m2",          title: "Growth Rate",          value: "120%",          icon: TrendingUp,
        },
        {
          id: "m3",          title: "Uptime",          value: "99.9%",          icon: ShieldCheck,
        },
      ]}
      title="Proven Results"
      description="Empowering businesses through measurable success."
    />
  </div>

  <div id="product" data-section="product">
      <ProductCardTwo
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      products={[
        {
          id: "p1",          brand: "Module A",          name: "Growth Suite",          price: "$49",          rating: 5,
          reviewCount: "120",          imageSrc: "http://img.b2bpic.net/free-photo/empty-dark-office-multinational-company-showcases-charts-insight-night-forecast-data-display_482257-136491.jpg",          imageAlt: "digital dashboard display"},
        {
          id: "p2",          brand: "Module B",          name: "Data Analytics",          price: "$99",          rating: 5,
          reviewCount: "85",          imageSrc: "http://img.b2bpic.net/free-photo/3d-character-emerging-from-smartphone_23-2151336525.jpg",          imageAlt: "software tool display"},
        {
          id: "p3",          brand: "Module C",          name: "Task Manager",          price: "$29",          rating: 4,
          reviewCount: "210",          imageSrc: "http://img.b2bpic.net/free-vector/dark-gradient-infographic-template_23-2148279577.jpg",          imageAlt: "tech UI component"},
        {
          id: "p4",          brand: "Module D",          name: "Team Sync",          price: "$79",          rating: 5,
          reviewCount: "45",          imageSrc: "http://img.b2bpic.net/free-photo/empty-high-end-workspace-with-advanced-tech-tools-enhancing-productivity_482257-119752.jpg",          imageAlt: "business dashboard UI"},
        {
          id: "p5",          brand: "Module E",          name: "Secure Cloud",          price: "$129",          rating: 5,
          reviewCount: "150",          imageSrc: "http://img.b2bpic.net/free-photo/3d-shapes-glowing-with-bright-holographic-colors_23-2151037189.jpg",          imageAlt: "creative design asset"},
        {
          id: "p6",          brand: "Module F",          name: "Admin Panel",          price: "$199",          rating: 4,
          reviewCount: "92",          imageSrc: "http://img.b2bpic.net/free-photo/computer-network-data-center-information_53876-120601.jpg",          imageAlt: "analytics panel interface"},
      ]}
      title="Explore Our Solutions"
      description="Modular tools crafted for professional productivity."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSixteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "t1",          name: "Sarah J.",          role: "CEO",          company: "TechStream",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/positive-middle-aged-business-leader-window_1262-5388.jpg",          imageAlt: "professional business portrait"},
        {
          id: "t2",          name: "Michael K.",          role: "CTO",          company: "Innovate",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-successful-young-businessman-with-his-arms-crossed-looking-camera_23-2148176207.jpg",          imageAlt: "professional corporate portrait"},
        {
          id: "t3",          name: "Emily R.",          role: "Founder",          company: "Growth Co",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-young-businesswoman_23-2149153828.jpg",          imageAlt: "male business portrait"},
        {
          id: "t4",          name: "David W.",          role: "Lead Dev",          company: "AppFlow",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/waist-up-confident-businessman-office_329181-19349.jpg",          imageAlt: "smiling business portrait"},
        {
          id: "t5",          name: "Jessica L.",          role: "COO",          company: "ScaleUp",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/excited-woman-with-arms-up_23-2148336917.jpg",          imageAlt: "business person portrait"},
      ]}
      kpiItems={[
        {
          value: "98%",          label: "Retention"},
        {
          value: "100%",          label: "Security"},
        {
          value: "5M+",          label: "Actions"},
      ]}
      title="Trusted by Leaders"
      description="See why top companies build on Step One."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="split-actions"
      useInvertedBackground={true}
      buttons={[
          { text: "Contact Support", href: "#contact" }
      ]}
      faqs={[
        {
          id: "f1",          title: "Is integration easy?",          content: "Yes, our API is designed for immediate plug-and-play setup. Check our documentation for a 5-minute setup guide."},
        {
          id: "f2",          title: "Do I need support?",          content: "We offer 24/7 dedicated support for all premium tiers."},
        {
          id: "f3",          title: "Can I scale later?",          content: "Absolutely, move to higher tiers instantly as you grow."},
      ]}
      title="Frequently Asked"
      description="Answers to help you navigate your first steps."
      imageSrc="http://img.b2bpic.net/free-photo/server-room-computer-controlling-devices-used-high-speed-data-transfers_482257-124282.jpg"
      imageAlt="Server room computer controlling devices used for high speed data transfers"
      mediaAnimation="slide-up"
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactText
      useInvertedBackground={false}
      background={{
        variant: "sparkles-gradient"}}
      text="Ready to take Step One? Let's talk about your project."
      buttons={[
        {
          text: "Contact Us",          href: "mailto:hello@stepone.com"},
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoReveal
      logoText="STEP ONE"
      leftLink={{
        text: "Privacy Policy",        href: "#"}}
      rightLink={{
        text: "Terms of Service",        href: "#"}}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}