// ProductCard — used by Chemicals and Commodities pages.
(function () {
  const { useState } = React;
  const { Reveal } = window.GR;

  function ProductCard({ p, i = 0, onQuote, kind = 'chemical' }) {
    const isCommodity = kind === 'commodity';
    const [tilt, setTilt] = useState({ x: 0, y: 0 });

    const onMove = (e) => {
      const r = e.currentTarget.getBoundingClientRect();
      const dx = (e.clientX - r.left) / r.width - 0.5;
      const dy = (e.clientY - r.top) / r.height - 0.5;
      setTilt({ x: -dy * 2.2, y: dx * 2.2 });
    };

    return (
      <Reveal delay={(i % 3) * 60}>
        <article
          onMouseMove={onMove}
          onMouseLeave={() => setTilt({ x: 0, y: 0 })}
          onMouseEnter={(e) => {
            e.currentTarget.style.boxShadow = '0 22px 50px -22px rgba(30,27,75,0.32)';
            e.currentTarget.style.borderColor = 'var(--color-green)';
          }}
          onMouseOut={(e) => {
            e.currentTarget.style.boxShadow = 'none';
            e.currentTarget.style.borderColor = 'rgba(30,27,75,0.12)';
          }}
          style={{
            background: '#fff',
            border: '1px solid rgba(30,27,75,0.12)',
            padding: 28, height: '100%',
            display: 'flex', flexDirection: 'column', gap: 12,
            transform: `perspective(1000px) rotateX(${tilt.x}deg) rotateY(${tilt.y}deg)`,
            transition: 'transform 0.18s ease-out, box-shadow 0.32s var(--ease-out), border-color 0.32s var(--ease-out)',
          }}
        >
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 10 }}>
            <span style={{
              display: 'inline-block', padding: '6px 10px',
              background: isCommodity ? 'var(--color-navy)' : 'var(--color-green)',
              color: isCommodity ? '#fff' : 'var(--color-navy)',
              fontFamily: 'var(--font-mono)', fontSize: 9, fontWeight: 600,
              letterSpacing: '0.2em', textTransform: 'uppercase',
            }}>
              {isCommodity ? 'Commodity' : 'Industrial Chemical'}
            </span>
            <span style={{
              fontFamily: 'var(--font-mono)', fontSize: 10, fontWeight: 500,
              letterSpacing: '0.2em', textTransform: 'uppercase',
              color: 'var(--color-green)', textAlign: 'right',
            }}>
              {p.category}
            </span>
          </div>

          <h3 style={{
            fontFamily: 'var(--font-display)', fontSize: 32, letterSpacing: '0.02em',
            textTransform: 'uppercase', color: 'var(--color-navy)',
            lineHeight: 0.96, margin: '4px 0 0',
          }}>
            {p.name}
          </h3>

          <p style={{
            fontFamily: 'var(--font-body)', fontSize: 13.5, lineHeight: 1.6,
            color: 'rgba(30,27,75,0.72)', margin: 0, flex: 1,
          }}>
            {p.desc}
          </p>

          <div style={{ display: 'grid', gap: 10, marginTop: 4 }}>
            {p.grades && (
              <div style={{ display: 'flex', gap: 12, alignItems: 'baseline' }}>
                <span style={{
                  fontFamily: 'var(--font-mono)', fontSize: 9, fontWeight: 600,
                  letterSpacing: '0.2em', color: 'var(--color-green)',
                  textTransform: 'uppercase', minWidth: 76,
                }}>Grades</span>
                <span style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--color-navy)' }}>
                  {p.grades}
                </span>
              </div>
            )}
            {p.packaging && (
              <div style={{ display: 'flex', gap: 12, alignItems: 'baseline' }}>
                <span style={{
                  fontFamily: 'var(--font-mono)', fontSize: 9, fontWeight: 600,
                  letterSpacing: '0.2em', color: 'var(--color-green)',
                  textTransform: 'uppercase', minWidth: 76,
                }}>Packaging</span>
                <span style={{ fontFamily: 'var(--font-body)', fontSize: 12.5, color: 'var(--color-navy)' }}>
                  {p.packaging}
                </span>
              </div>
            )}
          </div>

          <div>
            <div style={{
              fontFamily: 'var(--font-mono)', fontSize: 9, fontWeight: 600,
              letterSpacing: '0.22em', textTransform: 'uppercase',
              color: 'var(--color-green)', marginBottom: 8,
            }}>
              Applications
            </div>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
              {p.apps.map((a) => (
                <span key={a} style={{
                  fontFamily: 'var(--font-mono)', fontSize: 9.5, letterSpacing: '0.08em',
                  padding: '4px 7px', background: 'rgba(30,27,75,0.05)', color: 'var(--color-navy)',
                }}>
                  {a}
                </span>
              ))}
            </div>
          </div>

          <button
            type="button" onClick={onQuote}
            className="gr-btn gr-btn-primary"
            style={{ marginTop: 8, padding: '12px 16px', fontSize: 11, letterSpacing: '0.2em' }}
          >
            Request Quote →
          </button>
        </article>
      </Reveal>
    );
  }

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