/* HERO — frase ancla principal.
   Composición: número de versión, eyebrow + métrica, titular masivo "steel-text",
   párrafo subtítulo, CTAs y barra inferior con cifras clave. Marquee lateral opcional. */

const Hero = ({ t, lang }) => {
  const [time, setTime] = React.useState('');

  React.useEffect(() => {
    const update = () => {
      const now = new Date();
      const opts = { timeZone: 'America/Mexico_City', hour: '2-digit', minute: '2-digit', hour12: false };
      setTime(now.toLocaleTimeString(lang === 'es' ? 'es-MX' : 'en-US', opts));
    };
    update();
    const id = setInterval(update, 30000);
    return () => clearInterval(id);
  }, [lang]);

  return (
    <section
      id="top"
      className="tech-grid"
      style={{
        position: 'relative',
        minHeight: '100vh',
        paddingTop: 120,
        paddingBottom: 80,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
        overflow: 'hidden',
      }}
    >
      {/* Radial mask softening grid edges */}
      <div
        aria-hidden="true"
        style={{
          position: 'absolute', inset: 0,
          background: 'radial-gradient(ellipse 80% 60% at 50% 0%, transparent 0%, var(--bg) 80%)',
          pointerEvents: 'none',
        }}
      />

      <div className="wrap" style={{ position: 'relative', zIndex: 1, flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
        {/* Top status row */}
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 80, flexWrap: 'wrap', gap: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <span className="tag">
              <span className="dot pulse"></span>
              <span>{t('Planta operando · CDMX', 'Plant operating · Mexico City')}</span>
            </span>
            <span className="mono" style={{ color: 'var(--ink-3)' }}>
              {time} <span style={{ color: 'var(--ink-4)' }}>CDMX</span>
            </span>
          </div>
          <div className="mono" style={{ color: 'var(--ink-3)' }}>
            {t('30+ AÑOS · PLANTA PROPIA', '30+ YRS · OWN PLANT')}
          </div>
        </div>

        {/* Massive title block */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 32 }}>
          <div className="display display-xl" style={{ textWrap: 'balance' }}>
            <span style={{ color: 'var(--ink)' }}>{t('Del boceto', 'From sketch')}</span>
            <br />
            <span className="steel-text">{t('al acero.', 'to steel.')}</span>
          </div>

          <div style={{
            display: 'grid',
            gridTemplateColumns: 'minmax(0, 1fr) minmax(280px, 0.6fr)',
            gap: 48,
            alignItems: 'end',
            paddingTop: 24,
            borderTop: '1px solid var(--hairline)',
          }} className="hero-bottom">
            <div>
              <p className="eyebrow" style={{ marginBottom: 12 }}>
                {t('— Fabricación metálica · B2B / B2C / Gobierno', '— Metal fabrication · B2B / B2C / Government')}
              </p>
              <p style={{ fontSize: 'clamp(16px, 1.4vw, 20px)', color: 'var(--ink-2)', maxWidth: 560, lineHeight: 1.5, textWrap: 'pretty' }}>
                {t(
                  'Cocinas industriales, mobiliario urbano, casetas, cubículos y archiveros en acero. B2B, B2C y gobierno. Boceto técnico gratuito. Cotización formal en 12 horas hábiles. Más de 30 años fabricando bajo el mismo techo. Garantía 3 años.',
                  'Industrial kitchens, urban furniture, booths, cubicles and steel filing. B2B, B2C and government. Free technical sketch. Formal quote in 12 business hours. 30+ years fabricating under one roof. 3-year warranty.'
                )}
              </p>
              <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
                <a href="#contacto" className="btn btn-primary">
                  {t('Cotizar mi proyecto', 'Quote my project')}
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
                </a>
                <a href="#portafolio" className="btn">
                  {t('Ver portafolio', 'View portfolio')}
                </a>
              </div>
            </div>

            {/* Metric stack right */}
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, background: 'var(--hairline)', border: '1px solid var(--hairline)' }}>
              {[
                { v: '12h', l: t('Cotización formal', 'Formal quote') },
                { v: '30+', l: t('Años fabricando', 'Years building') },
                { v: '3', l: t('Años de garantía', 'Years warranty') },
                { v: '8', l: t('Procesos en planta', 'In-house processes') },
              ].map((m, i) => (
                <div key={i} style={{ background: 'var(--bg)', padding: 20 }}>
                  <div className="display" style={{ fontSize: 36, lineHeight: 1, marginBottom: 8, fontWeight: 500 }}>{m.v}</div>
                  <div className="mono" style={{ color: 'var(--ink-3)', fontSize: 10, textTransform: 'uppercase' }}>{m.l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Bottom marquee strip — what we build */}
      <div style={{ position: 'relative', zIndex: 1, marginTop: 80, borderTop: '1px solid var(--hairline)', borderBottom: '1px solid var(--hairline)', overflow: 'hidden' }}>
        <div style={{ display: 'flex', gap: 0, animation: 'marquee 60s linear infinite', whiteSpace: 'nowrap' }}>
          {Array(2).fill(0).map((_, k) => (
            <React.Fragment key={k}>
              {[
                t('COCINAS INDUSTRIALES', 'INDUSTRIAL KITCHENS'),
                t('MOBILIARIO URBANO', 'URBAN FURNITURE'),
                t('TÓTEMS Y MUPIS', 'TOTEMS & MUPIS'),
                t('CASETAS DE VIGILANCIA', 'GUARD BOOTHS'),
                t('CAMPANAS DE EXTRACCIÓN', 'EXHAUST HOODS'),
                t('BARRAS DE SERVICIO', 'SERVICE COUNTERS'),
                t('CUBÍCULOS DE OFICINA', 'OFFICE CUBICLES'),
                t('ARCHIVEROS METÁLICOS', 'METAL FILING'),
                t('ESTANTERÍAS', 'SHELVING'),
                t('EXHIBIDORES', 'DISPLAY CASES'),
                t('GABINETES TÉCNICOS', 'TECHNICAL CABINETS'),
                t('LO QUE NECESITES', 'WHATEVER YOU NEED'),
              ].map((label, i) => (
                <div key={`${k}-${i}`} style={{ display: 'inline-flex', alignItems: 'center', gap: 28, padding: '18px 28px' }}>
                  <span className="mono" style={{ fontSize: 12, color: 'var(--ink-2)', letterSpacing: '0.1em' }}>{label}</span>
                  <span style={{ width: 4, height: 4, background: 'var(--ink-4)', borderRadius: '50%' }}></span>
                </div>
              ))}
            </React.Fragment>
          ))}
        </div>
      </div>
      <style>{`
        @keyframes marquee {
          0% { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }
        @media (max-width: 900px) {
          .hero-bottom { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </section>
  );
};

window.Hero = Hero;