<?php
defined('BASEPATH') OR exit('No direct script access allowed');
/** SERVICE DETAIL — Expects: $service, $steps, $others. */
?>
<section class="page-hero">
	<div class="container">
		<div class="page-hero-inner" data-reveal>
			<div class="breadcrumb">
				<a href="<?= base_url() ?>">Home</a> / <a href="<?= base_url('services') ?>">Services</a> / <span><?= html_escape($service['title']) ?></span>
			</div>
			<span class="eyebrow">Service</span>
			<h1><?= html_escape($service['title']) ?></h1>
			<p><?= html_escape($service['summary']) ?></p>
		</div>
	</div>
</section>

<section class="section">
	<div class="container">
		<div class="card-grid cols-2" style="gap:56px;align-items:start;">
			<div data-reveal>
				<span class="eyebrow">Overview</span>
				<h2 style="margin:16px 0;">How we approach it</h2>
				<p style="color:var(--ink-soft);font-size:1.05rem;"><?= nl2br(html_escape($service['description'])) ?></p>

				<?php if ( ! empty($service['for_who'])): ?>
					<div style="margin-top:24px;padding:22px 24px;border-radius:var(--radius);background:var(--cream-deep);">
						<strong style="color:var(--plum);"><?= bloom_icon('users', 18) ?> Who it's for</strong>
						<p style="margin-top:8px;color:var(--ink-soft);"><?= html_escape($service['for_who']) ?></p>
					</div>
				<?php endif; ?>

				<a href="<?= base_url('contact') ?>" class="btn btn-primary btn-lg" style="margin-top:28px;">
					<?= html_escape($service['cta_label'] ?: 'Work With Us') ?> <?= bloom_icon('arrow', 18) ?>
				</a>
			</div>

			<div data-reveal data-delay="2" style="border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;background:var(--grad-deep);">
				<img src="<?= upload_url($service['image'], 'img/service-fallback.jpg') ?>" alt="<?= html_escape($service['title']) ?>" style="width:100%;height:100%;object-fit:cover;">
			</div>
		</div>
	</div>
</section>

<!-- PROCESS -->
<?php if ($steps): ?>
<section class="section section--cream">
	<div class="container">
		<div class="section-head center" data-reveal>
			<span class="eyebrow" style="justify-content:center;">The Process</span>
			<h2>How we bring it to life</h2>
		</div>
		<div class="card-grid cols-4">
			<?php foreach ($steps as $i => $step): ?>
				<div class="service-card" data-reveal data-delay="<?= ($i % 4) + 1 ?>">
					<div class="service-ico" style="font-family:var(--font-display);font-size:1.5rem;font-weight:600;">
						<?= str_pad($i + 1, 2, '0', STR_PAD_LEFT) ?>
					</div>
					<h3 style="font-size:1.15rem;"><?= html_escape($step['title']) ?></h3>
					<p><?= html_escape($step['text']) ?></p>
				</div>
			<?php endforeach; ?>
		</div>
	</div>
</section>
<?php endif; ?>

<!-- OTHER SERVICES -->
<?php if ($others): ?>
<section class="section">
	<div class="container">
		<div class="section-head" data-reveal><span class="eyebrow">Explore More</span><h2 style="margin-top:14px;">Other services</h2></div>
		<div class="card-grid cols-3">
			<?php foreach ($others as $i => $svc): ?>
				<a href="<?= base_url('services/view/'.$svc['slug']) ?>" class="service-card" data-reveal data-delay="<?= $i + 1 ?>">
					<div class="service-ico"><?= bloom_icon($svc['icon'] ?: 'sparkle', 26) ?></div>
					<h3 style="font-size:1.2rem;"><?= html_escape($svc['title']) ?></h3>
					<p><?= html_escape(excerpt($svc['summary'], 14)) ?></p>
				</a>
			<?php endforeach; ?>
		</div>
	</div>
</section>
<?php endif; ?>
