const Hero = () => (
  <section id="inicio" className="amp-px amp-py" style={{
    position: 'relative', overflow: 'hidden', padding: '96px 48px',
    background: '#F8F7F3',
  }}>
    {/* orbital ring decorative */}
    <div style={{
      position: 'absolute', top: -240, right: -240, width: 600, height: 600,
      border: '1px solid rgba(196,168,79,0.18)', borderRadius: '50%',
      pointerEvents: 'none',
    }}/>
    <div className="amp-g2" style={{
      maxWidth: 1440, margin: '0 auto', display: 'grid',
      gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'center', position: 'relative',
    }}>
      <div>
        <h1 className="amp-t-xl" style={{
          fontFamily: 'Inter', fontWeight: 700, fontSize: 84, lineHeight: 1.05,
          letterSpacing: '-0.02em', color: '#0F3518', margin: '0 0 24px',
          textWrap: 'balance',
        }}>
          Energía <span style={{ color: '#C4A84F' }}>solar</span> para hogares y empresas en Colombia.
        </h1>
        <p style={{
          fontFamily: 'Inter', fontSize: 20, lineHeight: 1.5,
          color: 'rgba(26,26,24,0.72)', margin: '0 0 24px', maxWidth: 520, fontWeight: 400,
        }}>
          Soluciones energéticas <strong style={{ color: '#0F3518', fontWeight: 600 }}>inteligentes</strong> para el Caribe colombiano y todo el país.
        </p>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 40 }}>
          <GoldRule />
          <span style={{ color: '#C4A84F', fontWeight: 700, fontSize: 14, letterSpacing: '.04em' }}>
            Energía que <em>trasciende</em>
          </span>
        </div>
        <div style={{ display: 'flex', gap: 24, alignItems: 'center', flexWrap: 'wrap' }}>
          <a href="/diagnostico-energetico/" style={{ textDecoration: 'none' }}>
            <Button variant="primary" icon="arrow_forward">Iniciar diagnóstico energético</Button>
          </a>
          <a href="#proceso" style={{ textDecoration: 'none' }}>
            <Button variant="ghost">Conocer soluciones →</Button>
          </a>
        </div>
        <div className="amp-g3" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 24,
          marginTop: 64, paddingTop: 32, borderTop: '1px solid rgba(27,92,44,.10)' }}>
          {[
            { icon: 'savings', label: 'Ahorro energético medible' },
            { icon: 'verified', label: 'Control inteligente de la energía' },
            { icon: 'schedule', label: 'Energía preparada para el futuro' },
          ].map(v => (
            <div key={v.label}>
              <Icon name={v.icon} size={32} color="#C4A84F" style={{ marginBottom: 8, display: 'block' }}/>
              <p style={{ margin: 0, fontFamily: 'Inter', fontWeight: 600, fontSize: 16, color: '#0F3518', lineHeight: 1.3 }}>{v.label}</p>
            </div>
          ))}
        </div>
      </div>

      <div style={{ position: 'relative' }}>
        <div style={{
          width: '100%', height: 460, overflow: 'hidden',
          borderRadius: '16px 16px 0 0',
          backgroundImage: 'url(/assets/hero-residencial.jpg)',
          backgroundSize: 'cover', backgroundPosition: 'center',
          position: 'relative',
        }}>
          <div style={{
            position: 'absolute', inset: 0,
            background: 'linear-gradient(180deg, rgba(15,53,24,0) 50%, rgba(15,53,24,0.45) 100%)',
          }}/>
          <div style={{
            position: 'absolute', top: 20, left: 20,
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '6px 14px', borderRadius: 9999,
            background: 'rgba(15,53,24,0.78)', backdropFilter: 'blur(12px)',
            color: '#C4A84F', fontSize: 11, fontWeight: 700, letterSpacing: '.16em',
            textTransform: 'uppercase', border: '1px solid rgba(196,168,79,0.28)',
          }}>● Proyecto residencial</div>
        </div>
        <div style={{
          width: '100%', boxSizing: 'border-box',
          background: '#1B5C2C', color: '#fff', padding: 32,
          borderRadius: '0 0 16px 16px',
        }}>
          <h3 style={{ fontFamily: 'Inter', fontSize: 24, fontWeight: 600, margin: '0 0 8px', lineHeight: 1.25 }}>
            Ahorro, control y tecnología energética en un solo proyecto
          </h3>
          <p style={{ fontSize: 14, color: 'rgba(255,255,255,0.72)', margin: 0, lineHeight: 1.6 }}>
            Diseñamos soluciones que integran energía solar, datos y acompañamiento técnico.
          </p>
        </div>
      </div>
    </div>
  </section>
);

window.Hero = Hero;