<?php
require_once 'config.php';

$errors = [];
$success = false;

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $name    = clean($_POST['name']    ?? '');
    $org     = clean($_POST['org']     ?? '');
    $type    = clean($_POST['type']    ?? '');
    $country = clean($_POST['country'] ?? '');
    $email   = clean($_POST['email']   ?? '');
    $phone   = clean($_POST['phone']   ?? '');
    $message = clean($_POST['message'] ?? '');
    $consent = isset($_POST['consent']);

    if (empty($name))    $errors[] = 'Full name is required.';
    if (!filter_var($email, FILTER_VALIDATE_EMAIL)) $errors[] = 'Valid email required.';
    if (empty($country)) $errors[] = 'Country is required.';
    if (strlen($message) < 10) $errors[] = 'Message must be at least 10 characters.';
    if (!$consent)       $errors[] = 'Please agree to the Privacy Policy.';

    if (empty($errors)) {
        $conn->query("CREATE TABLE IF NOT EXISTS support_tickets (
            id INT PRIMARY KEY AUTO_INCREMENT,
            name VARCHAR(100), org VARCHAR(150), type VARCHAR(100),
            country VARCHAR(100), email VARCHAR(100), phone VARCHAR(30),
            message TEXT, created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
        )");
        $stmt = $conn->prepare("INSERT INTO support_tickets (name,org,type,country,email,phone,message) VALUES (?,?,?,?,?,?,?)");
        $stmt->bind_param('sssssss', $name, $org, $type, $country, $email, $phone, $message);
        if ($stmt->execute()) $success = true;
        else $errors[] = 'Submission failed. Please try again.';
    }
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Contact | Partner With DRM HealthLink</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  <style>
    html { overflow-x: hidden; }
    *, *::before, *::after { box-sizing: border-box; }
    body {
      font-family: 'Poppins', sans-serif;
      background: #f4f7fb;
      color: #1e3a8a;
      min-height: 100vh;
      padding-top: 68px;
      overflow-x: hidden;
      margin: 0;
    }

    /* ── HERO (blue) ── */
    .page-hero {
      background: linear-gradient(135deg, #4D8DFF 0%, #1E63E9 45%, #0E3FAE 100%);
      padding: 64px 0 56px;
      position: relative;
      overflow: hidden;
    }
    .page-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse at 85% -5%, rgba(24,192,240,.3) 0%, transparent 55%),
        radial-gradient(ellipse at -5% 110%, rgba(120,0,240,.25) 0%, transparent 55%);
    }
    .page-hero .inner { position: relative; z-index: 1; }
    .eyebrow {
      display: inline-block;
      background: rgba(255,255,255,.18);
      border: 1.5px solid rgba(255,255,255,.35);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      padding: 5px 18px;
      border-radius: 20px;
      margin-bottom: 18px;
      backdrop-filter: blur(8px);
      font-family: 'Poppins', sans-serif;
    }
    .page-hero h1 {
      font-family: 'Poppins', sans-serif;
      font-size: clamp(26px, 4vw, 46px);
      font-weight: 800;
      letter-spacing: -1.5px;
      color: #fff;
      line-height: 1.15;
      margin-bottom: 14px;
    }
    .page-hero h1 em {
      font-style: normal;
      background: linear-gradient(90deg, #4FD4FA, #9B5CFF);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .page-hero p {
      font-size: 16px;
      color: rgba(255,255,255,.88);
      max-width: 580px;
      line-height: 1.8;
    }

    /* ── MAIN BODY ── */
    .main-body {
      background: #f4f7fb;
      padding: 56px 0 72px;
    }

    /* ── CONTACT GRID ── */
    .contact-grid {
      display: grid;
      grid-template-columns: 1.15fr 0.85fr;
      gap: 40px;
      align-items: flex-start;
    }

    /* ── FORM CARD ── */
    .form-card {
      background: #fff;
      border: 1px solid #dbeafe;
      border-radius: 20px;
      padding: 40px 44px;
      box-shadow: 0 4px 24px rgba(30,99,233,.08);
    }
    .form-card h2 {
      font-family: 'Poppins', sans-serif;
      font-size: 24px;
      font-weight: 800;
      color: #1e3a8a;
      margin-bottom: 4px;
    }
    .form-card .sub {
      font-size: 14px;
      color: #3b82f6;
      margin-bottom: 28px;
      font-family: 'Poppins', sans-serif;
    }
    .form-label {
      font-family: 'Poppins', sans-serif;
      font-size: 13px;
      font-weight: 600;
      color: #1e40af;
      margin-bottom: 7px;
      display: block;
    }
    .form-control, .form-select {
      background: #f0f7ff;
      border: 1.5px solid #bfdbfe;
      color: #1e3a8a;
      border-radius: 12px;
      font-family: 'Poppins', sans-serif;
      font-size: 15px;
      padding: 13px 15px;
      width: 100%;
      transition: border-color .2s, box-shadow .2s;
    }
    .form-control:focus, .form-select:focus {
      outline: none;
      border-color: #3b82f6;
      background: #fff;
      box-shadow: 0 0 0 3px rgba(59,130,246,.15);
    }
    .form-control::placeholder { color: #93c5fd; }
    .form-select {
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%231e40af' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 14px center;
      padding-right: 40px;
      cursor: pointer;
    }
    textarea.form-control { resize: vertical; min-height: 130px; }

    .consent-row {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      font-size: 14px;
      color: #1e40af;
      line-height: 1.7;
      font-family: 'Poppins', sans-serif;
    }
    .consent-row input[type=checkbox] {
      width: 17px; height: 17px;
      margin-top: 2px;
      flex-shrink: 0;
      accent-color: #1d4ed8;
      cursor: pointer;
    }
    .consent-row a { color: #2563eb; font-weight: 600; }
    .form-note { font-size: 13px; color: #60a5fa; margin-top: 12px; line-height: 1.6; font-family: 'Poppins', sans-serif; }

    .btn-submit {
      background: linear-gradient(135deg, #1d4ed8, #3b82f6);
      border: none;
      color: #fff;
      padding: 14px 36px;
      border-radius: 12px;
      font-family: 'Poppins', sans-serif;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      box-shadow: 0 4px 18px rgba(59,130,246,.35);
      transition: transform .2s, box-shadow .2s;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .btn-submit:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(59,130,246,.5); }

    .alert-err {
      background: #fef2f2;
      border: 1px solid #fecaca;
      border-radius: 10px;
      padding: 12px 16px;
      font-size: 14px;
      color: #dc2626;
      margin-bottom: 20px;
      line-height: 1.6;
    }

    /* ── RIGHT SIDE CARDS ── */
    .side-card {
      background: #fff;
      border-radius: 16px;
      padding: 24px 22px;
      margin-bottom: 14px;
      box-shadow: 0 2px 12px rgba(30,99,233,.07);
      transition: transform .3s, box-shadow .3s;
    }
    .side-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(30,99,233,.14); }
    .side-card.purple { border: 1.5px solid #ddd6fe; }
    .side-card.blue   { border: 1.5px solid #bfdbfe; }
    .side-card-label {
      font-family: 'Poppins', sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .side-card-label i { font-size: 14px; }
    .side-card.purple .side-card-label { color: #7c3aed; }
    .side-card.blue   .side-card-label { color: #1d4ed8; }
    .side-card p { font-size: 15px; color: #1e3a8a; line-height: 1.75; margin: 0; font-family: 'Poppins', sans-serif; }
    .side-card p b { color: #1e3a8a; font-weight: 700; }
    .side-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
    .side-card ul li {
      font-size: 14px;
      color: #1e40af;
      line-height: 1.65;
      display: flex;
      gap: 8px;
      align-items: flex-start;
      font-family: 'Poppins', sans-serif;
    }
    .side-card ul li::before { content: '+'; color: #7c3aed; font-weight: 700; font-size: 15px; flex-shrink: 0; }
    .side-card ul li b { color: #1e3a8a; font-weight: 700; }

    /* ── SUCCESS ── */
    .success-box {
      background: #f0fdf4;
      border: 1px solid #bbf7d0;
      border-radius: 16px;
      padding: 48px 32px;
      text-align: center;
    }
    .success-box h3 { font-family: 'Poppins', sans-serif; font-size: 22px; font-weight: 800; color: #1e3a8a; margin-bottom: 10px; }
    .success-box p { color: #1e40af; font-size: 15px; line-height: 1.7; }
    .btn-back { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 10px 22px; border-radius: 22px; border: 1.5px solid #bfdbfe; color: #1d4ed8; text-decoration: none; font-size: 13px; font-weight: 600; transition: all .2s; background: #fff; }
    .btn-back:hover { border-color: #3b82f6; background: #eff6ff; }

    /* ── FOOTER ── */
    footer {
      background: linear-gradient(135deg, #1E63E9 0%, #0E3FAE 45%, #144CC8 100%);
      border-top: 1px solid rgba(255,255,255,.08);
      padding: 56px 0 28px;
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 900px) {
      .contact-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 600px) {
      .page-hero { padding: 44px 0 36px; }
      .form-card { padding: 24px 18px; }
      .form-card h2 { font-size: 20px; }
      .btn-submit { width: 100%; justify-content: center; }
    }
  </style>
</head>
<body>

<?php include 'navbar.php'; ?>

<!-- BLUE HERO -->
<div class="page-hero">
  <div class="container" style="max-width:1140px;">
    <div class="inner">
      <span class="eyebrow">Get in Touch</span>
      <h1>Let's bring healthcare closer, <span style="color:#ffffff !important;-webkit-text-fill-color:#ffffff !important;">together</span>.</h1>
      <p>Whether you are a corporate, pharmacy, hospital, lab, public health authority, CSR programme, or investor, there is a DRM HealthLink<sup class="tm">™</sup> partnership model for you. Tell us about your goals and our team will respond within 24 hours.</p>
    </div>
  </div>
</div>

<!-- WHITE BODY -->
<div class="main-body">
  <div class="container" style="max-width:1140px;">



    <div class="contact-grid">

      <!-- FORM -->
      <div>
        <div class="form-card">
          <h2>Send us your enquiry</h2>
          <p class="sub">Fields marked * are required.</p>

          <?php if (!empty($errors)): ?>
            <div class="alert-err"><i class="fas fa-exclamation-circle me-2"></i><?= implode('<br>', array_map('htmlspecialchars', $errors)) ?></div>
          <?php endif; ?>

          <form method="POST" id="contactForm">
            <div class="row g-3">
              <div class="col-12 col-sm-6">
                <label class="form-label">Full Name *</label>
                <input type="text" name="name" class="form-control" placeholder="Your full name" value="<?= htmlspecialchars($_POST['name'] ?? '') ?>" required>
              </div>
              <div class="col-12 col-sm-6">
                <label class="form-label">Organisation</label>
                <input type="text" name="org" class="form-control" placeholder="Company or institution" value="<?= htmlspecialchars($_POST['org'] ?? '') ?>">
              </div>
              <div class="col-12 col-sm-6">
                <label class="form-label">I am contacting as *</label>
                <select name="type" class="form-select">
                  <option value="">Please select</option>
                  <?php foreach(['Corporate / Employer','Pharmacy / Retail','Hospital / Clinic','Diagnostic Laboratory','Public Health Authority / Government','CSR / NGO Programme','Investor','Media / Press','Individual / Patient','Other'] as $opt): ?>
                  <option value="<?=$opt?>" <?=(($_POST['type']??'')===$opt)?'selected':''?>><?=$opt?></option>
                  <?php endforeach; ?>
                </select>
              </div>
              <div class="col-12 col-sm-6">
                <label class="form-label">Country *</label>
                <input type="text" name="country" class="form-control" placeholder="Your country" value="<?= htmlspecialchars($_POST['country'] ?? '') ?>" required>
              </div>
              <div class="col-12 col-sm-6">
                <label class="form-label">Email *</label>
                <input type="email" name="email" class="form-control" placeholder="you@example.com" value="<?= htmlspecialchars($_POST['email'] ?? '') ?>" required>
              </div>
              <div class="col-12 col-sm-6">
                <label class="form-label">Phone / WhatsApp</label>
                <input type="text" name="phone" class="form-control" placeholder="Include country code" value="<?= htmlspecialchars($_POST['phone'] ?? '') ?>">
              </div>
              <div class="col-12">
                <label class="form-label">How can we help? *</label>
                <textarea name="message" class="form-control" placeholder="Tell us about your location, community, or programme, and what you would like to achieve."><?= htmlspecialchars($_POST['message'] ?? '') ?></textarea>
              </div>
              <div class="col-12">
                <div class="consent-row">
                  <input type="checkbox" name="consent" id="consent" <?=isset($_POST['consent'])?'checked':''?>>
                  <label for="consent">I agree that DRM Pharma &amp; Diagnostic GmbH may process the details submitted in this form to respond to my enquiry, as described in the <a href="privacy.php">Privacy Policy</a>. *</label>
                </div>
              </div>
              <div class="col-12">
                <div style="display:flex;align-items:center;gap:16px;flex-wrap:wrap;">
                  <button type="submit" class="btn-submit" id="submitBtn"><i class="fas fa-paper-plane"></i> Send Enquiry</button>
                  <span id="inlineSuccess" style="display:none;color:#16a34a;font-size:14px;font-weight:600;font-family:'Poppins',sans-serif;align-items:center;gap:6px;"><i class="fas fa-check-circle"></i> Enquiry sent! We'll reply within 24 hours.</span>
                </div>
                <p class="form-note">Please do not include medical or health information in this form. This form is for general and partnership enquiries only and is not monitored for medical emergencies.</p>
              </div>
            </div>
          </form>
        </div>
      </div>

      <!-- RIGHT INFO CARDS -->
      <div>
        <div class="side-card blue">
          <div class="side-card-label"><i class="fas fa-envelope"></i> Email</div>
          <p><b>info@drmhealthlink.com</b></p>
        </div>

        <div class="side-card purple">
          <div class="side-card-label"><i class="fas fa-phone"></i> Phone &amp; WhatsApp</div>
          <p>Office: <b>+49 6106 6978263</b><br>WhatsApp: <b>+49 171 3204193</b></p>
        </div>

        <div class="side-card blue">
          <div class="side-card-label"><i class="fas fa-location-dot"></i> Headquarters</div>
          <p>DRM Pharma &amp; Diagnostic GmbH<br>Odenwaldring 41, 63110 Rodgau, Germany</p>
        </div>


      </div>

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

<?php include 'footer.php'; ?>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.getElementById('contactForm').addEventListener('submit', function(e) {
  e.preventDefault();
  var btn = document.getElementById('submitBtn');
  var msg = document.getElementById('inlineSuccess');
  btn.disabled = true;
  btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Sending…';

  fetch('contact.php', {
    method: 'POST',
    body: new FormData(this)
  })
  .then(function(r){ return r.text(); })
  .then(function() {
    // clear form
    document.getElementById('contactForm').reset();
    // show inline success
    msg.style.display = 'inline-flex';
    // restore button
    btn.disabled = false;
    btn.innerHTML = '<i class="fas fa-paper-plane"></i> Send Enquiry';
    // scroll success into view
    msg.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
  })
  .catch(function() {
    btn.disabled = false;
    btn.innerHTML = '<i class="fas fa-paper-plane"></i> Send Enquiry';
    alert('Something went wrong. Please try again.');
  });
});
</script>
</body>
</html>
