/* global React, Ico, PageHeader, PHONE, PHONE_TEL, WA */

function CollectionsPage({ go }) {
  return (
    <div data-screen-label="04 Collections">
      <PageHeader
        crumbs={[<a key="h" href="#home" onClick={(e)=>{e.preventDefault(); go('home');}}>Home</a>, 'Business pickups']}
        title={<>Got volume?<br/>We bring<br/><em>the van.</em></>}
        lead="Built for warehouses, supermarkets, print shops and food producers across the West Midlands. No bins. No skips. No equipment to install. We swing by your bay, take what you've got, weigh it on our bridge, and quote you on clean cardboard and film."
        aside={
          <div style={{display:'flex', gap:12, marginTop: 24, flexWrap:'wrap'}}>
            <a className="btn btn--primary" href="#contact" onClick={(e)=>{e.preventDefault(); go('contact');}}>Book a free site visit <Ico.Arrow className="arrow"/></a>
            <a className="btn btn--outline" href={WA} target="_blank" rel="noopener"><Ico.WhatsApp width="16" height="16"/>WhatsApp</a>
          </div>
        }
      />

      {/* How it works */}
      <section className="section">
        <div className="container">
          <div className="eyebrow"><span className="dot"></span>HOW IT WORKS</div>
          <h2 className="h-1" style={{marginTop: 16, marginBottom: 40, maxWidth:'18ch'}}>The simplest commercial pickup in the Midlands.</h2>

          <div className="process">
            <div className="process__step">
              <div className="process__num">STEP 01</div>
              <div className="process__title">Tell us what you've got</div>
              <div className="process__desc">Send a WhatsApp photo, fill the form, or give the yard a ring. We come back same day with a price and an idea of cadence.</div>
            </div>
            <div className="process__step">
              <div className="process__num">STEP 02</div>
              <div className="process__title">Free 30-min site visit</div>
              <div className="process__desc">Before we quote, we walk your bay, see the volume, and show you what you should be getting paid versus what you're paying now.</div>
            </div>
            <div className="process__step">
              <div className="process__num">STEP 03</div>
              <div className="process__title">We send the van</div>
              <div className="process__desc">On a regular cadence — weekly, fortnightly, on-call — that suits your throughput. No contract, no minimum tonnage.</div>
            </div>
            <div className="process__step">
              <div className="process__num">STEP 04</div>
              <div className="process__title">Weighed &amp; paid</div>
              <div className="process__desc">Material comes back to the Smethwick bridge, gets weighed and graded, and you're paid for clean OCC and clear LDPE.</div>
            </div>
          </div>
        </div>
      </section>

      {/* What makes it work */}
      <section>
        <div className="split">
          <div className="split__copy">
            <div className="eyebrow"><span className="dot"></span>FREE SITE VISIT</div>
            <h2 className="h-1">30 minutes on your bay.<br/>Probably saves you money.</h2>
            <p style={{color:'var(--ink-2)', fontSize: 16, lineHeight: 1.55, maxWidth:'48ch'}}>
              We'll spend half an hour walking your warehouse with you,
              measuring the actual volume going out, and showing you what
              you should be paying — versus what you currently are.
            </p>
            <ul className="split__bullets">
              <li>Honest volume estimate — no upselling</li>
              <li>Rebate model on bulk OCC and clean LDPE film</li>
              <li>Side-by-side cost comparison vs your current contract</li>
              <li>Written quote within 24 hours, no obligation</li>
            </ul>
            <a className="btn btn--primary" href="#contact" onClick={(e)=>{e.preventDefault(); go('contact');}}>
              Book the visit <Ico.Arrow className="arrow"/>
            </a>
          </div>
          <div className="split__media">
            <img src="assets/facility-forklift.jpg?v=4" alt="Arrow Recycling yard interior — bulk material storage"/>
          </div>
        </div>
      </section>

      {/* Why us */}
      <section className="section section--paper2">
        <div className="container">
          <div className="eyebrow"><span className="dot"></span>WHY OUR VAN, NOT THEIR SKIP</div>
          <h2 className="h-2" style={{marginTop: 16, marginBottom: 32, maxWidth:'24ch'}}>The bin-and-skip model wastes your money.</h2>
          <div style={{display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap: 1, background:'var(--rule)', border:'1px solid var(--rule)'}}>
            {[
              {n:'01', t:'No rental fees', d:"You're not paying for a bin to sit on your bay between collections."},
              {n:'02', t:'No minimum tonnage', d:'A small load this week, a big one next — we just send the van when you call.'},
              {n:'03', t:'No long contracts', d:'Either side can pause, change cadence, or stop entirely with a phone call.'},
              {n:'04', t:'You get paid', d:'For clean cardboard and clear film — straight onto the same waste-transfer note.'},
            ].map(x => (
              <div key={x.n} style={{background:'var(--paper)', padding:'28px 24px'}}>
                <div style={{fontFamily:'var(--mono)', fontSize:12, color:'var(--orange)', letterSpacing:'.12em', marginBottom: 14}}>{x.n}</div>
                <div style={{fontWeight:700, fontSize:20, letterSpacing:'-0.02em', marginBottom: 8}}>{x.t}</div>
                <div style={{fontSize:14.5, color:'var(--ink-2)', lineHeight:1.5}}>{x.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Industries */}
      <section className="section">
        <div className="container">
          <div className="eyebrow"><span className="dot"></span>WHO WE COLLECT FOR</div>
          <h2 className="h-2" style={{marginTop: 16, marginBottom: 32, maxWidth:'24ch'}}>The back of every clean loading bay in the Black Country.</h2>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 0, borderTop:'2px solid var(--charcoal)'}}>
            {[
              {n:'01', t:'Distribution & 3PL', d:'High OCC throughput. Pallet-wrap rebate route.'},
              {n:'02', t:'Manufacturing', d:'HDPE / PP off-cuts, banding, end-of-line cardboard.'},
              {n:'03', t:'Food & drink production', d:'Outer cardboard, shrink film, fruit boxes — clean grade.'},
              {n:'04', t:'Print & packaging', d:'Off-cuts, paper rolls, kraft. Clean white-grade paid top rate.'},
              {n:'05', t:'Retail & supermarkets', d:'Back-of-store cardboard and shrink film, regular cadence.'},
              {n:'06', t:'E-commerce fulfilment', d:'Pickwall cardboard and shrink film at high frequency.'},
            ].map(x => (
              <div key={x.n} style={{padding:'28px 24px 28px 0', borderRight:'1px solid var(--rule)', borderBottom:'1px solid var(--rule)'}}>
                <div style={{fontFamily:'var(--mono)', fontSize:12, color:'var(--orange)', letterSpacing:'.12em', marginBottom: 14}}>{x.n}</div>
                <div style={{fontWeight:700, fontSize:20, letterSpacing:'-0.02em', marginBottom: 8}}>{x.t}</div>
                <div style={{fontSize:14.5, color:'var(--ink-2)', lineHeight:1.5}}>{x.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

window.CollectionsPage = CollectionsPage;