// @requirements REQ-PRODUCT-CF-HOST REQ-PRODUCT-MOBILE REQ-PRODUCT-A11Y
import {guideSections,siteSections,sectionForGuide,exampleSectionUrl,guideSectionUrl,starterPath} from './navigation.mjs';
const e=value=>String(value).replace(/[&<>"']/gu,c=>({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
const links=rows=>`<ul class="guide-index-links">${rows.map(entry=>`<li><a href="${entry.route??entry.href}">${e(entry.title??entry.label)}</a></li>`).join('')}</ul>`;
export function guideLanding(){return `<header class="guide-hub-intro"><p class="eyebrow">Documentation</p><h1>Build one part<br>at a time</h1><p>A site inventory, your legal wording and the controls you need. Start with the frontend; add retained records and a backend when you need them.</p></header><section class="guide-first-steps" aria-labelledby="first-integration"><h2 id="first-integration">Your first integration</h2>${starterPath()}</section><section aria-labelledby="guide-areas"><h2 id="guide-areas">Continue by task</h2><div class="guide-topic-grid">${siteSections.map(section=>`<section class="guide-topic" id="${section.id}"><h3>${e(section.title)}</h3><p>${e(section.description)}</p><p class="guide-area-preview">${section.groups.slice(0,3).map(g=>e(g.title)).join(' · ')}</p><a class="guide-group-all" href="${guideSectionUrl(section)}">Explore this area <span aria-hidden="true">→</span></a></section>`).join('')}</div></section><section class="guide-hub-reference" id="reference"><h2>Reference and verification</h2><p>Look up coverage, source requirements and verification results separately from integration instructions.</p><a href="/guide/areas/reference/">Browse reference →</a> <a href="/guide/all">All guides and reports →</a></section>`;}
export function guideArea(section,entries){
 const reports=entries.filter(entry=>entry.route.startsWith('/guide/verification/')&&sectionForGuide(entry.route).id===section.id);
 const groups=section.groups??[{title:'Project reference',description:section.description,guides:section.guides.filter(g=>g.href!=='/guide/all')}];
 const primary=new Set(groups.flatMap(g=>g.guides.map(guide=>guide.href)));
 const extra=entries.filter(entry=>!entry.route.startsWith('/guide/verification/')&&sectionForGuide(entry.route).id===section.id&&!primary.has(entry.route));
 return `<header class="guide-hub-intro guide-area-intro"><p class="eyebrow">Integration area</p><h1>${e(section.title)}</h1><p>${e(section.description)}</p>${siteSections.includes(section)?`<a class="text-link" href="${exampleSectionUrl(section)}">Browse working examples ↗</a>`:''}</header><nav class="guide-index-jumps" aria-label="In this area">${groups.map((g,i)=>`<a href="#area-${i+1}">${e(g.title)}</a>`).join('')}</nav>${groups.map((group,i)=>`<section class="guide-area-group" id="area-${i+1}"><div class="guide-area-heading"><span class="path-step">${String(i+1).padStart(2,'0')}</span><div><h2>${e(group.title)}</h2><p>${e(group.description)}</p></div></div>${links(group.guides)}</section>`).join('')}${extra.length?`<section class="guide-area-group"><h2>Further reading</h2>${links(extra)}</section>`:''}${reports.length?`<details class="verification-index"><summary>Verification reports <span>${reports.length}</span></summary>${links(reports)}</details>`:''}<div class="guide-area-back"><a href="/guide">← All integration areas</a><a href="/guide/all#${section.id}">Complete index for this area →</a></div>`;
}
export function allGuidePages(entries){
 const grouped=section=>entries.filter(entry=>entry.route!=='/guide'&&sectionForGuide(entry.route).id===section.id);
 return `<header class="guide-hub-intro"><p class="eyebrow">Complete reference</p><h1>All guides and reports</h1><p>The full index follows the same task order as the <a href="/guide">guide overview</a>. Verification reports are folded beneath their related area.</p></header><nav class="guide-index-jumps" aria-label="Guide sections">${guideSections.map(s=>`<a href="#${s.id}">${e(s.title)}</a>`).join('')}</nav>${guideSections.map(section=>{
 const rows=grouped(section),reports=rows.filter(entry=>entry.route.startsWith('/guide/verification/')),remaining=new Map(rows.filter(entry=>!entry.route.startsWith('/guide/verification/')).map(entry=>[entry.route,entry]));
 const ordered=section.guides.flatMap(g=>{const entry=remaining.get(g.href);remaining.delete(g.href);return entry?[entry]:[]});
 ordered.push(...[...remaining.values()].sort((a,b)=>a.title.localeCompare(b.title,'en')));
 return `<section class="guide-index-section" id="${section.id}"><h2><a href="${guideSectionUrl(section)}">${e(section.title)}</a></h2>${links(ordered)}${reports.length?`<details class="verification-index"><summary>Verification reports <span>${reports.length}</span></summary>${links(reports)}</details>`:''}</section>`;
 }).join('')}`;
}