/* QZ Motors — lower-page sections. Extensions of the QZ Motors Design System. */
const DSB = window.QZMotorsDesignSystem_756851;
const {Button:QBtn, FeatureCard, CtaBand, Footer:DSFooter, Input:QInput, Toast:QToast, Badge:QBadge, EmptyState:QEmpty} = DSB;
const {useState:useS} = React;

/* --- Featured brands ----------------------------------------------------- */
function BrandsSection({onPick, cars=[]}){
  const brands=window.QZ.brandsFrom(cars);
  if(brands.length===0) return null;
  return (
    <section className="qz-band qz-band-dark" aria-label="Featured brands">
      <div className="qz-container">
        <div className="qz-section-head">
          <div><p className="qz-eyebrow">Marques we know well</p><h2 className="qz-h2 qz-h2-light">Brands in stock</h2></div>
          <a className="qz-viewall qz-viewall-light" href={P.inv}>All brands →</a>
        </div>
        <div className="qz-brands">
          {brands.map(b=>(
            <button key={b.name} className="qz-brand" onClick={()=>onPick(b.name)}>
              <span className="qz-brand-name">{b.name}</span>
              <span className="qz-brand-count">{b.count} in stock</span>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

/* --- Why QZ Motors ------------------------------------------------------- */
const WHY=[
  {title:'Priced against the market', body:'Every car is benchmarked against live Islamabad listings before it goes up. If it is priced above the market, we tell you why.'},
  {title:'Photographed properly', body:'Forty images in real light — panel gaps, tyre dates, boot floor, engine bay. What you see is the car you collect.'},
  {title:'Papers before keys', body:'File, transfer letter, token tax and biometric verification are cleared in the showroom. You drive out with the car in your name.'},
  {title:'Still here afterwards', body:'The first service booked for you, and one number to call when something needs attention.'}
];
function WhySection({onTalk}){
  const [ask,setAsk]=useS(false);
  const [toast,setToast]=useS(null);
  React.useEffect(()=>{if(!toast) return; const t=setTimeout(()=>setToast(null),4000); return ()=>clearTimeout(t);},[toast]);
  return (
    <section className="qz-band qz-band-dark qz-band-hair" aria-label="Why QZ Motors">
      <div className="qz-container">
        <div className="qz-why-head">
          <p className="qz-eyebrow">Why QZ Motors</p>
          <h2 className="qz-h2 qz-h2-light">Bought the way you would want to buy.</h2>
        </div>
        <div className="qz-why">
          {WHY.map(w=><div key={w.title} className="qz-why-card"><FeatureCard tone="dark" title={w.title} body={w.body}/></div>)}
        </div>
        <div className="qz-assure">
          <ul className="qz-assure-list">
            <li>197-point inspection</li>
            <li>Transfer handled in-house</li>
            <li>Bank-verified payments</li>
          </ul>
          <QBtn variant="outline-dark" onClick={()=>setAsk(true)}>Talk to the showroom</QBtn>
        </div>
      </div>
      <ContactModal open={ask} onClose={()=>setAsk(false)} onSent={(how)=>setToast(how==='whatsapp'?'WhatsApp opened with your enquiry.':'Your email client has your enquiry ready to send.')}/>
      {toast && <div className="qz-toast"><QToast tone="success">{toast}</QToast></div>}
    </section>
  );
}

/* --- Sell + Trade-in split band ------------------------------------------ */
function SellTradeSection({anchorRef}){
  const [val,setVal]=useS(null);
  const [toast,setToast]=useS(null);
  React.useEffect(()=>{if(!toast) return; const t=setTimeout(()=>setToast(null),4000); return ()=>clearTimeout(t);},[toast]);
  return (
    <section className="qz-split" ref={anchorRef} aria-label="Sell or trade in your car">
      <div className="qz-split-half">
        <div className="qz-split-media"><image-slot id="qz-sell" shape="rect" placeholder="Owner handing over keys / car being photographed"></image-slot></div>
        <div className="qz-split-scrim" aria-hidden="true"></div>
        <div className="qz-split-body">
          <p className="qz-eyebrow qz-eyebrow-light">Sell your car</p>
          <h2 className="qz-h3-light">Six steps. One review. Then it’s live.</h2>
          <p className="qz-split-sub">Submit specifications and photographs, set your price, and our team approves the listing before it reaches buyers.</p>
          <QBtn onClick={()=>{window.location.href=P.sell;}}>Start a listing</QBtn>
        </div>
      </div>
      <div className="qz-split-half">
        <div className="qz-split-media"><image-slot id="qz-trade" shape="rect" placeholder="Trade-in bay / two cars side by side"></image-slot></div>
        <div className="qz-split-scrim" aria-hidden="true"></div>
        <div className="qz-split-body">
          <p className="qz-eyebrow qz-eyebrow-light">Trade-in</p>
          <h2 className="qz-h3-light">Trade the old one against the new.</h2>
          <p className="qz-split-sub">A valuation in 24 hours, offset directly against anything on the showroom floor.</p>
          <QBtn variant="outline-dark" onClick={()=>setVal('trade')}>Request a valuation</QBtn>
        </div>
      </div>
      <ValuationModal open={!!val} mode={val||'valuation'} onClose={()=>setVal(null)} onSent={(how)=>setToast(how==='saved'?'Valuation request saved — the showroom will call you within 24 hours.':how==='whatsapp'?'WhatsApp opened with your valuation request.':'Your email client has your valuation request ready to send.')}/>
      {toast && <div className="qz-toast"><QToast tone="success">{toast}</QToast></div>}
    </section>
  );
}

/* --- Testimonials -------------------------------------------------------- */
function TestimonialsSection(){
  return (
    <section className="qz-band qz-band-soft" aria-label="Customer testimonials">
      <div className="qz-container">
        <div className="qz-section-head">
          <div><p className="qz-eyebrow qz-eyebrow-dark">Owners</p><h2 className="qz-h2">What buyers tell us afterwards</h2></div>
        </div>
        {window.QZ.testimonials.length===0
          ? <div className="qz-empty"><QEmpty title="Owner reviews are being collected" body="Verified reviews from recent buyers and sellers will be published here."/></div>
          : <div className="qz-quotes">
              {window.QZ.testimonials.map(t=>(
                <figure key={t.name} className="qz-quote">
                  <blockquote>{t.quote}</blockquote>
                  <figcaption><span className="qz-quote-name">{t.name}</span><span className="qz-quote-role">{t.role}</span></figcaption>
                </figure>
              ))}
            </div>}
      </div>
    </section>
  );
}

/* --- Statistics ---------------------------------------------------------- */
function StatsSection({cars=[]}){
  const stats=window.QZ.statsFrom(cars);
  if(stats.length===0) return null;
  return (
    <section className="qz-band qz-band-dark" aria-label="QZ Motors by the numbers">
      <div className="qz-container qz-stats">
        {stats.map(s=>(
          <div key={s.label} className="qz-stat"><p className="qz-stat-n">{s.n}</p><p className="qz-stat-l">{s.label}</p></div>
        ))}
      </div>
    </section>
  );
}

/* --- Contact -------------------------------------------------------------- */
const PHONES=[{n:'+92 312 5815615', tel:'+923125815615', wa:'923125815615'},{n:'+92 318 5747145', tel:'+923185747145', wa:'923185747145'}];
function ContactSection({anchorRef}){
  return (
    <section className="qz-band qz-band-dark qz-band-hair" id="contact" ref={anchorRef} aria-label="Contact QZ Motors">
      <div className="qz-container qz-contact">
        <div>
          <p className="qz-eyebrow">Contact</p>
          <h2 className="qz-h2 qz-h2-light">Call, or message on WhatsApp.</h2>
          <p className="qz-split-sub">Both numbers reach the showroom directly. Email works too — qzmotorsg8@gmail.com.</p>
        </div>
        <div className="qz-contact-rows">
          {PHONES.map(p=>(
            <div key={p.n} className="qz-contact-row">
              <div>
                <p className="qz-contact-label">Mobile · WhatsApp</p>
                <a className="qz-contact-num" href={'tel:'+p.tel}>{p.n}</a>
              </div>
              <div className="qz-contact-actions">
                <a className="qz-btn-link" href={'tel:'+p.tel}><QBtn size="sm" variant="outline-dark">Call</QBtn></a>
                <a className="qz-btn-link" href={'https://wa.me/'+p.wa} target="_blank" rel="noopener" onClick={(e)=>{e.preventDefault(); window.openExternal('https://wa.me/'+p.wa);}}><QBtn size="sm">WhatsApp</QBtn></a>
              </div>
            </div>
          ))}
          <div className="qz-contact-row">
            <div>
              <p className="qz-contact-label">Instagram</p>
              <a className="qz-contact-num" href="https://instagram.com/qz_motors_g8" target="_blank" rel="noopener">@qz_motors_g8</a>
            </div>
            <div className="qz-contact-actions">
              <a className="qz-btn-link" href="https://instagram.com/qz_motors_g8" target="_blank" rel="noopener" onClick={(e)=>{e.preventDefault(); window.openExternal('https://instagram.com/qz_motors_g8');}}><QBtn size="sm" variant="outline-dark">Follow</QBtn></a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* --- Newsletter + footer -------------------------------------------------- */
function SiteFooter(){
  const [email,setEmail]=useS(''), [sent,setSent]=useS(false);
  const submit=(e)=>{e.preventDefault(); if(email.includes('@')){subscribeEmail(email); setSent(true); setEmail('');}};
  return (
    <>
      <section className="qz-newsletter" aria-label="Newsletter">
        <div className="qz-container qz-newsletter-inner">
          <div>
            <h2 className="qz-h3-light">New arrivals, before they hit the floor.</h2>
            <p className="qz-split-sub">One email a week. Stock only — no offers, no noise.</p>
          </div>
          <form className="qz-newsletter-form" onSubmit={submit}>
            <QInput label="Email" type="email" placeholder="you@example.com" value={email} onChange={e=>setEmail(e.target.value)} required/>
            <QBtn type="submit">Subscribe</QBtn>
          </form>
        </div>
        {sent && <div className="qz-toast"><QToast tone="success">Your email client has the subscription request ready to send.</QToast></div>}
      </section>
      <DSFooter columns={[
        {title:'Inventory', links:['Used cars','New arrivals','Featured','Reserved','Sold archive']},
        {title:'Services', links:['Sell your car','Trade-in']},
        {title:'Company', links:['About','Testimonials','Blog','FAQ','Contact']}
      ]}/>
      <div className="qz-legal">
        <span>© 2026 QZ Motors Islamabad. All rights reserved.</span>
        <span className="qz-legal-links"><a href="#top">Privacy</a><a href="#top">Terms</a><a href="#top">Listing policy</a></span>
      </div>
    </>
  );
}

Object.assign(window, {BrandsSection, WhySection, ContactSection, SellTradeSection, TestimonialsSection, StatsSection, SiteFooter, PHONES});