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

const FAQ = [
  {q: 'Do you pay for cardboard?', a: "Yes — for bulk loads of clean, dry, baled or bagged OCC, kraft and mixed cardboard. Mixed-grade or contaminated loads are taken at a lower rate. Send a WhatsApp photo and we'll quote a per-tonne price the same day."},
  {q: "Do I need to book a drop-off?", a: "No — walk-ins are welcome during yard hours (Mon–Fri 8–6, Sat 9–4). Drive in, park on the public weighbridge, and we'll handle the rest. Just make sure mixed materials are separated before you arrive — we'll have to charge for sorting otherwise."},
  {q: 'Are you a registered waste carrier?', a: 'Yes. Arrow Recycling Ltd holds an upper-tier waste carrier, broker and dealer licence with the Environment Agency under registration CBDU195919. We issue waste-transfer notes on the spot for every load.'},
  {q: 'How quickly can you start a regular pickup?', a: "Once we've done the free site visit and agreed a price, we're usually on your bay within a week. There's no equipment to install — we just put your bay on our van's run."},
  {q: "Do I have to sign a long contract?", a: "No. There are no contracts. We pick up on demand or on a regular cadence we agree with you — and either side can pause or stop with a phone call."},
  {q: "What postcodes do you cover?", a: "Our van runs roughly a 25-mile radius of B66 2JT: Smethwick, Sandwell, Oldbury, West Bromwich, Dudley, Walsall, Wolverhampton, Birmingham, Solihull, Bromsgrove, Halesowen and most of the Black Country. For drop-offs at the yard, anyone's welcome."},
  {q: 'Can I sell you bulk material directly?', a: "Absolutely — that's a big part of what we do. If you're producing regular tonnage of OCC, kraft, or LDPE film and looking for a buyer, open a trade account and we'll send the van or buy direct off your bay. For full lorry loads we'll travel further than our usual 25-mile radius — and mixed loads are completely fine at lorry scale, no need to pre-separate."},
  {q: "What can't you take?", a: 'Hazardous waste, WEEE, food waste, asbestos, tyres, glass, soil and rubble, and liquids. If in doubt, send a photo first — saves a wasted trip.'},
  {q: 'Do you issue waste-transfer notes?', a: "Yes — on the spot for every single load, dropped or collected. Bring your company name and address and we'll have it in your hand before you leave the yard. We keep our copy for the regulatory retention period."},
  {q: "What's the most common way businesses use you?", a: "Two main ways: small operators drive in for ad-hoc drop-offs at the yard, and businesses with regular volume have us send the van on a weekly or fortnightly run to clear their bay. Both pay out the same way for clean material."},
];

function FaqPage({ go }) {
  return (
    <div data-screen-label="05 FAQ">
      <PageHeader
        crumbs={[<a key="h" href="#home" onClick={(e)=>{e.preventDefault(); go('home');}}>Home</a>, 'FAQ']}
        title={<>Straight<br/><em>answers.</em></>}
        lead="The questions we get asked most by walk-ins, by procurement teams, and by anyone trying to work out whether we'll buy their cardboard or charge them to take it."
        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"/>Ask on WhatsApp</a>
            <a className="btn btn--outline" href={PHONE_TEL}><Ico.Phone width="16" height="16"/>Call the yard</a>
          </div>
        }
      />

      <section className="section">
        <div className="container" style={{display:'grid', gridTemplateColumns:'1fr 2fr', gap: 64, alignItems:'start'}}>
          <aside style={{position:'sticky', top: 120}}>
            <div className="eyebrow"><span className="dot"></span>10 QUESTIONS</div>
            <p style={{marginTop: 16, color:'var(--ink-2)', fontSize: 15.5, lineHeight: 1.55}}>
              Can't find what you need? Send a photo or call the yard during opening hours
              and you'll get a straight answer from someone who's actually here.
            </p>
            <div style={{marginTop: 32, padding: 24, background:'var(--paper-2)', borderLeft:'4px solid var(--orange)'}}>
              <div className="eyebrow">YARD DESK</div>
              <div style={{marginTop: 12, fontFamily:'var(--sans)', fontWeight:700, fontSize: 22, letterSpacing:'-0.015em'}}>{PHONE}</div>
              <div style={{fontSize: 13, color:'var(--ink-2)', marginTop: 4}}>Mon–Fri 8–6 · Sat 9–4</div>
            </div>
          </aside>

          <div className="faq">
            {FAQ.map((item, i) => (
              <details key={i} {...(i === 0 ? {open: true} : {})}>
                <summary>
                  <span className="num">Q{String(i+1).padStart(2, '0')}</span>
                  <span>{item.q}</span>
                  <span className="plus"></span>
                </summary>
                <div className="faq__body" dangerouslySetInnerHTML={{__html: item.a}}/>
              </details>
            ))}
          </div>
        </div>
      </section>

      <section className="section--tight section--ink">
        <div className="container" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 48, alignItems:'center'}}>
          <h2 className="h-2" style={{color:'var(--paper)', maxWidth:'20ch'}}>Still got a question? Easier to just ring us.</h2>
          <div style={{display:'grid', gap:12, justifyContent:'end'}}>
            <a className="btn btn--primary" href={PHONE_TEL}><Ico.Phone width="16" height="16"/>{PHONE}</a>
            <a className="btn btn--whatsapp" href={WA} target="_blank" rel="noopener"><Ico.WhatsApp width="16" height="16"/>WhatsApp</a>
          </div>
        </div>
      </section>
    </div>
  );
}

window.FaqPage = FaqPage;