<?php
defined('BASEPATH') OR exit('No direct script access allowed');
/** ABOUT PAGE — Expects: $page, $blocks, $founders, $staff, $partners. */
$b = $blocks;
$values = isset($b['values']) ? $b['values'] : array();
?>

<!-- PAGE HERO -->
<section class="page-hero">
	<div class="container">
		<div class="page-hero-inner" data-reveal>
			<div class="breadcrumb"><a href="<?= base_url() ?>">Home</a> / <span>About</span></div>
			<span class="eyebrow">Our Story</span>
			<h1>A creative universe, <span class="serif-italic text-iris">built to bloom</span></h1>
			<p>The vision, the philosophy and the people behind Bloom Iris Agency.</p>
		</div>
	</div>
</section>

<!-- ORIGIN -->
<section class="section">
	<div class="container">
		<div class="card-grid cols-2" style="gap:60px;align-items:center;">
			<div data-reveal>
				<span class="eyebrow">How It Began</span>
				<h2 style="margin:18px 0;">From a small collective to a full creative agency</h2>
				<p style="color:var(--ink-soft);font-size:1.06rem;">
					<?= html_escape($b['origin'] ?? 'Bloom Iris Agency was founded to give creative talent a true home and to give brands a creative partner that thinks differently.') ?>
				</p>
			</div>
			<div data-reveal data-delay="2" style="border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:5/4;background:var(--grad-deep);">
				<img src="<?= base_url('assets/img/about-origin.jpg') ?>" alt="The Bloom Iris team" style="width:100%;height:100%;object-fit:cover;" onerror="this.style.display='none'">
			</div>
		</div>
	</div>
</section>

<!-- VISION / MISSION -->
<section class="section section--plum section--tight">
	<div class="container">
		<div class="card-grid cols-2" style="gap:36px;">
			<div data-reveal>
				<span class="eyebrow">Our Vision</span>
				<h3 style="margin:14px 0;color:#fff;">The creative gateway for talent &amp; brands</h3>
				<p style="color:rgba(255,255,255,.8);"><?= html_escape($b['vision'] ?? '') ?></p>
			</div>
			<div data-reveal data-delay="2">
				<span class="eyebrow">Our Mission</span>
				<h3 style="margin:14px 0;color:#fff;">Work that moves brands &amp; elevates creatives</h3>
				<p style="color:rgba(255,255,255,.8);"><?= html_escape($b['mission'] ?? '') ?></p>
			</div>
		</div>
	</div>
</section>

<!-- PHILOSOPHY + VALUES -->
<section class="section">
	<div class="container">
		<div class="section-head center" data-reveal>
			<span class="eyebrow" style="justify-content:center;">What Drives Us</span>
			<h2>Our creative philosophy</h2>
			<p><?= html_escape($b['philosophy'] ?? '') ?></p>
		</div>
		<?php if ($values): ?>
		<div class="card-grid cols-4">
			<?php foreach ($values as $i => $v): ?>
				<div class="service-card" data-reveal data-delay="<?= ($i % 4) + 1 ?>">
					<div class="service-ico"><?= bloom_icon('sparkle', 26) ?></div>
					<h3 style="font-size:1.1rem;"><?= html_escape($v) ?></h3>
				</div>
			<?php endforeach; ?>
		</div>
		<?php endif; ?>
	</div>
</section>

<!-- WHAT MAKES US DIFFERENT -->
<section class="section section--cream section--tight">
	<div class="container">
		<div class="cta-band" style="background:var(--white);color:var(--ink);" data-reveal>
			<span class="eyebrow" style="justify-content:center;">The Difference</span>
			<h2 style="color:var(--ink);">Not a brochure agency — a creative partner</h2>
			<p style="color:var(--ink-soft);"><?= html_escape($b['difference'] ?? '') ?></p>
		</div>
	</div>
</section>

<!-- TEAM -->
<?php if ($founders || $staff): ?>
<section class="section">
	<div class="container">
		<div class="section-head center" data-reveal>
			<span class="eyebrow" style="justify-content:center;">The People</span>
			<h2>The creative minds behind Bloom Iris</h2>
		</div>

		<?php $team = array_merge($founders, $staff); ?>
		<div class="card-grid cols-4">
			<?php foreach ($team as $i => $member): ?>
				<div class="talent-card" data-reveal data-delay="<?= ($i % 4) + 1 ?>">
					<div class="talent-media">
						<img src="<?= upload_url($member['photo'], 'img/team-fallback.jpg') ?>" alt="<?= html_escape($member['name']) ?>" loading="lazy">
					</div>
					<div class="talent-overlay">
						<?php if ($member['is_founder']): ?><span class="talent-cat">Founder</span><?php endif; ?>
						<h3><?= html_escape($member['name']) ?></h3>
						<p><?= html_escape($member['role']) ?></p>
					</div>
				</div>
			<?php endforeach; ?>
		</div>
	</div>
</section>
<?php endif; ?>
