"use client";

import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import FooterBase from '@/components/sections/footer/FooterBase';
import HeroSplitKpi from '@/components/sections/hero/HeroSplitKpi';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import MetricCardTwo from '@/components/sections/metrics/MetricCardTwo';
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import TeamCardEleven from '@/components/sections/team/TeamCardEleven';

export default function LandingPage() {
  return (
    <ThemeProvider
        defaultButtonVariant="expand-hover"
        defaultTextAnimation="reveal-blur"
        borderRadius="pill"
        contentWidth="medium"
        sizing="largeSmallSizeLargeTitles"
        background="fluid"
        cardStyle="subtle-shadow"
        primaryButtonStyle="shadow"
        secondaryButtonStyle="solid"
        headingFontWeight="light"
    >
      <ReactLenis root>
  <div id="nav" data-section="nav">
      <NavbarStyleFullscreen
      navItems={[
        {
          name: "Home",          id: "home"},
        {
          name: "Faculties",          id: "about"},
        {
          name: "Departments",          id: "features"},
        {
          name: "Contact",          id: "contact"},
      ]}
      brandName="Hokkaido Information University"
    />
  </div>

  <div id="home" data-section="home">
      <HeroSplitKpi
      background={{
        variant: "gradient-bars"}}
      title="Empowering Future ICT Leaders"
      description="Welcome to Hokkaido Information University. Join us for world-class education in Information Science and Business Administration."
      kpis={[
        {
          value: "2027",          label: "New Department Launch"},
        {
          value: "100%",          label: "Industry Relevance"},
        {
          value: "ICT",          label: "Core Focus Area"},
      ]}
      enableKpiAnimation={true}
      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ngwls2"
      mediaAnimation="slide-up"
      imageAlt="hokkaido university campus"
      avatars={[
        {
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ngwls2",          alt: "Student 1"},
        {
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ngwls2",          alt: "Student 2"},
        {
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ngwls2",          alt: "Student 3"},
        {
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ngwls2",          alt: "Student 4"},
        {
          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=ngwls2",          alt: "Student 5"},
      ]}
      avatarText="Join 5,000+ Students"
      marqueeItems={[
        {
          type: "text",          text: "Innovation"},
        {
          type: "text",          text: "Excellence"},
        {
          type: "text",          text: "Technology"},
        {
          type: "text",          text: "Research"},
        {
          type: "text",          text: "Global"},
      ]}
    />
  </div>

  <div id="about" data-section="about">
      <InlineImageSplitTextAbout
      useInvertedBackground={false}
      heading={[
        {
          type: "text",          content: "Our Faculties"},
        {
          type: "image",          src: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=0yp763",          alt: "university students lecture hall"},
      ]}
    />
  </div>

  <div id="features" data-section="features">
      <FeatureCardOne
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="bento-grid"
      useInvertedBackground={true}
      features={[
        {
          title: "Department of Systems & Information Science",          description: "Analyzing complex systemic structures.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=boo0st",          imageAlt: "software engineering workplace"},
        {
          title: "Department of Business & Information Science",          description: "Bridging business strategy and ICT.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=m6oys2",          imageAlt: "software engineering workplace"},
        {
          title: "Department of Information Science & Engineering (NEW)",          description: "Established in 2027, the future of engineering.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=d2p7ay",          imageAlt: "software engineering workplace"},
        {
          title: "Department of Information Media",          description: "Mastering the digital creative landscape.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=niiwjs",          imageAlt: "software engineering workplace"},
        {
          title: "Department of Medical Information",          description: "Applying data to modern medicine.",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=j6u3v4",          imageAlt: "software engineering workplace"},
      ]}
      title="Departments Overview"
      description="Diverse academic departments focused on information, media, and medical innovation."
    />
  </div>

  <div id="metrics" data-section="metrics">
      <MetricCardTwo
      animationType="slide-up"
      textboxLayout="split"
      gridVariant="bento-grid"
      useInvertedBackground={false}
      metrics={[
        {
          id: "m1",          value: "100+",          description: "Research Projects"},
        {
          id: "m2",          value: "95%",          description: "Graduate Placement"},
        {
          id: "m3",          value: "50+",          description: "International Partners"},
      ]}
      title="Our Academic Impact"
      description="Proven success metrics in information technology research and student excellence."
    />
  </div>

  <div id="team" data-section="team">
      <TeamCardEleven
      animationType="slide-up"
      textboxLayout="split"
      useInvertedBackground={true}
      groups={[
        {
          id: "g1",          groupTitle: "Leadership",          members: [
            {
              id: "mem1",              title: "Prof. Tanaka",              subtitle: "Dean of ICT",              detail: "Leading innovation in systems engineering.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=s3tqrd",              imageAlt: "software engineering workplace"},
            {
              id: "mem2",              title: "Dr. Sato",              subtitle: "Department Chair",              detail: "Specialist in Information Media.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=onv7rw",              imageAlt: "software engineering workplace"},
            {
              id: "mem3",              title: "Dr. Ito",              subtitle: "Medical Data Specialist",              detail: "Advancing medical informatics.",              imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=1cii1d",              imageAlt: "software engineering workplace"},
          ],
        },
      ]}
      title="Expert Faculty"
      description="Our researchers and educators are pioneers in ICT fields."
    />
  </div>

  <div id="faq" data-section="faq">
      <FaqSplitMedia
      textboxLayout="split"
      useInvertedBackground={false}
      faqs={[
        {
          id: "q1",          title: "When does the new department open?",          content: "The new Department of Information Science and Engineering will be established in 2027."},
        {
          id: "q2",          title: "What faculties are available?",          content: "We offer Business Administration, Information Science, Media, and Medical Information."},
        {
          id: "q3",          title: "How do I apply?",          content: "Applications are available through our admissions portal."},
      ]}
      imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/default/no-image.jpg?id=6my0sk"
      title="Frequently Asked Questions"
      description="Learn more about our university, application process, and new departments."
      faqsAnimation="slide-up"
      imageAlt="hokkaido university campus"
      mediaAnimation="slide-up"
    />
  </div>

  <div id="contact" data-section="contact">
      <ContactCenter
      useInvertedBackground={true}
      background={{
        variant: "animated-grid"}}
      tag="Contact Us"
      title="Ready to Start Your Future?"
      description="Get in touch with our admissions team to learn more about HIU programs."
    />
  </div>

  <div id="footer" data-section="footer">
      <FooterBase
      columns={[
        {
          title: "Information",          items: [
            {
              label: "Admissions",              href: "#"},
            {
              label: "Faculties",              href: "#"},
          ],
        },
        {
          title: "Resources",          items: [
            {
              label: "Library",              href: "#"},
            {
              label: "Events",              href: "#"},
          ],
        },
      ]}
      logoText="HIU"
    />
  </div>
      </ReactLenis>
    </ThemeProvider>
  );
}
