const WHATSAPP_NUMBER = '5491133720000';

function Contact({ theme, t, contactRef }) {
  const [form, setForm] = React.useState({ name: '', email: '', interest: t.contact.interests[0], message: '' });
  const [sent, setSent] = React.useState(false);

  const submit = (e) => {
    e.preventDefault();
    const greet = t.ui.whatsappGreet || '¡Hola La Salsera!';
    const intro = t.ui.whatsappIntro || 'Soy';
    const interest = t.ui.whatsappInterest || 'Me interesa';
    const emailLabel = t.ui.whatsappEmail || 'mi email';
    const lines = [
    `${greet} 👋`,
    ``,
    `${intro} ${form.name}.`,
    `${interest}: ${form.interest}.`];

    if (form.message.trim()) {
      lines.push(``, form.message.trim());
    }
    lines.push(``, `(${emailLabel}: ${form.email})`);
    const text = encodeURIComponent(lines.join('\n'));
    const url = `https://wa.me/${WHATSAPP_NUMBER}?text=${text}`;
    window.open(url, '_blank', 'noopener,noreferrer');
    setSent(true);
    setTimeout(() => setSent(false), 4000);
  };

  return (
    <section id="contact" ref={contactRef} style={{
      background: theme.bg, color: theme.ink,
      padding: '120px 28px',
      borderTop: `1px solid ${theme.line}`
    }}>
      <div style={{ maxWidth: '1400px', margin: '0 auto' }}>
        <div style={{ marginBottom: '60px' }}>
          <Kicker theme={theme}>{t.contact.kicker}</Kicker>
          <DisplayText theme={theme}>{t.contact.title}</DisplayText>
        </div>

        <div className="ls-contact-grid ls-two-col" style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '2px',
          background: theme.line,
          border: `1px solid ${theme.line}`,
          borderRadius: theme.radius, overflow: 'hidden'
        }}>
          {/* Location */}
          <div style={{ background: theme.card, padding: '40px' }}>
            <div style={{ fontFamily: theme.mono, fontSize: '11px', letterSpacing: '0.14em', textTransform: 'uppercase', color: theme.ink2, marginBottom: '12px' }}>
              {t.ui.addressLabel}
            </div>
            <div style={{
              fontFamily: theme.display,
              fontStyle: theme.displayItalic ? 'italic' : 'normal',
              fontWeight: theme.displayWeight,
              fontSize: '36px', letterSpacing: '-0.025em', lineHeight: 1.05,
              whiteSpace: 'pre-line', marginBottom: '28px'
            }}>{t.contact.address}</div>

            <div style={{
              aspectRatio: '16/10',
              borderRadius: theme.radius,
              overflow: 'hidden',
              border: `1px solid ${theme.line}`,
              background: theme.bg2
            }}>
              <iframe
                title="La Salsera — Yatay 961, Almagro"
                src="https://www.google.com/maps?q=Yatay+961,+Almagro,+Buenos+Aires&hl=es&z=16&output=embed"
                width="100%"
                height="100%"
                style={{ border: 0, display: 'block', filter: theme.placeholderMode === 'stripes-dark' ? 'invert(0.92) hue-rotate(180deg)' : 'none' }}
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                allowFullScreen>
              </iframe>
            </div>

            <div style={{ marginTop: '24px' }}>
              <div style={{ fontFamily: theme.mono, fontSize: '11px', letterSpacing: '0.14em', textTransform: 'uppercase', color: theme.ink2, marginBottom: '8px' }}>
                {t.contact.hoursTitle}
              </div>
              <div style={{ fontFamily: theme.body, fontSize: '16px' }}>{t.contact.hoursLine}</div>
            </div>

            <div style={{ marginTop: '24px', display: 'flex', gap: '12px', flexWrap: 'wrap', alignItems: 'center' }}>
              {[
              { name: 'WhatsApp',  icon: 'assets/social/whatsapp.png',  url: 'https://wa.me/message/LNRZZI7DNWANB1' },
              { name: 'Instagram', icon: 'assets/social/instagram.png', url: 'https://www.instagram.com/lasalseracom/' },
              { name: 'Facebook',  icon: 'assets/social/facebook.png',  url: 'https://www.facebook.com/lasalsera.multiespacioafrolatino' },
              { name: 'YouTube',   icon: 'assets/social/youtube.png',   url: 'https://www.youtube.com/user/lasalseracom' },
              { name: 'TikTok',    icon: 'assets/social/tiktok.png',    url: 'https://www.tiktok.com/@lasalseracom' }].
              map((s) =>
              <a key={s.name} href={s.url} target="_blank" rel="noopener noreferrer" aria-label={s.name} title={s.name} style={{
                width: '44px', height: '44px',
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                borderRadius: '50%',
                background: '#fff',
                border: `1px solid ${theme.line}`,
                overflow: 'hidden',
                transition: 'transform 0.2s ease',
                textDecoration: 'none',
              }}
                onMouseEnter={(e) => e.currentTarget.style.transform = 'scale(1.08)'}
                onMouseLeave={(e) => e.currentTarget.style.transform = 'none'}
              >
                <img src={s.icon} alt={s.name} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
              </a>
              )}
            </div>
          </div>

          {/* Form */}
          <div style={{ background: theme.card, padding: '40px' }}>
            <div style={{
              fontFamily: theme.display,
              fontStyle: theme.displayItalic ? 'italic' : 'normal',
              fontWeight: theme.displayWeight,
              fontSize: '36px', letterSpacing: '-0.025em', lineHeight: 1.05,
              marginBottom: '10px'
            }}>{t.contact.formTitle}</div>
            <p style={{
              fontFamily: theme.body, fontSize: '15px', lineHeight: 1.5,
              margin: '0 0 28px', color: theme.ink2, textWrap: 'pretty'
            }}>{t.contact.formLead}</p>

            <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: '14px' }}>
              <Field label={t.contact.fields.name} theme={theme}>
                <input required value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })}
                style={inputStyle(theme)} />
              </Field>
              <Field label={t.contact.fields.email} theme={theme}>
                <input required type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })}
                style={inputStyle(theme)} />
              </Field>
              <Field label={t.contact.fields.interest} theme={theme}>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
                  {t.contact.interests.map((opt) => {
                    const active = form.interest === opt;
                    return (
                      <button type="button" key={opt} onClick={() => setForm({ ...form, interest: opt })}
                      style={{
                        padding: '8px 14px',
                        background: active ? theme.accent : 'transparent',
                        color: active ? theme.bg : theme.ink,
                        border: `1px solid ${active ? theme.accent : theme.line}`,
                        borderRadius: theme.radius,
                        fontFamily: theme.body, fontSize: '13px',
                        cursor: 'pointer'
                      }}>{opt}</button>);

                  })}
                </div>
              </Field>
              <Field label={t.contact.fields.message} theme={theme}>
                <textarea rows={3} value={form.message} onChange={(e) => setForm({ ...form, message: e.target.value })}
                style={{ ...inputStyle(theme), resize: 'vertical', minHeight: '72px' }} />
              </Field>
              <button type="submit" style={{
                padding: '18px 24px',
                background: sent ? theme.accent2 : theme.ink,
                color: sent ? theme.ink : theme.bg,
                border: 'none', borderRadius: theme.radius,
                fontFamily: theme.body, fontSize: '15px', fontWeight: 600,
                cursor: 'pointer', marginTop: '6px',
                transition: 'background 0.25s ease, color 0.25s ease'
              }}>
                {sent ? '✓ ' + t.contact.sent : t.contact.fields.send + ' →'}
              </button>
            </form>
          </div>
        </div>
      </div>
    </section>);

}

