"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
import FooterMedia from '@/components/sections/footer/FooterMedia';
import HeroBillboard from '@/components/sections/hero/HeroBillboard';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import TextAbout from '@/components/sections/about/TextAbout';
import { Code, Terminal, Users } from "lucide-react";

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="directional-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="rounded"
        contentWidth="medium"
        sizing="largeSizeMediumTitles"
        background="circleGradient"
        cardStyle="glass-elevated"
        primaryButtonStyle="radial-glow"
        secondaryButtonStyle="glass"
        headingFontWeight="extrabold"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarLayoutFloatingOverlay
      navItems={[
        {
          name: "About",          id: "#about"},
        {
          name: "Experience",          id: "#experience"},
        {
          name: "Projects",          id: "#projects"},
        {
          name: "Contact",          id: "#contact"},
      ]}
      brandName="Kajana Pakirathan"
    />
  </div>

  <div id="hero" data-section="hero">
      <HeroBillboard
      background={{
        variant: "gradient-bars"}}
      title="Kajana Pakirathan"
      description="Computer Science student and aspiring IT Professional. Experienced in insurance IT support, customer service, and full-stack web development."
      buttons={[
        {
          text: "View Projects",          href: "#projects"},
        {
          text: "Contact Me",          href: "#contact"},
      ]}
      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DaH1SYHce2lBKqLdIyk6kjsOeA/uploaded-1778513062007-765ftdjt.png?_wi=1"
      imageAlt="Kajana Pakirathan Profile"
      mediaAnimation="blur-reveal"
      avatars={[
        {
          src: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169856.jpg",          alt: "User experience design"},
        {
          src: "http://img.b2bpic.net/free-photo/close-up-it-professional-using-tablet-building-ai-algorithms_482257-100475.jpg",          alt: "AI algorithm development"},
        {
          src: "http://img.b2bpic.net/free-photo/it-specialist-working-data-center-facility-housing-storage-hardware-close-up_482257-90136.jpg",          alt: "IT data center specialist"},
        {
          src: "http://img.b2bpic.net/free-photo/woman-typing-laptop-sitting-home-with-automation-lighting-system_482257-8729.jpg",          alt: "Automation professional"},
        {
          src: "http://img.b2bpic.net/free-photo/business-chart-visual-graphics-report-concept_53876-125580.jpg",          alt: "Business analytics expert"},
      ]}
      marqueeItems={[
        {
          type: "text",          text: "IT Support"},
        {
          type: "text",          text: "Web Development"},
        {
          type: "text",          text: "Problem Solving"},
        {
          type: "text",          text: "Data Management"},
        {
          type: "text",          text: "Technical Analysis"},
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <TextAbout
      useInvertedBackground={true}
      title="About Me"
      buttons={[
        {
          text: "Download Resume",          href: "#"},
      ]}
    />
  </div>

  <div id="experience" data-section="experience">
      <FeatureCardEight
      textboxLayout="default"
      useInvertedBackground={false}
      features={[
        {
          title: "Trading Assistant - Sainsbury's",          description: "Supported daily shop operations and monitored stock levels across departments, maintaining high efficiency.",          imageSrc: "http://img.b2bpic.net/free-photo/customer-marketing-sales-dashboard-graphics-concept_53876-133831.jpg",          imageAlt: "Customer Marketing Sales Dashboard Graphics Concept"},
        {
          title: "Intern - Howden Insurance",          description: "Managed invoice settlements, accounting records, and transaction data using IBA systems.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DaH1SYHce2lBKqLdIyk6kjsOeA/uploaded-1778513062007-765ftdjt.png?_wi=2",          imageAlt: "Customer Marketing Sales Dashboard Graphics Concept"},
        {
          title: "Trainee IT Support Technician - 21CS",          description: "Resolved hardware and software issues on Windows systems and assisted users with technical support.",          imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169842.jpg?_wi=1",          imageAlt: "Customer Marketing Sales Dashboard Graphics Concept"},
        {
          title: "Waitress & Social Media Assistant - Kachori",          description: "Delivered excellent customer service and managed digital orders/enquiries through social channels.",          imageSrc: "http://img.b2bpic.net/free-photo/closeup-african-american-entrepreneur-analyzing-company-profit_482257-20207.jpg?_wi=1",          imageAlt: "Customer Marketing Sales Dashboard Graphics Concept"},
      ]}
      title="Work Experience"
      description="Professional history spanning IT support, insurance, and retail operations."
    />
  </div>

  <div id="education" data-section="education">
      <FeatureCardEight
      textboxLayout="default"
      useInvertedBackground={true}
      features={[
        {
          title: "BSc (Hons) Computer Science",          description: "University of East London, 2025 – Present",          imageSrc: "http://img.b2bpic.net/free-photo/business-leader-trader-searching-new-investment-solution_482257-116895.jpg",          imageAlt: "Business leader and trader searching for a new investment solution"},
        {
          title: "Cert HE: Computing",          description: "University of Wales Trinity Saint David, 2024 – 2025",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3DaH1SYHce2lBKqLdIyk6kjsOeA/uploaded-1778513062007-765ftdjt.png?_wi=3",          imageAlt: "Business leader and trader searching for a new investment solution"},
        {
          title: "Level 3 Extended Diploma IT",          description: "Newham College, 2023 – 2024",          imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169842.jpg?_wi=2",          imageAlt: "Business leader and trader searching for a new investment solution"},
      ]}
      title="Education"
      description="Academic background in Computer Science and Computing."
    />
  </div>

  <div id="projects" data-section="projects">
      <ProductCardOne
      animationType="slide-up"
      textboxLayout="default"
      gridVariant="three-columns-all-equal-width"
      useInvertedBackground={false}
      products={[
        {
          id: "p1",          name: "Network Implementation",          price: "Cisco Packet Tracer",          imageSrc: "http://img.b2bpic.net/free-photo/male-expert-uses-tablet-with-chroma-key-display-leveraging-dashboards_482257-126212.jpg"},
        {
          id: "p2",          name: "Full-Stack Web App",          price: "HTML, CSS, JS",          imageSrc: "http://img.b2bpic.net/free-photo/representation-user-experience-interface-design_23-2150169842.jpg?_wi=3"},
        {
          id: "p3",          name: "Business Intelligence",          price: "Microsoft Specialist",          imageSrc: "http://img.b2bpic.net/free-photo/closeup-african-american-entrepreneur-analyzing-company-profit_482257-20207.jpg?_wi=2"},
        {
          id: "p4",          name: "Food Safety",          price: "Certified",          imageSrc: "http://img.b2bpic.net/free-photo/close-up-it-professional-using-tablet-building-ai-algorithms_482257-92639.jpg"},
        {
          id: "p5",          name: "Customer Support",          price: "Professional",          imageSrc: "http://img.b2bpic.net/free-photo/person-talking-colleagues-video-call-communication-using-smartphone-business-meeting-businessman-holding-mobile-phone-online-conference-with-workmates-corporate-office_482257-28475.jpg"},
        {
          id: "p6",          name: "Technical Troubleshooting",          price: "System Admin",          imageSrc: "http://img.b2bpic.net/free-photo/still-life-red-thread-connection_23-2149870852.jpg"},
      ]}
      title="Projects & Certifications"
      description="Demonstrating technical proficiency through hands-on development and certifications."
    />
  </div>

  <div id="skills" data-section="skills">
      <MetricCardTwo
      animationType="depth-3d"
      textboxLayout="default"
      useInvertedBackground={true}
      gridVariant="uniform-all-items-equal"
      metrics={[
        {
          id: "m1",          description: "IT Support, Windows, DNS, TCP/IP",          value: "Technical"},
        {
          id: "m2",          description: "HTML/CSS, Web Development",          value: "Programming"},
        {
          id: "m3",          description: "Problem Solving, Communication, Teamwork",          value: "Professional"},
      ]}
      title="Skills"
      description="Technical and Professional competencies."
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={false}
      background={{
        variant: "rotated-rays-static"}}
      tag="Get in touch"
      title="Ready to discuss new opportunities?"
      description="I am open to discuss internships, technical roles, or software engineering positions."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterMedia
      imageSrc="http://img.b2bpic.net/free-photo/person-utilizes-digital-ai-tool-web-interface-green-screen_482257-123088.jpg"
      logoText="Kajana Pakirathan"
      columns={[
        {
          title: "Navigation",          items: [
            {
              label: "About",              href: "#about"},
            {
              label: "Experience",              href: "#experience"},
            {
              label: "Contact",              href: "#contact"},
          ],
        },
        {
          title: "Social",          items: [
            {
              label: "LinkedIn",              href: "https://linkedin.com/in/kajana-pakirathan"},
          ],
        },
      ]}
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
