import { useState } from 'react';
import { Box, Stack, Typography, TextField, Button } from '@mui/material';

import Logo from '@/components/Logo';

const COUNTDOWN = [
  { label: 'Days', value: 12 },
  { label: 'Hours', value: 8 },
  { label: 'Minutes', value: 45 },
  { label: 'Seconds', value: 30 }
];

export default function ComingSoon() {
  const [email, setEmail] = useState('');

  return (
    <Box
      sx={{
        minHeight: '100vh',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        p: 3,
        textAlign: 'center'
      }}
    >
      <Stack spacing={3} alignItems="center" sx={{ maxWidth: 620, width: '100%' }}>
        <Logo />
        <Typography variant="h2" sx={{ fontWeight: 800, color: 'grey.800' }}>Coming Soon</Typography>
        <Typography variant="body1" color="text.secondary">Something new is on its way</Typography>

        {/* Countdown */}
        <Stack direction="row" spacing={{ xs: 1, sm: 2 }} alignItems="center" justifyContent="center">
          {COUNTDOWN.map((c, i) => (
            <Stack key={c.label} direction="row" spacing={{ xs: 1, sm: 2 }} alignItems="center">
              <Box
                sx={{
                  width: { xs: 64, sm: 84 },
                  py: 2,
                  borderRadius: 2,
                  bgcolor: 'primary.lighter',
                  border: 1,
                  borderColor: 'primary.light'
                }}
              >
                <Typography variant="h2" sx={{ fontWeight: 800, color: 'primary.main', lineHeight: 1 }}>
                  {String(c.value).padStart(2, '0')}
                </Typography>
                <Typography variant="caption" color="text.secondary" sx={{ textTransform: 'uppercase', letterSpacing: 1 }}>
                  {c.label}
                </Typography>
              </Box>
              {i < COUNTDOWN.length - 1 && (
                <Typography variant="h2" sx={{ fontWeight: 800, color: 'primary.main' }}>:</Typography>
              )}
            </Stack>
          ))}
        </Stack>

        {/* Subscribe */}
        <Box sx={{ width: '100%', maxWidth: 480 }}>
          <Typography variant="body2" color="text.secondary" sx={{ mb: 1.5 }}>
            Be the first to be notified when Doormile launches.
          </Typography>
          <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1.5}>
            <TextField
              fullWidth
              size="small"
              type="email"
              placeholder="Enter your email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
            <Button variant="contained" sx={{ whiteSpace: 'nowrap', px: 3 }}>Notify Me</Button>
          </Stack>
        </Box>
      </Stack>
    </Box>
  );
}
