"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="http://img.b2bpic.net/free-photo/3d-elegant-geometrical-textures-backgrounds_23-2149073296.jpg"
          imageAlt="Hochwertiges Dachdeckerbild, Dachsanierung"
          mediaAnimation="opacity"
          imagePosition="right"
          fixedMediaHeight={true}
        />
      </div>
      <div id="trust" data-section="trust">
        <FeatureCardTwentyEight
          title="Ihr Vertrauen ist unser Fundament"
          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"
          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: "http://img.b2bpic.net/free-photo/full-shot-man-wearing-protection-helmet-outdoors_23-2149343635.jpg", imageAlt: "Dachsanierung Einfamilienhaus" },
            { id: "project-2", name: "Flachdach Modernisierung", price: "", variant: "Effizient & Dauerhaft", imageSrc: "http://img.b2bpic.net/free-photo/low-angle-shot-green-building-with-gray-pipe-cloudy-sky_181624-6832.jpg", imageAlt: "Flachdach Modernisierung" },
            { id: "project-3", name: "Neueindeckung Wohnhaus", price: "", variant: "Hochwertig & Ästhetisch", imageSrc: "http://img.b2bpic.net/free-photo/home-clay-roof-tile_657883-716.jpg", imageAlt: "Neueindeckung Wohnhaus" },
            { id: "project-4", name: "Dachfenster Einbau", price: "", variant: "Licht & Komfort", imageSrc: "http://img.b2bpic.net/free-photo/colorful-bright-rainbow-sky_23-2149894770.jpg", imageAlt: "Dachfenster Einbau" },
            { id: "project-5", name: "Terrassenüberdachung", price: "", variant: "Schutz & Design", imageSrc: "http://img.b2bpic.net/free-photo/covered-lifestyle-garden-with-indoor-outdoor-living_1127-3425.jpg", imageAlt: "Terrassenüberdachung aus Holz" },
            { id: "project-6", name: "Fassadenverkleidung", price: "", variant: "Ästhetik & Dämmung", imageSrc: "http://img.b2bpic.net/free-photo/detail-shot-skyscrapers_1359-577.jpg", 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="http://img.b2bpic.net/free-photo/people-negotiating-about-blueprint-house_23-2148301717.jpg"
          imageAlt="DachWerk Meisterbetrieb Team bei der Arbeit"
          mediaAnimation="opacity"
        />
      </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="http://img.b2bpic.net/free-photo/specialist-technician-professional-engineer-with-laptop-tablet-maintenance-checking-installing-solar-roof-panel-factory-rooftop-sunlight-engineers-team-survey-check-solar-panel-roof_609648-2202.jpg"
          imageAlt="Dachdecker bei der Dachprüfung"
          mediaAnimation="opacity"
          mediaPosition="right"
          buttonText="Beratung anfragen"
        />
      </div>
      <div id="footer" data-section="footer">
        <FooterMedia
          imageSrc="http://img.b2bpic.net/free-photo/aerial-view-residence-bukovinian-dalmatian-metropolitans-chernivtsi-national-university-chernivtsi-touristic-destination-western-ukraine_231208-45.jpg"
          imageAlt="Panorama eines modernen Daches"
          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>
  );
}
