// Process.jsx — 4-step "how we work" timeline.
// Clean: a single horizontal rule across the top with a Powder diamond
// anchoring each step. No vertical separators (they over-extend in a grid).

const STEPS = [
  { wk: 'Week 0',   t: 'Audit & thesis',     d: "We open your ad accounts, find the leaks, write a one-page thesis: who you're targeting, what offer, what CPL floor." },
  { wk: 'Week 1–2', t: 'Position the powder', d: 'We launch three campaigns at ₹15k/week each. Three hooks, one geography, one offer. The market votes.' },
  { wk: 'Week 3–4', t: 'Cut and reload',      d: 'We close anything below benchmark. We re-deploy 100% of unspent budget behind the winning combination.' },
  { wk: 'Week 5+',  t: 'Scale and report',    d: 'Once CPL holds for two weeks, we 2–3× the budget. You see a weekly numbers email every Monday at 9 AM.' },
];

const pStyles = {
  section: { padding: '96px 0', background: 'var(--ink-50)', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' },
  container: { maxWidth: 'var(--container-max)', margin: '0 auto', padding: '0 var(--container-pad)' },
  eyebrow: { fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg-muted)', fontWeight: 500, marginBottom: 8 },
  h: { fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(36px, 5vw, 60px)', lineHeight: 0.92, letterSpacing: '-0.015em', textTransform: 'uppercase', margin: '0 0 56px', maxWidth: '20ch' },

  /* Track: a single horizontal hairline across the top.
     Asterisk marks sit ON the line, evenly spaced via the grid below. */
  track: {
    position: 'relative',
    height: 1,
    background: 'var(--ink-1000)',
    marginBottom: 28,
  },
  diamonds: {
    position: 'absolute',
    top: -16,
    left: 0,
    width: '100%',
    display: 'grid',
    gridTemplateColumns: 'repeat(4, 1fr)',
  },
  diamondCell: {
    display: 'flex',
    justifyContent: 'flex-start',
  },
  diamondWrap: {
    background: 'var(--ink-50)',
    padding: '4px 6px 0',
    marginLeft: -6,
    display: 'inline-flex',
  },

  /* Step body grid — no borders, generous column gap, hairline UNDER content
     for each step keeps it visually contained without over-extending. */
  grid: {
    display: 'grid',
    gridTemplateColumns: 'repeat(4, 1fr)',
    columnGap: 32,
    rowGap: 24,
  },
  step: {
    paddingRight: 8,
    display: 'flex',
    flexDirection: 'column',
    gap: 10,
  },
  numRow: {
    display: 'flex',
    alignItems: 'baseline',
    justifyContent: 'space-between',
    gap: 12,
    paddingBottom: 8,
    borderBottom: '1px solid var(--border)',
    marginBottom: 6,
  },
  stepNum: {
    fontFamily: 'var(--font-mono)',
    fontSize: 11,
    letterSpacing: '0.14em',
    color: 'var(--powder-500)',
    fontWeight: 600,
  },
  wk: { fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg-muted)', fontWeight: 500 },
  t: { fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 20, lineHeight: 1.25, margin: 0, textWrap: 'balance' },
  d: { fontFamily: 'var(--font-sans)', fontSize: 14, lineHeight: 1.55, color: 'var(--fg-muted)', margin: 0, textWrap: 'pretty' },
};

function Process() {
  return (
    <section id="process" style={pStyles.section}>
      <div style={pStyles.container}>
        <div style={pStyles.eyebrow}>05 · Process</div>
        <h2 style={pStyles.h}>Six weeks from kickoff to a CPL that holds.</h2>

        {/* Top tape — a single hairline with 4 diamonds anchored on it */}
        <div style={pStyles.track}>
          <div style={pStyles.diamonds}>
            {STEPS.map((_, i) => (
              <div key={i} style={pStyles.diamondCell}>
                <span style={pStyles.diamondWrap}>
                  <Mark size={20}/>
                </span>
              </div>
            ))}
          </div>
        </div>

        {/* Step bodies — no vertical separators */}
        <div style={pStyles.grid}>
          {STEPS.map((s, i) => (
            <div key={i} style={pStyles.step}>
              <div style={pStyles.numRow}>
                <span style={pStyles.stepNum}>{String(i + 1).padStart(2, '0')}</span>
                <span style={pStyles.wk}>{s.wk}</span>
              </div>
              <h3 style={pStyles.t}>{s.t}</h3>
              <p style={pStyles.d}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Process });