import { useState } from 'react'
import { Link } from 'react-router-dom'
import { useLang } from '../i18n'
import { Container, Eyebrow } from '../components/ui'

const CONTENT = {
  fr: {
    eyebrow: 'Contact',
    title: 'Donnons vie à vos ambitions',
    lead: 'Une question, un projet ? Écrivez-nous : notre équipe vous répond sous 24 heures.',
    formTitle: 'Écrivez-nous',
    fName: 'Nom complet', fCompany: 'Entreprise', fEmail: 'Email', fSubject: 'Sujet', fMessage: 'Votre message', fSubmit: 'Envoyer le message',
    formNote: 'En soumettant ce formulaire, vous acceptez notre politique de confidentialité.',
    sentTitle: 'Message envoyé !',
    sentBody: 'Merci de votre message. Notre équipe vous recontactera sous 24 heures.',
    sentBack: "Retour à l'accueil",
    lblEmail: 'Email',
    emailNote: 'La voie la plus rapide pour nous joindre.',
    lblLocations: 'Nos implantations',
    lblHours: 'Horaires',
    hours: 'Lun – Ven · 9h – 18h',
    hoursNote: 'Heure locale de chaque bureau.',
  },
  en: {
    eyebrow: 'Contact',
    title: "Let's bring your ambitions to life",
    lead: 'A question, a project? Write to us: our team replies within 24 hours.',
    formTitle: 'Write to us',
    fName: 'Full name', fCompany: 'Company', fEmail: 'Email', fSubject: 'Subject', fMessage: 'Your message', fSubmit: 'Send message',
    formNote: 'By submitting this form, you accept our privacy policy.',
    sentTitle: 'Message sent!',
    sentBody: 'Thank you for your message. Our team will get back to you within 24 hours.',
    sentBack: 'Back to home',
    lblEmail: 'Email',
    emailNote: 'The fastest way to reach us.',
    lblLocations: 'Our locations',
    lblHours: 'Hours',
    hours: 'Mon – Fri · 9am – 6pm',
    hoursNote: 'Local time of each office.',
  },
}

const SUBJECTS = {
  fr: ['Ingénierie financière', 'Ingénierie fiscale', 'Transformation digitale', 'Autre demande'],
  en: ['Financial engineering', 'Tax engineering', 'Digital transformation', 'Other request'],
}

const LOCATIONS = {
  fr: [{ city: 'Cotonou', country: 'Bénin' }, { city: 'Abidjan', country: "Côte d'Ivoire" }, { city: 'Aix-en-Provence', country: 'France' }],
  en: [{ city: 'Cotonou', country: 'Benin' }, { city: 'Abidjan', country: "Côte d'Ivoire" }, { city: 'Aix-en-Provence', country: 'France' }],
}

const labelStyle = { display: 'block', fontSize: 13, fontWeight: 700, color: '#2C3C50', marginBottom: 8 }

