<?php
$contact_content = $contact_content ?? [];
$contact_info = $contact_info ?? [];

$contact_cards = $contact_content['cards'] ?? [
    [
        'title' => 'Our Location',
        'main' => 'Sanjar Pharma LLP',
        'sub' => 'Himatnagar, Gujarat, India.',
        'link_text' => 'View on Map',
        'link_url' => '#google-map-section',
        'icon' => 'location'
    ],
    [
        'title' => 'Our Phone',
        'main' => '+91 63529 86603',
        'sub' => 'Mon - Sat: 9:00 AM - 6:00 PM',
        'link_text' => 'Call Us',
        'link_url' => 'tel:+916352986603',
        'icon' => 'phone'
    ],
    [
        'title' => 'Our Mail',
        'main' => 'info@sanjarpharma.com',
        'sub' => 'We reply within 24 hours',
        'link_text' => 'Email Us',
        'link_url' => 'mailto:info@sanjarpharma.com',
        'icon' => 'mail'
    ]
];

$map_url = $contact_content['map_url'] ?? 'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3663.029411904576!2d72.9634!3d23.3218!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zMjPCsDE5JzE4LjUiTiA3MsKwNTcnNDguMiJF!5e0!3m2!1sen!2sin!4v1700000000000!5m2!1sen!2sin';

function contact_svg_icon($type) {
    $icons = [
        'location' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6a2.5 2.5 0 0 1 0 5.5Z"/></svg>',
        'phone' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.8-.4 1.2-.3 1.3.4 2.6.6 4 .6.7 0 1.2.5 1.2 1.2v3.5c0 .7-.5 1.2-1.2 1.2C10.3 22 2 13.7 2 3.4 2 2.7 2.5 2.2 3.2 2.2h3.6c.7 0 1.2.5 1.2 1.2 0 1.4.2 2.7.6 4 .1.4 0 .9-.3 1.2l-1.7 2.2Z"/></svg>',
        'mail' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 4-8 5L4 8V6l8 5 8-5v2Z"/></svg>',
        'arrow' => '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M13.2 5.3 20 12l-6.8 6.7-1.4-1.4 4.4-4.3H4v-2h12.2l-4.4-4.3 1.4-1.4Z"/></svg>'
    ];

    return $icons[$type] ?? $icons['mail'];
}
?>

