/* global React */
const Login = ({ onLogin }) => {
  const [email, setEmail] = useState('kaan.koc@fstravel.com');
  const [pwd, setPwd] = useState('••••••••');
  const [loading, setLoading] = useState(false);
  // The newspaper front page is a 2-column grid with an 84px masthead — both
  // overflow phones (#3). On mobile we shrink the masthead and stack to one
  // column. Matches the app-wide mobile rule (width<=768 or short landscape).
  const isMobile = typeof window !== 'undefined'
    && (window.innerWidth <= 768 || window.innerHeight <= 480);
  const submit = (e) => {
    e && e.preventDefault();
    setLoading(true);
    setTimeout(() => { setLoading(false); onLogin(); }, 600);
  };

  const headlines = [
    {
      kicker: 'Fiyatlama',
      head: 'Belek 5★ stoğu Temmuz için %91\'e ulaştı; masa kalan oda fiyatlarını +%8 yükseltti.',
      sub: 'Antalya yatak stoğu, 2024 temposunun gösterdiğinden erken sıkışıyor.'
    },
    {
      kicker: 'Rakip Seti',
      head: 'Bodrum hâlâ geçen yıla göre −%14 tempoda; Alman EB uzatması bugün gündemde.',
      sub: 'İskonto kademesi €38 ARPU düşüşü olarak modellendi, üç hafta içinde geri kazanılabilir.'
    },
    {
      kicker: 'Uçuşlar',
      head: 'Rusya doluluk oranı Nisan gece uçuşu eklemeleriyle %87,4\'e yükseldi.',
      sub: 'TR–MOW koridorunda yolcu başına gelir €214, ay-bazında +%6,1.'
    }
  ];

  return React.createElement('div', { className: 'login-bg' },
    React.createElement('div', { style: {
      width: 'min(1080px, 92vw)',
      margin: '0 auto',
      position: 'relative'
    }},

      React.createElement('div', { style: {
        textAlign: 'center',
        borderBottom: '4px double var(--ink)',
        paddingBottom: 14,
        marginBottom: 4
      }},
        React.createElement('div', { style: {
          fontSize: isMobile ? 8.5 : 10.5, letterSpacing: isMobile ? '0.14em' : '0.34em',
          textTransform: 'uppercase',
          color: 'var(--text-dim)', fontWeight: 600, marginBottom: 8
        }}, 'Kuruluş 2011  ·  Cilt XII  ·  No. 0505  ·  Antalya'),
        React.createElement('div', { style: {
          fontFamily: 'var(--serif)', fontWeight: 500,
          fontSize: isMobile ? 52 : 84, lineHeight: 1, letterSpacing: '-0.02em',
          color: 'var(--ink)'
        }},
          'Fun ', React.createElement('span', { style: { fontStyle: 'italic', fontWeight: 400 } }, '&'), ' Sun'),
        React.createElement('div', { style: {
          marginTop: 8, fontSize: 11, letterSpacing: '0.32em', textTransform: 'uppercase',
          color: 'var(--red)', fontWeight: 700
        }}, 'Gelir Masası')
      ),

      React.createElement('div', { style: {
        display: 'flex', alignItems: 'center',
        justifyContent: isMobile ? 'center' : 'space-between',
        flexWrap: 'wrap', gap: isMobile ? '2px 10px' : 0,
        borderBottom: '1px solid var(--ink)',
        padding: '7px 2px',
        fontFamily: 'var(--mono)', fontSize: isMobile ? 8.5 : 10,
        letterSpacing: isMobile ? '0.12em' : '0.2em', textTransform: 'uppercase',
        color: 'var(--text-dim)', marginBottom: isMobile ? 22 : 28
      }},
        React.createElement('span', null, 'Salı, 5 Mayıs 2026'),
        React.createElement('span', null, 'Sabah Baskısı'),
        React.createElement('span', { style: { color: 'var(--red)' } }, '● Canlı hat — S3'),
        React.createElement('span', null, 'Fiyat €0 · Yalnız masa kullanımı')
      ),

      React.createElement('div', { style: {
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : '1.4fr 1px 1fr',
        gap: isMobile ? 28 : 36,
        alignItems: 'start'
      }},

        React.createElement('div', null,
          React.createElement('div', { style: {
            fontSize: 9.5, letterSpacing: '0.24em', textTransform: 'uppercase',
            color: 'var(--red)', fontWeight: 700, marginBottom: 6
          }}, 'Bugünün Manşeti'),
          React.createElement('h1', { style: {
            fontFamily: 'var(--serif)', fontWeight: 500,
            fontSize: isMobile ? 38 : 48, lineHeight: 1.04, letterSpacing: '-0.015em',
            margin: '0 0 10px', color: 'var(--ink)'
          }},
            'Her paketi,',
            React.createElement('br'),
            React.createElement('em', { style: { fontWeight: 400 } }, 'her gün,'),
            ' bütün resimle',
            React.createElement('br'),
            'fiyatlayın.'
          ),
          React.createElement('p', { style: {
            fontFamily: 'var(--serif)', fontSize: 16, lineHeight: 1.5,
            color: 'var(--text-dim)', margin: '0 0 22px', maxWidth: '50ch'
          }},
            React.createElement('span', { style: { fontWeight: 700, color: 'var(--ink)' } }, 'ANTALYA — '),
            'Dört yüz seksen bir otel, on üç kaynak pazar, doksan bin uçuş, kırk sekiz bin paket — saatte bir S3\'ten yenilenir, masaya tek terminal olarak iletilir.'
          ),

          React.createElement('div', { style: {
            borderTop: '1px solid var(--rule-soft)',
            display: 'grid', gap: 0
          }},
            headlines.map((h, i) => React.createElement('div', { key: i, style: {
              padding: '14px 0',
              borderBottom: '1px solid var(--rule-soft)',
              display: 'grid', gridTemplateColumns: '32px 1fr', gap: 14
            }},
              React.createElement('div', { style: {
                fontFamily: 'var(--serif)', fontStyle: 'italic',
                fontSize: 28, fontWeight: 400, color: 'var(--red)',
                lineHeight: 1
              }}, String(i + 1).padStart(2, '0')),
              React.createElement('div', null,
                React.createElement('div', { style: {
                  fontSize: 9, letterSpacing: '0.2em', textTransform: 'uppercase',
                  color: 'var(--text-muted)', fontWeight: 700, marginBottom: 3
                }}, h.kicker),
                React.createElement('div', { style: {
                  fontFamily: 'var(--serif)', fontSize: 17, fontWeight: 500,
                  lineHeight: 1.25, color: 'var(--ink)', marginBottom: 2,
                  letterSpacing: '-0.005em'
                }}, h.head),
                React.createElement('div', { style: {
                  fontSize: 11.5, color: 'var(--text-dim)', fontStyle: 'italic'
                }}, h.sub)
              )
            ))
          ),

          React.createElement('div', { style: {
            marginTop: 22, display: 'flex', flexWrap: 'wrap',
            gap: isMobile ? '14px 24px' : 28,
            paddingTop: 14, borderTop: '2px solid var(--ink)'
          }},
            [
              { l: '€1,41Mr', s: '2025 Geliri' },
              { l: '%76', s: 'Ort. Güven' },
              { l: '11 sn', s: 'Medyan Yenileme' },
              { l: '90.236', s: 'İşlenen Uçuş' }
            ].map((s, i) => React.createElement('div', { key: i },
              React.createElement('div', {
                style: {
                  fontFamily: 'var(--serif)', fontSize: 22, fontWeight: 500,
                  color: 'var(--ink)', letterSpacing: '-0.01em', lineHeight: 1
                }}, s.l),
              React.createElement('div', {
                style: {
                  fontSize: 9, letterSpacing: '0.18em', textTransform: 'uppercase',
                  color: 'var(--text-muted)', fontWeight: 600, marginTop: 4
                }}, s.s)
            ))
          )
        ),

        React.createElement('div', { style: { background: 'var(--ink)', alignSelf: 'stretch', display: isMobile ? 'none' : 'block' } }),

        React.createElement('form', { onSubmit: submit, style: { paddingTop: 4 } },
          React.createElement('div', { style: {
            fontSize: 9.5, letterSpacing: '0.28em', textTransform: 'uppercase',
            color: 'var(--red)', fontWeight: 700, marginBottom: 10
          }}, 'Abone Girişi'),
          React.createElement('h2', { style: {
            fontFamily: 'var(--serif)', fontSize: 32, fontWeight: 500,
            margin: '0 0 6px', letterSpacing: '-0.015em', color: 'var(--ink)',
            lineHeight: 1.05
          }},
            'Masaya', React.createElement('br'),
            React.createElement('span', { style: { fontStyle: 'italic', fontWeight: 400 } }, 'giriş.')
          ),
          React.createElement('p', { style: {
            fontFamily: 'var(--serif)', fontSize: 13.5, fontStyle: 'italic',
            color: 'var(--text-dim)', margin: '0 0 22px',
            paddingBottom: 16, borderBottom: '1px solid var(--rule-soft)'
          }}, 'fstravel.com tek oturum açma. Oturumlar masa kapanışında sona erer.'),

          // User identity card
          React.createElement('div', { style: {
            display: 'flex', alignItems: 'center', gap: 12,
            padding: '10px 12px', marginBottom: 18,
            background: 'var(--paper-edge)', borderLeft: '3px solid var(--red)'
          }},
            React.createElement('div', { style: {
              width: 36, height: 36, borderRadius: '50%',
              background: 'var(--ink)', color: 'var(--paper)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'var(--serif)', fontWeight: 500, fontSize: 16
            }}, 'K'),
            React.createElement('div', null,
              React.createElement('div', {
                style: { fontFamily: 'var(--serif)', fontSize: 16, fontWeight: 500,
                  color: 'var(--ink)', lineHeight: 1.1 }
              }, 'Kaan Koç'),
              React.createElement('div', {
                style: { fontSize: 9.5, letterSpacing: '0.2em', textTransform: 'uppercase',
                  fontWeight: 700, color: 'var(--red)', marginTop: 2 }
              }, 'Gelir Direktörü')
            )
          ),

          React.createElement('label', { style: {
            display: 'block', marginBottom: 6,
            fontSize: 9, letterSpacing: '0.2em', textTransform: 'uppercase',
            color: 'var(--text-dim)', fontWeight: 700
          }}, 'E-posta'),
          React.createElement('input', {
            value: email, onChange: e => setEmail(e.target.value),
            style: {
              width: '100%', height: 38, padding: '0 0 6px',
              fontFamily: 'var(--mono)', fontSize: 13,
              border: 'none', borderBottom: '1px solid var(--ink)',
              background: 'transparent', outline: 'none',
              color: 'var(--ink)', marginBottom: 18
            }
          }),

          React.createElement('label', { style: {
            display: 'block', marginBottom: 6,
            fontSize: 9, letterSpacing: '0.2em', textTransform: 'uppercase',
            color: 'var(--text-dim)', fontWeight: 700
          }}, 'Şifre'),
          React.createElement('input', {
            type: 'password',
            value: pwd, onChange: e => setPwd(e.target.value),
            style: {
              width: '100%', height: 38, padding: '0 0 6px',
              fontFamily: 'var(--mono)', fontSize: 13,
              border: 'none', borderBottom: '1px solid var(--ink)',
              background: 'transparent', outline: 'none',
              color: 'var(--ink)', marginBottom: 24
            }
          }),

          React.createElement('button', {
            type: 'submit', disabled: loading,
            style: {
              width: '100%', height: 46, border: 'none', cursor: 'pointer',
              background: loading ? 'var(--text-dim)' : 'var(--ink)',
              color: 'var(--paper)',
              fontFamily: 'var(--sans)', fontSize: 11,
              letterSpacing: '0.32em', textTransform: 'uppercase',
              fontWeight: 700,
              transition: 'background 0.15s ease'
            },
            onMouseEnter: e => !loading && (e.currentTarget.style.background = 'var(--red)'),
            onMouseLeave: e => !loading && (e.currentTarget.style.background = 'var(--ink)')
          }, loading ? 'İletiliyor…' : 'Masaya Gir →'),

          React.createElement('div', { style: {
            marginTop: 18, padding: '12px 14px',
            background: 'var(--paper-edge)',
            fontSize: 11, fontFamily: 'var(--serif)', fontStyle: 'italic',
            color: 'var(--text-dim)', lineHeight: 1.5,
            borderLeft: '2px solid var(--red)'
          }},
            React.createElement('span', { style: { fontStyle: 'normal', fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', fontSize: 9, color: 'var(--ink)' } }, 'Not — '),
            'Kapıda sorun mu? Slack\'te #revenue-help kanalına yazın. Gece editörü 22:00 TRT\'ye kadar ulaşılabilir.'),

          React.createElement('div', { style: {
            marginTop: 22, fontFamily: 'var(--mono)', fontSize: 9.5,
            letterSpacing: '0.16em', textTransform: 'uppercase',
            color: 'var(--text-faint)', textAlign: 'center'
          }}, 'Sürüm v2.4.1 · ' + new Date().toISOString().slice(0, 10) + ' · 11ms ambar gecikmesi')
        )
      ),

      React.createElement('div', { style: {
        marginTop: 36, paddingTop: 14,
        borderTop: '1px solid var(--ink)',
        display: 'flex', justifyContent: 'space-between',
        fontFamily: 'var(--mono)', fontSize: 9.5,
        letterSpacing: '0.18em', textTransform: 'uppercase',
        color: 'var(--text-faint)'
      }},
        React.createElement('span', null, '© Fun & Sun Holiday Group A.Ş.'),
        React.createElement('span', null, 'Tüm Pazarlar · 481 Otel · 90 bin Uçuş'),
        React.createElement('span', null, 'Antalya · İstanbul · İzmir · Bodrum')
      )
    )
  );
};
window.Login = Login;