/* ===== Services · Project Experience · Final CTA · Footer ===== */

function Services(){
  const svc=[
    ['box','Blank-Shell Fit-Outs','Bare shell to trading-ready, controlled end to end.'],
    ['store','Shopfitting Works','Joinery, finishes and shopfit installed to brand standard.'],
    ['refresh','Commercial Refurbishments','Upgrades and reworks delivered around the business.'],
    ['shield','Contract Site Management','Supervision and control under your contract.'],
    ['user','Builder Support','Contracted site management for builders who need it.'],
    ['truck','Rollout Works','Repeatable multi-site delivery with consistent control.'],
    ['flag','Project Recovery','Stalled or troubled jobs brought back under control.'],
    ['check','Defect Closeout','Punch-list to sign-off — finished, recorded, done.'],
  ];
  return (
    <section className="section" id="services" style={{borderTop:'1px solid var(--line)'}}>
      <div className="wrap">
        <div className="sec-head reveal">
          <div className="l">
            <span className="eyebrow">Services</span>
            <h2 className="h-sec">Commercial Works,<br/>End to End.</h2>
            <p className="sub">From blank shell to defect closeout — and the recovery work in between. Every engagement runs on the same control framework.</p>
          </div>
        </div>
        <div className="grid-4">
          {svc.map(([ic,t,d],i)=>(
            <div className="card reveal" key={t} style={{transitionDelay:(i%4*60)+'ms'}}>
              <div className="ic"><Icon name={ic}/></div>
              <h4 style={{fontSize:17}}>{t}</h4>
              <p style={{fontSize:13.5}}>{d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Experience(){
  const cats=[
    ['Hospitality Fit-Out Experience',['Fit-Out','Night Works','Site Control'], 'assets/fitout-hero.jpg'],
    ['Retail Brand Fit-Out Experience',['Shopfitting','Rollout','Live Site'], 'assets/proj-hardy-harper.webp'],
    ['Commercial Leisure Fit-Out Experience',['Fit-Out','Mobilisation','Site Control'], 'assets/proj-hey-caddy.webp'],
    ['Live-Site / Night Works Experience',['Night Works','Live Site','Make-Safe'], 'assets/proj-lismore-night.jpg'],
  ];
  return (
    <section className="section" id="projects" style={{borderTop:'1px solid var(--line)'}}>
      <div className="wrap">
        <div className="sec-head reveal">
          <div className="l">
            <span className="eyebrow">Project Experience</span>
            <h2 className="h-sec">Delivered Across<br/>Commercial Categories.</h2>
            <p className="sub">Experience grouped by category and capability — the work speaks through structure, not client logos.</p>
          </div>
        </div>
        <div className="grid-2">
          {cats.map(([t,tags,img],i)=>(
            <div className="card exp-card reveal" key={t} style={{transitionDelay:(i*70)+'ms'}}>
              <div className="ph">
                {img
                  ? <div className="ph-img" style={{backgroundImage:`url('${img}')`}}></div>
                  : <div className="ph-stripe"></div>}
              </div>
              {!img && <div className="ph-label">{['HOSPITALITY','RETAIL','LEISURE','LIVE-SITE'][i]} · IMAGE</div>}
              <div className="body">
                <h4>{t}</h4>
                <div className="exp-tags">
                  {tags.map(tg=><span className="tag" key={tg}><span className="dot"></span>{tg}</span>)}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA(){
  return (
    <section className="section" id="contact">
      <div className="wrap">
        <div className="final reveal">
          <span className="eyebrow" style={{justifyContent:'center'}}>On time · Within budget · Above expectations</span>
          <h2>Need Commercial Works<br/>Delivered With Control?</h2>
          <p className="sub" style={{margin:'0 auto',textAlign:'center'}}>Commercial fit-outs, contract site management and nationwide-capable mobilisation from Tasmania — start the intake and we'll structure it from scope to handover.</p>
          <div className="btns">
            <a className="btn btn-primary" onClick={()=>openAssistant("I'd like to discuss a commercial project.")}>Discuss a Project <Icon name="arrow" size={16}/></a>
            <a className="btn btn-ghost" onClick={()=>openAssistant('upload')}><Icon name="upload" size={16}/> Upload Plans</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer(){
  return (
    <footer className="foot">
      <div className="wrap">
        <div className="foot-grid">
          <div>
            <div className="brand" style={{marginBottom:18, cursor:'default'}}>
              <img className="brand-logo foot-logo" src="assets/logo-full.svg" alt="Prime Control — Shopfitters for Franchises" />
            </div>
            <p style={{color:'var(--muted)',fontSize:14,maxWidth:'30ch'}}>Commercial Fit-Outs. Contract Site Management. Nationwide-Capable Mobilisation From Tasmania.</p>
          </div>
          <div>
            <h6>Capability</h6>
            <a href="#services">Commercial Fit-Outs</a>
            <a href="#services">Shopfitting Works</a>
            <a href="#services">Contract Site Management</a>
            <a href="#mobilisation">National Mobilisation</a>
          </div>
          <div>
            <h6>Company</h6>
            <a href="#difference">The Prime Control Difference</a>
            <a href="#projects">Projects</a>
            <a href="#mobilisation">About</a>
            <a href="#contact">Contact</a>
          </div>
          <div>
            <h6>Contact</h6>
            <a href="mailto:admin@primecontrol.com.au">admin@primecontrol.com.au</a>
            <a href="https://www.primecontrol.com.au">www.primecontrol.com.au</a>
            <p style={{color:'var(--muted)',marginTop:6}}>Mobilised from Tasmania</p>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© 2026 Prime Control Pty Ltd · All rights reserved</span>
          <span>On time · Within budget · Above expectations</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window,{ Services, Experience, FinalCTA, Footer });