// How it works — the 4-step magic strip

function HowItWorks() {
  const { t } = useLang();
  const glyphs = ['chat', 'estimate', 'phone', 'calendar'];
  const steps = t.how.steps.map((s, i) => ({
    n: '0' + (i + 1), title: s.t, body: s.b, glyph: glyphs[i],
  }));

  return (
    <section className="section how" id="how">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">{t.how.eyebrow}</span>
            <h2 style={{ marginTop: 16 }}>
              {t.how.title} <em style={{ fontStyle: 'italic', fontWeight: 500, color: 'var(--ink-soft)' }}>{t.how.titleEm}</em>
            </h2>
          </div>
          <p>{t.how.sub}</p>
        </div>

        <div className="how-grid">
          {steps.map((s, i) => <HowStep key={i} {...s} />)}
        </div>
      </div>
      <style>{`
        .how-grid {
          display: grid; grid-template-columns: 1fr; gap: 0;
          border-top: 1px solid var(--hairline);
        }
        @media (min-width: 880px) {
          .how-grid {
            grid-template-columns: repeat(4, 1fr);
            border-left: 1px solid var(--hairline);
            border-top: 1px solid var(--hairline);
          }
        }
      `}</style>
    </section>
  );
}

function HowStep({ n, title, body, glyph }) {
  return (
    <div className="how-step">
      <div className="how-glyph"><StepGlyph kind={glyph} /></div>
      <div className="how-num mono">{n}</div>
      <h3 className="how-title">{title}</h3>
      <p className="how-body">{body}</p>
      <style>{`
        .how-step {
          padding: 32px 24px 36px;
          border-bottom: 1px solid var(--hairline);
          position: relative;
          display: flex; flex-direction: column;
        }
        @media (min-width: 880px) {
          .how-step { border-right: 1px solid var(--hairline); padding: 40px 28px 48px; }
        }
        .how-glyph { margin-bottom: 28px; height: 80px; display: flex; align-items: flex-end; }
        .how-num { font-size: 11px; letter-spacing: 0.18em; color: var(--ink-soft); margin-bottom: 12px; }
        .how-title { font-size: 22px; font-weight: 600; margin-bottom: 12px; letter-spacing: -0.02em; line-height: 1.15; }
        .how-body { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; margin: 0; }
      `}</style>
    </div>
  );
}

function StepGlyph({ kind }) {
  const stroke = "var(--ink)";
  const sun = "var(--sun)";
  if (kind === 'chat') {
    return (
      <svg width="64" height="64" viewBox="0 0 64 64" fill="none">
        <rect x="6" y="14" width="42" height="30" rx="8" fill="var(--bg-2)" stroke={stroke} strokeWidth="1.5"/>
        <circle cx="20" cy="29" r="2" fill={stroke}/><circle cx="28" cy="29" r="2" fill={stroke}/><circle cx="36" cy="29" r="2" fill={stroke}/>
        <path d="M20 44 L24 50 L28 44" fill="var(--bg-2)" stroke={stroke} strokeWidth="1.5" strokeLinejoin="round"/>
        <circle cx="52" cy="20" r="6" fill={sun}/>
      </svg>
    );
  }
  if (kind === 'estimate') {
    return (
      <svg width="64" height="64" viewBox="0 0 64 64" fill="none">
        <rect x="14" y="6" width="36" height="50" rx="4" fill="var(--bg-2)" stroke={stroke} strokeWidth="1.5"/>
        <line x1="20" y1="18" x2="44" y2="18" stroke={stroke} strokeWidth="1.5" strokeLinecap="round"/>
        <line x1="20" y1="26" x2="40" y2="26" stroke={stroke} strokeWidth="1.5" strokeLinecap="round" opacity="0.5"/>
        <line x1="20" y1="34" x2="36" y2="34" stroke={stroke} strokeWidth="1.5" strokeLinecap="round" opacity="0.5"/>
        <line x1="20" y1="42" x2="44" y2="42" stroke={stroke} strokeWidth="1.5" strokeLinecap="round"/>
        <rect x="34" y="46" width="10" height="6" rx="2" fill={sun}/>
      </svg>
    );
  }
  if (kind === 'phone') {
    return (
      <svg width="64" height="64" viewBox="0 0 64 64" fill="none">
        <rect x="18" y="6" width="28" height="52" rx="6" fill="var(--bg-2)" stroke={stroke} strokeWidth="1.5"/>
        <rect x="22" y="14" width="20" height="28" rx="2" fill="var(--bg)" stroke={stroke} strokeWidth="1"/>
        <rect x="22" y="46" width="9" height="6" rx="2" fill={sun}/>
        <rect x="33" y="46" width="9" height="6" rx="2" fill="var(--bg)" stroke={stroke} strokeWidth="1"/>
        <circle cx="50" cy="14" r="4" fill={sun}/>
      </svg>
    );
  }
  return (
    <svg width="64" height="64" viewBox="0 0 64 64" fill="none">
      <rect x="8" y="14" width="44" height="38" rx="4" fill="var(--bg-2)" stroke={stroke} strokeWidth="1.5"/>
      <line x1="8" y1="24" x2="52" y2="24" stroke={stroke} strokeWidth="1.5"/>
      <line x1="18" y1="10" x2="18" y2="18" stroke={stroke} strokeWidth="2" strokeLinecap="round"/>
      <line x1="42" y1="10" x2="42" y2="18" stroke={stroke} strokeWidth="2" strokeLinecap="round"/>
      <rect x="32" y="32" width="10" height="10" rx="2" fill={sun}/>
    </svg>
  );
}

Object.assign(window, { HowItWorks });