// contact.jsx — Contact form, footer, floating WhatsApp

// ─── CONTACT ─────────────────────────────────────────────────────────────────

function ContactSection({ theme }) {
  const [form, setForm] = useState({ name: '', phone: '', product: 'auto', message: '' });
  const [sent, setSent] = useState(false);
  const set = (k, v) => setForm((f) => ({ ...f, [k]: v }));

  const submit = (e) => {
    e.preventDefault();
    const productName = PRODUCTS.find((p) => p.id === form.product)?.name || 'Seguro';
    const msg = [
      `Olá, sou ${form.name}.`,
      `Tenho interesse em ${productName}.`,
      form.message && `Detalhes: ${form.message}`,
      form.phone && `Meu telefone: ${form.phone}`,
    ].filter(Boolean).join(' ');
    setSent(true);
    setTimeout(() => {
      window.open(wppLink(msg), '_blank', 'noopener,noreferrer');
    }, 250);
  };

  const inputStyle = {
    width: '100%',
    background: 'transparent',
    border: 'none',
    borderBottom: `1px solid ${theme.pageRule}`,
    padding: '14px 0',
    fontFamily: 'var(--font-sans)',
    fontSize: 16,
    color: theme.pageInk,
    outline: 'none',
    transition: 'border-color .2s ease',
  };

  const labelStyle = {
    fontFamily: 'var(--font-sans)', fontSize: 11.5,
    letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 500,
    color: theme.pageMuted, display: 'block', marginBottom: 4,
  };

  return (
    <section id="contato" style={{
      padding: 'clamp(72px, 10vw, 120px) 0',
      background: theme.pageBg, color: theme.pageInk,
      borderTop: `1px solid ${theme.pageRule}`,
    }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 'clamp(40px, 7vw, 96px)' }} className="two-col">
          {/* Left: info */}
          <div>
            <Eyebrow>Contato</Eyebrow>
            <h2 style={{
              fontFamily: 'var(--font-serif)', fontWeight: 400,
              fontSize: 'clamp(32px, 4.4vw, 56px)', lineHeight: 1.05, letterSpacing: '-0.015em',
              margin: '20px 0 0', textWrap: 'pretty',
            }}>
              Fale com a gente. <span style={{ fontStyle: 'italic' }}>De gente para gente.</span>
            </h2>
            <p style={{
              fontFamily: 'var(--font-sans)', fontSize: 16, lineHeight: 1.6,
              color: theme.pageMuted, margin: '24px 0 0', maxWidth: 460, textWrap: 'pretty',
            }}>
              Responda em poucos campos ou chame direto no WhatsApp. Em até 1 dia útil
              um corretor humano retorna com sua cotação.
            </p>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 22, marginTop: 48 }}>
              <ContactRow theme={theme} label="WhatsApp" value={WHATSAPP_DISPLAY} href={wppLink()} cta="abrir conversa" />
              <ContactRow theme={theme} label="Telefone" value={PHONE_DISPLAY} href={`tel:+556733820100`} cta="ligar" />
              <ContactRow theme={theme} label="E-mail" value={EMAIL} href={`mailto:${EMAIL}`} cta="enviar mensagem" />
              <ContactRow theme={theme} label="Endereço" value={ADDRESS} cta="ver no mapa" href="https://maps.google.com/?q=Rua+Eduardo+Santos+Pereira+2189+Campo+Grande+MS" />
            </div>

            <div style={{
              marginTop: 48, padding: 24, borderRadius: 14,
              background: theme.accent + '20', border: `1px solid ${theme.accent}40`,
            }}>
              <div style={{ fontFamily: 'var(--font-sans)', fontSize: 11.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: theme.pageMuted, fontWeight: 500, marginBottom: 8 }}>
                Atendimento
              </div>
              <div style={{ fontFamily: 'var(--font-sans)', fontSize: 14, color: theme.pageInk, lineHeight: 1.5 }}>
                Segunda a sexta<br />
                <span style={{ color: theme.pageMuted }}>8h às 11h30 · 13h às 17h30</span>
              </div>
            </div>
          </div>

          {/* Right: form */}
          <form onSubmit={submit} style={{
            background: theme.cardBg, padding: 'clamp(28px, 4vw, 44px)',
            borderRadius: 18, border: `1px solid ${theme.pageRule}`,
            display: 'flex', flexDirection: 'column', gap: 28,
          }}>
            <div style={{ fontFamily: 'var(--font-serif)', fontSize: 28, lineHeight: 1.1 }}>
              Cotar em <span style={{ fontStyle: 'italic' }}>3 passos</span>.
            </div>

            <div>
              <label style={labelStyle}>Seu nome</label>
              <input style={inputStyle} value={form.name} onChange={(e) => set('name', e.target.value)} placeholder="Como podemos te chamar?" required />
            </div>

            <div>
              <label style={labelStyle}>Telefone / WhatsApp</label>
              <input style={inputStyle} value={form.phone} onChange={(e) => set('phone', e.target.value)} placeholder="(__) ____-____" required />
            </div>

            <div>
              <label style={labelStyle}>Qual seguro?</label>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(110px, 1fr))', gap: 8, marginTop: 8 }}>
                {PRODUCTS.map((p) => {
                  const active = form.product === p.id;
                  return (
                    <button key={p.id} type="button" onClick={() => set('product', p.id)} style={{
                      padding: '12px 8px', borderRadius: 10,
                      border: `1px solid ${active ? theme.accent : theme.pageRule}`,
                      background: active ? theme.accent + '20' : 'transparent',
                      color: theme.pageInk, cursor: 'pointer',
                      fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: active ? 500 : 400,
                      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6,
                      transition: 'all .15s ease',
                    }}>
                      <span style={{ color: active ? (theme.accent === '#1F1F22' ? theme.pageInk : theme.accent) : theme.pageMuted, display: 'inline-flex' }}>
                        <p.Icon />
                      </span>
                      {p.short}
                    </button>
                  );
                })}
              </div>
            </div>

            <div>
              <label style={labelStyle}>Detalhes (opcional)</label>
              <textarea style={{ ...inputStyle, minHeight: 64, resize: 'vertical', fontFamily: 'var(--font-sans)' }}
                value={form.message} onChange={(e) => set('message', e.target.value)}
                placeholder="Ex.: tenho um Honda Civic 2022, uso urbano…" />
            </div>

            <button type="submit" style={{
              background: theme.accent, color: theme.accentInk, border: 'none',
              padding: '16px 22px', borderRadius: 999, cursor: 'pointer',
              fontFamily: 'var(--font-sans)', fontSize: 14, fontWeight: 500,
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
              transition: 'transform .15s ease',
            }}
              onMouseEnter={(e) => e.currentTarget.style.transform = 'translateY(-1px)'}
              onMouseLeave={(e) => e.currentTarget.style.transform = 'translateY(0)'}
            >
              {sent ? <><IconCheck /> Abrindo WhatsApp…</> : <><IconWhatsApp size={16} /> Solicitar cotação</>}
            </button>

            <div style={{ fontFamily: 'var(--font-sans)', fontSize: 11.5, color: theme.pageMuted, textAlign: 'center', lineHeight: 1.5 }}>
              Ao enviar, você aceita ser contatado pela Imperatriz Seguros.
              <br />Nenhuma cobrança automática.
            </div>
          </form>
        </div>
      </Container>
    </section>
  );
}

