// ACT 7 — Contact + Footer

function ActContact({ lang }) {
  const content = window.CONTENT[lang].contact;
  const isRTL = lang === 'ar';
  const { isPhone, isTablet } = useResponsive();
  const [form, setForm] = useState({ name: '', email: '', subject: '', message: '' });
  const [status, setStatus] = useState('idle');
  const [feedback, setFeedback] = useState('');

  const updateField = event => {
    setForm(prev => ({ ...prev, [event.target.name]: event.target.value }));
    if (feedback) setFeedback('');
  };

  const submit = async event => {
    event.preventDefault();
    const payload = {
      name: form.name.trim(),
      email: form.email.trim().toLowerCase(),
      subject: form.subject.trim(),
      message: form.message.trim(),
      lang
    };

    if (
      !payload.name ||
      !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(payload.email) ||
      !payload.subject ||
      payload.message.length < 8
    ) {
      setFeedback(content.error);
      return;
    }

    setStatus('submitting');
    setFeedback('');

    try {
      const response = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });

      if (!response.ok) throw new Error('contact failed');

      setStatus('success');
      setForm({ name: '', email: '', subject: '', message: '' });
      setFeedback(content.successBody);
    } catch {
      setStatus('idle');
      setFeedback(content.serverError);
    }
  };

  const fieldStyle = {
    width: '100%',
    minHeight: 58,
    border: '1px solid rgba(250,250,247,0.18)',
    borderRadius: 0,
    background: 'rgba(8,8,10,0.62)',
    color: 'var(--fg)',
    padding: '0 18px',
    fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-sans)',
    fontSize: isPhone ? 15 : 16,
    outline: 'none',
    direction: isRTL ? 'rtl' : 'ltr',
    textAlign: isRTL ? 'right' : 'left'
  };

  const info = [
    [content.emailLabel, content.email, 'mailto:hello@belgham.com'],
    [content.instagramLabel, content.instagram, 'https://instagram.com/belgham_official'],
    [content.locationLabel, content.location, null]
  ];

  return (
    <section
      id="contact"
      style={{
        position: 'relative',
        overflow: 'hidden',
        padding: isPhone ? '86px 24px' : isTablet ? '12vh 5vw' : '13vh 6vw',
        background: '#07070a',
        borderTop: '1px solid var(--fg-faint)',
        direction: isRTL ? 'rtl' : 'ltr'
      }}
    >
      <img
        src="images/city-bg-fes-tannery.webp"
        alt=""
        style={{
          position: 'absolute',
          inset: 0,
          width: '100%',
          height: '100%',
          objectFit: 'cover',
          opacity: 0.18,
          filter: 'grayscale(0.15) contrast(1.08)'
        }}
      />
      <div style={{
        position: 'absolute',
        inset: 0,
        background: 'radial-gradient(circle at 68% 42%, rgba(233,185,58,0.14), transparent 32%), linear-gradient(90deg, rgba(7,7,10,0.98), rgba(7,7,10,0.78) 45%, rgba(7,7,10,0.96))'
      }} />

      <div style={{
        position: 'relative',
        zIndex: 1,
        maxWidth: 1600,
        margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: isPhone ? '1fr' : isTablet ? '0.95fr 1.05fr' : '0.85fr 1.15fr',
        gap: isPhone ? 48 : isTablet ? '7vw' : '10vw',
        alignItems: 'start'
      }}>
        <div>
          <div className="mono" style={{
            color: 'var(--yellow)',
            fontSize: 10,
            letterSpacing: isRTL ? 0 : '0.24em',
            marginBottom: isPhone ? 22 : 28,
            fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-mono)'
          }}>
            {content.eyebrow}
          </div>
          <h2 style={{
            fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-serif)',
            fontSize: isRTL
              ? (isPhone ? 40 : 'clamp(58px, 6vw, 92px)')
              : (isPhone ? 46 : 'clamp(66px, 7vw, 112px)'),
            lineHeight: isRTL ? 1.05 : 0.92,
            fontWeight: 400,
            marginBottom: isPhone ? 22 : 28,
            maxWidth: 690,
            color: 'var(--fg)'
          }}>
            {content.title}
          </h2>
          <p style={{
            maxWidth: 540,
            color: 'var(--fg-muted)',
            fontSize: isPhone ? 17 : 19,
            lineHeight: 1.75,
            marginBottom: isPhone ? 34 : 52,
            fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-sans)'
          }}>
            {content.body}
          </p>

          <div className="mono" style={{
            color: 'var(--fg-dim)',
            fontSize: 10,
            letterSpacing: isRTL ? 0 : '0.22em',
            marginBottom: 18,
            fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-mono)'
          }}>
            {content.directEyebrow}
          </div>
          <div style={{
            borderTop: '1px solid rgba(250,250,247,0.16)',
            maxWidth: 560
          }}>
            {info.map(([label, value, href]) => (
              <div
                key={label}
                style={{
                  display: 'grid',
                  gridTemplateColumns: isPhone ? '1fr' : '150px 1fr',
                  gap: isPhone ? 6 : 24,
                  padding: '18px 0',
                  borderBottom: '1px solid rgba(250,250,247,0.12)',
                  color: 'var(--fg)'
                }}
              >
                <span className="mono" style={{
                  color: 'var(--fg-dim)',
                  fontSize: 10,
                  letterSpacing: isRTL ? 0 : '0.18em',
                  fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-mono)'
                }}>{label}</span>
                {href ? (
                  <a href={href} style={{
                    color: 'inherit',
                    textDecoration: 'none',
                    direction: 'ltr',
                    unicodeBidi: 'isolate',
                    textAlign: isRTL ? 'right' : 'left'
                  }} data-cursor="hover">
                    {value}
                  </a>
                ) : (
                  <span style={{ color: 'var(--fg-muted)' }}>{value}</span>
                )}
              </div>
            ))}
          </div>
        </div>

        <form
          onSubmit={submit}
          style={{
            borderTop: '1px solid rgba(250,250,247,0.22)',
            borderBottom: '1px solid rgba(250,250,247,0.22)',
            padding: isPhone ? '28px 0' : '36px 0',
            display: 'grid',
            gap: isPhone ? 14 : 16,
            alignSelf: 'center'
          }}
        >
          <div className="mono" style={{
            color: 'var(--yellow)',
            fontSize: 10,
            letterSpacing: isRTL ? 0 : '0.22em',
            marginBottom: 6,
            fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-mono)'
          }}>
            {content.formEyebrow}
          </div>
          <div style={{
            display: 'grid',
            gridTemplateColumns: isPhone ? '1fr' : '1fr 1fr',
            gap: isPhone ? 14 : 16
          }}>
            <input name="name" value={form.name} onChange={updateField} placeholder={content.name} style={fieldStyle} />
            <input name="email" type="email" value={form.email} onChange={updateField} placeholder={content.emailInput} style={{ ...fieldStyle, direction: 'ltr', textAlign: isRTL ? 'right' : 'left' }} />
          </div>
          <input name="subject" value={form.subject} onChange={updateField} placeholder={content.subject} style={fieldStyle} />
          <textarea
            name="message"
            value={form.message}
            onChange={updateField}
            placeholder={content.message}
            rows={isPhone ? 5 : 7}
            style={{
              ...fieldStyle,
              paddingTop: 18,
              resize: 'vertical',
              lineHeight: 1.55
            }}
          />
          <div style={{
            display: 'flex',
            flexDirection: isPhone ? 'column' : 'row',
            alignItems: isPhone ? 'stretch' : 'center',
            justifyContent: 'space-between',
            gap: 18
          }}>
            <button
              type="submit"
              disabled={status === 'submitting' || status === 'success'}
              data-cursor="hover"
              style={{
                minHeight: 58,
                border: '1px solid rgba(250,250,247,0.88)',
                background: status === 'success' ? 'transparent' : 'var(--fg)',
                color: status === 'success' ? 'var(--fg)' : '#07070a',
                padding: '0 28px',
                fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-mono)',
                fontSize: isRTL ? 15 : 11,
                letterSpacing: isRTL ? 0 : '0.2em',
                textTransform: isRTL ? 'none' : 'uppercase',
                cursor: status === 'submitting' ? 'wait' : 'none',
                opacity: status === 'submitting' ? 0.72 : 1
              }}
            >
              {status === 'submitting' ? content.submitting : status === 'success' ? content.successTitle : content.submit}
            </button>
            {feedback && (
              <p style={{
                margin: 0,
                color: status === 'success' ? 'var(--fg-muted)' : '#d8a46d',
                fontSize: isPhone ? 14 : 15,
                lineHeight: 1.55,
                fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-sans)'
              }}>
                {feedback}
              </p>
            )}
          </div>
        </form>
      </div>
    </section>
  );
}