function Field({ label, children, theme }) {
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: '6px' }}>
      <span style={{
        fontFamily: theme.mono, fontSize: '11px', letterSpacing: '0.14em',
        textTransform: 'uppercase', color: theme.ink2
      }}>{label}</span>
      {children}
    </label>);

}

function inputStyle(theme) {
  return {
    padding: '12px 14px',
    background: 'transparent',
    border: `1px solid ${theme.line}`,
    borderRadius: theme.radius,
    fontFamily: theme.body, fontSize: '15px',
    color: theme.ink,
    outline: 'none'
  };
}

function Footer({ theme, t }) {
  return (
    <footer style={{
      background: theme.ink, color: theme.bg,
      padding: '80px 28px 28px'
    }}>
      <div style={{ maxWidth: '1400px', margin: '0 auto' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', gap: '40px', alignItems: 'start',
          paddingBottom: '60px', borderBottom: `1px solid rgba(255,255,255,0.15)`
        }} className="ls-footer-grid">
          <div>
            <div style={{ display: 'flex', alignItems: 'center', marginBottom: '20px' }}>
              <img src="assets/logo-wordmark.png" alt={t.alt.logo} style={{ display: 'block', objectFit: 'contain', height: '64px', width: 'auto', maxWidth: '240px' }} />
            </div>
            <p style={{
              fontFamily: theme.body, fontSize: '15px', lineHeight: 1.5,
              margin: 0, opacity: 0.75, maxWidth: '340px'
            }}>{t.footer.tagline}</p>
          </div>
          <div>
            <div style={{ fontFamily: theme.mono, fontSize: '11px', letterSpacing: '0.14em', textTransform: 'uppercase', opacity: 0.6, marginBottom: '14px' }}>{t.ui.navLabel}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
              {t.footer.links.map((l, i) =>
              <a key={i} href={'#' + ['classes', 'social', 'events', 'about', 'contact'][i]} style={{
                color: theme.bg, textDecoration: 'none', fontFamily: theme.body, fontSize: '15px', opacity: 0.9
              }}>{l}</a>
              )}
            </div>
          </div>
          <div>
            <div style={{ fontFamily: theme.mono, fontSize: '11px', letterSpacing: '0.14em', textTransform: 'uppercase', opacity: 0.6, marginBottom: '14px' }}>{t.ui.contactLabel}</div>
            <div style={{ fontFamily: theme.body, fontSize: '15px', lineHeight: 1.6, opacity: 0.9, display: 'flex', flexDirection: 'column', gap: '8px' }}>
              <a href="https://maps.google.com/?q=Yatay+961,+Almagro,+Buenos+Aires" target="_blank" rel="noopener noreferrer" style={{ color: theme.bg, textDecoration: 'none' }}>
                Yatay 961, CABA ↗
              </a>
              <a href="https://wa.me/message/LNRZZI7DNWANB1" target="_blank" rel="noopener noreferrer" style={{ color: theme.bg, textDecoration: 'none' }}>
                WhatsApp ↗
              </a>
              <a href="https://www.instagram.com/lasalseracom/" target="_blank" rel="noopener noreferrer" style={{ color: theme.bg, textDecoration: 'none' }}>
                Instagram ↗
              </a>
              <a href="https://www.facebook.com/lasalsera.multiespacioafrolatino" target="_blank" rel="noopener noreferrer" style={{ color: theme.bg, textDecoration: 'none' }}>
                Facebook ↗
              </a>
              <a href="https://www.youtube.com/user/lasalseracom" target="_blank" rel="noopener noreferrer" style={{ color: theme.bg, textDecoration: 'none' }}>
                YouTube ↗
              </a>
            </div>
          </div>
        </div>
        <div className="ls-footer-bottom" style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'center',
          paddingTop: '24px', fontFamily: theme.mono, fontSize: '11px',
          letterSpacing: '0.1em', opacity: 0.6
        }}>
          <span>{t.footer.legal}</span>
          <span>{t.ui.tagline2}</span>
        </div>
      </div>
    </footer>);

}

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