function Hero({ onCotizar }) {
  return (
    <section id="top" data-screen-label="Hero" className="hero-section">
      <HeroBackground />

      <div className="hero-layout">

        <div className="hero-text">
          <h1 className="hero-headline">
            Soluciones en papel y materia prima para la{' '}
            <span className="hero-gradient-text">industria colombiana</span>
          </h1>

          <p className="hero-desc">
            Importamos, distribuimos y desarrollamos productos especializados para la industria gráfica. Más de una década construyendo relaciones con proveedores globales y clientes locales.
          </p>

          <div className="hero-btns">
            <button className="btn btn-gradient" onClick={() => window.openWhatsApp()}>
              Contáctanos
            </button>
            <button className="btn btn-outline-light" onClick={() => {
              const el = document.getElementById('portafolio');
              if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: 'smooth' });
            }}>
              Quiero saber más
            </button>
          </div>

          <div className="hero-stats">
            {[
              { num: '+25 años', sub: 'de Trayectoria' },
              { num: 'Global',   sub: 'Proveedores internacionales y nacionales' },
              { num: 'Local',    sub: 'Distribución en Colombia' },
            ].map((s, i) => (
              <div key={i} className="hero-stat-item">
                <div className="hero-stat-num">{s.num}</div>
                <div className="hero-stat-sub">{s.sub}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="hero-visual-wrap">
          <HeroCharacter />
        </div>
      </div>

      <style>{`
        /* ── Hero section ── */
        .hero-section {
          position: relative;
          min-height: 100vh;
          padding-top: 120px;
          padding-bottom: 60px;
          background: var(--navy);
          color: white;
          overflow: hidden;
        }

        /* ── Two-column layout ── */
        .hero-layout {
          position: relative; z-index: 2;
          display: grid;
          grid-template-columns: minmax(0, 680px) 1fr;
          align-items: stretch;
          min-height: calc(100vh - 120px);
          padding-left: 80px;
        }

        /* ── Text column ── */
        .hero-text {
          display: flex; flex-direction: column; justify-content: center;
          padding-right: 40px; padding-bottom: 40px;
        }

        /* ── Headline ── */
        .hero-headline {
          font-size: clamp(24px, 3.3vw, 53px);
          font-weight: 800; line-height: 1.06;
          color: white; margin-bottom: 20px;
          text-transform: uppercase; letter-spacing: -0.005em;
        }
        .hero-gradient-text {
          background: var(--gradient);
          -webkit-background-clip: text; background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        /* ── Description ── */
        .hero-desc {
          font-size: 15px; line-height: 1.6;
          color: rgba(255,255,255,0.78);
          margin-bottom: 28px; max-width: 520px; font-weight: 400;
        }

        /* ── Buttons ── */
        .hero-btns {
          display: flex; gap: 16px; margin-bottom: 40px; flex-wrap: wrap;
        }

        /* ── Stats ── */
        .hero-stats {
          display: grid;
          grid-template-columns: repeat(3, auto);
          gap: 40px; align-items: start;
        }
        .hero-stat-num {
          font-size: clamp(18px, 1.6vw, 26px);
          font-weight: 800; text-transform: uppercase;
          color: white; margin-bottom: 6px; letter-spacing: -0.005em;
        }
        .hero-stat-sub {
          font-size: 13px; color: rgba(255,255,255,0.70);
          max-width: 180px; line-height: 1.4;
        }

        /* ── Character column ── */
        .hero-visual-wrap {
          display: flex; flex-direction: column;
          justify-content: flex-end; align-items: flex-end;
          padding-bottom: 110px; padding-right: 77px;
        }

        /* ══ RESPONSIVE ══════════════════════════════ */

        /* Tablet: hide character, keep single text layout */
        @media (max-width: 1024px) {
          .hero-layout { grid-template-columns: 1fr; }
          .hero-visual-wrap { display: none; }
          .hero-text { max-width: 640px; }
        }

        /* Mobile landscape / large phone */
        @media (max-width: 768px) {
          .hero-section {
            padding-top: 90px;
            padding-bottom: 48px;
            min-height: 100svh;
          }
          .hero-layout {
            padding-left: 24px;
            padding-right: 24px;
            min-height: calc(100svh - 90px);
          }
          .hero-text {
            padding-right: 0;
            padding-bottom: 24px;
            justify-content: center;
          }
          .hero-headline { font-size: clamp(26px, 7vw, 42px); }
          .hero-desc { font-size: 14px; max-width: 100%; margin-bottom: 24px; }
          .hero-btns { margin-bottom: 32px; gap: 12px; }
          .hero-stats { gap: 24px 20px; }
        }

        /* Small phone */
        @media (max-width: 480px) {
          .hero-layout { padding-left: 20px; padding-right: 20px; }
          .hero-headline { font-size: clamp(22px, 8vw, 34px); }
          .hero-btns .btn { font-size: 12px !important; padding: 12px 20px !important; }
          .hero-stats {
            grid-template-columns: 1fr 1fr;
            gap: 20px 16px;
          }
        }

        /* Very small / landscape short */
        @media (max-width: 360px) {
          .hero-headline { font-size: 7.5vw; }
          .hero-stats { grid-template-columns: 1fr; gap: 16px; }
        }
      `}</style>
    </section>
  );
}

function HeroBackground() {
  return (
    <>
      <video autoPlay muted loop playsInline style={{
        position: 'absolute', inset: 0,
        width: '100%', height: '100%',
        objectFit: 'cover', zIndex: 0,
      }} src="Paper_warehouse_forklift_202604101442.mp4" />
      <div style={{
        position: 'absolute', inset: 0, zIndex: 1,
        background: 'linear-gradient(160deg, rgba(10,18,40,0.78) 0%, rgba(15,27,61,0.80) 50%, rgba(26,36,86,0.88) 100%)',
      }} />
      <div style={{
        position: 'absolute', inset: 0, zIndex: 1, pointerEvents: 'none',
        background: 'radial-gradient(ellipse at 70% 50%, rgba(6,182,212,0.10) 0%, transparent 55%)',
      }} />
      <div style={{
        position: 'absolute', inset: 0, zIndex: 1, pointerEvents: 'none',
        background: 'radial-gradient(ellipse at center, transparent 35%, rgba(10,18,40,0.55) 100%)',
      }} />
    </>
  );
}

function HeroCharacter() {
  return (
    <div style={{ position: 'relative', width: '100%', maxWidth: 240, display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
      <div style={{
        position: 'absolute', top: '10%', left: '50%',
        transform: 'translateX(-50%)',
        width: '110%', height: '80%',
        background: 'radial-gradient(ellipse, rgba(6,182,212,0.30) 0%, rgba(16,185,129,0.14) 40%, transparent 70%)',
        filter: 'blur(24px)', pointerEvents: 'none',
      }} />
      <img
        src="assets/contactanos-character.png"
        alt="Contáctanos por WhatsApp"
        onClick={() => window.openWhatsApp()}
        style={{
          width: '100%', height: 'auto', maxHeight: 280,
          objectFit: 'contain', position: 'relative', zIndex: 2,
          filter: 'drop-shadow(0 18px 36px rgba(0,0,0,0.45))',
          animation: 'heroFloat 6s ease-in-out infinite',
          cursor: 'pointer',
        }}
      />
      <style>{`
        @keyframes heroFloat {
          0%, 100% { transform: translateY(0); }
          50%       { transform: translateY(-10px); }
        }
      `}</style>
    </div>
  );
}

window.Hero = Hero;