"use client";

import React from "react";
import Container from "@mui/material/Container";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";
import Card from "@mui/material/Card";
import CardContent from "@mui/material/CardContent";
import CardHeader from "@mui/material/CardHeader";
import Button from "@mui/material/Button";
import MailIcon from "@mui/icons-material/Mail";
import SupportIcon from "@mui/icons-material/SupportAgent";
import CodeIcon from "@mui/icons-material/Code";
import WorkIcon from "@mui/icons-material/Work";
import useMediaQuery from "@mui/material/useMediaQuery";
import { useTheme } from "@mui/material/styles";
import ClientLayout from "../components/ClientLayout";

export default function SupportPage() {
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
  const isMedium = useMediaQuery(theme.breakpoints.down('md'));

  const handleEmailClick = () => {
    window.location.href = 'mailto:leonmmcoset@outlook.com';
  };

  return (
    <div>
    <Container maxWidth="lg" sx={{ py: { xs: 8, md: 12 } }}>
      {/* 页面标题 */}
        <Box 
          sx={{ 
            textAlign: 'center', 
            mb: { xs: 8, md: 12 },
            opacity: 0,
            transform: 'translateY(20px)',
            animation: 'fadeInUp 0.8s ease-out forwards'
          }}
        >
          <Typography
            variant={isMobile ? 'h3' : 'h2'}
            component="h1"
            gutterBottom
            sx={{
              fontWeight: 700,
              color: theme.palette.primary.main,
              mb: 2
            }}
          >
            技术支持服务
          </Typography>
          <Typography
            variant="body1"
            sx={{
              maxWidth: '700px',
              margin: '0 auto',
              color: 'text.secondary',
              fontSize: { xs: '1rem', md: '1.1rem' },
              lineHeight: 1.6
            }}
          >
            如果您在使用开源项目时遇到问题，或者需要外包项目开发，我们随时为您提供专业的技术支持
          </Typography>
        </Box>

        {/* 服务介绍卡片 */}
        <Box
          sx={{
            display: 'grid',
            gridTemplateColumns: isMobile 
              ? '1fr' 
              : isMedium 
                ? 'repeat(2, 1fr)' 
                : 'repeat(3, 1fr)',
            gap: { xs: 4, md: 6 },
            mb: { xs: 12, md: 16 },
            '& > *': {
              opacity: 0,
              transform: 'translateY(30px)',
              animation: 'fadeInUp 0.6s ease-out forwards'
            },
            '& > *:nth-child(1)': { animationDelay: '0.2s' },
            '& > *:nth-child(2)': { animationDelay: '0.4s' },
            '& > *:nth-child(3)': { animationDelay: '0.6s' }
          }}
        >
          {/* 支持介绍卡片 */}
          <Card 
            elevation={3} 
            sx={{
              borderRadius: '12px',
              overflow: 'hidden',
              transition: 'all 0.3s ease',
              '&:hover': {
                transform: 'translateY(-8px)',
                boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
                elevation: 5
              }
            }}
          >
            <CardHeader
              avatar={
                <Box sx={{ bgcolor: theme.palette.primary.light, p: 2, borderRadius: '50%' }}>
                  <SupportIcon fontSize="large" color="primary" />
                </Box>
              }
              title="我们的服务"
              titleTypographyProps={{
                variant: 'h6',
                fontWeight: 600
              }}
            />
            <CardContent>
              <Typography variant="body1" paragraph sx={{ lineHeight: 1.6 }}>
                如果您在使用一些开源项目遇到问题，需要帮助或者是外包项目，欢迎联系我们。
              </Typography>
              <Typography variant="body1" paragraph sx={{ lineHeight: 1.6 }}>
                我们将提供最优质的服务，确保您的问题得到及时解决。
              </Typography>
            </CardContent>
          </Card>

          {/* 价格卡片 */}
          <Card 
            elevation={3} 
            sx={{
              borderRadius: '12px',
              overflow: 'hidden',
              transition: 'all 0.3s ease',
              '&:hover': {
                transform: 'translateY(-8px)',
                boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
                elevation: 5
              }
            }}
          >
            <CardHeader
              avatar={
                <Box sx={{ bgcolor: theme.palette.primary.light, p: 2, borderRadius: '50%' }}>
                  <CodeIcon fontSize="large" color="primary" />
                </Box>
              }
              title="支持价格"
              titleTypographyProps={{
                variant: 'h6',
                fontWeight: 600
              }}
            />
            <CardContent>
              <Box sx={{ mb: 2, p: 2, bgcolor: 'primary.main', color: 'white', borderRadius: '8px' }}>
                <Typography variant="body1" paragraph sx={{ fontWeight: 600 }}>
                  普通技术支持：￥20每次
                </Typography>
              </Box>
              <Box sx={{ p: 2, bgcolor: 'primary.light', color: "white", borderRadius: '8px' }}>
                <Typography variant="body1" paragraph sx={{ fontWeight: 600 }}>
                  外包项目：￥40/项目（大型项目￥70/项目）
                </Typography>
              </Box>
            </CardContent>
          </Card>

          {/* 联系卡片 */}
          <Card 
            elevation={3} 
            sx={{
              borderRadius: '12px',
              overflow: 'hidden',
              transition: 'all 0.3s ease',
              '&:hover': {
                transform: 'translateY(-8px)',
                boxShadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
                elevation: 5
              }
            }}
          >
            <CardHeader
              avatar={
                <Box sx={{ bgcolor: theme.palette.primary.light, p: 2, borderRadius: '50%' }}>
                  <MailIcon fontSize="large" color="primary" />
                </Box>
              }
              title="联系我们"
              titleTypographyProps={{
                variant: 'h6',
                fontWeight: 600
              }}
            />
            <CardContent>
              <Typography variant="body1" paragraph sx={{ lineHeight: 1.6, mb: 3 }}>
                如有需求请通过以下方式联系我们，我们会尽快回复您的咨询。
              </Typography>
              <Button
                variant="contained"
                startIcon={<MailIcon />}
                onClick={handleEmailClick}
                fullWidth
                sx={{
                  py: 1.5,
                  borderRadius: '8px',
                  fontWeight: 600,
                  transition: 'all 0.3s ease',
                  '&:hover': {
                    transform: 'translateY(-2px)',
                    boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
                  }
                }}
              >
                发送邮件咨询
              </Button>
              <Typography variant="body2" color="text.secondary" align="center" sx={{ mt: 2 }}>
                leonmmcoset@outlook.com
              </Typography>
            </CardContent>
          </Card>
        </Box>

        {/* 服务流程部分 */}
        <Box 
          sx={{ 
            textAlign: 'center',
            mb: { xs: 8, md: 12 }
          }}
        >
          <Typography
            variant={isMobile ? 'h4' : 'h3'}
            component="h2"
            gutterBottom
            sx={{
              fontWeight: 700,
              mb: 8,
              color: theme.palette.primary.main
            }}
          >
            服务流程
          </Typography>
          
          <Box
            sx={{
              display: 'flex',
              flexDirection: isMobile ? 'column' : 'row',
              justifyContent: 'space-around',
              alignItems: isMobile ? 'center' : 'flex-start',
              gap: { xs: 6, md: 4 },
              '& > *': {
                opacity: 0,
                transform: 'translateY(30px)',
                animation: 'fadeInUp 0.6s ease-out forwards'
              },
              '& > *:nth-child(1)': { animationDelay: '0.2s' },
              '& > *:nth-child(2)': { animationDelay: '0.4s' },
              '& > *:nth-child(3)': { animationDelay: '0.6s' },
              '& > *:nth-child(4)': { animationDelay: '0.8s' }
            }}
          >
            {[1, 2, 3, 4].map((step) => {
              // 确保stepData始终有值
              const getStepData = (stepNum: number) => {
                const data = {
                  1: { title: '提交需求', icon: <MailIcon /> },
                  2: { title: '确认方案', icon: <CodeIcon /> },
                  3: { title: '执行服务', icon: <WorkIcon /> },
                  4: { title: '完成交付', icon: <SupportIcon /> }
                };
                return data[stepNum as keyof typeof data] || { title: '', icon: <SupportIcon /> };
              };
              
              const stepData = getStepData(step);
               
              return (
                <Box
                  key={step}
                  sx={{
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center',
                    maxWidth: '200px',
                    textAlign: 'center'
                  }}
                >
                  <Box
                    sx={{
                      width: 80,
                      height: 80,
                      borderRadius: '50%',
                      bgcolor: theme.palette.primary.light,
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      mb: 3,
                      position: 'relative',
                      '&::before': {
                        content: `"${step}"`,
                        position: 'absolute',
                        top: '-12px',
                        right: '-12px',
                        width: 32,
                        height: 32,
                        borderRadius: '50%',
                        bgcolor: theme.palette.primary.main,
                        color: 'white',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        fontWeight: 'bold',
                        fontSize: '1rem'
                      }
                    }}
                  >
                    {React.cloneElement(stepData.icon as React.ReactElement<{ fontSize?: 'small' | 'medium' | 'large', color?: 'primary' | 'secondary' }>, { 
                      fontSize: "large", 
                      color: "primary" 
                    })}
                  </Box>
                  <Typography variant="h6" sx={{ fontWeight: 600, mb: 1 }}>
                    {stepData.title}
                  </Typography>
                  <Typography variant="body2" color="text.secondary">
                    {step === 1 && '通过邮件描述您的技术问题或外包需求'}
                    {step === 2 && '我们确认服务细节和价格'}
                    {step === 3 && '专业团队为您提供技术支持或开发服务'}
                    {step === 4 && '完成服务并确保您满意'}
                  </Typography>
                </Box>
              );
            })}
          </Box>
        </Box>

        {/* CTA 区域 */}
        <Box
          sx={{
            textAlign: 'center',
            p: { xs: 6, md: 10 },
            bgcolor: theme.palette.primary.main,
            color: 'white',
            borderRadius: '16px',
            opacity: 0,
            transform: 'translateY(30px)',
            animation: 'fadeInUp 0.8s ease-out 1s forwards'
          }}
        >
          <Typography
            variant={isMobile ? 'h4' : 'h3'}
            component="h2"
            gutterBottom
            sx={{
              fontWeight: 700,
              mb: 4
            }}
          >
            准备好获取技术支持了吗？
          </Typography>
          <Typography variant="body1" sx={{ mb: 6, fontSize: { xs: '1rem', md: '1.1rem' } }}>
            联系我们，让专业的技术团队为您解决问题
          </Typography>
          <Button
            variant="contained"
            startIcon={<MailIcon />}
            onClick={handleEmailClick}
            sx={{
              bgcolor: 'white',
              color: theme.palette.primary.main,
              px: 6,
              py: 1.5,
              borderRadius: '8px',
              fontWeight: 700,
              fontSize: '1.1rem',
              transition: 'all 0.3s ease',
              '&:hover': {
                bgcolor: 'rgba(255,255,255,0.9)',
                transform: 'translateY(-3px)',
                boxShadow: '0 10px 25px -5px rgba(0, 0, 0, 0.2)'
              }
            }}
          >
            立即联系
          </Button>
        </Box>
    </Container>
      <style jsx global>{`
        @keyframes fadeInUp {
          from {
            opacity: 0;
            transform: translateY(30px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
      `}</style>
      </div>
  );
}