/* How It Works — 4 numbered steps with a dotted connector line on desktop.
   Layout collapses to 2 columns on tablet and 1 column on phone via CSS. */

const HowItWorks = () => {
  const steps = [
    { n:'01', title:'Apply',
      body:'Tell us about you, your audience, and the transformation you\'re selling.' },
    { n:'02', title:'Discovery call',
      body:'We map out your dream app together: features, flow, vibe. You leave knowing exactly what you\'re getting.' },
    { n:'03', title:'We build, you prep your launch',
      body:'While we design and build, you warm up your audience based on the marketing plan we agree on together.' },
    { n:'04', title:'Launch & grow',
      body:'Live on the App Store. We handle updates and tech. You handle the magic.' },
  ];

  return (
    <section id="how">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">HOW IT WORKS</div>
          <h2>From idea to App Store, <span className="it">all taken care of.</span></h2>
        </div>

        <div className="how-grid">
          {/* Connecting dotted line — only meaningful on the desktop layout. */}
          <div aria-hidden="true" className="how-line"/>
          {steps.map((s, i) => (
            <div key={i} className="how-step">
              <div className="how-step-num"><span>{s.n}</span></div>
              <h3 className="how-step-title">{s.title}</h3>
              <p className="how-step-body">{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.AAS = window.AAS || {};
window.AAS.HowItWorks = HowItWorks;