/* global React, Icon */

const STEPS = [
  { n: "01", icon: "clock",  title: "Ring eller skriv",   body: "Eller kig forbi showroomet på Bülowsvej i Sønderborg. Ingen aftale nødvendig." },
  { n: "02", icon: "camera", title: "Vi kigger forbi",    body: "Vi gennemgår opgaven hjemme hos dig. Måler op, foreslår løsninger, ingen salgspres." },
  { n: "03", icon: "file",   title: "Skriftligt tilbud",  body: "Fast pris, linjeopdelt. Ingen overraskelser, ingen stjerne med småt nederst." },
  { n: "04", icon: "home",   title: "Vi går i gang",      body: "Aftalt tid, aftalt pris, ryddet plads efter os hver dag. Byg-Garanti på det hele." },
];

function Process() {
  return (
    <section className="process section panel" data-screen-label="Process">
      <div className="container">
        <div className="process__head">
          <span className="eyebrow">Sådan foregår det</span>
          <h2 className="section-title">Fire skridt. Ingen overraskelser.</h2>
          <p className="section-sub">Det er den samme procedure for et nyt tag, et nyt vindue eller en hel tilbygning. Du ved, hvad der sker, og hvornår det sker.</p>
        </div>
        <ol className="process__list">
          {STEPS.map(s => (
            <li key={s.n} className="step">
              <div className="step__head">
                <span className="step__n">{s.n}</span>
                <span className="step__icon"><Icon name={s.icon} size={28} stroke="#FFFFFF" /></span>
              </div>
              <h3 className="step__title">{s.title}</h3>
              <p className="step__body">{s.body}</p>
            </li>
          ))}
        </ol>
      </div>
      <style>{`
        .process__head { max-width: 760px; margin-bottom: 56px; }
        .process__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
        .step { position: relative; padding-top: 8px; }
        .step + .step::before {
          content: ""; position: absolute; left: -16px; top: 32px; height: 2px; width: 16px;
          background: var(--surface-divider);
        }
        .step__head { display: flex; align-items: center; gap: 14px; }
        .step__n { font-family: var(--font-display); font-weight: 700; font-size: 52px; line-height: 1; color: var(--accent); letter-spacing: -0.02em; }
        .step__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; background: #0B1118; border: 1px solid rgba(11,17,24,0.15); }
        .step__title { font-family: var(--font-display); font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: 0.02em; margin: 16px 0 8px; }
        .step__body { font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: var(--paper-dim); margin: 0; }
        @media (max-width: 960px) { .process__list { grid-template-columns: 1fr 1fr; } .step + .step::before { display: none; } }
        @media (max-width: 540px) { .process__list { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
}

Object.assign(window, { Process });