/* Secao de Contato (#contato) — canais + formulario sem backend */

function Contact() {
  const cfg = window.CODEKID_CONTATO || {};
  const [nome, setNome] = React.useState('');
  const [negocio, setNegocio] = React.useState('');
  const [msg, setMsg] = React.useState('');

  const waNum = (cfg.whatsapp || '').replace(/\D/g, '');
  const email = cfg.email || '';

  const channels = [
    waNum && {
      key: 'wa', label: 'WhatsApp', value: 'Fale agora', color: '#25D366',
      href: 'https://wa.me/' + waNum,
      icon: <path d="M12 2a10 10 0 0 0-8.6 15l-1.4 5 5.1-1.3A10 10 0 1 0 12 2Zm5.3 14.2c-.2.6-1.2 1.2-1.7 1.2-.4 0-1 .1-3.3-.9-2.6-1.1-4.2-3.8-4.3-4-.1-.2-1-1.3-1-2.5s.6-1.7.8-2c.2-.2.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 2c.1.2.1.3 0 .5l-.4.6c-.2.2-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.3 2.4 1.5.2.1.4.1.5-.1l.7-.8c.2-.2.3-.2.6-.1l1.9.9c.3.1.5.2.6.3.1.3.1.6-.1 1.2Z" fill="currentColor"/>
    },
    email && {
      key: 'email', label: 'E-mail', value: email, color: 'var(--cyan)',
      href: 'mailto:' + email,
      icon: <><rect x="3" y="5" width="18" height="14" rx="2" stroke="currentColor" strokeWidth="1.7" fill="none"/><path d="M4 7l8 6 8-6" stroke="currentColor" strokeWidth="1.7" fill="none"/></>
    },
    cfg.instagram && {
      key: 'ig', label: 'Instagram', value: 'Siga a gente', color: '#E1306C',
      href: cfg.instagram,
      icon: <><rect x="4" y="4" width="16" height="16" rx="4.5" stroke="currentColor" strokeWidth="1.7" fill="none"/><circle cx="12" cy="12" r="3.4" stroke="currentColor" strokeWidth="1.7" fill="none"/><circle cx="16.6" cy="7.4" r="1.1" fill="currentColor"/></>
    }
  ].filter(Boolean);

  const submit = (e) => {
    e.preventDefault();
    const texto =
      `Olá! Meu nome é ${nome || '(não informado)'}.` +
      (negocio ? ` Meu negócio: ${negocio}.` : '') +
      (msg ? ` ${msg}` : ' Quero saber mais sobre o CodeKid.');
    if (waNum) {
      window.open('https://wa.me/' + waNum + '?text=' + encodeURIComponent(texto), '_blank', 'noopener');
    } else if (email) {
      window.location.href = 'mailto:' + email +
        '?subject=' + encodeURIComponent('Contato pelo site — ' + (nome || 'CodeKid')) +
        '&body=' + encodeURIComponent(texto);
    }
  };

  return (
    <section id="contato" style={{ padding: '60px 0 40px' }}>
      {/* estilos dos campos escopados na secao (a classe .field so existe no /app) */}
      <style>{`
        #contato input, #contato textarea {
          width: 100%;
          box-sizing: border-box;
          background: rgba(255,255,255,0.04);
          border: 1px solid rgba(255,255,255,0.12);
          border-radius: 10px;
          padding: 13px 14px;
          color: #fff;
          font-size: 14px;
          font-family: 'Inter', sans-serif;
          outline: none;
          transition: border-color .2s, box-shadow .2s;
        }
        #contato textarea { min-height: 110px; resize: vertical; }
        #contato input:focus, #contato textarea:focus {
          border-color: var(--cyan);
          box-shadow: 0 0 0 3px rgba(0,229,255,0.12);
        }
        #contato input::placeholder, #contato textarea::placeholder {
          color: var(--text-faint);
        }
        @media (max-width: 920px) {
          [data-contact] { grid-template-columns: 1fr !important; }
        }
      `}</style>
      <div className="container">
        <div className="panel bracketed reveal" style={{
          padding: '44px 40px', display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 44, alignItems: 'center'
        }} data-contact>

          {/* ESQUERDA — canais */}
          <div>
            <div className="eyebrow" style={{ color: 'var(--purple)', marginBottom: 14 }}>Contato</div>
            <h2 className="display" style={{ fontSize: 'clamp(26px, 2.8vw, 38px)', margin: '0 0 16px', lineHeight: 1.15 }}>
              Vamos colocar seu<br/>negócio <span className="gradient-text">no mapa</span>.
            </h2>
            <p style={{ color: 'var(--text-dim)', fontSize: 14.5, margin: '0 0 26px', maxWidth: 360 }}>
              Fale com a equipe CodeKid. Conte o que seu negócio precisa.
            </p>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {channels.map(c => (
                <a key={c.key} href={c.href} target="_blank" rel="noopener noreferrer" style={{
                  display: 'flex', alignItems: 'center', gap: 14, padding: '13px 15px',
                  borderRadius: 12, textDecoration: 'none',
                  background: 'rgba(255,255,255,0.03)', border: '1px solid rgba(255,255,255,0.08)',
                  transition: 'border-color .2s, background .2s'
                }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = c.color; e.currentTarget.style.background = 'rgba(255,255,255,0.06)'; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(255,255,255,0.08)'; e.currentTarget.style.background = 'rgba(255,255,255,0.03)'; }}>
                  <span style={{
                    width: 42, height: 42, flexShrink: 0, borderRadius: 10, color: c.color,
                    background: `color-mix(in srgb, ${c.color} 14%, transparent)`,
                    border: `1px solid color-mix(in srgb, ${c.color} 35%, transparent)`,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center'
                  }}>
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none">{c.icon}</svg>
                  </span>
                  <span>
                    <span style={{ display: 'block', fontSize: 13.5, fontWeight: 600, color: '#fff' }}>{c.label}</span>
                    <span style={{ display: 'block', fontSize: 12.5, color: 'var(--text-dim)' }}>{c.value}</span>
                  </span>
                </a>
              ))}
            </div>
          </div>

          {/* DIREITA — formulario */}
          <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div>
              <label htmlFor="contato-nome" className="eyebrow" style={{ display: 'block', marginBottom: 7 }}>Seu nome</label>
              <input id="contato-nome" name="nome" className="field" value={nome} onChange={e => setNome(e.target.value)} placeholder="Como podemos te chamar?" required />
            </div>
            <div>
              <label htmlFor="contato-negocio" className="eyebrow" style={{ display: 'block', marginBottom: 7 }}>Seu negócio</label>
              <input id="contato-negocio" name="negocio" className="field" value={negocio} onChange={e => setNegocio(e.target.value)} placeholder="Nome e ramo (ex.: Padaria do Zé)" />
            </div>
            <div>
              <label htmlFor="contato-msg" className="eyebrow" style={{ display: 'block', marginBottom: 7 }}>Mensagem</label>
              <textarea id="contato-msg" name="msg" className="field" value={msg} onChange={e => setMsg(e.target.value)} rows={4}
                placeholder="Conte rapidamente o que você precisa." />
            </div>
            <button type="submit" className="btn btn-primary" style={{ justifyContent: 'center', padding: '13px' }}>
              {waNum ? 'Enviar pelo WhatsApp' : 'Enviar mensagem'}
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
                <path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </button>
            <p style={{ fontSize: 11.5, color: 'var(--text-faint)', textAlign: 'center', margin: 0 }}>
              Ao enviar, abrimos {waNum ? 'seu WhatsApp' : 'seu e-mail'} com a mensagem pronta.
            </p>
          </form>
        </div>
      </div>
    </section>
  );
}

window.Contact = Contact;