"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqDouble from '@/components/sections/faq/FaqDouble';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardThree from '@/components/sections/product/ProductCardThree';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TeamCardSix from '@/components/sections/team/TeamCardSix';
import TextAbout from '@/components/sections/about/TextAbout';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="background-highlight"
        borderRadius="pill"
        contentWidth="mediumSmall"
        sizing="mediumLarge"
        background="noise"
        cardStyle="soft-shadow"
        primaryButtonStyle="double-inset"
        secondaryButtonStyle="layered"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingInline
      navItems={[
        {
          name: "Home",
          id: "hero",
        },
        {
          name: "About",
          id: "about",
        },
        {
          name: "Projects",
          id: "projects",
        },
        {
          name: "Contact",
          id: "contact",
        },
      ]}
      brandName="Nazar & Marina"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroCentered
      background={{
        variant: "gradient-bars",
      }}
      title="Nazar & Marina: The Dual Creative Studio"
      description="Two distinct aesthetic universes, one singular vision. Merging technical precision with organic fluidity."
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/man-with-construction-plan-copy-space_23-2148269820.jpg",
          alt: "Nazar",
        },
        {
          src: "http://img.b2bpic.net/free-photo/full-shot-smiley-woman-holding-brushes_52683-88936.jpg",
          alt: "Marina",
        },
        {
          src: "http://img.b2bpic.net/free-photo/man-new-york-landmark-vessel_1321-2487.jpg",
          alt: "Creative Partner 1",
        },
        {
          src: "http://img.b2bpic.net/free-photo/smiley-architect-looking-camera_23-2148242902.jpg",
          alt: "Creative Partner 2",
        },
        {
          src: "http://img.b2bpic.net/free-photo/man-using-smartphone-curved-concrete-architectural-settings_24972-2890.jpg",
          alt: "Creative Partner 3",
        },
      ]}
      buttons={[
        {
          text: "View Our Work",
          href: "#projects",
        },
      ]}
      marqueeItems={[
        {
          type: "text",
          text: "Architectural Design",
        },
        {
          type: "text",
          text: "Digital Artistry",
        },
        {
          type: "text",
          text: "Interactive Systems",
        },
        {
          type: "text",
          text: "Fluid Illustration",
        },
        {
          type: "text",
          text: "Motion Graphics",
        },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <TextAbout
      useInvertedBackground={false}
      title="A Harmony of Contrasts"
      tag="Our Philosophy"
    />
  </div>

  <div id="skills" data-section="skills">
      <FeatureCardTwentyOne
      useInvertedBackground={false}
      title="Our Specialized Toolkit"
      description="Nazar focuses on technical architectural precision, while Marina explores fluid expressive arts."
      accordionItems={[
        {
          id: "1",
          title: "Nazar: Tech Stack",
          content: "React, Next.js, Three.js, Architectural Modeling, Blender.",
        },
        {
          id: "2",
          title: "Marina: Art Tools",
          content: "Procreate, Adobe Suite, Watercolor, Digital Illustration, UI Design.",
        },
      ]}
      mediaAnimation="slide-up"
      imageSrc="http://img.b2bpic.net/free-photo/designer-interacts-with-digital-technology-produce-virtual-home-set_482257-118835.jpg"
    />
  </div>

  <div id="projects" data-section="projects">
      <ProductCardThree
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="two-columns-alternating-heights"
      useInvertedBackground={false}
      products={[
        {
          id: "p1",
          name: "Tech Architecture",
          price: "Featured",
          imageSrc: "http://img.b2bpic.net/free-vector/luxury-background-abstract-gradient-dark_343694-4512.jpg",
        },
        {
          id: "p2",
          name: "Fluid Illustration",
          price: "Featured",
          imageSrc: "http://img.b2bpic.net/free-photo/abstract-colorful-splash-3d-background-generative-ai-background_60438-2494.jpg",
        },
        {
          id: "p3",
          name: "Digital Systems",
          price: "Featured",
          imageSrc: "http://img.b2bpic.net/free-photo/abstract-technology-background_1048-9652.jpg",
        },
        {
          id: "p4",
          name: "Organic Branding",
          price: "Featured",
          imageSrc: "http://img.b2bpic.net/free-vector/gradient-abstract-logo-collection_23-2148158309.jpg",
        },
        {
          id: "p5",
          name: "Architectural Web",
          price: "Featured",
          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=30elkp",
        },
        {
          id: "p6",
          name: "Expressive UX",
          price: "Featured",
          imageSrc: "http://img.b2bpic.net/free-photo/low-angle-woman-posing-outdoors_23-2149988417.jpg",
        },
      ]}
      title="Selected Projects"
      description="A showcase of our individual and joint creative endeavors."
    />
  </div>

  <div id="collaboration" data-section="collaboration">
      <TeamCardSix
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="asymmetric-60-wide-40-narrow"
      useInvertedBackground={false}
      members={[
        {
          id: "m1",
          name: "The Synthesis Project",
          role: "Cross-disciplinary",
          imageSrc: "http://img.b2bpic.net/free-photo/divers-group-people-is-working-office_53876-47122.jpg",
        },
        {
          id: "m2",
          name: "Architectural UI",
          role: "Dev + Art",
          imageSrc: "http://img.b2bpic.net/free-photo/people-working-together-animation-studio_23-2149207963.jpg",
        },
        {
          id: "m3",
          name: "Interactive Fluidity",
          role: "Motion Graphics",
          imageSrc: "http://img.b2bpic.net/free-photo/nobody-artwork-studio-with-creativity-equipment_482257-27218.jpg",
        },
      ]}
      title="Collaboration Zone"
      description="When our worlds collide, we create something entirely new."
    />
  </div>

  <div id="social-proof" data-section="social-proof">
      <SocialProofOne
      textboxLayout="default"
      useInvertedBackground={false}
      names={[
        "Google",
        "Vogue",
        "Apple",
        "Nike",
        "Architectural Digest",
        "Sony",
        "Meta",
      ]}
      title="Trusted by Creative Leaders"
      description="We work with clients who value both structure and spontaneity."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqDouble
      textboxLayout="split"
      useInvertedBackground={false}
      faqs={[
        {
          id: "f1",
          title: "How does the dual style work?",
          content: "We maintain separate workflows until the collaborative intersection, ensuring both our identities remain intact.",
        },
        {
          id: "f2",
          title: "Can I hire only one?",
          content: "Yes, our projects can be commissioned separately or jointly.",
        },
        {
          id: "f3",
          title: "What is the typical process?",
          content: "Initial discovery phase followed by either separate development or unified strategy development.",
        },
      ]}
      title="Common Inquiries"
      description="How to start working with our dual-studio approach."
      faqsAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={false}
      background={{
        variant: "plain",
      }}
      tag="Let's Talk"
      title="Start your journey"
      description="Interested in our technical precision or fluid expressivity? Let's connect."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        {
          title: "Nazar",
          items: [
            {
              label: "Portfolio",
              href: "#",
            },
            {
              label: "Blog",
              href: "#",
            },
          ],
        },
        {
          title: "Marina",
          items: [
            {
              label: "Portfolio",
              href: "#",
            },
            {
              label: "Gallery",
              href: "#",
            },
          ],
        },
        {
          title: "Studio",
          items: [
            {
              label: "Collaboration",
              href: "#",
            },
            {
              label: "Contact",
              href: "#contact",
            },
          ],
        },
      ]}
      logoText="Nazar & Marina"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
