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

function Problems() {
  const { isMobile, isTablet } = marketingProblemsSite.useViewport();
  const items = [
    { title: 'Most investors rely on guesswork', body: 'A spreadsheet you built once and stopped trusting, plus vibes from a friend who flipped one house in 2017.' },
    { title: 'Hidden costs destroy returns', body: 'Vacancy, CapEx, management, insurance hikes - the line items spreadsheets forget are the ones that eat your margin.' },
    { title: 'No clear next step after analysis', body: 'You ran the numbers. Now what? Most tools leave you at a verdict with nowhere to act.' },
  ];

  return (
    <section id="problem" style={{ padding: isMobile ? '48px 20px' : '64px 32px', background: 'var(--paper-2)', borderTop: '1px solid var(--hairline)', borderBottom: '1px solid var(--hairline)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ maxWidth: 640, marginBottom: 48 }}>
          <span style={{ fontFamily: 'var(--font-sans)', fontSize: 12, fontWeight: 600, color: 'var(--ink-3)', textTransform: 'uppercase', letterSpacing: '0.12em' }}>The problem</span>
          <h2 style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: isMobile ? 24 : 40, lineHeight: 1.08, letterSpacing: '-0.02em', color: 'var(--ink)', margin: '14px 0 0' }}>
            Three reasons people overpay <span style={{ fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontWeight: 400 }}>for the wrong properties.</span>
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : isTablet ? 'repeat(2, minmax(0, 1fr))' : 'repeat(3, minmax(0, 1fr))', gap: 24 }}>
          {items.map((item, index) => (
            <div key={item.title} style={{ background: 'var(--paper)', borderRadius: 14, padding: 28, border: '1px solid var(--hairline)' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--brand-600)', fontWeight: 600 }}>{`0${index + 1}`}</div>
              <h3 style={{ fontFamily: 'var(--font-sans)', fontWeight: 600, fontSize: 20, lineHeight: 1.25, color: 'var(--ink)', margin: '12px 0 10px', letterSpacing: '-0.01em' }}>{item.title}</h3>
              <p style={{ fontFamily: 'var(--font-sans)', fontSize: 15, lineHeight: 1.55, color: 'var(--ink-2)', margin: 0 }}>{item.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Problems = Problems;