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

function HomePage({ go }) {
  return (
    <div data-screen-label="01 Home">
      {/* HERO */}
      <section className="hero">
        <div className="hero__bg">
          <img src="assets/hero.jpg?v=4" alt="Arrow Recycling yard, Birmingham"/>
          <div className="hero__overlay"></div>
        </div>
        <div className="container">
          <div className="hero__copy">
            <div className="eyebrow">Smethwick · West Midlands · since 2011</div>
            <h1 className="hero__title">
              Cardboard &amp; plastic recycling, <em>done quietly.</em>
            </h1>
            <p className="hero__sub">
              A working yard in Smethwick. Drop a load off, set up a regular
              pickup, or sell us your bulk material — we'll quote on a
              WhatsApp photo.
            </p>
            <div className="hero__ctas">
              <a href="#contact" className="btn btn--primary" onClick={(e)=>{e.preventDefault(); go('contact');}}>
                Get a quote <Ico.Arrow className="arrow"/>
              </a>
              <a href={WA} target="_blank" rel="noopener" className="btn btn--outline">
                <Ico.WhatsApp width="16" height="16"/> WhatsApp the yard
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* meta strip — sits on the paper bg below the hero */}
      <section style={{background:'var(--paper)'}}>
        <div className="container">
          <div className="hero-meta">
            <div><div className="k">Materials</div><div className="v">Cardboard, plastic film, hard plastic, pallets, metal</div></div>
            <div><div className="k">Yard hours</div><div className="v">Mon–Fri 8–6 · Sat 9–4</div></div>
            <div><div className="k">We pay for</div><div className="v">Bulk OCC, baled film, clean LDPE</div></div>
            <div><div className="k">Coverage</div><div className="v">25-mile radius of B66 2JT</div></div>
          </div>
        </div>
      </section>

      {/* SERVICES */}
      <section className="section">
        <div className="container">
          <div style={{maxWidth: 880, marginBottom: 64, display:'grid', gridTemplateColumns:'1fr 1fr', gap: 48, alignItems:'end'}}>
            <div>
              <div className="eyebrow">What we take</div>
              <h2 className="h-1" style={{marginTop: 12}}>Five materials,<br/>priced honestly.</h2>
            </div>
            <p style={{color:'var(--ink-2)', fontSize: 16.5, lineHeight: 1.6, maxWidth:'46ch'}}>
              We pay for clean cardboard and film, charge fairly for what we have to process, and tell you the difference up front. No bin-rental clauses, no minimum tonnage.
            </p>
          </div>

          <div className="svc-grid">
            {[
              {n:'01', t:'Cardboard & OCC', d:'OCC 90/10, KLS, kraft, mixed grade. Bulk loads paid on the weighbridge.'},
              {n:'02', t:'LDPE plastic film', d:'Clear (98/2), coloured jazz, natural rolls. Baled for export.'},
              {n:'03', t:'Hard plastics', d:'HDPE, PP regrind, IBC totes, drums. Sorted by polymer.'},
              {n:'04', t:'Pallets', d:'Whole, broken, mixed sizes. Resold or repaired where possible.'},
              {n:'05', t:'Metal', d:'Strapping, banding, light steel. We take it but don\'t buy it.'},
              {n:'06', t:'Bulk material trading', d:'Regular tonnage? Open a trade account and sell direct off your bay.'},
            ].map(s => (
              <a key={s.n} className="svc" href="#services" onClick={(e)=>{e.preventDefault(); go('services');}}>
                <div className="svc__num">{s.n}</div>
                <div className="svc__title">{s.t}</div>
                <div className="svc__desc">{s.d}</div>
                <div className="svc__more">Read more</div>
              </a>
            ))}
          </div>
        </div>
      </section>



      {/* IMAGE BAND */}
      <section className="image-band">
        <img src="assets/cardboard-baling.jpg?v=4" alt="Bales coming off the line at Arrow Recycling" />
        <div className="image-band__caption container">
          <span className="eyebrow" style={{color:'rgba(250,247,240,.7)'}}>The yard, mid-week</span>
          <p>Bales coming off the line. We process over 800 tonnes a week from the same site we've worked from since 2011.</p>
        </div>
      </section>

      {/* SPLIT — for businesses */}
      <section>
        <div className="split">
          <div className="split__media">
            <img src="assets/baler-machine.jpg?v=4" alt="Baler on the Arrow yard"/>
          </div>
          <div className="split__copy">
            <div className="eyebrow">For businesses</div>
            <h2 className="h-1">A working yard, on tap.</h2>
            <p className="lead">
              Manufacturers, distributors, supermarkets and printers across the West Midlands
              use us as the back of their loading bay. No bins, no skips, no equipment to install.
            </p>
            <ul className="split__bullets">
              <li>Free 30-minute on-site visit before we quote</li>
              <li>No contracts — pickups on demand or on a regular cadence</li>
              <li>Our van swings by, weighs at our bridge, pays you for clean material</li>
              <li>Waste-transfer note issued for every load</li>
            </ul>
            <div style={{display:'flex', gap:12, flexWrap:'wrap', marginTop: 12}}>
              <a className="btn btn--primary" href="#collections" onClick={(e)=>{e.preventDefault(); go('collections');}}>
                Book a free site visit <Ico.Arrow className="arrow"/>
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* PROCESS */}
      <section className="section">
        <div className="container">
          <div style={{maxWidth: 720, marginBottom: 64}}>
            <div className="eyebrow">How it works</div>
            <h2 className="h-1" style={{marginTop: 12}}>From your bay to a bale, in four steps.</h2>
          </div>
          <div className="process">
            {[
              {n:'01', t:'Send a photo', d:'WhatsApp or email a picture. Same-day price.'},
              {n:'02', t:'Drop or collect', d:'Bring it in (walk-ins welcome) or we send the van.'},
              {n:'03', t:'Weigh & bale', d:'Weighed on the public bridge, sorted, baled.'},
              {n:'04', t:'Paid & documented', d:'Payment for clean material. Waste-transfer note on the spot.'},
            ].map(s => (
              <div className="process__step" key={s.n}>
                <div className="process__num">{s.n}</div>
                <div className="process__title">{s.t}</div>
                <div className="process__desc">{s.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* TRUST */}
      <section className="section section--paper2">
        <div className="container">
          <TrustStrip />
        </div>
      </section>

      {/* QUOTE */}
      <section className="section">
        <div className="container" style={{maxWidth: 880}}>
          <blockquote className="quote">
            <p>
              "Arrow have been running our cardboard for nine years. The van turns up
              like clockwork — and the cheque actually arrives."
            </p>
            <footer>Site manager, West Midlands FMCG distributor</footer>
          </blockquote>
        </div>
      </section>

      {/* COVERAGE */}
      <section className="section">
        <div className="container">
          <div className="coverage">
            <div className="coverage__inner">
              <div>
                <div className="eyebrow">Where we cover</div>
                <h2 className="h-1" style={{marginTop: 12}}>The Black Country and beyond.</h2>
                <p className="lead" style={{marginTop: 20, maxWidth:'40ch'}}>
                  Our van runs a 25-mile radius from B66 2JT. Drop-off is open to anyone who can find the yard.
                </p>
                <div className="coverage__areas">
                  {['Smethwick','Oldbury','West Bromwich','Bearwood','Handsworth','Sandwell','Dudley','Birmingham','Wolverhampton','Tipton','Wednesbury','Halesowen','Walsall'].map((a, i) => (
                    <span key={a} className={`coverage__chip ${i < 3 ? 'coverage__chip--primary' : ''}`}>{a}</span>
                  ))}
                </div>
              </div>
              <div className="coverage__map">
                <CoverageMap/>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section">
        <div className="container" style={{display:'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems:'end', maxWidth: 1000}}>
          <h2 className="h-display">Got a load? <em style={{color:'var(--orange)', fontStyle:'normal'}}>Send a photo.</em></h2>
          <div style={{display:'flex', gap: 12, flexWrap:'wrap', justifySelf:'end'}}>
            <a className="btn btn--primary" href={WA} target="_blank" rel="noopener">
              <Ico.WhatsApp width="16" height="16"/> WhatsApp
            </a>
            <a className="btn btn--outline" href={PHONE_TEL}>
              <Ico.Phone width="16" height="16"/> {PHONE}
            </a>
          </div>
        </div>
      </section>
    </div>
  );
}

// Stylised abstract West Midlands coverage map — dot grid + concentric rings
function CoverageMap() {
  const dots = [];
  for (let y = 0; y < 18; y++) {
    for (let x = 0; x < 24; x++) {
      const cx = x * 18 + 12;
      const cy = y * 18 + 12;
      const dx = cx - 240, dy = cy - 170;
      const d = Math.sqrt(dx*dx + dy*dy);
      const inside = d < 180;
      dots.push(<circle key={`${x}-${y}`} cx={cx} cy={cy} r={inside ? 1.4 : 1}
        fill={inside ? 'rgba(232,82,28,.45)' : 'rgba(20,19,15,.1)'} />);
    }
  }
  return (
    <svg viewBox="0 0 480 340" style={{width:'100%', height:'100%', display:'block'}}>
      {dots}
      <circle cx="240" cy="170" r="60" fill="none" stroke="rgba(232,82,28,.4)" strokeWidth="1"/>
      <circle cx="240" cy="170" r="120" fill="none" stroke="rgba(232,82,28,.25)" strokeWidth="1"/>
      <circle cx="240" cy="170" r="180" fill="none" stroke="rgba(232,82,28,.15)" strokeWidth="1"/>
      <circle cx="240" cy="170" r="6" fill="var(--orange)"/>
      <text x="252" y="174" fill="var(--ink)" fontFamily="Inter, sans-serif" fontSize="11">Yard · Birmingham</text>
      <text x="180" y="100" fill="var(--ink-3)" fontFamily="Inter, sans-serif" fontSize="10">Smethwick</text>
      <text x="120" y="190" fill="var(--ink-3)" fontFamily="Inter, sans-serif" fontSize="10">Dudley</text>
      <text x="320" y="240" fill="var(--ink-3)" fontFamily="Inter, sans-serif" fontSize="10">Solihull</text>
      <text x="320" y="80" fill="var(--ink-3)" fontFamily="Inter, sans-serif" fontSize="10">Walsall</text>
    </svg>
  );
}

window.HomePage = HomePage;