<?php
// ── Contact form handler ──────────────────────────────────────────────────
$sent    = false;
$errors  = [];

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Basic CSRF: check referer is same host
    $referer = $_SERVER['HTTP_REFERER'] ?? '';
    $host    = $_SERVER['HTTP_HOST'] ?? '';
    if ($host && parse_url($referer, PHP_URL_HOST) !== $host) {
        $errors[] = 'Neplatný požadavek.';
    }

    // Honeypot — bots fill this, humans don't
    if (!empty($_POST['website'])) {
        // Silent drop — pretend success
        $sent = true;
    }

    if (!$sent && empty($errors)) {
        $name    = trim(strip_tags($_POST['name']    ?? ''));
        $email   = trim(strip_tags($_POST['email']   ?? ''));
        $subject = trim(strip_tags($_POST['subject'] ?? ''));
        $message = trim(strip_tags($_POST['message'] ?? ''));

        // Validation
        if (mb_strlen($name) < 2)                          $errors[] = 'Zadejte prosím vaše jméno.';
        if (!filter_var($email, FILTER_VALIDATE_EMAIL))    $errors[] = 'Zadejte platnou e-mailovou adresu.';
        if (mb_strlen($subject) < 3)                       $errors[] = 'Zadejte prosím předmět zprávy.';
        if (mb_strlen($message) < 10)                      $errors[] = 'Zpráva je příliš krátká. Napište prosím více.';

        if (empty($errors)) {
            $to      = 'podpora@influenz.cz';
            $subj    = '[Influenz kontakt] ' . mb_substr($subject, 0, 120);
            $body    = "Nová zpráva z kontaktního formuláře na influenz.cz\n\n"
                     . "Jméno:  {$name}\n"
                     . "E-mail: {$email}\n"
                     . "Předmět: {$subject}\n\n"
                     . "Zpráva:\n{$message}\n\n"
                     . "---\nOdesláno: " . date('d.m.Y H:i') . "\n"
                     . "IP: " . ($_SERVER['REMOTE_ADDR'] ?? '—');

            $headers  = "From: noreply@influenz.cz\r\n";
            $headers .= "Reply-To: " . $email . "\r\n";
            $headers .= "Content-Type: text/plain; charset=UTF-8\r\n";

            $ok = mail($to, $subj, $body, $headers);
            if ($ok) {
                $sent = true;
            } else {
                $errors[] = 'Zprávu se nepodařilo odeslat. Zkuste to prosím znovu nebo napište přímo na podpora@influenz.cz.';
            }
        }
    }
}
?>
<!DOCTYPE html>
<html lang="cs" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="/assets/favicon/favicon.ico">
    <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png">
    <link rel="manifest" href="/assets/favicon/site.webmanifest">
    <title>Kontakt a podpora | Influenz</title>
    <meta name="description" content="Máte dotaz k platformě Influenz? Napište nám přes kontaktní formulář nebo přímo na podpora@influenz.cz. Odpovídáme do 24 hodin.">
    <meta name="keywords" content="kontakt influenz, podpora influenz, napište influenz, zákaznická podpora, influencer marketing podpora česko">
    <meta name="robots" content="index, follow">
    <link rel="canonical" href="https://influenz.cz/kontakt">
    <meta property="og:title" content="Kontakt a podpora | Influenz">
    <meta property="og:description" content="Napište nám přes kontaktní formulář nebo na podpora@influenz.cz. Odpovídáme do 24 hodin.">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="Influenz">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Kontakt a podpora | Influenz">
    <meta name="twitter:description" content="Máte dotaz k Influenz? Kontaktujte nás přes formulář nebo email. Odpovídáme do 24 hodin.">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FF5454',
                        primaryHover: '#E64A4A',
                        dark: '#0f172a'
                    },
                    fontFamily: { sans: ['Inter', 'sans-serif'] }
                }
            }
        }
    </script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <script src="https://unpkg.com/@phosphor-icons/web"></script>
    <style>
        body { font-family: 'Inter', sans-serif; background: #fafafa; color: #0f172a; overflow-x: hidden; }
        .input-field {
            width: 100%;
            padding: .75rem 1rem;
            border: 1.5px solid #e5e7eb;
            border-radius: .75rem;
            font-size: .9375rem;
            font-weight: 500;
            color: #0f172a;
            background: #fff;
            transition: border-color .15s, box-shadow .15s;
            outline: none;
            font-family: 'Inter', sans-serif;
        }
        .input-field:focus { border-color: #FF5454; box-shadow: 0 0 0 3px rgba(255,84,84,.12); }
        .input-field::placeholder { color: #9ca3af; font-weight: 400; }
        .input-error { border-color: #f87171 !important; }
    </style>
    <?php require __DIR__ . '/components/google-analytics.php'; ?>
</head>
<body class="min-h-screen flex flex-col font-sans">

    <!-- Nav -->
<?php $nav_active = 'kontakt'; require __DIR__ . '/components/nav.php'; ?>

    <main class="flex-1">
        <!-- Hero -->
        <section class="pt-16 md:pt-24 pb-12 px-4 text-center max-w-3xl mx-auto w-full">
            <div class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full bg-red-50 border border-red-100 text-primary mb-7 text-xs sm:text-sm font-bold tracking-wide shadow-sm">
                <i class="ph-bold ph-headset"></i>
                Odpovídáme do 24 hodin
            </div>
            <h1 class="text-5xl md:text-6xl font-black tracking-tight text-dark mb-6 leading-[1.05]">Jak vám<br>můžeme pomoci?</h1>
            <p class="text-lg md:text-xl text-gray-500 font-medium max-w-xl mx-auto leading-relaxed">
                Napište nám dotaz, hlášení chyby nebo cokoliv jiného. Ozveme se co nejdříve.
            </p>
        </section>

        <!-- Content grid -->
        <section class="max-w-5xl mx-auto px-4 md:px-6 pb-20">
            <div class="grid md:grid-cols-3 gap-8 items-start">

                <!-- Sidebar info -->
                <div class="space-y-5">
                    <div class="bg-white rounded-3xl border border-gray-200 p-6 shadow-sm">
                        <div class="w-10 h-10 bg-red-50 rounded-xl flex items-center justify-center mb-4">
                            <i class="ph-bold ph-envelope text-primary text-xl"></i>
                        </div>
                        <h3 class="font-black text-dark mb-1">E-mail</h3>
                        <p class="text-sm text-gray-500 font-medium mb-2">Preferujete přímý e-mail?</p>
                        <a href="mailto:podpora@influenz.cz" class="text-sm font-bold text-primary hover:underline">podpora@influenz.cz</a>
                    </div>

                    <div class="bg-white rounded-3xl border border-gray-200 p-6 shadow-sm">
                        <div class="w-10 h-10 bg-red-50 rounded-xl flex items-center justify-center mb-4">
                            <i class="ph-bold ph-clock text-primary text-xl"></i>
                        </div>
                        <h3 class="font-black text-dark mb-1">Doba odpovědi</h3>
                        <p class="text-sm text-gray-500 font-medium leading-relaxed">Pracovní dny odpovídáme zpravidla do <strong class="text-dark">24 hodin</strong>. O víkendu může trvat déle.</p>
                    </div>

                    <div class="bg-white rounded-3xl border border-gray-200 p-6 shadow-sm">
                        <div class="w-10 h-10 bg-red-50 rounded-xl flex items-center justify-center mb-4">
                            <i class="ph-bold ph-question text-primary text-xl"></i>
                        </div>
                        <h3 class="font-black text-dark mb-2">Časté dotazy</h3>
                        <p class="text-sm text-gray-500 font-medium mb-3">Možná najdete odpověď ihned:</p>
                        <div class="space-y-2">
                            <a href="/jak-to-funguje#faq-list" class="flex items-center gap-2 text-sm font-semibold text-gray-600 hover:text-primary transition-colors">
                                <i class="ph-bold ph-arrow-right text-primary text-xs"></i> Jak Influenz funguje?
                            </a>
                            <a href="/cenik#faq" class="flex items-center gap-2 text-sm font-semibold text-gray-600 hover:text-primary transition-colors">
                                <i class="ph-bold ph-arrow-right text-primary text-xs"></i> Dotazy k ceníku
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Contact form -->
                <div class="md:col-span-2">
                    <div class="bg-white rounded-3xl border border-gray-200 p-8 md:p-10 shadow-sm">

                        <?php if ($sent): ?>
                            <!-- Success state -->
                            <div class="text-center py-8">
                                <div class="w-16 h-16 bg-green-50 rounded-full flex items-center justify-center mx-auto mb-5">
                                    <i class="ph-bold ph-check-circle text-green-500 text-3xl"></i>
                                </div>
                                <h2 class="text-2xl font-black text-dark mb-3">Zpráva odeslána!</h2>
                                <p class="text-gray-500 font-medium mb-6">Děkujeme za váš dotaz. Ozveme se na <strong class="text-dark"><?= htmlspecialchars($_POST['email'] ?? '') ?></strong> co nejdříve.</p>
                                <a href="/" class="inline-flex items-center gap-2 px-6 py-3 rounded-xl bg-primary text-white font-bold hover:bg-primaryHover transition-all shadow-[0_4px_14px_rgba(255,84,84,0.25)]">
                                    <i class="ph-bold ph-magnifying-glass"></i> Zpět na vyhledávání
                                </a>
                            </div>

                        <?php else: ?>
                            <h2 class="text-2xl font-black text-dark mb-2">Napište nám</h2>
                            <p class="text-gray-500 font-medium mb-8">Vyplňte formulář a my se vám ozveme.</p>

                            <?php if (!empty($errors)): ?>
                                <div class="bg-red-50 border border-red-200 rounded-2xl px-5 py-4 mb-6">
                                    <div class="flex items-start gap-3">
                                        <i class="ph-bold ph-warning-circle text-red-500 text-lg flex-shrink-0 mt-0.5"></i>
                                        <div>
                                            <?php foreach ($errors as $err): ?>
                                                <p class="text-sm font-semibold text-red-700"><?= htmlspecialchars($err) ?></p>
                                            <?php endforeach; ?>
                                        </div>
                                    </div>
                                </div>
                            <?php endif; ?>

                            <form method="POST" action="" class="space-y-5" novalidate>
                                <!-- Honeypot (hidden from humans) -->
                                <div style="display:none" aria-hidden="true">
                                    <input type="text" name="website" tabindex="-1" autocomplete="off">
                                </div>

                                <div class="grid sm:grid-cols-2 gap-5">
                                    <div>
                                        <label for="name" class="block text-sm font-bold text-dark mb-1.5">Jméno <span class="text-primary">*</span></label>
                                        <input
                                            type="text"
                                            id="name"
                                            name="name"
                                            class="input-field <?= (!empty($errors) && mb_strlen(trim($_POST['name'] ?? '')) < 2) ? 'input-error' : '' ?>"
                                            placeholder="Jana Nováková"
                                            value="<?= htmlspecialchars($_POST['name'] ?? '') ?>"
                                            required
                                            maxlength="120"
                                        >
                                    </div>
                                    <div>
                                        <label for="email" class="block text-sm font-bold text-dark mb-1.5">E-mail <span class="text-primary">*</span></label>
                                        <input
                                            type="email"
                                            id="email"
                                            name="email"
                                            class="input-field <?= (!empty($errors) && !filter_var($_POST['email'] ?? '', FILTER_VALIDATE_EMAIL)) ? 'input-error' : '' ?>"
                                            placeholder="jana@firma.cz"
                                            value="<?= htmlspecialchars($_POST['email'] ?? '') ?>"
                                            required
                                            maxlength="200"
                                        >
                                    </div>
                                </div>

                                <div>
                                    <label for="subject" class="block text-sm font-bold text-dark mb-1.5">Předmět <span class="text-primary">*</span></label>
                                    <select id="subject" name="subject" class="input-field" required>
                                        <option value="" disabled <?= empty($_POST['subject']) ? 'selected' : '' ?>>Vyberte téma...</option>
                                        <option value="Dotaz k ceníku nebo kreditům"         <?= ($_POST['subject'] ?? '') === 'Dotaz k ceníku nebo kreditům' ? 'selected' : '' ?>>Dotaz k ceníku nebo kreditům</option>
                                        <option value="Problém s přihlášením nebo účtem"      <?= ($_POST['subject'] ?? '') === 'Problém s přihlášením nebo účtem' ? 'selected' : '' ?>>Problém s přihlášením nebo účtem</option>
                                        <option value="Technický problém nebo chyba"          <?= ($_POST['subject'] ?? '') === 'Technický problém nebo chyba' ? 'selected' : '' ?>>Technický problém nebo chyba</option>
                                        <option value="Dotaz k datům nebo profilům"           <?= ($_POST['subject'] ?? '') === 'Dotaz k datům nebo profilům' ? 'selected' : '' ?>>Dotaz k datům nebo profilům</option>
                                        <option value="Faktura nebo platba"                   <?= ($_POST['subject'] ?? '') === 'Faktura nebo platba' ? 'selected' : '' ?>>Faktura nebo platba</option>
                                        <option value="Jiný dotaz"                            <?= ($_POST['subject'] ?? '') === 'Jiný dotaz' ? 'selected' : '' ?>>Jiný dotaz</option>
                                    </select>
                                </div>

                                <div>
                                    <label for="message" class="block text-sm font-bold text-dark mb-1.5">Zpráva <span class="text-primary">*</span></label>
                                    <textarea
                                        id="message"
                                        name="message"
                                        rows="6"
                                        class="input-field resize-none <?= (!empty($errors) && mb_strlen(trim($_POST['message'] ?? '')) < 10) ? 'input-error' : '' ?>"
                                        placeholder="Popište co nejpodrobněji, s čím potřebujete pomoci..."
                                        required
                                        maxlength="4000"
                                    ><?= htmlspecialchars($_POST['message'] ?? '') ?></textarea>
                                    <p class="text-xs text-gray-400 font-medium mt-1.5">Max. 4 000 znaků.</p>
                                </div>

                                <button type="submit" class="w-full py-4 rounded-xl bg-primary text-white font-bold text-base hover:bg-primaryHover transition-all shadow-[0_4px_20px_rgba(255,84,84,0.3)] hover:-translate-y-0.5 flex items-center justify-center gap-2">
                                    <i class="ph-bold ph-paper-plane-tilt"></i>
                                    Odeslat zprávu
                                </button>

                                <p class="text-xs text-gray-400 text-center font-medium">
                                    Odesiláním souhlasíte se zpracováním osobních údajů dle naší <a href="/legal/privacy" class="text-primary hover:underline">Politiky ochrany osobních údajů</a>.
                                </p>
                            </form>
                        <?php endif; ?>

                    </div>
                </div>

            </div>
        </section>
    </main>

    <?php require __DIR__ . '/components/footer.php'; ?>

</body>
</html>
