"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
import FooterBaseCard from '@/components/sections/footer/FooterBaseCard';
import HeroCarouselLogo from '@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import TeamCardFive from '@/components/sections/team/TeamCardFive';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="hover-bubble"
        defaultTextAnimation="reveal-blur"
        borderRadius="soft"
        contentWidth="compact"
        sizing="largeSmallSizeLargeTitles"
        background="grid"
        cardStyle="gradient-radial"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="glass"
        headingFontWeight="semibold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleCentered
      navItems={[
        { name: "About", id: "about" },
        { name: "Skills", id: "skills" },
        { name: "Projects", id: "projects" },
        { name: "Experience", id: "experience" },
        { name: "Contact", id: "contact" },
      ]}
      brandName="Sion Kim"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroCarouselLogo
      logoText="Sion Kim"
      description="Web Publisher & Frontend UI Specialist. Building scalable, responsive, and user-focused digital interfaces for enterprise success."
      buttons={[
        { text: "View Projects", href: "#projects" },
        { text: "Contact", href: "#contact" },
      ]}
      slides={[
        { imageSrc: "http://img.b2bpic.net/free-photo/professional-editor-uses-ai-powered-software-pc-reels-creative-office_482257-126981.jpg", imageAlt: "Hero slide 1" },
        { imageSrc: "http://img.b2bpic.net/free-photo/programmer-writes-code-laptop-screen-while-apartment-office-using-java_482257-87273.jpg", imageAlt: "Hero slide 2" },
        { imageSrc: "http://img.b2bpic.net/free-photo/front-view-desk-concept-with-copy-space_23-2148459730.jpg", imageAlt: "Hero slide 3" },
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <InlineImageSplitTextAbout
      heading={[{ type: "text", content: "Detail-Oriented Frontend Specialist" }]}
      useInvertedBackground={false}
      buttons={[{ text: "Learn More", href: "#" }]}
    />
  </div>

  <div id="skills" data-section="skills">
      <FeatureCardSixteen
      title="Technical Competence"
      description="Enterprise-ready skill set for modern digital implementation."
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      positiveCard={{ items: ["Semantic HTML5", "Modern CSS Architecture", "Performance Optimization"] }}
      negativeCard={{ items: ["Browser Incompatibility", "Heavy Dependency Loads", "Unmaintained Code"] }}
    />
  </div>

  <div id="projects" data-section="projects">
      <ProductCardFour
      title="Enterprise Case Studies"
      description="Selected projects showcasing clean code and UI craftsmanship."
      animationType="slide-up"
      gridVariant="asymmetric-60-wide-40-narrow"
      textboxLayout="default"
      useInvertedBackground={false}
      products={[
        { id: "p1", name: "Samsung Portal", price: "Publishing Lead", variant: "Enterprise", imageSrc: "http://img.b2bpic.net/free-photo/factory-employee-works-mockup-tablet-executives-discussing-strategies_482257-126500.jpg" },
        { id: "p2", name: "LG Campaign", price: "Implementation", variant: "Marketing", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-measuring-tools-still-life_23-2150440939.jpg" },
      ]}
    />
  </div>

  <div id="workflow" data-section="workflow">
      <MetricCardTwo
      title="Work Process"
      metrics={[
        { id: "m1", value: "Concept", description: "Requirement Analysis & Planning" },
        { id: "m2", value: "Publish", description: "Semantic & Scalable Implementation" },
        { id: "m3", value: "QA", description: "Rigorous Cross-Browser Testing" },
      ]}
      description="Standardized development lifecycle."
      textboxLayout="default"
      useInvertedBackground={false}
      gridVariant="uniform-all-items-equal"
      animationType="slide-up"
    />
  </div>

  <div id="experience" data-section="experience">
      <TeamCardFive
      title="Professional Experience"
      description="Driving UI excellence in major digital organizations."
      animationType="slide-up"
      textboxLayout="default"
      useInvertedBackground={false}
      team={[
        { id: "e1", name: "Senior Web Publisher", role: "Digital Agency" },
        { id: "e2", name: "Frontend Specialist", role: "Enterprise Corp" },
      ]}
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      title="Get in Touch"
      description="Let's discuss how we can work together."
      tag="Collaboration"
      background={{ variant: "animated-grid" }}
      useInvertedBackground={false}
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBaseCard
      logoText="Sion Kim"
      columns={[
        { title: "Navigation", items: [{ label: "Projects", href: "#projects" }, { label: "About", href: "#about" }] },
        { title: "Legal", items: [{ label: "Privacy Policy", href: "#" }] }
      ]}
      copyrightText="© 2025 | Sion Kim"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
