---
import BaseLayout from "@layouts/BaseLayout.astro";
import PageHero from "@components/PageHero.astro";
import { site } from "@data/site";
import { breadcrumbSchema, pageSchema } from "@utils/schema";

const description =
  "Contact BlueCap Strategies to discuss capital formation, project strategy, partnerships, implementation, or water-sector advisory needs.";
const endpoint = import.meta.env.PUBLIC_CONTACT_FORM_ENDPOINT ?? "";
---

<BaseLayout
  title="Contact"
  description={description}
  pathname="/contact/"
  jsonLd={[
    pageSchema({ type: "ContactPage", title: "Contact", description, pathname: "/contact/" }),
    breadcrumbSchema([
      { name: "Home", href: "/" },
      { name: "Contact", href: "/contact/" },
    ]),
  ]}
>
  <PageHero
    eyebrow="Contact"
    title="Get in touch with BlueCap Strategies"
    lead="Share the opportunity, project, or water-sector challenge you are working on. BlueCap will respond through the most appropriate contact path."
    image="/assets/live-site/img_0058.jpg"
    imageAlt="Coastal water and marine resource landscape"
  />
  <section class="section contact-layout">
    <aside class="contact-panel">
      <h2>Contact Info</h2>
      <p><strong>Phone</strong><br /><a href={`tel:${site.phone.replaceAll("-", "")}`}>{site.phone}</a></p>
      <p><strong>Email</strong><br /><a href={site.contactEmailHref}>{site.email}</a></p>
      <p class="form-note">
        Discovery note: the current WordPress contact page includes placeholder phone and email
        values. This rebuild uses the verified homepage/footer contact details.
      </p>
    </aside>
    <div class="form-panel">
      <h2>Request a consultation</h2>
      <p class="form-note">
        The form is static-first and posts to the configured endpoint when
        <code>PUBLIC_CONTACT_FORM_ENDPOINT</code> is set. Without an endpoint, it opens an email
        draft after validating required fields.
      </p>
      <form class="contact-form" method="post" action={endpoint || "/thank-you/"} data-contact-form data-endpoint={endpoint}>
        <input type="hidden" name="subject" value="BlueCap Strategies website inquiry" />
        <div class="field-grid">
          <label>
            Name *
            <input name="name" autocomplete="name" required minlength="2" />
          </label>
          <label>
            Organization
            <input name="organization" autocomplete="organization" />
          </label>
        </div>
        <div class="field-grid">
          <label>
            Email *
            <input name="email" type="email" autocomplete="email" required />
          </label>
          <label>
            Phone
            <input name="phone" type="tel" autocomplete="tel" />
          </label>
        </div>
        <label>
          Message *
          <textarea name="message" required minlength="20"></textarea>
        </label>
        <button class="button" type="submit">Submit</button>
      </form>
    </div>
  </section>
  <script>
    const form = document.querySelector("[data-contact-form]");
    form?.addEventListener("submit", (event) => {
      const endpoint = form.getAttribute("data-endpoint");
      if (endpoint) return;
      event.preventDefault();
      if (!(form instanceof HTMLFormElement) || !form.reportValidity()) return;
      const data = new FormData(form);
      const subject = encodeURIComponent("BlueCap Strategies website inquiry");
      const body = encodeURIComponent(
        `Name: ${data.get("name")}\nOrganization: ${data.get("organization") ?? ""}\nEmail: ${data.get("email")}\nPhone: ${data.get("phone") ?? ""}\n\n${data.get("message")}`,
      );
      window.location.href = `mailto:${"info@bluecapstrategies.com"}?subject=${subject}&body=${body}`;
    });
  </script>
</BaseLayout>
