"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import PricingCardTwo from '@/components/sections/pricing/PricingCardTwo';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="shift-hover"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="mediumSmall"
        sizing="mediumSizeLargeTitles"
        background="aurora"
        cardStyle="gradient-radial"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="solid"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        { name: "Home", id: "hero" },
        { name: "Services", id: "features" },
        { name: "Work", id: "products" },
        { name: "Contact", id: "/contact" },
      ]}
      brandName="Digital Plus"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroSplitKpi
      background={{ variant: "plain" }}
      title="Digitale Exzellenz aus Dietikon."
      description="Wir transformieren Ihre Vision in zukunftsweisende digitale Lösungen. Digital Plus GmbH steht für Innovation, Geschwindigkeit und messbare Ergebnisse."
      kpis={[
        { value: "120+", label: "Projekte geliefert" },
        { value: "95%", label: "Kundenzufriedenheit" },
        { value: "10y", label: "Erfahrung im Markt" },
      ]}
      enableKpiAnimation={true}
      imageSrc="http://img.b2bpic.net/free-photo/empty-office-with-analytics-diagrams-screen-running-economy-statistics-computers-business-space-startup-company-with-research-plans-charts-late-night-handheld-shot_482257-65066.jpg"
      imageAlt="Digitale Agentur Dashboard"
      mediaAnimation="slide-up"
      avatarText="Unser Expertenteam für Ihre digitalen Ziele"
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={false}
      title="Ihr Partner für die digitale Zukunft"
      description="Unser Team aus erfahrenen Strategen und Entwicklern in Dietikon arbeitet leidenschaftlich daran, Ihren Unternehmenserfolg durch innovative Software und Design zu skalieren."
      metrics={[
        { value: "24/7", title: "Support" },
        { value: "Zero", title: "Fehlerrate" },
        { value: "100%", title: "Fokus auf Sie" },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/african-man-guy-black-suit-students-with-laptop-girl-white-blouse_1157-41602.jpg"
      imageAlt="Digital Agentur Team"
      mediaAnimation="slide-up"
      metricsAnimation="slide-up"
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardEight
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        { title: "Webentwicklung", description: "High-Performance Webanwendungen für jedes Bedürfnis.", imageSrc: "http://img.b2bpic.net/free-photo/woman-uses-ai-chatbot-system-computer-guide-her-through-tasks_482257-118915.jpg", imageAlt: "Web" },
        { title: "UX/UI Design", description: "Erlebnisse, die Ihre Kunden begeistern.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-hand-holding-futuristic-screen_23-2149126945.jpg", imageAlt: "UI" },
        { title: "KI Beratung", description: "Automatisierung mit den modernsten Technologien.", imageSrc: "http://img.b2bpic.net/free-photo/3d-rendering-customizing-avatar-concept_23-2150729044.jpg", imageAlt: "KI" },
      ]}
      title="Unsere Kernleistungen"
      description="Von Webentwicklung bis hin zu KI-gestützten Automatisierungslösungen – wir setzen Maßstäbe."
    />
  </div>

  <div id="products" data-section="products">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      products={[
        { id: "1", name: "E-Commerce App", price: "ab 15k CHF", variant: "Web", imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169842.jpg" },
        { id: "2", name: "CRM System", price: "ab 25k CHF", variant: "Saas", imageSrc: "http://img.b2bpic.net/free-photo/close-up-accounting-sales-statistics-computer-display_482257-122982.jpg" },
        { id: "3", name: "Cloud Dashboard", price: "ab 12k CHF", variant: "Cloud", imageSrc: "http://img.b2bpic.net/free-photo/woman-sitting-house-with-automation-light-system-holding-smartphone_482257-7531.jpg" },
      ]}
      title="Unsere Referenzprojekte"
      description="Ein Einblick in unsere jüngsten Erfolgsgeschichten."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardTwo
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      plans={[
        { id: "basic", badge: "Basis", price: "ab 2.500 CHF", subtitle: "Der schnelle Einstieg", buttons: [{ text: "Jetzt anfragen", href: "/contact" }], features: ["Design Konzept", "Responsive UI", "Support"] },
        { id: "pro", badge: "Pro", price: "ab 7.500 CHF", subtitle: "Für wachsende Unternehmen", buttons: [{ text: "Jetzt anfragen", href: "/contact" }], features: ["Alle Basis-Features", "Backend API", "Cloud Hosting"] },
        { id: "enterprise", badge: "Scale", price: "nach Mass", subtitle: "Individuelle Lösungen", buttons: [{ text: "Jetzt anfragen", href: "/contact" }], features: ["Alles aus Pro", "KI-Integration", "Dedizierter Support"] },
      ]}
      title="Transparente Konditionen"
      description="Wählen Sie das Modell, das am besten zu Ihrem aktuellen Bedarf passt."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="asymmetric-60-wide-40-narrow"
      useInvertedBackground={false}
      testimonials={[
        { id: "1", name: "Thomas Meier", role: "Geschäftsführer", company: "TechVision AG", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/happy-business-woman-white-shirt_23-2148095748.jpg" },
        { id: "2", name: "Sarah Müller", role: "Inhaberin", company: "Local Boutique", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/technician-making-sure-high-tech-facility-data-center-is-appropriately-equipped_482257-94430.jpg" },
      ]}
      title="Was Kunden über uns sagen"
      description="Zufriedene Partner aus Dietikon und der gesamten Schweiz."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        { id: "1", title: "Wo ist Digital Plus GmbH ansässig?", content: "Unser Studio befindet sich mitten in Dietikon, zentral in der Region Zürich." },
        { id: "2", title: "Bieten Sie auch Wartung an?", content: "Ja, wir bieten umfassende Support- und Wartungspakete für alle unsere Projekte an." },
      ]}
      title="Häufige Fragen"
      description="Hier finden Sie Antworten auf die wichtigsten Fragen zur Zusammenarbeit."
      faqsAnimation="blur-reveal"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        { title: "Agentur", items: [{ label: "Über uns", href: "#about" }, { label: "Karriere", href: "#" }] },
        { title: "Leistungen", items: [{ label: "Webdesign", href: "#features" }, { label: "Software", href: "#features" }] },
      ]}
      logoText="Digital Plus GmbH"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}