function ContactRow({ theme, label, value, cta, href }) {
  return (
    <a href={href} target={href && href.startsWith('http') ? '_blank' : undefined} rel="noopener noreferrer" style={{
      display: 'grid', gridTemplateColumns: '140px 1fr auto', gap: 16, alignItems: 'baseline',
      paddingBottom: 18, borderBottom: `1px solid ${theme.pageRule}`,
      color: theme.pageInk, textDecoration: 'none',
    }}>
      <div style={{ fontFamily: 'var(--font-sans)', fontSize: 11.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: theme.pageMuted, fontWeight: 500 }}>{label}</div>
      <div style={{ fontFamily: 'var(--font-serif)', fontSize: 19, lineHeight: 1.3 }}>{value}</div>
      <span style={{ fontFamily: 'var(--font-sans)', fontSize: 12, color: theme.pageMuted, display: 'inline-flex', alignItems: 'center', gap: 4, whiteSpace: 'nowrap' }}>
        {cta} <IconArrow size={12} />
      </span>
    </a>
  );
}

// ─── FOOTER ──────────────────────────────────────────────────────────────────

function Footer({ theme, showAnniversary }) {
  return (
    <footer style={{
      background: '#1A1A1D', color: '#FAF8F2',
      padding: 'clamp(64px, 8vw, 96px) 0 32px',
    }}>
      <Container>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr 1fr', gap: 'clamp(28px, 4vw, 56px)' }} className="footer-grid">
          <div>
            <ImperatrizLogo height={56} theme="light" showAnniversary={showAnniversary} />
            <p style={{
              fontFamily: 'var(--font-sans)', fontSize: 13.5, color: 'rgba(250,248,242,0.6)',
              lineHeight: 1.6, marginTop: 24, maxWidth: 320, textWrap: 'pretty',
            }}>
              Corretora de seguros em Campo Grande / MS. Desde 1991 cuidando do
              patrimônio, da família e do negócio dos nossos clientes.
            </p>
          </div>

          <FooterCol title="Seguros" links={PRODUCTS.map((p) => [p.name, `#prod-${p.id}`])} />
          <FooterCol title="Institucional" links={[
            ['Por que a Imperatriz', '#porque'],
            ['Seguradoras parceiras', '#parceiras'],
            ['Blog', '#blog'],
            ['Contato', '#contato'],
          ]} />
          <FooterCol title="Contato" custom={
            <div style={{ display: 'flex', flexDirection: 'column', gap: 10, fontFamily: 'var(--font-sans)', fontSize: 13.5, color: 'rgba(250,248,242,0.7)', lineHeight: 1.5 }}>
              <a href={wppLink()} target="_blank" rel="noopener noreferrer" style={{ color: 'inherit', textDecoration: 'none', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                <IconWhatsApp size={14} /> {WHATSAPP_DISPLAY}
              </a>
              <a href={`tel:+556733820100`} style={{ color: 'inherit', textDecoration: 'none' }}>{PHONE_DISPLAY}</a>
              <a href={`mailto:${EMAIL}`} style={{ color: 'inherit', textDecoration: 'none', wordBreak: 'break-word' }}>{EMAIL}</a>
              <span style={{ marginTop: 8 }}>Rua Eduardo Santos Pereira, 2189<br />Campo Grande / MS</span>
            </div>
          } />
        </div>

        <div style={{
          marginTop: 64, paddingTop: 24,
          borderTop: '1px solid rgba(250,248,242,0.1)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16, flexWrap: 'wrap',
          fontFamily: 'var(--font-sans)', fontSize: 12, color: 'rgba(250,248,242,0.5)',
        }}>
          <div>© 1991—2026 Imperatriz Corretora de Seguros · CNPJ 36.819.670/0001-81 · SUSEP 202050919</div>
          <div style={{ display: 'flex', gap: 20 }}>
            <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>Política de privacidade</a>
            <a href="#" style={{ color: 'inherit', textDecoration: 'none' }}>Termos de uso</a>
          </div>
        </div>
      </Container>
    </footer>
  );
}

function FooterCol({ title, links, custom }) {
  return (
    <div>
      <div style={{
        fontFamily: 'var(--font-sans)', fontSize: 11.5, letterSpacing: '0.14em',
        textTransform: 'uppercase', fontWeight: 500, color: 'rgba(250,248,242,0.5)',
        marginBottom: 20,
      }}>{title}</div>
      {custom ? custom : (
        <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
          {links.map(([l, h]) => (
            <li key={l}>
              <a href={h} style={{
                fontFamily: 'var(--font-sans)', fontSize: 13.5,
                color: 'rgba(250,248,242,0.75)', textDecoration: 'none',
              }}>{l}</a>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}

// ─── FLOATING WHATSAPP ───────────────────────────────────────────────────────

function FloatingWhatsApp() {
  return (
    <a href={wppLink()} target="_blank" rel="noopener noreferrer" style={{
      position: 'fixed', bottom: 24, right: 24, zIndex: 40,
      width: 56, height: 56, borderRadius: '50%',
      background: '#25D366', color: '#fff',
      display: 'grid', placeItems: 'center',
      boxShadow: '0 8px 24px rgba(37,211,102,0.4), 0 4px 12px rgba(0,0,0,0.15)',
      textDecoration: 'none',
      transition: 'transform .2s ease',
    }}
      onMouseEnter={(e) => e.currentTarget.style.transform = 'scale(1.08)'}
      onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'}
      aria-label="Falar no WhatsApp"
    >
      <IconWhatsApp size={28} color="#fff" />
    </a>
  );
}

Object.assign(window, { ContactSection, Footer, FloatingWhatsApp });