// WHATSAPP — daily digest mock

function WhatsApp() {
  return (
    <section style={{
      position: 'relative', padding: '80px 0 120px',
      background: '#0A1A14',
      overflow: 'hidden'
    }}>
      {/* top divider hairline */}
      <div style={{
        position: 'absolute', top: 0, left: 0, right: 0, height: 1,
        background: 'linear-gradient(90deg, transparent 0%, rgba(37,211,102,0.25) 50%, transparent 100%)'
      }} />
      {/* faint vertical lines */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `linear-gradient(90deg, rgba(37,211,102,0.05) 1px, transparent 1px)`,
        backgroundSize: '80px 100%',
        pointerEvents: 'none', opacity: 0.7
      }} />
      {/* soft green ambient glow */}
      <div style={{
        position: 'absolute', top: '50%', left: '70%', transform: 'translate(-50%,-50%)',
        width: 700, height: 700, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(37,211,102,0.06) 0%, transparent 60%)',
        pointerEvents: 'none'
      }} />

      <div style={{ position: 'relative', maxWidth: 1240, margin: '0 auto', padding: '0 32px',
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center'
      }}>
        <div>
          <Reveal><SectionMark num="04" label="WhatsApp Native" accent="#25D366" /></Reveal>
          <Reveal delay={100}>
            <h2 style={{
              fontFamily: 'var(--serif)', fontWeight: 400,
              fontSize: 'clamp(2.4rem, 5vw, 4.4rem)', lineHeight: 1,
              letterSpacing: '-0.03em', margin: '24px 0 24px', textWrap: 'balance'
            }}>
              The important stuff<br />
              <span className="italic" style={{ color: '#25D366' }}>comes to you.</span>
            </h2>
          </Reveal>
          <Reveal delay={200}>
            <p style={{ fontSize: 17, lineHeight: 1.65, fontWeight: 300, color: 'var(--ink-mute)', maxWidth: 460, marginBottom: 32, textWrap: 'pretty' }}>Scrub sends a morning brief and pings only when something actually matters — right on <span style={{ color: '#25D366', fontWeight: 500 }}>WhatsApp</span>.



            </p>
          </Reveal>
          <Reveal delay={300}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
              {[
              ['Morning and evening digest', 'At your chosen time'],
              ['Real-time pings', 'Bill due tomorrow. Flight delayed. Reply needed.']].
              map(([t, s], i) =>
              <div key={i} style={{
                display: 'flex', gap: 14, alignItems: 'flex-start',
                padding: '12px 0',
                borderBottom: i < 1 ? '1px solid var(--hair-dk)' : 'none'
              }}>
                  <div style={{
                  width: 26, height: 26, borderRadius: 7,
                  background: 'rgba(37,211,102,0.12)',
                  border: '1px solid rgba(37,211,102,0.4)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: '#25D366', fontFamily: 'var(--mono)', fontSize: 11, flexShrink: 0
                }}>{['✓', '↯'][i]}</div>
                  <div>
                    <div style={{ fontWeight: 500, color: 'var(--ink)', marginBottom: 2 }}>{t}</div>
                    <div style={{ fontSize: 13, color: 'var(--ink-mute)' }}>{s}</div>
                  </div>
                </div>
              )}
            </div>
          </Reveal>
        </div>

        {/* WhatsApp mock */}
        <Reveal delay={250}>
          <div style={{
            maxWidth: 380, margin: '0 auto',
            background: '#0B141A',
            borderRadius: 18,
            border: '1px solid rgba(255,255,255,0.06)',
            overflow: 'hidden',
            boxShadow: '0 40px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(37,211,102,0.08)'
          }}>
            {/* header */}
            <div style={{
              padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 12,
              background: '#1F2C34', borderBottom: '1px solid rgba(255,255,255,0.04)'
            }}>
              <div style={{
                width: 38, height: 38, borderRadius: '50%',
                background: '#fff',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                overflow: 'hidden',
                border: '1px solid rgba(255,255,255,0.08)'
              }}>
                <img
                  src="assets/scrub-icon.png"
                  alt="Scrub"
                  style={{ width: 30, height: 30, objectFit: 'contain', display: 'block' }}
                />
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ color: '#E9EDEF', fontSize: 14, fontWeight: 500 }}>Scrub</div>
                <div style={{ color: '#8696A0', fontSize: 11, display: 'flex', alignItems: 'center', gap: 6 }}>
                  <PulseDot size={5} color="#25D366" />
                  <span>online</span>
                </div>
              </div>
            </div>

            {/* messages */}
            <div style={{
              padding: '20px 16px',
              minHeight: 480,
              backgroundImage: 'radial-gradient(circle, rgba(255,255,255,0.012) 1px, transparent 1px)',
              backgroundSize: '14px 14px',
              display: 'flex', flexDirection: 'column', gap: 10
            }}>
              <div style={{ textAlign: 'center', fontSize: 11, color: '#8696A0', margin: '4px 0' }}>TODAY · 7:30</div>

              {/* digest message */}
              <div style={{
                alignSelf: 'flex-start', maxWidth: '88%',
                background: '#1F2C34', borderRadius: '0 12px 12px 12px',
                padding: '12px 14px', position: 'relative'
              }}>
                <div style={{ color: '#25D366', fontSize: 12, fontWeight: 500, marginBottom: 8 }}>Good morning ☀</div>
                <div style={{ color: '#E9EDEF', fontSize: 13, lineHeight: 1.55 }}>
                  4 things for today:<br />
                  <br />
                  <span style={{ color: '#FFB45A' }}>1.</span> ₹4,820 HDFC bill due in 3 days<br />
                  <span style={{ color: '#FFB45A' }}>2.</span> Flight DEL→BLR · tomorrow 6:45a<br />
                  <span style={{ color: '#FFB45A' }}>3.</span> Anika is waiting on a reply (2d)<br />
                  <span style={{ color: '#FFB45A' }}>4.</span> Amazon parcel arrives today<br />
                  <br />
                  Reply <i style={{ color: '#25D366' }}>1</i> to pay, <i style={{ color: '#25D366' }}>2</i> to check in.
                </div>
                <div style={{ fontSize: 10, color: '#8696A0', textAlign: 'right', marginTop: 6 }}>7:30 am ✓✓</div>
              </div>

              <div style={{
                alignSelf: 'flex-start', maxWidth: '80%',
                background: '#1F2C34', borderRadius: '0 12px 12px 12px',
                padding: '10px 14px', color: '#E9EDEF', fontSize: 13
              }}>
                Reminder — Netflix Subscription due today 🔔<br />
                <span style={{ fontSize: 11, color: '#8696A0' }}>Tap to review.</span>
                <div style={{ fontSize: 10, color: '#8696A0', textAlign: 'right', marginTop: 4 }}>7:32 am</div>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>);

}

window.WhatsApp = WhatsApp;