"use client"; import React, { useState, useEffect } from "react"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Mountain } from "lucide-react"; import { SignedIn, SignedOut, SignInButton, UserButton, useUser, } from "@clerk/clerk-react"; const CONFIG = { checkoutBaseUrl: "/checkout", }; // ========================= // DEFAULT EXPORT (IMPORTANT FIX) // ========================= export default function Page() { return
; } // ========================= // PLANNER // ========================= export function KilimanjaroPlanner() { const trips = [ { id: "1", name: "Machame Route", date: "June 10, 2026", price: 2400 }, { id: "2", name: "Lemosho Route", date: "June 15, 2026", price: 2600 }, ]; const buildCheckoutUrl = (trip) => { if (typeof window === "undefined") return "#"; const params = new URLSearchParams({ tripId: trip.id, route: trip.name, date: trip.date, price: String(trip.price), }); return `${CONFIG.checkoutBaseUrl}?${params.toString()}`; }; return (
Group Kilimanjaro Hikes
{trips.map((trip) => (
{trip.name}
{trip.date}
${trip.price}
{ const url = buildCheckoutUrl(trip); if (url !== "#") window.location.assign(url); }} > Reserve Trek
))}
); } // ========================= // CHECKOUT // ========================= export function CheckoutPage() { const [trip, setTrip] = useState({ route: "", date: "", price: "", groupSize: 1, }); const [form, setForm] = useState({ name: "", email: "", phone: "", }); useEffect(() => { if (typeof window === "undefined") return; const params = new URLSearchParams(window.location.search); setTrip({ route: params.get("route") || "", date: params.get("date") || "", price: params.get("price") || "", groupSize: params.get("groupSize") || 1, }); }, []); const handleChange = (e) => { const { name, value } = e.target; setForm((prev) => ({ ...prev, [name]: value })); }; const handleSubmit = async (e) => { e.preventDefault(); try { const res = await fetch("/api/create-checkout-session", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ trip, customer: form }), }); const data = await res.json(); if (data?.url) { window.location.assign(data.url); } else { console.error("No checkout URL returned"); } } catch (err) { console.error("Checkout error:", err); } }; return (
Trip Summary
{trip.route}
{trip.date}
${trip.price}
Pay
); } // ========================= // ADMIN // ========================= export function AdminDashboard() { const ADMIN_EMAIL = "your@email.com"; const [bookings] = useState([]); return (
); } function AdminContent({ ADMIN_EMAIL, bookings }) { const { user } = useUser(); const email = user?.primaryEmailAddress?.emailAddress; if (!email) return null; if (email !== ADMIN_EMAIL) { return
Access Denied
; } return (
Admin OK ({bookings.length} bookings)
); }