import { useState } from 'react';
import { Button } from '@astryxdesign/core/Button';
import { TextInput } from '@astryxdesign/core/TextInput';
import { Text, Heading } from '@astryxdesign/core/Text';
import { Mail } from 'lucide-react';

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 (
    <div
      style={{
        minHeight: '100vh',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        padding: '24px',
        textAlign: 'center',
        backgroundColor: '#f8fafc',
        fontFamily: 'system-ui, sans-serif'
      }}
    >
      <div style={{ display: 'flex', flexDirection: 'column', gap: '24px', alignItems: 'center', maxWidth: '620px', width: '100%' }}>
        <Logo />
        <Heading level={1} type="display-2">Coming Soon</Heading>
        <Text type="large" color="secondary">Something new is on its way</Text>

        {/* Countdown */}
        <div style={{ display: 'flex', flexDirection: 'row', gap: '16px', alignItems: 'center', justifyContent: 'center', flexWrap: 'wrap' }}>
          {COUNTDOWN.map((c, i) => (
            <div key={c.label} style={{ display: 'flex', flexDirection: 'row', gap: '16px', alignItems: 'center' }}>
              <div
                style={{
                  width: '84px',
                  padding: '16px 0',
                  borderRadius: '12px',
                  backgroundColor: 'rgba(10, 19, 23, 0.08)',
                  border: '1px solid rgba(10, 19, 23, 0.2)'
                }}
              >
                <div style={{ fontSize: '2rem', fontWeight: 800, color: '#0A1317', lineHeight: 1 }}>
                  {String(c.value).padStart(2, '0')}
                </div>
                <div style={{ fontSize: '0.65rem', color: '#64748b', textTransform: 'uppercase', letterSpacing: '1px', marginTop: '4px' }}>
                  {c.label}
                </div>
              </div>
              {i < COUNTDOWN.length - 1 && (
                <div style={{ fontSize: '2rem', fontWeight: 800, color: '#0A1317' }}>:</div>
              )}
            </div>
          ))}
        </div>

        {/* Subscribe */}
        <div style={{ width: '100%', maxWidth: '480px', marginTop: '16px' }}>
          <div style={{ marginBottom: '12px' }}>
            <Text type="body" color="secondary">
              Be the first to be notified when Doormile launches.
            </Text>
          </div>
          <div style={{ display: 'flex', gap: '12px', flexDirection: 'row', alignItems: 'flex-start', flexWrap: 'wrap' }} className="subscribe-row">
            <div style={{ flexGrow: 1, minWidth: '200px' }}>
              <TextInput
                label="Email address"
                isLabelHidden
                type="email"
                placeholder="Enter your email"
                startIcon={<Mail size={16} />}
                value={email}
                onChange={setEmail}
              />
            </div>
            <Button variant="primary" label="Notify Me" onClick={() => {}} />
          </div>
        </div>
      </div>
    </div>
  );
}
