/* global React, Section, SectionHeader, Icon */

const STEPS = [
  { n: "01", icon: "mail",          title: "Brief",       body: "You send goals, audience, must-haves. I respond within 24h." },
  { n: "02", icon: "file-text",     title: "Concept",     body: "I draft the angle, script, and slide direction for your approval." },
  { n: "03", icon: "image",         title: "Production",  body: "I shoot, design, and finalize — two revision rounds included." },
  { n: "04", icon: "rocket",        title: "Go-live",     body: "Post + cross-channel push + a metrics report within 7 days." },
];

function Process() {
  return (
    <Section id="process" className="section--process">
      <SectionHeader
        eyebrow="The process"
        title="From brief to go-live in 2 weeks."
        subtitle="Four steps. No surprises. Predictable timeline you can plan a launch around."
      />
      <div className="process-grid">
        {STEPS.map((s, i) => (
          <div key={s.n} className="process-step">
            <div className="process-icon"><Icon name={s.icon} size={22} /></div>
            <span className="process-n">{s.n}</span>
            <h3 className="process-title">{s.title}</h3>
            <p className="process-body">{s.body}</p>
            {i < STEPS.length - 1 && <div className="process-connector" aria-hidden="true" />}
          </div>
        ))}
      </div>
    </Section>
  );
}

window.Process = Process;