/* DIFFERENTIATORS — "Por qué AceroLab".
   4 cartas con cifras reales: 30+ años, 12h cotización, 8 procesos en planta, 100% bajo techo. */

const Differentiators = ({ t }) => {
  return (
    <section id="diferenciadores" className="section" style={{ background: 'var(--bg-1)', borderTop: '1px solid var(--hairline)' }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 64, alignItems: 'baseline', marginBottom: 80 }}>
          <span className="eyebrow">— 06</span>
          <div>
            <h2 className="display display-lg" style={{ maxWidth: '15ch', textWrap: 'balance' }}>
              {t('Lo que nos hace ', 'What makes us ')}
              <em style={{ fontStyle: 'italic', color: 'var(--ink-2)' }}>{t('diferentes', 'different')}</em>.
            </h2>
          </div>
        </div>

        <div className="diff-grid" style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(12, 1fr)',
          gap: 1,
          background: 'var(--hairline)',
          border: '1px solid var(--hairline)',
        }}>
          <DiffCard
            span={7}
            metric="30+"
            unit={t('AÑOS', 'YEARS')}
            title={t('Más de tres décadas de oficio.', 'Three decades of craft and counting.')}
            body={t(
              'Planta propia operando desde 1992. Hemos visto modas y materiales ir y venir; el acero no. Lo que entregamos hoy lo seguirá entregando dentro de 30 años, exactamente igual.',
              'Own plant operating since 1992. Trends and materials come and go; steel does not. What we deliver today will be the same in 30 years.'
            )}
            tone="dark"
          />
          <DiffCard
            span={5}
            metric="12h"
            unit={t('HORAS HÁBILES', 'BUSINESS HOURS')}
            title={t('Cotización formal en menos de 12 horas.', 'Formal quote in under 12 hours.')}
            body={t(
              'Mándanos la idea hoy. Mañana antes del mediodía tienes una cotización en PDF con materiales, tiempos y precio en firme. Garantía de fabricación de 3 años.',
              'Send us the idea today. By tomorrow noon you have a PDF quote with materials, timeline and firm price. 3-year fabrication warranty.'
            )}
          />
          <DiffCard
            span={5}
            metric="8"
            unit={t('PROCESOS EN PLANTA', 'IN-HOUSE PROCESSES')}
            title={t('Cizalla, doblado, soldadura y pintura — propios.', 'Shear, bend, weld and paint — all ours.')}
            body={t(
              'Cizalla, punzonado, troquelado, doblado, soldadura, punteado, pintura electrostática y carpintería. Sin subcontratos en las etapas críticas.',
              'Shearing, punching, die-cutting, bending, welding, spot welding, powder coating and carpentry. No subcontracting on critical stages.'
            )}
          />
          <DiffCard
            span={7}
            metric="100"
            unit="%"
            title={t('Todo bajo nuestro techo.', 'Everything under our roof.')}
            body={t(
              'No subcontratamos cizalla, doblado, soldadura ni pintura. Lo que coordinamos contigo es lo que pasa en piso. Visitas a planta bienvenidas.',
              'We do not subcontract shearing, bending, welding or paint. What you discuss with us is exactly what happens on the floor. Plant visits welcome.'
            )}
            evidence={
              <div className="mono" style={{ fontSize: 10, color: 'rgba(255,255,255,0.5)', display: 'flex', gap: 16, flexWrap: 'wrap' }}>
                <span>TLALNEPANTLA · EDOMEX</span>
                <span>·</span>
                <span>{t('VISITAS A PLANTA BIENVENIDAS', 'PLANT VISITS WELCOME')}</span>
              </div>
            }
            tone="dark"
          />
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .diff-grid > div { grid-column: span 12 !important; }
        }
      `}</style>
    </section>
  );
};

const DiffCard = ({ span, metric, unit, title, body, evidence, tone }) => {
  const isDark = tone === 'dark';
  return (
    <div style={{
      gridColumn: `span ${span}`,
      background: isDark ? '#0e0e10' : 'var(--bg-1)',
      color: isDark ? '#f5f5f7' : 'var(--ink)',
      padding: 'clamp(28px, 3.5vw, 48px)',
      display: 'flex',
      flexDirection: 'column',
      gap: 24,
      minHeight: 320,
    }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, flexWrap: 'wrap' }}>
        <span
          className="display"
          style={{
            fontSize: 'clamp(72px, 9vw, 140px)',
            lineHeight: 0.9,
            fontWeight: 500,
            letterSpacing: '-0.04em',
            background: isDark
              ? 'linear-gradient(180deg, #f5f5f7 0%, #888892 100%)'
              : 'linear-gradient(180deg, #2a2a30 0%, #888892 100%)',
            WebkitBackgroundClip: 'text',
            backgroundClip: 'text',
            WebkitTextFillColor: 'transparent',
            color: 'transparent',
          }}
        >
          {metric}
        </span>
        <span className="mono" style={{ fontSize: 11, color: isDark ? 'rgba(255,255,255,0.5)' : 'var(--ink-3)', letterSpacing: '0.12em' }}>{unit}</span>
      </div>
      <div>
        <h3 className="display" style={{ fontSize: 'clamp(20px, 2vw, 26px)', fontWeight: 500, lineHeight: 1.15, marginBottom: 12, color: isDark ? '#f5f5f7' : 'var(--ink)' }}>
          {title}
        </h3>
        <p style={{ fontSize: 14, lineHeight: 1.6, color: isDark ? 'rgba(255,255,255,0.65)' : 'var(--ink-2)', maxWidth: 480 }}>{body}</p>
      </div>
      {evidence && <div style={{ marginTop: 'auto', paddingTop: 16, borderTop: `1px solid ${isDark ? 'rgba(255,255,255,0.1)' : 'var(--hairline)'}` }}>{evidence}</div>}
    </div>
  );
};

window.Differentiators = Differentiators;