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

function DropoffPage({ go }) {
  return (
    <div data-screen-label="03 Drop-off">
      <PageHeader
        crumbs={[<a key="h" href="#home" onClick={(e)=>{e.preventDefault(); go('home');}}>Home</a>, 'Drop-off / Visit us']}
        title={<>Drop a load.<br/>Smethwick &amp;<br/><em>5 mins off the M5.</em></>}
        lead="Anyone — sole trader, builder, office manager — can drive into the yard during opening hours. Park on the weighbridge, we'll tell you what it weighs and what it's worth. BACS payment for accounts."
        aside={
          <div style={{display:'flex', gap:12, marginTop: 24, flexWrap:'wrap'}}>
            <a className="btn btn--primary" href={PHONE_TEL}><Ico.Phone width="16" height="16"/>Call before you set off</a>
            <a className="btn btn--outline" href="https://share.google/aRoBjbvNrbX3kaylN" target="_blank" rel="noopener">Get directions</a>
          </div>
        }
      />

      <section className="section">
        <div className="container" style={{display:'grid', gridTemplateColumns:'1.2fr 1fr', gap: 56, alignItems:'start'}}>
          <div>
            <div className="eyebrow"><span className="dot"></span>YARD INFO</div>
            <h2 className="h-2" style={{marginTop: 16, marginBottom: 32}}>Find us, time us, get paid.</h2>

            <div style={{display:'grid', gap: 4, borderTop:'1px solid var(--rule)'}}>
              {[
                ['LOCATION', 'Arrow Recycling Ltd · 15 Cornwall Road · Smethwick · B66 2JT'],
                ['HOURS', 'Mon–Fri 8:00 – 18:00 · Sat 9:00 – 16:00 · Sun closed'],
                ['ENTRANCE', 'Gated entrance directly off Cornwall Road. Weighbridge first, then office.'],
                ['WEIGHBRIDGE', 'Public weighbridge — lorries, containers, vans, skips and cars all welcome.'],
                ['PAYMENT', 'BACS for accounts · No card terminal on site'],
                ['PAPERWORK', 'Bring company name &amp; address — we issue the waste-transfer note on the spot.'],
              ].map(([k, v]) => (
                <div key={k} style={{display:'grid', gridTemplateColumns:'140px 1fr', gap: 24, padding: '20px 0', borderBottom:'1px solid var(--rule)'}}>
                  <div style={{fontFamily:'var(--mono)', fontSize: 11.5, letterSpacing:'.12em', color:'var(--ink-3)', paddingTop: 2}}>{k}</div>
                  <div style={{fontSize: 15.5, color:'var(--ink)', lineHeight: 1.5}} dangerouslySetInnerHTML={{__html: v}}/>
                </div>
              ))}
            </div>

            <div style={{marginTop: 40, padding: 24, background:'var(--orange-soft)', borderLeft:'4px solid var(--orange)'}}>
              <div className="eyebrow" style={{color:'var(--orange-deep)'}}>BEFORE YOU SET OFF</div>
              <p style={{marginTop: 10, color:'var(--charcoal)', fontSize: 15.5, lineHeight:1.55}}>
                Mixed materials must be separated before you arrive — or we'll have
                to charge for sorting. If you're unsure whether we'll accept what
                you've got, WhatsApp a photo first.
              </p>
            </div>
          </div>

          <aside style={{position:'sticky', top: 120}}>
            <div className="card card--ink">
              <div className="eyebrow" style={{color:'rgba(245,241,232,.55)'}}><span className="dot"></span>HOW IT WORKS</div>
              <ul style={{listStyle:'none', padding:0, margin:'18px 0 0 0', display:'grid', gap: 14}}>
                <li style={{display:'flex', gap:12, alignItems:'flex-start'}}>
                  <span style={{flex:'0 0 18px', width:18, height:18, marginTop:2, background:'var(--orange)', clipPath:'polygon(0 35%, 35% 35%, 35% 0, 100% 50%, 35% 100%, 35% 65%, 0 65%)'}}></span>
                  <span style={{fontSize:15, lineHeight:1.5}}><strong>Walk-ins welcome</strong> — no booking, no appointment.</span>
                </li>
                <li style={{display:'flex', gap:12, alignItems:'flex-start'}}>
                  <span style={{flex:'0 0 18px', width:18, height:18, marginTop:2, background:'var(--orange)', clipPath:'polygon(0 35%, 35% 35%, 35% 0, 100% 50%, 35% 100%, 35% 65%, 0 65%)'}}></span>
                  <span style={{fontSize:15, lineHeight:1.5}}><strong>Materials must be separated</strong> — mixed loads will be charged for sorting.</span>
                </li>
                <li style={{display:'flex', gap:12, alignItems:'flex-start'}}>
                  <span style={{flex:'0 0 18px', width:18, height:18, marginTop:2, background:'var(--orange)', clipPath:'polygon(0 35%, 35% 35%, 35% 0, 100% 50%, 35% 100%, 35% 65%, 0 65%)'}}></span>
                  <span style={{fontSize:15, lineHeight:1.5}}><strong>Unsure?</strong> WhatsApp a photo first — we'll confirm if we'll take it.</span>
                </li>
              </ul>
              <hr style={{border:'none', borderTop:'1px solid rgba(255,255,255,.1)', margin:'24px 0'}}/>
              <div style={{display:'grid', gap: 10}}>
                <a className="btn btn--primary" href={PHONE_TEL}><Ico.Phone width="14" height="14"/>{PHONE}</a>
                <a className="btn btn--whatsapp" href={WA} target="_blank" rel="noopener"><Ico.WhatsApp width="14" height="14"/>WhatsApp the yard</a>
              </div>
            </div>

            <div style={{marginTop: 24, aspectRatio: '4/3', background:'var(--charcoal)', position:'relative', overflow:'hidden'}}>
              <iframe
                title="Arrow Recycling Ltd, 15 Cornwall Road, Smethwick, B66 2JT"
                src="https://maps.google.com/maps?q=Arrow+Recycling+Ltd,+15+Cornwall+Road,+Smethwick,+B66+2JT&t=&z=15&ie=UTF8&iwloc=&output=embed"
                style={{width:'100%', height:'100%', border:0}}
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                allowFullScreen></iframe>
            </div>
            <a className="btn btn--outline btn--sm" style={{marginTop: 12, width:'100%', justifyContent:'center'}}
               href="https://share.google/aRoBjbvNrbX3kaylN" target="_blank" rel="noopener">
              Open in Google Maps <Ico.Arrow className="arrow"/>
            </a>
          </aside>
        </div>
      </section>

      <section className="section--tight section--paper2">
        <div className="container">
          <div className="eyebrow"><span className="dot"></span>WHAT YOU'LL SEE</div>
          <h2 className="h-2" style={{marginTop: 16, marginBottom: 32, maxWidth:'20ch'}}>It's a working yard, not a showroom.</h2>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 16}}>
            {[
              {src:'assets/facility-interior.jpg?v=4', cap:'Plastic regrind line'},
              {src:'assets/cardboard-baling.jpg?v=4', cap:'Bales loading for export'},
              {src:'assets/baler-machine.jpg?v=4', cap:'Cardboard baler'},
            ].map(x => (
              <figure key={x.src} style={{margin:0}}>
                <div style={{aspectRatio:'4/3', background:'var(--charcoal)', overflow:'hidden'}}>
                  <img src={x.src} alt={x.cap} style={{width:'100%', height:'100%', objectFit:'cover'}}/>
                </div>
                <figcaption style={{fontFamily:'var(--mono)', fontSize: 11.5, letterSpacing:'.08em', textTransform:'uppercase', color:'var(--ink-2)', marginTop: 12}}>{x.cap}</figcaption>
              </figure>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

window.DropoffPage = DropoffPage;