/* Service-page renderer for Innovare Renovations. Sets globalThis.renderService. */
(function(){
  var ARROW = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>';
  var I = {
    home:'<path d="M3 11l9-7 9 7"/><path d="M5 10v10h14V10"/><path d="M9 20v-6h6v6"/>',
    bath:'<path d="M4 12h16v3a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4z"/><path d="M7 12V6a2 2 0 0 1 2-2h1"/><path d="M8 19l-1 2M16 19l1 2"/>',
    kitchen:'<rect x="3" y="3" width="18" height="18" rx="1"/><path d="M3 9h18M9 3v6M9 14v4"/>',
    laundry:'<rect x="4" y="3" width="16" height="18" rx="2"/><circle cx="12" cy="13" r="4"/><path d="M8 6h.01M11 6h.01"/>',
    extension:'<path d="M3 20V10l6-5v15"/><path d="M9 10l7-5v15"/><path d="M16 8l5 3v9H3"/>',
    storey:'<path d="M4 21V13l8-4 8 4v8"/><path d="M4 13V7l8-4 8 4v6"/><path d="M10 21v-4h4v4"/>',
    granny:'<path d="M4 20V11l5-4 5 4v9"/><path d="M14 20V9l3-2 3 2v11"/><path d="M7 20v-4h3v4"/>',
    knockdown:'<path d="M3 21h18"/><path d="M6 21V8l6-4 6 4v13"/><path d="M3 11l3-3M18 8l3 3"/><path d="M10 21v-5h4v5"/>',
    queenslander:'<path d="M2 12l10-8 10 8"/><path d="M5 10v10h14V10"/><path d="M5 20h14"/><path d="M9 20v-5h6v5"/><path d="M4 13h16"/>',
    heritage:'<path d="M4 21h16"/><path d="M6 21V9h12v12"/><path d="M6 9l6-5 6 5"/><path d="M10 21v-6h4v6"/>',
    unit:'<rect x="4" y="3" width="7" height="18"/><rect x="13" y="8" width="7" height="13"/><path d="M7 7h.01M7 11h.01M16 12h.01M16 16h.01"/>',
    commercial:'<rect x="3" y="4" width="18" height="16" rx="1"/><path d="M3 10h18M9 4v16M15 4v16"/>',
    pool:'<path d="M3 18c1.5 0 1.5 1 3 1s1.5-1 3-1 1.5 1 3 1 1.5-1 3-1 1.5 1 3 1 1.5-1 3-1"/><path d="M3 14c1.5 0 1.5 1 3 1s1.5-1 3-1 1.5 1 3 1 1.5-1 3-1 1.5 1 3 1 1.5-1 3-1"/><path d="M8 11V5a2 2 0 0 1 4 0M16 11V5"/>',
    outdoor:'<path d="M12 3v3M5 8l2 2M19 8l-2 2M4 20h16"/><path d="M6 20l1-8h10l1 8"/><path d="M9 20v-4h6v4"/>',
    design:'<path d="M12 2l2.5 5 5.5.8-4 3.9.9 5.5L12 20l-4.9 2.6.9-5.5-4-3.9L9.5 7z"/>',
    ruler:'<path d="M3 15L15 3l6 6L9 21z"/><path d="M7 11l2 2M11 7l2 2M15 11l2 2"/>',
    wall:'<rect x="3" y="4" width="18" height="16"/><path d="M3 10h18M3 16h18M9 4v6M15 10v6M9 16v4"/>',
    water:'<path d="M12 3c4 5 6 8 6 11a6 6 0 0 1-12 0c0-3 2-6 6-11z"/>',
    tile:'<rect x="3" y="3" width="18" height="18"/><path d="M3 9h18M3 15h18M9 3v18M15 3v18"/>',
    cabinet:'<rect x="4" y="3" width="16" height="18" rx="1"/><path d="M12 3v18M8 7h.01M15 7h.01"/>',
    tap:'<path d="M9 6h6M12 6v4M6 10h12v3a6 6 0 0 1-12 0z"/>',
    engineer:'<circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3M5 5l2 2M17 17l2 2M5 19l2-2M17 7l2-2"/>',
    council:'<path d="M3 21h18M5 21V9l7-5 7 5v12"/><path d="M9 21v-6h6v6M9 12h.01M15 12h.01"/>',
    hammer:'<path d="M14 6l4 4M4 20l8-8M13 3l8 8-3 3-8-8z"/>',
    tree:'<path d="M12 22v-6M8 16a4 4 0 0 1-2-7 4 4 0 0 1 6-4 4 4 0 0 1 6 4 4 4 0 0 1-2 7z"/>',
    deck:'<path d="M3 7h18v3H3zM3 14h18v3H3z"/><path d="M6 10v4M12 10v4M18 10v4"/>',
    roof:'<path d="M2 12l10-8 10 8"/><path d="M4 12v8h16v-8"/>',
    star:'<path d="M12 2l2.5 5 5.5.8-4 3.9.9 5.5L12 20l-4.9 2.6.9-5.5-4-3.9L9.5 7z"/>',
    clock:'<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>',
    dollar:'<circle cx="12" cy="12" r="9"/><path d="M12 7v10M9.5 9.5a2.5 2 0 0 1 5 0c0 2-5 1-5 3a2.5 2 0 0 0 5 0"/>',
    shield:'<path d="M9 12l2 2 4-4"/><path d="M12 3l7 3v6c0 4.5-3 7.5-7 9-4-1.5-7-4.5-7-9V6z"/>',
    check:'<path d="M4 12l5 5L20 6"/>',
    light:'<path d="M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12c1 1 1 2 1 3h6c0-1 0-2 1-3a7 7 0 0 0-4-12z"/>',
    building:'<rect x="4" y="3" width="16" height="18"/><path d="M8 7h2M14 7h2M8 11h2M14 11h2M8 15h2M14 15h2"/>'
  };
  function ic(name){ return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">'+(I[name]||I.home)+'</svg>'; }

  var TITLES = {
    'home-renovations':'Home Renovations','bathroom-renovation':'Bathroom Renovation',
    'kitchen-renovation':'Kitchen Renovation','laundry-renovation':'Laundry Renovation',
    'home-extensions':'Home Extensions','second-storey-additions':'Second Storey Additions',
    'granny-flat-builders':'Granny Flat Builders','knockdown-rebuilds':'Knockdown Rebuilds',
    'queenslander-renovation':'Queenslander Renovation','heritage-home-renovation':'Heritage Home Renovation',
    'unit-townhouse-renovation':'Unit & Townhouse Renovation','commercial-office-renovation':'Commercial Office Renovation',
    'swimming-pools':'Swimming Pools','outdoor-living-areas':'Outdoor Living Areas'
  };
  var RELICON = {
    'home-renovations':'home','bathroom-renovation':'bath','kitchen-renovation':'kitchen',
    'laundry-renovation':'laundry','home-extensions':'extension','second-storey-additions':'storey',
    'granny-flat-builders':'granny','knockdown-rebuilds':'knockdown','queenslander-renovation':'queenslander',
    'heritage-home-renovation':'heritage','unit-townhouse-renovation':'unit','commercial-office-renovation':'commercial',
    'swimming-pools':'pool','outdoor-living-areas':'outdoor'
  };

  function head(s){
    return '<!DOCTYPE html>\n<html lang="en">\n<head>\n<meta charset="UTF-8">\n'+
      '<meta name="viewport" content="width=device-width, initial-scale=1.0">\n'+
      '<title>'+s.metaTitle+'</title>\n<meta name="description" content="'+s.metaDescription+'">\n'+
      '<link rel="preconnect" href="https://fonts.googleapis.com">\n'+
      '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>\n'+
      '<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Hanken+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">\n'+
      '<link rel="stylesheet" href="assets/css/style.css">\n</head>\n<body data-page="services">\n<div data-include="header"></div>\n<main>\n';
  }

  function hero(s){
    return '<section class="page-hero with-media">\n<div class="container page-hero-inner">\n<div>\n'+
      '<nav class="crumb"><a href="index.html">Home</a>'+
      '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></svg>'+
      '<a href="index.html#services">Services</a>'+
      '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></svg>'+
      '<span class="cur">'+TITLES[s.slug]+'</span></nav>\n'+
      '<span class="eyebrow light">'+s.eyebrow+'</span>\n<h1>'+s.h1+'</h1>\n<p class="lead">'+s.lead+'</p>\n'+
      '<div class="btn-row"><a class="btn btn-primary" href="contact.html">Request a Free Quote '+ARROW+'</a>'+
      '<a class="btn btn-outline-light" href="tel:0488773232">Call 0488 773 232</a></div>\n</div>\n'+
      '<div class="hero-media" data-reveal><div class="ph ph-43"><span class="ph-icon">'+ic(s.heroIcon)+'</span>'+
      '<span class="ph-label">'+s.heroLabel+'</span><span class="ph-tag">Photo placeholder</span></div></div>\n</div>\n</section>\n';
  }

  function intro(s){
    var p = s.intro.paras.map(function(x){return '<p>'+x+'</p>';}).join('\n');
    return '<section>\n<div class="container-narrow prose" data-reveal>\n<span class="eyebrow">Overview</span>\n'+
      '<h2>'+s.intro.heading+'</h2>\n'+p+'\n</div>\n</section>\n';
  }

  function caps(s){
    var cards = s.caps.cards.map(function(c){
      return '<div class="svc-card"><span class="svc-icon">'+ic(c.icon)+'</span><h3>'+c.title+'</h3><p>'+c.body+'</p></div>';
    }).join('\n');
    var cls = s.caps.cards.length===2 ? 'svc-grid two' : (s.caps.cards.length===4 ? 'svc-grid two' : 'svc-grid');
    var sub = s.caps.sub ? '<p>'+s.caps.sub+'</p>' : '';
    return '<section class="section-soft">\n<div class="container">\n<div class="section-head" data-reveal>'+
      '<span class="eyebrow">'+s.caps.eyebrow+'</span><h2>'+s.caps.heading+'</h2>'+sub+'</div>\n'+
      '<div class="'+cls+'" data-reveal>\n'+cards+'\n</div>\n</div>\n</section>\n';
  }

  function process(s){
    if(!s.process) return '';
    var steps = s.process.steps.map(function(st){
      return '<div class="step"><h4>'+st.t+'</h4><p>'+st.b+'</p></div>';
    }).join('\n');
    return '<section>\n<div class="container-narrow">\n<div class="section-head" data-reveal>'+
      '<span class="eyebrow">'+s.process.eyebrow+'</span><h2>'+s.process.heading+'</h2></div>\n'+
      '<div class="steps" data-reveal>\n'+steps+'\n</div>\n</div>\n</section>\n';
  }

  function standards(s){
    if(!s.standards) return '';
    var items = s.standards.items.map(function(it){return '<li>'+it+'</li>';}).join('\n');
    var eb = s.standards.eyebrow || 'Standards & compliance';
    var intro = s.standards.intro ? '<p class="lead" style="margin-top:16px">'+s.standards.intro+'</p>' : '';
    return '<section class="section-dark">\n<div class="container split">\n<div data-reveal>'+
      '<span class="eyebrow light">'+eb+'</span><h2>'+s.standards.heading+'</h2>'+intro+
      '<ul class="check-list two">\n'+items+'\n</ul></div>\n'+
      '<div data-reveal data-delay="1"><div class="ph ph-43 dark"><span class="ph-icon">'+ic(s.heroIcon)+'</span>'+
      '<span class="ph-label">'+TITLES[s.slug]+' in progress</span><span class="ph-tag">Photo placeholder</span></div></div>\n</div>\n</section>\n';
  }

  function costs(s){
    if(!s.costs) return '';
    var rows = s.costs.rows.map(function(r){return '<tr><td>'+r[0]+'</td><td class="num">'+r[1]+'</td></tr>';}).join('\n');
    var note = s.costs.note ? '<div class="note-block" style="margin-top:24px">'+s.costs.note+'</div>' : '';
    var eb = s.costs.eyebrow || 'Indicative costs';
    var intro = s.costs.intro ? '<p style="color:var(--muted);margin:14px 0 26px;max-width:70ch">'+s.costs.intro+'</p>' : '';
    return '<section class="section-soft">\n<div class="container-narrow">\n<div class="section-head" data-reveal style="margin-bottom:8px">'+
      '<span class="eyebrow">'+eb+'</span><h2>'+s.costs.heading+'</h2></div>\n'+intro+
      '<table class="data-table" data-reveal>\n<thead><tr><th>'+s.costs.cols[0]+'</th><th>'+s.costs.cols[1]+'</th></tr></thead>\n'+
      '<tbody>\n'+rows+'\n</tbody>\n</table>\n'+note+'\n</div>\n</section>\n';
  }

  function faqs(s){
    var items = s.faqs.map(function(f){
      return '<div class="acc-item"><button class="acc-q">'+f.q+'<span class="acc-icon"></span></button>'+
        '<div class="acc-body"><div class="acc-body-inner">'+f.a+'</div></div></div>';
    }).join('\n');
    var heading = s.faqHeading || 'Frequently asked questions';
    return '<section>\n<div class="container-narrow">\n<div class="section-head" data-reveal>'+
      '<span class="eyebrow">Questions</span><h2>'+heading+'</h2></div>\n'+
      '<div class="acc" data-reveal>\n'+items+'\n</div>\n</div>\n</section>\n';
  }

  function related(s){
    var chips = s.related.map(function(sl){
      return '<a class="chip" href="'+sl+'.html">'+
        '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">'+(I[RELICON[sl]]||I.home)+'</svg>'+
        TITLES[sl]+'</a>';
    }).join('\n');
    return '<section class="section-tight">\n<div class="container-narrow">\n<div class="section-head" data-reveal style="margin-bottom:24px">'+
      '<span class="eyebrow">Related services</span><h2 style="font-size:clamp(1.4rem,2.4vw,1.9rem)">Explore what else we build</h2></div>\n'+
      '<div class="chips" data-reveal>\n'+chips+'\n</div>\n</div>\n</section>\n';
  }

  function cta(s){
    return '<section class="cta-band">\n<div class="container" data-reveal>'+
      '<span class="eyebrow light center">Free consultation</span><h2>'+s.cta.heading+'</h2>'+
      '<p>'+s.cta.text+'</p>\n<div class="btn-row"><a class="btn btn-primary" href="contact.html">Request a Free Quote '+ARROW+'</a>'+
      '<a class="btn btn-outline-light" href="tel:0488773232">Call 0488 773 232</a></div></div>\n</section>\n';
  }

  function foot(){
    return '</main>\n<div data-include="footer"></div>\n<script src="assets/js/main.js" defer></script>\n</body>\n</html>\n';
  }

  globalThis.renderService = function(s){
    return head(s)+hero(s)+intro(s)+caps(s)+process(s)+standards(s)+costs(s)+faqs(s)+related(s)+cta(s)+foot();
  };
})();
