import { useState } from 'react'

export default function NewsletterSection() {
  const [email, setEmail] = useState('')
  const [submitted, setSubmitted] = useState(false)

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault()
    if (email.trim()) {
      setSubmitted(true)
      setEmail('')
    }
  }

  return (
    <section style={{ borderBottom: '3px solid var(--ink)', background: 'var(--paper-2)' }}>
      {/* Outer grid — strip inline padding, use Tailwind */}
      <div
        style={{ display: 'grid', gridTemplateColumns: '1fr 1px 1fr', minHeight: 180 }}
        className="mq-stack max-w-7xl mx-auto w-full px-12 max-md:px-5 max-md:grid-cols-1"
      >
        {/* Left: description */}
        <div
          style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}
          className="py-12 pr-12 max-md:py-10 max-md:pr-0"
        >
          <div style={{ fontSize: 26, fontWeight: 900, color: 'var(--ink)', letterSpacing: '-0.5px', marginBottom: 8 }}>
            خبرنامه اندیشکده
          </div>
          <p style={{ fontSize: 13, color: 'var(--ink-3)', fontWeight: 400, lineHeight: 1.75 }}>
            هر هفته: خلاصه تحولات بازار فولاد، گزارش‌های جدید و هشدارهای فوری — مستقیم در صندوق ورودی شما
          </p>
          <div style={{ fontSize: 11, color: 'var(--ink-5)', marginTop: 10 }}>
            ↑ بیش از ۲,۸۰۰ مدیر، مقام دولتی و کارشناس عضو
          </div>
        </div>

        {/* Divider */}
        <div style={{ background: 'var(--rule-thin)' }} className="max-md:hidden" />

        {/* Right: form */}
        <div
          style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 10 }}
          className="py-12 pl-12 max-md:pt-0 max-md:pb-10 max-md:pl-0"
        >
          {submitted ? (
            <div style={{ fontSize: 15, color: 'var(--green-ink)', fontWeight: 600, padding: '12px 0' }}>
              ✓ عضویت شما با موفقیت ثبت شد. از همراهی شما متشکریم.
            </div>
          ) : (
            <form onSubmit={handleSubmit} style={{ display: 'flex', gap: 0 }}>
              <label htmlFor="nl-email" style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden', clip: 'rect(0,0,0,0)' }}>
                ایمیل سازمانی شما
              </label>
              <input
                id="nl-email"
                type="email"
                value={email}
                onChange={e => setEmail(e.target.value)}
                placeholder="ایمیل سازمانی شما"
                required
                autoComplete="email"
                style={{
                  flex: 1,
                  padding: '12px 14px',
                  border: '1px solid var(--ink)',
                  borderLeft: 'none',
                  fontFamily: 'Vazir, sans-serif',
                  fontSize: 13,
                  background: 'var(--paper)',
                  color: 'var(--ink)',
                  outline: 'none',
                  borderRadius: 0,
                  minWidth: 0,
                }}
              />
              <button
                type="submit"
                style={{
                  background: 'var(--ink)',
                  color: 'var(--paper)',
                  border: 'none',
                  padding: '12px 24px',
                  fontFamily: 'Vazir, sans-serif',
                  fontSize: 12,
                  fontWeight: 700,
                  cursor: 'pointer',
                  whiteSpace: 'nowrap',
                  borderRadius: 0,
                  letterSpacing: '0.5px',
                  flexShrink: 0,
                }}
              >
                عضویت رایگان
              </button>
            </form>
          )}
          <p style={{ fontSize: 10, color: 'var(--ink-5)' }}>اطلاعات شما محرمانه است و فروخته نمی‌شود</p>
        </div>
      </div>
    </section>
  )
}
