// How It Works — 4 steps, zigzag timeline on cream/grid.
const HowItWorks = () => {
  const steps = [
    { n: '01', label: 'Discovery', tag: 'Typically 1–2 calls',
      body: 'I learn your operation. Where time is going, where money is leaking.' },
    { n: '02', label: 'Strategy',  tag: 'Deliverable: Scope + Roadmap',
      body: 'I map what to build. Scope and roadmap, approved before a dollar gets spent.' },
    { n: '03', label: 'Build',     tag: 'Weeks 1–3',
      body: 'Built around your specific operation. Automations, workflows, integrations. Nothing generic.' },
    { n: '04', label: 'Run',       tag: 'Ongoing retainer',
      body: 'I operate it every month. No handoff, no training required. It just runs.' },
  ];

  const Card = ({ s }) => (
    <div style={{
      background: '#FFFFFF',
      border: '1px solid rgba(44,54,90,0.08)',
      borderTop: '2px solid #2C365A',
      borderRadius: 12,
      padding: mob ? '24px 22px 26px' : '32px 30px 34px',
      display: 'flex', flexDirection: 'column', gap: mob ? 10 : 12,
      transition: 'box-shadow 240ms cubic-bezier(0.2,0.6,0.2,1), transform 240ms cubic-bezier(0.2,0.6,0.2,1)',
    }}
    onMouseEnter={e => { e.currentTarget.style.boxShadow = '0 12px 32px rgba(44,54,90,0.1)'; e.currentTarget.style.transform = 'translateY(-3px)'; }}
    onMouseLeave={e => { e.currentTarget.style.boxShadow = ''; e.currentTarget.style.transform = ''; }}>
      <div style={{
        fontFamily: 'Clash Display, General Sans, system-ui',
        fontSize: mob ? 30 : 42, fontWeight: 700, color: '#2C365A',
        opacity: 0.15, letterSpacing: '-0.04em', lineHeight: 1, marginBottom: mob ? 0 : 4,
      }}>{s.n}</div>
      <h3 style={{
        margin: 0, fontFamily: 'Clash Display, General Sans, system-ui',
        fontSize: mob ? 20 : 'clamp(22px, 2.3vw, 30px)',
        fontWeight: 700, letterSpacing: '-0.025em',
        color: '#2C365A', lineHeight: 1.1,
      }}>{s.label}</h3>
      <p style={{ margin: 0, fontSize: mob ? 14 : 15, lineHeight: 1.6, color: '#2C365A', opacity: 0.65 }}>
        {s.body}
      </p>
      <div style={{
        fontSize: mob ? 9 : 10.5, fontWeight: 700, letterSpacing: mob ? '0.10em' : '0.14em',
        textTransform: 'uppercase', color: '#2C365A', opacity: 0.55,
        border: '1px solid rgba(44,54,90,0.2)', borderRadius: 999,
        padding: mob ? '4px 10px' : '5px 13px', alignSelf: 'flex-start', marginTop: mob ? 2 : 6,
        whiteSpace: 'nowrap',
      }}>{s.tag}</div>
    </div>
  );

  const mob = useIsMobile();

  return (
    <section
      id="how-it-works"
      data-screen-label="05 How It Works"
      className="bg-grid"
      style={{ backgroundColor: '#EEE8DF', color: '#2C365A', padding: mob ? '64px 20px 60px' : '140px 32px 120px' }}
    >
      <div className="wrap" style={{ display: 'flex', flexDirection: 'column', gap: mob ? 40 : 72 }}>
        <div className="reveal" style={{
          display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center', gap: 16,
        }}>
          <div style={{
            fontSize: 11, fontWeight: 700, letterSpacing: '0.22em',
            textTransform: 'uppercase', color: '#C4BCB0',
            display: 'inline-flex', alignItems: 'center', gap: 12,
          }}>
            <span style={{ width: 28, height: 1, background: 'rgba(196,188,176,0.5)' }} />
            How it works
            <span style={{ width: 28, height: 1, background: 'rgba(196,188,176,0.5)' }} />
          </div>
          <h2 style={{
            margin: 0, fontFamily: 'Clash Display, General Sans, system-ui',
            fontSize: mob ? 'clamp(32px, 9vw, 48px)' : 'clamp(40px, 5.4vw, 72px)',
            fontWeight: 700, lineHeight: 1.02,
            letterSpacing: '-0.03em', color: '#2C365A',
          }}>
            From Discovery to Running<br />in 4 Steps.
          </h2>
        </div>

        {mob ? (
          /* Mobile: simple numbered list, no zigzag */
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {steps.map((s, i) => (
              <div key={s.n} className="reveal" style={{ transitionDelay: `${i * 0.08}s` }}>
                <Card s={s} />
              </div>
            ))}
          </div>
        ) : (
          /* Desktop: zigzag timeline */
          <div style={{ position: 'relative' }}>
            <div style={{
              position: 'absolute', left: '50%', top: 0, bottom: 0,
              width: 1, background: 'rgba(44,54,90,0.18)', transform: 'translateX(-50%)',
            }} />
            <div style={{ display: 'flex', flexDirection: 'column' }}>
              {steps.map((s, i) => {
                const isLeft = i % 2 === 0;
                return (
                  <div key={s.n} style={{
                    display: 'grid', gridTemplateColumns: '1fr 80px 1fr',
                    alignItems: 'start',
                    marginBottom: i < steps.length - 1 ? 56 : 0,
                  }}>
                    {isLeft ? (
                      <div className="reveal-left" style={{ paddingRight: 40, transitionDelay: `${i * 0.1}s` }}>
                        <Card s={s} />
                      </div>
                    ) : <div />}
                    <div style={{
                      display: 'flex', justifyContent: 'center',
                      paddingTop: 40, position: 'relative', zIndex: 1,
                    }}>
                      <div style={{
                        width: 20, height: 20, borderRadius: '50%',
                        background: '#2C365A', border: '4px solid #EEE8DF',
                        boxShadow: '0 0 0 1.5px rgba(44,54,90,0.25)',
                      }} />
                    </div>
                    {!isLeft ? (
                      <div className="reveal-right" style={{ paddingLeft: 40, transitionDelay: `${i * 0.1}s` }}>
                        <Card s={s} />
                      </div>
                    ) : <div />}
                  </div>
                );
              })}
            </div>
          </div>
        )}
      </div>
    </section>
  );
};

window.HowItWorks = HowItWorks;