<?php
$pageTitle = 'Contact';
$currentPage = 'contact';
require_once __DIR__ . '/backend/includes/site_settings.php';
$siteSettings = getSiteSettings();
$contactLocation = $siteSettings['contact_location'] ?? 'Lagos, Nigeria';
require_once __DIR__ . '/backend/includes/head.php';
require_once __DIR__ . '/backend/includes/navbar.php';

$formSuccess = false;
$formError   = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['send_message'])) {
    $name    = trim($_POST['name'] ?? '');
    $email   = trim($_POST['email'] ?? '');
    $phone   = trim($_POST['phone'] ?? '');
    $subject = trim($_POST['subject'] ?? '');
    $message = trim($_POST['message'] ?? '');

    if (!$name || !$email || !$message) {
        $formError = 'Please fill in all required fields.';
    } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
        $formError = 'Please enter a valid email address.';
    } else {
  require_once __DIR__ . '/backend/config/database.php';
  $db = getDB();
        $id = 'msg_' . bin2hex(random_bytes(8));
        $stmt = $db->prepare("INSERT INTO messages(id,name,email,phone,subject,message,created_at) VALUES(?,?,?,?,?,?,NOW())");
        try {
            $stmt->execute([$id, $name, $email, $phone, $subject, $message]);
            $formSuccess = true;
        } catch (Exception $e) {
            $formError = 'Failed to send message. Please try again.';
        }
    }
}
?>

<!-- Hero -->
<section style="background:linear-gradient(145deg,#0f172a 0%,#1e293b 60%,#0f172a 100%);padding:5rem 0 4rem;position:relative;overflow:hidden">
  <div style="position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.02) 1px,transparent 1px);background-size:28px 28px;pointer-events:none"></div>
  <div style="max-width:860px;margin:0 auto;padding:0 1.5rem;text-align:center;position:relative">
    <div style="display:inline-flex;align-items:center;gap:.5rem;background:rgba(249,115,22,.15);border:1px solid rgba(249,115,22,.3);border-radius:50px;padding:.4rem 1.1rem;margin-bottom:1.75rem">
      <svg width="14" height="14" fill="none" stroke="#f97316" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07A19.5 19.5 0 013.07 9.81a19.79 19.79 0 01-3.07-8.68A2 2 0 012 .18h3a2 2 0 012 1.72c.127.96.361 1.903.7 2.81a2 2 0 01-.45 2.11L6.09 7.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0122 16.92z"/></svg>
      <span style="color:#f97316;font-size:.78rem;font-weight:700;letter-spacing:.08em">CONTACT US</span>
    </div>
    <h1 style="color:#fff;font-weight:900;font-size:clamp(2rem,5vw,3rem);line-height:1.1;margin-bottom:1.25rem">
      Get in <span style="background:linear-gradient(90deg,#f97316,#fbbf24);-webkit-background-clip:text;-webkit-text-fill-color:transparent">Touch</span>
    </h1>
    <p style="color:#94a3b8;font-size:1.05rem;line-height:1.7;max-width:520px;margin:0 auto">Have questions, need a quote, or want to report an issue? We're always here to help.</p>
  </div>
</section>

