// Bottom-up quote drawer + floating "Request a Quote" CTA pill.
// No form — quote requests go directly via email for confidentiality.
(function () {
  const { useEffect, useState } = React;
  const { Icons } = window.GR;
  const { Close, Copy, Mail, Phone, Star } = Icons;

  const QUOTE_EMAIL = 'inquiries@grunitytrading.com';

  function CopyButton({ value, label = 'Copy' }) {
    const [copied, setCopied] = useState(false);
    const onCopy = () => {
      try { navigator.clipboard.writeText(value); } catch (_) {}
      setCopied(true); setTimeout(() => setCopied(false), 1600);
    };
    return (
      <button
        type="button" onClick={onCopy} aria-label={`Copy ${value}`}
        style={{
          background: 'transparent', border: '1px solid rgba(255,255,255,0.25)',
          color: copied ? 'var(--color-green)' : '#fff', cursor: 'pointer',
          padding: '10px 14px', display: 'inline-flex', alignItems: 'center', gap: 8,
          fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600,
          letterSpacing: '0.18em', textTransform: 'uppercase',
          transition: 'all 0.2s var(--ease-out)',
        }}
      >
        <Copy size={12} />
        {copied ? 'COPIED' : label}
      </button>
    );
  }

  function ContactCard({ tag, name, role, email, phone }) {
    const [copied, setCopied] = useState(null);
    const onCopy = (v) => {
      try { navigator.clipboard.writeText(v); } catch (_) {}
      setCopied(v); setTimeout(() => setCopied(null), 1400);
    };
    return (
      <div style={{ background: 'var(--color-navy-dark)', borderTop: '2px solid var(--color-green)', padding: 24 }}>
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.22em',
          color: 'var(--color-green)', marginBottom: 12, textTransform: 'uppercase',
        }}>{tag}</div>
        {name && (
          <div style={{
            fontFamily: 'var(--font-display)', fontSize: 24, letterSpacing: '0.04em',
            color: '#fff', lineHeight: 1, marginBottom: 4,
          }}>{name}</div>
        )}
        {role && (
          <div style={{
            fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em',
            color: 'rgba(255,255,255,0.55)', textTransform: 'uppercase', marginBottom: 14,
          }}>{role}</div>
        )}
        {email && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 6, flexWrap: 'wrap' }}>
            <Mail size={13} />
            <a href={`mailto:${email}`} style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'rgba(255,255,255,0.92)', wordBreak: 'break-all' }}>{email}</a>
            <button type="button" onClick={() => onCopy(email)} aria-label="Copy email"
              style={{ background: 'transparent', border: 0, color: 'var(--color-green)', cursor: 'pointer', padding: 4 }}>
              <Copy size={12} />
            </button>
            {copied === email && (
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.16em', color: 'var(--color-green)' }}>COPIED</span>
            )}
          </div>
        )}
        {phone && (
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 8 }}>
            <Phone size={13} />
            <a href={`tel:${phone.replace(/[^\d+]/g, '')}`} style={{ fontFamily: 'var(--font-body)', fontSize: 13, color: 'rgba(255,255,255,0.92)' }}>{phone}</a>
          </div>
        )}
      </div>
    );
  }

  function QuoteDrawer({ open, onClose }) {
    useEffect(() => {
      const onKey = (e) => { if (e.key === 'Escape') onClose(); };
      if (open) window.addEventListener('keydown', onKey);
      return () => window.removeEventListener('keydown', onKey);
    }, [open, onClose]);

    useEffect(() => {
      document.body.style.overflow = open ? 'hidden' : '';
      return () => { document.body.style.overflow = ''; };
    }, [open]);

    const subject = encodeURIComponent('Quote Request — GR Unity Trading');
    const body = encodeURIComponent(
      'Hello GR Unity Trading,\n\n' +
      'I would like to request a quote.\n\n' +
      'Company:\n' +
      'Product(s) of interest:\n' +
      'Est. monthly volume:\n' +
      'Destination country:\n' +
      'Additional details:\n\n' +
      'Best regards,'
    );
    const mailto = `mailto:${QUOTE_EMAIL}?subject=${subject}&body=${body}`;

    return (
      <React.Fragment>
        <div
          onClick={onClose}
          aria-hidden={!open}
          style={{
            position: 'fixed', inset: 0, background: 'rgba(0,0,0,0.55)',
            opacity: open ? 1 : 0, pointerEvents: open ? 'auto' : 'none',
            transition: 'opacity 0.4s var(--ease-out)', zIndex: 200,
          }}
        />
        <div
          role="dialog" aria-modal="true" aria-label="Request a quote"
          className="bg-hex"
          style={{
            position: 'fixed', left: 0, right: 0, bottom: 0, zIndex: 201,
            maxHeight: '92vh', overflowY: 'auto',
            background: 'var(--color-navy)', color: '#fff',
            transform: open ? 'translateY(0)' : 'translateY(100%)',
            transition: 'transform 0.5s var(--ease-out)',
            borderTop: '2px solid var(--color-green)',
          }}
        >
          <button
            type="button" onClick={onClose} aria-label="Close"
            style={{
              position: 'absolute', top: 20, right: 20,
              background: 'transparent', border: '1px solid rgba(255,255,255,0.3)',
              color: '#fff', width: 40, height: 40, cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center', zIndex: 2,
            }}
          >
            <Close size={18} />
          </button>

          <div style={{ maxWidth: 'var(--container)', margin: '0 auto', padding: '56px var(--gutter) 64px' }}>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.22em',
              color: 'var(--color-green)', marginBottom: 16,
              display: 'inline-flex', alignItems: 'center', gap: 10, textTransform: 'uppercase',
            }}>
              <span style={{ width: 24, height: 1, background: 'var(--color-green)' }} />
              Request a Quote · We Respond Within 24h
            </div>
            <h2 className="t-display-3" style={{ color: '#fff', margin: '0 0 12px' }}>
              Email us your request.
            </h2>
            <p style={{
              fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.6,
              color: 'rgba(255,255,255,0.82)', maxWidth: 680, margin: 0,
            }}>
              Quote requests are handled directly over email. Send us your target product, volume, and destination — we&rsquo;ll respond within 24 business hours with pricing, lead times, and shipment options.
            </p>

            {/* Primary email block */}
            <div style={{
              marginTop: 36,
              background: 'var(--color-navy-dark)',
              borderLeft: '4px solid var(--color-green)',
              padding: 'clamp(24px, 3.5vw, 36px)',
            }}>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.22em',
                color: 'var(--color-green)', textTransform: 'uppercase', marginBottom: 14,
              }}>
                Quote Inquiries · Confidential
              </div>
              <div style={{
                fontFamily: 'var(--font-display)',
                fontSize: 'clamp(28px, 4vw, 44px)',
                letterSpacing: '0.02em', color: '#fff',
                lineHeight: 1, margin: '0 0 16px',
                wordBreak: 'break-word',
              }}>
                {QUOTE_EMAIL}
              </div>

              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', marginTop: 8 }}>
                <a href={mailto} className="gr-btn gr-btn-primary">
                  Open Email →
                </a>
                <CopyButton value={QUOTE_EMAIL} label="Copy Address" />
              </div>

              <div style={{
                marginTop: 22,
                fontFamily: 'var(--font-body)', fontSize: 13.5, lineHeight: 1.65,
                color: 'rgba(255,255,255,0.7)', maxWidth: 640,
              }}>
                Sending your request over email keeps your commercial information off public forms and in your own inbox. Mention the product, volume, destination country, and any timing requirements — we&rsquo;ll come back to you directly.
              </div>
            </div>

            {/* Direct contacts */}
            <div style={{
              marginTop: 36,
              fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.22em',
              color: 'var(--color-green)', textTransform: 'uppercase', marginBottom: 14,
            }}>
              <span style={{ marginRight: 10 }}>/</span>Or Reach a Director Directly
            </div>
            <div style={{
              display: 'grid', gap: 14,
              gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
            }}>
              <ContactCard
                tag="Director" name="Oscar Ganem" role="Director"
                email="oscar.ganem@grunitytrading.com" phone="+1 (954) 274-5399"
              />
              <ContactCard
                tag="Technology" name="Oskar Ganem"
                role="Director of Technology"
                email="oskar.technology@grunitytrading.com"
              />
            </div>

            <div style={{
              marginTop: 36, paddingTop: 24,
              borderTop: '1px solid rgba(255,255,255,0.12)',
              fontFamily: 'var(--font-mono)', fontSize: 10,
              letterSpacing: '0.18em', textTransform: 'uppercase',
              color: 'rgba(255,255,255,0.5)',
              display: 'flex', flexWrap: 'wrap', gap: 18, justifyContent: 'space-between',
            }}>
              <span>GR Unity Trading LLC · Florida, United States</span>
              <span>Response Window · Within 24 Business Hours</span>
            </div>
          </div>
        </div>
      </React.Fragment>
    );
  }

  function FloatingCTA({ onOpen }) {
    return (
      <button
        type="button" onClick={onOpen}
        className="gr-floating-cta"
        style={{
          position: 'fixed', right: 24, bottom: 24, zIndex: 80,
          padding: '14px 22px',
          background: 'var(--color-green)', color: 'var(--color-navy)', border: 0,
          borderRadius: 999, cursor: 'pointer',
          boxShadow: '0 18px 40px -12px rgba(30,27,75,0.4)',
          display: 'inline-flex', alignItems: 'center', gap: 10,
          fontFamily: 'var(--font-body)', fontWeight: 700, fontSize: 12,
          letterSpacing: '0.2em', textTransform: 'uppercase',
          transition: 'transform 0.2s var(--ease-out), background 0.2s var(--ease-out)',
        }}
        onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; }}
        onMouseLeave={(e) => { e.currentTarget.style.transform = 'translateY(0)'; }}
        aria-label="Request a Quote"
      >
        <Star size={14} /> Request a Quote
      </button>
    );
  }

  window.GR = Object.assign(window.GR || {}, { QuoteDrawer, FloatingCTA });
})();