// Testimonial — Juan R., ESS Electric. Pull quote + full quote.
const Testimonial = () => {
  const mob = useIsMobile();
  return (
    <section
      id="testimonial"
      data-screen-label="04 Testimonial"
      style={{
        background: '#1C2540', color: '#FFFFFF',
        padding: mob ? '60px 20px' : '120px 32px',
        borderTop: '1px solid rgba(238,232,223,0.06)',
      }}
    >
      <div className="wrap" style={{ maxWidth: 960, margin: '0 auto' }}>
        {/* Oversize serif quote mark — hidden on mobile */}
        {!mob && <div style={{
          fontFamily: 'Georgia, serif',
          fontSize: 220, lineHeight: 0.7, fontWeight: 400,
          color: '#EEE8DF', opacity: 0.22,
          userSelect: 'none', marginBottom: -60,
        }}>"</div>}

        <div style={{ display: 'flex', flexDirection: 'column', gap: mob ? 28 : 40 }}>
          <div className="reveal-left" style={{
            fontSize: 11, fontWeight: 700, letterSpacing: '0.22em',
            textTransform: 'uppercase', color: '#C4BCB0',
            display: 'inline-flex', alignItems: 'center', gap: 12,
          }}>
            <span style={{ width: 28, height: 1, background: 'rgba(196,188,176,0.5)' }} />
            In the owner's words
          </div>

          {/* Pull quote */}
          <blockquote className="reveal-scale" style={{
            margin: 0,
            fontFamily: 'Clash Display, General Sans, system-ui',
            fontSize: mob ? 'clamp(26px, 8vw, 38px)' : 'clamp(30px, 4vw, 52px)',
            fontWeight: 700, lineHeight: 1.08,
            letterSpacing: '-0.025em', color: '#EEE8DF',
          }}>
            The system paid for itself in the first month.
          </blockquote>

          {/* Full quote */}
          <p className="reveal" style={{
            margin: 0, fontSize: mob ? 15 : 17, lineHeight: 1.7,
            color: 'rgba(255,255,255,0.78)', maxWidth: 680,
            transitionDelay: '0.15s',
          }}>
            Quotes were going out 3, sometimes 4 days after the job walkthrough. By
            then half the customers already called someone else. I had probably
            $40,000 in completed work that was either invoiced late or never chased.
            He came in, figured out exactly where things were breaking, and didn't
            try to sell me on stuff I didn't need. Built everything around the way
            the business is structured. The system paid for itself in the first
            month just from invoices that got followed up on automatically. I went
            from 15 hours a week on admin to maybe 2.
          </p>

          <div className="reveal" style={{
            display: 'flex', alignItems: 'center', gap: 16,
            paddingTop: 20, borderTop: '1px solid rgba(238,232,223,0.12)',
            transitionDelay: '0.25s',
          }}>
            <div style={{
              width: 48, height: 48, borderRadius: '50%',
              background: '#2C365A',
              border: '1px solid rgba(238,232,223,0.2)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'Clash Display, General Sans, system-ui',
              fontSize: 16, fontWeight: 700, color: '#EEE8DF',
              letterSpacing: '-0.02em',
            }}>JR</div>
            <div>
              <div style={{ fontSize: 15, fontWeight: 700, color: '#FFFFFF', lineHeight: 1.2 }}>Juan R.</div>
              <div style={{ fontSize: 13, color: '#C4BCB0', marginTop: 4, letterSpacing: '0.04em' }}>
                Owner · ESS Electric
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Testimonial = Testimonial;