/* HowItWorks — the canonical "How it works" section. Three-column horizontal
   editorial layout: top hairline, vertical hairlines between columns. A small
   line-icon glyph sits above each step kicker for a quick visual cue. Pulls
   step data from window.matchingStepsData. */

const hiwStyles = {
  wrap: { padding: 'var(--section-y) 32px', background: 'var(--paper)' },
  inner: { maxWidth: 1280, margin: '0 auto' },

  header: {
    marginBottom: 72,
  },
  eyebrow: {
    fontSize: 12, color: 'var(--blue)',
    letterSpacing: '0.14em', textTransform: 'uppercase',
    fontWeight: 500, marginBottom: 22,
  },
  h2: {
    fontFamily: "'Outfit', system-ui, sans-serif",
    fontSize: 60, lineHeight: 1.02,
    letterSpacing: '-0.035em', fontWeight: 600,
    color: 'var(--ink)',
  },
  sub: { fontSize: 18, lineHeight: 1.5, color: 'var(--ink-muted)' },

  body: {
    borderTop: '1px solid var(--line-soft)',
    paddingTop: 56,
  },
  cols: {
    display: 'grid',
    gridTemplateColumns: 'repeat(3, 1fr)',
  },
  col: { paddingLeft: 48, paddingRight: 48 },
  colFirst: { paddingLeft: 0 },
  colLast: { paddingRight: 0 },

  icon: {
    display: 'inline-flex',
    color: 'var(--blue)',
    marginBottom: 22,
  },

  kicker: {
    fontFamily: "'Outfit', system-ui, sans-serif",
    fontSize: 12, fontWeight: 600,
    color: 'var(--blue)',
    letterSpacing: '0.16em', textTransform: 'uppercase',
    fontVariantNumeric: 'tabular-nums',
    marginBottom: 20,
    display: 'block',
  },
  title: {
    fontFamily: "'Outfit', system-ui, sans-serif",
    fontSize: 40, lineHeight: 1.02,
    letterSpacing: '-0.03em', fontWeight: 600,
    color: 'var(--ink)',
    marginBottom: 14,
  },
  summary: {
    fontSize: 18, lineHeight: 1.45, color: 'var(--ink-muted)',
    marginBottom: 36,
  },

  subs: { display: 'flex', flexDirection: 'column', gap: 24 },
  subLabel: {
    fontSize: 15, fontWeight: 600, color: 'var(--ink)',
    letterSpacing: '-0.005em',
    marginBottom: 6,
  },
  subBody: { fontSize: 15, lineHeight: 1.65, color: 'var(--ink-muted)' },

  footerCta: {
    marginTop: 64,
    paddingTop: 40,
    borderTop: '1px solid var(--line-soft)',
    display: 'flex',
    justifyContent: 'center',
  },
  footerCtaBtn: {
    background: 'var(--ink)', color: 'var(--paper)',
    padding: '16px 24px', borderRadius: 12,
    fontSize: 15, fontWeight: 500,
    display: 'inline-flex', alignItems: 'center', gap: 8,
    transition: 'background .2s',
    textDecoration: 'none',
  },
};

/* Step icons — composed from circles and short strokes only. Each is 32×32. */
function StepIcon({ name }) {
  const common = {
    width: 32, height: 32, viewBox: '0 0 32 32',
    fill: 'none', stroke: 'currentColor', strokeWidth: 1.5,
    strokeLinecap: 'round', strokeLinejoin: 'round',
    'aria-hidden': true,
  };
  if (name === 'discover') {
    /* magnifier: circle + diagonal handle */
    return (
      <svg {...common}>
        <circle cx="13.5" cy="13.5" r="7.5" />
        <line x1="19" y1="19" x2="25" y2="25" />
      </svg>
    );
  }
  if (name === 'match') {
    /* two dots linked by a line — a pairing glyph */
    return (
      <svg {...common}>
        <circle cx="8" cy="16" r="3.5" />
        <circle cx="24" cy="16" r="3.5" />
        <line x1="11.5" y1="16" x2="20.5" y2="16" />
      </svg>
    );
  }
  /* manage: checkmark inside a circle */
  return (
    <svg {...common}>
      <circle cx="16" cy="16" r="11" />
      <polyline points="11,16 14.5,19.5 21,13" />
    </svg>
  );
}

const ICON_BY_INDEX = ['discover', 'match', 'manage'];

function HowItWorks() {
  const steps = window.matchingStepsData;
  return (
    <section id="matching" style={hiwStyles.wrap} className="reveal bm-section">
      <div style={hiwStyles.inner}>
        <div style={hiwStyles.header}>
          <div className="mono" style={hiwStyles.eyebrow}>How it works</div>
          <h2 className="serif" style={hiwStyles.h2}>
            Discover. Match. <span style={{ color: 'var(--blue)' }}>Manage.</span>
          </h2>
        </div>

        <div style={hiwStyles.body}>
          <div style={hiwStyles.cols} className="bm-h-cols">
            {steps.map((s, i, arr) => {
              const colStyle = {
                ...hiwStyles.col,
                ...(i === 0 ? hiwStyles.colFirst : null),
                ...(i === arr.length - 1 ? hiwStyles.colLast : null),
              };
              return (
                <div key={i} style={colStyle}>
                  <div style={hiwStyles.icon}>
                    <StepIcon name={ICON_BY_INDEX[i]} />
                  </div>
                  <span style={hiwStyles.kicker}>Step {s.n}</span>
                  <h3 className="serif" style={hiwStyles.title}>{s.title}</h3>
                  <p style={hiwStyles.summary}>{s.body}</p>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { HowItWorks });