import { useState } from 'react'
import { useTranslation } from 'react-i18next'

const EMAIL = 'support@zday.space'

export default function Contact() {
  const { t } = useTranslation()
  const [copied, setCopied] = useState(false)

  const handleCopy = () => {
    navigator.clipboard.writeText(EMAIL).then(() => {
      setCopied(true)
      setTimeout(() => setCopied(false), 2000)
    })
  }

  return (
    <section id="contact" className="py-24 bg-gradient-to-br from-orange-50 via-white to-amber-50 dark:from-gray-950 dark:via-gray-900 dark:to-orange-950/10">
      <div className="max-w-2xl mx-auto px-4 text-center">
        <h2 className="text-3xl md:text-4xl font-bold text-gray-900 dark:text-white mb-4">
          {t('contact_title')}
        </h2>
        <p className="text-gray-500 dark:text-gray-400 mb-10">
          {t('contact_desc')}
        </p>

        <div className="bg-white dark:bg-gray-900 rounded-2xl p-8 shadow-xl border border-gray-100 dark:border-gray-800">
          <p className="text-xs font-semibold uppercase tracking-wider text-gray-400 dark:text-gray-500 mb-3">
            {t('contact_email_label')}
          </p>
          <div className="flex items-center justify-center gap-3">
            <a href={`mailto:${EMAIL}`}
              className="text-xl md:text-2xl font-bold text-orange-500 hover:text-orange-600 dark:hover:text-orange-400 transition-colors break-all">
              {EMAIL}
            </a>
          </div>
          <button onClick={handleCopy}
            className={`mt-4 inline-flex items-center gap-1.5 px-4 py-2 rounded-xl text-sm font-medium transition-all
              ${copied
                ? 'bg-green-100 dark:bg-green-900/30 text-green-600 dark:text-green-400'
                : 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-300 hover:bg-orange-50 dark:hover:bg-orange-900/20 hover:text-orange-600 dark:hover:text-orange-400'}`}>
            {copied ? (
              <>
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                </svg>
                {t('contact_copied')}
              </>
            ) : (
              <>
                <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
                    d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                </svg>
                {t('contact_copy')}
              </>
            )}
          </button>
        </div>
      </div>
    </section>
  )
}
