"use client";

import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardSix from '@/components/sections/testimonial/TestimonialCardSix';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import ContactText from '@/components/sections/contact/ContactText';
import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="elastic-effect"
      defaultTextAnimation="reveal-blur"
      borderRadius="pill"
      contentWidth="smallMedium"
      sizing="mediumLarge"
      background="noise"
      cardStyle="solid"
      primaryButtonStyle="flat"
      secondaryButtonStyle="glass"
      headingFontWeight="normal"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleFullscreen
          navItems={[
            { name: "Hero", id: "hero" },
            { name: "Capture", id: "about" },
            { name: "Detection", id: "feature" },
            { name: "Download", id: "pricing" },
            { name: "Contact", id: "contact" },
          ]}
          brandName="PinIt Cam"
          bottomLeftText="Engineered for Motorsport"
          bottomRightText="hello@pinitcam.com"
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="YOUR BEST MOMENTS.\nAUTOMATICALLY FOUND."
          description="No scrubbing. No editing. Just the highlights."
          background={{ variant: "plain" }}
          videoSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBee0aYCKABGRIekzYlrJnrJe/cinematic-slow-motion-video-of-a-race-ca-1772485340154-67e15aba.png"
          videoAriaLabel="Cinematic track day slow-motion footage"
          buttons={[
            { text: "Watch It Build", href: "#about" },
            { text: "Download on App Store", href: "https://apps.apple.com" },
          ]}
          mediaAnimation="blur-reveal"
          buttonAnimation="blur-reveal"
          className="relative overflow-hidden"
          containerClassName="w-full h-screen flex flex-col items-center justify-center"
          textBoxClassName="text-center space-y-6"
          titleClassName="text-5xl md:text-7xl font-bold tracking-tight uppercase"
          descriptionClassName="text-lg md:text-xl opacity-80 font-light"
          buttonContainerClassName="flex gap-4 justify-center flex-wrap"
          buttonClassName="px-8 py-3 rounded-full"
          mediaWrapperClassName="absolute inset-0 opacity-20"
        />
      </div>

      <div id="about" data-section="about">
        <MetricSplitMediaAbout
          tag="Dual Camera System"
          title="ROAD + DRIVER. PERFECTLY SYNCED."
          description="Front and rear cameras. One tap recording. Capture every angle of your track session automatically."
          metrics={[
            { value: "2x", title: "Camera Coverage" },
            { value: "60fps", title: "Synchronized Capture" },
          ]}
          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBee0aYCKABGRIekzYlrJnrJe/iphone-mockup-displaying-split-screen-in-1772485339604-2097968e.png"
          imageAlt="Dual camera split-screen interface"
          mediaAnimation="blur-reveal"
          metricsAnimation="slide-up"
          useInvertedBackground={false}
          tagAnimation="blur-reveal"
          className="py-20"
          containerClassName="grid grid-cols-1 md:grid-cols-2 gap-12 items-center"
          titleClassName="text-4xl md:text-5xl font-bold tracking-wide uppercase"
          descriptionClassName="text-lg opacity-80 leading-relaxed"
          metricCardClassName="border-l-2 border-purple-400 pl-6 py-4"
          metricValueClassName="text-3xl font-bold text-purple-300"
          metricTitleClassName="text-sm opacity-70 mt-2"
        />
      </div>

      <div id="feature" data-section="feature">
        <FeatureCardSix
          title="8 DETECTION ALGORITHMS.\nZERO MANUAL EDITING."
          description="PinIt Cam finds the moments that matter."
          tag="Detection Engine"
          features={[
            {
              id: 1,
              title: "Committed Corner",              description: "Identifies aggressive turn-in and late apex moments where driver skill shines.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBee0aYCKABGRIekzYlrJnrJe/animated-timeline-user-interface-showing-1772485339668-36ff5af7.png",              imageAlt: "Detection algorithm visualization"},
            {
              id: 2,
              title: "Hard Braking",              description: "Captures threshold braking zones and trail-braking technique.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBee0aYCKABGRIekzYlrJnrJe/animated-timeline-user-interface-showing-1772485339668-36ff5af7.png",              imageAlt: "Braking detection marker"},
            {
              id: 3,
              title: "Big Save",              description: "Detects recovery maneuvers and corrective steering inputs.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBee0aYCKABGRIekzYlrJnrJe/animated-timeline-user-interface-showing-1772485339668-36ff5af7.png",              imageAlt: "Save moment detection"},
            {
              id: 4,
              title: "Wild Reaction",              description: "Captures driver expressions of intensity and celebration.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBee0aYCKABGRIekzYlrJnrJe/animated-timeline-user-interface-showing-1772485339668-36ff5af7.png",              imageAlt: "Driver reaction detection"},
          ]}
          textboxLayout="default"
          useInvertedBackground={true}
          tagAnimation="blur-reveal"
          buttonAnimation="blur-reveal"
          className="py-24"
          containerClassName="space-y-16"
          titleClassName="text-4xl md:text-5xl font-bold tracking-wide uppercase text-center"
          descriptionClassName="text-center text-lg opacity-80 max-w-2xl mx-auto"
          stepNumberClassName="text-2xl font-bold text-purple-400"
          cardTitleClassName="text-xl font-bold uppercase tracking-wide"
          cardDescriptionClassName="text-sm opacity-70 leading-relaxed"
        />
      </div>

      <div id="product" data-section="product">
        <ProductCardFour
          title="SYNC YOUR GROUP.\nRELIVE THE BATTLES."
          description="AirDrop sessions. Automatic overtake and reaction detection."
          tag="Paddock"
          products={[
            {
              id: "session-1",              name: "Your Track Day",              price: "Session",              variant: "Multiple drivers",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBee0aYCKABGRIekzYlrJnrJe/two-iphone-mockups-side-by-side-showing--1772485339745-624df683.png",              imageAlt: "Group sync interface"},
            {
              id: "session-2",              name: "Battle Moments",              price: "Detected",              variant: "Overtakes & duels",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBee0aYCKABGRIekzYlrJnrJe/two-iphone-mockups-side-by-side-showing--1772485339745-624df683.png",              imageAlt: "Battle detection"},
            {
              id: "session-3",              name: "Shared Reels",              price: "Instant",              variant: "Auto-generated",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBee0aYCKABGRIekzYlrJnrJe/two-iphone-mockups-side-by-side-showing--1772485339745-624df683.png",              imageAlt: "Auto-generated reels"},
          ]}
          gridVariant="three-columns-all-equal-width"
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          tagAnimation="blur-reveal"
          buttonAnimation="blur-reveal"
          className="py-20"
          containerClassName="space-y-12"
          titleClassName="text-4xl md:text-5xl font-bold tracking-wide uppercase text-center"
          descriptionClassName="text-center text-lg opacity-80 max-w-2xl mx-auto"
          cardNameClassName="font-bold text-sm uppercase"
          cardPriceClassName="text-purple-400 font-bold text-lg"
          cardVariantClassName="text-xs opacity-60"
        />
      </div>

      <div id="testimonial" data-section="testimonial">
        <TestimonialCardSix
          title="BROADCAST-STYLE TELEMETRY."
          description="Speed. G-force. Distance. Session time. Fun and immersive—not race engineer precision."
          tag="Telemetry"
          testimonials={[
            {
              id: "1",              name: "Speed Display",              handle: "Real-time",              testimonial: "Watch your pace evolve throughout the session with live speed tracking and instant replay moments.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBee0aYCKABGRIekzYlrJnrJe/close-up-of-broadcast-style-telemetry-hu-1772485339512-f9f63f93.png",              imageAlt: "Speed telemetry display"},
            {
              id: "2",              name: "G-Force Meter",              handle: "Physics",              testimonial: "See the forces you're generating through corners. Understand your performance through telemetry overlays.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBee0aYCKABGRIekzYlrJnrJe/close-up-of-broadcast-style-telemetry-hu-1772485339512-f9f63f93.png",              imageAlt: "G-force indicator"},
            {
              id: "3",              name: "Distance Marker",              handle: "Location",              testimonial: "Track your position on track and compare line choices lap after lap with visual distance markers.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBee0aYCKABGRIekzYlrJnrJe/close-up-of-broadcast-style-telemetry-hu-1772485339512-f9f63f93.png",              imageAlt: "Distance tracking"},
            {
              id: "4",              name: "Session Timer",              handle: "Timing",              testimonial: "Monitor session elapsed time and understand pacing throughout your track day experience.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBee0aYCKABGRIekzYlrJnrJe/close-up-of-broadcast-style-telemetry-hu-1772485339512-f9f63f93.png",              imageAlt: "Session timer"},
            {
              id: "5",              name: "Lap Counter",              handle: "Progress",              testimonial: "See your lap progression and improvement metrics as you push harder with each lap.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBee0aYCKABGRIekzYlrJnrJe/close-up-of-broadcast-style-telemetry-hu-1772485339512-f9f63f93.png",              imageAlt: "Lap counter display"},
            {
              id: "6",              name: "Performance Data",              handle: "Analysis",              testimonial: "Comprehensive telemetry data helps you understand where you're making the biggest improvements.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBee0aYCKABGRIekzYlrJnrJe/close-up-of-broadcast-style-telemetry-hu-1772485339512-f9f63f93.png",              imageAlt: "Performance metrics"},
          ]}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={true}
          tagAnimation="blur-reveal"
          speed={50}
          className="py-24"
          containerClassName="space-y-12"
          titleClassName="text-4xl md:text-5xl font-bold tracking-wide uppercase text-center"
          descriptionClassName="text-center text-lg opacity-80 max-w-2xl mx-auto"
          cardClassName="bg-opacity-40 backdrop-blur-sm rounded-lg p-6"
          testimonialClassName="text-sm leading-relaxed italic opacity-80"
          nameClassName="font-bold text-purple-400 text-sm uppercase"
          handleClassName="text-xs opacity-60"
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardNine
          title="POST IN SECONDS."
          description="Optimized for Instagram, TikTok & YouTube. Export directly to your social feeds."
          tag="Export"
          plans={[
            {
              id: "vertical",              title: "Vertical (9:16)",              price: "TikTok &",              period: "Instagram Reels",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBee0aYCKABGRIekzYlrJnrJe/social-media-export-preview-mockup-showi-1772485339450-23fa2962.png",              imageAlt: "Vertical format preview",              button: { text: "Export Format", href: "#" },
              features: ["Optimized dimensions", "Auto-captions", "Trending music sync"],
            },
            {
              id: "horizontal",              title: "Horizontal (16:9)",              price: "YouTube &",              period: "Standard Video",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBee0aYCKABGRIekzYlrJnrJe/social-media-export-preview-mockup-showi-1772485339450-23fa2962.png",              imageAlt: "Horizontal format preview",              button: { text: "Export Format", href: "#" },
              features: ["Full HD quality", "Extended timeline", "Telemetry overlays"],
            },
            {
              id: "compressed",              title: "Compressed Badge",              price: "Quick Share",              period: "Social Stories",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBee0aYCKABGRIekzYlrJnrJe/social-media-export-preview-mockup-showi-1772485339450-23fa2962.png",              imageAlt: "Compressed badge preview",              button: { text: "Export Format", href: "#" },
              features: ["Instant sharing", "Story-optimized", "Highlight clips"],
            },
          ]}
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          tagAnimation="blur-reveal"
          className="py-20"
          containerClassName="space-y-12"
          titleClassName="text-4xl md:text-5xl font-bold tracking-wide uppercase text-center"
          descriptionClassName="text-center text-lg opacity-80 max-w-2xl mx-auto"
          cardClassName="border border-purple-400 border-opacity-30 rounded-lg overflow-hidden"
          planTitleClassName="text-lg font-bold uppercase"
          planPriceClassName="text-purple-400 font-bold"
          featuresListClassName="space-y-2"
          featureItemClassName="text-sm opacity-70 flex items-center gap-2"
          featureIconClassName="w-4 h-4 text-purple-400"
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactText
          text="Turn Every Drive Into a Highlight Reel."
          animationType="reveal-blur"
          background={{ variant: "plain" }}
          useInvertedBackground={true}
          buttons={[
            { text: "Start Free", href: "https://apps.apple.com" },
            { text: "Learn More", href: "#hero" },
          ]}
          className="py-24"
          containerClassName="flex items-center justify-center"
          contentClassName="bg-black bg-opacity-40 backdrop-blur-sm rounded-full px-12 py-16 max-w-2xl mx-auto text-center"
          textClassName="text-4xl md:text-5xl font-bold tracking-wide uppercase mb-8"
          buttonContainerClassName="flex gap-4 justify-center flex-wrap"
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterLogoEmphasis
          logoText="PinIt Cam"
          columns={[
            {
              items: [
                { label: "Hero", href: "#hero" },
                { label: "Capture", href: "#about" },
                { label: "Detection", href: "#feature" },
              ],
            },
            {
              items: [
                { label: "Paddock", href: "#product" },
                { label: "Telemetry", href: "#testimonial" },
                { label: "Export", href: "#pricing" },
              ],
            },
            {
              items: [
                { label: "Privacy Policy", href: "#" },
                { label: "Terms of Service", href: "#" },
                { label: "Contact", href: "#contact" },
              ],
            },
          ]}
          className="py-16"
          containerClassName="max-w-6xl mx-auto"
          logoClassName="text-3xl font-bold tracking-wide uppercase mb-12 text-center text-purple-300"
          columnsClassName="grid grid-cols-3 gap-8 text-center"
          columnClassName="space-y-4"
          itemClassName="text-sm opacity-70 hover:opacity-100 transition-opacity"
          iconClassName="w-4 h-4 inline ml-1"
        />
      </div>
    </ThemeProvider>
  );
}
