// Medway MSS — Contact + Footer (with full legal block, real Togo data)

function Contact({ accent, t, lang }) {
  const isMobile = useIsMobile();
  const [form, setForm] = React.useState({ name: '', org: '', email: '', message: '', website: '' });
  const [status, setStatus] = React.useState('idle'); // 'idle' | 'sending' | 'sent' | 'error'
  const [errorMsg, setErrorMsg] = React.useState('');
  const onChange = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const submit = async (e) => {
    e.preventDefault();
    if (status === 'sending') return;
    setStatus('sending');
    setErrorMsg('');
    try {
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ ...form, lang }),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok || !data.ok) {
        throw new Error(data.error || 'Request failed');
      }
      setStatus('sent');
      setForm({ name: '', org: '', email: '', message: '', website: '' });
      setTimeout(() => setStatus('idle'), 5000);
    } catch (err) {
      setStatus('error');
      setErrorMsg(err && err.message ? err.message : 'Network error');
    }
  };
  const sent = status === 'sent';
  const sending = status === 'sending';

  const inputStyle = {
    width: '100%', boxSizing: 'border-box',
    padding: '14px 0',
    fontFamily: 'Inter, sans-serif', fontSize: 15,
    color: '#fafafa', background: 'transparent',
    border: 'none', borderBottom: '1px solid #404040',
    outline: 'none', transition: 'border-color 150ms ease',
  };
  const labelStyle = {
    fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 600,
    letterSpacing: '0.14em', textTransform: 'uppercase', color: '#a3a3a3',
    display: 'block', marginBottom: 8,
  };

  const infoBlocks = [
    { l: t('contact.info.proc.l'), v: 'hakan@medwaymss.com', sub: t('contact.info.proc.s'), href: 'mailto:hakan@medwaymss.com' },
    { l: t('contact.info.gen.l'), v: 'www.medwaymss.com', sub: t('contact.info.gen.s'), href: 'https://www.medwaymss.com' },
    { l: t('contact.info.tel.l'), v: '+228 90 71 20 20', vsub: '+228 90 06 35 09', sub: t('contact.info.tel.s'), href: 'tel:+22890712020' },
    { l: t('contact.info.addr.l'), v: 'Djidjolé, Avenue des Evala', vsub: 'Immeuble KOUNOUBIE, Lomé', sub: t('contact.info.addr.s') },
    { l: t('contact.info.bank.l'), v: 'Bank Of Africa – Togo', vsub: 'N° 0196001000', sub: t('contact.info.bank.s') },
  ];

  return (
    <section id="contact" data-screen-label="05 Contact" style={{
      padding: isMobile ? '72px 20px' : '120px 32px',
      background: `linear-gradient(135deg, var(--fg-1) 0%, #14261b 62%, #0f3d21 100%)`,
      color: '#fafafa',
      borderTop: '1px solid var(--border)',
    }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '320px 1fr',
          gap: isMobile ? 28 : 64, marginBottom: isMobile ? 44 : 72,
        }}>
          <div>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 600,
              letterSpacing: '0.14em', textTransform: 'uppercase', color: '#a3a3a3',
            }}>
              <span style={{ width: 18, height: 1, background: accent, display: 'inline-block' }} />
              <span>{t('contact.eyebrow')}</span>
            </div>
            <div style={{ marginTop: 16, fontFamily: 'Inter, sans-serif', fontSize: 13, color: '#737373', fontVariantNumeric: 'tabular-nums' }}>
              § 04 / 04
            </div>
          </div>
          <h2 style={{
            margin: 0,
            fontFamily: 'Inter, sans-serif',
            fontSize: 'clamp(28px, 4.6vw, 64px)',
            fontWeight: 500, lineHeight: 1.06, letterSpacing: isMobile ? '-0.02em' : '-0.035em',
            color: '#fafafa', maxWidth: 980,
          }}>
            {t('contact.title.1')}<span style={{ color: '#737373' }}>{t('contact.title.2')}</span>
          </h2>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '320px 1fr',
          gap: isMobile ? 40 : 64, paddingTop: isMobile ? 32 : 48,
          borderTop: '1px solid #2a2a2a',
        }}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
            {infoBlocks.map((c) => (
              <div key={c.l}>
                <div style={{
                  fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 600,
                  letterSpacing: '0.14em', textTransform: 'uppercase', color: '#737373',
                  marginBottom: 8,
                }}>{c.l}</div>
                {c.href ? (
                  <a href={c.href} style={{
                    fontFamily: 'Inter, sans-serif', fontSize: 17, fontWeight: 500,
                    color: '#fafafa', letterSpacing: '-0.01em', textDecoration: 'none',
                    display: 'block',
                  }}>{c.v}</a>
                ) : (
                  <div style={{
                    fontFamily: 'Inter, sans-serif', fontSize: 17, fontWeight: 500,
                    color: '#fafafa', letterSpacing: '-0.01em',
                  }}>{c.v}</div>
                )}
                {c.vsub && (
                  <div style={{
                    fontFamily: 'Inter, sans-serif', fontSize: 15, fontWeight: 500,
                    color: '#d4d4d4', letterSpacing: '-0.005em', marginTop: 2,
                  }}>{c.vsub}</div>
                )}
                <div style={{
                  marginTop: 4,
                  fontFamily: 'Inter, sans-serif', fontSize: 13,
                  color: '#737373',
                }}>{c.sub}</div>
              </div>
            ))}
          </div>

          <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
            <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 24 : 32 }}>
              <div>
                <label style={labelStyle}>{t('form.name')}</label>
                <input value={form.name} onChange={onChange('name')} style={inputStyle} placeholder={t('form.name.ph')} required disabled={sending} />
              </div>
              <div>
                <label style={labelStyle}>{t('form.org')}</label>
                <input value={form.org} onChange={onChange('org')} style={inputStyle} placeholder={t('form.org.ph')} disabled={sending} />
              </div>
            </div>
            <div>
              <label style={labelStyle}>{t('form.email')}</label>
              <input type="email" value={form.email} onChange={onChange('email')} style={inputStyle} placeholder={t('form.email.ph')} required disabled={sending} />
            </div>
            <div>
              <label style={labelStyle}>{t('form.msg')}</label>
              <textarea value={form.message} onChange={onChange('message')} rows={4} style={{ ...inputStyle, resize: 'vertical' }} placeholder={t('form.msg.ph')} disabled={sending} />
            </div>
            {/* Honeypot — bots fill this; humans never see it */}
            <input
              type="text"
              name="website"
              tabIndex="-1"
              autoComplete="off"
              value={form.website}
              onChange={onChange('website')}
              style={{ position: 'absolute', left: '-10000px', width: 1, height: 1, opacity: 0 }}
              aria-hidden="true"
            />
            <div style={{
              display: 'flex', alignItems: isMobile ? 'stretch' : 'center', gap: 12, marginTop: 8,
              flexWrap: 'wrap', flexDirection: isMobile ? 'column' : 'row',
            }}>
              <button type="submit" disabled={sending} style={{
                padding: '14px 22px',
                fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 500,
                color: 'var(--fg-1)', background: '#fafafa', border: 'none',
                borderRadius: 6, cursor: sending ? 'default' : 'pointer',
                opacity: sending ? 0.7 : 1,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
              }}>
                {sent ? t('form.sent') : (sending ? t('form.sending') : t('form.submit'))}
                <I name={sent ? 'check' : (sending ? 'loader' : 'arrow-right')} size={15} stroke={1.75} color="var(--fg-1)" />
              </button>
              <a href="https://wa.me/22890712020" target="_blank" rel="noopener" style={{
                padding: '13px 18px',
                fontFamily: 'Inter, sans-serif', fontSize: 14, fontWeight: 500,
                color: '#fafafa', background: 'transparent',
                border: '1px solid #404040', borderRadius: 6, textDecoration: 'none',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
              }}>
                <I name="message-circle" size={15} stroke={1.75} color="#fafafa" />
                WhatsApp
              </a>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 12, color: '#737373' }}>
                {t('form.reply')}
              </div>
            </div>
            {status === 'error' && (
              <div role="alert" style={{
                fontFamily: 'Inter, sans-serif', fontSize: 13,
                color: '#fca5a5', padding: '10px 14px',
                border: '1px solid #7f1d1d', borderRadius: 6,
                background: 'rgba(127,29,29,0.2)',
              }}>
                {t('form.error')}{errorMsg ? ` — ${errorMsg}` : ''}
              </div>
            )}
          </form>
        </div>
      </div>
    </section>
  );
}

