"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FaqBase from '@/components/sections/faq/FaqBase';
import FeatureCardTwentySix from '@/components/sections/feature/FeatureCardTwentySix';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import { Zap, Play, Camera, Gift, Mic, Heart } from 'lucide-react';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="entrance-slide"
        borderRadius="rounded"
        contentWidth="mediumSmall"
        sizing="medium"
        background="grid"
        cardStyle="glass-depth"
        primaryButtonStyle="flat"
        secondaryButtonStyle="layered"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        { name: "Start", id: "hero" },
        { name: "Über mich", id: "about" },
        { name: "Leistungen", id: "services" },
        { name: "Portfolio", id: "portfolio" },
        { name: "Kontakt", id: "contact" },
      ]}
      brandName="Emilia UGC"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroCentered
      background={{ variant: "gradient-bars" }}
      title="UGC Content für moderne Marken"
      description="Ich erstelle authentische Videos, Fotos und Social-Media-Content, der Marken sichtbar und nahbar macht."
      avatars={[
        { src: "http://img.b2bpic.net/free-photo/empty-art-studio-with-nobody-it-is-ready-painting-lesson-art-studio-modern-atelier-with-vase-chair-using-imagination-professional-sketch-tools-table-concept-creativity_482257-30104.jpg", alt: "professional ugc creator portrait warm lighting" },
        { src: "http://img.b2bpic.net/free-photo/lovely-female-artist-sitting-copy-space_23-2148372136.jpg", alt: "Lovely female artist sitting copy space" },
        { src: "http://img.b2bpic.net/free-photo/wide-shot-female-creative-designer-surrounded-by-her-works-confidently-looking-into-future_197531-30710.jpg", alt: "Wide shot of female creative designer surrounded by her works confidently looking into future" },
        { src: "http://img.b2bpic.net/free-photo/side-view-woman-working-photography-studio_23-2150254645.jpg", alt: "Side view woman working in photography studio" },
        { src: "http://img.b2bpic.net/free-photo/mockup-with-book-pencils_23-2147730273.jpg", alt: "Mockup with book and pencils" },
      ]}
      buttons={[
        { text: "Portfolio ansehen", href: "#portfolio" },
        { text: "Anfrage senden", href: "#contact" },
      ]}
      buttonAnimation="slide-up"
      marqueeItems={[
        { type: "text", text: "Authentischer Content" },
        { type: "text", text: "Social Media Expertise" },
        { type: "text", text: "Marken-Storytelling" },
        { type: "text", text: "Conversion-Optimiert" },
        { type: "text", text: "Kreative Produktion" },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <MetricSplitMediaAbout
      useInvertedBackground={false}
      title="Hi, ich bin Emilia."
      description="Ich unterstütze Marken dabei, Produkte authentisch, modern und verständlich in Szene zu setzen. Mein Fokus liegt auf UGC-Videos, Produktcontent, Reels und Social-Media-Content, der natürlich wirkt und Vertrauen schafft."
      metrics={[
        { value: "100+", title: "Projekte" },
        { value: "24h", title: "Antwortzeit" },
      ]}
      imageSrc="http://img.b2bpic.net/free-photo/beautiful-woman-with-curly-hair-posing_23-2148973995.jpg?_wi=1"
      mediaAnimation="slide-up"
      metricsAnimation="slide-up"
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardTwentySix
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        { title: "UGC Videos", description: "Authentische Videos für organische Reichweite.", buttonIcon: Zap, imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-sitting-chair-medium-shot_23-2149213204.jpg" },
        { title: "Reels & TikToks", description: "Trendiger Content für maximale Interaktion.", buttonIcon: Play, imageSrc: "http://img.b2bpic.net/free-photo/empty-art-studio-with-nobody-it-is-ready-painting-lesson-art-studio-modern-atelier-with-vase-chair-using-imagination-professional-sketch-tools-table-concept-creativity_482257-30104.jpg" },
        { title: "Produktfotos", description: "Hochwertige Ästhetik für deine Brand.", buttonIcon: Camera, imageSrc: "http://img.b2bpic.net/free-photo/beautiful-woman-with-curly-hair-posing_23-2148973995.jpg?_wi=2" },
        { title: "Unboxing Videos", description: "Spannende Einblicke in deine Produkte.", buttonIcon: Gift, imageSrc: "http://img.b2bpic.net/free-photo/top-view-laptop-with-mouse-headphones_23-2148291099.jpg?_wi=1" },
        { title: "Voiceover Content", description: "Persönliche Note mit professioneller Stimme.", buttonIcon: Mic, imageSrc: "http://img.b2bpic.net/free-photo/still-life-minimalist-lifestyle_23-2149743888.jpg?_wi=1" },
        { title: "Lifestyle Content", description: "Natürliche Einbindung in den Alltag.", buttonIcon: Heart, imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-holding-smartphone-drink_23-2149295224.jpg?_wi=1" },
      ]}
      title="Meine Leistungen"
      description="Individueller UGC-Content für jede Plattform."
    />
  </div>

  <div id="portfolio" data-section="portfolio">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="four-items-2x2-equal-grid"
      useInvertedBackground={false}
      products={[
        { id: "1", name: "UGC Video Campaign", price: "High Performance", imageSrc: "http://img.b2bpic.net/free-photo/top-view-laptop-with-mouse-headphones_23-2148291099.jpg?_wi=2" },
        { id: "2", name: "Product Aesthetics", price: "Lifestyle Imagery", imageSrc: "http://img.b2bpic.net/free-photo/still-life-minimalist-lifestyle_23-2149743888.jpg?_wi=2" },
        { id: "3", name: "Social Reel Series", price: "Viral Focused", imageSrc: "http://img.b2bpic.net/free-photo/close-up-woman-holding-smartphone-drink_23-2149295224.jpg?_wi=2" },
        { id: "4", name: "Unboxing Experience", price: "Authentic Review", imageSrc: "http://img.b2bpic.net/free-photo/phone-filming-live-shop_23-2149947474.jpg" },
        { id: "5", name: "Brand Product Shot", price: "Professional", imageSrc: "http://img.b2bpic.net/free-photo/spa-still-life-with-beauty-products_23-2148201426.jpg" },
        { id: "6", name: "Social Media Content", price: "Organic Reach", imageSrc: "http://img.b2bpic.net/free-photo/still-life-books-versus-technology_23-2150063046.jpg" },
      ]}
      title="Mein Portfolio"
      description="Beispiele meiner Arbeit für verschiedene Brands."
    />
  </div>

  <div id="why-me" data-section="why-me">
      <MetricCardFourteen
      useInvertedBackground={false}
      title="Warum mit Emilia arbeiten?"
      tag="Vorteile"
      metrics={[
        { id: "m1", value: "Authentisch", description: "Content, der Vertrauen schafft." },
        { id: "m2", value: "Modern", description: "Neuester Social-Media-Look." },
        { id: "m3", value: "Zuverlässig", description: "Schnelle und klare Kommunikation." },
      ]}
      metricsAnimation="slide-up"
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqBase
      textboxLayout="default"
      useInvertedBackground={false}
      faqs={[
        { id: "q1", title: "Wie ist der Ablauf?", content: "Wir besprechen deine Ziele, ich produziere den Content und liefere ihn zeitnah." },
        { id: "q2", title: "Welche Plattformen?", content: "Ich erstelle Content für TikTok, Instagram Reels, YouTube Shorts und Ads." },
        { id: "q3", title: "Wie starten wir?", content: "Sende mir einfach eine Anfrage über das Kontaktformular." },
      ]}
      title="Häufige Fragen"
      description="Alles, was du über die Zusammenarbeit wissen musst."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactSplitForm
      useInvertedBackground={false}
      title="Anfrage senden"
      description="Lass uns gemeinsam Großes erreichen. Kontaktiere mich direkt unter hello@emilia-ugc.de"
      inputs={[
        { name: "name", type: "text", placeholder: "Dein Name", required: true },
        { name: "company", type: "text", placeholder: "Unternehmen" },
        { name: "email", type: "email", placeholder: "E-Mail", required: true },
      ]}
      textarea={{ name: "message", placeholder: "Deine Nachricht", rows: 4 }}
      imageSrc="http://img.b2bpic.net/free-photo/girl-lying-down-floor-with-her-phone_53876-137614.jpg"
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="Emilia UGC"
      columns={[
        { title: "Navigation", items: [{ label: "Start", href: "#hero" }, { label: "Portfolio", href: "#portfolio" }, { label: "Kontakt", href: "#contact" }] },
        { title: "Social", items: [{ label: "Instagram", href: "#" }, { label: "TikTok", href: "#" }] },
        { title: "Rechtliches", items: [{ label: "Impressum", href: "#" }, { label: "Datenschutz", href: "#" }] },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
