import { Link } from '@inertiajs/react';
import HouseLayout from '../components/house/HouseLayout';
import InnerPageHero from '../components/house/InnerPageHero';
import { usePublicCopy } from '../components/house/publicCopy';

const MESSAGES = {
    403: {
        title: 'Access denied',
        body: 'You do not have permission to view this page. If you believe this is a mistake, contact us.',
    },
    404: {
        title: 'Page not found',
        body: 'The address may be incorrect, or the page may have moved.',
    },
    419: {
        title: 'Session expired',
        body: 'Your session has expired. Refresh the page and try again.',
    },
    422: {
        title: 'Invalid request',
        body: 'The request could not be processed. Check the details and try again.',
    },
    429: {
        title: 'Too many requests',
        body: 'Please wait a moment, then try again.',
    },
    500: {
        title: 'Something went wrong',
        body: 'We could not complete this request. Try again in a few minutes, or contact us if it continues.',
    },
};

const DEFAULT_MESSAGE = {
    title: 'Something went wrong',
    body: 'Please go back to the home page, or contact us if you still need help.',
};

export default function Error({ status = 404 }) {
    const copy = usePublicCopy();
    const code = Number(status) || 404;
    const message = MESSAGES[code] || DEFAULT_MESSAGE;
    const name = copy.highlight_name || 'Geita Bam Apartments';
    const meta = copy.highlight_meta || 'Two bedrooms';

    return (
        <HouseLayout title={message.title}>
            <InnerPageHero
                title={message.title}
                crumbs={[{ label: 'Home', href: '/' }, { label: message.title }]}
                authorName={name}
                authorMeta={meta}
            />

            <div className="contact-inner-area sp6">
                <div className="container">
                    <div className="row">
                        <div className="col-lg-8 m-auto">
                            <div className="heading1 text-center">
                                <h5>{code}</h5>
                                <div className="space20"></div>
                                <h2>{message.title}</h2>
                                <div className="space16"></div>
                                <p>{message.body}</p>
                                <div className="space32"></div>
                                <div className="btn-area1 d-flex flex-wrap justify-content-center" style={{ gap: '16px' }}>
                                    <Link href="/" className="header-btn7">Back to home <i className="fa-solid fa-arrow-right"></i></Link>
                                    <Link href="/our-apartments" className="header-btn4">Our Apartments</Link>
                                    <Link href="/contact-us" className="header-btn4">Contact Us</Link>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </HouseLayout>
    );
}