"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCTA from '@/components/sections/contact/ContactCTA';
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
import TextAbout from '@/components/sections/about/TextAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="elastic-effect"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="mediumLarge"
        sizing="medium"
        background="floatingGradient"
        cardStyle="gradient-mesh"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="radial-glow"
        headingFontWeight="bold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      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">
      <HeroCarouselLogo
      logoText="Emilia UGC"
      description="Authentic UGC Content that connects brands with people. Ich erstelle authentischen, modernen und conversionstarken Content für Marken, die sichtbar werden möchten."
      buttons={[
        {
          text: "Jetzt Anfrage senden",
          href: "#contact",
        },
        {
          text: "Portfolio ansehen",
          href: "#portfolio",
        },
      ]}
      slides={[
        {
          imageSrc: "http://img.b2bpic.net/free-photo/minimal-different-vases-arrangement_23-2149681130.jpg",
          imageAlt: "young woman UGC creator",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/man-filming-v-mount-accumulator-review_482257-109112.jpg",
          imageAlt: "UGC lifestyle creator",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/full-view-smile-woman-talk-phone_197531-32918.jpg",
          imageAlt: "creator selfie aesthetic",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/bullet-journals-pens_23-2149740084.jpg",
          imageAlt: "creative strategy planner",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/autumn-still-life-arrangement_23-2149080523.jpg",
          imageAlt: "product focus photography",
        },
        {
          imageSrc: "http://img.b2bpic.net/free-photo/top-view-white-pumpkin-with-leaves_23-2149731223.jpg",
          imageAlt: "minimalist photography aesthetic",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <TextAbout
      useInvertedBackground={false}
      title="Hi, ich bin Emilia – UGC-Creatorin mit einem Gespür für authentischen Content."
      buttons={[
        {
          text: "Mehr erfahren",
          href: "#services",
        },
      ]}
    />
  </div>

  <div id="services" data-section="services">
      <FeatureCardTwentySeven
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      features={[
        {
          id: "1",
          title: "UGC Videos",
          descriptions: [
            "High-Quality UGC für Social Media.",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/mechanic-holding-bicycle-gear_1170-2511.jpg",
        },
        {
          id: "2",
          title: "TikTok & Reels",
          descriptions: [
            "Trendbasierte Kurzvideos.",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/hispanic-blogger-seen-smartphone-screen-home_662251-2784.jpg",
        },
        {
          id: "3",
          title: "Produktfotos",
          descriptions: [
            "Lifestyle & Product Photography.",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/tender-young-caucasian-model-woman-touching-face-while-looking-mirror-reflection-brunette-girl-enjoys-moment-with-her-eyes-closed-healthy-hydrated-skin-care-concept_197531-32268.jpg",
        },
      ]}
      title="Meine Leistungen"
      description="Alles was Sie für eine erfolgreiche UGC-Kampagne benötigen."
    />
  </div>

  <div id="portfolio" data-section="portfolio">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="uniform-all-items-equal"
      useInvertedBackground={false}
      products={[
        {
          id: "1",
          name: "Beauty Campaign",
          price: "UGC",
          imageSrc: "http://img.b2bpic.net/free-photo/women-s-day-still-life-with-makeup-jewelry_23-2149263167.jpg",
        },
        {
          id: "2",
          name: "Fashion Reels",
          price: "Ads",
          imageSrc: "http://img.b2bpic.net/free-photo/full-shot-woman-wearing-total-denim-outfit_23-2150105241.jpg",
        },
        {
          id: "3",
          name: "Food Styling",
          price: "Content",
          imageSrc: "http://img.b2bpic.net/free-photo/delicious-healthy-food-assortment_23-2149043090.jpg",
        },
        {
          id: "4",
          name: "Tech Unboxing",
          price: "UGC",
          imageSrc: "http://img.b2bpic.net/free-photo/female-vlogger-home-with-camera-unboxing-plant_23-2148738205.jpg",
        },
        {
          id: "5",
          name: "Travel Lifestyle",
          price: "Content",
          imageSrc: "http://img.b2bpic.net/free-photo/woman-holding-hat-out-window-car-mirror-view_23-2148756440.jpg",
        },
        {
          id: "6",
          name: "Ad Creatives",
          price: "Ads",
          imageSrc: "http://img.b2bpic.net/free-photo/top-view-compostable-containers-arrangement_23-2149353101.jpg",
        },
      ]}
      title="Portfolio & Cases"
      description="Ein Blick auf meine bisherigen Projekte."
    />
  </div>

  <div id="why" data-section="why">
      <FeatureCardTwentySeven
      animationType="slide-up"
      textboxLayout="split-description"
      useInvertedBackground={true}
      features={[
        {
          id: "w1",
          title: "Vertrauen",
          descriptions: [
            "Content, der authentisch wirkt.",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/young-woman-stands-house-design-sketch-ready-renovation_273609-37349.jpg",
        },
        {
          id: "w2",
          title: "Modern Look",
          descriptions: [
            "Passend zu den heutigen Trends.",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/glad-mixed-race-woman-with-afro-hairstyle-poses-cell-phone-making-selfie_273609-44865.jpg",
        },
        {
          id: "w3",
          title: "Conversion",
          descriptions: [
            "Content, der Kunden überzeugt.",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/gradient-glitter-luxury-arrow-pointing-up_23-2148445335.jpg",
        },
      ]}
      title="Warum UGC mit Emilia?"
      description="Authentischer Content, der Vertrauen schafft und konvertiert."
    />
  </div>

  <div id="process" data-section="process">
      <FeatureCardTwentySeven
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={false}
      features={[
        {
          id: "p1",
          title: "Anfrage",
          descriptions: [
            "Kontaktaufnahme.",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/close-up-hand-holding-pencil_23-2148708101.jpg",
        },
        {
          id: "p2",
          title: "Briefing",
          descriptions: [
            "Ziele und Vision.",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/creative-ideas-identity-product-develop-design_53876-167129.jpg",
        },
        {
          id: "p3",
          title: "Produktion",
          descriptions: [
            "Umsetzung & Content.",
          ],
          imageSrc: "http://img.b2bpic.net/free-photo/graphic-designer-working-with-interactive-pen-display-digital-drawing-tablet-pen-computer-smooth-tracking-shot-with-nice-backlit-lensflare_197531-3414.jpg",
        },
      ]}
      title="Der Ablauf"
      description="In 5 Schritten zum perfekten Content."
    />
  </div>

  <div id="testimonials" data-section="testimonials">
      <TestimonialCardThirteen
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={true}
      testimonials={[
        {
          id: "t1",
          name: "Anna S.",
          handle: "@brand",
          testimonial: "Großartige Zusammenarbeit!",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/3d-cartoon-style-character_23-2151034128.jpg",
        },
        {
          id: "t2",
          name: "Marc L.",
          handle: "@shop",
          testimonial: "Sehr professionell.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-entrepreneur-posing-camera_1262-3636.jpg",
        },
        {
          id: "t3",
          name: "Lisa K.",
          handle: "@agency",
          testimonial: "Schnelle Umsetzung.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/blonde-businesswoman-portrait-with-copy-space_1194-633470.jpg",
        },
        {
          id: "t4",
          name: "Tim B.",
          handle: "@app",
          testimonial: "Immer gerne wieder.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/smiling-man_1098-15443.jpg",
        },
        {
          id: "t5",
          name: "Sara D.",
          handle: "@store",
          testimonial: "Top Ästhetik.",
          rating: 5,
          imageSrc: "http://img.b2bpic.net/free-photo/young-businesswoman-portrait-office_1262-1506.jpg",
        },
      ]}
      showRating={true}
      title="Was Brands sagen"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCTA
      useInvertedBackground={false}
      background={{
        variant: "plain",
      }}
      tag="Kontakt"
      title="Kooperation anfragen"
      description="Lass uns dein nächstes Projekt planen. hello@emilia-ugc.de"
      buttons={[
        {
          text: "Jetzt anfragen",
          href: "#",
        },
      ]}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterLogoReveal
      logoText="Emilia UGC"
      leftLink={{
        text: "Impressum",
        href: "#",
      }}
      rightLink={{
        text: "Datenschutz",
        href: "#",
      }}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
