// Whatsapp.jsx — floating concierge button
function WhatsappFab() {
  const [open, setOpen] = React.useState(false);
  const phone = '919557284086'; // intl format, no '+'
  const message = encodeURIComponent("Hello Blissful Bites — I'd like to ask about ");
  const href = `https://wa.me/${phone}?text=${message}`;

  return (
    <>
      {/* tooltip / mini card */}
      <div style={{
        position: 'fixed', bottom: 96, left: 24, zIndex: 65,
        background: 'var(--bb-pearl)', borderRadius: 14, padding: '16px 18px',
        border: '1px solid var(--line-gold)', boxShadow: 'var(--shadow-3)',
        width: 268, transformOrigin: 'bottom left',
        transform: open ? 'scale(1) translateY(0)' : 'scale(0.92) translateY(8px)',
        opacity: open ? 1 : 0,
        pointerEvents: open ? 'auto' : 'none',
        transition: 'all 240ms cubic-bezier(0.22,0.61,0.36,1)'
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
          <div style={{ width: 8, height: 8, borderRadius: '50%', background: '#4F6B3A', boxShadow: '0 0 0 3px rgba(79,107,58,0.18)' }}></div>
          <div className="bb-eyebrow" style={{ fontSize: 10, letterSpacing: '0.3em', color: 'var(--bb-gold-deep)' }}>CONCIERGE · ONLINE</div>
        </div>
        <div style={{ fontFamily: 'var(--font-serif)', fontSize: 19, color: 'var(--bb-burgundy-deep)', lineHeight: 1.25, marginBottom: 4 }}>
          Chat with us on WhatsApp.
        </div>
        <div style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 14, color: 'var(--fg-3)', marginBottom: 14 }}>
          Quotes, custom hampers, gift advice. Replies within minutes during working hours.
        </div>
        <a href={href} target="_blank" rel="noopener noreferrer" className="btn btn-primary" style={{ width: '100%', padding: '12px 16px', textDecoration: 'none', background: '#1F8A4C', borderColor: '#1F8A4C' }}>
          <svg width="14" height="14" 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-.347zM12 21.5h-.007a9.4 9.4 0 0 1-4.793-1.314l-.343-.205-3.566.936.952-3.475-.224-.357A9.4 9.4 0 0 1 12 2.5a9.4 9.4 0 0 1 6.652 2.747A9.4 9.4 0 0 1 21.5 12a9.4 9.4 0 0 1-9.5 9.5z"></path></svg>
          Open WhatsApp Chat
        </a>
        <div style={{ fontFamily: 'var(--font-ui)', fontSize: 11, letterSpacing: '0.1em', color: 'var(--fg-3)', marginTop: 10, textAlign: 'center' }}>
          +91 95572 84086
        </div>
      </div>

      {/* fab */}
      <button onClick={() => setOpen((o) => !o)} aria-label="Chat on WhatsApp" style={{
        position: 'fixed', bottom: 24, left: 24, zIndex: 70,
        width: 60, height: 60, borderRadius: '50%',
        background: '#1F8A4C', color: '#FFFFFF',
        border: '2px solid rgba(255,255,255,0.65)',
        cursor: 'pointer', boxShadow: '0 12px 30px rgba(31,138,76,0.45), 0 4px 10px rgba(58,36,24,0.18)',
        display: 'grid', placeItems: 'center',
        transition: 'transform 240ms cubic-bezier(0.22,0.61,0.36,1)',
        transform: open ? 'rotate(8deg)' : 'rotate(0deg)'
      }}>
        {/* WhatsApp glyph */}
        <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <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-.347zM12 21.5h-.007a9.4 9.4 0 0 1-4.793-1.314l-.343-.205-3.566.936.952-3.475-.224-.357A9.4 9.4 0 0 1 12 2.5a9.4 9.4 0 0 1 6.652 2.747A9.4 9.4 0 0 1 21.5 12a9.4 9.4 0 0 1-9.5 9.5z"></path>
        </svg>
        {/* heartbeat ring */}
        <span aria-hidden="true" style={{
          position: 'absolute', inset: -2, borderRadius: '50%',
          border: '2px solid rgba(31,138,76,0.55)',
          animation: 'bb-pulse 2.4s ease-out infinite'
        }}></span>
      </button>
    </>
  );
}