export default function Contact() {
  const { lang } = useLang()
  const t = CONTENT[lang]
  const [sent, setSent] = useState(false)

  const onSubmit = (e) => {
    e.preventDefault()
    setSent(true)
  }

  return (
    <div style={{ fontFamily: "'Manrope',sans-serif", background: '#F4F6FA', color: '#0A2540' }}>
      {/* HERO */}
      <section style={{ background: '#F4F6FA' }}>
        <Container style={{ padding: '72px 40px 0' }}>
          <Eyebrow>{t.eyebrow}</Eyebrow>
          <h1 style={{ fontWeight: 800, fontSize: 54, lineHeight: 1.06, letterSpacing: '-.025em', color: '#0A2540', margin: '14px 0 0', maxWidth: 720 }}>
            {t.title}
          </h1>
          <p style={{ fontSize: 20, lineHeight: 1.6, color: '#46566B', maxWidth: 600, margin: '22px 0 0' }}>{t.lead}</p>
        </Container>
      </section>

      {/* FORM + ASIDE */}
      <section style={{ background: '#F4F6FA' }}>
        <Container
          className="mk-two-col"
          style={{ padding: '56px 40px 90px', display: 'grid', gridTemplateColumns: '1.25fr .85fr', gap: 36, alignItems: 'start' }}
        >
          <div style={{ background: '#fff', borderRadius: 22, padding: 42, border: '1px solid rgba(10,37,64,.07)' }}>
            {!sent ? (
              <form onSubmit={onSubmit}>
                <h2 style={{ fontWeight: 800, fontSize: 24, letterSpacing: '-.01em', color: '#0A2540', margin: '0 0 24px' }}>{t.formTitle}</h2>
                <div className="mk-grid-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 18 }}>
                  <div>
                    <label style={labelStyle}>{t.fName}</label>
                    <input type="text" required className="mk-input" />
                  </div>
                  <div>
                    <label style={labelStyle}>{t.fCompany}</label>
                    <input type="text" className="mk-input" />
                  </div>
                </div>
                <div style={{ marginTop: 18 }}>
                  <label style={labelStyle}>{t.fEmail}</label>
                  <input type="email" required className="mk-input" />
                </div>
                <div style={{ marginTop: 18 }}>
                  <label style={labelStyle}>{t.fSubject}</label>
                  <select className="mk-input">
                    {SUBJECTS[lang].map((sub, i) => (
                      <option key={i}>{sub}</option>
                    ))}
                  </select>
                </div>
                <div style={{ marginTop: 18 }}>
                  <label style={labelStyle}>{t.fMessage}</label>
                  <textarea rows={5} required className="mk-input" style={{ resize: 'vertical' }} />
                </div>
                <button type="submit" className="mk-cta-primary" style={{ marginTop: 24, width: '100%', justifyContent: 'center', padding: 16 }}>
                  {t.fSubmit}
                </button>
                <p style={{ fontSize: 13, color: '#8294aa', margin: '16px 0 0', textAlign: 'center' }}>{t.formNote}</p>
              </form>
            ) : (
              <div style={{ textAlign: 'center', padding: '40px 10px' }}>
                <div style={{ width: 64, height: 64, borderRadius: '50%', background: 'rgba(31,138,91,.12)', display: 'flex', alignItems: 'center', justifyContent: 'center', margin: '0 auto' }}>
                  <span style={{ color: '#1F8A5B', fontSize: 30, fontWeight: 800 }}>✓</span>
                </div>
                <h2 style={{ fontWeight: 800, fontSize: 26, color: '#0A2540', margin: '22px 0 0' }}>{t.sentTitle}</h2>
                <p style={{ fontSize: 16, lineHeight: 1.6, color: '#5A6A7E', margin: '12px auto 0', maxWidth: 380 }}>{t.sentBody}</p>
                <Link to="/" style={{ display: 'inline-block', marginTop: 24, fontWeight: 700, fontSize: 15, color: '#0A5C94', textDecoration: 'none' }}>
                  {t.sentBack}
                </Link>
              </div>
            )}
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
            <div style={{ background: '#0A2540', borderRadius: 18, padding: 32 }}>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: '#5BB4E8' }}>{t.lblEmail}</div>
              <a href="mailto:contact@mercanto.biz" style={{ display: 'block', fontWeight: 700, fontSize: 22, color: '#fff', marginTop: 8, textDecoration: 'none' }}>
                contact@mercanto.biz
              </a>
              <p style={{ fontSize: 14, color: 'rgba(255,255,255,.6)', margin: '10px 0 0' }}>{t.emailNote}</p>
            </div>
            <div style={{ background: '#fff', borderRadius: 18, padding: 32, border: '1px solid rgba(10,37,64,.07)' }}>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: '#0A5C94', marginBottom: 18 }}>{t.lblLocations}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
                {LOCATIONS[lang].map((l, i) => (
                  <div key={i} style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
                    <span style={{ width: 8, height: 8, borderRadius: '50%', background: '#D4A017', flex: 'none', transform: 'translateY(-1px)' }} />
                    <div>
                      <div style={{ fontWeight: 700, fontSize: 17, color: '#0A2540' }}>{l.city}</div>
                      <div style={{ fontSize: 14, color: '#5A6A7E' }}>{l.country}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
            <div style={{ background: '#fff', borderRadius: 18, padding: 32, border: '1px solid rgba(10,37,64,.07)' }}>
              <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '.1em', textTransform: 'uppercase', color: '#0A5C94', marginBottom: 10 }}>{t.lblHours}</div>
              <div style={{ fontSize: 16, fontWeight: 600, color: '#0A2540' }}>{t.hours}</div>
              <div style={{ fontSize: 14, color: '#5A6A7E', marginTop: 4 }}>{t.hoursNote}</div>
            </div>
          </div>
        </Container>
      </section>
    </div>
  )
}
