/* global React, Container, Section, Eyebrow, Reveal */

const STEPS = [
  {
    num: '01',
    title: 'Apply',
    body: "Fill in the application. Four minutes. We read every word ourselves. No intake team, no BDR. If the fit isn't there, we'll say so and point you somewhere better.",
    note: '4-minute form',
  },
  {
    num: '02',
    title: 'Discovery call',
    body: "One conversation. Not a sales call. We want to understand the business underneath the ads: what's converting, what's leaking, what the revenue system actually looks like right now.",
    note: '45 min, no pitch deck',
  },
  {
    num: '03',
    title: 'Honest audit',
    body: "We map where revenue is leaking before we touch anything. Creative, CRM, attribution, offer structure. If we can't fix it, we'll tell you that instead of taking the retainer.",
    note: 'Delivered before we commit',
  },
  {
    num: '04',
    title: 'We build together',
    body: "Fewer meetings, more output. Saad is in the room: writing briefs, reviewing creative, inside the ad account. You stay close to the strategy without being in the weeds.",
    note: 'Ongoing, not a one-time sprint',
  },
];

function Process() {
  return (
    <Section id="process" pad={140} topRule>
      <style>{`
        .process-header {
          display: grid;
          grid-template-columns: 1fr 1.6fr;
          gap: 80px;
          margin-bottom: 80px;
          align-items: end;
        }
        .process-step {
          display: grid;
          grid-template-columns: 72px 1fr auto;
          gap: 40px;
          align-items: start;
          padding: 44px 0;
        }
        .process-step-note {
          font-size: 12px;
          color: var(--fg-subtle);
          font-family: var(--font-mono);
          line-height: 1.5;
          border-left: 1px solid var(--border);
          padding-left: 20px;
          padding-top: 4px;
          min-width: 160px;
        }
        @media (max-width: 768px) {
          .process-header {
            grid-template-columns: 1fr !important;
            gap: 24px !important;
            margin-bottom: 0 !important;
          }
          .process-step {
            grid-template-columns: 1fr !important;
            gap: 12px !important;
            padding: 36px 0 !important;
          }
          .process-step-num {
            display: flex !important;
            align-items: center !important;
            gap: 12px !important;
          }
          .process-step-note {
            border-left: none !important;
            padding-left: 0 !important;
            border-top: 1px solid var(--border) !important;
            padding-top: 12px !important;
            margin-top: 4px !important;
          }
        }
      `}</style>

      <Container>
        <Reveal>
          <div className="process-header">
            <div>
              <Eyebrow>§ How we work</Eyebrow>
              <h2 style={{
                fontFamily: 'var(--font-display)', fontSize: 'clamp(44px, 5.2vw, 72px)',
                lineHeight: 1.02, letterSpacing: '-0.02em', margin: '16px 0 0', fontWeight: 400,
              }}>
                Four steps.<br/>
                <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>No surprises.</em>
              </h2>
            </div>
            <div>
              <p style={{ fontSize: 19, lineHeight: 1.55, color: 'var(--fg-muted)', maxWidth: 560, margin: 0 }}>
                From application to active engagement. Every step has a clear output and an honest exit if the fit isn't right.
              </p>
            </div>
          </div>
        </Reveal>

        <div>
          {STEPS.map((step, i) => (
            <Reveal key={step.num} delay={i * 80}>
              <div className="process-step" style={{
                borderTop: i === 0 ? '1px solid var(--border-strong)' : '1px solid var(--border)',
              }}>
                <div className="process-step-num">
                  <span style={{
                    fontFamily: 'var(--font-display)', fontStyle: 'italic',
                    fontSize: 22, color: 'var(--accent)',
                  }}>{step.num}</span>
                </div>

                <div>
                  <h3 style={{
                    fontFamily: 'var(--font-display)', fontSize: 'clamp(26px, 2.8vw, 38px)',
                    lineHeight: 1.08, letterSpacing: '-0.015em', margin: '0 0 14px', fontWeight: 400,
                  }}>{step.title}</h3>
                  <p style={{
                    fontSize: 16, lineHeight: 1.7, color: 'var(--fg-muted)', margin: 0, maxWidth: 540,
                  }}>{step.body}</p>
                </div>

                <div className="process-step-note">{step.note}</div>
              </div>
            </Reveal>
          ))}
          <div style={{ borderTop: '1px solid var(--border)', height: 1 }}/>
        </div>
      </Container>
    </Section>
  );
}

window.Process = Process;