"use client"

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingInline from "@/components/navbar/NavbarLayoutFloatingInline";
import HeroBillboard from "@/components/sections/hero/HeroBillboard";
import SplitAbout from "@/components/sections/about/SplitAbout";
import FeatureCardOne from "@/components/sections/feature/FeatureCardOne";
import TestimonialCardTwo from "@/components/sections/testimonial/TestimonialCardTwo";
import ProductCardOne from "@/components/sections/product/ProductCardOne";
import FeatureCardTwelve from "@/components/sections/feature/FeatureCardTwelve";
import PricingCardTwo from "@/components/sections/pricing/PricingCardTwo";
import FaqBase from "@/components/sections/faq/FaqBase";
import ContactCenter from "@/components/sections/contact/ContactCenter";
import FooterBase from "@/components/sections/footer/FooterBase";
import { Zap, Target, Award, Users, Video, Edit3, Smartphone, TrendingUp, Star, Shield, CheckCircle, Play } from "lucide-react";

export default function PeakCreationsPage() {
  return (
    <ThemeProvider
      defaultButtonVariant="hover-magnetic"
      defaultTextAnimation="entrance-slide"
      borderRadius="soft"
      contentWidth="medium"
      sizing="large"
      background="circleGradient"
      cardStyle="elevated"
      primaryButtonStyle="gradient"
      secondaryButtonStyle="glass"
      headingFontWeight="semibold"
    >
      <div id="nav" data-section="nav">
        <NavbarLayoutFloatingInline
          navItems={[
            { name: "Projektid", id: "projects" },
            { name: "Teenused", id: "services" },
            { name: "Hinnakiri", id: "pricing" },
            { name: "Küsimused", id: "faq" }
          ]}
          brandName="Peak Creations"
          button={{ text: "Broneeri kõne", href: "#contact" }}
        />
      </div>

      <div id="hero" data-section="hero">
        <HeroBillboard
          title="Silmapaistvalt head lühivideod, mis tõstavad lati uutesse kõrgustesse"
          description="Ainulaadsed lahendused Eestis - maailmatasemel lühivideod, muljetavaldavad maketid ja sotsiaalmeedia bränding"
          background={{ variant: "sparkles-gradient" }}
          tag="Uus! Esimene nädal on täiesti tasuta!"
          tagIcon={Star}
          buttons={[
            { text: "Broneeri kõne", href: "#contact" },
            { text: "Vaata töid", href: "#projects" }
          ]}
          imageSrc="https://peak-q6u8.vercel.app/images/logoimage.png"
          imageAlt="Peak Creations videoproduktsioon"
        />
      </div>

      <div id="about" data-section="about">
        <SplitAbout
          title="Meie teenused"
          description="Pakume täielikku lühivideo tootmist ja sotsiaalmeedia brändingut, mis aitab teie brändi silma paista."
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          bulletPoints={[
            {
              title: "Lühivideod",              description: "Kaasaegsed ja atraktiivsed lühivideod kõikidele sotsiaalmeedia platvormidele",              icon: Video
            },
            {
              title: "Professionaalne montaazh",              description: "Maailmatasemel monteermine ja kvaliteetsed animatsioonid",              icon: Edit3
            },
            {
              title: "Sotsiaalmeedia bränding",              description: "Täielik sotsiaalmeedia haldus ja sisuplaanide loomine",              icon: Smartphone
            }
          ]}
          imageSrc="https://peak-q6u8.vercel.app/shapes/graphic.png"
          imageAlt="Peak Creations teenused"
          imagePosition="right"
        />
      </div>

      <div id="features" data-section="features">
        <FeatureCardOne
          title="Miks valida lühivideod?"
          description="Lühivideod on tõhus viis vaatajate tähelepanu püüdmiseks ja sõnumi kiireks edastamiseks."
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          features={[
            {
              title: "Kiire mõju ja tähelepanu",              description: "Lühivideod püüavad vaatajate tähelepanu kiiremini kui pikemad videod. 60% tarbijatest eelistab brändide lühivideoid.",              imageSrc: "https://peak-q6u8.vercel.app/shapes/lightning.png",              imageAlt: "Kiire mõju"
            },
            {
              title: "Efektiivne investeering",              description: "Lühivideod on kiiremad ja odavamad toota, pakkudes samal ajal kõrgemat ROI-d ja laiemat vaatajaskondi.",              imageSrc: "https://peak-q6u8.vercel.app/shapes/coins2.png",              imageAlt: "Efektiivne investeering"
            },
            {
              title: "Brändi teadlikkuse tõstmine",              description: "Kiire ja tõhus viis uute vaatajateni jõudmiseks, luues emotsionaalseid sidemeid ja tõstes brändi tuntust.",              imageSrc: "https://peak-q6u8.vercel.app/shapes/target2.png",              imageAlt: "Brändi teadlikkus"
            }
          ]}
        />
      </div>

      <div id="testimonials" data-section="testimonials">
        <TestimonialCardTwo
          title="Mida meie kliendid arvavad"
          description="Kuulake, mida meie rahulolev kliendid meie töö kohta arvavad."
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          testimonials={[
            {
              id: "1",              name: "Moritz Thomas",              role: "Siemenste",              testimonial: "Peak tegi meie uue videode puhul erakordset tööd. Alates algusest lõpuni ületasid nad kõik ootused.",              icon: Star
            },
            {
              id: "2",              name: "Matthew Tent",              role: "UCLA",              testimonial: "Olen väga rahul saadud tulemusega! Kommunikatsioon oli suurepärane ja protsess kiire.",              icon: Award
            },
            {
              id: "3",              name: "Vishal Air",              role: "Sente AI",              testimonial: "Väga rahul tulemusega! Soovitan animatsioonidega loovate lühivideote jaoks.",              icon: CheckCircle
            }
          ]}
        />
      </div>

      <div id="projects" data-section="projects">
        <ProductCardOne
          title="Tehtud tööd"
          description="Kollektsioon meie esiletõstetud lühivideodest ja projektidest."
          textboxLayout="default"
          gridVariant="uniform-all-items-equal"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          products={[
            {
              id: "1",              name: "Podcast montaazh",              price: "Vaata",              imageSrc: "/placeholders/placeholder1.webp",              imageAlt: "Podcast montaazh näide"
            },
            {
              id: "2",              name: "Marketing video",              price: "Vaata",              imageSrc: "/placeholders/placeholder2.webp",              imageAlt: "Marketing video näide"
            },
            {
              id: "3",              name: "Sotsiaalmeedia sisu",              price: "Vaata",              imageSrc: "/placeholders/placeholder3.webp",              imageAlt: "Sotsiaalmeedia sisu näide"
            }
          ]}
        />
      </div>

      <div id="services" data-section="services">
        <FeatureCardTwelve
          title="Meie teenused"
          description="Valige endale sobiv teenuste pakett meie pakkumiste seast."
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="invertDefault"
          features={[
            {
              id: "luhivideod",              label: "Lühivideod",              title: "Professionaalsed lühivideod kõikidele platvormidele",              items: [
                "TikTok, Instagram, Facebook optimeeritud",                "Montaazh ja heliefektid",                "Subtiitrid ja animatsioonid",                "Kiire täitmisaeg"
              ],
              buttons: [
                { text: "Saa pakkumine", href: "#contact" }
              ]
            },
            {
              id: "branding",              label: "Bränding",              title: "Täielik sotsiaalmeedia bränding ja haldus",              items: [
                "Sisuplaan ja ideede genereerimine",                "Postitamine ja jälgijatega suhtlemine",                "Igakuine raport ja analüüs",                "Professionaalne visuaalse identiteedi loomine"
              ],
              buttons: [
                { text: "Broneeri kõne", href: "#contact" }
              ]
            }
          ]}
        />
      </div>

      <div id="pricing" data-section="pricing">
        <PricingCardTwo
          title="Hinnakiri"
          description: "Valige endale sobiv pakett. Esimene nädal on täiesti tasuta!"
          textboxLayout="default"
          animationType="slide-up"
          useInvertedBackground="noInvert"
          plans={[
            {
              id: "luhivideomeister",              badge: "Populaarne",              badgeIcon: Star,
              price: "2999€/kuu",              subtitle: "Ideaalne valik uudisteportaalidele, podcastidele ja YouTuberitele",              buttons: [
                { text: "Alusta kohe", href: "#contact" },
                { text: "Saa rohkem infot", href: "#faq" }
              ],
              features: [
                "6-10x lühivideot, oleneb vajadusest",                "Sisuplaan ja ideede genereerimine",                "Monteerimine ja postitamine",                "Sotsiaalmeedia bränding ja haldus",                "Igakuine raport ja põhjalik analüüs"
              ]
            },
            {
              id: "custom",              badge: "Paindlik",              badgeIcon: Shield,
              price: "Kokkuleppe järgi",              subtitle: "Personaalne pakett teie vajadustele",              buttons: [
                { text: "Broneeri kõne", href: "#contact" },
                { text: "Küsi pakkumist", href: "#contact" }
              ],
              features: [
                "Personaalne lahendus",                "Paindlik teenuste valik",                "Individuaalne hinnapoliitika",                "Primaarne klienditugi",                "Kohandatud töövoog"
              ]
            }
          ]}
        />
      </div>

      <div id="faq" data-section="faq">
        <FaqBase
          title="Korduma kippuvad küsimused"
          description="Leiate vastused kõige tavalisematele küsimustele meie teenuste kohta."
          textboxLayout="default"
          useInvertedBackground="invertDefault"
          faqs={[
            {
              id: "1",              title: "Kes me oleme?",              content: "Oleme Peak Creations, kaks noort, kes loovad lühivideoid, tuues Eestisse rahvusvaheliselt tunnustatud montaažistiile. Spetsialiseerume TikToki turundusele, kasvatades jälgijaskondi ja kogudes tuhandeid meeldimisi."
            },
            {
              id: "2",              title: "Kellele sobivad Peak Creationsi teenused?",              content: "Meie teenused sobivad ideaalselt nii ettevõtetele (poed, restoranid, pangad jne) kui ka eraisikutele, nagu poliitikud, näitlejad, sportlased, kinnisvaramaaklerid ja teised."
            },
            {
              id: "3",              title: "Miks on lühivideod vajalikud minu brändi jaoks?",              content: "Tänapäeva infoühiskonnas, kus inimeste tähelepanuvõime on lühike, on lühivideod (15 sekundit kuni minut) ideaalsed sõnumi kiireks edastamiseks ja vaatajate tähelepanu hoidmiseks. Need videod suudavad kiiresti luua emotsionaalse sideme vaatajaga."
            },
            {
              id: "4",              title: "Milline on tööprotsess ja kui suur on minu ajakulu?",              content: "Teie ajakulu on minimaalne. Tööprotsess algab videokõnega, kus tutvustame end ja oma teenuseid. Seejärel paneme koos paika plaani ja valime sobiva paketi. Edasine töö toimub meie poolt, nii et teie panus on väga väike."
            },
            {
              id: "5",              title: "Mida tähendab 'esimene nädal on täiesti tasuta'?",              content: "Esimesel nädalal saad kõiki teenuseid tasuta proovida. Pärast seda saad valida endale sobiva paketi."
            },
            {
              id: "6",              title: "Mis platvormidele postitate videod?",              content: "Loome sisu kõigile teie soovitud sotsiaalmeedia platvormidele, olgu selleks TikTok, Instagram, Facebook, YouTube, LinkedIn või Twitter."
            }
          ]}
        />
      </div>

      <div id="contact" data-section="contact">
        <ContactCenter
          tag="Broneeri kõne"
          tagIcon={Play}
          title="Alustame koostööd"
          description="Videokõne, kus tutvustame end ja oma teenuseid. Ei leidnud sobivat? Ära muretse, loome Teile personaalse paketi."
          useInvertedBackground="noInvert"
          inputPlaceholder="Sisesta oma e-mail"
          buttonText="Broneeri kõne"
          termsText="Klikkides 'Broneeri kõne' nõustute meie tingimuste ja privaatsuspoliitikaga."
        />
      </div>

      <div id="footer" data-section="footer">
        <FooterBase
          logoText="Peak Creations"
          copyrightText="© 2025 | Peak Creations"
          columns={[
            {
              title: "Teenused",              items: [
                { label: "Lühivideod", href: "#services" },
                { label: "Montaazh", href: "#services" },
                { label: "Bränding", href: "#services" }
              ]
            },
            {
              title: "Ettevõte",              items: [
                { label: "Meist", href: "#about" },
                { label: "Projektid", href: "#projects" },
                { label: "Kontakt", href: "#contact" }
              ]
            },
            {
              title: "Tugi",              items: [
                { label: "KKK", href: "#faq" },
                { label: "Hinnakiri", href: "#pricing" }
              ]
            }
          ]}
        />
      </div>
    </ThemeProvider>
  );
}
