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

export default function Facilities() {
    const copy = usePublicCopy();
    const name = copy.highlight_name || 'Geita Bam Apartments';
    const meta = copy.highlight_meta || 'Two bedrooms';
    const location = copy.location || 'Bombambili Street, Geita Municipality, Behind EPZ';
    const facilities = copy.facilities || [];

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

            {/* ===== FACILITIES AREA STARTS ======= */}
            <div className="apartment-inner2-section-area sp7 bg2">
                <div className="container">
                    <div className="row">
                        {facilities.map((item, index) => {
                            const isWide = index % 4 === 3;
                            return (
                                <div
                                    className={isWide ? 'col-lg-8 col-md-12' : 'col-lg-4 col-md-6'}
                                    data-aos={index === 0 ? 'zoom-in' : 'zoom-in-up'}
                                    data-aos-duration={String(800 + Math.min(index, 5) * 100)}
                                    key={item.id}
                                >
                                    <div className="apartment-boxarea">
                                        <div className={isWide ? 'img2' : 'img1'}>
                                            <img src={item.image} alt={item.name} />
                                        </div>
                                        <div className="content-area">
                                            <Link href={`/facilities/${item.slug}`}>{item.name}</Link>
                                            <div className="space16"></div>
                                            <ul>
                                                <li>
                                                    <Link href={`/facilities/${item.slug}`}>
                                                        <img src="/img/icons/location1.svg" alt="" /> {location}
                                                    </Link>
                                                </li>
                                            </ul>
                                        </div>
                                        <div className={isWide ? 'arrow2' : 'arrow'}>
                                            <Link href={`/facilities/${item.slug}`}>View</Link>
                                        </div>
                                    </div>
                                </div>
                            );
                        })}
                        {facilities.length === 0 && (
                            <div className="col-lg-12">
                                <div className="heading3 text-center">
                                    <h2>No facilities yet</h2>
                                </div>
                            </div>
                        )}
                    </div>
                </div>
            </div>
            {/* ===== FACILITIES AREA ENDS ======= */}
        </HouseLayout>
    );
}