<!-- Contact Cards + Form -->
<section style="max-width:1100px;margin:0 auto;padding:4rem 1.5rem">

  <!-- Contact Form + Map split -->
  <div style="display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start" class="contact-grid">

    <!-- Form -->
    <div class="anim-fade-left" style="background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 4px 32px rgba(0,0,0,.08);border:1px solid #f1f5f9">
      <div style="background:linear-gradient(135deg,#0f172a,#1e293b);padding:1.75rem 2rem">
        <h2 style="color:#fff;font-weight:900;font-size:1.15rem;margin:0 0 .25rem">Send a Quick Message</h2>
        <p style="color:#64748b;font-size:.8rem;margin:0">We'll get back to you as soon as possible</p>
      </div>

      <div style="padding:2rem">
        <?php if($formSuccess): ?>
        <div style="text-align:center;padding:2rem 1rem">
          <div style="width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#22c55e,#16a34a);display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;box-shadow:0 8px 24px rgba(34,197,94,.3)">
            <svg width="36" height="36" fill="none" stroke="#fff" stroke-width="2.5" viewBox="0 0 24 24"><polyline stroke-linecap="round" stroke-linejoin="round" points="20 6 9 17 4 12"/></svg>
          </div>
          <h3 style="color:#0f172a;font-weight:800;margin:0 0 .5rem">Message Sent!</h3>
          <p style="color:#64748b;font-size:.9rem">Thank you. We'll reply within 24 hours.</p>
          <a href="/stile-lpg/contact.php" style="display:inline-block;margin-top:1rem;color:#f97316;font-weight:700;text-decoration:none">← Send another</a>
        </div>
        <?php else: ?>

        <?php if($formError): ?>
        <div class="alert alert-error" style="margin-bottom:1.25rem"><?= htmlspecialchars($formError) ?></div>
        <?php endif; ?>

        <form method="POST" action="/stile-lpg/contact.php">
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem" class="form-row">
            <div>
              <label style="display:block;color:#475569;font-weight:700;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.5rem">Full Name *</label>
              <input type="text" name="name" required placeholder="John Doe" class="input-field" style="border:2px solid #e2e8f0;border-radius:12px" value="<?= htmlspecialchars($_POST['name'] ?? '') ?>">
            </div>
            <div>
              <label style="display:block;color:#475569;font-weight:700;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.5rem">Phone</label>
              <input type="tel" name="phone" placeholder="+234 800 000 0000" class="input-field" style="border:2px solid #e2e8f0;border-radius:12px" value="<?= htmlspecialchars($_POST['phone'] ?? '') ?>">
            </div>
          </div>
          <div style="margin-bottom:1rem">
            <label style="display:block;color:#475569;font-weight:700;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.5rem">Email Address *</label>
            <input type="email" name="email" required placeholder="you@example.com" class="input-field" style="border:2px solid #e2e8f0;border-radius:12px" value="<?= htmlspecialchars($_POST['email'] ?? '') ?>">
          </div>
          <div style="margin-bottom:1rem">
            <label style="display:block;color:#475569;font-weight:700;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.5rem">Subject</label>
            <input type="text" name="subject" placeholder="How can we help?" class="input-field" style="border:2px solid #e2e8f0;border-radius:12px" value="<?= htmlspecialchars($_POST['subject'] ?? '') ?>">
          </div>
          <div style="margin-bottom:1.5rem">
            <label style="display:block;color:#475569;font-weight:700;font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.5rem">Message *</label>
            <textarea name="message" required rows="5" placeholder="Tell us more…" class="input-field" style="border:2px solid #e2e8f0;border-radius:12px;resize:vertical"><?= htmlspecialchars($_POST['message'] ?? '') ?></textarea>
          </div>
          <button type="submit" name="send_message" value="1" class="btn-primary" style="width:100%;justify-content:center;padding:.9rem;font-size:.95rem;border-radius:14px;display:flex;align-items:center;gap:.5rem">
            <svg width="18" height="18" fill="none" stroke="#fff" stroke-width="2" viewBox="0 0 24 24"><line x1="22" y1="2" x2="11" y2="13"/><polygon stroke-linecap="round" stroke-linejoin="round" points="22 2 15 22 11 13 2 9 22 2"/></svg>
            Send Message
          </button>
        </form>
        <?php endif; ?>
      </div>
    </div>

    <!-- Map placeholder + Emergency CTA -->
    <div style="display:flex;flex-direction:column;gap:1.25rem" class="anim-fade-right">
      <!-- Map -->
      <div style="background:#0f172a;border-radius:20px;overflow:hidden;min-height:300px;border:1px solid #1e293b;display:flex;align-items:center;justify-content:center;position:relative">
        <div style="text-align:center;padding:3rem">
          <div style="width:72px;height:72px;border-radius:20px;background:rgba(249,115,22,.1);display:flex;align-items:center;justify-content:center;margin:0 auto 1rem">
            <svg width="36" height="36" fill="none" stroke="#f97316" stroke-width="1.8" viewBox="0 0 24 24"><polygon stroke-linecap="round" stroke-linejoin="round" points="3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21 3 6"/><line x1="9" y1="3" x2="9" y2="18"/><line x1="15" y1="6" x2="15" y2="21"/></svg>
          </div>
          <p style="color:#64748b;font-size:.9rem"><?= htmlspecialchars($contactLocation) ?></p>
        </div>
      </div>
      <!-- FAQ teaser -->
      <div style="background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:1.5rem">
        <h3 style="color:#0f172a;font-weight:800;font-size:.95rem;margin:0 0 1rem">Frequently Asked</h3>
        <?php $faqs = [
          ['q'=>'How fast do you deliver?','a'=>'Same-day delivery for orders before 2PM.'],
          ['q'=>'What areas do you cover?','a'=>'All major cities and surrounding areas.'],
          ['q'=>'Do you exchange empty cylinders?','a'=>'Yes — we swap your empty for a full one.'],
        ];
        foreach($faqs as $faq): ?>
        <details style="border-bottom:1px solid #f1f5f9;padding:.75rem 0;cursor:pointer">
          <summary style="color:#0f172a;font-weight:700;font-size:.875rem;list-style:none;display:flex;align-items:center;justify-content:space-between">
            <?= $faq['q'] ?> <span style="color:#f97316">▾</span>
          </summary>
          <p style="color:#64748b;font-size:.82rem;margin:.5rem 0 0;line-height:1.6"><?= $faq['a'] ?></p>
        </details>
        <?php endforeach; ?>
      </div>
    </div>

  </div>
</section>

<style>
@media(max-width:900px){.contact-grid{grid-template-columns:1fr!important}}
@media(max-width:600px){.form-row{grid-template-columns:1fr!important}}
</style>

<?php require_once __DIR__ . '/backend/includes/footer.php'; ?>
