"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
import HeroBillboardScroll from '@/components/sections/hero/HeroBillboardScroll';
import FeatureCardTen from '@/components/sections/feature/FeatureCardTen';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
import TestimonialCardTwo from '@/components/sections/testimonial/TestimonialCardTwo';
import FaqBase from '@/components/sections/faq/FaqBase';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import { Award, CheckCircle, Clock, DollarSign, Edit, Gauge, HelpCircle, Lightbulb, Layers, MessageSquare, MousePointer, Palette, Smartphone, Sparkles, Star, TrendingDown, Users, Zap } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="reveal-blur"
      borderRadius="rounded"
      contentWidth="medium"
      sizing="mediumLargeSizeLargeTitles"
      background="none"
      cardStyle="subtle-shadow"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="solid"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarStyleApple
          brandName="SiteForge"
          navItems={[
            { name: "Wie es funktioniert", id: "how-it-works" },
            { name: "Pakete", id: "packages" },
            { name: "Branchen", id: "industries" },
            { name: "Warum SiteForge", id: "why" },
            { name: "FAQ", id: "faq" },
            { name: "Kontakt", id: "contact" }
          ]}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboardScroll
          title="Fertige Websites. Jetzt online."
          description="Wählen Sie Ihre Branche, passen Sie das Design an, und Ihre professionelle Website ist in 48 Stunden live. Keine Programmierkenntnisse nötig – schlüsselfertig und bezahlbar."
          tag="Websites für kleine Unternehmen"
          tagIcon={Sparkles}
          tagAnimation="slide-up"
          background={{ variant: "radial-gradient" }}
          buttons={[
            { text: "Jetzt Website kaufen", href: "#packages" },
            { text: "Beispiele ansehen", href: "#industries" }
          ]}
          buttonAnimation="slide-up"
          imageSrc="http://img.b2bpic.net/free-vector/start-up-business-landing-page_23-2148276811.jpg"
          imageAlt="modern browser mockup laptop screen website"
        />
      </div>

      <div id="how-it-works" data-section="how-it-works">
        <FeatureCardTen
          title="So funktioniert SiteForge"
          description="In nur drei einfachen Schritten zu Ihrer professionellen Website – schnell, sicher und unkompliziert."
          tag="Unser Prozess"
          tagIcon={Zap}
          tagAnimation="slide-up"
          textboxLayout="split"
          animationType="slide-up"
          useInvertedBackground={false}
          features={[
            {
              id: "step-1",              title: "1. Branche auswählen",              description: "Wählen Sie aus verschiedenen vorgefertigten Website-Vorlagen für Ihre Branche – Restaurants, Friseure, Handwerker, Läden und mehr.",              media: { imageSrc: "http://img.b2bpic.net/free-vector/flat-design-ui-kit-collection_23-2149209589.jpg", imageAlt: "industry selection menu interface dropdown" },
              items: [
                { icon: MousePointer, text: "Schnelle Auswahl" },
                { icon: Layers, text: "Branchengerechte Vorlagen" }
              ],
              reverse: false
            },
            {
              id: "step-2",              title: "2. Design anpassen",              description: "Personalisieren Sie Farben, Texte, Bilder und Layout nach Ihren Vorstellungen. Einfach im Browser – kein Design-Know-how erforderlich.",              media: { imageSrc: "http://img.b2bpic.net/free-vector/gradient-ui-ux-background_23-2149051192.jpg", imageAlt: "design customization interface color palette" },
              items: [
                { icon: Palette, text: "Visuelle Anpassung" },
                { icon: Edit, text: "Intuitive Bearbeitung" }
              ],
              reverse: true
            },
            {
              id: "step-3",              title: "3. Website geht live",              description: "Bestätigen Sie Ihre fertige Website und sie ist sofort online. Optimiert für alle Geräte, suchmaschinenfreundlich und bereit für Ihr Geschäft.",              media: { imageSrc: "http://img.b2bpic.net/free-photo/top-view-hands-typing-keyboard_23-2149476770.jpg", imageAlt: "website launch live deployment upload success" },
              items: [
                { icon: CheckCircle, text: "Sofort verfügbar" },
                { icon: Smartphone, text: "Vollständig responsive" }
              ],
              reverse: false
            }
          ]}
        />
      </div>

      <div id="packages" data-section="packages">
        <PricingCardNine
          title="Pakete & Preise"
          description="Wählen Sie das perfekte Paket für Ihre Bedürfnisse. Alle Pakete enthalten Hosting, Domain und E-Mail-Support."
          textboxLayout="default"
          animationType="scale-rotate"
          useInvertedBackground={false}
          plans={[
            {
              id: "starter",              title: "Starter",              price: "299 €",              period: "Einmalig",              features: [
                "Einfaches 5-Seiten-Layout",                "Kostenlose Domain für 1 Jahr",                "Mobile-optimiert",                "SSL-Zertifikat",                "E-Mail-Support",                "Google Analytics integriert",                "Kontaktformular"
              ],
              button: { text: "Jetzt kaufen", href: "#" }
            },
            {
              id: "business",              title: "Business",              price: "599 €",              period: "Einmalig",              features: [
                "Alles aus Starter, plus:",                "Bis zu 15 Seiten",                "Online-Buchungssystem",                "Social-Media-Integration",                "Blog-Funktionalität",                "E-Commerce-Modul (bis 50 Produkte)",                "Premium Support (Chat & E-Mail)",                "SEO-Basis-Paket",                "Kostenlose Domain für 2 Jahre"
              ],
              button: { text: "Am meisten gewählt", href: "#" },
              imageSrc: "http://img.b2bpic.net/free-vector/flat-price-list-collection_23-2148089330.jpg",              imageAlt: "business package premium tier highlight"
            },
            {
              id: "premium",              title: "Premium",              price: "999 €",              period: "Einmalig",              features: [
                "Alles aus Business, plus:",                "Unbegrenzte Seiten",                "E-Commerce (unbegrenzte Produkte)",                "Zahlungsintegration (Stripe, PayPal)",                "Membership-System",                "Newsletter-Integration",                "Advanced SEO-Optimierung",                "Prioritäts-Support (Telefon)",                "Kostenlose Domain für 3 Jahre",                "Kostenlose Website-Wartung (3 Monate)"
              ],
              button: { text: "Premium upgraden", href: "#" }
            }
          ]}
        />
      </div>

      <div id="industries" data-section="industries">
        <ProductCardFour
          title="Beispiel-Branchen"
          description="SiteForge bietet maßgeschneiderte Lösungen für verschiedenste Branchen. Sehen Sie, wie Ihre Branche von einer professionellen Website profitiert."
          gridVariant="bento-grid"
          animationType="blur-reveal"
          textboxLayout="default"
          useInvertedBackground={false}
          products={[
            {
              id: "friseur",              name: "Friseur & Salon",              price: "ab 299 €",              variant: "Online-Terminbuchung",              imageSrc: "http://img.b2bpic.net/free-photo/female-hairdresser-styling-clients-hair_107420-94690.jpg",              imageAlt: "beauty salon hairdresser interior professional"
            },
            {
              id: "handwerker",              name: "Handwerksbetrieb",              price: "ab 399 €",              variant: "Projekt-Portfolio",              imageSrc: "http://img.b2bpic.net/free-photo/instruments-carpenter-wooden-table_23-2148180540.jpg",              imageAlt: "craftsman handyman tools workshop equipment"
            },
            {
              id: "restaurant",              name: "Restaurant & Café",              price: "ab 499 €",              variant: "Speisekarte & Reservierungen",              imageSrc: "http://img.b2bpic.net/free-photo/table-setting_74190-1957.jpg",              imageAlt: "restaurant interior dining modern professional"
            },
            {
              id: "boutique",              name: "Boutique & Mode",              price: "ab 599 €",              variant: "E-Commerce-Shop",              imageSrc: "http://img.b2bpic.net/free-photo/front-view-young-women-clothes-shopping_23-2148312176.jpg",              imageAlt: "boutique fashion store retail shop display"
            },
            {
              id: "zahnarzt",              name: "Arztpraxis",              price: "ab 349 €",              variant: "Patienten-Portal",              imageSrc: "http://img.b2bpic.net/free-photo/elderly-man-hospital-reception-wearing-face-mask-taking-with-nurse-while-waiting-coronavirus-examination_482257-8532.jpg",              imageAlt: "dental office clinic professional medical"
            },
            {
              id: "fitnessstudio",              name: "Fitnessstudio",              price: "ab 449 €",              variant: "Membership-System",              imageSrc: "http://img.b2bpic.net/free-photo/side-view-male-exercise-bicycle_23-2148353067.jpg",              imageAlt: "fitness gym studio modern equipment"
            }
          ]}
        />
      </div>

      <div id="why-siteforge" data-section="why-siteforge">
        <FeatureCardTen
          title="Warum SiteForge"
          description="Wir vereinfachen Website-Erstellung für kleine Unternehmen. Professionelle Qualität ohne die üblichen Hürden und Kosten."
          tag="Unsere Vorteile"
          tagIcon={Award}
          tagAnimation="slide-up"
          textboxLayout="default"
          animationType="opacity"
          useInvertedBackground={false}
          features={[
            {
              id: "fast",              title: "In 48h online",              description: "Ihre Website ist innerhalb von zwei Tagen live. Schneller als traditionelle Agenturen, genauso professionell und zuverlässig.",              media: { imageSrc: "http://img.b2bpic.net/free-vector/bicycle-delivery-concept-flat-style_23-2148167861.jpg", imageAlt: "fast speed clock timer quick rapid" },
              items: [
                { icon: Zap, text: "Blitzschnell" },
                { icon: Clock, text: "Effizient" }
              ],
              reverse: false
            },
            {
              id: "notech",              title: "Kein Tech-Know-how nötig",              description: "Sie benötigen keine Programmierkenntnisse. Unser intuitives System ermöglicht es Ihnen, Ihre Website selbst zu gestalten und zu verwalten.",              media: { imageSrc: "http://img.b2bpic.net/free-photo/authorized-guaranteed-certificate-approved-product_53876-21365.jpg", imageAlt: "no code low code simple easy platform" },
              items: [
                { icon: Users, text: "User-freundlich" },
                { icon: Lightbulb, text: "Intuitiv" }
              ],
              reverse: true
            },
            {
              id: "professional",              title: "Fertig & professionell",              description: "Jede Website wird von unseren Designexperten nach modernen Standards erstellt. SEO-optimiert, responsive und performant.",              media: { imageSrc: "http://img.b2bpic.net/free-vector/business-concept-landing-page-with-photo_23-2148293286.jpg", imageAlt: "professional design modern business template" },
              items: [
                { icon: Star, text: "Premium Design" },
                { icon: Gauge, text: "Hochperformant" }
              ],
              reverse: false
            },
            {
              id: "affordable",              title: "Günstiger als eine Agentur",              description: "Sparen Sie bis zu 80% im Vergleich zu traditionellen Webagenturen. Keine versteckten Kosten, keine Überraschungen.",              media: { imageSrc: "http://img.b2bpic.net/free-photo/stacked-coins-math-blocks-calculator-piggybank-wooden-tabletop_23-2147863929.jpg", imageAlt: "affordable price budget cost effective value" },
              items: [
                { icon: DollarSign, text: "Transparent" },
                { icon: TrendingDown, text: "Kosteneffizient" }
              ],
              reverse: true
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwo
          title="Das sagen unsere Kunden"
          description="Kleine Unternehmer und Geschäftsführer vertrauen SiteForge für ihre digitale Präsenz."
          tag="Kundenstimmen"
          tagIcon={MessageSquare}
          tagAnimation="slide-up"
          animationType="slide-up"
          textboxLayout="default"
          useInvertedBackground={true}
          testimonials={[
            {
              id: "1",              name: "Maria Schmidt",              role: "Inhaberin",              testimonial: "Mit SiteForge hatte ich innerhalb von zwei Tagen meine eigene Website online. Die Terminbuchung funktioniert perfekt, und meine Kunden finden mich jetzt online. Absolut empfehlenswert!",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-woman-with-long-brown-hair-black-t-shirt-white-jacket_613910-8245.jpg",              imageAlt: "professional woman portrait business headshot",              icon: Star
            },
            {
              id: "2",              name: "Thomas Müller",              role: "Geschäftsführer",              testimonial: "Als Handwerker brauchte ich eine Lösung, die nicht kompliziert ist. SiteForge hat meine Anforderungen perfekt erfüllt. Mein Portfolio ist online, und ich bekomme neue Anfragen!",              imageSrc: "http://img.b2bpic.net/free-photo/bald-man-with-beard-wearing-business-clothes-glasses-puffing-cheeks-with-funny-face-mouth-inflated-with-air-crazy-expression_839833-2502.jpg",              imageAlt: "professional man portrait business headshot",              icon: Star
            },
            {
              id: "3",              name: "Lisa Weber",              role: "Eigentümerin",              testimonial: "Unsere Website mit Speisekarte und Online-Reservierung ist ein Hit bei unseren Gästen. Die Investition hat sich bereits nach wenigen Wochen amortisiert.",              imageSrc: "http://img.b2bpic.net/free-photo/smiling-beautiful-caucasian-woman-office-looking-camera_23-2148187145.jpg",              imageAlt: "woman restaurant owner portrait professional",              icon: Star
            },
            {
              id: "4",              name: "Martin Richter",              role: "Geschäftsführer",              testimonial: "Das Membership-System ist beeindruckend. Unsere Mitglieder können sich online anmelden, und wir sparen viel Verwaltungsaufwand. Ein großes Plus!",              imageSrc: "http://img.b2bpic.net/free-photo/portrait-fashionable-well-dressed-man-with-beard-posing-outdoors_1328-3269.jpg",              imageAlt: "male fitness professional trainer portrait",              icon: Star
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Häufig gestellte Fragen"
          description="Finden Sie Antworten auf die wichtigsten Fragen zu SiteForge und unseren Services."
          tag="FAQ"
          tagIcon={HelpCircle}
          tagAnimation="slide-up"
          textboxLayout="default"
          faqsAnimation="slide-up"
          useInvertedBackground={false}
          faqs={[
            {
              id: "q1",              title: "Wie lange dauert es, bis meine Website online ist?",              content: "Ihre Website ist innerhalb von 48 Stunden online. Sie müssen nur Ihre Branche auswählen, das Design anpassen und bestätigen. Danach kümmern wir uns um den Rest – Hosting, Domain, SSL-Zertifikat und Deployment."
            },
            {
              id: "q2",              title: "Kann ich meine Website nach dem Launch noch ändern?",              content: "Ja, absolut! Sie haben vollständigen Zugriff auf Ihr Website-Admin-Panel. Sie können Texte, Bilder, Preise und alle anderen Inhalte jederzeit ändern. Es gibt keine versteckten Einschränkungen."
            },
            {
              id: "q3",              title: "Ist die Website für Suchmaschinen optimiert?",              content: "Ja, alle SiteForge-Websites sind SEO-optimiert. Wir implementieren Best Practices für Google Rankings, strukturierte Daten, schnelle Ladezeiten und mobile Optimierung. Business- und Premium-Pakete erhalten zusätzlich ein intensives SEO-Basis-Paket."
            },
            {
              id: "q4",              title: "Was ist im Preis enthalten? Gibt es versteckte Kosten?",              content: "Nein, es gibt keine versteckten Kosten. Der Paketpreis ist die einzige Investition. Alle Pakete enthalten Hosting, Domain, SSL, E-Mail und Support. Optional können Sie Add-ons wie erweiterte E-Commerce-Funktionen oder Premium-Themes hinzufügen."
            },
            {
              id: "q5",              title: "Ich habe ein spezielles Geschäftsmodell. Kann SiteForge das unterstützen?",              content: "Sehr gerne! Kontaktieren Sie unser Team. Je nach Anforderung können wir Ihre Website individuell anpassen oder ein Custom-Paket zusammenstellen. Wir arbeiten eng mit Ihnen zusammen, um sicherzustellen, dass Ihre Lösung perfekt passt."
            }
          ]}
        />
      </div>

      <div id="contact-cta" data-section="contact-cta">
        <ContactCenter
          tag="Bereit?"
          title="Starten Sie noch heute mit SiteForge"
          description="Lassen Sie sich von unserem Team beraten. Wir helfen Ihnen, die perfekte Website für Ihr Geschäft zu finden."
          background={{ variant: "animated-grid" }}
          useInvertedBackground={false}
          inputPlaceholder="Geben Sie Ihre E-Mail ein"
          buttonText="Jetzt Kontakt aufnehmen"
          termsText="Mit dem Absenden akzeptieren Sie unsere Datenschutzerklärung und Nutzungsbedingungen."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBaseCard
          logoText="SiteForge"
          copyrightText="© 2024 SiteForge. Alle Rechte vorbehalten."
          columns={[
            {
              title: "Produkt",              items: [
                { label: "Wie es funktioniert", href: "#how-it-works" },
                { label: "Pakete & Preise", href: "#packages" },
                { label: "Beispiel-Branchen", href: "#industries" },
                { label: "FAQ", href: "#faq" }
              ]
            },
            {
              title: "Unternehmen",              items: [
                { label: "Über uns", href: "#" },
                { label: "Blog", href: "#" },
                { label: "Karriere", href: "#" },
                { label: "Kontakt", href: "#contact-cta" }
              ]
            },
            {
              title: "Rechtlich",              items: [
                { label: "Datenschutz", href: "#" },
                { label: "Nutzungsbedingungen", href: "#" },
                { label: "Impressum", href: "#" },
                { label: "Cookies", href: "#" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}