<?php
defined('BASEPATH') OR exit('No direct script access allowed');
/** CONTACT PAGE — Expects: $services. */
?>
<section class="page-hero">
	<div class="container">
		<div class="page-hero-inner" data-reveal>
			<div class="breadcrumb"><a href="<?= base_url() ?>">Home</a> / <span>Contact</span></div>
			<span class="eyebrow">Get In Touch</span>
			<h1>Let's create something <span class="serif-italic text-iris">unforgettable</span></h1>
			<p>Have a project in mind? A question? We'd love to hear from you.</p>
		</div>
	</div>
</section>

<section class="section">
	<div class="container">
		<div class="card-grid cols-2" style="gap:48px;align-items:start;">
			<!-- INFO -->
			<div data-reveal>
				<span class="eyebrow">Reach Us</span>
				<h2 style="margin:14px 0 24px;">We're here to help</h2>

				<div style="display:flex;flex-direction:column;gap:18px;">
					<div style="display:flex;gap:16px;align-items:flex-start;">
						<div class="service-ico" style="margin:0;width:48px;height:48px;flex-shrink:0;"><?= bloom_icon('mail', 22) ?></div>
						<div><strong>Email</strong><br><a href="mailto:<?= setting('email') ?>" style="color:var(--ink-soft);"><?= html_escape(setting('email')) ?></a></div>
					</div>
					<div style="display:flex;gap:16px;align-items:flex-start;">
						<div class="service-ico" style="margin:0;width:48px;height:48px;flex-shrink:0;"><?= bloom_icon('phone', 22) ?></div>
						<div><strong>Phone</strong><br><a href="tel:<?= setting('phone') ?>" style="color:var(--ink-soft);"><?= html_escape(setting('phone')) ?></a></div>
					</div>
					<div style="display:flex;gap:16px;align-items:flex-start;">
						<div class="service-ico" style="margin:0;width:48px;height:48px;flex-shrink:0;"><?= bloom_icon('pin', 22) ?></div>
						<div><strong>Office</strong><br><span style="color:var(--ink-soft);"><?= nl2br(html_escape(setting('address'))) ?></span></div>
					</div>
					<div style="display:flex;gap:16px;align-items:flex-start;">
						<div class="service-ico" style="margin:0;width:48px;height:48px;flex-shrink:0;background:#25D366;color:#fff;"><?= bloom_icon('whatsapp', 22) ?></div>
						<div><strong>WhatsApp</strong><br><a href="<?= whatsapp_link() ?>" target="_blank" style="color:var(--ink-soft);">Chat with us instantly</a></div>
					</div>
				</div>

				<div style="margin-top:28px;padding:24px;border-radius:var(--radius);background:var(--grad-deep);color:#fff;">
					<strong>Are you talent?</strong>
					<p style="color:rgba(255,255,255,.8);margin:8px 0 14px;font-size:.94rem;">Looking to join our roster? Submit a talent application instead.</p>
					<a href="<?= base_url('apply/talent') ?>" class="btn btn-light">Apply as Talent</a>
				</div>
			</div>

			<!-- FORM -->
			<div data-reveal data-delay="2">
				<div class="form-card">
					<?= flash() ?>
					<h3 style="margin-bottom:6px;">Send us a message</h3>
					<p style="color:var(--ink-soft);margin-bottom:22px;">We typically respond within one business day.</p>
					<form action="<?= base_url('contact/submit') ?>" method="post">
						<?= form_hidden($this->security->get_csrf_token_name(), $this->security->get_csrf_hash()) ?>
						<!-- honeypot -->
						<div style="position:absolute;left:-9999px;" aria-hidden="true">
							<input type="text" name="website" tabindex="-1" autocomplete="off">
						</div>
						<div class="field-row">
							<div class="field"><label>Full Name <span class="req">*</span></label><input type="text" name="name" value="<?= set_value('name') ?>" required></div>
							<div class="field"><label>Email <span class="req">*</span></label><input type="email" name="email" value="<?= set_value('email') ?>" required></div>
						</div>
						<div class="field-row">
							<div class="field"><label>Phone</label><input type="text" name="phone" value="<?= set_value('phone') ?>"></div>
							<div class="field"><label>Subject</label><input type="text" name="subject" value="<?= set_value('subject') ?>"></div>
						</div>
						<div class="field"><label>Message <span class="req">*</span></label><textarea name="message" required><?= set_value('message') ?></textarea></div>
						<button type="submit" class="btn btn-primary btn-block btn-lg"><?= bloom_icon('mail', 18) ?> Send Message</button>
					</form>
				</div>
			</div>
		</div>
	</div>
</section>

<!-- MAP -->
<?php if ($map = setting('map_embed')): ?>
<section class="section section--tight" style="padding-top:0;">
	<div class="container">
		<div data-reveal style="border-radius:var(--radius-lg);overflow:hidden;height:420px;">
			<iframe src="<?= html_escape($map) ?>" width="100%" height="100%" style="border:0;" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
		</div>
	</div>
</section>
<?php endif; ?>