function ActFooter({ lang }) {
  const content = window.CONTENT[lang].footer;
  const isRTL = lang === 'ar';
  const { isPhone, isTablet } = useResponsive();
  const footerColumns = isRTL ? [
    ['المجموعة', ['فاس', 'شفشاون', 'مراكش']],
    ['العلامة', ['الحرفة', 'المعلّمون', 'التغليف']],
    ['المساعدة', ['دليل المقاسات', 'العناية', 'تواصل']]
  ] : [
    ['COLLECTION', ['Fès', 'Chefchaouen', 'Marrakech']],
    ['BRAND', ['The Craft', 'The Maâlems', 'Packaging']],
    ['HELP', ['Size guide', 'Care', 'Contact']]
  ];

  return (
    <footer id="footer" style={{
        padding: isPhone ? '76px 24px 36px' : isTablet ? '10vh 5vw 5vh' : '10vh 6vw 5vh',
        background: 'var(--bg)',
        borderTop: '1px solid var(--fg-faint)'
      }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isPhone ? '1fr 1fr' : isTablet ? '1.35fr 1fr' : '1.35fr 1fr 1fr 1fr 1.1fr',
          gap: isPhone ? '28px 26px' : isTablet ? '44px 7vw' : '4vw',
          maxWidth: 1600,
          margin: '0 auto'
        }}>
          <div style={{ gridColumn: isPhone ? 'auto' : isTablet ? '1 / -1' : 'auto' }}>
            <div style={{
              display: 'flex',
              alignItems: 'center',
              gap: isPhone ? 12 : 16,
              marginBottom: isPhone ? 16 : 24,
              flexDirection: isRTL ? 'row-reverse' : 'row',
              justifyContent: isRTL ? 'flex-end' : 'flex-start'
            }}>
              <img
                src="images/logo-dark.png"
                alt=""
                style={{
                  height: isPhone ? 44 : 58, width: 'auto',
                  filter: 'invert(1)',
                  display: 'block'
                }}
              />
              <span style={{
                color: 'var(--fg)',
                fontFamily: 'var(--font-serif)',
                fontSize: isPhone ? 20 : 28,
                fontWeight: 400,
                letterSpacing: '0.1em',
                lineHeight: 1,
                textTransform: 'none'
              }}>
                Belgham
              </span>
            </div>
            <div className="mono" style={{ color: 'var(--fg-dim)', fontSize: 10, lineHeight: 2 }}>
              {isRTL ? (
                <>
                  <span style={{ fontFamily: 'var(--font-ar)', fontSize: 13 }}>المدينة القديمة، فاس — المغرب</span><br />
                  34.0181°N  5.0078°W
                </>
              ) : (
                <>
                  34.0181°N  5.0078°W<br />
                  MÉDINA DE FÈS, MOROCCO
                </>
              )}
            </div>
          </div>

          {footerColumns.map(([title, items]) => (
            <div key={title}>
              <div style={{
                color: 'var(--fg-dim)',
                marginBottom: 18,
                fontSize: isRTL ? 14 : 10,
                letterSpacing: isRTL ? '0' : '0.2em',
                fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-mono)'
              }}>
                {title}
              </div>
              <ul style={{ listStyle: 'none', padding: 0, display: 'flex', flexDirection: 'column', gap: isPhone ? 10 : 12 }}>
                {items.map(it => (
                  <li key={it}>
                    <a href={it === 'Contact' || it === 'تواصل' ? '#contact' : '#'} style={{
                      color: 'var(--fg)',
                      textDecoration: 'none',
                      fontSize: isPhone ? 15 : 14,
                      fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-sans)'
                    }} data-cursor="hover">{it}</a>
                  </li>
                ))}
              </ul>
            </div>
          ))}

          <div>
            <div style={{
              color: 'var(--fg-dim)',
              marginBottom: 18,
              fontSize: isRTL ? 14 : 10,
              letterSpacing: isRTL ? '0' : '0.2em',
              fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-mono)'
            }}>
              {isRTL ? 'تواصل' : 'CONTACT'}
            </div>
            <div style={{
              display: 'flex',
              flexDirection: 'column',
              gap: 12,
              color: 'var(--fg)',
              fontSize: isPhone ? 14 : 14,
              fontFamily: isRTL ? 'var(--font-ar)' : 'var(--font-sans)'
            }}>
              <a href="mailto:hello@belgham.com" style={{ color: 'inherit', textDecoration: 'none', direction: 'ltr', unicodeBidi: 'isolate', textAlign: isRTL ? 'right' : 'left' }} data-cursor="hover">hello@belgham.com</a>
              <a href="#" style={{ color: 'inherit', textDecoration: 'none', direction: 'ltr', unicodeBidi: 'isolate', textAlign: isRTL ? 'right' : 'left' }} data-cursor="hover">@belgham_official</a>
              <span style={{ color: 'var(--fg-dim)', lineHeight: 1.6 }}>
                {isRTL ? 'فاس، المغرب' : 'Fès, Morocco'}
              </span>
            </div>
          </div>
        </div>

        <div style={{
          display: 'flex',
          flexDirection: isPhone ? 'column' : 'row',
          justifyContent: 'space-between',
          gap: isPhone ? 14 : 0,
          marginTop: isPhone ? 34 : 72,
          paddingTop: isPhone ? 22 : 28,
          borderTop: '1px solid var(--fg-faint)',
          maxWidth: 1600,
          marginLeft: 'auto',
          marginRight: 'auto'
        }}>
          <div className="mono" style={{ color: 'var(--fg-dim)', fontSize: 10 }}>{content.rights}</div>
          <div className="mono" style={{ color: 'var(--fg-dim)', fontSize: 10 }}>{content.tag}</div>
        </div>
    </footer>
  );
}

window.ActContact = ActContact;
window.ActFooter = ActFooter;