// ff-process.jsx — "How we work" with two variants

// Solar Icons — Bold Duotone style. Primary path opaque, secondary at opacity .5.
// Mapped by step index (Audit / Plan / Build / Run).
const PROCESS_ICONS = [
  // 0 — Audit → Magnifer
  (
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path fill="currentColor" opacity=".5" d="M20.313 11.157a9.157 9.157 0 1 1-18.313 0a9.157 9.157 0 0 1 18.313 0" />
      <path fill="currentColor" d="m17.1 18.122l3.666 3.666a.723.723 0 0 0 1.023-1.022L18.122 17.1a9 9 0 0 1-1.022 1.022" />
    </svg>
  ),
  // 1 — Plan → Clipboard Check
  (
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path fill="currentColor" opacity=".5" d="M21 15.998v-6c0-2.828 0-4.242-.879-5.121C19.353 4.109 18.175 4.012 16 4H8c-2.175.012-3.353.109-4.121.877C3 5.756 3 7.17 3 9.998v6c0 2.829 0 4.243.879 5.122c.878.878 2.293.878 5.121.878h6c2.828 0 4.243 0 5.121-.878c.879-.88.879-2.293.879-5.122" />
      <path fill="currentColor" d="M8 3.5A1.5 1.5 0 0 1 9.5 2h5A1.5 1.5 0 0 1 16 3.5v1A1.5 1.5 0 0 1 14.5 6h-5A1.5 1.5 0 0 1 8 4.5z" />
      <path fill="currentColor" fillRule="evenodd" clipRule="evenodd" d="M15.548 10.488a.75.75 0 0 1-.036 1.06l-4.286 4a.75.75 0 0 1-1.024 0l-1.714-1.6a.75.75 0 1 1 1.024-1.096l1.202 1.122l3.774-3.522a.75.75 0 0 1 1.06.036" />
    </svg>
  ),
  // 2 — Build → Code
  (
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path fill="currentColor" d="M16.443 7.328a.75.75 0 0 1 1.059-.056l1.737 1.564c.737.663 1.347 1.212 1.767 1.71c.44.525.754 1.088.754 1.784c0 .695-.313 1.258-.754 1.782c-.42.499-1.03 1.049-1.767 1.711l-1.737 1.564a.75.75 0 1 1-1.004-1.115l1.697-1.527c.788-.709 1.319-1.19 1.663-1.598c.33-.393.402-.622.402-.817c0-.196-.072-.425-.402-.818c-.344-.409-.875-.889-1.663-1.598l-1.697-1.527a.75.75 0 0 1-.056-1.06m-8.94 1.06a.75.75 0 0 0-1.004-1.115L4.761 8.836c-.737.663-1.347 1.212-1.767 1.71c-.44.525-.754 1.088-.754 1.784c0 .695.313 1.258.754 1.782c.42.499 1.03 1.049 1.767 1.711l1.737 1.564a.75.75 0 1 0 1.004-1.115l-1.697-1.527c-.788-.709-1.319-1.19-1.663-1.598c-.33-.393-.402-.622-.402-.817c0-.196.072-.425.402-.818c.344-.409.875-.889 1.663-1.598z" />
      <path fill="currentColor" opacity=".5" d="M14.182 4.276a.75.75 0 0 1 .53.918l-3.974 14.83a.75.75 0 1 1-1.449-.389l3.974-14.83a.75.75 0 0 1 .919-.53" />
    </svg>
  ),
  // 3 — Run → Play Circle
  (
    <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
      <path fill="currentColor" fillRule="evenodd" clipRule="evenodd" opacity=".5" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10" />
      <path fill="currentColor" d="m15.414 13.059l-4.72 2.787C9.934 16.294 9 15.71 9 14.786V9.214c0-.924.934-1.507 1.694-1.059l4.72 2.787c.781.462.781 1.656 0 2.118" />
    </svg>
  ),
];

function Process({ variant = "diagonal", s }) {
  return (
    <section id="process" data-screen-label="05 Process" className="section section-process">
      <div className="wrap">
        <Reveal className="section-head" as="div">
          <div>
            <SectionEyebrow index={5} label={s.process.eyebrow} />
            <h2>{s.process.title}</h2>
          </div>
        </Reveal>

        {variant === "diagonal" ? <ProcessDiagonal steps={s.process.steps} /> : <ProcessTimeline steps={s.process.steps} />}
      </div>
    </section>
  );
}

function ProcessDiagonal({ steps }) {
  return (
    <div className="process-diag">
      <div className="process-diag-rail" aria-hidden="true" />
      <div className="process-diag-row">
        {steps.map((step, i) => (
          <Reveal key={step.n} as="article" delay={i + 1} className="process-step">
            <div className="process-step-head">
              <span className="process-step-icon" aria-hidden="true">
                {PROCESS_ICONS[i] || PROCESS_ICONS[0]}
              </span>
              <span className="process-step-n" aria-hidden="true">{step.n}</span>
            </div>
            <div className="process-step-body">
              <h3>{step.t}</h3>
              <p>{step.d}</p>
            </div>
            <div className="process-step-meta">{step.meta}</div>
          </Reveal>
        ))}
      </div>
    </div>
  );
}

function ProcessTimeline({ steps }) {
  return (
    <div className="process-tl">
      <div className="process-tl-spine" aria-hidden="true">
        <span className="process-tl-spine-fill" />
      </div>
      {steps.map((step, i) => (
        <Reveal key={step.n} as="article" delay={i + 1} className="process-tl-row">
          <div className="process-tl-marker">
            <span className="process-tl-marker-dot" />
            <span className="process-tl-marker-n">{step.n}</span>
          </div>
          <div className="process-tl-body card">
            <div className="process-tl-head">
              <h3>{step.t}</h3>
              <span className="process-tl-meta">{step.meta}</span>
            </div>
            <p>{step.d}</p>
          </div>
        </Reveal>
      ))}
    </div>
  );
}

window.Process = Process;