function LaunchSteps() {
  const steps = [
    { n: '01', t: 'Discovery & permit map', d: 'We map every permit, hearing, and inspection your city, county and state require — with realistic dates.' },
    { n: '02', t: 'Capital & lease',        d: 'Match to cannabis-aware lenders, negotiate the lease, and get your CCB/local applications submitted.' },
    { n: '03', t: 'Buildout & branding',    d: 'Run the contractor, design the window wrap, packaging and identity. Your shop, branded right.' },
    { n: '04', t: 'Open day',               d: 'Soft launch with 50 founding members. Public open follows once your first restock lands.' },
  ];
  return (
    <section id="process" style={{ padding: '96px 0', background: 'var(--lmc-yellow)', borderBottom: '2px solid var(--lmc-black)', position: 'relative' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 56, alignItems: 'flex-start' }}>
          <div style={{ position: 'sticky', top: 100 }}>
            <span className="eyebrow">How it works</span>
            <h2 style={{ fontSize: 56, fontWeight: 700, lineHeight: 0.98, letterSpacing: '-0.025em', margin: '14px 0 18px' }}>
              From <span className="marker" style={{ display: 'inline-block', fontSize: 64, color: 'var(--lmc-black)' }}>idea</span> to opening<br />day in 6 months.
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.55, color: 'var(--lmc-black)', maxWidth: 380, fontWeight: 500 }}>
              Most launches fail in permitting. We start there — and stay there until inspectors sign off.
            </p>
          </div>
          <div>
            {steps.map((s) => (
              <div key={s.n} className="step">
                <div className="num">{s.n}</div>
                <div>
                  <h4>{s.t}</h4>
                  <p>{s.d}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}
window.LaunchSteps = LaunchSteps;