"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardTwentyFive from '@/components/sections/feature/FeatureCardTwentyFive';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroOverlayTestimonial from '@/components/sections/hero/HeroOverlayTestimonial';
import MediaAbout from '@/components/sections/about/MediaAbout';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import { CheckCircle, Heart, Target } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="icon-arrow"
        defaultTextAnimation="reveal-blur"
        borderRadius="soft"
        contentWidth="mediumLarge"
        sizing="mediumLarge"
        background="floatingGradient"
        cardStyle="solid"
        primaryButtonStyle="gradient"
        secondaryButtonStyle="layered"
        headingFontWeight="medium"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Priorities",
          id: "hero",
        },
        {
          name: "Modules",
          id: "features",
        },
        {
          name: "Philosophy",
          id: "about",
        },
        {
          name: "FAQ",
          id: "faq",
        },
      ]}
      brandName="Marrow"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroOverlayTestimonial
      title="A modular system for the parts of life worth structuring."
      description="Labs is the dashboard for health, finances, habits, meditations, and daily reflection. One place, designed to be the most personal piece of software you will ever own."
      testimonials={[
        {
          name: "Sarah J.",
          handle: "@sarahj",
          testimonial: "This system completely transformed my daily focus and productivity.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-keeping-arms-crossed-black-blouse-black-pants-looking-confident_176474-55484.jpg",
        },
        {
          name: "Mark L.",
          handle: "@markl",
          testimonial: "The best Life OS I've found. Truly personal and modular.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/beige-soft-gradient-background-vintage-style_53876-108718.jpg",
        },
        {
          name: "Emily D.",
          handle: "@emilyd",
          testimonial: "I love how I can customize every single module to my needs.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-cheerful-caucasian-man_53876-24833.jpg",
        },
        {
          name: "David K.",
          handle: "@davidk",
          testimonial: "Finally, a way to structure my health and finances in one place.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/executives-having-fun-while-working_1098-2208.jpg",
        },
        {
          name: "Alex R.",
          handle: "@alexr",
          testimonial: "Simple, powerful, and built to grow with me.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/model-getting-ready-photoshoot_23-2149305177.jpg",
        },
      ]}
      buttons={[
        {
          text: "Get Started",
          href: "#",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/cyber-intelligence-secure-operations-center-with-usa-flag-big-screen_482257-105777.jpg"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/young-female-black-blouse-standing-with-crossed-arms-while-smiling-looking-glad_176474-46931.jpg",
          alt: "Portrait of young professional",
        },
        {
          src: "http://img.b2bpic.net/free-photo/young-lady-looking-camera-casual-shirt-looking-confident-front-view_176474-46857.jpg",
          alt: "Portrait of confident user",
        },
        {
          src: "http://img.b2bpic.net/free-photo/blond-woman-using-tablet-wall_23-2148095799.jpg",
          alt: "User with tablet",
        },
        {
          src: "http://img.b2bpic.net/free-photo/close-up-view-young-handsome-man-wearing-glasses-looking-front-isolated-orange-wall_141793-73719.jpg",
          alt: "User in glasses",
        },
        {
          src: "http://img.b2bpic.net/free-photo/interested-gorgeous-man-with-black-eyes-looking-indoor-photo-fashionable-well-dressed-african-guy-glasses_197531-22079.jpg",
          alt: "Professional user profile",
        },
      ]}
      avatarText="Join 5,000+ creators"
    />
  </div>

  <div id="about" data-section="about">
      <MediaAbout
      useInvertedBackground={true}
      title="Your data, truly yours."
      description="Every section is a self-contained app you can turn on, build, or remove. Your data stays yours and exports to any AI system, anytime. New modules get added regularly, in public on YouTube."
      imageSrc="http://img.b2bpic.net/free-photo/3d-render-modern-home-office_1048-17753.jpg"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardTwentyFive
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Daily Practice",
          description: "Routine management tools to keep you grounded every single morning.",
          icon: CheckCircle,
          mediaItems: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/hand-that-plays-smartphone-is-written-with-white-chalk-his-hand-draw-concept_1150-19561.jpg",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/person-being-scanned-by-digital-health-app_23-2151891755.jpg",
            },
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/cyber-intelligence-secure-operations-center-with-usa-flag-big-screen_482257-105777.jpg",
          imageAlt: "task manager UI design",
        },
        {
          title: "Health & Nutrition",
          description: "Log supplements, meals, and track energy levels with ease.",
          icon: Heart,
          mediaItems: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/high-view-hungry-businesswoman-eating-reviewing-chart_23-2148515938.jpg",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-photo/top-view-hand-holding-phone-with-menu_23-2149357871.jpg",
            },
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/3d-render-modern-home-office_1048-17753.jpg",
          imageAlt: "task manager UI design",
        },
        {
          title: "Goals & Vision",
          description: "A visual wall to align your daily tasks with long-term aspirations.",
          icon: Target,
          mediaItems: [
            {
              imageSrc: "http://img.b2bpic.net/free-photo/pink-adhesive-notes-ruler-white-background_23-2147875633.jpg",
            },
            {
              imageSrc: "http://img.b2bpic.net/free-vector/interface-task-management-application_23-2148632023.jpg",
            },
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-keeping-arms-crossed-black-blouse-black-pants-looking-confident_176474-55484.jpg",
          imageAlt: "task manager UI design",
        },
      ]}
      title="Core Modules Included"
      description="Start with powerful tools that grow as you do."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardFourteen
      useInvertedBackground={true}
      title="Data That Matters"
      tag="Transparency"
      metrics={[
        {
          id: "1",
          value: "12+",
          description: "Built-in modules",
        },
        {
          id: "2",
          value: "100%",
          description: "Data ownership",
        },
        {
          id: "3",
          value: "Public",
          description: "Development roadmap",
        },
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardTwo
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",
          name: "Sarah J.",
          role: "Entrepreneur",
          testimonial: "A total game changer for my workflow.",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-woman-studio_23-2148565552.jpg",
        },
        {
          id: "2",
          name: "Mark L.",
          role: "Developer",
          testimonial: "So easy to build your own dashboard.",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-exhausted-workaholic-man-manager-typing-financial-strategy-using-laptop-computer-while-sitting-desk-table-business-company-office_482257-2321.jpg",
        },
        {
          id: "3",
          name: "Emily D.",
          role: "Designer",
          testimonial: "Finally a personal OS that feels human.",
          imageSrc: "http://img.b2bpic.net/free-photo/confident-young-business-analyst-enjoying-coffee-break_1262-14892.jpg",
        },
        {
          id: "4",
          name: "David K.",
          role: "Consultant",
          testimonial: "The best organizational tool I've used.",
          imageSrc: "http://img.b2bpic.net/free-photo/data-center-admins-monitoring-artificial-intelligence-llm-visualization_482257-130422.jpg",
        },
        {
          id: "5",
          name: "Alex R.",
          role: "Writer",
          testimonial: "Everything I need, exactly where I need it.",
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-businesswoman-working-using-laptop-while-sitting-outdoors-corporate-woman-video_1258-118039.jpg",
        },
      ]}
      title="Community Voices"
      description="Join the growing community of people structuring their best life."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "q1",
          title: "Is my data private?",
          content: "Absolutely. You own 100% of your data.",
        },
        {
          id: "q2",
          title: "Can I integrate AI?",
          content: "Yes, all data exports to any AI system seamlessly.",
        },
        {
          id: "q3",
          title: "Are new modules added?",
          content: "We add new modules regularly, documented publicly on YouTube.",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/postcard-pictures-rack-against-white-wall_53876-138087.jpg"
      mediaAnimation="slide-up"
      title="Frequently Asked"
      description="Common questions about Labs OS."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={false}
      background={{
        variant: "plain",
      }}
      tag="Contact"
      title="Ready to build your OS?"
      description="Start structuring the parts of your life that matter most today."
      buttons={[
        {
          text: "Get Labs OS",
          href: "#",
        },
      ]}
    />
  </div>

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