import { Link, usePage } from '@inertiajs/react';
import type { ReactNode } from 'react';
import AppLogoIcon from '@/components/app-logo-icon';
import BrandLockup from '@/components/brand-lockup';
import { DirArrow } from '@/components/dir-icon';
import { LocaleSuggestionBanner } from '@/components/locale-suggestion-banner';
import { LocaleSwitcher } from '@/components/locale-switcher';
import { Button } from '@/components/ui/button';
import { useBranding } from '@/hooks/use-branding';
import { cn } from '@/lib/utils';
import { dashboard, home, login, register } from '@/routes';
/**
* Footer link router. External URLs (anything starting with http://,
* https://, or mailto:/tel:) render as a plain so the browser handles them normally —
* Inertia would XHR-fetch the URL expecting a JSON Inertia
* response and pop its error overlay on the HTML it gets back instead
* (the "blank modal" buyer reported 2026-05-21 for the X icon). Empty
* or '#' hrefs render nothing — better than a dead button. Everything
* else stays an Inertia .
*/
function FooterLink({
href,
children,
className,
}: {
href: string;
children: ReactNode;
className?: string;
}) {
const trimmed = (href ?? '').trim();
if (trimmed === '' || trimmed === '#') {
return null;
}
const isExternal = /^(https?:|mailto:|tel:)/i.test(trimmed);
if (isExternal) {
return (
{children}
);
}
return (
{children}
);
}
/**
* Shared header + footer for every marketing page (home, pricing,
* how-it-works, privacy, terms). Keeps the navbar identical across the
* SPA so visitors don't see chrome jump when clicking between pages.
*
* Pages render their own content as children. The nav_items / footer
* blocks come from the controller as a `marketing` Inertia prop so
* MarketingHomeContent stays the single source of truth.
*/
type ContentLink = {
label: string;
href: string;
};
export type MarketingShellContent = {
nav_items: ContentLink[];
header: {
resources_label: string;
resources_href: string;
};
footer: {
brand_description: string;
socials: ContentLink[];
groups: Array<{
title: string;
links: ContentLink[];
}>;
legal_title: string;
legal_links: ContentLink[];
copyright: string;
};
};
type AuthProps = {
auth: { user?: { id: number | string } | null };
canRegister?: boolean;
demo?: boolean;
};
const pineButtonClass =
'bg-[#173f2c] text-[#f7f4ec] hover:bg-[#123322] hover:text-[#f7f4ec]';
function LogoMark({ className }: { className?: string }) {
return (
);
}
function BrandWordmark({
logoUrl,
logoDarkUrl,
siteTitle,
mode,
size = 'header',
}: {
logoUrl: string | null;
logoDarkUrl?: string | null;
siteTitle: string;
mode: 'logo_text' | 'logo_only' | 'text_only';
size?: 'header' | 'footer';
}) {
const fallbackMarkSize = size === 'header' ? 'size-8' : 'size-7';
const imageClassName =
size === 'header'
? 'h-10 w-auto max-w-[220px] object-contain'
: 'h-9 w-auto max-w-[180px] object-contain';
const titleClassName =
size === 'header'
? 'text-2xl font-semibold tracking-normal text-[#263129]'
: 'text-xl font-semibold text-[#263129]';
return (
}
/>
);
}
export function MarketingShell({
content,
children,
}: {
content: MarketingShellContent;
children: ReactNode;
}) {
const branding = useBranding();
const { auth, canRegister, demo } = usePage().props;
const hasUser = Boolean(auth.user);
const siteTitle = branding.site_title || 'Pitchbar';
const headerPrimaryLabel = hasUser ? 'Dashboard' : 'Get started';
const headerPrimaryHref = hasUser
? dashboard()
: canRegister
? register()
: login();
// Demo-mode: open auth links in a new tab so the reviewer (CodeCanyon
// buyer poking around the live preview) keeps the marketing page
// visible while they jump into the app. Auth-already case is a
// signed-in admin who's clearly past the demo flow — keep the
// dashboard link as a normal in-tab navigation.
const demoOpenInNewTab = Boolean(demo) && !hasUser;
const newTabProps = demoOpenInNewTab
? { target: '_blank' as const, rel: 'noopener noreferrer' }
: {};
return (
{/*
Locale picker — opens the same searchable modal
as the admin shell. The "marketing" variant
renders a transparent ghost pill that matches
the Login link's styling so it sits in the
marketing chrome without the dark admin token
background. Click → modal lists every locale
we ship.
*/}
{!hasUser && (
// Ghost button — same height as the primary CTA so
// the pair reads as one unit; transparent base, soft
// green wash on hover so it feels clickable without
// competing with Get started.
Login
)}