"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardThree from '@/components/sections/feature/featureCardThree/FeatureCardThree';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import TextAbout from '@/components/sections/about/TextAbout';
import { Award, Sparkles, Star } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="background-highlight"
        borderRadius="soft"
        contentWidth="mediumLarge"
        sizing="largeSmallSizeMediumTitles"
        background="grid"
        cardStyle="solid"
        primaryButtonStyle="primary-glow"
        secondaryButtonStyle="solid"
        headingFontWeight="normal"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Home",          id: "#home"},
        {
          name: "Leistungen",          id: "#leistungen"},
        {
          name: "Referenzen",          id: "#referenzen"},
        {
          name: "Preise",          id: "#preise"},
        {
          name: "FAQ",          id: "#faq"},
      ]}
      button={{
        text: "Kontakt",        href: "#kontakt"}}
      brandName="Web Services BY"
    />
  </div>

  <div id="home" data-section="home">
      <HeroBillboardRotatedCarousel
      background={{
        variant: "rotated-rays-animated-grid"}}
      title="Professionelle Homepage-Neugestaltung für Ihr lokales Geschäft"
      description="Wir helfen lokalen Unternehmen in Ihrer Nähe, mit modernen, responsiven und suchmaschinenfreundlichen Websites online erfolgreich zu sein."
      buttons={[
        {
          text: "Kostenloses Angebot einholen",          href: "#kontakt"},
        {
          text: "Unsere Leistungen entdecken",          href: "#leistungen"},
      ]}
      carouselItems={[
        {
          id: "1",          imageSrc: "http://img.b2bpic.net/free-photo/yolo-free-happy-fresh-motivation-concept_53876-124281.jpg",          imageAlt: "Modern, responsive website interface"},
        {
          id: "2",          imageSrc: "http://img.b2bpic.net/free-photo/enjoyment-activities-festivities-movies-pastime_53876-21364.jpg",          imageAlt: "Website interface showing an 'About Us' page"},
        {
          id: "3",          imageSrc: "http://img.b2bpic.net/free-psd/gradient-business-solutions-landing-page_23-2150027299.jpg",          imageAlt: "Tablet displaying web design services"},
        {
          id: "4",          imageSrc: "http://img.b2bpic.net/free-photo/nutrition-facts-fresh-vegetable-digital-tablet_53876-46995.jpg",          imageAlt: "Desktop monitor showing a portfolio section"},
        {
          id: "5",          imageSrc: "http://img.b2bpic.net/free-vector/course-application-template_23-2148663602.jpg",          imageAlt: "Smartphone showing a contact form"},
        {
          id: "6",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-binary-script-running-pc-monitors_482257-123753.jpg",          imageAlt: "Hands typing with web design background"},
      ]}
      autoPlay={true}
      autoPlayInterval={4000}
      ariaLabel="Hero section for professional homepage redesign"
    />
  </div>

  <div id="about" data-section="about">
      <TextAbout
      useInvertedBackground={true}
      tag="Über uns"
      title="Ihre digitale Präsenz, unser Fachgebiet"
      buttons={[
        {
          text: "Mehr erfahren",          href: "#"},
      ]}
    />
  </div>

  <div id="leistungen" data-section="leistungen">
      <FeatureCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="two-columns-alternating-heights"
      useInvertedBackground={false}
      features={[
        {
          title: "Responsives Design",          description: "Ihre Website sieht auf jedem Gerät – vom Smartphone bis zum Desktop – perfekt aus und funktioniert einwandfrei.",          imageSrc: "http://img.b2bpic.net/free-photo/male-worker-holding-smartphone-with-horizontal-green-screen-business-office-young-adult-working-with-blank-chroma-key-isolated-template-with-mockup-background-mobile-phone-display_482257-40952.jpg",          imageAlt: "Website adapting to different devices"},
        {
          title: "SEO-Optimierung",          description: "Wir optimieren Ihre Homepage, damit sie von potenziellen Kunden in Suchmaschinen besser gefunden wird.",          imageSrc: "http://img.b2bpic.net/free-photo/high-angle-keys-statistics-arrangement_23-2149386339.jpg",          imageAlt: "Magnifying glass over search bar"},
        {
          title: "Content-Management",          description: "Verwalten Sie Ihre Website-Inhalte einfach und flexibel – auch ohne technische Vorkenntnisse.",          imageSrc: "http://img.b2bpic.net/free-photo/call-center-manager-supervises-agents-logging-clients-interactions-csm-system_482257-117880.jpg",          imageAlt: "CMS dashboard with editing options"},
      ]}
      title="Maßgeschneiderte Web-Lösungen für Ihren Erfolg"
      description="Wir bieten umfassende Services, um Ihre Homepage nicht nur schön, sondern auch funktional und leistungsstark zu gestalten. Von der ersten Idee bis zur finalen Umsetzung sind wir Ihr zuverlässiger Partner."
      tag="Unsere Leistungen"
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={true}
      names={[
        "Süße Ecke Bäckerei",        "Gaumenfreude Restaurant",        "Glanz & Gloria Salon",        "Blütenpracht Floristik",        "Holzwerk Schreinerei",        "Stilvoll Boutique",        "Wasser Meister Sanitär"]}
      title="Vertrauen Sie Experten"
      description="Unsere Expertise hat bereits zahlreichen lokalen Unternehmen geholfen, ihre digitale Präsenz zu transformieren und ihre Geschäftsziele zu erreichen."
      tag="Unsere Partner"
      showCard={true}
    />
  </div>

  <div id="referenzen" data-section="referenzen">
      <TestimonialCardThirteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      testimonials={[
        {
          id: "1",          name: "Sarah Müller",          handle: "@SuesseEcke",          testimonial: "Web Services BY hat unsere alte Bäckerei-Website in ein modernes Meisterwerk verwandelt! Wir bekommen viel mehr Online-Bestellungen und positives Feedback.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/cheerful-man-turning-smiling-while-working-computer_329181-16296.jpg",          imageAlt: "Sarah Müller, owner of Süße Ecke Bakery"},
        {
          id: "2",          name: "Thomas Schmidt",          handle: "@Gaumenfreude",          testimonial: "Die neue Homepage für unser Restaurant ist fantastisch. Die Buchungen sind deutlich gestiegen, und unsere Kunden lieben das elegante Design.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/happy-woman-using-tablet-celebrating-success-outdoor-cafe_1262-18867.jpg",          imageAlt: "Thomas Schmidt, manager of Gaumenfreude Restaurant"},
        {
          id: "3",          name: "Laura Wagner",          handle: "@GlanzGloria",          testimonial: "Unser Salon brauchte dringend einen frischen Online-Auftritt. Web Services BY hat unsere Erwartungen übertroffen – professionell und stylisch!",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/amazing-laughing-redhead-young-lady-standing-cafe_171337-15271.jpg",          imageAlt: "Laura Wagner, owner of Glanz & Gloria Salon"},
        {
          id: "4",          name: "Dirk Meier",          handle: "@Blumenpracht",          testimonial: "Dank Web Services BY haben wir jetzt einen wunderschönen Online-Shop. Wir erreichen viel mehr Kunden und der Bestellprozess ist super einfach.",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/portrait-male-personal-shopper-working_23-2148924139.jpg",          imageAlt: "Dirk Meier, owner of Blütenpracht Floristik"},
        {
          id: "5",          name: "Julia Schneider",          handle: "@StilvollBoutique",          testimonial: "Als kleine Boutique ist eine ansprechende Website entscheidend. Web Services BY hat das perfekt umgesetzt – unsere Verkäufe sind gestiegen!",          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/clothes-bed-fast-fashion-concept-high-angle_23-2149726121.jpg",          imageAlt: "Julia Schneider, owner of Stilvoll Boutique"},
      ]}
      showRating={true}
      title="Was unsere Kunden sagen"
      description="Erfahren Sie aus erster Hand, wie unsere maßgeschneiderten Webdesign-Lösungen lokalen Unternehmen geholfen haben, ihre Online-Ziele zu übertreffen und zu wachsen."
      tag="Kundenstimmen"
    />
  </div>

  <div id="preise" data-section="preise">
      <PricingCardThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      plans={[
        {
          id: "basic",          badge: "Einsteiger",          badgeIcon: Sparkles,
          price: "Ab €999",          name: "Starter Homepage",          buttons: [
            {
              text: "Details ansehen",              href: "#kontakt"},
          ],
          features: [
            "Professionelles Layout",            "1-5 Unterseiten",            "Responsives Design",            "Basis SEO-Optimierung",            "Kontaktformular",            "1 Monat Support"],
        },
        {
          id: "standard",          badge: "Empfohlen",          badgeIcon: Star,
          price: "Ab €2499",          name: "Business Homepage",          buttons: [
            {
              text: "Jetzt anfragen",              href: "#kontakt"},
          ],
          features: [
            "Alle Starter-Funktionen",            "5-10 Unterseiten",            "Erweitertes SEO",            "Content Management System",            "Social Media Integration",            "3 Monate Premium Support"],
        },
        {
          id: "premium",          badge: "Premium",          badgeIcon: Award,
          price: "Ab €4999",          name: "E-Commerce / Maßgeschneidert",          buttons: [
            {
              text: "Angebot erhalten",              href: "#kontakt"},
          ],
          features: [
            "Alle Business-Funktionen",            "Unbegrenzte Seiten",            "Onlineshop-Integration",            "Fortgeschrittene Analysen",            "Individuelle Funktionen",            "6 Monate VIP Support"],
        },
      ]}
      title="Flexible Pakete für jedes Budget"
      description="Wählen Sie das perfekte Paket, das auf die Bedürfnisse und Ziele Ihres lokalen Unternehmens zugeschnitten ist. Wir bieten transparente Preise und maßgeschneiderte Lösungen."
      tag="Unsere Preise"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        {
          id: "1",          title: "Warum brauche ich eine neue Homepage?",          content: "Eine moderne und responsive Homepage ist entscheidend, um Vertrauen bei Kunden aufzubauen, Ihre Online-Sichtbarkeit zu erhöhen und neue Geschäftsmöglichkeiten zu schaffen."},
        {
          id: "2",          title: "Wie lange dauert die Entwicklung?",          content: "Die Dauer hängt vom Umfang des Projekts ab. Eine einfache Homepage kann in wenigen Wochen fertig sein, während komplexere Projekte mit mehr Funktionen länger dauern."},
        {
          id: "3",          title: "Kann ich meine Website selbst aktualisieren?",          content: "Ja, wir integrieren Content Management Systeme (CMS), die es Ihnen ermöglichen, Inhalte einfach selbst zu aktualisieren, ohne Programmierkenntnisse zu benötigen."},
        {
          id: "4",          title: "Bieten Sie auch SEO-Services an?",          content: "Absolut! Jede unserer Homepages wird mit grundlegender SEO-Optimierung erstellt. Für erweiterte Bedürfnisse bieten wir auch umfassende SEO-Strategien an."},
      ]}
      title="Häufig gestellte Fragen"
      description="Hier finden Sie Antworten auf die gängigsten Fragen zu unseren Webdesign-Dienstleistungen und zum Prozess der Homepage-Neugestaltung."
      tag="FAQ"
      faqsAnimation="slide-up"
    />
  </div>

  <div id="kontakt" data-section="kontakt">
      <ContactCTA
      useInvertedBackground={true}
      background={{
        variant: "radial-gradient"}}
      tag="Kontaktieren Sie uns"
      title="Bereit für Ihre neue Homepage?"
      description="Lassen Sie uns gemeinsam Ihre digitale Zukunft gestalten. Holen Sie sich jetzt Ihr unverbindliches Angebot und bringen Sie Ihr lokales Unternehmen online voran."
      buttons={[
        {
          text: "Jetzt anfragen",          href: "#"},
        {
          text: "Kostenloses Angebot erhalten",          href: "#"},
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/medium-shot-colleagues-taking-selfie_23-2149008996.jpg"
      imageAlt="Small business owners collaborating"
      logoText="Web Services BY"
      columns={[
        {
          title: "Navigation",          items: [
            {
              label: "Home",              href: "#home"},
            {
              label: "Leistungen",              href: "#leistungen"},
            {
              label: "Referenzen",              href: "#referenzen"},
            {
              label: "Preise",              href: "#preise"},
            {
              label: "FAQ",              href: "#faq"},
            {
              label: "Kontakt",              href: "#kontakt"},
          ],
        },
        {
          title: "Services",          items: [
            {
              label: "Webdesign",              href: "#"},
            {
              label: "SEO-Optimierung",              href: "#"},
            {
              label: "Content Management",              href: "#"},
            {
              label: "E-Commerce Lösungen",              href: "#"},
          ],
        },
        {
          title: "Rechtliches",          items: [
            {
              label: "Impressum",              href: "#"},
            {
              label: "Datenschutz",              href: "#"},
            {
              label: "AGB",              href: "#"},
          ],
        },
      ]}
      copyrightText="© 2024 Web Services BY. Alle Rechte vorbehalten."
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
