"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import BlogCardTwo from '@/components/sections/blog/BlogCardTwo';
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FeatureCardTwentyThree from '@/components/sections/feature/FeatureCardTwentyThree';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import SplitAbout from '@/components/sections/about/SplitAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="text-stagger"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="medium"
        sizing="largeSmallSizeMediumTitles"
        background="circleGradient"
        cardStyle="glass-depth"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="layered"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        {
          name: "Home",          id: "/"},
        {
          name: "Leistungen",          id: "#leistungen"},
        {
          name: "Projekte",          id: "#projekte"},
        {
          name: "Über uns",          id: "#ueber-uns"},
        {
          name: "Kontakt",          id: "#kontakt"},
      ]}
      brandName="DachWerk Meisterbetrieb"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboardRotatedCarousel
      background={{
        variant: "plain"}}
      title="Moderne Dachlösungen vom Meisterbetrieb"
      description="Von der Reparatur bis zur kompletten Dachsanierung. Fachgerechte Ausführung, persönliche Beratung und langlebige Ergebnisse."
      buttons={[
        {
          text: "Kostenloses Angebot anfordern",          href: "#kontakt"},
        {
          text: "Beratung vereinbaren",          href: "#kontakt"},
      ]}
      buttonAnimation="slide-up"
      carouselItems={[
        {
          id: "hero-carousel-1",          imageSrc: "http://img.b2bpic.net/roofing/hero-worker-modern-roof_1.jpg",          imageAlt: "Dachdecker arbeiten auf dem Dach eines modernen Hauses"},
        {
          id: "hero-carousel-2",          imageSrc: "http://img.b2bpic.net/roofing/hero-new-tiles-closeup_2.jpg",          imageAlt: "Nahaufnahme von neu verlegten Dachziegeln"},
        {
          id: "hero-carousel-3",          imageSrc: "http://img.b2bpic.net/roofing/hero-modern-house-architecture_3.jpg",          imageAlt: "Modernes Wohnhaus mit markanter Dacharchitektur"},
        {
          id: "hero-carousel-4",          imageSrc: "http://img.b2bpic.net/roofing/hero-flat-roof-installation_4.jpg",          imageAlt: "Flachdachinstallation im Gange"},
        {
          id: "hero-carousel-5",          imageSrc: "http://img.b2bpic.net/roofing/hero-roof-window-interior_5.jpg",          imageAlt: "Dachfenster wird mit Blick auf den Innenraum installiert"},
        {
          id: "hero-carousel-6",          imageSrc: "http://img.b2bpic.net/roofing/hero-drone-renovated-roof_6.jpg",          imageAlt: "Drohnenaufnahme eines wunderschön sanierten Daches"},
      ]}
      autoPlay={true}
      autoPlayInterval={4000}
    />
  </div>

  <div id="vertrauen" data-section="vertrauen">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={true}
      names={[
        "Meisterbetrieb",        "Persönliche Beratung",        "Schnelle Terminvergabe",        "Saubere Ausführung",        "Geprüfte Qualität",        "Faire Preise",        "Langjährige Erfahrung"]}
      title="Ihr Vertrauen ist unser Fundament"
      description="Als Meisterbetrieb legen wir Wert auf Transparenz und Qualität in jedem Schritt."
      tag="Unser Versprechen"
      showCard={true}
    />
  </div>

  <div id="leistungen" data-section="leistungen">
      <FeatureCardTwentyThree
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          id: "leistung-1",          title: "Dachsanierung",          tags: [
            "Energieeffizienz",            "Wertsteigerung"],
          imageSrc: "http://img.b2bpic.net/roofing/service-renovation-scaffold_1.jpg",          imageAlt: "Handwerker auf einem Gerüst bei der Dachsanierung"},
        {
          id: "leistung-2",          title: "Dachreparatur",          tags: [
            "Schnell",            "Zuverlässig"],
          imageSrc: "http://img.b2bpic.net/roofing/service-repair-damaged-tiles_2.jpg",          imageAlt: "Dachdecker repariert beschädigte Dachziegel"},
        {
          id: "leistung-3",          title: "Neueindeckung",          tags: [
            "Schutz",            "Ästhetik"],
          imageSrc: "http://img.b2bpic.net/roofing/service-new-dark-tiles_3.jpg",          imageAlt: "Frisch verlegte dunkle Dachziegel"},
        {
          id: "leistung-4",          title: "Flachdach",          tags: [
            "Dicht",            "Langlebig"],
          imageSrc: "http://img.b2bpic.net/roofing/service-flat-roof-waterproofing_4.jpg",          imageAlt: "Detaillierte Aufnahme einer Flachdachabdichtung"},
        {
          id: "leistung-5",          title: "Dachfenster",          tags: [
            "Licht",            "Komfort"],
          imageSrc: "http://img.b2bpic.net/roofing/service-window-installation_5.jpg",          imageAlt: "Einbau eines Dachfensters"},
        {
          id: "leistung-6",          title: "Wartung & Inspektion",          tags: [
            "Werterhalt",            "Sicherheit"],
          imageSrc: "http://img.b2bpic.net/roofing/service-inspection-roofer_6.jpg",          imageAlt: "Dachdecker inspiziert ein Dach mit Ausrüstung"},
      ]}
      title="Unsere Dachleistungen im Überblick"
      description="Fachkompetenz und Präzision für Ihr Dachprojekt – von der Planung bis zur Fertigstellung."
      tag="Unsere Kompetenzen"
    />
  </div>

  <div id="projekte" data-section="projekte">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={true}
      products={[
        {
          id: "projekt-1",          name: "Einfamilienhaus Dachsanierung",          price: "Anfrage",          imageSrc: "http://img.b2bpic.net/roofing/project-single-family-renovated_1.jpg",          imageAlt: "Saniertes Dach eines Einfamilienhauses"},
        {
          id: "projekt-2",          name: "Flachdach Modernisierung",          price: "Anfrage",          imageSrc: "http://img.b2bpic.net/roofing/project-commercial-flat-solar_2.jpg",          imageAlt: "Modernisiertes Flachdach eines Gewerbegebäudes mit Solaranlage"},
        {
          id: "projekt-3",          name: "Neueindeckung Wohnhaus",          price: "Anfrage",          imageSrc: "http://img.b2bpic.net/roofing/project-residential-red-tiles_3.jpg",          imageAlt: "Neu eingedecktes Wohnhaus mit roten Ziegeln"},
        {
          id: "projekt-4",          name: "Dachfenster Einbau",          price: "Anfrage",          imageSrc: "http://img.b2bpic.net/roofing/project-house-multiple-windows_4.jpg",          imageAlt: "Haus mit mehreren neuen Dachfenstern"},
        {
          id: "projekt-5",          name: "Dachreparatur Bürogebäude",          price: "Anfrage",          imageSrc: "http://img.b2bpic.net/roofing/project-office-building-repair_5.jpg",          imageAlt: "Reparatur eines Bürogebäudedachs"},
        {
          id: "projekt-6",          name: "Neueindeckung Garage",          price: "Anfrage",          imageSrc: "http://img.b2bpic.net/roofing/project-garage-new-sleek_6.jpg",          imageAlt: "Neu gedecktes Garagendach"},
      ]}
      title="Unsere erfolgreich abgeschlossenen Projekte"
      description="Ein Einblick in unsere vielseitige Arbeit und Fachkompetenz, die für sich spricht."
      tag="Referenzen"
    />
  </div>

  <div id="warum-website" data-section="warum-website">
      <BlogCardTwo
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      title="Eine moderne Website – Ihr digitales Aushängeschild"
      description="Präsentieren Sie Ihr Handwerk online und schaffen Sie Vertrauen bei potenziellen Kunden."
      tag="Online Präsenz"
      blogs={[
        {
          id: "blog-1",          category: "Digitalisierung",          title: "Die digitale Visitenkarte: Vertrauen aufbauen",          excerpt: "Eine professionelle Website ist der erste Kontaktpunkt und schafft sofort Glaubwürdigkeit.",          imageSrc: "http://img.b2bpic.net/roofing/blog-laptop-website-roof_1.jpg",          imageAlt: "Laptop zeigt Website einer Dachdeckerfirma mit Dachbild",          authorName: "Lena Meier",          authorAvatar: "http://img.b2bpic.net/free-photo/cheerful-woman-looking-away_23-2147774838.jpg",          date: "15. Juni 2024"},
        {
          id: "blog-2",          category: "Marketing",          title: "Kunden gewinnen: Online sichtbar sein",          excerpt: "Erhöhen Sie Ihre Reichweite und erhalten Sie mehr qualifizierte Anfragen durch gezielte Online-Präsenz.",          imageSrc: "http://img.b2bpic.net/roofing/blog-charts-growth-roof_2.jpg",          imageAlt: "Digitale Diagramme über einer Baustelle mit Dach, symbolisiert Wachstum",          authorName: "Max Schmidt",          authorAvatar: "http://img.b2bpic.net/free-photo/portrait-young-female-with-glasses_23-2148415937.jpg",          date: "01. Juli 2024"},
        {
          id: "blog-3",          category: "Service",          title: "Service digital: Von der Anfrage bis zum Kontakt",          excerpt: "Eine moderne Website erleichtert die Kontaktaufnahme und vereinfacht den gesamten Prozess für Ihre Kunden.",          imageSrc: "http://img.b2bpic.net/roofing/blog-tablet-contact-form-roof_3.jpg",          imageAlt: "Tablet zeigt Kontaktformular mit unscharfem Dach-Hintergrund",          authorName: "Anna Fischer",          authorAvatar: "http://img.b2bpic.net/free-photo/woman-portrait-with-bright-blue-lips_23-2151096454.jpg",          date: "10. Juli 2024"},
      ]}
    />
  </div>

  <div id="ueber-uns" data-section="ueber-uns">
      <SplitAbout
      textboxLayout="default"
      useInvertedBackground={true}
      imagePosition="right"
      title="Handwerk mit Verantwortung"
      description="Wir stehen für Qualität, Zuverlässigkeit und ehrliche Beratung. Unser Anspruch ist es, langlebige Lösungen zu schaffen und Kunden während des gesamten Projekts professionell zu begleiten."
      tag="Über uns"
      bulletPoints={[
        {
          title: "Qualität & Präzision",          description: "Fachgerechte Ausführung nach höchsten Standards."},
        {
          title: "Zuverlässigkeit & Termintreue",          description: "Projekte pünktlich und im Budget abschließen."},
        {
          title: "Transparenz & Fairness",          description: "Klare Kommunikation und ehrliche Angebote."},
      ]}
      imageSrc="http://img.b2bpic.net/roofing/about-team-blueprints_1.jpg"
      imageAlt="Team von Dachdeckern bespricht Baupläne auf einer Baustelle"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="kontakt" data-section="kontakt">
      <ContactCTA
      useInvertedBackground={false}
      background={{
        variant: "plain"}}
      tag="Kontaktieren Sie uns"
      title="Planen Sie ein Dachprojekt?"
      description="Vereinfachen Sie Ihre Planung. Vereinbaren Sie jetzt ein unverbindliches Beratungsgespräch. Wir freuen uns auf Ihre Anfrage über unser Kontaktformular (Name, Telefon, E-Mail, Nachricht)."
      buttons={[
        {
          text: "Anfrage senden"},
      ]}
      buttonAnimation="slide-up"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        {
          title: "Leistungen",          items: [
            {
              label: "Dachsanierung",              href: "#leistungen"},
            {
              label: "Dachreparatur",              href: "#leistungen"},
            {
              label: "Neueindeckung",              href: "#leistungen"},
            {
              label: "Flachdach",              href: "#leistungen"},
            {
              label: "Dachfenster",              href: "#leistungen"},
            {
              label: "Wartung",              href: "#leistungen"},
          ],
        },
        {
          title: "Unternehmen",          items: [
            {
              label: "Referenzen",              href: "#projekte"},
            {
              label: "Über uns",              href: "#ueber-uns"},
            {
              label: "Kontakt",              href: "#kontakt"},
          ],
        },
        {
          title: "Rechtliches",          items: [
            {
              label: "Impressum",              href: "#"},
            {
              label: "Datenschutz",              href: "#"},
          ],
        },
      ]}
      logoText="DachWerk Meisterbetrieb"
      copyrightText="© 2024 DachWerk Meisterbetrieb | Website Design by Leonard Mennen"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
