import Link from "next/link";
import { PageHero, SectionHeader } from "@/components/MpcBlocks";
import { SafeImage } from "@/components/SafeImage";
import { SmartCalculator } from "@/components/SmartCalculator";
import { mpcProducts } from "@/data/product-catalog";
import { featuredStay } from "@/data/stays";
import { JsonLd } from "@/components/JsonLd";
import { breadcrumbSchema, createPageMetadata } from "@/lib/seo";


export const dynamic = "force-dynamic";
export const metadata = createPageMetadata({
  title: "Marloth Park Trip Finder | Kruger & Stay Planning",
  description: "Answer five simple questions to find a clear Marloth Park visitor starting point, Kruger route direction, stay help or local planning path.",
  path: "/smart-calculator",
  image: "/images/heroes/plan-my-visit-hero.webp",
  keywords: ["Marloth Park visitor guide", "Kruger near Marloth Park", "places to stay in Marloth Park"],
});

export default function SmartCalculatorPage() {
  return (
    <main className="tripfinder-page">
      <JsonLd data={breadcrumbSchema([{ name: "Home", path: "/" }, { name: "Trip Finder", path: "/smart-calculator" }])} />
      <PageHero
        eyebrow="MPC Trip Finder"
        title="Turn your Marloth trip questions into one clear next step."
        text="Answer five easy questions, email yourself the recommendation, then choose the best free guide, Route Atlas, stay help or local-listings path."
        image="/images/heroes/plan-my-visit-hero.webp"
        primary={{ label: "Start Trip Finder", href: "#trip-finder" }}
        secondary={{ label: "Open Guide Set", href: "/free-guides" }}
      />
      <SmartCalculator products={mpcProducts} />

      <section className="section alt-soft stay-crosslink-section">
        <div className="container split">
          <div>
            <SectionHeader
              eyebrow="Need a place to stay?"
              title="After Trip Finder, match the plan to your stay question."
              text="Visitors can use Trip Finder to choose the right planning path, then send a stay enquiry with dates, traveller count and Kruger planning context. Monthly-rental interest can be asked separately when relevant."
            />
          </div>
          <Link className="mpc-image-card smart-signature-stay-card" href="/stay" aria-label="View the MPC Signature Stay">
            <div className="smart-signature-stay-image-wrap">
              <SafeImage src={featuredStay.image} alt="MPC Signature Stay exterior" className="mpc-image-card-img smart-signature-stay-img" />
              <span className="home-signature-stay-badge">MPC Signature Stay</span>
            </div>
            <div className="smart-signature-stay-copy">
              <h3>MPC Signature Marloth Park holiday home</h3>
              <p>A private Marloth Park base connected to MPC visitor help and Guide Set.</p>
              <strong className="stay-monthly-rate-pill">Short stays and monthly interest by enquiry</strong>
              <span>View stay →</span>
            </div>
          </Link>
        </div>
      </section>
    </main>
  );
}