---
import BaseLayout from "../layouts/BaseLayout.astro";
import SiteHeader from "../components/SiteHeader.astro";
import SiteFooter from "../components/SiteFooter.astro";
import { navigationItems } from "../lib/navigation";

const pageSeo = {
    title: "Contact Us",
    description:
        "Contact Highland Group RDA for volunteering, participating, sponsoring a pony, or any general enquiry. We'd love to hear from you.",
    keywords:
        "Highland Group RDA contact, RDA enquiries, volunteer, participate, sponsor a pony, Highlands disability riding",
    canonicalPath: "/contact",
};

const turnstileSiteKey = import.meta.env.PUBLIC_TURNSTILE_SITE_KEY ?? "";
---

<BaseLayout {...pageSeo}>
    {turnstileSiteKey && (
        <Fragment slot="head">
            <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer />
        </Fragment>
    )}
    <Fragment slot="head">
        <script src="/contact-form.js" defer data-cfasync="false" />
    </Fragment>

    <style>
        #site-nav { transition: background 0.4s ease, backdrop-filter 0.4s ease; }
        #site-nav.scrolled { background: rgba(0,0,0,0.82); backdrop-filter: blur(8px); }

        .field-input {
            width: 100%;
            border: 1.5px solid rgba(0,0,0,0.18);
            border-radius: 6px;
            padding: 12px 16px;
            font-family: 'Public Sans', sans-serif;
            font-size: 15px;
            font-weight: 600;
            color: #000;
            background: #fff;
            outline: none;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
            appearance: none;
        }
        .field-input:focus {
            border-color: #7DA371;
            box-shadow: 0 0 0 3px rgba(125,163,113,0.18);
        }
        .field-input::placeholder { color: rgba(0,0,0,0.35); font-weight: 600; }

        /* Custom radio buttons */
        .radio-group { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .radio-label {
            display: flex; align-items: flex-start; gap: 12px;
            cursor: pointer; padding: 12px 16px; border-radius: 6px;
            border: 1.5px solid rgba(0,0,0,0.15); background: #fff;
            transition: border-color 0.2s ease;
        }
        .radio-label:hover { border-color: #7DA371; }
        .radio-label input[type="radio"] { display: none; }
        .radio-label input[type="radio"]:checked ~ .radio-custom { border-color: #7DA371; background: #7DA371; }
        .radio-label:has(input:checked) { border-color: #7DA371; background: rgba(125,163,113,0.07); }
        .radio-custom {
            width: 18px; height: 18px; border-radius: 9999px;
            border: 2px solid rgba(0,0,0,0.25); flex-shrink: 0; margin-top: 1px;
            transition: border-color 0.2s, background 0.2s;
            position: relative;
        }
        .radio-custom::after {
            content: ''; position: absolute; inset: 0;
            display: flex; align-items: center; justify-content: center;
        }
        .radio-label input[type="radio"]:checked ~ .radio-custom::after {
            content: '';
            width: 7px; height: 7px; border-radius: 9999px;
            background: #fff;
            position: absolute; top: 50%; left: 50%;
            transform: translate(-50%, -50%);
        }
        .radio-text { font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 14px; color: #000; line-height: 1.4; }

        /* Select arrow */
        select.field-input {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 16px center;
            padding-right: 40px;
        }

        /* Quick link cards */
        .ql-card { position: relative; height: 240px; border-radius: 6px; overflow: hidden; display: block; cursor: pointer; }
        .ql-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
        .ql-card:hover .ql-card-img { transform: scale(1.05); }
        .ql-card-band { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(125,163,113,0.9); backdrop-filter: blur(4px); padding: 14px 18px; }
        .ql-card-title { font-family: 'Merriweather', serif; font-weight: 700; font-size: 20px; color: #fff; line-height: 1.2; }
        .ql-card:hover .ql-card-title { text-decoration: underline; }
        .ql-card-sub { margin-top: 4px; font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 13px; color: rgba(255,255,255,0.82); }

        @media (max-width: 900px) {
            .contact-grid { grid-template-columns: 1fr !important; }
            .name-email-row { grid-template-columns: 1fr !important; }
            .radio-group { grid-template-columns: 1fr !important; }
            .phone-field { max-width: 100% !important; }
            .ql-grid { grid-template-columns: 1fr !important; }
        }
        @media (max-width: 600px) {
            .contact-section { padding: 48px 24px !important; }
            .ql-section { padding: 48px 24px !important; }
        }
    </style>

    <div id="site-nav" class="fixed top-0 left-0 right-0 z-50 px-4 sm:px-10">
        <SiteHeader navigationItems={navigationItems} theme="dark" />
    </div>

    <div class="flex flex-col min-h-screen bg-[#e2e2e2]">
        <main class="w-full">

            <!-- ── HERO ── -->
            <section class="relative w-full overflow-hidden" style="min-height: 52vh;">
                <img
                    class="absolute inset-0 h-full w-full object-cover"
                    style="object-position: 50% 45%;"
                    alt=""
                    src="/hero-contact.webp"
                    loading="eager"
                    fetchpriority="high"
                    decoding="async"
                />
                <div
                    class="absolute inset-0"
                    style="background: linear-gradient(160deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.42) 60%, rgba(0,0,0,0.55) 100%);"
                />
                <div
                    class="relative flex flex-col justify-end"
                    style="min-height: 52vh; padding: 120px 28px 64px;"
                >
                    <div style="max-width: 600px;">
                        <p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 14px;">
                            Contact Us
                        </p>
                        <div style="width: 48px; height: 2px; background: #7DA371; margin-bottom: 20px;" />
                        <h1 style="font-family: 'Merriweather', serif; font-weight: 900; font-size: clamp(32px, 4.5vw, 52px); color: #F6F1E8; line-height: 1.1; margin-bottom: 18px;">
                            We'd love to hear from you.
                        </h1>
                        <p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: clamp(15px, 1.5vw, 18px); color: rgba(246,241,232,0.82); line-height: 1.65;">
                            Whether you're looking to volunteer, apply as a participant, sponsor a pony, or just want to know more — get in touch and we'll get back to you soon.
                        </p>
                    </div>
                </div>
            </section>

            <!-- ── CONTACT SECTION ── -->
            <section class="contact-section" style="background: #d6d6d6; padding: clamp(48px, 8vw, 88px) clamp(24px, 6vw, 72px);">
                <div class="contact-grid" style="max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.6fr; gap: 80px; align-items: start;">

                    <!-- Left: details -->
                    <div>
                        <p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(0,0,0,0.4); margin-bottom: 14px;">Get in touch</p>
                        <div style="width: 36px; height: 2px; background: #7DA371; margin-bottom: 24px;" />
                        <h2 style="font-family: 'Merriweather', serif; font-weight: 700; font-size: clamp(22px, 2vw, 28px); color: #000; line-height: 1.2; margin-bottom: 28px;">
                            We'll get back to you as soon as we can.
                        </h2>

                        <div style="margin-bottom: 28px;">
                            <p style="font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; color: #000; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px;">Email</p>
                            <a href="mailto:info@highlandgrouprda.org.uk" style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 15px; color: rgba(0,0,0,0.7); text-decoration: underline; line-height: 1.6;">
                                info@highlandgrouprda.org.uk
                            </a>
                        </div>

                        <div style="margin-bottom: 28px;">
                            <p style="font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; color: #000; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px;">Address</p>
                            <address style="font-style: normal; font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 15px; color: rgba(0,0,0,0.7); line-height: 1.8;">
                                Sandycroft, Reelig<br />Kirkhill<br />IV5 7PP
                            </address>
                        </div>

                        <div style="margin-bottom: 36px;">
                            <p style="font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; color: #000; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px;">Sessions</p>
                            <p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 15px; color: rgba(0,0,0,0.7); line-height: 1.7;">
                                Tuesday to Friday mornings<br />Sandycroft, Reelig, Kirkhill
                            </p>
                        </div>

                        <div style="padding-top: 24px; border-top: 1px solid rgba(0,0,0,0.12); margin-bottom: 36px;">
                            <p style="font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 13px; color: #000; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 14px;">Follow us</p>
                            <div style="display: flex; flex-direction: column; gap: 12px;">
                                <a
                                    href="/facebook"
                                    style="display: inline-flex; align-items: center; gap: 10px; font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 14px; color: rgba(0,0,0,0.7); text-decoration: none;"
                                    onmouseover="this.style.textDecoration='underline'"
                                    onmouseout="this.style.textDecoration='none'"
                                >
                                    <span style="width: 34px; height: 34px; border-radius: 9999px; border: 1.5px solid rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center;">
                                        <svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                                            <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/>
                                        </svg>
                                    </span>
                                    Facebook
                                </a>
                                <a
                                    href="https://www.instagram.com/HighlandGroupRDA"
                                    target="_blank"
                                    rel="noreferrer"
                                    style="display: inline-flex; align-items: center; gap: 10px; font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 14px; color: rgba(0,0,0,0.7); text-decoration: none;"
                                    onmouseover="this.style.textDecoration='underline'"
                                    onmouseout="this.style.textDecoration='none'"
                                >
                                    <span style="width: 34px; height: 34px; border-radius: 9999px; border: 1.5px solid rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center;">
                                        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                            <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
                                            <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
                                            <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
                                        </svg>
                                    </span>
                                    Instagram
                                </a>
                            </div>
                        </div>

                        <!-- Map -->
                        <div style="border-radius: 7px; overflow: hidden; border: 1px solid rgba(0,0,0,0.1);">
                            <iframe
                                title="Highland Group RDA location"
                                src="https://www.google.com/maps?q=IV5%207PP&z=11&output=embed"
                                style="width: 100%; height: 220px; border: 0; display: block;"
                                loading="lazy"
                                referrerpolicy="no-referrer-when-downgrade"
                            ></iframe>
                        </div>
                    </div>

                    <!-- Right: form -->
                    <div style="background: #e2e2e2; border-radius: 7px; padding: clamp(32px, 4vw, 52px);">
                        <p style="font-family: 'Merriweather', serif; font-weight: 700; font-size: 22px; color: #000; margin-bottom: 6px;">Send us a message</p>
                        <p style="font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 14px; color: rgba(0,0,0,0.5); margin-bottom: 28px;">
                            Fields marked <span style="color: #7DA371;">*</span> are required.
                        </p>

                        {!turnstileSiteKey && (
                            <p style="border-radius: 6px; border: 1px solid #fbbf24; background: #fffbeb; padding: 10px 14px; font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 13px; color: #92400e; margin-bottom: 20px;">
                                Turnstile is not configured. Set PUBLIC_TURNSTILE_SITE_KEY and redeploy to enable the form.
                            </p>
                        )}

                        <form
                            action="/api/contact"
                            method="post"
                            data-contact-form
                            style="display: flex; flex-direction: column; gap: 22px;"
                        >
                            <!-- Name + Email -->
                            <div class="name-email-row" style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
                                <div style="display: flex; flex-direction: column; gap: 8px;">
                                    <label for="cf-name" style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 13px; color: rgba(0,0,0,0.65); letter-spacing: 0.04em; text-transform: uppercase;">
                                        Your name <span style="color: #7DA371;">*</span>
                                    </label>
                                    <input id="cf-name" class="field-input" type="text" name="name" placeholder="Jane Smith" autocomplete="name" required />
                                </div>
                                <div style="display: flex; flex-direction: column; gap: 8px;">
                                    <label for="cf-email" style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 13px; color: rgba(0,0,0,0.65); letter-spacing: 0.04em; text-transform: uppercase;">
                                        Email address <span style="color: #7DA371;">*</span>
                                    </label>
                                    <input id="cf-email" class="field-input" type="email" name="email" placeholder="jane@example.com" autocomplete="email" required />
                                </div>
                            </div>

                            <!-- Phone -->
                            <div style="display: flex; flex-direction: column; gap: 8px;">
                                <label for="cf-phone" style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 13px; color: rgba(0,0,0,0.65); letter-spacing: 0.04em; text-transform: uppercase;">
                                    Phone number <span style="color: rgba(0,0,0,0.3); font-weight: 600;">(optional)</span>
                                </label>
                                <input id="cf-phone" class="field-input phone-field" type="tel" name="phone" placeholder="Optional" autocomplete="tel" style="max-width: 50%;" />
                            </div>

                            <!-- Enquiry type -->
                            <div style="display: flex; flex-direction: column; gap: 10px;">
                                <p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 13px; color: rgba(0,0,0,0.65); letter-spacing: 0.04em; text-transform: uppercase;">
                                    What is your enquiry about? <span style="color: #7DA371;">*</span>
                                </p>
                                <div class="radio-group">
                                    {[
                                        { value: "general",     label: "General enquiry" },
                                        { value: "volunteer",   label: "Volunteering" },
                                        { value: "participate", label: "Applying to participate" },
                                        { value: "sponsor",     label: "Sponsoring a pony" },
                                        { value: "donate",      label: "Donating / fundraising" },
                                        { value: "media",       label: "Press / media" },
                                    ].map(opt => (
                                        <label class="radio-label">
                                            <input type="radio" name="enquiry" value={opt.value} />
                                            <span class="radio-custom" />
                                            <span class="radio-text">{opt.label}</span>
                                        </label>
                                    ))}
                                </div>
                            </div>

                            <!-- Message -->
                            <div style="display: flex; flex-direction: column; gap: 8px;">
                                <label for="cf-message" style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 13px; color: rgba(0,0,0,0.65); letter-spacing: 0.04em; text-transform: uppercase;">
                                    Message <span style="color: #7DA371;">*</span>
                                </label>
                                <textarea id="cf-message" class="field-input" name="message" rows="5" placeholder="Tell us a bit about what you'd like to know…" style="resize: vertical; line-height: 1.6;" required></textarea>
                            </div>

                            <!-- How did you hear -->
                            <div style="display: flex; flex-direction: column; gap: 8px;">
                                <label for="cf-hear" style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 13px; color: rgba(0,0,0,0.65); letter-spacing: 0.04em; text-transform: uppercase;">
                                    How did you hear about us? <span style="color: rgba(0,0,0,0.3); font-weight: 600;">(optional)</span>
                                </label>
                                <select id="cf-hear" class="field-input" name="hear">
                                    <option value="">Select an option…</option>
                                    <option value="search">Search engine</option>
                                    <option value="social">Social media</option>
                                    <option value="word">Word of mouth</option>
                                    <option value="nhs">NHS / healthcare referral</option>
                                    <option value="school">School or college</option>
                                    <option value="other">Other</option>
                                </select>
                            </div>

                            <!-- Turnstile -->
                            {turnstileSiteKey && (
                                <div class="cf-turnstile" data-sitekey={turnstileSiteKey} />
                            )}

                            <!-- Submit -->
                            <div style="padding-top: 4px;">
                                <button
                                    type="submit"
                                    data-form-submit
                                    style="display: inline-flex; align-items: center; gap: 10px; background: #7DA371; color: #fff; border: none; border-radius: 9999px; padding: 15px 32px; font-family: 'Public Sans', sans-serif; font-weight: 800; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: opacity 0.2s ease;"
                                    onmouseover="this.style.opacity='0.88'"
                                    onmouseout="this.style.opacity='1'"
                                >
                                    Send message
                                    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                        <path d="M3 8h10M9 4l4 4-4 4"/>
                                    </svg>
                                </button>
                                <p data-form-message style="margin-top: 14px; font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 14px; color: #4a7040; line-height: 1.6;"></p>
                                <p style="margin-top: 10px; font-family: 'Public Sans', sans-serif; font-weight: 600; font-size: 13px; color: rgba(0,0,0,0.4); line-height: 1.6;">
                                    We aim to respond within a few working days.
                                </p>
                            </div>
                        </form>
                    </div>

                </div>
            </section>

            <!-- ── QUICK LINKS ── -->
            <section class="ql-section" style="background: #1e2e1a; padding: clamp(48px, 8vw, 72px) clamp(24px, 6vw, 72px);">
                <div style="max-width: 1200px; margin: 0 auto;">
                    <p style="font-family: 'Public Sans', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: #7DA371; margin-bottom: 14px;">
                        More from us
                    </p>
                    <div style="width: 36px; height: 2px; background: #7DA371; margin-bottom: 36px;" />
                    <div class="ql-grid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;">
                        <a class="ql-card" href="/volunteer-application">
                            <img class="ql-card-img" src="/Vols5-2880w-1024x768.avif" alt="Volunteers at Highland Group RDA" loading="lazy" decoding="async" />
                            <div style="position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 65%);" />
                            <div class="ql-card-band">
                                <p class="ql-card-title">Apply to volunteer</p>
                                <p class="ql-card-sub">Fill in our volunteer application form.</p>
                            </div>
                        </a>
                        <a class="ql-card" href="/participant-application">
                            <img class="ql-card-img" src="/Samantha-and-Connolly-1280.webp" alt="Participant riding at Highland Group RDA" loading="lazy" decoding="async" />
                            <div style="position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 65%);" />
                            <div class="ql-card-band">
                                <p class="ql-card-title">Apply to participate</p>
                                <p class="ql-card-sub">Find out how to join our sessions.</p>
                            </div>
                        </a>
                        <a class="ql-card" href="https://www.justgiving.com/charity/highlandgrouprda" target="_blank" rel="noreferrer">
                            <img class="ql-card-img" src="/alineofponies-1920w.webp" alt="Ponies at Highland Group RDA" loading="lazy" decoding="async" />
                            <div style="position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 65%);" />
                            <div class="ql-card-band">
                                <p class="ql-card-title">Donate</p>
                                <p class="ql-card-sub">Support us via JustGiving.</p>
                            </div>
                        </a>
                    </div>
                </div>
            </section>

        </main>
        <SiteFooter fullBleedOnMobile />
    </div>

    <script>
        const nav = document.getElementById("site-nav");
        if (nav) {
            window.addEventListener("scroll", () => {
                nav.classList.toggle("scrolled", window.scrollY > 40);
            }, { passive: true });
        }
    </script>
</BaseLayout>
