// HowItWorks.jsx — 3-step timeline

const STEPS = [
{
  step: '01',
  title: 'Discovery & Strategy',
  body: 'We audit your current site, map your customer journey, and identify every point where trust is lost and revenue leaks. Then we build a conversion blueprint.',
  duration: '2 days',
  accent: '#3B82F6',
},
{
  step: '02',
  title: 'Build & Optimise',
  body: 'Our team engineers your conversion hub. Copy, design, AI-readable schema, and performance-optimised code, in a single focused manner.',
  duration: '2 days',
  accent: '#ADFF2F'
},
{
  step: '03',
  title: 'Launch & Compound',
  body: 'Go live with a site built to grow. We track citations, conversion metrics, and AI visibility — then iterate every month so results compound.',
  duration: 'Ongoing',
  accent: '#3B82F6'
}];


const HowItWorksSection = () => {
  const [activeStep, setActiveStep] = React.useState(0);

  return (
    <section
      id="how-it-works"
      style={{
        background: 'linear-gradient(180deg, #0B1222 0%, #0d1628 100%)',
        padding: 'clamp(80px, 12vh, 140px) 5vw',
        position: 'relative',
        overflow: 'hidden'
      }}>
      
      {/* Faint grid */}
      <div style={{
        position: 'absolute',
        inset: 0,
        backgroundImage: 'linear-gradient(rgba(59,130,246,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(59,130,246,0.03) 1px, transparent 1px)',
        backgroundSize: '60px 60px',
        pointerEvents: 'none'
      }} />

      <div style={{ maxWidth: '1200px', margin: '0 auto', position: 'relative' }}>
        {/* Section header */}
        <div style={{ marginBottom: 'clamp(48px, 8vh, 80px)' }}>
          <span style={{
            fontSize: '0.65rem',
            letterSpacing: '0.18em',
            textTransform: 'uppercase',
            color: '#ADFF2F',
            fontFamily: "'DM Sans', sans-serif",
            fontWeight: 500
          }}>
            How it works
          </span>
          <h2 style={{
            fontFamily: "'Syne', sans-serif",
            fontSize: 'clamp(2rem, 4.5vw, 3.8rem)',
            fontWeight: 300,
            letterSpacing: '-0.02em',
            color: '#e8e8e8',
            margin: '12px 0 0',
            lineHeight: 1.1
          }}>
            From zero to live<br />
            <span style={{ color: '#3B82F6' }}>in 4 days.</span>
          </h2>
        </div>

        {/* Timeline layout */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: '0',
          position: 'relative'
        }}>
          {/* Connector line */}
          <div style={{
            position: 'absolute',
            top: '28px',
            left: '14%',
            right: '14%',
            height: '1px',
            background: 'linear-gradient(90deg, #3B82F620, #ADFF2F40, #3B82F620)',
            zIndex: 0,
            display: 'none' // hidden on mobile, shown via media-style inline
          }} />

          {STEPS.map((step, i) =>
          <div
            key={i}
            onMouseEnter={() => setActiveStep(i)}
            onClick={() => setActiveStep(i)}
            style={{
              padding: '36px 32px',
              cursor: 'default',
              position: 'relative',
              borderRight: i < STEPS.length - 1 ? '1px solid rgba(255,255,255,0.04)' : 'none',
              transition: 'background 0.3s ease',
              background: activeStep === i ? 'rgba(255,255,255,0.02)' : 'transparent',
              borderRadius: activeStep === i ? '16px' : '0'
            }}>
            
              {/* Step number bubble */}
              <div style={{
              width: '52px', height: '52px',
              borderRadius: '50%',
              background: activeStep === i ? `${step.accent}18` : 'rgba(255,255,255,0.04)',
              border: `1px solid ${activeStep === i ? step.accent + '44' : 'rgba(255,255,255,0.08)'}`,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              marginBottom: '28px',
              transition: 'all 0.3s ease',
              boxShadow: activeStep === i ? `0 0 20px ${step.accent}22` : 'none'
            }}>
                <span style={{
                fontFamily: "'Syne', sans-serif",
                fontSize: '0.85rem',
                fontWeight: 600,
                color: activeStep === i ? step.accent : '#64748B',
                letterSpacing: '0.04em',
                transition: 'color 0.3s ease'
              }}>
                  {step.step}
                </span>
              </div>

              {/* Duration chip */}
              <div style={{
              display: 'inline-flex',
              alignItems: 'center',
              padding: '3px 10px',
              borderRadius: '100px',
              background: `${step.accent}12`,
              border: `1px solid ${step.accent}22`,
              marginBottom: '14px'
            }}>
                <span style={{
                fontSize: '0.67rem',
                letterSpacing: '0.1em',
                color: step.accent,
                fontFamily: "'DM Sans', sans-serif",
                fontWeight: 500
              }}>
                  {step.duration}
                </span>
              </div>

              <h3 style={{
              fontFamily: "'Syne', sans-serif",
              fontSize: 'clamp(1.1rem, 1.8vw, 1.4rem)',
              fontWeight: 400,
              color: '#e8e8e8',
              margin: '0 0 12px',
              letterSpacing: '-0.01em'
            }}>
                {step.title}
              </h3>

              <p style={{
              fontFamily: "'DM Sans', sans-serif",
              fontSize: '0.92rem',
              color: '#64748B',
              lineHeight: 1.7,
              margin: 0
            }}>
                {step.body}
              </p>

              {/* Active indicator */}
              {activeStep === i &&
            <div style={{
              position: 'absolute',
              bottom: 0, left: '10%', right: '10%',
              height: '1px',
              background: `linear-gradient(90deg, transparent, ${step.accent}, transparent)`
            }} />
            }
            </div>
          )}
        </div>
      </div>
    </section>);

};

Object.assign(window, { HowItWorksSection });