/* global React */

/** Wraps a single word so it can be staggered via CSS transition-delay */
const Word = ({ children, delay }) => (
  <span className="word" style={{ transitionDelay: `${delay}ms` }}>{children}</span>
);

function Statement() {
  // Single number-line stagger. The space before each word is a literal space
  // OUTSIDE the span, so the words remain inline-block and wrap naturally.
  return (
    <section className="at-statement">
      <div className="at-statement-frame">
        <span className="at-statement-label at-statement-label--left">
          DIAGNOSE · ARCHITECT · SHIP · OPERATE
        </span>
        <span className="at-statement-label at-statement-label--right">
          ANSARTECH · 2026 · DEPLOY
        </span>

        <div className="at-eyebrow" style={{ justifyContent: 'center' }}>Our position</div>
        <p className="at-statement-quote">
          <Word delay={0}>We</Word>{' '}
          <Word delay={70}>don't</Word>{' '}
          <Word delay={140}>sell</Word>{' '}
          <Word delay={210}>hours.</Word>
          <br />
          <Word delay={340}>We</Word>{' '}
          <Word delay={410}>sell</Word>{' '}
          <Word delay={480}>the</Word>{' '}
          <Word delay={550}>system</Word>
          <br />
          <Word delay={680}>that</Word>{' '}
          <span className="at-red">
            <Word delay={760}>replaces</Word>{' '}
            <Word delay={840}>the</Word>{' '}
            <Word delay={920}>hours.</Word>
          </span>
        </p>
        <div className="at-statement-attr">Zian Ansar · Founder · ansartech.net</div>
      </div>
    </section>
  );
}

window.Statement = Statement;