/* "The job lands on your phone" — single device mockup (no clipping). */
function PhonePocket() {
  const items = [
    ['phoneVolume', 'It answers the call', 'A real conversation that gets the job, the address, and how urgent it is.'],
    ['clipboardCheck', 'You get the full summary', 'Transcript, contact, and recording. No notes to take.'],
    ['share', 'Urgent jobs reach you instantly', 'High-priority leads are pushed to your phone in seconds.'],
  ];
  const waves = [10, 16, 22, 30, 24, 14, 20, 28, 18, 12, 24, 32, 20, 12, 18, 26, 16, 22, 28, 14];
  return (
    <section className="pocket" id="pocket">
      <div className="site sec-pad">
        <div className="pocket-grid">
          <div>
            <div className="eyebrow">Straight to your pocket</div>
            <h2 className="display">The job lands<br />on your phone.</h2>
            <div className="pk-list">
              {items.map((x, i) => (
                <div className="pk-it" key={i}>
                  <span className="ic"><Icon name={x[0]} /></span>
                  <div><b>{x[1]}</b><p>{x[2]}</p></div>
                </div>
              ))}
            </div>
          </div>
          <div className="phone-wrap">
            <div className="phone" role="img" aria-label="A phone showing the AI receptionist answering a live garage-door emergency call and capturing the job details">
              <span className="notch"></span>
              <div className="screen">
                <div className="scr-top"><span className="d"></span> AI Receptionist · Live</div>
                <div className="scr-av"><Icon name="headset" /></div>
                <div className="scr-num">(604) 555-0148</div>
                <div className="scr-meta">Garage door repair · Emergency</div>
                <div className="scr-wave">{waves.map((h, i) => <i key={i} style={{ height: h + 'px', animationDelay: ((i % 6) * 0.09) + 's', animationDuration: (0.72 + (i % 4) * 0.14) + 's' }}></i>)}</div>
                <div className="scr-cap"><Icon name="circleCheck" /> Capturing job details…</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.PhonePocket = PhonePocket;