window.HowItWorks = function HowItWorks() {
  const steps = [
    {
      num: "01",
      title: "Enter website URL",
      desc: "Provide the link to your landing page or web application dashboard."
    },
    {
      num: "02",
      title: "AI scans the UI",
      desc: "Our vision models analyze the visual structure, contrast, and layout patterns."
    },
    {
      num: "03",
      title: "Receive UX report",
      desc: "Get a detailed, actionable report delivered straight to your inbox."
    }
  ];

  return (
    <section className="section" style={{ background: 'var(--card-bg)' }}>
      <div className="container">
        <h2 className="reveal" style={{
          textAlign: 'center',
          fontSize: '2.5rem',
          fontWeight: '700',
          marginBottom: '64px'
        }}>
          How it <span className="bg-gradient-text">Works</span>
        </h2>
        
        <div style={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          gap: '24px',
          maxWidth: '800px',
          margin: '0 auto'
        }}>
          {steps.map((step, idx) => (
            <div 
              key={idx}
              className={`reveal delay-${idx + 1}`}
              style={{
                width: '100%',
                display: 'flex',
                alignItems: 'center',
                padding: '32px',
                background: 'var(--bg-color)',
                borderRadius: '20px',
                border: '1px solid var(--glass-border)',
                position: 'relative',
                overflow: 'hidden'
              }}
            >
              <div style={{
                position: 'absolute',
                left: '-20px',
                fontSize: '8rem',
                fontWeight: '800',
                color: 'var(--text-secondary)',
                opacity: '0.05',
                lineHeight: '1'
              }}>
                {step.num}
              </div>
              
              <div style={{ flexShrink: 0, marginRight: '32px' }}>
                <div style={{
                  width: '48px',
                  height: '48px',
                  borderRadius: '50%',
                  background: 'var(--input-border)',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  fontWeight: '700',
                  color: 'var(--accent-color)'
                }}>
                  {step.num}
                </div>
              </div>
              
              <div>
                <h3 style={{ fontSize: '1.25rem', marginBottom: '8px', fontWeight: '600' }}>
                  {step.title}
                </h3>
                <p style={{ color: 'var(--text-secondary)', margin: 0 }}>
                  {step.desc}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};