/* global React */
const howStyles = {
  section: {
    background: 'var(--latus-dark-blue)',
    color: 'var(--latus-off-white)',
  },
  inner: { color: 'var(--latus-off-white)' },
  head: {
    display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', gap: 'var(--s-5)',
    paddingBottom: 'var(--s-5)', borderBottom: '1px solid rgba(250,250,250,0.16)',
    marginBottom: 'var(--s-7)',
  },
  index: { fontSize: 12, fontWeight: 500, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'rgba(250,250,250,0.5)' },
  title: { fontSize: 'clamp(28px, 3.2vw, 40px)', fontWeight: 500, letterSpacing: '-0.02em', margin: 0, color: 'var(--latus-off-white)' },
  topline: {
    fontSize: 'clamp(28px, 3.4vw, 44px)',
    fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.15,
    margin: '0 0 var(--s-8) 0',
    maxWidth: 1000,
    color: 'var(--latus-off-white)',
  },
  blocks: {
    display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--s-7)',
    paddingTop: 'var(--s-6)', borderTop: '1px solid rgba(250,250,250,0.16)',
  },
  block: { display: 'flex', flexDirection: 'column', gap: 'var(--s-3)' },
  num: {
    fontFamily: 'var(--font-sans)', fontSize: 36, fontWeight: 500, letterSpacing: '-0.02em',
    color: 'var(--latus-light-blue)', lineHeight: 1,
  },
  blockTitle: { fontSize: 18, fontWeight: 500, color: 'var(--latus-off-white)', margin: 0 },
  blockBody: { fontSize: 15, lineHeight: 1.55, color: 'rgba(250,250,250,0.78)', fontWeight: 300, margin: 0 },
  closing: {
    marginTop: 'var(--s-8)', fontSize: 15, color: 'rgba(250,250,250,0.6)',
    textAlign: 'right',
    fontWeight: 300,
    maxWidth: 700, marginLeft: 'auto',
  },
};

function HowIWork() {
  return (
    <section id="process" className="section-pad" style={howStyles.section}>
      <div className="container" style={howStyles.inner}>
        <div style={howStyles.head} className="reveal">
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 'var(--s-5)' }}>
            <span style={howStyles.index}>04 / How I work</span>
            <h2 style={howStyles.title}>Embedded with your team, on retainer.</h2>
          </div>
        </div>

        <p style={howStyles.topline} className="reveal">
          I embed with your team on a 2 to 4 day a week retainer. Engagements tend to run long; remote, EU hours.
        </p>

        <div style={howStyles.blocks} className="how-blocks reveal-group">
          <div style={howStyles.block} className="reveal">
            <span style={howStyles.num}>1</span>
            <h3 style={howStyles.blockTitle}>Discovery and plan.</h3>
            <p style={howStyles.blockBody}>I read the existing system, talk to your engineers, and deliver a report: what I'd build, in what order, with the trade-offs explicit. If you don't like the plan, we don't proceed.</p>
          </div>
          <div style={howStyles.block} className="reveal">
            <span style={howStyles.num}>2</span>
            <h3 style={howStyles.blockTitle}>Build.</h3>
            <p style={howStyles.blockBody}>Architecture, code, and deployment, end-to-end. I write the production code and deploy it myself.</p>
          </div>
          <div style={howStyles.block} className="reveal">
            <span style={howStyles.num}>3</span>
            <h3 style={howStyles.blockTitle}>Ongoing cadence.</h3>
            <p style={howStyles.blockBody}>Weekly demo. Written status every Friday. On-call for production triage during business hours. In your standups when relevant.</p>
          </div>
        </div>

        <p style={howStyles.closing} className="reveal">
          Most engagements run long. Het Kennisinstituut is in its third year.
        </p>
      </div>

      <style>{`
        @media (max-width: 820px) {
          .how-blocks { grid-template-columns: 1fr !important; gap: var(--s-6) !important; }
        }
      `}</style>
    </section>
  );
}

window.HowIWork = HowIWork;