function IntroStrip() {
  const quote = "Nexitura is a global digital solutions studio helping companies grow through smarter systems, sharper design, and intelligent automation.";
  const words = quote.split(' ');

  const badges = [
    { Icon: IconBolt, title: 'End-to-End Delivery', sub: 'Discovery to deployment, one team.' },
    { Icon: IconChip, title: 'Technology-First', sub: 'Modern stack, no legacy tax.' },
    { Icon: IconShield, title: 'Global Standards', sub: 'Built for international quality bars.' },
  ];

  return (
    <section id="intro-strip" style={{
      background: 'rgba(10, 14, 26, 0.98)',
      borderTop: '1px solid rgba(0,200,224,0.1)',
      borderBottom: '1px solid rgba(0,200,224,0.1)',
      padding: '96px 0',
    }}>
      <div className="container">
        <div className="reveal" style={{
          maxWidth: 880,
          margin: '0 auto',
          borderLeft: '4px solid var(--stellar-cyan)',
          background: 'rgba(0,200,224,0.04)',
          borderRadius: '0 14px 14px 0',
          padding: 'clamp(24px, 4vw, 40px) clamp(28px, 4vw, 56px)',
          position: 'relative',
        }}>
          <div style={{
            position: 'absolute', top: -14, left: 32,
            fontFamily: 'Space Mono', fontSize: 11, letterSpacing: '0.3em',
            color: 'var(--stellar-cyan)',
            background: 'rgba(10,14,26,0.98)',
            padding: '4px 12px',
            borderRadius: 4,
            border: '1px solid rgba(0,200,224,0.25)',
          }}>≫ MANIFESTO</div>
          <p style={{
            fontFamily: 'Syne, sans-serif',
            fontSize: 'clamp(18px, 2vw, 24px)',
            lineHeight: 1.7,
            fontStyle: 'italic',
            color: 'var(--stardust-white)',
            fontWeight: 500,
          }}>
            {words.map((w, i) => (
              <span key={i} className="quote-word" style={{ animationDelay: `${i * 30}ms` }}>
                {w}{' '}
              </span>
            ))}
          </p>
        </div>

        <div style={{
          marginTop: 64,
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
          gap: 24,
        }}>
          {badges.map((b, i) => (
            <div key={i} className="reveal trust-badge" data-delay={i + 1}>
              <div className="trust-icon"><b.Icon size={28} /></div>
              <div className="trust-title">{b.title}</div>
              <div className="trust-sub">{b.sub}</div>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        .quote-word {
          display: inline-block;
          opacity: 0;
          transform: translateY(8px);
          margin-right: 0.25em;
        }
        .reveal.revealed .quote-word {
          animation: quote-word-in 0.4s forwards;
        }
        @keyframes quote-word-in {
          to { opacity: 1; transform: translateY(0); }
        }
        .trust-badge {
          border: 1px solid rgba(0,200,224,0.12);
          border-radius: 14px;
          padding: 24px;
          background: rgba(10,14,26,0.4);
          transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease;
        }
        .trust-badge:hover {
          border-color: rgba(0,200,224,0.4);
          background: rgba(0,200,224,0.04);
          transform: translateY(-4px);
        }
        .trust-icon {
          width: 48px; height: 48px;
          border-radius: 12px;
          background: rgba(0,200,224,0.08);
          border: 1px solid rgba(0,200,224,0.2);
          display: flex; align-items: center; justify-content: center;
          color: var(--stellar-cyan);
          margin-bottom: 16px;
        }
        .trust-title {
          font-family: system-ui, -apple-system, sans-serif;
          font-size: 16px; font-weight: 600;
          color: var(--stardust-white);
          margin-bottom: 6px;
        }
        .trust-sub {
          font-family: 'Syne', sans-serif;
          font-size: 14px;
          color: var(--asteroid-grey);
          line-height: 1.6;
        }
      `}</style>
    </section>
  );
}

window.IntroStrip = IntroStrip;