import React, { useState, useEffect } from "react";
import { Box, Grid, Typography } from "@mui/material";
import { Computer, Brush, Code } from "@mui/icons-material"; // Import relevant icons

const expertiseCategories = ["DIGITAL", "DESIGN", "DEVELOPMENT"];

const OurExpertise: React.FC = () => {
  const [currentText, setCurrentText] = useState(expertiseCategories[0]);

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentText((prevText) => {
        const currentIndex = expertiseCategories.indexOf(prevText);
        const nextIndex = (currentIndex + 1) % expertiseCategories.length;
        return expertiseCategories[nextIndex];
      });
    }, 2000);

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

  return (
    <Box
      sx={{
        backgroundColor: "#ffffff",
        color: "#000000",
        minHeight: "100vh",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        padding: "60px 20px",
      }}
    >
      <Typography variant="h3" fontWeight={700} gutterBottom sx={{ color: "#333" }}>
        OUR <span style={{ fontWeight: 300 }}>EXPERTISE</span>
      </Typography>
      <Typography variant="body1" sx={{ color: "#666", textAlign: "center", marginBottom: 3, maxWidth: "800px" }}>
        We combine data insights with design thinking to build strategies and experiences that transform businesses.
      </Typography>
      <Typography variant="h4" fontWeight={700} sx={{ marginBottom: 5, textTransform: "uppercase", color: "#555", fontSize: "3rem" }}>
        {currentText}
      </Typography>
      <Grid container justifyContent="center" sx={{ maxWidth: "1000px", margin: "0 auto" }}>
        {[
          {
            title: "Content Marketing",
            icon: <Computer sx={{ fontSize: 50, color: "#F7931E" }} />, // Digital icon
            bgColor: "#16110f",
            items: [
              "Blog & article writing",
              "Website copy & landing pages",
              "Video content & infographics",
              "Email & newsletter marketing",
            ],
          },
          {
            title: "Web Design & Development",
            icon: <Brush sx={{ fontSize: 50, color: "#F7931E" }} />, // Design icon
            bgColor: "#49332a",
            items: [
              "Custom website design",
              "WordPress & eCommerce development",
              "Speed optimization & mobile-first design",
              "UX/UI improvements",
             
            ],
          },
          {
            title: "DEVELOPMENT",
            icon: <Code sx={{ fontSize: 50, color: "#F7931E" }} />, // Development icon
            bgColor: "#16110f",
            items: [
              "Website & Microsite Development",
              "Mobile Apps & Websites",
              "Content Management Systems (CMS)",
              "Website Maintenance & Security",
              "Ecommerce Solutions",
              "Digital Strategy Consulting",
              "Video Content Creation",
            ],
          },
        ].map((category, index) => (
          <Grid item xs={12} sm={6} md={4} key={index} sx={{ display: "flex" }}>
            <Box
              sx={{
                backgroundColor: category.bgColor,
                flex: 1,
                padding: "40px 20px",
                textAlign: "center",
                boxShadow: "0 4px 10px rgba(0, 0, 0, 0.1)",
                color: "#fff",
                minHeight: "500px",
                display: "flex",
                flexDirection: "column",
                justifyContent: "center",
                alignItems: "center",
              }}
            >
              {category.icon} {/* Render the icon above the title */}
              <Typography variant="h6" fontWeight={700} color="#F7931E" gutterBottom sx={{ marginTop: 2 }}>
                {category.title}
              </Typography>
              {category.items.map((item, i) => (
                <Typography key={i} variant="body2" sx={{ color: "#ddd", marginBottom: 1 }}>
                  {item}
                </Typography>
              ))}
            </Box>
          </Grid>
        ))}
      </Grid>
    </Box>
  );
};

export default OurExpertise;