<section class="contact-section section" aria-labelledby="contactTitle">
    <div class="site-container">
        <div class="section-head contact-page-head">
            <div>
                <nav class="breadcrumbs" aria-label="Breadcrumb">
                    <a href="<?= $base_url ?>/">Home</a>
                    <span class="separator">/</span>
                    <span>Contact</span>
                </nav>

                <span class="section-eyebrow">Contact Sanjar Pharma</span>
                <h1 id="contactTitle">Let's Start a Conversation</h1>
                <p>Connect with our team for product inquiries, contract manufacturing, export support, and business partnerships.</p>
            </div>
        </div>

        <div class="contact-card-grid">
            <?php foreach ($contact_cards as $card): ?>
                <article class="contact-info-card card card-pad card-hover">
                    <div class="info-icon-box">
                        <?= contact_svg_icon($card['icon']) ?>
                    </div>

                    <div>
                        <h2><?= htmlspecialchars($card['title'], ENT_QUOTES, 'UTF-8') ?></h2>
                        <p class="contact-main"><?= htmlspecialchars($card['main'], ENT_QUOTES, 'UTF-8') ?></p>
                        <p class="contact-sub"><?= htmlspecialchars($card['sub'], ENT_QUOTES, 'UTF-8') ?></p>

                        <a href="<?= htmlspecialchars($card['link_url'], ENT_QUOTES, 'UTF-8') ?>" class="contact-link">
                            <?= htmlspecialchars($card['link_text'], ENT_QUOTES, 'UTF-8') ?>
                            <?= contact_svg_icon('arrow') ?>
                        </a>
                    </div>
                </article>
            <?php endforeach; ?>
        </div>

        <div class="contact-form-map-card card" id="google-map-section">
            <div class="contact-form-wrapper">
                <div class="contact-form-title">
                    <span class="form-accent-dash" aria-hidden="true"></span>
                    <h2>Send Us a Message</h2>
                </div>

                <p>Have a question or need more information? Fill out the form and our team will get back to you shortly.</p>

                <form action="<?= $base_url ?>/actions/send-message.php" method="POST" class="contact-form">
                    <div class="form-grid">
                        <div class="form-field">
                            <label class="sr-only" for="contactName">Full Name</label>
                            <input id="contactName" type="text" name="name" placeholder="Full Name*" autocomplete="name" required>
                        </div>

                        <div class="form-field">
                            <label class="sr-only" for="contactCompany">Company Name</label>
                            <input id="contactCompany" type="text" name="company" placeholder="Company Name" autocomplete="organization">
                        </div>

                        <div class="form-field">
                            <label class="sr-only" for="contactEmail">Email Address</label>
                            <input id="contactEmail" type="email" name="email" placeholder="Email Address*" autocomplete="email" required>
                        </div>

                        <div class="form-field">
                            <label class="sr-only" for="contactPhone">Phone Number</label>
                            <input id="contactPhone" type="tel" name="phone" placeholder="Phone Number*" autocomplete="tel">
                        </div>

                        <div class="form-field form-field-full">
                            <label for="inquiryType">Inquiry Type*</label>
                            <select id="inquiryType" name="inquiry_type" required>
                                <option value="" selected disabled>Select Inquiry Type</option>
                                <option value="Contract Manufacturing">Third-Party Contract Manufacturing</option>
                                <option value="Global Export">Global Export & Supply</option>
                                <option value="Product Inquiry">Product Formulation Inquiry</option>
                                <option value="General">General Business Inquiry</option>
                            </select>
                        </div>

                        <div class="form-field form-field-full">
                            <label class="sr-only" for="contactMessage">Your Message</label>
                            <textarea id="contactMessage" name="message" rows="5" placeholder="Your Message*" required></textarea>
                        </div>
                    </div>

                    <button type="submit" class="primary-button contact-submit">
                        Send Message
                        <?= contact_svg_icon('arrow') ?>
                    </button>
                </form>
            </div>

            <div class="map-wrapper">
                <iframe
                    src="<?= htmlspecialchars($map_url, ENT_QUOTES, 'UTF-8') ?>"
                    class="map-iframe"
                    title="Sanjar Pharma location on Google Maps"
                    width="720"
                    height="520"
                    allowfullscreen
                    loading="lazy"
                    referrerpolicy="no-referrer-when-downgrade">
                </iframe>
            </div>
        </div>
    </div>
</section>

<?php if (!empty($contact_info['partners'])): ?>
<section class="management-section section-sm" aria-labelledby="managementTitle">
    <div class="site-container">
        <div class="contact-section-title">
            <span class="form-accent-dash" aria-hidden="true"></span>
            <h2 id="managementTitle">Management Team</h2>
        </div>

        <div class="management-grid">
            <?php foreach ($contact_info['partners'] as $partner): ?>
                <article class="management-card card card-pad card-hover">
                    <div class="management-head">
                        <div class="initial-circle">
                            <?= htmlspecialchars($partner['initials'], ENT_QUOTES, 'UTF-8') ?>
                        </div>

                        <div>
                            <h3><?= htmlspecialchars($partner['name'], ENT_QUOTES, 'UTF-8') ?></h3>
                            <p><?= htmlspecialchars($partner['role'], ENT_QUOTES, 'UTF-8') ?></p>
                        </div>
                    </div>

                    <p class="management-desc"><?= htmlspecialchars($partner['desc'], ENT_QUOTES, 'UTF-8') ?></p>

                    <div class="management-links">
                        <a href="tel:<?= htmlspecialchars(str_replace(' ', '', $partner['phone']), ENT_QUOTES, 'UTF-8') ?>">
                            <?= contact_svg_icon('phone') ?>
                            <?= htmlspecialchars($partner['phone'], ENT_QUOTES, 'UTF-8') ?>
                        </a>

                        <a href="mailto:<?= htmlspecialchars($partner['email'], ENT_QUOTES, 'UTF-8') ?>">
                            <?= contact_svg_icon('mail') ?>
                            <?= htmlspecialchars($partner['email'], ENT_QUOTES, 'UTF-8') ?>
                        </a>
                    </div>
                </article>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<?php if (!empty($contact_info['key_contacts'])): ?>
