// WhatsApp floating widget + modal — tema adaptável por prop
// Usage: <WhatsAppWidget theme={{accent, bg, fg, surface, border, radius, font, primary}} lang={lang} content={content} />

function WhatsAppWidget({ theme, lang, content }) {
  const [open, setOpen] = React.useState(false);
  const [form, setForm] = React.useState({ name: '', email: '', phone: '', service: '' });
  const [submitting, setSubmitting] = React.useState(false);
  const t = content.wa;

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!form.name || !form.phone) return;
    setSubmitting(true);
    const msg = encodeURIComponent(
      `${lang === 'pt' ? 'Olá! Sou' : 'Hi! I\'m'} ${form.name}.\n` +
      `${lang === 'pt' ? 'E-mail' : 'Email'}: ${form.email || '—'}\n` +
      `${lang === 'pt' ? 'Interesse' : 'Interest'}: ${form.service || '—'}`
    );
    setTimeout(() => {
      // Placeholder — the real number would go here
      window.open(`https://wa.me/5511975435859?text=${msg}`, '_blank');
      setSubmitting(false);
      setOpen(false);
      setForm({ name: '', email: '', phone: '', service: '' });
    }, 600);
  };

  const T = theme;

  return (
    <>
      {/* Floating button */}
      <button
        onClick={() => setOpen(true)}
        aria-label="WhatsApp"
        style={{
          position: 'fixed',
          right: 24,
          bottom: 24,
          width: 60,
          height: 60,
          borderRadius: 30,
          background: '#25D366',
          border: 'none',
          cursor: 'pointer',
          boxShadow: '0 10px 30px rgba(37,211,102,0.4), 0 2px 8px rgba(0,0,0,0.2)',
          zIndex: 9998,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          transition: 'transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .2s',
        }}
        onMouseEnter={(e) => { e.currentTarget.style.transform = 'scale(1.08)'; }}
        onMouseLeave={(e) => { e.currentTarget.style.transform = 'scale(1)'; }}
      >
        <svg width="30" height="30" viewBox="0 0 24 24" fill="#fff">
          <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
        </svg>
        <span style={{
          position: 'absolute',
          top: -4,
          right: -4,
          width: 14,
          height: 14,
          borderRadius: 7,
          background: '#ef4444',
          border: '2px solid #fff',
          animation: 'auraPulse 2s infinite',
        }} />
      </button>

      {/* Backdrop + Modal */}
      {open && (
        <div
          onClick={() => setOpen(false)}
          style={{
            position: 'fixed',
            inset: 0,
            background: 'rgba(10,10,10,0.55)',
            backdropFilter: 'blur(4px)',
            zIndex: 9999,
            display: 'flex',
            alignItems: 'flex-end',
            justifyContent: 'flex-end',
            padding: 24,
            animation: 'auraFade .2s ease',
          }}
        >
          <div
            onClick={(e) => e.stopPropagation()}
            style={{
              width: 'min(420px, 100%)',
              background: T.surface,
              color: T.fg,
              borderRadius: T.radius || 20,
              border: T.border || 'none',
              overflow: 'hidden',
              marginBottom: 90,
              marginRight: 0,
              boxShadow: '0 30px 80px rgba(0,0,0,0.4)',
              fontFamily: T.font,
              animation: 'auraSlideUp .35s cubic-bezier(.2,.8,.2,1)',
            }}
          >
            {/* Header */}
            <div style={{
              padding: '22px 24px 20px',
              background: T.headerBg || '#25D366',
              color: T.headerFg || '#fff',
              position: 'relative',
            }}>
              <button
                onClick={() => setOpen(false)}
                aria-label="Close"
                style={{
                  position: 'absolute',
                  top: 14,
                  right: 14,
                  width: 28,
                  height: 28,
                  borderRadius: 14,
                  border: 'none',
                  background: 'rgba(255,255,255,0.2)',
                  color: 'inherit',
                  cursor: 'pointer',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  fontSize: 16,
                }}
              >×</button>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor">
                  <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z"/>
                </svg>
                <span style={{ fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', opacity: 0.85, fontWeight: 600 }}>
                  Estúdio Aura
                </span>
              </div>
              <div style={{ fontSize: 17, fontWeight: 600, lineHeight: 1.3 }}>{t.title}</div>
              <div style={{ fontSize: 13, opacity: 0.85, marginTop: 6, lineHeight: 1.45 }}>{t.sub}</div>
            </div>

            {/* Form */}
            <form onSubmit={handleSubmit} style={{ padding: '20px 24px 24px', display: 'flex', flexDirection: 'column', gap: 12 }}>
              <WAField value={form.name} onChange={(v) => setForm({ ...form, name: v })} placeholder={t.name + ' *'} theme={T} required />
              <WAField value={form.email} onChange={(v) => setForm({ ...form, email: v })} placeholder={t.email} theme={T} type="email" />
              <div style={{ display: 'flex', gap: 8 }}>
                <div style={{
                  display: 'flex', alignItems: 'center', gap: 6,
                  padding: '0 12px', height: 46,
                  background: T.inputBg, border: T.inputBorder,
                  borderRadius: T.inputRadius || 10,
                  color: T.fg, fontSize: 14,
                }}>
                  <span style={{ fontSize: 18 }}>🇧🇷</span>
                  <span style={{ opacity: 0.7 }}>+55</span>
                </div>
                <WAField value={form.phone} onChange={(v) => setForm({ ...form, phone: v })} placeholder={t.phone + ' *'} theme={T} type="tel" required style={{ flex: 1 }} />
              </div>
              <WASelect value={form.service} onChange={(v) => setForm({ ...form, service: v })} placeholder={t.service} options={t.services} theme={T} />
              <button
                type="submit"
                disabled={submitting}
                style={{
                  marginTop: 4,
                  padding: '14px 20px',
                  background: T.primary || '#25D366',
                  color: T.primaryFg || '#fff',
                  border: 'none',
                  borderRadius: T.inputRadius || 10,
                  fontSize: 15,
                  fontWeight: 600,
                  cursor: submitting ? 'wait' : 'pointer',
                  fontFamily: T.font,
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  gap: 10,
                  transition: 'transform .15s, opacity .15s',
                  opacity: submitting ? 0.6 : 1,
                }}
                onMouseEnter={(e) => !submitting && (e.currentTarget.style.transform = 'translateY(-1px)')}
                onMouseLeave={(e) => (e.currentTarget.style.transform = 'translateY(0)')}
              >
                {submitting ? '...' : (
                  <>
                    {t.send}
                    <span style={{ fontSize: 18, lineHeight: 1 }}>→</span>
                  </>
                )}
              </button>
            </form>
          </div>
        </div>
      )}
    </>
  );
}

function WAField({ value, onChange, placeholder, theme, type = 'text', required, style }) {
  return (
    <input
      type={type}
      value={value}
      onChange={(e) => onChange(e.target.value)}
      placeholder={placeholder}
      required={required}
      style={{
        height: 46,
        padding: '0 14px',
        background: theme.inputBg,
        border: theme.inputBorder,
        borderRadius: theme.inputRadius || 10,
        fontSize: 14,
        color: theme.fg,
        fontFamily: theme.font,
        outline: 'none',
        width: '100%',
        boxSizing: 'border-box',
        transition: 'border-color .15s',
        ...style,
      }}
      onFocus={(e) => { if (theme.focusBorder) e.target.style.border = theme.focusBorder; }}
      onBlur={(e) => { e.target.style.border = theme.inputBorder; }}
    />
  );
}

function WASelect({ value, onChange, placeholder, options, theme }) {
  return (
    <select
      value={value}
      onChange={(e) => onChange(e.target.value)}
      style={{
        height: 46,
        padding: '0 14px',
        background: theme.inputBg,
        border: theme.inputBorder,
        borderRadius: theme.inputRadius || 10,
        fontSize: 14,
        color: value ? theme.fg : (theme.placeholder || 'rgba(0,0,0,0.4)'),
        fontFamily: theme.font,
        outline: 'none',
        width: '100%',
        appearance: 'none',
        backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='${encodeURIComponent(theme.fg || '#000')}' stroke-width='1.5' fill='none'/%3E%3C/svg%3E")`,
        backgroundRepeat: 'no-repeat',
        backgroundPosition: 'right 14px center',
        paddingRight: 36,
      }}
    >
      <option value="" disabled>{placeholder}</option>
      {options.map((o) => <option key={o} value={o}>{o}</option>)}
    </select>
  );
}

// Global animations for the widget
if (typeof document !== 'undefined' && !document.getElementById('aura-wa-anims')) {
  const s = document.createElement('style');
  s.id = 'aura-wa-anims';
  s.textContent = `
    @keyframes auraPulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.3);opacity:.7} }
    @keyframes auraFade { from{opacity:0} to{opacity:1} }
    @keyframes auraSlideUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
  `;
  document.head.appendChild(s);
}

Object.assign(window, { WhatsAppWidget });