/* global React */

function Solution() {
  const steps = [
    { n: 'Step 01', title: 'Discovery', body: 'We map your current stack, your exception patterns, and where your team spends the most reactive time.' },
    { n: 'Step 02', title: 'Strategy',  body: 'We design the automation logic around your specific property management system, operations tools, cleaner communication workflow, and team structure.' },
    { n: 'Step 03', title: 'Build',     body: 'We connect your systems and deploy the agents. Everything is tested thoroughly before deployment.' },
    { n: 'Step 04', title: 'Ongoing optimization', body: 'We monitor, adjust, and expand the system as your portfolio grows.' },
  ];
  return (
    <section id="solution">
      <span className="section-mark">§ 02 / Solution</span>
      <div className="wrap">
        <div className="solution-head">
          <div>
            <Reveal><span className="eyebrow">What we are</span></Reveal>
            <Reveal delay={80}>
              <h2 className="h-section" style={{ marginTop: 22 }}>
                The <em>Ops Automation</em> Layer
              </h2>
            </Reveal>
          </div>
          <Reveal delay={140}>
            <p className="lead">
              A system that sits on top of your existing stack, actively checks in with your field team, and handles what your tools leave to humans.
            </p>
          </Reveal>
        </div>

        <div className="steps">
          {steps.map((s, i) => (
            <Reveal key={s.n} delay={i * 80} className="step">
              <span className="step-num">{s.n}</span>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Solution = Solution;