// Contact page — direct contacts + email-us-for-quotes. No form.
(function () {
  const { useState } = React;
  const { Reveal, Eyebrow, Icons } = window.GR;
  const { Copy, Mail, Phone, Pin } = Icons;

  const QUOTE_EMAIL = 'inquiries@grunitytrading.com';

  function CopyLine({ value, type = 'mail' }) {
    const [copied, setCopied] = useState(false);
    const onCopy = () => {
      try { navigator.clipboard.writeText(value); } catch (_) {}
      setCopied(true); setTimeout(() => setCopied(false), 1400);
    };
    const Icon = type === 'phone' ? Phone : Mail;
    return (
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 8, flexWrap: 'wrap' }}>
        <Icon size={14} />
        <a href={type === 'phone' ? `tel:${value.replace(/[^\d+]/g, '')}` : `mailto:${value}`}
          style={{
            fontFamily: 'var(--font-body)', fontSize: 14, fontWeight: 500,
            color: 'rgba(255,255,255,0.92)', wordBreak: 'break-all',
          }}>{value}</a>
        <button type="button" onClick={onCopy} aria-label="Copy"
          style={{
            background: 'transparent', border: 0, color: 'var(--color-green)', cursor: 'pointer',
            padding: 4, display: 'inline-flex', alignItems: 'center',
          }}>
          <Copy size={13} />
        </button>
        {copied && <span style={{
          fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.18em',
          color: 'var(--color-green)', textTransform: 'uppercase',
        }}>COPIED</span>}
      </div>
    );
  }

  function CopyButtonDark({ value, label = 'Copy Address' }) {
    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 var(--color-navy)',
          color: copied ? 'var(--color-green-deep)' : 'var(--color-navy)', cursor: 'pointer',
          padding: '14px 22px', display: 'inline-flex', alignItems: 'center', gap: 8,
          fontFamily: 'var(--font-body)', fontSize: 12, fontWeight: 600,
          letterSpacing: '0.18em', textTransform: 'uppercase',
          transition: 'all 0.2s var(--ease-out)',
        }}
      >
        <Copy size={12} />
        {copied ? 'COPIED' : label}
      </button>
    );
  }

  function ContactPage() {
    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>
        <section style={{ padding: 'calc(var(--nav-h) + 80px) var(--gutter) 48px' }}>
          <div className="gr-container-wide" style={{ padding: 0 }}>
            <Eyebrow>Contact</Eyebrow>
            <Reveal>
              <h1 className="t-display-2" style={{ color: 'var(--color-navy)' }}>
                Let&rsquo;s Talk Business.
              </h1>
            </Reveal>
            <Reveal delay={120}>
              <p style={{
                fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.6,
                color: 'rgba(30,27,75,0.72)', maxWidth: 720, marginTop: 24,
              }}>
                Reach out directly by email for quote requests, supplier outreach, logistics coordination, and partnership inquiries. Email keeps commercial information confidential and lets us respond with the precision your inquiry deserves.
              </p>
            </Reveal>
          </div>
        </section>

        <section style={{ padding: '24px var(--gutter) 96px' }}>
          <div className="gr-container-wide gr-grid-2-split" style={{
            display: 'grid', gridTemplateColumns: '1fr 1.3fr',
            border: '1px solid rgba(30,27,75,0.12)', padding: 0,
          }}>
            {/* Direct contacts panel */}
            <div className="bg-hex" style={{ background: 'var(--color-navy)', color: '#fff', padding: 'clamp(32px, 5vw, 48px)' }}>
              <h2 style={{
                fontFamily: 'var(--font-display)', fontSize: 36, letterSpacing: '0.02em',
                textTransform: 'uppercase', color: '#fff', lineHeight: 1, margin: '0 0 28px',
              }}>
                Direct<br />Contacts
              </h2>

              <div style={{ borderBottom: '1px solid rgba(109,179,63,0.35)', paddingBottom: 22, marginBottom: 22 }}>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.22em',
                  color: 'var(--color-green)', marginBottom: 10, textTransform: 'uppercase',
                }}>Business Inquiries · Director</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 26, letterSpacing: '0.04em', color: '#fff' }}>
                  Oscar Ganem
                </div>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em',
                  color: 'rgba(255,255,255,0.55)', textTransform: 'uppercase', marginTop: 4,
                }}>Director</div>
                <CopyLine value="oscar.ganem@grunitytrading.com" type="mail" />
                <CopyLine value="+1 (954) 274-5399" type="phone" />
              </div>

              <div style={{ borderBottom: '1px solid rgba(109,179,63,0.35)', paddingBottom: 22, marginBottom: 22 }}>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.22em',
                  color: 'var(--color-green)', marginBottom: 10, textTransform: 'uppercase',
                }}>Technology</div>
                <div style={{ fontFamily: 'var(--font-display)', fontSize: 26, letterSpacing: '0.04em', color: '#fff' }}>
                  Oskar Ganem
                </div>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em',
                  color: 'rgba(255,255,255,0.55)', textTransform: 'uppercase', marginTop: 4,
                }}>Director of Technology</div>
                <CopyLine value="oskar.technology@grunitytrading.com" type="mail" />
              </div>

              <div>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.22em',
                  color: 'var(--color-green)', marginBottom: 10, textTransform: 'uppercase',
                }}>Headquarters</div>
                <div style={{
                  fontFamily: 'var(--font-body)', fontSize: 15,
                  color: 'rgba(255,255,255,0.92)',
                  display: 'flex', alignItems: 'center', gap: 10,
                }}>
                  <Pin size={14} />
                  <span>GR Unity Trading LLC<br />Florida, United States</span>
                </div>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em',
                  color: 'rgba(255,255,255,0.55)', textTransform: 'uppercase', marginTop: 10,
                }}>25.7617° N · 80.1918° W</div>
              </div>
            </div>

            {/* Email-us panel */}
            <div style={{ padding: 'clamp(32px, 5vw, 48px)', background: '#fff' }}>
              <Eyebrow>Quote Requests · Confidential</Eyebrow>
              <h2 style={{
                fontFamily: 'var(--font-display)', fontSize: 'clamp(32px, 4.4vw, 56px)',
                letterSpacing: '0.02em', textTransform: 'uppercase',
                color: 'var(--color-navy)', lineHeight: 1, margin: '0 0 18px',
              }}>
                Email Us<br />Your Inquiry.
              </h2>
              <p className="t-body" style={{ marginBottom: 28, fontSize: 16, maxWidth: 600 }}>
                Quote requests are handled directly over email. Send us your target product, volume, destination, and any timing requirements — we&rsquo;ll respond within 24 business hours.
              </p>

              <div style={{
                borderLeft: '4px solid var(--color-green)',
                background: 'var(--color-off-white)',
                padding: 'clamp(20px, 2.5vw, 28px)',
                marginBottom: 28,
              }}>
                <div style={{
                  fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.22em',
                  color: 'var(--color-green)', textTransform: 'uppercase', marginBottom: 10,
                }}>
                  Quote Inquiries
                </div>
                <div style={{
                  fontFamily: 'var(--font-display)',
                  fontSize: 'clamp(26px, 3.6vw, 40px)',
                  letterSpacing: '0.02em', color: 'var(--color-navy)',
                  lineHeight: 1, wordBreak: 'break-word',
                }}>
                  {QUOTE_EMAIL}
                </div>
              </div>

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

              <div style={{
                marginTop: 32, paddingTop: 24,
                borderTop: '1px solid rgba(30,27,75,0.12)',
                display: 'grid', gap: 12,
                gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))',
              }}>
                <div>
                  <div style={{
                    fontFamily: 'var(--font-mono)', fontSize: 9, fontWeight: 600,
                    letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--color-green)',
                    marginBottom: 6,
                  }}>What to Include</div>
                  <ul style={{
                    margin: 0, paddingLeft: 18,
                    fontFamily: 'var(--font-body)', fontSize: 13.5, lineHeight: 1.7,
                    color: 'rgba(30,27,75,0.72)',
                  }}>
                    <li>Product &amp; grade</li>
                    <li>Estimated monthly volume</li>
                    <li>Destination country / port</li>
                    <li>Timing requirements</li>
                  </ul>
                </div>
                <div>
                  <div style={{
                    fontFamily: 'var(--font-mono)', fontSize: 9, fontWeight: 600,
                    letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--color-green)',
                    marginBottom: 6,
                  }}>Response Window</div>
                  <div style={{
                    fontFamily: 'var(--font-body)', fontSize: 13.5, lineHeight: 1.7,
                    color: 'rgba(30,27,75,0.72)',
                  }}>
                    Within 24 business hours, with pricing, lead times, and shipment options.
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
      </React.Fragment>
    );
  }

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