'use client'

import { useI18n } from '@/lib/i18n'

export default function Signup() {
  const { t } = useI18n()

  return (
    <div className="signup">
      <h2>{t('signup.title')}</h2>
      <p>{t('signup.subtitle')}</p>
      <a
        href="https://t.me/official420deals"
        target="_blank"
        rel="noopener noreferrer"
        style={{
          display: 'inline-block',
          marginTop: '20px',
          padding: '12px 24px',
          background: '#0088cc',
          color: '#fff',
          textDecoration: 'none',
          borderRadius: '8px',
          fontSize: '16px',
          fontWeight: '500',
          transition: 'background 0.2s',
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.background = '#006ba3'
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.background = '#0088cc'
        }}
      >
        {t('signup.joinTelegram')}
      </a>
    </div>
  )
}