<script>
	let activeTab = $state('hub-system');
</script>

<svelte:head>
	<title>ASF Product Specification | Nabd Solutions</title>
	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
</svelte:head>

<div class="container-wrapper">
	<header>
		<div class="header-container">
			<a href="/" class="logo-link">
				<div class="logo-container">
					<img src="/company_logo.png" alt="Nabd Solutions Logo" class="logo-img" />
					<div class="logo-text">NABD <span>SOLUTIONS</span></div>
				</div>
			</a>
			<div>
				<span class="badge badge-primary"><i class="fa-solid fa-microchip"></i> ASF Technical Product Specification</span>
			</div>
		</div>
	</header>

	<main class="container">
		<h1 class="page-title">Automated Smart Farm (ASF) Product Profiles</h1>
		<p class="page-subtitle">Complete technical specification datasheets for ASF Hub System & Nabd Cloud Platform</p>

		<!-- TOP PRODUCT CAPABILITY MATRIX -->
		<h2 style="margin-bottom: 15px; color: var(--text-main); font-size: 1.3rem;">
			<i class="fa-solid fa-list-check" style="color:var(--accent)"></i> Top Product Capability Matrix
		</h2>
		<div class="matrix-grid">
			<div class="matrix-card">
				<i class="fa-solid fa-plug-circle-xmark"></i>
				<div class="title">Offline Operation</div>
				<div class="status">✓ Supported</div>
			</div>
			<div class="matrix-card">
				<i class="fa-solid fa-cloud"></i>
				<div class="title">Cloud Monitoring</div>
				<div class="status">✓ Supported</div>
			</div>
			<div class="matrix-card">
				<i class="fa-solid fa-mobile-screen"></i>
				<div class="title">Mobile App</div>
				<div class="status">✓ Supported</div>
			</div>
			<div class="matrix-card">
				<i class="fa-solid fa-brain"></i>
				<div class="title">AI / ML Ready</div>
				<div class="status">✓ Supported</div>
			</div>
			<div class="matrix-card">
				<i class="fa-solid fa-arrows-rotate"></i>
				<div class="title">OTA Updates</div>
				<div class="status">✓ Supported</div>
			</div>
			<div class="matrix-card">
				<i class="fa-solid fa-house-signal"></i>
				<div class="title">Multi-Room Support</div>
				<div class="status">✓ Supported</div>
			</div>
			<div class="matrix-card">
				<i class="fa-solid fa-wifi"></i>
				<div class="title">Wireless Sensors</div>
				<div class="status">✓ Supported</div>
			</div>
			<div class="matrix-card">
				<i class="fa-solid fa-shield-halved"></i>
				<div class="title">ASF IP67 Enclosure</div>
				<div class="status">✓ Supported</div>
			</div>
		</div>

		<!-- PRODUCT SHOWCASE & GALLERY -->
		<h2 style="margin: 30px 0 15px 0; color: var(--text-main); font-size: 1.3rem;">
			<i class="fa-solid fa-images" style="color:var(--accent)"></i> Product Showcase & Gallery
		</h2>
		<div class="gallery-grid">
			<div class="gallery-item">
				<img src="/images/control_unit_brick_wall.jpg" alt="FarmGuard Physical Control Unit Mounted" />
				<div class="gallery-caption">FarmGuard Main Hub installed on-site with Lefoo pressure sensor</div>
			</div>
			<div class="gallery-item">
				<img src="/images/printed_units_desk.jpg" alt="FarmGuard Sensor Hub Enclosures" />
				<div class="gallery-caption">Industrial 3D printed casing prototypes under test</div>
			</div>
			<div class="gallery-item">
				<img src="/images/nabd_solutions_rendering_1.jpg" alt="Nabd Control Box SolidWorks CAD" />
				<div class="gallery-caption">3D CAD design rendering of the Nabd Solutions Hub enclosure</div>
			</div>
			<div class="gallery-item">
				<img src="/images/nabd_solutions_rendering_2.jpg" alt="Nabd Control Box Isometric CAD View" />
				<div class="gallery-caption">Isometric CAD rendering highlighting ports and cooling vents</div>
			</div>
			<div class="gallery-item wide-item">
				<img src="/images/dashboard_screenshot.png" alt="FarmGuard SaaS Web Management Portal" />
				<div class="gallery-caption">Redesigned FarmGuard Enterprise SaaS Dashboard showing live telemetry inputs</div>
			</div>
		</div>

		<!-- Navigation Tabs -->
		<div class="tab-nav">
			<button class="tab-btn {activeTab === 'hub-system' ? 'active' : ''}" onclick={() => activeTab = 'hub-system'}>
				<i class="fa-solid fa-server"></i> 1. ASF Hub System (Hardware & Edge)
			</button>
			<button class="tab-btn {activeTab === 'cloud-platform' ? 'active' : ''}" onclick={() => activeTab = 'cloud-platform'}>
				<i class="fa-solid fa-cloud"></i> 2. Nabd Cloud Platform (SaaS Backend)
			</button>
		</div>

		{#if activeTab === 'hub-system'}
			<!-- TAB 1: ASF HUB SYSTEM -->
			<div class="tab-content active">

				<div class="banner-note">
					<i class="fa-solid fa-circle-info"></i> <strong>System Architecture Rule:</strong> One product, two hardware units. The <strong>Main Hub</strong> is the farm controller; <strong>Sensor Hub</strong> stations are companion HW for sensing and calibration only — they do not control actuators directly.
				</div>

				<!-- Architecture Section -->
				<div class="card" style="margin-bottom: 30px;">
					<h2 class="card-title"><i class="fa-solid fa-network-wired"></i> System Deployment Architecture</h2>
					<div class="architecture-img-container">
						<img src="/images/deployment_architecture.svg" alt="System Deployment Architecture Diagram" class="architecture-img" />
					</div>
					<div class="grid">
						<div>
							<h4 style="color:var(--accent-blue); margin-bottom:8px;">Main Hub Controller Operations:</h4>
							<ul>
								<li>Main controller for farm/house: climate, feed, lighting control, local HMI, fail-safes, data logging, optional cloud sync.</li>
								<li>Fuses multi-station telemetry into room <strong>Golden Values</strong> and drives physical actuators.</li>
								<li>Continues full offline execution if WAN cloud link is lost or uncommissioned.</li>
							</ul>
						</div>
						<div>
							<h4 style="color:var(--accent-blue); margin-bottom:8px;">Sensor Hub Stations Deployment:</h4>
							<ul>
								<li>Positioned in rooms: N stations per room based on room size & layout (e.g., front / mid / rear at bird level).</li>
								<li>ESP32-S3 MCU: collects environmental telemetry and supports local calibration workflows.</li>
								<li>Transmits telemetry wirelessly over <strong>Wi-Fi + MQTT/TLS (Port 8883)</strong> via secure encrypted wireless communication.</li>
							</ul>
						</div>
					</div>
				</div>

				<!-- Deployment Limits Summary Card -->
				<div class="card" style="margin-bottom: 30px;">
					<h2 class="card-title"><i class="fa-solid fa-sliders"></i> Product Deployment Limits & Topology</h2>
					<div class="grid">
						<div>
							<h4 style="color:var(--accent-blue); margin-bottom:8px;">Farm Scope (Iteration 1)</h4>
							<ul>
								<li><strong>1 Main Hub</strong> per farm system iteration.</li>
								<li>Supports <strong>multiple poultry rooms</strong> per farm.</li>
							</ul>
						</div>
						<div>
							<h4 style="color:var(--accent-blue); margin-bottom:8px;">Room Scope</h4>
							<ul>
								<li><strong>N Sensor Hubs per room</strong> (sized dynamically to length/layout).</li>
								<li>Sensor Hubs require Main Hub field Wi-Fi & MQTT CA certificate (<code>mqtt-field-ca.crt</code>).</li>
								<li>Sensor Hubs perform <em>no actuator control</em> and require Main Hub provisioning.</li>
							</ul>
						</div>
						<div>
							<h4 style="color:var(--accent-blue); margin-bottom:8px;">Cloud Scope</h4>
							<ul>
								<li>Nabd Cloud platform scales horizontally across <strong>multiple farms & fleets</strong>.</li>
							</ul>
						</div>
					</div>
				</div>

				<!-- Executive Summary Grid -->
				<div class="grid">
					<div class="card">
						<h2 class="card-title"><i class="fa-solid fa-address-card"></i> Executive Summary</h2>
						<div class="kv-group">
							<div class="kv-label">Product Name</div>
							<div class="kv-value">ASF Hub System (Automated Smart Farm)</div>
						</div>
						<div class="kv-group">
							<div class="kv-label">Hardware Unit A — Main Hub</div>
							<div class="kv-value">Seeed Studio reComputer R1125/3-10 (Raspberry Pi CM4 target); field/ops on reComputer R1000 / R1225/3 family</div>
						</div>
						<div class="kv-group">
							<div class="kv-label">Hardware Unit B — Sensor Hub</div>
							<div class="kv-value">ESP32-S3 room sensor station (data collection & calibration only)</div>
						</div>
					</div>

					<div class="card">
						<h2 class="card-title"><i class="fa-solid fa-users"></i> Target Audience & Roles</h2>
						<ul>
							<li>Medium to large-scale commercial poultry operations requiring 24/7 automated climate control.</li>
							<li>Operations seeking data-driven production optimization.</li>
							<li><strong>Defined Roles:</strong> Farm operator (local HMI), farm admin, company admin (cloud + mobile), technician, remote support.</li>
						</ul>
					</div>

					<div class="card">
						<h2 class="card-title"><i class="fa-solid fa-bullseye"></i> Value Proposition</h2>
						<p>An industrial on-farm automation system: a <strong>Main Hub</strong> controller plus wireless <strong>Sensor Hub</strong> stations measuring room climate, supporting calibration, feeding fused “Golden Values” into automated climate, feed, water, and lighting control — with <strong>offline-first</strong> safety and cloud + mobile app access.</p>
					</div>
				</div>

				<!-- Functional Modules -->
				<h2 style="margin: 30px 0 15px 0; color: var(--accent);"><i class="fa-solid fa-cubes"></i> Core Functional Modules</h2>
				<div class="grid">
					<div class="card">
						<h3 class="card-title"><i class="fa-solid fa-fan"></i> Climate & Environment</h3>
						<ul>
							<li>Temp, humidity, CO₂, NH₃, air quality, ventilation management.</li>
							<li>Multi-station Sensor Hub fusion into room Golden Values on Main Hub.</li>
							<li>Control Engine drives actuators from setpoints / schedules.</li>
							<li><strong>Actuators:</strong> fans, heaters, cooling pads, foggers, inlets / curtains / tunnel doors.</li>
							<li>Local RS485 differential-pressure sensors on Main Hub (LFM52, QDF70B).</li>
							<li>Sensor Hub role: <strong>sense + calibrate only</strong>.</li>
						</ul>
					</div>

					<div class="card">
						<h3 class="card-title"><i class="fa-solid fa-utensils"></i> Feeding, Water & Light</h3>
						<ul>
							<li><strong>Feeding/Watering:</strong> Feeder & drinker actuator control; schedules driven by Control Engine; Silo weighing & pulse water meter integration.</li>
							<li><strong>Lighting Programs:</strong> Light / dimmer actuator control on Main Hub; automated dimming schedules by flock age; Lux measurement on Sensor Hub for monitoring/fusion.</li>
						</ul>
					</div>

					<div class="card">
						<h3 class="card-title"><i class="fa-solid fa-crow"></i> Flock Operations & HMI</h3>
						<ul>
							<li>Flock lifecycle tracking: entry, mortality, weight, exit.</li>
							<li>Local HMI dashboard on Main Hub (15+ screens, Chromium kiosk).</li>
							<li>On-demand camera streaming via cloud (not continuous uplink).</li>
						</ul>
					</div>

					<div class="card">
						<h3 class="card-title"><i class="fa-solid fa-mobile-screen-button"></i> Mobile Application Module</h3>
						<ul>
							<li>Dedicated mobile application for remote monitoring & control via Nabd Cloud (not a direct LAN link).</li>
							<li>View live / recent telemetry, active alarms, and farm/room status.</li>
							<li>Remote setpoints, schedules, and manual overrides (queued cloud → Main Hub).</li>
							<li>Push notifications for critical alarms.</li>
						</ul>
					</div>
				</div>

				<!-- ML & AI Section -->
				<div class="card" style="margin-bottom:30px;">
					<h3 class="card-title"><i class="fa-solid fa-brain"></i> Future Features — ML & AI Roadmap</h3>
					<div class="table-container">
						<table>
							<thead>
								<tr>
									<th>Capability</th>
									<th>Intent</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td><strong>ML Data Prediction</strong></td>
									<td>Predict environmental and production trends from historical hub/cloud data (temperature, NH₃, ventilation demand, growth signals) to support proactive setpoints and early warning.</td>
								</tr>
								<tr>
									<td><strong>AI Performance Analysis</strong></td>
									<td>Analyze flock / house performance (efficiency, mortality risk patterns, climate effectiveness, energy use) and surface actionable insights on HMI, web portal, and mobile app.</td>
								</tr>
							</tbody>
						</table>
					</div>
					<div style="margin-top:10px; font-size:0.85rem; color:var(--text-muted);">
						<strong>Scope Note:</strong> Future / roadmap capability — not required for real-time safety control. Local Control Engine remains sole authority for live actuator decisions.
					</div>
				</div>

				<!-- Hardware Specifications -->
				<h2 style="margin: 30px 0 15px 0; color: var(--accent);"><i class="fa-solid fa-microchip"></i> Hardware & Technical Specifications</h2>

				<div class="card" style="margin-bottom: 20px;">
					<h3 class="card-title"><i class="fa-solid fa-scale-balanced"></i> Two Hardware Units Comparison</h3>
					<div class="table-container">
						<table>
							<thead>
								<tr>
									<th>Parameter</th>
									<th>Main Hub (Controller)</th>
									<th>Sensor Hub (Station)</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td><strong>Role</strong></td>
									<td>Edge compute, control, HMI, fusion, alarms, cloud, OTA host</td>
									<td>Environmental data collection & sensor calibration</td>
								</tr>
								<tr>
									<td><strong>Compute MCU/CPU</strong></td>
									<td>ARM64 CM4-class (BCM2711 Quad Cortex-A72 @ 1.5 GHz on R1000); Target R1125/3-10</td>
									<td><strong>ESP32-S3</strong></td>
								</tr>
								<tr>
									<td><strong>Actuator Control</strong></td>
									<td><span class="badge badge-success">Yes</span> (Relays / DIO / PWM drivers)</td>
									<td><span class="badge badge-warning">No</span></td>
								</tr>
								<tr>
									<td><strong>Local UI Display</strong></td>
									<td>10.1 inch Touchscreen (HDMI 2.0 up to 4K kiosk)</td>
									<td>1.25 inch QLED status screen</td>
								</tr>
								<tr>
									<td><strong>Connectivity Link</strong></td>
									<td>Dual Ethernet (field LAN + WAN); Mini-PCIe (LTE / Wi-Fi / LoRa)</td>
									<td>Wi-Fi → Main Hub MQTT/TLS (Port 8883)</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>

				<!-- Inputs & Outputs Breakdown -->
				<div class="grid-2">
					<div class="card">
						<h3 class="card-title"><i class="fa-solid fa-right-to-bracket"></i> Main Hub Inputs & Outputs</h3>
						<ul>
							<li><strong>Sensor Hub Inputs:</strong> N × ESP32-S3 wireless nodes per room (Temp, RH, CO₂, NH₃, PM, VOC, Lux, Wind).</li>
							<li><strong>Modbus Sensors:</strong> RS485 bus supporting LFM52 + QDF70B differential pressure.</li>
							<li><strong>Max Sensor Count:</strong> Up to <strong>5 I2C sensors</strong> and up to <strong>9 Modbus sensors</strong>.</li>
							<li><strong>Relay Module Output:</strong> Eletechsup R4D3B16-R 16-channel Modbus relay module (typical single bus; optional 2nd board on bus B).</li>
							<li><strong>0–10 V Analog Outputs:</strong> Variable-speed fans / dimmers.</li>
							<li><strong>Dry-Contact / DIO Channels:</strong> 4× RS485 (3 on Ch1, 1 on Ch2), 4× RJ connectors for I2C 5V, 1× screw terminal for I2C 5V, 1× screw terminal for I2C 3.3V.</li>
							<li><strong>Actuators Controlled:</strong> Fans, heaters, cooling, fogger, inlets/curtains, feeder, drinker, light/dimmer, buzzer, alarm light.</li>
							<li><strong>Drive Styles:</strong> ON/OFF via relays/contactors; scaled power driver PWM.</li>
						</ul>
					</div>

					<div class="card">
						<h3 class="card-title"><i class="fa-solid fa-rss"></i> Sensor Hub Specs, Placement & Calibration</h3>
						<ul>
							<li><strong>Sensing Capabilities:</strong>
								<ul>
									<li>Temp / RH: SHT4x (and related)</li>
									<li>CO₂: SCD43 (and CO₂-eq via SEN6x)</li>
									<li>Air Quality/PM: SEN6x (PM1 / 2.5 / 4 / 10, VOC/NOx index)</li>
									<li>VOC: SGP40 | NH₃: RS485 / D198 modules</li>
									<li>Light: Lux sensor | Wind: Speed/direction (RD_WSDASA01, WS303U)</li>
								</ul>
							</li>
							<li><strong>Calibration Support:</strong> Workflows supported on-station / via Main Hub provisioning & config.</li>
							<li><strong>Placement Rules:</strong> Bird-level; front / mid / rear; avoid heaters / direct sun; N stations by room size.</li>
							<li><strong>Power Metrics:</strong> 10 W typical power rating; <strong>15 W maximum power consumption</strong> (220V AC input to internal 24VDC + 5VDC dual supply).</li>
							<li><strong>Output:</strong> No farm actuators. Local status indicators via 1.25" QLED screen.</li>
						</ul>
					</div>
				</div>

				<!-- Full Hardware Datasheet Tables -->
				<div class="grid">
					<div class="card">
						<h3 class="card-title"><i class="fa-solid fa-microchip"></i> Main Hub Hardware Specs</h3>
						<div class="table-container">
							<table>
								<thead>
									<tr>
										<th>Item</th>
										<th>Specification Value</th>
										<th>Notes</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>Compute</td>
										<td>ARM64 CM4-class</td>
										<td>Design target R1125/3-10</td>
									</tr>
									<tr>
										<td>RAM / Storage</td>
										<td>8 GB RAM; 32 GB eMMC + NVMe</td>
										<td>R1000 family offers 2/4/8GB RAM & 8/16/32GB eMMC</td>
									</tr>
									<tr>
										<td>Display</td>
										<td>HDMI 2.0 → Local HMI Kiosk</td>
										<td><strong>10.1 inch Touchscreen</strong></td>
									</tr>
									<tr>
										<td>Networking</td>
										<td>Dual Ethernet (field LAN + WAN); Mini-PCIe</td>
										<td>PoE on GbE; Mini-PCIe for LTE / Wi-Fi / LoRa (LTE optional, per request)</td>
									</tr>
									<tr>
										<td>Serial</td>
										<td>3× isolated RS485</td>
										<td>Modbus RTU</td>
									</tr>
									<tr>
										<td>Enclosure Rating</td>
										<td>OEM IP40 (Seeed R1000)</td>
										<td>ASF Branded Enclosure: <strong>IP67</strong></td>
									</tr>
									<tr>
										<td>Operating Temp</td>
										<td>−20 °C to 65 °C design</td>
										<td>R1000 OEM: −30 °C to 70 °C</td>
									</tr>
									<tr>
										<td>Power Consumption</td>
										<td>~2.88–5.52 W</td>
										<td>Full I/O load (R1000 OEM)</td>
									</tr>
									<tr>
										<td>UPS / Backup</td>
										<td>Supercapacitor UPS (LTC3350) option</td>
										<td>Used for safe shutdown upon power outage. Battery backup: <strong>not supported yet</strong></td>
									</tr>
									<tr>
										<td>Dimensions</td>
										<td><strong>40 × 40 cm</strong></td>
										<td>DIN-rail industrial enclosure</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>

					<div class="card">
						<h3 class="card-title"><i class="fa-solid fa-box"></i> Sensor Hub Hardware Specs</h3>
						<div class="table-container">
							<table>
								<thead>
									<tr>
										<th>Item</th>
										<th>Specification Value</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>MCU</td>
										<td>ESP32-S3</td>
									</tr>
									<tr>
										<td>Connectivity</td>
										<td>Wi-Fi → Main Hub MQTT/TLS (port 8883)</td>
									</tr>
									<tr>
										<td>Local Screen</td>
										<td>1.25 inch QLED screen</td>
									</tr>
									<tr>
										<td>Enclosure / IP Rating</td>
										<td><strong>IP67</strong></td>
									</tr>
									<tr>
										<td>Power Consumption</td>
										<td>10 W typical | <strong>15 W maximum</strong></td>
									</tr>
									<tr>
										<td>Power Supply</td>
										<td>220V AC input to internal 24V DC + 5V DC dual supply</td>
									</tr>
									<tr>
										<td>Operating Temp</td>
										<td>−20 °C to 65 °C</td>
									</tr>
									<tr>
										<td>Dimensions</td>
										<td><strong>30 × 40 cm</strong></td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>
				</div>

				<!-- Software Architecture Stack Diagram -->
				<div class="card" style="margin-bottom: 30px;">
					<h3 class="card-title"><i class="fa-solid fa-layer-group"></i> Main Hub Software Architecture Stack</h3>
					<p class="card-subtitle">Edge microservice layout and execution hierarchy on the Main Hub edge controller:</p>

					<div class="stack-container">
						<div class="stack-layer">
							<div class="stack-layer-title">UI & Presentation Layer</div>
							<div class="stack-layer-body">Local HMI Chromium Kiosk (15+ screens) • Web Interface (LAN port 30080) • Cockpit Diagnostic Terminal</div>
						</div>
						<div class="stack-layer">
							<div class="stack-layer-title">Core Execution & Control Services</div>
							<div class="stack-layer-body">
								<strong>Control Engine:</strong> Climate Control (vent/temp/fans), Feed Control, Lighting Schedules<br>
								<strong>Data Fusion Engine:</strong> Sensor Validation, Room "Golden Values" Fused Calculation<br>
								<strong>System Services:</strong> Alarm Manager • OTA Manager (RAUC A/B Dual-Bank) • Cloud Sync Manager (Store & Forward)
							</div>
						</div>
						<div class="stack-layer">
							<div class="stack-layer-title">Communication & Protocol Brokers</div>
							<div class="stack-layer-body">Local MQTT Broker (TLS Port 8883) • RS485 Modbus RTU Drivers • WireGuard Outbound Tunnel</div>
						</div>
						<div class="stack-layer">
							<div class="stack-layer-title">Database & Caching Storage Layer</div>
							<div class="stack-layer-body">InfluxDB (Time-series telemetry) • SQLite (Relational configuration & audit) • Redis (In-memory cache)</div>
						</div>
						<div class="stack-layer">
							<div class="stack-layer-title">Runtime Platform & OS</div>
							<div class="stack-layer-body">Linux ARM64 Systemd • Containerized Microservices • Lightweight Kubernetes (K3s) Orchestration</div>
						</div>
					</div>
				</div>

				<!-- Connectivity, Safety & Installation -->
				<div class="grid">
					<div class="card">
						<h3 class="card-title"><i class="fa-solid fa-code"></i> Software & Data Storage Specs</h3>
						<ul>
							<li><strong>Local Access:</strong> Local HMI on farm LAN (e.g. <code>http://&lt;LAN-IP&gt;:30080/</code>); Cockpit terminal for technicians.</li>
							<li><strong>Data Engines:</strong> Time-series logging (InfluxDB) + relational config/audit (SQLite) + Redis cache on Main Hub.</li>
							<li><strong>Telemetry Retention:</strong> ~<strong>30 days</strong> raw retention on hub; <strong>up to 1 year</strong> if SD-card feature requested.</li>
							<li><strong>Store-and-Forward:</strong> Automatic cloud sync buffer when WAN connection is lost.</li>
							<li><strong>Sensor Hub Data Flow:</strong> Publishes <code>node/&lt;node_id&gt;/...</code>; calibration via Main Hub. No long-term storage on node.</li>
						</ul>
					</div>

					<div class="card">
						<h3 class="card-title"><i class="fa-solid fa-shield-virus"></i> Connectivity, Security & VPN</h3>
						<ul>
							<li><strong>Hub → Cloud Link:</strong> Outbound HTTPS only (Bearer device tokens; polling commands).</li>
							<li><strong>Field Wireless Network:</strong> Sensor Hubs link to Main Hub via MQTT over TLS (port 8883) encrypted wireless communication. Requires field CA certificate (<code>mqtt-field-ca.crt</code>).</li>
							<li><strong>Technician Remote Access:</strong> Outbound WireGuard VPN tunnel (no public inbound diagnostic ports opened).</li>
							<li><strong>WAN Connectivity:</strong> Ethernet standard; LTE optional and per request.</li>
						</ul>
					</div>

					<div class="card">
						<h3 class="card-title"><i class="fa-solid fa-triangle-exclamation"></i> Safety Mechanics & Alarms</h3>
						<ul>
							<li><strong>Offline-First Control:</strong> Local Control Engine maintains full automation independently.</li>
							<li><strong>Fail-Safe States:</strong> Actuators default to safe states (OFF unless commissioned otherwise).</li>
							<li><strong>Stale Fail Timers:</strong> Sensor Hub offline ~30 s; gateway T_fail ~60 s.</li>
							<li><strong>Alarm Dispatch:</strong> Local HMI + buzzer / alarm light; Cloud / Mobile push sync; Power-outage SMS/call alerts.</li>
							<li><strong>Battery/UPS behavior:</strong> Supercapacitor trigger safe shutdown (Battery backup not implemented yet).</li>
						</ul>
					</div>

					<div class="card">
						<h3 class="card-title"><i class="fa-solid fa-screwdriver-wrench"></i> Installation & Compatibility</h3>
						<ul>
							<li><strong>Power Supply:</strong> Main Hub: 9–36 V DC / 110–240 V AC PSU kit. Relay: 12 V DC. Sensor Hub: 220 V AC input to internal 24V/5V DC dual PSU.</li>
							<li><strong>Motor/Fan Drive:</strong> Relay/contactor ON-OFF; PWM power drivers.</li>
							<li><strong>Sensor Protocols:</strong> Modbus RTU over RS485 (Main Hub); MQTT over TLS on field Wi-Fi (Sensor Hub).</li>
							<li><strong>Mounting & Size:</strong> Main Hub: DIN-rail / Wall 40×40 cm enclosure. Sensor Hub: Wall/Ceiling 30×40 cm enclosure. Mounting DIN rail & fixing kit included. Weight: TBM.</li>
						</ul>
					</div>
				</div>

				<!-- Compliance & Warranty -->
				<div class="card">
					<h3 class="card-title"><i class="fa-solid fa-certificate"></i> Compliance, Warranty & Support</h3>
					<div class="grid">
						<div>
							<h4 style="color:var(--accent); margin-bottom:8px;">Certifications & Disclaimers</h4>
							<ul>
								<li>Electrical safety: Sub-components satisfy <strong>RoHS</strong>, but there are <strong>no official product certifications yet</strong>.</li>
								<li>OEM Compute Specs: IP40, ESD EN61000-4-2 Level 3, surge protection <em>(Not an official ASF product certification sheet)</em>.</li>
								<li>Sensor Hub Radio: Wi-Fi WEPA2 certified (<a href="https://www.espressif.com/en/support/documents/certificates" target="_blank" style="color:var(--accent-blue);">Espressif Certificates</a>).</li>
							</ul>
						</div>
						<div>
							<h4 style="color:var(--accent); margin-bottom:8px;">Warranty & Support Services</h4>
							<ul>
								<li><strong>Hardware Warranty:</strong> 2 years on-prem (Main Hub + Sensor Hub System).</li>
								<li><strong>Cloud Subscription:</strong> Lifetime for active term (as long as subscription has not expired).</li>
								<li><strong>Remote OTA:</strong> Main Hub RAUC A/B dual-bank update with rollback; Sensor Hub OTA via Main Hub.</li>
								<li><strong>Support:</strong> Remote diagnostics via WireGuard VPN + diagnostics service.</li>
							</ul>
						</div>
					</div>
				</div>

			</div>
		{/if}

		{#if activeTab === 'cloud-platform'}
			<!-- TAB 2: CLOUD PLATFORM -->
			<div class="tab-content active">

				<div class="banner-note">
					<i class="fa-solid fa-cloud"></i> <strong>SaaS Solution Overview:</strong> Nabd Cloud / ASF Cloud Server is a private cloud software platform. It provides fleet management, mobile connectivity, remote control queuing, and analytics without replacing on-farm edge autonomy.
				</div>

				<div class="grid">
					<div class="card">
						<h2 class="card-title"><i class="fa-solid fa-globe"></i> Cloud Platform Identities</h2>
						<div class="kv-group">
							<div class="kv-label">Product Name</div>
							<div class="kv-value">ASF Cloud Platform / Company Cloud / <strong>Nabd Cloud</strong></div>
						</div>
						<div class="kv-group">
							<div class="kv-label">Customer Web Portal</div>
							<div class="kv-value"><code>https://myfarm.nabd-co.com</code></div>
						</div>
						<div class="kv-group">
							<div class="kv-label">API Endpoint</div>
							<div class="kv-value"><code>https://asfapi.nabd-co.com</code></div>
						</div>
						<div class="kv-group">
							<div class="kv-label">Hosting Model / SKU</div>
							<div class="kv-value">Private Cloud / SaaS</div>
						</div>
					</div>

					<div class="card">
						<h2 class="card-title"><i class="fa-solid fa-users-gear"></i> Target Users & Autonomy</h2>
						<ul>
							<li><strong>Farm Users:</strong> Web + mobile app for remote monitoring & control.</li>
							<li><strong>Company Admins:</strong> Fleet ops, support, OTA updates, diagnostics.</li>
							<li><strong>Autonomy Guarantee:</strong> Cloud failure does <em>not</em> affect farm operation—Main Hub + Sensor Hubs continue running offline.</li>
						</ul>
					</div>
				</div>

				<!-- Cloud Value Proposition -->
				<div class="card" style="margin-bottom:30px;">
					<h3 class="card-title"><i class="fa-solid fa-shield-heart"></i> Cloud Core Value Proposition</h3>
					<p>A centralized, secure backend and <strong>mobile app</strong> for multi-farm fleet management: remote monitoring and control, OTA, diagnostics, historical analytics, notifications, and future <strong>ML prediction</strong> / <strong>AI performance analysis</strong> — while the Main Hub remains the authority for local climate and safety control when the cloud is unreachable.</p>
				</div>

				<!-- Platform Modules Table -->
				<div class="card" style="margin-bottom:30px;">
					<h2 class="card-title"><i class="fa-solid fa-layer-group"></i> Cloud Platform Modules</h2>
					<div class="table-container">
						<table>
							<thead>
								<tr>
									<th>Module</th>
									<th>Functional Description</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td><strong>Customer Web Portal</strong></td>
									<td>Farm / room dashboards, live telemetry charts, alarm views, schedule configs.</td>
								</tr>
								<tr>
									<td><strong>Mobile Application</strong></td>
									<td>Remote monitor & control for farm/company users (Android & iOS). View live telemetry, alarms, issue setpoints, manual overrides via command queue. Push notifications.</td>
								</tr>
								<tr>
									<td><strong>Company Admin Portal</strong></td>
									<td>Fleet management, support ticket diagnostics, RAUC / Sensor Hub OTA administration.</td>
								</tr>
								<tr>
									<td><strong>Events Ingest & Command Queue</strong></td>
									<td>Hub → cloud HTTPS ingest; cloud → hub command queue (setpoints, schedules, overrides).</td>
								</tr>
								<tr>
									<td><strong>OTA Management</strong></td>
									<td>Orchestration of Sensor Hub firmware updates & Main Hub RAUC packages.</td>
								</tr>
								<tr>
									<td><strong>Diagnostics Engine</strong></td>
									<td>System health summaries, log bundles, WireGuard remote access authorization.</td>
								</tr>
								<tr>
									<td><strong>Notifications Engine</strong></td>
									<td>Critical mobile push notifications, web alerts, email & SMS integrations.</td>
								</tr>
								<tr>
									<td><strong>Analytics & AI/ML</strong></td>
									<td>Multi-farm historical data storage. <strong>Offline farms are marked as stale when synchronization stops.</strong> Roadmap ML data prediction & AI performance insights.</td>
								</tr>
								<tr>
									<td><strong>Monetization Roadmap</strong></td>
									<td>Future: Lightweight ads / sponsored content once user base reaches scale.</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>

				<!-- Cloud Technical & Security Specs -->
				<div class="grid">
					<div class="card">
						<h3 class="card-title"><i class="fa-solid fa-right-left"></i> Ingest & Output Capabilities</h3>
						<ul>
							<li><strong>Ingest Stream (Hub → Cloud):</strong> Heartbeat, room golden values, telemetry batches, alarm events, active actuator states, config, schedules, flock data, OTA status, deploy logs, audit trails, diagnostics.</li>
							<li><strong>Output Stream (Cloud → Hub / User):</strong> Queued commands (setpoints, schedules, manual control), OTA triggers, diagnostic requests, mobile push notifications.</li>
						</ul>
					</div>

					<div class="card">
						<h3 class="card-title"><i class="fa-solid fa-lock"></i> Protocol, Security & Access</h3>
						<ul>
							<li><strong>Protocol MVP:</strong> Outbound HTTPS/REST only from Main Hub (Bearer device tokens; polling commands). No inbound direct WAN ports.</li>
							<li><strong>User & Device Auth:</strong> Device identity for hubs. JWT / Session user tokens, Role-Based Access Control (RBAC).</li>
							<li><strong>Security Controls:</strong> TLS, audit logging, password hashing, rate limiting.</li>
							<li><strong>Farm Requirements:</strong> WAN Ethernet (or LTE), valid TLS, NTP time sync. Provisioned config (<code>api_url</code>, <code>api_key</code>, <code>hub_id</code>, <code>farm_id</code>, <code>enabled</code>).</li>
							<li><strong>Mobile / Browser Support:</strong> Android and iOS native mobile support; modern web browsers.</li>
						</ul>
					</div>
				</div>

				<div class="grid">
					<div class="card">
						<h3 class="card-title"><i class="fa-solid fa-server"></i> Cloud Hosting Specs</h3>
						<div class="table-container">
							<table>
								<thead>
									<tr>
										<th>Item</th>
										<th>Value / Design</th>
									</tr>
								</thead>
								<tbody>
									<tr>
										<td>Deployment Model</td>
										<td>Company-managed private cloud backend</td>
									</tr>
									<tr>
										<td>Regions / HA</td>
										<td>Design requires future horizontal scale & HA</td>
									</tr>
									<tr>
										<td>Hardware / Screen / IP</td>
										<td>N/A (SaaS Platform)</td>
									</tr>
									<tr>
										<td>On-Prem Appliance Option</td>
										<td>N/A</td>
									</tr>
								</tbody>
							</table>
						</div>
					</div>

					<div class="card">
						<h3 class="card-title"><i class="fa-solid fa-file-contract"></i> Cloud Service, Compliance & SLA</h3>
						<ul>
							<li><strong>SLA / Uptime Target:</strong> 24/7 continuous availability.</li>
							<li><strong>Subscription Warranty:</strong> Lifetime for active term (as long as subscription has not expired).</li>
							<li><strong>Support Tiers:</strong> Remote digital support and on-site field support.</li>
							<li><strong>Compliance Standard:</strong> Built to comply with ISO and RoHS guidelines; <strong>no official certification sheets issued yet</strong>.</li>
							<li><strong>Firmware Orchestration:</strong> Yes — OTA for Main Hub + Sensor Hub via Cloud Platform.</li>
						</ul>
					</div>
				</div>

			</div>
		{/if}
	</main>

	<footer>
		<p>&copy; 2026 Nabd Solutions / Automated Smart Farm (ASF). All rights reserved.</p>
	</footer>
</div>

<style>
	:root {
		--bg-main: #0B1220; /* Deep slate background */
		--bg-card: #182235;
		--bg-card-hover: #22304A;
		--accent: #F59E0B;
		--accent-blue: #38BDF8;
		--text-main: #F8FAFC;
		--text-muted: #94A3B8;
		--border: rgba(255, 255, 255, 0.06);
		--success: #22C55E;
		--danger: #EF4444;
	}

	.container-wrapper {
		background-color: var(--bg-main);
		color: var(--text-main);
		min-height: 100vh;
		font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
		line-height: 1.6;
		padding-bottom: 60px;
	}

	header {
		background-color: var(--bg-card);
		border-bottom: 1px solid var(--border);
		position: sticky;
		top: 0;
		z-index: 1000;
		padding: 1rem 2rem;
	}

	.header-container {
		max-width: 1400px;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		gap: 15px;
	}

	.logo-link {
		text-decoration: none;
		color: inherit;
	}

	.logo-container {
		display: flex;
		align-items: center;
		gap: 15px;
	}

	.logo-img {
		height: 44px;
		width: auto;
		object-fit: contain;
	}

	.logo-text {
		font-family: 'Outfit', sans-serif;
		font-size: 1.5rem;
		font-weight: 700;
		letter-spacing: 1px;
		color: var(--text-main);
	}

	.logo-text span {
		color: var(--accent);
	}

	.container {
		max-width: 1400px;
		margin: 30px auto;
		padding: 0 20px;
	}

	.page-title {
		font-family: 'Outfit', sans-serif;
		font-size: 2.2rem;
		margin-bottom: 10px;
		color: var(--text-main);
	}

	.page-subtitle {
		color: var(--text-muted);
		font-size: 1.1rem;
		margin-bottom: 30px;
	}

	.tab-nav {
		display: flex;
		gap: 10px;
		border-bottom: 2px solid var(--border);
		margin-bottom: 30px;
		overflow-x: auto;
	}

	.tab-btn {
		background: transparent;
		border: none;
		color: var(--text-muted);
		padding: 12px 24px;
		font-size: 1.1rem;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.3s ease;
		border-bottom: 3px solid transparent;
		display: flex;
		align-items: center;
		gap: 10px;
		white-space: nowrap;
	}

	.tab-btn:hover {
		color: var(--accent-blue);
	}

	.tab-btn.active {
		color: var(--accent);
		border-bottom-color: var(--accent);
	}

	.tab-content {
		display: none;
	}

	.tab-content.active {
		display: block;
	}

	.grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
		gap: 20px;
		margin-bottom: 30px;
	}

	.grid-2 {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
		gap: 20px;
		margin-bottom: 30px;
	}

	.card {
		background-color: var(--bg-card);
		border: 1px solid var(--border);
		border-radius: 12px;
		padding: 24px;
		transition: transform 0.2s ease, border-color 0.2s ease;
	}

	.card:hover {
		border-color: rgba(255, 255, 255, 0.15);
	}

	.card-title {
		font-family: 'Outfit', sans-serif;
		font-size: 1.25rem;
		color: var(--accent-blue);
		margin-bottom: 15px;
		display: flex;
		align-items: center;
		gap: 10px;
		border-bottom: 1px solid var(--border);
		padding-bottom: 10px;
	}

	.architecture-img-container {
		background-color: #0B1120;
		border: 1px solid var(--border);
		border-radius: 12px;
		padding: 24px;
		margin-bottom: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.architecture-img {
		max-width: 100%;
		height: auto;
		display: block;
	}

	.table-container {
		overflow-x: auto;
		margin-top: 15px;
		border-radius: 8px;
		border: 1px solid var(--border);
	}

	table {
		width: 100%;
		border-collapse: collapse;
		text-align: left;
		font-size: 0.95rem;
	}

	th,
	td {
		padding: 12px 16px;
		border-bottom: 1px solid var(--border);
	}

	th {
		background-color: #0F172A;
		color: var(--accent);
		font-weight: 600;
	}

	tr:last-child td {
		border-bottom: none;
	}

	tr:hover {
		background-color: rgba(255, 255, 255, 0.02);
	}

	ul {
		list-style-type: none;
	}

	ul li {
		position: relative;
		padding-left: 20px;
		margin-bottom: 10px;
		color: var(--text-main);
	}

	ul li::before {
		content: "•";
		color: var(--accent);
		font-weight: bold;
		font-size: 1.2rem;
		position: absolute;
		left: 0;
		top: -2px;
	}

	.badge {
		display: inline-block;
		padding: 4px 10px;
		border-radius: 20px;
		font-size: 0.75rem;
		font-weight: bold;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}

	.badge-primary {
		background: rgba(56, 189, 248, 0.2);
		color: var(--accent-blue);
		border: 1px solid var(--accent-blue);
	}

	.badge-warning {
		background: rgba(245, 158, 11, 0.2);
		color: var(--accent);
		border: 1px solid var(--accent);
	}

	.badge-success {
		background: rgba(34, 197, 94, 0.2);
		color: var(--success);
		border: 1px solid var(--success);
	}

	.matrix-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
		gap: 15px;
		margin-bottom: 30px;
	}

	.matrix-card {
		background: var(--bg-card);
		border: 1px solid var(--border);
		border-radius: 8px;
		padding: 15px;
		text-align: center;
	}

	.matrix-card i {
		font-size: 1.8rem;
		color: var(--accent);
		margin-bottom: 10px;
	}

	.matrix-card .title {
		font-size: 0.85rem;
		color: var(--text-muted);
		text-transform: uppercase;
	}

	.matrix-card .status {
		font-size: 1.1rem;
		font-weight: bold;
		color: var(--success);
		margin-top: 5px;
	}

	.kv-group {
		margin-bottom: 12px;
	}

	.kv-label {
		font-weight: 600;
		color: var(--text-muted);
		font-size: 0.85rem;
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}

	.kv-value {
		color: var(--text-main);
		font-size: 1rem;
	}

	.banner-note {
		background-color: rgba(245, 158, 11, 0.1);
		border-left: 4px solid var(--accent);
		padding: 15px;
		border-radius: 4px;
		margin-bottom: 25px;
		font-size: 0.95rem;
	}

	/* Software Architecture Visual Block */
	.stack-container {
		display: flex;
		flex-direction: column;
		gap: 8px;
		margin-top: 15px;
	}

	.stack-layer {
		background: #0B1120;
		border: 1px solid var(--border);
		border-left: 4px solid var(--accent-blue);
		border-radius: 6px;
		padding: 10px 15px;
	}

	.stack-layer-title {
		font-size: 0.85rem;
		font-weight: bold;
		color: var(--accent);
		text-transform: uppercase;
		letter-spacing: 0.5px;
	}

	.stack-layer-body {
		font-size: 0.95rem;
		color: var(--text-main);
	}

	/* Product Gallery */
	.gallery-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
		gap: 20px;
		margin-bottom: 30px;
	}

	.gallery-item {
		background-color: var(--bg-card);
		border: 1px solid var(--border);
		border-radius: 12px;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		transition: transform 0.2s ease, border-color 0.2s ease;
	}

	.gallery-item:hover {
		border-color: rgba(255, 255, 255, 0.15);
		transform: translateY(-2px);
	}

	.gallery-item img {
		width: 100%;
		height: 200px;
		object-fit: cover;
		border-bottom: 1px solid var(--border);
	}

	.gallery-item.wide-item {
		grid-column: span 2;
	}

	@media (max-width: 768px) {
		.gallery-item.wide-item {
			grid-column: span 1;
		}
	}

	.gallery-caption {
		padding: 12px 16px;
		font-size: 0.85rem;
		color: var(--text-muted);
		text-align: center;
		font-weight: 500;
	}

	footer {
		max-width: 1400px;
		margin: 40px auto 0;
		padding: 20px;
		border-top: 1px solid var(--border);
		text-align: center;
		color: var(--text-muted);
		font-size: 0.9rem;
	}
</style>
