// process.jsx — 6-step process with chrome numerals
const { useState: __prs } = React;

function Process({ t }) {
  return (
    <section id="process" style={{
      paddingTop: 120, paddingBottom: 120, position: 'relative'
    }}>
      <div className="wrap">
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80, alignItems: 'end', marginBottom: 80 }}>
          <div>
            <div className="kicker reveal" style={{ marginBottom: 28 }}>
              <span className="dot"></span>{t.proc_eye}
            </div>
            <h2 className="display reveal" style={{ fontSize: 'clamp(56px, 8vw, 128px)' }}>
              <div>{t.proc_title_1}</div>
              <div className="irid-text" style={{ fontWeight: 800, fontVariationSettings: '"wdth" 75' }}>
                {t.proc_title_2}
              </div>
            </h2>
          </div>
          <p className="reveal" style={{ fontSize: 20, color: 'var(--ink)', maxWidth: 400, alignSelf: 'end' }}>
            {t.proc_sub}
          </p>
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0,
          border: '1.5px solid var(--ink)', borderRadius: 24, overflow: 'hidden',
          background: 'var(--paper)'
        }}>
          {t.proc_steps.map((s, i) => {
            const isLastRow = i >= 3;
            const isLastCol = i % 3 === 2;
            return (
              <ProcessStep key={s.n} step={s} index={i}
                borderRight={!isLastCol}
                borderBottom={!isLastRow} />
            );
          })}
        </div>
      </div>
    </section>
  );
}

function ProcessStep({ step, index, borderRight, borderBottom }) {
  const [hover, setHover] = __prs(false);
  const colors = ['magenta', 'azure', 'lime', 'tangerine', 'violet', 'magenta'];
  const color = `var(--${colors[index]})`;

  return (
    <div className="reveal clickable" data-hover
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        padding: 40, minHeight: 320, position: 'relative',
        borderRight: borderRight ? '1.5px solid var(--ink)' : 'none',
        borderBottom: borderBottom ? '1.5px solid var(--ink)' : 'none',
        background: hover ? color : 'var(--paper)',
        color: hover ? (color === 'var(--lime)' ? 'var(--ink)' : 'white') : 'var(--ink)',
        transition: 'background 0.4s, color 0.4s',
        cursor: 'none'
      }}>
      {/* Big chrome numeral */}
      <div className={hover ? '' : 'chrome-text'} style={{
        fontFamily: 'var(--font-display)',
        fontSize: 120, fontWeight: 800, lineHeight: 1,
        marginBottom: 24,
        fontVariationSettings: '"wdth" 75',
        letterSpacing: '-0.05em',
        color: hover ? 'currentColor' : undefined
      }}>
        {step.n}
      </div>
      <h3 className="display" style={{ fontSize: 32, fontWeight: 700, marginBottom: 16, fontStyle: 'italic' }}>
        {step.t}.
      </h3>
      <p style={{
        fontSize: 15, lineHeight: 1.55,
        color: hover ? 'currentColor' : 'var(--ink-dim)',
        opacity: hover ? 0.9 : 1
      }}>
        {step.d}
      </p>
      {/* Corner mark */}
      <div style={{
        position: 'absolute', top: 24, right: 28,
        fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 700,
        letterSpacing: '0.14em', opacity: hover ? 1 : 0.4
      }}>
        {index < 5 ? '→' : '◉'}
      </div>
    </div>
  );
}

Object.assign(window, { Process, ProcessStep });