<?php
/**
 * Template Name: Contact
 *
 * @package BeWell
 */
get_header();
?>

<main id="main" class="bw-main">

	<div class="bw-page-hero">
		<div class="bw-container">
			<div class="bw-eyebrow bw-eyebrow--orange" style="margin-bottom:8px;">Get In Touch</div>
			<h1 class="bw-page-hero__title">Contact<span class="bw-italic"> Us</span></h1>
			<p style="font-size:14px; color:#666; margin-top:8px; max-width:480px;">Questions about an order, a product, or our COA data? We respond within one business day.</p>
		</div>
	</div>

	<section class="bw-section">
		<div class="bw-container">
			<div style="display:grid; grid-template-columns:1fr 1.4fr; gap:64px; align-items:start;">

				<?php // ── Contact info ────────────────────────────────────────────── ?>
				<div>
					<h2 style="margin-bottom:28px;">How can we<span class="bw-italic"> help?</span></h2>

					<div style="display:flex; flex-direction:column; gap:24px;">
						<div style="display:flex; gap:16px; align-items:flex-start;">
							<div style="width:40px; height:40px; background:#fff3ec; border:1px solid rgba(232,97,26,.2); border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0;">✉</div>
							<div>
								<div style="font-size:13px; font-weight:600; margin-bottom:4px;">Email Support</div>
								<a href="mailto:support@bewell.com" style="font-size:14px; color:#e8611a;">support@bewell.com</a>
								<div style="font-size:12px; color:#aaa; margin-top:2px;">Mon–Fri, 9am–6pm ET</div>
							</div>
						</div>
						<div style="display:flex; gap:16px; align-items:flex-start;">
							<div style="width:40px; height:40px; background:#fff3ec; border:1px solid rgba(232,97,26,.2); border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0;">📦</div>
							<div>
								<div style="font-size:13px; font-weight:600; margin-bottom:4px;">Order Inquiries</div>
								<p style="font-size:14px; color:#666; line-height:1.65;">Have your order number ready. We resolve shipping and order issues within the same business day.</p>
							</div>
						</div>
						<div style="display:flex; gap:16px; align-items:flex-start;">
							<div style="width:40px; height:40px; background:#fff3ec; border:1px solid rgba(232,97,26,.2); border-radius:3px; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0;">🔬</div>
							<div>
								<div style="font-size:13px; font-weight:600; margin-bottom:4px;">Research Questions</div>
								<p style="font-size:14px; color:#666; line-height:1.65;">Questions about purity, COA data, or compound specifications. For research use questions only.</p>
							</div>
						</div>
					</div>

					<div style="margin-top:40px; padding:20px; background:#f7f5f2; border-radius:3px; border:1px solid #e8e4df;">
						<div style="font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:#aaa; margin-bottom:8px;">Response Times</div>
						<div style="font-size:13px; color:#555; line-height:1.8;">
							<strong>Order issues:</strong> Same business day<br>
							<strong>General inquiries:</strong> Within 1 business day<br>
							<strong>Partner applications:</strong> Within 2 business days
						</div>
					</div>
				</div>

				<?php // ── Contact form ────────────────────────────────────────────── ?>
				<div>
					<?php
					// If Contact Form 7 is installed, use its shortcode
					if ( function_exists( 'wpcf7' ) ) :
						echo do_shortcode( '[contact-form-7 id="contact-form" title="BeWell Contact"]' );
					else :
					?>
					<form class="bw-form" method="post" action="#">
						<?php wp_nonce_field( 'bewell-contact', 'contact_nonce' ); ?>
						<div style="display:grid; grid-template-columns:1fr 1fr; gap:16px;">
							<div class="bw-form-group"><label for="fname">First Name *</label><input type="text" id="fname" name="first_name" required></div>
							<div class="bw-form-group"><label for="lname">Last Name *</label><input type="text" id="lname" name="last_name" required></div>
						</div>
						<div class="bw-form-group"><label for="cemail">Email Address *</label><input type="email" id="cemail" name="email" required></div>
						<div class="bw-form-group">
							<label for="subject">Subject *</label>
							<select id="subject" name="subject" required>
								<option value="">Select a topic…</option>
								<option>Order &amp; Shipping</option>
								<option>Product Information</option>
								<option>Lab Report / COA</option>
								<option>Returns &amp; Refunds</option>
								<option>Partner Program</option>
								<option>Other</option>
							</select>
						</div>
						<div class="bw-form-group"><label for="order_num">Order Number (if applicable)</label><input type="text" id="order_num" name="order_number" placeholder="BW-XXXXXX"></div>
						<div class="bw-form-group"><label for="cmessage">Message *</label><textarea id="cmessage" name="message" rows="5" required></textarea></div>
						<button type="submit" class="bw-btn bw-btn--filled" style="width:100%; justify-content:center;">Send Message →</button>
						<p style="font-size:11px; color:#aaa; text-align:center; margin-top:10px; line-height:1.6;">By submitting you agree to our <a href="<?php echo bewell_page_url('privacy'); ?>" style="color:#aaa; border-bottom:1px solid #aaa;">Privacy Policy</a>.</p>
					</form>
					<?php endif; ?>
				</div>

			</div>
		</div>
	</section>

</main>

<?php get_footer(); ?>