"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureHoverPattern from '@/components/sections/feature/featureHoverPattern/FeatureHoverPattern';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import { CheckCircle, Lightbulb, LineChart, ArrowRight } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="smallMedium"
        sizing="largeSmallSizeLargeTitles"
        background="none"
        cardStyle="soft-shadow"
        primaryButtonStyle="flat"
        secondaryButtonStyle="glass"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        { name: "Features", id: "#features" },
        { name: "About", id: "#about" },
        { name: "Waitlist", id: "#contact" },
      ]}
      brandName="Vylx"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroCarouselLogo
      logoText="Vylx"
      description="Your emotional wellbeing, simplified. Join the waitlist and gain early access to AI-powered personalized insights."
      buttons={[
        { text: "Start Your Wellness Journey", href: "#contact" },
      ]}
      slides={[
        { imageSrc: "http://img.b2bpic.net/free-photo/high-angle-easter-decorative-egg_23-2150245745.jpg", imageAlt: "Abstract art" },
        { imageSrc: "http://img.b2bpic.net/free-photo/determined-ceo-works-office-analyzing-infographics-setting-business-goals_482257-123120.jpg", imageAlt: "Analytics dashboard" },
        { imageSrc: "http://img.b2bpic.net/free-photo/aesthetic-background-with-gradient-sunset-projector-lamp_53876-103791.jpg", imageAlt: "Gradient flow" },
        { imageSrc: "http://img.b2bpic.net/free-photo/top-view-school-supplies-with-copyspace_23-2148198161.jpg", imageAlt: "Crystal insights" },
        { imageSrc: "http://img.b2bpic.net/free-photo/high-angle-hand-holding-smartphone_23-2149930146.jpg", imageAlt: "Interface login" },
        { imageSrc: "http://img.b2bpic.net/free-photo/woman-posing-ethereal-environment_23-2151113672.jpg", imageAlt: "Zen abstract" },
      ]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureHoverPattern
      animationType="slide-up"
      textboxLayout="split-actions"
      useInvertedBackground={true}
      buttons={[
        { text: "Explore All Capabilities", href: "#contact" }
      ]}
      features={[
        {
          icon: CheckCircle,
          title: "Daily Mood Logging",          description: "Quickly capture your mood throughout the day with ease.",          button: { text: "Learn More", href: "#about" }
        },
        {
          icon: LineChart,
          title: "Trend Analysis",          description: "Identify hidden patterns in your mental wellness journey.",          button: { text: "Learn More", href: "#about" }
        },
        {
          icon: Lightbulb,
          title: "AI Coaching",          description: "Personalized advice based on your unique emotional data.",          button: { text: "Learn More", href: "#about" }
        },
      ]}
      title="Smart Features for Better Days"
      description="Vylx provides actionable insights to help you thrive."
    />
  </div>

  <div id="about" data-section="about">
      <MediaAbout
      useInvertedBackground={false}
      title="Designed for Balance"
      description="Vylx is more than a tracker; it's a compassionate companion. We help young professionals find balance in a busy world with datadriven empathy."
      imageSrc="http://img.b2bpic.net/free-photo/girl-night-with-phone_1157-16805.jpg"
      imageAlt="Vylx app interface interaction"
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardEleven
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      metrics={[
        { id: "m1", value: "85%", title: "Improved Clarity", description: "Users reported better understanding of mood triggers.", imageSrc: "http://img.b2bpic.net/free-vector/set-computer-icon-vectors_53876-60023.jpg" },
        { id: "m2", value: "12min", title: "Daily Average", description: "Time saved in emotional processing.", imageSrc: "http://img.b2bpic.net/free-photo/battery-full-sign-right-side-with-white-background_187299-39725.jpg" },
        { id: "m3", value: "4.8/5", title: "User Rating", description: "Our current rating from early beta testers.", imageSrc: "http://img.b2bpic.net/free-photo/vertical-banner-sale-ads_23-2150695149.jpg" },
      ]}
      title="Real Results"
      description="Our beta testing shows significant improvements in user mindfulness."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwo
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      testimonials={[
        { id: "1", name: "Sarah Johnson", role: "Designer", testimonial: "Vylx completely changed how I track my daily stress levels.", imageSrc: "http://img.b2bpic.net/free-photo/stylish-woman-wearing-yellow-bandana_273609-13338.jpg" },
        { id: "2", name: "Michael Chen", role: "Developer", testimonial: "The AI insights feel incredibly personalized and helpful.", imageSrc: "http://img.b2bpic.net/free-photo/people-technology-leisure-concept_273609-6599.jpg" },
        { id: "3", name: "Emily Rodriguez", role: "Student", testimonial: "So simple to use and the patterns are so clear.", imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-transgender-wearing-sunglasses_23-2149105478.jpg" },
        { id: "4", name: "David Kim", role: "Manager", testimonial: "An essential tool for my daily mindfulness routine.", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-middle-aged-woman-portrait_23-2149051749.jpg" },
        { id: "5", name: "Jessica Lee", role: "Writer", testimonial: "Finally, a tracker that understands my daily routine.", imageSrc: "http://img.b2bpic.net/free-photo/man-solar-panels-plant-using-laptop-improve-solar-cells-efficiency_482257-119894.jpg" },
      ]}
      title="Loved by Beta Testers"
      description="Hear what early adopters have to say about Vylx."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="split"
      useInvertedBackground={true}
      faqs={[
        { id: "f1", title: "Is Vylx free?", content: "The basic version is free, with premium features available via subscription." },
        { id: "f2", title: "When is launch?", content: "We are targeting a Q3 2025 release." },
        { id: "f3", title: "Can I refer friends?", content: "Yes, sharing your link earns you priority access on the waitlist." },
      ]}
      title="Common Questions"
      description="Answers to your questions about Vylx."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={false}
      background={{ variant: "sparkles-gradient" }}
      tag="Waitlist"
      title="Get Early Access"
      description="Join thousands of others starting their journey with Vylx."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="Vylx"
      columns={[
        {
          title: "Product",          items: [
            { label: "Features", href: "#features" },
            { label: "Early Access", href: "#contact" },
          ],
        },
        {
          title: "Company",          items: [
            { label: "About", href: "#about" },
            { label: "Privacy Policy", href: "#" },
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}