"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import PricingCardFive from '@/components/sections/pricing/PricingCardFive';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardSixteen from '@/components/sections/testimonial/TestimonialCardSixteen';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import { Sparkles } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="background-highlight"
        borderRadius="rounded"
        contentWidth="mediumLarge"
        sizing="largeSmallSizeMediumTitles"
        background="circleGradient"
        cardStyle="glass-depth"
        primaryButtonStyle="flat"
        secondaryButtonStyle="layered"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Home",
          id: "#home",
        },
        {
          name: "Über uns",
          id: "#about",
        },
        {
          name: "Dienstleistungen",
          id: "#features",
        },
        {
          name: "Portfolio",
          id: "#portfolio",
        },
        {
          name: "Preise",
          id: "#pricing",
        },
        {
          name: "Kundenstimmen",
          id: "#testimonials",
        },
        {
          name: "FAQ",
          id: "#faq",
        },
        {
          name: "Kontakt",
          id: "#contact",
        },
      ]}
      brandName="Dinsu"
    />
  </div>

  <div id="home" data-section="home">
      <HeroBillboard
      background={{
        variant: "animated-grid",
      }}
      title="Digitale Exzellenz für Ihr Business"
      description="Wir bauen maßgeschneiderte Websites, die Ihre Vision zum Leben erwecken und Ihre Kunden begeistern – von der Konzeption bis zum Launch."
      buttons={[
        {
          text: "Unsere Leistungen",
          href: "#features",
        },
        {
          text: "Projekt starten",
          href: "#contact",
        },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/technology-venture-workspace-using-machine-learning-streamline-coding-process_482257-120287.jpg"
      imageAlt="Modernes Webentwicklung-Studio mit Code und Mockups auf Bildschirmen"
      mediaAnimation="slide-up"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/portrait-beauty-businesswoman-leaning-against-brick-wall_613910-773.jpg",
          alt: "Profilbild eines Geschäftsprofis",
        },
        {
          src: "http://img.b2bpic.net/free-photo/businessmen-with-tablets-looking-camera_23-2148308502.jpg",
          alt: "Profilbild eines Geschäftsprofis",
        },
        {
          src: "http://img.b2bpic.net/free-photo/they-re-best-business-team_329181-15197.jpg",
          alt: "Profilbild eines Geschäftsprofis",
        },
        {
          src: "http://img.b2bpic.net/free-photo/smiling-executive-foreground_1098-2154.jpg",
          alt: "Profilbild eines Geschäftsprofis",
        },
        {
          src: "http://img.b2bpic.net/free-photo/group-cheerful-businesspeople-with-leader-front_1098-3500.jpg",
          alt: "Profilbild eines Geschäftsprofis",
        },
      ]}
      avatarText="Mehr als 100+ zufriedene Kunden"
      marqueeItems={[
        {
          type: "image",
          src: "asset://hero-marquee-1",
          alt: "Firmenlogo A",
        },
        {
          type: "image",
          src: "http://img.b2bpic.net/free-vector/modern-monogram-logos_23-2147662552.jpg",
          alt: "Firmenlogo B",
        },
        {
          type: "image",
          src: "asset://hero-marquee-3",
          alt: "Firmenlogo C",
        },
        {
          type: "image",
          src: "asset://hero-marquee-4",
          alt: "Firmenlogo D",
        },
        {
          type: "image",
          src: "http://img.b2bpic.net/free-vector/flat-design-e-logo-set_23-2148880940.jpg",
          alt: "Firmenlogo E",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <TextSplitAbout
      useInvertedBackground={true}
      title="Über Dinsu: Ihr Partner für digitale Visionen"
      description={[
        "Dinsu ist Ihre innovative Webentwicklungsagentur, die sich darauf spezialisiert hat, einzigartige und leistungsstarke Online-Erlebnisse zu schaffen. Mit einer tiefen Leidenschaft für Design und modernste Technologien verwandeln wir Ihre Ideen in beeindruckende digitale Realitäten.",
        "Unser Team aus erfahrenen Entwicklern und Designern arbeitet eng mit Ihnen zusammen, um maßgeschneiderte Lösungen zu liefern, die nicht nur ästhetisch ansprechend, sondern auch funktional überlegen und zukunftssicher sind. Vertrauen Sie auf Dinsu, um Ihre Marke online zum Strahlen zu bringen.",
      ]}
      buttons={[
        {
          text: "Mehr erfahren",
          href: "#features",
        },
      ]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardMedia
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          id: "f1",
          title: "Maßgeschneiderte Webseiten",
          description: "Individuelle Entwicklung, die exakt auf Ihre Geschäftsziele zugeschnitten ist. Keine Standardlösungen, sondern einzigartige Designs und Funktionen.",
          tag: "Individualität",
          imageSrc: "http://img.b2bpic.net/free-photo/cyber-defense-team-working-governmental-security-operations-center_482257-112746.jpg",
          imageAlt: "Abstrakte Darstellung von Custom Web Development",
        },
        {
          id: "f2",
          title: "Responsives Design",
          description: "Ihre Website sieht auf jedem Gerät – Desktop, Tablet oder Smartphone – perfekt aus und funktioniert einwandfrei. Optimale Benutzererfahrung garantiert.",
          tag: "Benutzerfreundlichkeit",
          imageSrc: "http://img.b2bpic.net/free-photo/business-people-working-with-ai-operated-devices_23-2151922460.jpg",
          imageAlt: "Dynamische Darstellung von Responsive Webdesign auf verschiedenen Geräten",
        },
        {
          id: "f3",
          title: "Suchmaschinenoptimierung (SEO)",
          description: "Wir integrieren SEO-Best Practices, damit Ihre Website von potenziellen Kunden leicht gefunden wird. Erhöhen Sie Ihre Sichtbarkeit in Suchmaschinen.",
          tag: "Sichtbarkeit",
          imageSrc: "http://img.b2bpic.net/free-photo/man-is-working-computer-with-graph-screen_23-2151929046.jpg",
          imageAlt: "Visualisierung der Suchmaschinenoptimierung mit steigenden Rankings",
        },
      ]}
      title="Unsere Kernkompetenzen in der Webentwicklung"
      description="Wir bieten eine umfassende Palette an Webentwicklungsdiensten, um Ihren digitalen Erfolg zu sichern und Ihre Online-Präsenz zu maximieren."
    />
  </div>

  <div id="portfolio" data-section="portfolio">
      <ProductCardFour
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="bento-grid"
      useInvertedBackground={true}
      products={[
        {
          id: "p1",
          name: "E-Commerce-Plattform",
          price: "Ab 3.500€",
          variant: "Online-Shop",
          imageSrc: "http://img.b2bpic.net/free-photo/still-life-fashion-designer-s-office_23-2150543698.jpg",
          imageAlt: "E-Commerce-Website-Design auf einem Laptop",
        },
        {
          id: "p2",
          name: "Corporate Website",
          price: "Ab 2.800€",
          variant: "Unternehmensauftritt",
          imageSrc: "http://img.b2bpic.net/free-photo/date-night-ideas-valantine-romance-heart-love-passion-concept_53876-133732.jpg",
          imageAlt: "Professionelles Corporate Website Design",
        },
        {
          id: "p3",
          name: "Kreatives Portfolio",
          price: "Ab 2.000€",
          variant: "Designer-Showcase",
          imageSrc: "http://img.b2bpic.net/free-photo/low-angle-woman-posing-outdoors_23-2149988417.jpg",
          imageAlt: "Kreatives Portfolio-Website-Design auf einem Arbeitsplatz",
        },
        {
          id: "p4",
          name: "Content Blog",
          price: "Ab 2.200€",
          variant: "Redaktionelle Plattform",
          imageSrc: "http://img.b2bpic.net/free-photo/side-view-hands-holding-paper_23-2149930960.jpg",
          imageAlt: "Modernes Blog-Website-Design mit Artikeln",
        },
        {
          id: "p5",
          name: "Landing Page",
          price: "Ab 1.500€",
          variant: "Marketing-Kampagne",
          imageSrc: "http://img.b2bpic.net/free-photo/office-worker-pointing-laptop-screen_482257-120643.jpg",
          imageAlt: "High-Converting Landing Page Design",
        },
        {
          id: "p6",
          name: "SaaS-Dashboard",
          price: "Auf Anfrage",
          variant: "Software-Service",
          imageSrc: "http://img.b2bpic.net/free-photo/download-cloud-storage-back-up_53876-120159.jpg",
          imageAlt: "SaaS-Plattform-Interface mit Dashboard",
        },
      ]}
      title="Unsere Projekte sprechen für sich"
      description="Entdecken Sie eine Auswahl unserer erfolgreich umgesetzten Projekte für zufriedene Kunden aus verschiedenen Branchen."
    />
  </div>

  <div id="pricing" data-section="pricing">
      <PricingCardFive
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      plans={[
        {
          id: "basic",
          tag: "Start",
          tagIcon: Sparkles,
          price: "2.000€",
          period: "Einmalig",
          description: "Ideal für kleine Unternehmen und Start-ups, die eine professionelle Präsenz benötigen.",
          button: {
            text: "Jetzt starten",
            href: "#contact",
          },
          featuresTitle: "Inklusive:",
          features: [
            "Responsive Design",
            "Grundlegende SEO-Optimierung",
            "Kontaktformular",
            "1 Jahr Support",
          ],
        },
        {
          id: "pro",
          tag: "Wachstum",
          tagIcon: Sparkles,
          price: "4.500€",
          period: "Einmalig",
          description: "Perfekt für wachsende Unternehmen mit spezifischen Funktionen und Integrationsbedürfnissen.",
          button: {
            text: "Wachstum sichern",
            href: "#contact",
          },
          featuresTitle: "Inklusive:",
          features: [
            "Alle Funktionen von Start",
            "Individuelles UI/UX-Design",
            "E-Commerce-Integration (optional)",
            "Erweiterte SEO-Strategie",
            "2 Jahre Support & Wartung",
          ],
        },
        {
          id: "enterprise",
          tag: "Premium",
          tagIcon: Sparkles,
          price: "Auf Anfrage",
          period: "Projektbasiert",
          description: "Die Komplettlösung für anspruchsvolle Projekte und große Unternehmen mit komplexen Anforderungen.",
          button: {
            text: "Angebot anfordern",
            href: "#contact",
          },
          featuresTitle: "Inklusive:",
          features: [
            "Alle Funktionen von Wachstum",
            "Umfassende Backend-Entwicklung",
            "CRM/ERP-Integration",
            "Dedizierter Projektmanager",
            "Priorisierter 24/7 Support",
          ],
        },
      ]}
      title="Transparente Preise, starke Ergebnisse"
      description="Wählen Sie das Paket, das am besten zu Ihren Anforderungen passt. Individuelle Angebote sind auf Anfrage erhältlich."
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={true}
      names={[
        "Global Solutions",
        "Tech Innovators",
        "Creative Studios",
        "Future Enterprises",
        "Digital Dynamics",
        "Visionary Brands",
        "Market Movers",
        "Synergy Corp",
        "Nexus Group",
      ]}
      title="Unsere geschätzten Partner"
      description="Wir haben erfolgreich mit Unternehmen jeder Größe zusammengearbeitet und ihnen geholfen, ihre Online-Ziele zu erreichen."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardSixteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "t1",
          name: "Lena Müller",
          role: "CEO",
          company: "TechFusion GmbH",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/confident-senior-businessman-with-digital-tablet_1262-2373.jpg",
          imageAlt: "Porträt von Lena Müller",
        },
        {
          id: "t2",
          name: "Markus Schmidt",
          role: "CTO",
          company: "Innovate Solutions",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/middle-aged-entrepreneur-reading-global-news-online-his-tablet-pc_1098-19021.jpg",
          imageAlt: "Porträt von Markus Schmidt",
        },
        {
          id: "t3",
          name: "Anna Meier",
          role: "Marketing Director",
          company: "Creative Boost",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-labor-union-member_23-2150969909.jpg",
          imageAlt: "Porträt von Anna Meier",
        },
        {
          id: "t4",
          name: "Thomas Keller",
          role: "Gründer",
          company: "Startup XYZ",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-painting-watercolors_23-2150170387.jpg",
          imageAlt: "Porträt von Thomas Keller",
        },
        {
          id: "t5",
          name: "Julia Schneider",
          role: "Operations Manager",
          company: "Effizienz Consulting",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/smiley-businesswoman-conference-room_23-2148911825.jpg",
          imageAlt: "Porträt von Julia Schneider",
        },
      ]}
      kpiItems={[
        {
          value: "+200%",
          label: "Traffic Steigerung",
        },
        {
          value: "99%",
          label: "Kundenzufriedenheit",
        },
        {
          value: "3x",
          label: "Konversionsrate",
        },
      ]}
      title="Was unsere Kunden sagen"
      description="Ihre Zufriedenheit ist unser größter Erfolg. Lesen Sie, wie wir anderen Unternehmen geholfen haben, ihre digitalen Ziele zu erreichen."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={true}
      faqs={[
        {
          id: "q1",
          title: "Wie lange dauert die Entwicklung einer Website?",
          content: "Die Dauer hängt stark vom Umfang und der Komplexität Ihres Projekts ab. Eine einfache Landing Page kann in wenigen Wochen fertig sein, während ein komplexer Online-Shop mehrere Monate in Anspruch nehmen kann. Nach einem Erstgespräch erstellen wir einen detaillierten Zeitplan für Sie.",
        },
        {
          id: "q2",
          title: "Welche Kosten fallen für eine Website an?",
          content: "Die Kosten variieren je nach den gewünschten Funktionen, dem Designaufwand und dem Projektumfang. Wir bieten transparente Preismodelle und erstellen Ihnen gerne ein individuelles Angebot nach Analyse Ihrer Anforderungen. Unser Ziel ist es, die beste Lösung für Ihr Budget zu finden.",
        },
        {
          id: "q3",
          title: "Bieten Sie auch Wartung und Support an?",
          content: "Ja, wir lassen Sie nach dem Launch nicht allein. Wir bieten umfassende Wartungs- und Supportpakete an, die regelmäßige Updates, Sicherheitschecks und technischen Support umfassen, um sicherzustellen, dass Ihre Website stets reibungslos funktioniert und aktuell bleibt.",
        },
        {
          id: "q4",
          title: "Kann ich meine Website nach Fertigstellung selbst bearbeiten?",
          content: "Absolut! Wir entwickeln unsere Websites in der Regel mit benutzerfreundlichen Content-Management-Systemen (CMS), die es Ihnen ermöglichen, Inhalte, Bilder und Texte eigenständig zu aktualisieren. Auf Wunsch bieten wir auch Schulungen an, damit Sie sich sicher im System bewegen können.",
        },
      ]}
      title="Häufig gestellte Fragen"
      description="Hier finden Sie Antworten auf die gängigsten Fragen zu unseren Dienstleistungen und Prozessen."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Bereit für Ihr nächstes Projekt?"
      description="Kontaktieren Sie uns noch heute für ein unverbindliches Beratungsgespräch. Wir freuen uns darauf, von Ihnen zu hören und Ihre digitale Vision zu realisieren!"
      inputs={[
        {
          name: "name",
          type: "text",
          placeholder: "Ihr Name",
          required: true,
        },
        {
          name: "email",
          type: "email",
          placeholder: "Ihre E-Mail-Adresse",
          required: true,
        },
      ]}
      textarea={{
        name: "message",
        placeholder: "Ihre Nachricht",
        rows: 5,
        required: true,
      }}
      imageSrc="http://img.b2bpic.net/free-photo/partnership-agreement-cooperation-collaboartion-concept_53876-124244.jpg"
      imageAlt="Zwei Personen arbeiten an Website-Wireframes zusammen"
      mediaAnimation="opacity"
      mediaPosition="right"
      buttonText="Nachricht senden"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterSimple
      columns={[
        {
          title: "Dienste",
          items: [
            {
              label: "Webdesign",
              href: "#features",
            },
            {
              label: "Webentwicklung",
              href: "#features",
            },
            {
              label: "SEO",
              href: "#features",
            },
            {
              label: "E-Commerce",
              href: "#portfolio",
            },
          ],
        },
        {
          title: "Unternehmen",
          items: [
            {
              label: "Über uns",
              href: "#about",
            },
            {
              label: "Portfolio",
              href: "#portfolio",
            },
            {
              label: "Preise",
              href: "#pricing",
            },
            {
              label: "Kontakt",
              href: "#contact",
            },
          ],
        },
        {
          title: "Rechtliches",
          items: [
            {
              label: "Datenschutz",
              href: "#",
            },
            {
              label: "Impressum",
              href: "#",
            },
            {
              label: "AGB",
              href: "#",
            },
          ],
        },
      ]}
      bottomLeftText="© 2024 Dinsu. Alle Rechte vorbehalten."
      bottomRightText="Made with passion."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
