"use client"
import Header from '@/components/Header';
import Swiper from '@/components/Swiper';
import { Grid, Typography, Divider } from '@mui/material';
import Image from 'next/image';
import { useState, useEffect } from 'react';

const HARDWARES = [
  { title: '2000w laser-beam welding machine', imageUrl: '/imgs/pc/pack/1.png' },
  { title: '5000A resistance welding machine', imageUrl: '/imgs/pc/pack/2.png' },
  { title: 'Numerical control machine', imageUrl: '/imgs/pc/pack/3.png' },
  { title: '5V 60A', imageUrl: '/imgs/pc/pack/4.png' },
  { title: '5V3A', imageUrl: '/imgs/pc/pack/5.png' },
  { title: '100V/120A', imageUrl: '/imgs/pc/pack/6.png' },
  { title: 'Oscilloscope', imageUrl: '/imgs/pc/pack/7.png' }
];

const PackProduct = () => {
  const [equipSlide, setEquipSlide] = useState(0);
  const [isMobile, setIsMobile] = useState(false);

  useEffect(() => {
    const checkIfMobile = () => {
      setIsMobile(window.innerWidth < 768);
    };

    checkIfMobile();
    window.addEventListener('resize', checkIfMobile);

    return () => {
      window.removeEventListener('resize', checkIfMobile);
    };
  }, []);

  useEffect(() => {
    const interval = setInterval(() => {
      setEquipSlide((currentSlide) => (currentSlide + 1) % HARDWARES.length);
    }, 2000);

    return () => clearInterval(interval);
  }, []);

  return (
    <>
      <Header />
      <Image
        layout="responsive"
        className='block'
        width={1200}
        height={350}
        objectFit="cover"
        src={!isMobile ? "/imgs/pc/pack/banner.jpg" : "/mobile/banner-pack.png"}
        alt="Pack Product Banner"
      />
      <div className="font-weight-bold leading-[30px] text-white bg-[url('/imgs/pc/common/bg.png')] p-4 sm:p-8">
        We are proud to introduce our PACK product to you. As a leader in the market application of scientific research projects, we focus on transforming scientific achievements into practical market applications. We provide a variety of cases to meet different project requirements, such as fast-charging mobile power supplies, smart flashlights, low-speed vehicles, and small-scale energy storage. We are committed to successfully applying the results of scientific research projects to the market and providing innovative solutions for our customers."
      </div>

      <div className="p-8">
        <div className="mb-8 text-primary-blue  text-center text-4xl  mb-sm-6">
          <b>Pack Hardware</b>
        </div>
        {isMobile ? (
          // Mobile View
          <div className="flex flex-col items-center">
            {HARDWARES.map((hardware, index) => (
              <div key={hardware.title} className={index === equipSlide ? 'block' : 'hidden'}>
                <img src={hardware.imageUrl} alt={hardware.title} className="mb-2" />
                <div className="text-center">{hardware.title}</div>
              </div>
            ))}
          </div>
        ) : (
          <Swiper list={HARDWARES} />
        )}
      </div>
      <div className="p-8 bg-grey-lighten-5">
        <div className="mb-4 mb-sm-16 text-primary-blue  text-4xl text-center ">
          <b>Succeed Case</b>
        </div>
        <Grid container spacing={2} className="mb-8">
          <Grid item xs={12} sm={8}>
            <Image src="/imgs/pc/pack/8.png" alt="Case 8" layout="responsive" width="1200" height="358" objectFit="cover" />
          </Grid>
          <Grid item xs={12} sm={4} className="flex items-center justify-center">
            <Typography variant="subtitle1" className="text-justify font-medium text-gray-800">
              Canrd helps our customer to accomplish the requirement from PET current collector to power bank;
            </Typography>
          </Grid>
        </Grid>

        <Divider className="my-8 sm:my-16" />

        <Grid container spacing={2} className="mb-16">
          <Grid item xs={12} sm={4} className="flex items-center justify-center">
            <Typography variant="body1" className="text-justify font-medium text-gray-800">
              <p className="mb-3">
                1. Canrd helps our customer to accomplish the requirement from sodium cathode to standard car;
              </p>
              <p>
                2. Canrd is pleased to be the bridge between new material to cell and even to terminal application product which can accelerate the R&amp;D development;
              </p>
            </Typography>
          </Grid>
          <Grid item xs={12} sm={8}>
            <Image src="/imgs/pc/pack/9.png" alt="Case 9" layout="responsive" width="1200" height="358" objectFit="cover" />
          </Grid>
        </Grid>
      </div>
    </>
  );
}

export default PackProduct