<section class="department-section section-sm section-surface" aria-labelledby="departmentTitle">
    <div class="site-container">
        <div class="contact-section-title">
            <span class="form-accent-dash" aria-hidden="true"></span>
            <h2 id="departmentTitle">Departmental Contacts</h2>
        </div>

        <div class="department-grid">
            <?php foreach ($contact_info['key_contacts'] as $kc): ?>
                <article class="dept-card card card-pad card-hover">
                    <h3><?= htmlspecialchars($kc['dept'], ENT_QUOTES, 'UTF-8') ?></h3>
                    <a href="mailto:<?= htmlspecialchars($kc['email'], ENT_QUOTES, 'UTF-8') ?>">
                        <?= contact_svg_icon('mail') ?>
                        <?= htmlspecialchars($kc['email'], ENT_QUOTES, 'UTF-8') ?>
                    </a>
                </article>
            <?php endforeach; ?>
        </div>
    </div>
</section>
<?php endif; ?>

<style>
.contact-page-head {
  max-width: 760px;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.contact-page-head p {
  max-width: 62ch;
}

.contact-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.contact-info-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.info-icon-box {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 18%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
}

.info-icon-box svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.contact-info-card h2 {
  margin: 0 0 0.25rem;
  font-size: 1rem;
}

.contact-main {
  margin: 0;
  color: var(--heading);
  font-size: 0.92rem;
  font-weight: 700;
}

.contact-sub {
  margin: 0.2rem 0 0.85rem;
  color: var(--muted);
  font-size: 0.88rem;
}

.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--primary);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

.contact-link svg,
.management-links svg,
.dept-card svg,
.contact-submit svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
}

.contact-form-map-card {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  overflow: hidden;
  padding: 1rem;
}

.contact-form-wrapper {
  padding: clamp(1.25rem, 3vw, 2.5rem);
}

.contact-form-title,
.contact-section-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.75rem;
}

.contact-form-title h2,
.contact-section-title h2 {
  margin: 0;
  font-size: clamp(1.35rem, 1.4vw, 2rem);
}

.form-accent-dash {
  width: 4px;
  height: 24px;
  display: inline-block;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--primary);
}

.contact-form {
  margin-top: 1.5rem;
}

.form-field label {
  display: inline-block;
  margin-bottom: 0.45rem;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.form-field-full {
  grid-column: 1 / -1;
}

.contact-submit {
  margin-top: 1.5rem;
  border: 0;
}

.map-wrapper {
  min-height: 520px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

.map-iframe {
  width: 100%;
  height: 100%;
  min-height: 520px;
  border: 0;
}

[data-theme="dark"] .map-iframe {
  filter: grayscale(1) invert(0.92) contrast(1.2) hue-rotate(190deg);
}

.contact-section-title {
  padding-bottom: 1rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 1px solid var(--border);
}

.management-grid,
.department-grid {
  display: grid;
  gap: var(--gap);
}

.management-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.department-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.management-card {
  position: relative;
  overflow: hidden;
}

.management-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--primary);
}

.management-head {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.initial-circle {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--primary);
  background: color-mix(in srgb, var(--primary) 18%, var(--surface));
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.management-head h3 {
  margin: 0;
  font-size: 1rem;
}

.management-head p {
  margin: 0.2rem 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.management-desc {
  margin: 1rem 0;
  font-size: 0.92rem;
}

.management-links {
  display: grid;
  gap: 0.55rem;
  margin-top: auto;
}

.management-links a,
.dept-card a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
}

.management-links a:hover,
.dept-card a:hover {
  color: var(--primary);
}

.dept-card {
  border-left: 4px solid var(--primary);
}

.dept-card h3 {
  margin-bottom: 0.6rem;
  font-size: 1rem;
}

@media (max-width: 991px) {
  .contact-card-grid,
  .contact-form-map-card,
  .management-grid,
  .department-grid {
    grid-template-columns: 1fr;
  }

  .map-wrapper,
  .map-iframe {
    min-height: 380px;
  }
}

@media (max-width: 575px) {
  .contact-form-map-card {
    padding: 0.75rem;
  }

  .contact-form-wrapper {
    padding: 1rem;
  }

  .map-wrapper,
  .map-iframe {
    min-height: 320px;
  }
}
</style>