import { ContactMessageForm } from "@/components/ContactMessageForm";
import { PageHero, PlanningCard, SectionHeader } from "@/components/MpcBlocks";
import { siteConfig, emailUrl, phoneUrl } from "@/data/site";
import { JsonLd } from "@/components/JsonLd";
import { MerchantInformationBlock } from "@/components/MerchantInformationBlock";
import { breadcrumbSchema, createPageMetadata } from "@/lib/seo";
import { whatsappHref } from "@/lib/public-url";


export const dynamic = "force-dynamic";
export const metadata = createPageMetadata({
  title: "Contact Marloth Park Central | Visitor Planning Help",
  description: "Contact Marloth Park Central by email for Marloth Park accommodation enquiries, Kruger route help, visitor guides, local services and trip planning questions.",
  path: "/contact",
  image: "/images/heroes/contact-hero.webp",
  keywords: ["Marloth Park visitor guide", "Marloth Park accommodation", "Kruger near Marloth Park"],
});

export default function Page() {
  const generalEmail = emailUrl("MPC enquiry", "Hi MPC,\n\nI need help with:\n\n");
  const mainPhone = phoneUrl();
  const mainWhatsapp = whatsappHref("0790841496", "Hi MPC, I found Marloth Park Central and would like help with a Marloth Park / Kruger enquiry.");

  return (
    <main className="contact-page">
      <JsonLd data={breadcrumbSchema([{ name: "Home", path: "/" }, { name: "Contact", path: "/contact" }])} />
      <PageHero
        eyebrow="Contact MPC"
        title="Message Marloth Park Central."
        text="Send a clear email enquiry about Marloth Park, Kruger self-drive planning, guide requests, stay enquiries or local questions. MPC replies by email."
        image="/images/heroes/contact-hero.webp"
        primary={{ label: "Write a message", href: "#message-mpc" }}
        secondary={{ label: "Home", href: "/" }}
      />

      <section className="section" id="message-mpc">
        <div className="container split contact-message-split">
          <div>
            <SectionHeader
              eyebrow="Email contact"
              title="Use the message box or email MPC directly."
              text="The form prepares your message with the right details for email follow-up. If your email app does not open, send your message directly to the address below."
            />
            <div className="mpc-form-card contact-email-card">
              <h2>Contact email</h2>
              <p><a href={`mailto:${siteConfig.partnerEmail}`}>{siteConfig.partnerEmail}</a></p>
              <p>Use this address for visitor planning questions, guide requests, website support, local options, and stay enquiries.</p>
            </div>
            {mainPhone && (
              <div className="mpc-form-card contact-phone-card mpc-main-contact-card" id="mpc-main-contact-phone">
                <h2>Main MPC contact number</h2>
                <p><a href={mainPhone}>{siteConfig.contactPhoneLabel || siteConfig.contactPhoneRaw}</a></p>
                <p>Forms and email help MPC keep enquiries clear and respond with the right details. Use the main contact number only when direct contact is needed.</p>
              </div>
            )}
            <div className="mpc-form-card contact-whatsapp-card mpc-main-contact-card" id="mpc-main-whatsapp">
              <h2>Main MPC WhatsApp</h2>
              <p><a href={mainWhatsapp} target="_blank" rel="noreferrer">079 084 1496</a></p>
              <p>Use this WhatsApp number for general MPC, visitor help, local listings and planning enquiries.</p>
            </div>
            <div className="hero-actions contact-page-home-actions"><a className="btn btn-gold" href="/">Home</a><a className="btn btn-outline dark-text" href="/stay">Featured home</a></div>
            <div className="contact-card-grid">
              <PlanningCard title="Need a guide?" text="Get the free guides if you already know what you need." href="/free-guides#free-guide-gate" cta="Get the free guides" />
              <PlanningCard title="Need a place to stay?" text="Open the Marlotii Safari House page and ask about peak-season, off-peak or longer-stay availability, with final pricing confirmed after travel dates are checked." href="/stay" cta="View Marlotii Safari House" />
            </div>
          </div>
          <ContactMessageForm />
        </div>
      </section>
      <MerchantInformationBlock />
    </main>
  );
}