<?php if (!defined('ABSPATH')) exit; ?>
<?php
/**
 * Modern - Single Property Template
 *
 * Full-width hero gallery at top (edge-to-edge). Content below in centered
 * container. Large typography. Ample whitespace. Floating agent side panel.
 *
 * @package Integrate_Palace_Properties
 */

$prop   = new IPP_Property_Helper(get_the_ID());
$images = $prop->gallery_images('large');
?>

<?php echo $prop->schema_json_ld(); ?>

<div class="ipp-single ipp-single--modern">

    <!-- Full-width Hero Gallery -->
    <?php if (!empty($images)) : ?>
    <div class="ipp-single__gallery ipp-gallery" style="width:100vw;margin-left:calc(-50vw + 50%);position:relative;" aria-label="Property gallery">
        <div class="ipp-gallery__main">
            <img id="ipp-gallery-main-img"
                 src="<?php echo esc_url($images[0]['url']); ?>"
                 alt="<?php echo esc_attr($images[0]['alt'] ?: $prop->name()); ?>"
                 style="width:100%;max-height:70vh;object-fit:cover;display:block;">
            <?php if (count($images) > 1) : ?>
                <span class="ipp-gallery__count" style="position:absolute;bottom:1.5rem;right:1.5rem;"><?php echo esc_html(count($images)); ?> photos</span>
            <?php endif; ?>
        </div>
        <?php if (count($images) > 1) : ?>
        <div class="ipp-gallery__thumbs" role="list" aria-label="Gallery thumbnails" style="max-width:1200px;margin:1rem auto;padding:0 1rem;">
            <?php foreach ($images as $i => $img) : ?>
                <button class="ipp-gallery__thumb<?php echo $i === 0 ? ' is-active' : ''; ?>"
                        role="listitem"
                        data-full="<?php echo esc_url($img['url']); ?>"
                        data-alt="<?php echo esc_attr($img['alt'] ?: $prop->name()); ?>"
                        aria-label="View photo <?php echo esc_attr($i + 1); ?>">
                    <img src="<?php echo esc_url($img['thumb']); ?>"
                         alt="" loading="lazy"
                         style="width:100%;height:100%;object-fit:cover;">
                </button>
            <?php endforeach; ?>
        </div>
        <?php endif; ?>
    </div>
    <?php endif; ?>

    <!-- Content Container -->
    <div class="ipp-container" style="max-width:1200px;margin:0 auto;padding:3rem 1rem;display:grid;grid-template-columns:1fr 360px;gap:3rem;position:relative;">

        <div class="ipp-single__content">

            <!-- Header -->
            <header class="ipp-single__section" style="margin-bottom:3rem;">
                <?php if ($prop->show('status') && $prop->status()) : ?>
                    <span class="ipp-badge <?php echo strtolower($prop->status()) === 'active' ? 'ipp-badge--active' : 'ipp-badge--inactive'; ?>" style="margin-bottom:1rem;display:inline-block;">
                        <?php echo esc_html($prop->status()); ?>
                    </span>
                <?php endif; ?>

                <h1 style="font-size:2.5rem;line-height:1.2;margin:0 0 0.75rem;"><?php echo esc_html(get_the_title()); ?></h1>

                <?php if ($prop->show('address') && $prop->full_address()) : ?>
                    <p style="font-size:1.125rem;color:var(--ipp-color-gray-500,#6b7280);margin:0 0 1.5rem;">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="vertical-align:middle;"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>
                        <?php echo esc_html($prop->full_address()); ?>
                    </p>
                <?php endif; ?>

                <?php if ($prop->show('rent') && $prop->formatted_rent()) : ?>
                    <p style="font-size:2rem;font-weight:800;color:var(--ipp-color-primary,#2563eb);margin:0;">
                        <?php echo esc_html($prop->formatted_rent()); ?>
                        <?php if ($prop->rental_period()) : ?>
                            <span style="font-size:1rem;font-weight:400;color:var(--ipp-color-gray-500,#6b7280);">/ <?php echo esc_html($prop->rental_period()); ?></span>
                        <?php endif; ?>
                    </p>
                <?php endif; ?>

                <div class="ipp-card__meta" style="margin-top:1.5rem;font-size:1.125rem;">
                    <?php if ($prop->show('bedrooms') && $prop->bedrooms()) : ?>
                        <span class="ipp-card__meta-item" aria-label="<?php echo esc_attr($prop->bedrooms()); ?> bedrooms">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M3 7v11a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V7"/><path d="M21 11H3V9a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v2z"/><path d="M7 7V5a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2"/></svg>
                            <?php echo esc_html($prop->bedrooms()); ?> Bedrooms
                        </span>
                    <?php endif; ?>
                    <?php if ($prop->show('bathrooms') && $prop->bathrooms()) : ?>
                        <span class="ipp-card__meta-item" aria-label="<?php echo esc_attr($prop->bathrooms()); ?> bathrooms">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 12h16a1 1 0 0 1 1 1v3a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4v-3a1 1 0 0 1 1-1z"/><path d="M6 12V5a2 2 0 0 1 2-2h1"/></svg>
                            <?php echo esc_html($prop->bathrooms()); ?> Bathrooms
                        </span>
                    <?php endif; ?>
                    <?php if ($prop->show('cars') && $prop->cars()) : ?>
                        <span class="ipp-card__meta-item" aria-label="<?php echo esc_attr($prop->cars()); ?> car spaces">
                            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M5 17h14M5 17a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1l2-3h8l2 3h1a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2"/><circle cx="7.5" cy="15.5" r="1.5"/><circle cx="16.5" cy="15.5" r="1.5"/></svg>
                            <?php echo esc_html($prop->cars()); ?> Car Spaces
                        </span>
                    <?php endif; ?>
                </div>
            </header>

            <!-- Details -->
            <section class="ipp-single__section" aria-labelledby="ipp-modern-details" style="margin-bottom:3rem;">
                <h2 id="ipp-modern-details" class="ipp-single__section-title" style="font-size:1.5rem;">Property Details</h2>

                <?php
                $details = [
                    'property_code'  => ['Property Code',  $prop->property_code()],
                    'property_class' => ['Property Type',   $prop->property_class()],
                    'date_available'  => ['Available From',  $prop->formatted_date_available()],
                    'year_built'     => ['Year Built',      $prop->year_built()],
                    'stories'        => ['Stories',         $prop->stories()],
                    'furnishings'    => ['Furnishings',     $prop->furnishings()],
                    'floor_area'     => ['Floor Area',      $prop->floor_area()],
                    'land_area'      => ['Land Area',       $prop->land_area_sqm() ? $prop->land_area_sqm() . ' sqm' : ''],
                    'parking'        => ['Parking',         $prop->parking()],
                    'pets_allowed'   => ['Pets Allowed',    $prop->pets_allowed()],
                    'smokers_allowed'=> ['Smokers Allowed', $prop->smokers_allowed()],
                ];
                ?>
                <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:0;">
                    <?php foreach ($details as $key => $detail) : ?>
                        <?php if ($prop->show($key) && !empty($detail[1])) : ?>
                            <div class="ipp-single__detail-row" style="padding:0.875rem 0;border-bottom:1px solid var(--ipp-color-gray-100,#f3f4f6);">
                                <span class="ipp-single__detail-label"><?php echo esc_html($detail[0]); ?></span>
                                <span class="ipp-single__detail-value"><?php echo esc_html($detail[1]); ?></span>
                            </div>
                        <?php endif; ?>
                    <?php endforeach; ?>
                </div>
            </section>

            <!-- Features -->
            <?php if ($prop->show('feature_details') && $prop->feature_details()) : ?>
            <section class="ipp-single__section" aria-labelledby="ipp-modern-features" style="margin-bottom:3rem;">
                <h2 id="ipp-modern-features" class="ipp-single__section-title" style="font-size:1.5rem;">Features</h2>
                <ul style="list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0.5rem 2rem;">
                    <?php foreach ((array) $prop->feature_details() as $feature) : ?>
                        <li style="padding:0.5rem 0;">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--ipp-color-primary,#2563eb)" stroke-width="2.5" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>
                            <?php echo esc_html($feature); ?>
                        </li>
                    <?php endforeach; ?>
                </ul>
            </section>
            <?php endif; ?>

            <!-- Description -->
            <?php if ($prop->show('advert_text') && $prop->advert_text()) : ?>
            <section class="ipp-single__section" aria-labelledby="ipp-modern-desc" style="margin-bottom:3rem;">
                <h2 id="ipp-modern-desc" class="ipp-single__section-title" style="font-size:1.5rem;">About This Property</h2>
                <div class="ipp-single__description" style="font-size:1.0625rem;line-height:1.8;color:var(--ipp-color-gray-600,#4b5563);">
                    <?php echo wp_kses_post($prop->advert_text()); ?>
                </div>
            </section>
            <?php endif; ?>

            <!-- Virtual Tour -->
            <?php if ($prop->show('virtual_tour_url') && $prop->virtual_tour_url()) : ?>
            <section class="ipp-single__section" style="margin-bottom:3rem;">
                <h2 class="ipp-single__section-title" style="font-size:1.5rem;">Virtual Tour</h2>
                <a href="<?php echo esc_url($prop->virtual_tour_url()); ?>" target="_blank" rel="noopener noreferrer" class="ipp-btn ipp-btn--primary" style="font-size:1.0625rem;padding:0.875rem 2rem;">
                    Take a Virtual Tour
                </a>
            </section>
            <?php endif; ?>

            <!-- Map -->
            <?php if ($prop->show('geographic_location') && $prop->has_map_coords()) : ?>
            <section class="ipp-single__section" aria-labelledby="ipp-modern-map" style="margin-bottom:3rem;">
                <h2 id="ipp-modern-map" class="ipp-single__section-title" style="font-size:1.5rem;">Location</h2>
                <div class="ipp-map" style="border-radius:var(--ipp-radius,12px);overflow:hidden;">
                    <iframe src="<?php echo esc_url($prop->map_embed_url()); ?>"
                            width="100%" height="450"
                            style="border:0;display:block;"
                            allowfullscreen loading="lazy"
                            referrerpolicy="no-referrer-when-downgrade"
                            title="Property location map"></iframe>
                </div>
            </section>
            <?php endif; ?>

        </div><!-- .ipp-single__content -->

        <!-- Floating Agent Side Panel -->
        <aside class="ipp-single__sidebar" aria-label="Agent information" style="position:sticky;top:2rem;align-self:start;">
            <div class="ipp-agent" style="background:#fff;border-radius:var(--ipp-radius,12px);padding:2rem;box-shadow:0 4px 24px rgba(0,0,0,0.08);">
                <div style="width:80px;height:80px;border-radius:50%;background:var(--ipp-color-gray-100,#f3f4f6);display:flex;align-items:center;justify-content:center;margin:0 auto 1.25rem;" aria-hidden="true">
                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="var(--ipp-color-gray-400,#9ca3af)" stroke-width="1.5"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                </div>

                <?php if ($prop->agent_name()) : ?>
                    <p class="ipp-agent__name" style="text-align:center;font-size:1.25rem;font-weight:700;"><?php echo esc_html($prop->agent_name()); ?></p>
                <?php endif; ?>

                <?php if ($prop->agent_title()) : ?>
                    <p class="ipp-agent__role" style="text-align:center;color:var(--ipp-color-gray-500,#6b7280);margin-bottom:1.25rem;"><?php echo esc_html($prop->agent_title()); ?></p>
                <?php endif; ?>

                <div class="ipp-agent__contact" style="display:flex;flex-direction:column;gap:0.625rem;">
                    <?php if ($prop->agent_phone_mobile()) : ?>
                        <a href="tel:<?php echo esc_attr($prop->agent_phone_mobile()); ?>" class="ipp-agent__action" style="display:flex;align-items:center;gap:0.5rem;">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.362 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.338 1.85.573 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
                            <?php echo esc_html($prop->agent_phone_mobile()); ?>
                        </a>
                    <?php endif; ?>
                    <?php if ($prop->agent_phone_work()) : ?>
                        <a href="tel:<?php echo esc_attr($prop->agent_phone_work()); ?>" class="ipp-agent__action" style="display:flex;align-items:center;gap:0.5rem;">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><rect x="2" y="7" width="20" height="15" rx="2" ry="2"/><polyline points="17 2 12 7 7 2"/></svg>
                            <?php echo esc_html($prop->agent_phone_work()); ?>
                        </a>
                    <?php endif; ?>
                    <?php if ($prop->agent_email()) : ?>
                        <a href="mailto:<?php echo esc_attr($prop->agent_email()); ?>" class="ipp-agent__action" style="display:flex;align-items:center;gap:0.5rem;">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
                            <?php echo esc_html($prop->agent_email()); ?>
                        </a>
                    <?php endif; ?>
                </div>

                <?php if ($prop->agent_email()) : ?>
                    <a href="mailto:<?php echo esc_attr($prop->agent_email()); ?>?subject=<?php echo esc_attr('Enquiry about ' . $prop->name()); ?>"
                       class="ipp-btn ipp-btn--primary"
                       style="display:block;text-align:center;margin-top:1.5rem;padding:0.875rem;font-size:1.0625rem;">
                        Enquire Now
                    </a>
                <?php endif; ?>
            </div>
        </aside>

    </div>
</div><!-- .ipp-single -->
