"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import HeroSplitTestimonial from '@/components/sections/hero/HeroSplitTestimonial';
import FeatureCardTwentyEight from '@/components/sections/feature/FeatureCardTwentyEight';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import MediaAbout from '@/components/sections/about/MediaAbout';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FooterMedia from '@/components/sections/footer/FooterMedia';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="text-shift"
      defaultTextAnimation="background-highlight"
      borderRadius="pill"
      contentWidth="mediumSmall"
      sizing="largeSmallSizeMediumTitles"
      background="blurBottom"
      cardStyle="subtle-shadow"
      primaryButtonStyle="flat"
      secondaryButtonStyle="layered"
      headingFontWeight="light"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          brandName="DachWerk Meisterbetrieb"
          navItems={[
            { name: "Home", id: "#hero" },
            { name: "Leistungen", id: "#services" },
            { name: "Projekte", id: "#projects" },
            { name: "Über uns", id: "#about" },
            { name: "Kontakt", id: "#contact" }
          ]}
          button={{
            text: "Kostenloses Angebot",            href: "#contact"
          }}
          animateOnLoad={true}
        />
      </div>
      <div id="hero" data-section="hero">
        <HeroSplitTestimonial
          title="Dachsanierung & Dachreparatur vom Meisterbetrieb"
          description="Fachgerechte Dacharbeiten, persönliche Beratung und langlebige Lösungen für Privatkunden, Unternehmen und Hausverwaltungen."
          background={{
            variant: "plain"
          }}
          testimonials={[]}
          useInvertedBackground={false}
          buttons={[
            { text: "Kostenloses Angebot anfordern", href: "#contact" },
            { text: "Beratung vereinbaren", href: "#contact" }
          ]}
          imageSrc="https://assets.website-files.com/657448880628e0811a21a50b/65759ffbe216259048a946b5_Group%2018894.png"
          imageAlt="Professionelle Dachsanierung"
          mediaAnimation="opacity"
          imagePosition="right"
          fixedMediaHeight={true}
        />
      </div>
      <div id="trust" data-section="trust">
        <FeatureCardTwentyEight
          title="Ihr Vertrauen ist unser Fundament"
          description="Entdecken Sie, warum DachWerk Meisterbetrieb die richtige Wahl für Ihr Projekt ist – Qualität, die überzeugt."
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          features={[
            { id: "trust-1", title: "Meisterbetrieb", subtitle: "Qualität, die überzeugt.", category: "Handwerk", value: "Tradition & Innovation" },
            { id: "trust-2", title: "Persönliche Beratung", subtitle: "Individuelle Lösungen für Ihr Dach.", category: "Service", value: "Kompetent & Transparent" },
            { id: "trust-3", title: "Saubere Ausführung", subtitle: "Ordnung und Präzision.", category: "Qualität", value: "Effizient & Zuverlässig" },
            { id: "trust-4", title: "Transparente Angebote", subtitle: "Keine versteckten Kosten.", category: "Klarheit", value: "Fair & Nachvollziehbar" },
            { id: "trust-5", title: "Schnelle Terminvergabe", subtitle: "Wir sind zeitnah für Sie da.", category: "Effizienz", value: "Flexibel & Pünktlich" },
            { id: "trust-6", title: "Zuverlässige Projektabwicklung", subtitle: "Ihr Projekt in besten Händen.", category: "Engagement", value: "Strukturiert & Sorgfältig" }
          ]}
        />
      </div>
      <div id="services" data-section="services">
        <FeatureCardTwentyEight
          title="Unsere Dachleistungen im Überblick"
          description="Wir bieten ein umfassendes Spektrum an Dacharbeiten, von der Sanierung bis zur Wartung – alles aus einer Hand."
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={false}
          features={[
            { id: "service-1", title: "Dachsanierung", subtitle: "Alte Dächer modernisieren und langfristig schützen.", category: "Modernisierung", value: "Langlebige Lösungen" },
            { id: "service-2", title: "Dachreparatur", subtitle: "Schnelle Hilfe bei Schäden und Undichtigkeiten.", category: "Instandsetzung", value: "Sofortige Maßnahmen" },
            { id: "service-3", title: "Neueindeckung", subtitle: "Professionelle Neueindeckung mit hochwertigen Materialien.", category: "Erneuerung", value: "Premium Qualität" },
            { id: "service-4", title: "Flachdach", subtitle: "Abdichtung, Sanierung und Wartung von Flachdächern.", category: "Spezialist", value: "Expertenlösungen" },
            { id: "service-5", title: "Dachfenster", subtitle: "Mehr Licht und Wohnqualität durch moderne Dachfenster.", category: "Komfort", value: "Heller Wohnraum" },
            { id: "service-6", title: "Wartung", subtitle: "Regelmäßige Kontrolle zur Vermeidung teurer Folgeschäden.", category: "Prävention", value: "Werterhalt & Sicherheit" }
          ]}
        />
      </div>
      <div id="projects" data-section="projects">
        <ProductCardFour
          title="Beispielhafte Dachprojekte"
          description="Ein Überblick typischer Dachprojekte und Leistungen."
          gridVariant="three-columns-all-equal-width"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          products={[
            { id: "project-1", name: "Einfamilienhaus Dachsanierung", price: "", variant: "Klassisch & Modern", imageSrc: "https://assets.website-files.com/657448880628e0811a21a50b/6575a0041490219ff0891ae5_Group%2018898.png", imageAlt: "Dachsanierung Einfamilienhaus" },
            { id: "project-2", name: "Flachdach Modernisierung", price: "", variant: "Effizient & Dauerhaft", imageSrc: "https://assets.website-files.com/657448880628e0811a21a50b/65759ff10d6e24694cf67417_Group%2018897.png", imageAlt: "Flachdach Modernisierung" },
            { id: "project-3", name: "Neueindeckung Wohnhaus", price: "", variant: "Hochwertig & Ästhetisch", imageSrc: "https://assets.website-files.com/657448880628e0811a21a50b/65759fe8949866164284b39b_Group%2018896.png", imageAlt: "Neueindeckung Wohnhaus" },
            { id: "project-4", name: "Dachfenster Einbau", price: "", variant: "Licht & Komfort", imageSrc: "https://assets.website-files.com/657448880628e0811a21a50b/65759fdd25a953e16429d201_Group%2018895.png", imageAlt: "Dachfenster Einbau" },
            { id: "project-5", name: "Terrassenüberdachung", price: "", variant: "Schutz & Design", imageSrc: "https://assets.website-files.com/657448880628e0811a21a50b/65759fce8f45812e96030c7e_Group%2018893.png", imageAlt: "Terrassenüberdachung aus Holz" },
            { id: "project-6", name: "Fassadenverkleidung", price: "", variant: "Ästhetik & Dämmung", imageSrc: "https://assets.website-files.com/657448880628e0811a21a50b/65759f2be1d911b30521e1fe_Group%2018889.png", imageAlt: "Moderne Fassadenverkleidung" }
          ]}
        />
      </div>
      <div id="about" data-section="about">
        <MediaAbout
          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.\n\nUnsere Kernwerte: \nFachgerechte Ausführung | Zuverlässigkeit & Termintreue | Transparenz & Fairness."
          useInvertedBackground={false}
          imageSrc="https://assets.website-files.com/657448880628e0811a21a50b/6575a00bd73c683b7f16806e_Group%2018899.png"
          imageAlt="Dachdeckerteam berät Kunden zu einer Dachsanierung"
        />
      </div>
      <div id="contact" data-section="contact">
        <ContactSplitForm
          title="Lassen Sie Ihr Dach unverbindlich prüfen"
          description="Beschreiben Sie kurz Ihr Anliegen. Wir melden uns zeitnah für eine persönliche Beratung."
          inputs={[
            { name: "name", type: "text", placeholder: "Ihr Name", required: true },
            { name: "phone", type: "tel", placeholder: "Telefonnummer", required: false },
            { name: "email", type: "email", placeholder: "Ihre E-Mail-Adresse", required: true }
          ]}
          textarea={{
            name: "message",            placeholder: "Ihre Nachricht",            rows: 4,
            required: true
          }}
          useInvertedBackground={true}
          imageSrc="https://images.unsplash.com/photo-1574768340150-137a1f81d182?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1080&q=80"
          imageAlt="Hochwertige Dachmaterialien im Detail"
          mediaAnimation="opacity"
          mediaPosition="right"
          buttonText="Beratung anfragen"
        />
      </div>
      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="https://images.unsplash.com/photo-1578330058914-f513d6a2a628?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1080&q=80"
          imageAlt="Panoramablick auf ein frisch gedecktes Dach bei Sonnenuntergang"
          logoText="DachWerk Meisterbetrieb"
          columns={[
            { title: "Leistungen", items: [
              { label: "Dachsanierung", href: "#services" },
              { label: "Dachreparatur", href: "#services" },
              { label: "Neueindeckung", href: "#services" },
              { label: "Flachdach", href: "#services" },
              { label: "Dachfenster", href: "#services" },
              { label: "Wartung", href: "#services" }
            ]},
            { title: "Unternehmen", items: [
              { label: "Projekte", href: "#projects" },
              { label: "Über uns", href: "#about" },
              { label: "Kontakt", href: "#contact" }
            ]},
            { title: "Rechtliches", items: [
              { label: "Impressum", href: "#" },
              { label: "Datenschutz", href: "#" }
            ]}
          ]}
          copyrightText="© 2025 DachWerk Meisterbetrieb. Website Design by Leonard Mennen."
        />
      </div>
    </ThemeProvider>
  );
}
