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

const MATERIALS = [
  {
    num: '01',
    name: 'Cardboard / OCC',
    sub: 'OCC 90/10 · KLS · KRAFT · MIXED',
    desc: 'Old corrugated containers, kraft liner, paper rolls, mixed grade. Our flagship material — we pay current market rate for clean, dry, baled or bulk loads.',
    tag: 'WE PAY YOU',
    tagInk: false,
    img: 'assets/cardboard-bales.jpg',
  },
  {
    num: '02',
    name: 'LDPE plastic film',
    sub: 'CLEAR · COLOURED · NATURAL ROLLS',
    desc: 'Pallet wrap, shrink film, supermarket back-of-house. Clear-on-clear (98/2 grade) baled for export. Coloured (jazz) and natural rolls taken separately.',
    tag: 'WE PAY YOU',
    tagInk: false,
    img: 'assets/facility-bags.jpg',
  },
  {
    num: '03',
    name: 'Hard plastics',
    sub: 'HDPE · PP REGRIND · CRATES · DRUMS',
    desc: 'Industrial HDPE, PP regrind, IBC totes, drums. Sorted by polymer. Priced on the bridge — paid out for clean grades, charged for contaminated or mixed.',
    tag: 'PRICED BY GRADE',
    tagInk: true,
    img: null,
  },
  {
    num: '04',
    name: 'Pallets',
    sub: 'WHOLE · BROKEN · MIXED',
    desc: 'CHEP, EPAL, white-wood, custom sizes. Whole pallets resold or repaired. Broken or mixed loads taken in for a tip fee.',
    tag: 'TAKE-IN FEE',
    tagInk: true,
    img: null,
  },
  {
    num: '05',
    name: 'Metal',
    sub: 'FERROUS · BANDING · STRAPPING',
    desc: "We accept metal that comes off your loading bay — strapping, banding, light steel — but we don't trade it. It goes on to a metals merchant.",
    tag: 'WE TAKE',
    tagInk: true,
    img: null,
  },
];

function ServicesPage({ go }) {
  return (
    <div data-screen-label="02 Services">
      <PageHeader
        crumbs={[<a key="h" href="#home" onClick={(e)=>{e.preventDefault(); go('home');}}>Home</a>, 'Services']}
        title={<>Five materials.<br/><em>Priced honestly.</em></>}
        lead="What we take, what we pay for, and what costs you to drop. No hidden bin-rental clauses, no minimum tonnage. The yard runs on volume, so the more you bring, the better the rate."
        aside={
          <div style={{display:'flex', gap:12, marginTop: 24, flexWrap:'wrap'}}>
            <a className="btn btn--primary" href={WA} target="_blank" rel="noopener"><Ico.WhatsApp width="16" height="16"/>Send a photo, get a price</a>
            <a className="btn btn--outline" href="#collections" onClick={(e)=>{e.preventDefault(); go('collections');}}>Set up a collection</a>
          </div>
        }
      />

      <section className="section">
        <div className="container">
          <div className="eyebrow"><span className="dot"></span>MATERIAL INDEX · 05 ENTRIES</div>
          <div className="mat-list" style={{marginTop: 24}}>
            {MATERIALS.map(m => (
              <div className="mat-row" key={m.num}>
                <div className="mat-row__num">{m.num}</div>
                <div className="mat-row__name">
                  {m.name}
                  <small>{m.sub}</small>
                </div>
                <div className="mat-row__desc">{m.desc}</div>
                <div className="mat-row__price">
                  <span className={`tag ${m.tagInk ? 'tag--ink' : ''}`}>{m.tag}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section>
        <div className="split">
          <div className="split__media">
            <img src="assets/cardboard-baling.jpg?v=4" alt="Telehandler feeding cardboard into the baler"/>
          </div>
          <div className="split__copy">
            <div className="eyebrow"><span className="dot"></span>BULK BUYERS</div>
            <h2 className="h-1">Got tonnage?<br/>We're a buyer.</h2>
            <p style={{color:'var(--ink-2)', fontSize: 16, lineHeight: 1.55, maxWidth:'48ch'}}>
              We trade export-grade OCC and clear LDPE bales to UK and EU reprocessors.
              If you produce a regular tonnage of clean material, we'll send our van
              or buy direct off your bay.
            </p>
            <ul className="split__bullets">
              <li>OCC 90/10 — paid at current market rate</li>
              <li>Clear LDPE 98/2 — paid on the bale</li>
              <li>Bagged, baled or loose-tipped all accepted</li>
              <li>Trade accounts paid by BACS direct to your bank</li>
            </ul>
            <a className="btn btn--ink" href="#contact" onClick={(e)=>{e.preventDefault(); go('contact');}}>
              Open a trade account <Ico.Arrow className="arrow"/>
            </a>
          </div>
        </div>
      </section>

      <section className="section section--paper2">
        <div className="container">
          <div className="eyebrow"><span className="dot"></span>WHAT WE DON'T TAKE</div>
          <h2 className="h-2" style={{marginTop: 16, maxWidth: '20ch'}}>To save you a wasted trip — these go elsewhere.</h2>
          <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 1, background:'var(--rule)', border:'1px solid var(--rule)', marginTop: 32}}>
            {['Hazardous waste','WEEE / electricals','Food waste','Asbestos','Tyres','Glass','Soil &amp; rubble','Liquids / paints'].map(x => (
              <div key={x} style={{background:'var(--paper)', padding: '20px 22px', fontFamily:'var(--mono)', fontSize: 13, letterSpacing:'.06em', textTransform:'uppercase', color:'var(--ink-2)'}}
                dangerouslySetInnerHTML={{__html: x}}/>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

window.ServicesPage = ServicesPage;