/* global React */
const marketingStepsSite = window.RentLensSite;

function HowItWorks() {
  const { isMobile, isTablet } = marketingStepsSite.useViewport();
  const steps = [
    { n: '01', icon: 'home', title: 'Enter property details', body: 'Address, asking price, expected rent, financing. Two minutes.' },
    { n: '02', icon: 'calculator', title: 'See real returns and risks', body: 'Cashflow, ROI, a five-year projection, and a clear risk score.' },
    { n: '03', icon: 'sparkles', title: 'Improve performance instantly', body: 'Each result comes with a specific next move, like refinance, inspection, or management, wired to vetted partners.' },
  ];

  return (
    <section id="how-it-works" style={{ padding: isMobile ? '56px 20px' : '96px 32px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ marginBottom: 56, maxWidth: 600 }}>
          <span style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.12em' }}>How it works</span>
          <h2 style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: isMobile ? 30 : 40, lineHeight: 1.05, letterSpacing: '-0.025em', color: 'var(--ink)', margin: '14px 0 0' }}>
            From address to action <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400 }}>in three steps.</span>
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : isTablet ? 'repeat(2, minmax(0, 1fr))' : 'repeat(3, minmax(0, 1fr))', gap: 32, position: 'relative' }}>
          {!isTablet && (
            <div style={{
              position: 'absolute',
              top: 24,
              left: 24,
              right: 'calc((100% - 64px) / 3 - 24px)',
              height: 2,
              backgroundImage: 'repeating-linear-gradient(to right, var(--hairline-2) 0 10px, transparent 10px 18px)',
              opacity: 0.95,
            }}/>
          )}
          {steps.map((step) => (
            <div key={step.n} style={{ position: 'relative' }}>
              <div style={{
                width: 48, height: 48, borderRadius: 12, background: 'var(--brand-50)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: 'var(--brand-600)', border: '1px solid var(--brand-100)',
                marginBottom: 20, position: 'relative', zIndex: 1,
              }}>
                <i data-lucide={step.icon} style={{ width: 22, height: 22 }}/>
              </div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--ink-3)', fontWeight: 600, marginBottom: 8 }}>STEP {step.n}</div>
              <h3 style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 22, lineHeight: 1.2, color: 'var(--ink)', margin: '0 0 10px', letterSpacing: '-0.01em' }}>{step.title}</h3>
              <p style={{ fontFamily: 'var(--font-sans)', fontSize: 15, lineHeight: 1.55, color: 'var(--ink-2)', margin: 0, maxWidth: 320 }}>{step.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.HowItWorks = HowItWorks;