function Footer({ accent, onNav, t }) {
  const isMobile = useIsMobile();
  return (
    <footer style={{
      padding: isMobile ? '44px 20px 32px' : '60px 32px 40px',
      background: 'var(--fg-1)',
      color: '#737373',
      borderTop: '1px solid #2a2a2a',
    }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1.4fr 1fr 1.3fr 1fr',
          gap: isMobile ? 36 : 48,
          paddingBottom: isMobile ? 36 : 48, borderBottom: '1px solid #2a2a2a',
        }}>
          <div>
            <MedwayWordmark height={26} accent={accent} light />
            <div style={{ marginTop: 24, fontFamily: 'Inter, sans-serif', fontSize: 13.5, lineHeight: 1.55, color: '#a3a3a3', maxWidth: 280 }}>
              {t('footer.tag')}
            </div>
          </div>
          <div>
            <div style={{
              fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 600,
              letterSpacing: '0.14em', textTransform: 'uppercase', color: '#737373',
              marginBottom: 18,
            }}>{t('footer.site')}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[['nav.home', 'home'], ['nav.about', 'about'], ['nav.products', 'catalogue'], ['nav.industries', 'industries'], ['nav.contact', 'contact']].map(([k, id]) => (
                <a key={id} href={id === 'catalogue' ? '/catalogue' : `#${id}`} onClick={(e) => {
                  if (id === 'catalogue') return;
                  e.preventDefault();
                  onNav(id);
                }} style={{
                  fontFamily: 'Inter, sans-serif', fontSize: 13.5, color: '#d4d4d4', textDecoration: 'none',
                }}>{t(k)}</a>
              ))}
            </div>
          </div>
          <div>
            <div style={{
              fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 600,
              letterSpacing: '0.14em', textTransform: 'uppercase', color: '#737373',
              marginBottom: 18,
            }}>{t('footer.legal')}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontFamily: 'Inter, sans-serif', fontSize: 12.5, color: '#d4d4d4', fontVariantNumeric: 'tabular-nums' }}>
              <div><span style={{ color: '#737373' }}>Arrêté</span>  N°319/2025/MSHPCSUA/CAB/SG/DGAS/DPML/DP</div>
              <div><span style={{ color: '#737373' }}>RCCM</span>  TG-LFW-01-2024-B12-00035</div>
              <div><span style={{ color: '#737373' }}>NIF</span>  1001900507</div>
              <div><span style={{ color: '#737373' }}>CNSS</span>  182102</div>
            </div>
          </div>
          <div>
            <div style={{
              fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 600,
              letterSpacing: '0.14em', textTransform: 'uppercase', color: '#737373',
              marginBottom: 18,
            }}>{t('footer.hours')}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
              {['footer.hours.weekdays', 'footer.hours.sat', 'footer.hours.sun', 'footer.hours.whatsapp'].map((k) => (
                <div key={k} style={{ fontFamily: 'Inter, sans-serif', fontSize: 13.5, color: '#d4d4d4' }}>{t(k)}</div>
              ))}
            </div>
          </div>
        </div>
        <div style={{
          marginTop: 32,
          display: 'flex', alignItems: isMobile ? 'flex-start' : 'center', justifyContent: 'space-between',
          flexWrap: 'wrap', gap: 16, flexDirection: isMobile ? 'column' : 'row',
          fontFamily: 'Inter, sans-serif', fontSize: 12, color: '#737373',
        }}>
          <div>{t('footer.copy')}</div>
          <div style={{ display: 'flex', gap: isMobile ? 14 : 24, flexWrap: 'wrap' }}>
            <span>{t('footer.privacy')}</span>
            <span>{t('footer.terms')}</span>
            <span>{t('footer.cookies')}</span>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Contact, Footer });