package templates

import "technical.kiwi/website/internal/gallery"

templ Home(images []gallery.Image, hero gallery.Image, hasHero bool, contactEnabled bool) {
	@Layout("Technical Kiwi Limited", heroPreload(hero, hasHero), homeContent(images, hero, hasHero, contactEnabled))
}

func heroPreload(hero gallery.Image, hasHero bool) string {
	if !hasHero {
		return ""
	}
	return hero.HeroURL
}

templ homeContent(images []gallery.Image, hero gallery.Image, hasHero bool, contactEnabled bool) {
	<section class="hero">
		<div class="hero-copy">
			<p class="eyebrow">Technical Kiwi Limited</p>
			<h1>Electronic engineering and interactive art</h1>
			<p class="lead">
				We design and build lighting installations, embedded systems, and interactive
				experiences — from workshop bench to stage.
			</p>
			<div class="hero-actions">
				<a href="#gallery" class="btn btn-primary">View our work</a>
				<a href="#contact" class="btn btn-ghost">Get in touch</a>
			</div>
		</div>
		if hasHero && hero.HeroURL != "" {
			<figure class="hero-visual">
				<img
					src={ hero.HeroURL }
					alt="Technical Kiwi — Connection machine"
					loading="eager"
					decoding="sync"
					fetchpriority="high"
				/>
			</figure>
		}
	</section>
	<section id="services" class="services">
		<h2>What we do</h2>
		<div class="service-grid">
			<article class="service-card">
				<h3>Electronic engineering</h3>
				<p>Custom LED systems, control electronics, PCB design, and fabrication for installations and products.</p>
			</article>
			<article class="service-card">
				<h3>Interactive art</h3>
				<p>Lighting, sound-reactive visuals, and experiential tech for events, venues, and public spaces.</p>
			</article>
		</div>
	</section>
	<section id="gallery" class="gallery-section">
		<div class="section-head">
			<h2>Gallery</h2>
			<p>Installations, prototypes, and behind-the-scenes work.</p>
		</div>
		<div id="gallery-grid" class="gallery-grid">
			@GalleryGrid(images)
		</div>
	</section>
	@ContactForm(contactEnabled)
}