package templates

import "gitea.lab.audasmedia.com.au/sam/ai-resume/internal/brand"

// AreaIcon is the mark for one area of the site. The six marks are drawn here,
// geometrically, in one visual language: 24x24, 1.6 px stroke, round caps, no
// fill, colour inherited from the text. They are decoration only — the label
// beside them carries the meaning — so every one is aria-hidden.
//
// "evidence" is the seventh mark: the index, not an area.
templ AreaIcon(area string) {
	<svg class="area-icon" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
		switch area {
			case "ai":
				<circle cx="5.5" cy="6.5" r="2.5"/>
				<circle cx="18.5" cy="6.5" r="2.5"/>
				<circle cx="12" cy="17.5" r="2.5"/>
				<path d="M8 6.5h8"/>
				<path d="M6.7 8.8 10.8 15.6"/>
				<path d="M17.3 8.8 13.2 15.6"/>
			case "platform":
				<rect x="3.5" y="3.5" width="17" height="4.6" rx="1.5"/>
				<rect x="3.5" y="9.7" width="17" height="4.6" rx="1.5"/>
				<rect x="3.5" y="15.9" width="17" height="4.6" rx="1.5"/>
				<path d="M7 5.8h2M7 12h2M7 18.2h2"/>
			case "edge":
				<rect x="2.5" y="13" width="9" height="8" rx="1.5"/>
				<circle cx="7" cy="17" r="1.6"/>
				<path d="M15 11.5a3.5 3.5 0 0 1-3.5 3.5"/>
				<path d="M18 11.5a6.5 6.5 0 0 1-6.5 6.5"/>
			case "products":
				<path d="M12 3.2 19 7.3v9.4L12 20.8 5 16.7V7.3z"/>
				<path d="M5 7.3l7 4.1 7-4.1"/>
				<path d="M12 11.4v9.4"/>
			case "history":
				<circle cx="12" cy="12" r="8.5"/>
				<path d="M12 7v5.2l3.4 2.1"/>
			case "about":
				<circle cx="12" cy="8.4" r="3.6"/>
				<path d="M5.4 20a6.6 6.6 0 0 1 13.2 0"/>
			case "evidence":
				<path d="M6.8 3.4h7.2l4 4v13.2H6.8z"/>
				<path d="M14 3.4v4h4"/>
				<path d="M9.6 14.2l2 2 3.6-4.1"/>
		}
	</svg>
}

// TechChips is the technology list on a page. A chip carries a published mark
// when one exists and plain text when it does not, so a missing icon reads as a
// design decision rather than a broken image.
templ TechChips(items []string) {
	<ul class="tech" aria-label="Technology">
		for _, t := range items {
			<li class="tech-chip">
				if paths, ok := brand.Mark(t); ok {
					<svg class="tech-mark" viewBox="0 0 24 24" width="16" height="16" aria-hidden="true" focusable="false">
						for _, d := range paths {
							<path d={ d } fill="currentColor"/>
						}
					</svg>
				}
				<span>{ t }</span>
			</li>
		}
	</ul>
}