function WhatsAppLauncher({ accent, settings }) {
  const [open, setOpen] = React.useState(false);
  const isMobile = useMedia('(max-width: 600px)');

  const number = (settings.whatsapp_number || '447700900123').replace(/\D/g, '');
  const display = settings.whatsapp_display || '+44 7700 900123';
  const hours = settings.whatsapp_hours || 'Mon–Fri 9:00–18:00 GMT';
  const replySla = settings.whatsapp_reply_sla || '2hr';
  const status = settings.whatsapp_status || 'online';
  const description = settings.whatsapp_business_description || `WhatsApp Business · typical reply ${replySla}`;
  const welcome = settings.whatsapp_welcome_message || "Hi there 👋 Ask about MOQs, materials, lead times, or start a quote — we'll reply within business hours.";
  const company = settings.company_name || 'Lupipak';

  const interpolate = (s) => (s || '').replace(/\{\{company\}\}/g, company);
  const defaultMsg = interpolate(settings.whatsapp_default_message || "Hi {{company}} — I'd like a quote for my packaging set.");

  const [msg, setMsg] = React.useState(defaultMsg);
  React.useEffect(() => { setMsg(defaultMsg); }, [defaultMsg]);

  let quickPrompts = [];
  try { const p = JSON.parse(settings.whatsapp_quick_prompts || '[]'); if (Array.isArray(p)) quickPrompts = p; } catch {}
  if (quickPrompts.length === 0) {
    quickPrompts = [
      { label: 'Ask about MOQs',   text: `Hi ${company} — what are your minimum order quantities?` },
      { label: 'Request a sample', text: `Hi ${company} — could I request a sample pack?` },
      { label: 'Get a quote',      text: `Hi ${company} — I'd like a quote for my packaging set.` },
    ];
  }

  const launch = () => {
    const url = `https://wa.me/${number}?text=${encodeURIComponent(msg)}`;
    window.open(url, '_blank', 'noopener');
  };

  const statusDot = status === 'online' ? '#25D366' : status === 'away' ? '#E8A74A' : '#8B857A';
  const statusLabel = status === 'online' ? `Typical reply ${replySla}` : status === 'away' ? `Away · reply within ${replySla}` : 'Offline · back during business hours';

  return (
    <>
      {!open && (
        <button
          onClick={() => setOpen(true)}
          style={{
            position: 'fixed', bottom: 20, left: 20, zIndex: 50,
            display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '11px 18px 11px 12px', borderRadius: 999,
            background: 'var(--ink)', color: 'var(--paper)',
            border: 0, boxShadow: 'var(--shadow-lg)',
            fontFamily: 'var(--font-sans)', fontSize: 13, fontWeight: 500,
            animation: 'fadeUp .5s cubic-bezier(.2,.8,.2,1) both',
            cursor: 'pointer',
          }}
        >
          <span style={{
            width: 28, height: 28, borderRadius: '50%',
            background: '#25D366',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            boxShadow: '0 0 0 2px rgba(37,211,102,0.18)',
          }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="#fff" aria-hidden="true">
              <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.966-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.198-.347.223-.644.074-.297-.148-1.254-.462-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.297-.497.1-.198.05-.371-.025-.52-.074-.148-.669-1.611-.916-2.207-.241-.579-.487-.5-.669-.51-.173-.007-.371-.009-.57-.009-.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.226 1.36.194 1.872.118.571-.085 1.758-.719 2.006-1.413.247-.694.247-1.289.173-1.413-.074-.124-.272-.198-.57-.347z"/>
              <path d="M12.003 2.001h-.005A9.96 9.96 0 0 0 2 12a9.96 9.96 0 0 0 1.913 5.857L2 22l4.27-1.89A9.96 9.96 0 0 0 12.003 22 9.96 9.96 0 0 0 22 12.002 9.96 9.96 0 0 0 12.003 2zm5.827 14.116c-.244.692-1.222 1.266-2.001 1.435-.534.114-1.231.205-3.58-.776-2.975-1.233-4.891-4.255-5.04-4.453-.15-.198-1.213-1.612-1.213-3.075 0-1.463.762-2.182 1.034-2.479.272-.298.593-.372.792-.372.198 0 .397.002.57.01.181.01.429-.07.67.509.247.596.842 2.058.916 2.207.074.148.124.322.025.52-.1.198-.149.322-.297.496-.149.174-.313.388-.447.52-.149.15-.303.31-.13.608.173.297.77 1.271 1.653 2.058 1.136 1.013 2.093 1.327 2.39 1.476.297.149.471.124.644-.074.174-.198.744-.867.941-1.164.197-.298.395-.25.669-.149.272.1 1.733.817 2.03.966.297.149.495.223.57.347.074.124.074.719-.173 1.413z"/>
            </svg>
          </span>
          <span>Chat on WhatsApp</span>
        </button>
      )}

      {open && (
        <div style={{
          position: 'fixed',
          bottom: isMobile ? 12 : 20,
          left: isMobile ? 12 : 20,
          right: isMobile ? 12 : 'auto',
          zIndex: 50,
          width: isMobile ? 'auto' : 360,
          background: 'var(--paper)', borderRadius: 18,
          border: '.5px solid var(--line-2)', boxShadow: 'var(--shadow-lg)',
          display: 'flex', flexDirection: 'column', overflow: 'hidden',
          animation: 'scaleIn .25s cubic-bezier(.2,.8,.2,1) both',
          transformOrigin: 'bottom left',
        }}>
          <div style={{
            display: 'grid', gridTemplateColumns: 'auto 1fr auto', gap: 12, alignItems: 'center',
            padding: '14px 16px', background: '#075E54', color: '#fff',
          }}>
            <div style={{
              width: 38, height: 38, borderRadius: '50%',
              background: '#fff',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 20, fontWeight: 400, color: '#075E54',
            }}>{company[0]?.toUpperCase() || 'L'}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 1, minWidth: 0 }}>
              <span style={{ fontSize: 14, fontWeight: 500, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                {company}
                <svg width="13" height="13" viewBox="0 0 16 16" fill="none">
                  <circle cx="8" cy="8" r="7" fill="#25D366"/>
                  <path d="M5 8.2 L7 10 L11 6" stroke="#fff" strokeWidth="1.4" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </span>
              <span className="mono" style={{ fontSize: 10, opacity: 0.75, display: 'inline-flex', alignItems: 'center', gap: 5 }}>
                <span style={{ width: 5, height: 5, borderRadius: '50%', background: statusDot }}/>
                {description}
              </span>
              <span className="mono" style={{ fontSize: 9.5, opacity: 0.65, marginTop: 1 }}>{statusLabel}</span>
            </div>
            <button
              onClick={() => setOpen(false)}
              style={{
                width: 28, height: 28, borderRadius: 8, border: 0,
                background: 'rgba(255,255,255,.12)', color: '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
              }}
            >
              <svg width="11" height="11" viewBox="0 0 16 16"><path d="M4 4 L12 12 M12 4 L4 12" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>
            </button>
          </div>

          <div style={{
            padding: '18px 16px 12px',
            background: '#ECE5DD',
            backgroundImage: 'radial-gradient(rgba(0,0,0,0.025) 1px, transparent 1px)',
            backgroundSize: '10px 10px',
          }}>
            <div style={{
              maxWidth: '85%',
              padding: '10px 12px', borderRadius: 10,
              background: '#fff', fontSize: 13, lineHeight: 1.45, color: '#111',
              boxShadow: '0 1px 1px rgba(0,0,0,0.05)', borderTopLeftRadius: 2,
              animation: 'fadeUp .3s cubic-bezier(.2,.8,.2,1) both',
              whiteSpace: 'pre-wrap',
            }}>
              {welcome}
            </div>
          </div>

          <div style={{ padding: '12px 14px 8px', background: 'var(--paper)' }}>
            <div className="mono" style={{ fontSize: 9.5, color: 'var(--muted)', letterSpacing: '0.08em', textTransform: 'uppercase', marginBottom: 6 }}>
              Your message
            </div>
            <textarea
              value={msg}
              onChange={(e) => setMsg(e.target.value)}
              rows={2}
              style={{
                width: '100%', resize: 'none',
                padding: '10px 12px', borderRadius: 10,
                border: '.5px solid var(--line-2)', background: 'var(--bg-2)',
                fontFamily: 'inherit', outline: 'none', lineHeight: 1.4,
                color: 'var(--ink)',
              }}
            />
            <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginTop: 8 }}>
              {quickPrompts.map((p, i) => (
                <button
                  key={i}
                  onClick={() => setMsg(interpolate(p.text))}
                  style={{
                    padding: '5px 9px', borderRadius: 14,
                    background: 'var(--bg)', border: '.5px solid var(--line-2)',
                    fontSize: 11, color: 'var(--ink-2)', fontFamily: 'inherit', cursor: 'pointer',
                  }}
                >{p.label}</button>
              ))}
            </div>
          </div>

          <div style={{ padding: '6px 14px 14px', background: 'var(--paper)' }}>
            <button
              onClick={launch}
              style={{
                width: '100%', padding: '12px 14px', borderRadius: 10,
                background: '#25D366', color: '#fff', cursor: 'pointer',
                border: 0, fontFamily: 'inherit', fontSize: 13.5, fontWeight: 600,
                display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 10,
              }}
            >
              Open in WhatsApp
            </button>
            <div className="mono" style={{ fontSize: 9.5, color: 'var(--muted)', textAlign: 'center', marginTop: 8, letterSpacing: '0.04em' }}>
              {display} · {hours}
            </div>
          </div>
        </div>
      )}
    </>
  );
}

Object.assign(window, { WhatsAppLauncher });