"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqSplitText from '@/components/sections/faq/FaqSplitText';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroLogo from '@/components/sections/hero/HeroLogo';
import MetricCardOne from '@/components/sections/metrics/MetricCardOne';
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import { Activity, CheckCircle, Droplet, Link, Lock, Maximize, Shield, Wind, Zap, Cpu } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="background-highlight"
        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">
      <NavbarStyleApple
      navItems={[
        { name: "Design", id: "#design" },
        { name: "Sensors", id: "#sensors" },
        { name: "Bands", id: "#bands" },
        { name: "Specs", id: "#specs" },
      ]}
      brandName="AURA-Link"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroLogo
      logoText="AURA-Link"
      description="The ultimate anti-smartwatch performance wearable. Total focus. Total precision. No compromises."
      buttons={[{ text: "Explore Technology", href: "#design" }]}
      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3Df7BrqHekJbf0JwnZVPres5doV/uploaded-1778661601905-gywd2xsg.jpg"
      imageAlt="AURA-Link Wearable Tracking System"
    />
  </div>

  <div id="design" data-section="design">
      <FeatureCardTen
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          title: "Titanium Core",          description: "Grade-5 titanium shell, sandblasted for a stealth aesthetic.",          media: { imageSrc: "http://img.b2bpic.net/free-photo/still-life-tech-device_23-2150722614.jpg" },
          items: [
            { icon: Shield, text: "Scratch-resistant" },
            { icon: Cpu, text: "CNC Precision" },
          ],
          reverse: false
        },
        {
          title: "Robust Versatility",          description: "Engineered for 10 ATM pressure and extreme activity.",          media: { imageSrc: "http://img.b2bpic.net/free-photo/rear-view-glad-woman-wears-yellow-raincoat-with-hood-smiles-happily-walks-shore-mountain-lake_273609-25903.jpg" },
          items: [
            { icon: Droplet, text: "Waterproof Seal" },
            { icon: Wind, text: "Aerodynamic Profile" },
          ],
          reverse: true
        },
      ]}
      title="Precision Architecture"
      description="A precision-machined, matte black titanium or aluminum core, designed for elite performance."
    />
  </div>

  <div id="sensors" data-section="sensors">
      <MetricCardOne
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={true}
      animationType="slide-up"
      metrics={[
        { id: "m1", value: "24/7", title: "Monitoring", description: "Continuous heart rate tracking.", icon: Activity },
        { id: "m2", value: "SpO2", title: "Analysis", description: "Blood oxygen saturation tracking.", icon: Activity },
        { id: "m3", value: "10ATM", title: "Durability", description: "Depth and pressure endurance.", icon: Link },
      ]}
      title="Bio-Telemetry Precision"
      description="Advanced multi-sensor array for high-fidelity data acquisition during intensive exercise."
    />
  </div>

  <div id="bands" data-section="bands">
      <FeatureCardTen
      animationType="scale-rotate"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          title: "Slide Rail Lock",          description: "Haptic, metallic locking mechanism.",          media: { imageSrc: "http://img.b2bpic.net/free-photo/view-tiny-music-boxes-collection_23-2150545635.jpg" },
          items: [
            { icon: Lock, text: "Dual safety lock" },
            { icon: Zap, text: "Tool-free exchange" },
          ],
          reverse: false
        },
        {
          title: "Performance Integration",          description: "Designed for maximum skin contact.",          media: { imageSrc: "http://img.b2bpic.net/free-photo/artistic-background-wallpaper-with-color-halftone-effect_58702-9084.jpg" },
          items: [
            { icon: CheckCircle, text: "No movement" },
            { icon: Maximize, text: "Adaptive fit" },
          ],
          reverse: true
        },
      ]}
      title="Modular Locking System"
      description="A seamless, dual-lock rail mechanism that ensures total security without compromising the sleek look."
    />
  </div>

  <div id="variants" data-section="variants">
      <ProductCardFour
      animationType="opacity"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      products={[
        { id: "p1", name: "Neon Performance", price: "€59", variant: "Stretch-Nylon", imageSrc: "http://img.b2bpic.net/free-photo/white-cord-rope-isolated-white-surface_181624-37738.jpg" },
        { id: "p2", name: "Ocean Lifestyle", price: "€49", variant: "Ocean Plastic", imageSrc: "http://img.b2bpic.net/free-photo/smartwatch-screen-digital-device_53876-96833.jpg" },
        { id: "p3", name: "Titan Edition", price: "€199", variant: "Grade-5 Titanium", imageSrc: "http://img.b2bpic.net/free-photo/group-rimmel-dark-blackboard_23-2148210801.jpg" },
      ]}
      title="Band Ecosystem"
      description="Premium bands for every environment, from track sessions to daily living."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitText
      useInvertedBackground={false}
      faqs={[
        { id: "q1", title: "Why no display?", content: "Total focus. Screens are distractions; AURA-Link is data." },
        { id: "q2", title: "How to charge?", content: "Inductive charging via an included magnetic dock." },
        { id: "q3", title: "Battery life?", content: "Up to 10 days of normal usage." },
      ]}
      sideTitle="Tech Insights"
      sideDescription="Common questions regarding the AURA-Link system."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="social" data-section="social">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={true}
      names={[
        "Runners Collective", "Triathlon Pro", "Olympic Tech", "Crossfit Elite", "Alpine Guide", "Marathon Series", "Endurance Lab"]}
      title="Trusted by Athletes"
      description="Engineered for those who push their limits daily."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={false}
      background={{ variant: "sparkles-gradient" }}
      tag="Waitlist"
      title="Secure Your AURA-Link"
      description="Sign up to be among the first to experience the ultimate performance wearable."
      buttons={[{ text: "Join Waitlist" }]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/sporty-woman-with-smartwatch-beach_23-2147803054.jpg"
      logoText="AURA-Link"
      columns={[
        {
          title: "Product",          items: [{ label: "Design", href: "#design" }, { label: "Tech Specs", href: "#specs" }],
        },
        {
          title: "Company",          items: [{ label: "About", href: "#" }, { label: "Contact", href: "#" }],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}