/* burp.agency homepage — The Problem (Section 03)
   Left: long-form copy. Right: the answer, framed as connected pieces,
   not a stranded list. */

const Problem = () => {
  return (
    <section data-screen-label="03 The problem"
             style={{
               background: 'var(--color-cream)',
               paddingTop: 120, paddingBottom: 120,
             }}>
      <Container>
        <div className="problem-grid" style={{
          display: 'grid',
          gridTemplateColumns: '1.3fr 1fr',
          gap: 80,
          alignItems: 'flex-start',
        }}>
          {/* Left — the problem */}
          <div>
            <Reveal><Label>THE PROBLEM</Label></Reveal>
            <Reveal delay={120}>
              <h3 style={{
                fontFamily: 'Georgia, serif', fontWeight: 400,
                fontSize: 'clamp(28px, 3.4vw, 40px)',
                letterSpacing: '-0.018em', lineHeight: 1.2,
                color: 'var(--color-ink)', margin: '24px 0 0',
                maxWidth: '20ch', textWrap: 'balance',
              }}>
                Most B2B SaaS marketing looks busy and produces nothing.
              </h3>
            </Reveal>

            <div style={{ marginTop: 32, maxWidth: 720 }}>
              <Reveal delay={240}>
                <p style={{
                  fontFamily: 'Inter, sans-serif', fontSize: 15,
                  lineHeight: 1.75, color: 'var(--color-mid-gray)',
                  margin: '0 0 16px',
                }}>
                  Blogs that rank for the wrong things. Ads that get clicks from people who’ll never buy. A website that explains the product without ever explaining why it matters. A sales team asking marketing for better leads while marketing asks sales why nothing is closing.
                </p>
              </Reveal>
              <Reveal delay={320}>
                <p style={{
                  fontFamily: 'Inter, sans-serif', fontSize: 15,
                  lineHeight: 1.75, color: 'var(--color-mid-gray)',
                  margin: '0 0 16px',
                }}>
                  The funnel isn’t broken at one point. It leaks everywhere.
                </p>
              </Reveal>
            </div>
          </div>

          {/* Right — the answer, clearly framed */}
          <Reveal delay={200}>
            <div style={{
              background: '#fff',
              border: '1px solid var(--color-ink)',
              padding: '32px 32px 36px',
              position: 'relative',
            }}>
              <Label>THE FIX, IN THREE WORDS</Label>
              <p style={{
                marginTop: 16,
                fontFamily: 'Inter, sans-serif', fontSize: 14,
                lineHeight: 1.65, color: 'var(--color-mid-gray)',
                margin: '16px 0 28px',
                maxWidth: '32ch',
              }}>
                We work across the whole funnel — not one slice of it. Three practices, one team, no handoffs.
              </p>

              <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
                {[
                  { name: 'Words.',  blurb: 'Content that earns trust.',         href: 'offerings/content-marketing.html' },
                  { name: 'Shape.',  blurb: 'Visual that earns the click.',      href: 'offerings/design.html' },
                  { name: 'Motion.', blurb: 'Campaigns that earn the pipeline.', href: 'offerings/growth-marketing.html' },
                ].map((p, i) => (
                  <a key={p.name} href={p.href}
                     style={{
                       display: 'grid', gridTemplateColumns: '1fr auto',
                       alignItems: 'baseline', gap: 16,
                       padding: '20px 0',
                       borderTop: i === 0 ? '1px solid var(--color-warm-gray)' : 'none',
                       borderBottom: '1px solid var(--color-warm-gray)',
                       color: 'inherit', textDecoration: 'none',
                       transition: 'padding-left .2s ease, color .2s ease',
                     }}
                     onMouseEnter={e => {
                       e.currentTarget.style.paddingLeft = '8px';
                       e.currentTarget.querySelector('.problem-arrow').style.color = 'var(--color-orange)';
                       e.currentTarget.querySelector('.problem-arrow').style.transform = 'translateX(4px)';
                     }}
                     onMouseLeave={e => {
                       e.currentTarget.style.paddingLeft = '0';
                       e.currentTarget.querySelector('.problem-arrow').style.color = 'var(--color-ink)';
                       e.currentTarget.querySelector('.problem-arrow').style.transform = 'translateX(0)';
                     }}>
                    <div>
                      <div style={{
                        fontFamily: 'Georgia, serif', fontWeight: 400,
                        fontSize: 'clamp(28px, 3vw, 40px)',
                        letterSpacing: '-0.02em', lineHeight: 1,
                        color: 'var(--color-ink)',
                      }}>{p.name}</div>
                      <div style={{
                        marginTop: 6,
                        fontFamily: 'Inter, sans-serif', fontSize: 13,
                        color: 'var(--color-mid-gray)',
                      }}>{p.blurb}</div>
                    </div>
                    <span className="problem-arrow" style={{
                      fontFamily: 'Inter, sans-serif', fontSize: 18, fontWeight: 600,
                      color: 'var(--color-ink)',
                      transition: 'color .15s ease, transform .15s ease',
                      display: 'inline-block',
                    }}>→</span>
                  </a>
                ))}
              </div>
            </div>
          </Reveal>
        </div>
      </Container>
    </section>
  );
};

Object.assign(window, { Problem });