// Home page — hero, stats bar, company overview, services, CTA band.
(function () {
  const { Reveal, Eyebrow, useCountUp, Link } = window.GR;

  const MARQUEE = [
    'SODIUM HYPOCHLORITE', 'CAUSTIC SODA', 'METHANOL', 'XYLENE',
    'ETHANOL', 'IPA', 'LABSA', 'SLES', 'PAC',
    'CALCIUM HYPOCHLORITE', 'LIQUID CHLORINE GAS',
  ];

  const SERVICES = [
    { num: '01', tag: 'Sourcing', title: 'Industrial Chemical Sourcing',
      body: 'We source certified industrial chemicals — Sodium Hypochlorite, Calcium Hypochlorite, SLES, LABSA, PAC, IPA — from vetted manufacturers and deliver them to industrial buyers across Latin America.' },
    { num: '02', tag: 'Trading', title: 'Commodities Trading',
      body: 'We trade bulk chemical commodities — Caustic Soda, Methanol, Ethanol, Xylene, Liquid Chlorine — sourced at commercial scale from certified global producers and traded into Latin American industry.' },
    { num: '03', tag: 'Trade Ops', title: 'Import & Export Management',
      body: 'Full management of import/export documentation, customs coordination, regulatory compliance, and international trade logistics across multiple jurisdictions.' },
    { num: '04', tag: 'Supply Chain', title: 'Supply Chain Coordination',
      body: 'Proactive supply chain planning, supplier management, and inventory flow control across our active product portfolio — engineered to prevent the supply gaps that disrupt industrial operations.' },
    { num: '05', tag: 'Port Logistics', title: 'Port Logistics Management',
      body: 'Direct handling of port operations, freight coordination, cargo documentation, and customs across major LATAM and US ports — for both bulk and packaged chemical cargo.' },
    { num: '06', tag: 'LATAM', title: 'LATAM Commercialization',
      body: 'Established commercial relationships and operational knowledge across Latin American industrial sectors — enabling efficient product placement and reliable long-term partnerships.' },
  ];

  function Stat({ value, suffix = '', label, count = true }) {
    const isNumeric = typeof value === 'number';
    const [ref, val] = useCountUp(isNumeric && count ? value : 0);
    return (
      <div ref={ref} style={{ borderLeft: '1px solid rgba(109,179,63,0.45)', paddingLeft: 22 }}>
        <div style={{
          fontFamily: 'var(--font-display)', fontSize: 'clamp(40px, 6vw, 80px)',
          lineHeight: 1, letterSpacing: '0.02em', color: '#fff',
        }}>
          <span style={{ color: 'var(--color-green)' }}>[</span>
          {isNumeric ? val : value}{suffix}
          <span style={{ color: 'var(--color-green)' }}>]</span>
        </div>
        <div style={{
          fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 500,
          letterSpacing: '0.22em', textTransform: 'uppercase',
          color: 'rgba(255,255,255,0.65)', marginTop: 14, lineHeight: 1.5,
        }}>
          {label}
        </div>
      </div>
    );
  }

  function ServiceCard({ s, i }) {
    return (
      <Reveal delay={i * 70}>
        <article
          style={{
            background: '#fff', padding: 32,
            border: '1px solid rgba(30,27,75,0.12)',
            height: '100%', display: 'flex', flexDirection: 'column',
            transition: 'all 0.32s var(--ease-out)',
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.borderLeft = '4px solid var(--color-navy)';
            e.currentTarget.style.paddingLeft = '29px';
            e.currentTarget.style.boxShadow = 'var(--shadow-card-hover)';
            e.currentTarget.style.transform = 'translateY(-2px)';
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.borderLeft = '1px solid rgba(30,27,75,0.12)';
            e.currentTarget.style.paddingLeft = '32px';
            e.currentTarget.style.boxShadow = 'none';
            e.currentTarget.style.transform = 'translateY(0)';
          }}
        >
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 28 }}>
            <span style={{
              fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 600,
              letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--color-green)',
            }}>// {s.tag}</span>
            <span style={{
              fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em',
              color: 'rgba(30,27,75,0.4)',
            }}>{s.num}</span>
          </div>
          <h3 style={{
            fontFamily: 'var(--font-display)', fontSize: 28, letterSpacing: '0.02em',
            textTransform: 'uppercase', color: 'var(--color-navy)',
            lineHeight: 0.98, margin: '0 0 14px',
          }}>
            {s.title}
          </h3>
          <p className="t-body" style={{ margin: 0, fontSize: 14 }}>{s.body}</p>
        </article>
      </Reveal>
    );
  }

  function HomePage({ openQuote }) {
    return (
      <React.Fragment>
        {/* HERO */}
        <section className="bg-hex" style={{
          position: 'relative', minHeight: '88vh',
          padding: 'calc(var(--nav-h) + 48px) var(--gutter) 0',
          color: '#fff', overflow: 'hidden',
          display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
        }}>
          <div style={{ maxWidth: 'var(--container-wide)', margin: '0 auto', width: '100%', paddingBottom: 80 }}>
            <Reveal>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 11,
                letterSpacing: '0.2em', textTransform: 'uppercase',
                color: 'var(--color-green)', display: 'inline-flex',
                alignItems: 'center', gap: 10, marginBottom: 36,
              }}>
                <span style={{ width: 24, height: 1, background: 'var(--color-green)' }} />
                Florida HQ · LATAM Distribution · 3 Continents
              </div>
            </Reveal>

            <h1 style={{
              fontFamily: 'var(--font-display)', textTransform: 'uppercase',
              fontSize: 'clamp(44px, 8.5vw, 124px)', lineHeight: 0.92, letterSpacing: '0.01em',
              color: '#fff', margin: 0,
            }}>
              <Reveal as="span" style={{ display: 'inline-block', marginRight: '0.18em' }}>Connecting</Reveal>
              <Reveal as="span" delay={80} style={{ display: 'inline-block', marginRight: '0.18em' }}>Global</Reveal>
              <Reveal as="span" delay={160} style={{ display: 'inline-block', marginRight: '0.18em' }}>Suppliers</Reveal>
              <br />
              <Reveal as="span" delay={240} style={{ display: 'inline-block', marginRight: '0.18em' }}>with</Reveal>
              <Reveal as="span" delay={320} style={{ display: 'inline-block', marginRight: '0.18em', color: 'var(--color-green)' }}>Latin</Reveal>
              <Reveal as="span" delay={400} style={{ display: 'inline-block', marginRight: '0.18em', color: 'var(--color-green)' }}>American</Reveal>
              <Reveal as="span" delay={480} style={{ display: 'inline-block' }}>Industry.</Reveal>
            </h1>

            <Reveal delay={620}>
              <p style={{
                fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.6,
                color: 'rgba(255,255,255,0.82)', maxWidth: 640, margin: '32px 0 36px',
              }}>
                Reliable sourcing, logistics, and distribution solutions for industrial chemicals and commodities across LATAM. Florida-based. Family-owned. Operating across 3 continents.
              </p>
            </Reveal>

            <Reveal delay={720} style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <button type="button" onClick={openQuote} className="gr-btn gr-btn-primary">
                Request a Quote →
              </button>
              <Link to="/contact" className="gr-btn gr-btn-ghost-light">
                Contact Our Team
              </Link>
            </Reveal>

            <Reveal delay={880} style={{
              marginTop: 72, paddingTop: 22,
              borderTop: '1px solid rgba(109,179,63,0.4)',
              display: 'flex', flexWrap: 'wrap', gap: 32,
              fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.16em',
              color: 'rgba(255,255,255,0.65)', textTransform: 'uppercase',
            }}>
              <span><span style={{ color: 'var(--color-green)' }}>●</span> Miami HQ · 25.7617° N</span>
              <span>North America · South America · Europe · Asia</span>
              <span>Est. 2019</span>
            </Reveal>
          </div>

          {/* Marquee */}
          <div style={{
            background: 'var(--color-green)', color: 'var(--color-navy)',
            overflow: 'hidden', whiteSpace: 'nowrap',
            fontFamily: 'var(--font-mono)', fontSize: 13, fontWeight: 600,
            letterSpacing: '0.2em', textTransform: 'uppercase', padding: '14px 0',
            margin: '0 calc(-1 * var(--gutter))',
          }}>
            <div style={{ display: 'inline-block', animation: 'gr-marquee 32s linear infinite', paddingRight: 40 }}>
              {[...MARQUEE, ...MARQUEE, ...MARQUEE].map((m, i) => (
                <span key={i}>{m}<span style={{ padding: '0 16px', opacity: 0.45 }}>·</span></span>
              ))}
            </div>
          </div>
        </section>

        {/* STATS BAR */}
        <section style={{ background: 'var(--color-navy-dark)', padding: '56px var(--gutter)' }}>
          <div className="gr-container-wide" style={{ padding: 0 }}>
            <div className="gr-grid-4" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 28 }}>
              <Stat value={6} suffix="+" label="Years of Experience" />
              <Stat value={3} label="Continents Covered" />
              <Stat value={12} suffix="+" label="Active Product Lines" />
              <Stat value="LATAM" label="Distribution Network" count={false} />
            </div>
          </div>
        </section>

        {/* OVERVIEW */}
        <section style={{ background: '#fff', padding: '112px var(--gutter)' }}>
          <div className="gr-container-wide gr-grid-2-split" style={{
            padding: 0, display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 72,
          }}>
            <div>
              <Eyebrow>Who We Are</Eyebrow>
              <Reveal>
                <p className="t-pull" style={{
                  borderLeft: '4px solid var(--color-green)',
                  paddingLeft: 22, color: 'var(--color-navy)',
                }}>
                  Industrial chemicals.<br />Commodities trading.<br />One trusted LATAM partner.
                </p>
              </Reveal>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
              {[
                'GR Unity Trading LLC is a family-owned trading and distribution company focused on supplying industrial raw materials, chemicals, and commodities throughout Latin America.',
                'Operating from Florida, USA, we work with international suppliers and manufacturers across the Americas, Europe, and Asia to provide reliable sourcing, logistics coordination, and supply chain solutions.',
                'We act as a bridge between global producers and Latin American industry — handling international sourcing, port logistics, import/export operations, and regional distribution under one operational team.',
                'Privately funded, family-owned, and operationally focused on long-term partnerships — we make decisions for the long term and execute with the agility larger distributors cannot match.',
              ].map((p, i) => (
                <Reveal key={i} delay={i * 70}>
                  <p className="t-body" style={{ fontSize: 16 }}>{p}</p>
                </Reveal>
              ))}
            </div>
          </div>
        </section>

        {/* SERVICES */}
        <section style={{ background: 'var(--color-off-white)', padding: '112px var(--gutter)' }}>
          <div className="gr-container-wide" style={{ padding: 0 }}>
            <div className="gr-grid-2-split" style={{
              display: 'grid', gridTemplateColumns: '1fr 1.6fr',
              gap: 56, marginBottom: 56,
            }}>
              <div>
                <Eyebrow>What We Do</Eyebrow>
                <Reveal>
                  <h2 className="t-display-3" style={{ color: 'var(--color-navy)' }}>
                    Sourcing, Trading,<br />Distribution.
                  </h2>
                </Reveal>
              </div>
              <Reveal delay={120}>
                <p className="t-body" style={{
                  fontSize: 17, paddingLeft: 28,
                  borderLeft: '4px solid var(--color-navy)', paddingTop: 24,
                }}>
                  We combine industrial chemicals distribution and commodities trading under one operational umbrella — giving LATAM clients a single, accountable supplier for both categories of chemical input, supported by full international logistics and port operations.
                </p>
              </Reveal>
            </div>

            <div className="gr-grid-3" style={{
              display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16,
            }}>
              {SERVICES.map((s, i) => <ServiceCard key={s.num} s={s} i={i} />)}
            </div>
          </div>
        </section>

        {/* CTA BAND */}
        <section className="bg-hex" style={{
          background: 'var(--color-navy)', color: '#fff',
          padding: '88px var(--gutter)',
        }}>
          <div className="gr-container-wide gr-grid-2-split" style={{
            display: 'grid', gridTemplateColumns: '1.4fr 1fr',
            gap: 48, alignItems: 'center', padding: 0,
          }}>
            <div>
              <Eyebrow>Get Started</Eyebrow>
              <Reveal>
                <h2 className="t-display-3" style={{ color: '#fff' }}>
                  Tell us what you need.<br />We&rsquo;ll source it.
                </h2>
              </Reveal>
              <Reveal delay={120}>
                <p style={{
                  fontFamily: 'var(--font-body)', fontSize: 17, lineHeight: 1.6,
                  color: 'rgba(255,255,255,0.78)', maxWidth: 560, marginTop: 24,
                }}>
                  Whether you&rsquo;re procuring industrial chemicals, sourcing chemical commodities, or coordinating LATAM distribution — our team responds within 24 business hours.
                </p>
              </Reveal>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              <button type="button" onClick={openQuote} className="gr-btn gr-btn-primary">
                Request a Quote →
              </button>
              <Link to="/contact" className="gr-btn gr-btn-ghost-light">
                Contact Our Team
              </Link>
            </div>
          </div>
        </section>
      </React.Fragment>
    );
  }

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