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

function ContactPage({ go }) {
  const [sent, setSent] = React.useState(false);
  return (
    <div data-screen-label="06 Contact">
      <PageHeader
        crumbs={[<a key="h" href="#home" onClick={(e)=>{e.preventDefault(); go('home');}}>Home</a>, 'Contact']}
        title={<>Get a quote<br/><em>in 24 hours.</em></>}
        lead="Tell us what you've got, what you're producing each week, or what your loading bay looks like. We come back same day with a price, an audit slot, or a date for a lorry."
      />

      <section className="section">
        <div className="container" style={{display:'grid', gridTemplateColumns:'1.4fr 1fr', gap: 64, alignItems:'start'}}>
          <div>
            <div className="eyebrow"><span className="dot"></span>QUOTE FORM</div>
            <h2 className="h-2" style={{marginTop: 16, marginBottom: 28, maxWidth:'20ch'}}>The fastest way to a price.</h2>

            {sent ? (
              <div className="card" style={{borderLeft:'4px solid var(--orange)'}}>
                <div className="eyebrow" style={{color:'var(--orange-deep)'}}>SENT — THANKS</div>
                <p style={{fontSize: 17, marginTop: 12, color:'var(--ink)'}}>
                  We've got it. You'll hear from someone at the yard before close of play today,
                  or first thing tomorrow if it's after hours. For anything urgent, ring {PHONE}.
                </p>
                <button className="btn btn--outline" style={{marginTop: 20}} onClick={() => setSent(false)}>Send another</button>
              </div>
            ) : (
              <form onSubmit={(e) => { e.preventDefault(); setSent(true); }}>
                <div className="form-grid">
                  <div className="field">
                    <label>Your name</label>
                    <input type="text" placeholder="Sam Patel" required/>
                  </div>
                  <div className="field">
                    <label>Company (optional)</label>
                    <input type="text" placeholder="Patel Logistics Ltd"/>
                  </div>
                  <div className="field">
                    <label>Phone</label>
                    <input type="tel" placeholder="07*** ******" required/>
                  </div>
                  <div className="field">
                    <label>Email</label>
                    <input type="email" placeholder="sam@example.co.uk" required/>
                  </div>
                  <div className="field full">
                    <label>What do you need?</label>
                    <select defaultValue="">
                      <option value="" disabled>Choose one…</option>
                      <option>Quote on bulk material I'm selling</option>
                      <option>Set up regular pickups by your van</option>
                      <option>Free on-site visit before quoting</option>
                      <option>Drop-off question</option>
                      <option>Other</option>
                    </select>
                  </div>
                  <div className="field full">
                    <label>Tell us about it</label>
                    <textarea placeholder="Volume, material type, postcode, frequency — anything you can give us. Photo welcome via WhatsApp."/>
                  </div>
                </div>
                <div style={{display:'flex', gap: 12, marginTop: 28, flexWrap:'wrap'}}>
                  <button type="submit" className="btn btn--primary">Send enquiry <Ico.Arrow className="arrow"/></button>
                  <a className="btn btn--whatsapp" href={WA} target="_blank" rel="noopener"><Ico.WhatsApp width="16" height="16"/>or WhatsApp it</a>
                </div>
                <p style={{marginTop: 16, fontFamily:'var(--mono)', fontSize: 11.5, letterSpacing:'.06em', color:'var(--ink-3)'}}>
                  WE REPLY WITHIN 24 HOURS · NO MARKETING LISTS · GDPR COMPLIANT
                </p>
              </form>
            )}
          </div>

          <aside style={{display:'grid', gap: 16}}>
            <div className="card card--ink">
              <div className="eyebrow" style={{color:'rgba(245,241,232,.55)'}}><span className="dot"></span>DIRECT LINES</div>
              <div style={{display:'grid', gap:18, marginTop: 24}}>
                <a href={PHONE_TEL} style={{textDecoration:'none', color:'inherit'}}>
                  <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'.12em', color:'rgba(245,241,232,.5)'}}>YARD &amp; OFFICE</div>
                  <div style={{fontWeight:700, fontSize:28, letterSpacing:'-0.02em', marginTop: 4}}>{PHONE}</div>
                </a>
                <a href={`mailto:${EMAIL}`} style={{textDecoration:'none', color:'inherit'}}>
                  <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'.12em', color:'rgba(245,241,232,.5)'}}>EMAIL</div>
                  <div style={{fontWeight:700, fontSize:18, letterSpacing:'-0.01em', marginTop: 4}}>{EMAIL}</div>
                </a>
                <a href={WA} target="_blank" rel="noopener" style={{textDecoration:'none', color:'inherit'}}>
                  <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'.12em', color:'rgba(245,241,232,.5)'}}>WHATSAPP THE YARD</div>
                  <div style={{fontWeight:700, fontSize:18, letterSpacing:'-0.01em', marginTop: 4, color:'#25D366'}}>Send a photo for instant quote</div>
                </a>
              </div>
            </div>

            <div className="card">
              <div className="eyebrow"><span className="dot"></span>VISIT THE YARD</div>
              <div style={{marginTop: 16, fontWeight:700, fontSize: 18, letterSpacing:'-0.01em', lineHeight:1.3}}>
                Arrow Recycling Ltd<br/>
                <span style={{fontWeight:500, color:'var(--ink-2)', fontSize:15}}>15 Cornwall Road<br/>Smethwick, B66 2JT<br/>West Midlands</span>
              </div>
              <hr style={{border:'none', borderTop:'1px solid var(--rule)', margin:'20px 0'}}/>
              <div style={{display:'grid', gap: 8, fontSize: 14}}>
                <div style={{display:'flex', justifyContent:'space-between'}}><span style={{color:'var(--ink-2)'}}>Mon – Fri</span><span style={{fontWeight:600}}>8:00 – 18:00</span></div>
                <div style={{display:'flex', justifyContent:'space-between'}}><span style={{color:'var(--ink-2)'}}>Saturday</span><span style={{fontWeight:600}}>9:00 – 16:00</span></div>
                <div style={{display:'flex', justifyContent:'space-between'}}><span style={{color:'var(--ink-2)'}}>Sunday</span><span style={{fontWeight:600, color:'var(--ink-3)'}}>Closed</span></div>
              </div>
              <div style={{display:'grid', gap: 8, marginTop: 20}}>
                <a className="btn btn--primary btn--sm" style={{width:'100%', justifyContent:'center'}}
                   href="https://share.google/aRoBjbvNrbX3kaylN" target="_blank" rel="noopener">
                  Open in Google Maps
                </a>
                <a className="btn btn--outline btn--sm" style={{width:'100%', justifyContent:'center'}}
                   href="#dropoff" onClick={(e)=>{e.preventDefault(); go('dropoff');}}>
                  Drop-off info
                </a>
              </div>
            </div>
          </aside>
        </div>
      </section>
    </div>
  );
}

window.ContactPage = ContactPage;