@extends('layouts.site')

@section('title', 'Properties')
@section('description', 'Homes available from ' . config('app.name') . ' across Pune, by type and availability.')

@section('content')
    <section class="page-banner">
        <div>
            <span class="eyebrow">What we offer</span>
            <h1>A home for<br>every <span class="soft">stage of life.</span></h1>
            <p class="lede">From a compact studio to a family-sized three-bedroom, every property is let and managed directly by {{ config('app.name') }} - the numbers below are what's actually on the books right now.</p>
        </div>
        <div style="display:flex; flex-direction:column; gap:14px;">
            <div class="stage" id="stage">
                <canvas id="scene" aria-hidden="true"></canvas>
            </div>
            <div style="text-align:right; font-size:.78rem; color:var(--muted); padding-inline:6px;">A single residence, rendered in 3D</div>
        </div>
    </section>

    <section class="panel">
        <span class="tag">Property types</span>
        <div class="grid-3">
            @forelse ($typeCounts as $type)
                <div class="card">
                    <h3>{{ $type['name'] }}</h3>
                    <p class="num">{{ $type['available'] }} <span style="font-size:.85rem; color:var(--muted); font-weight:600;">available</span></p>
                    <p>{{ $type['total'] }} {{ Str::plural('home', $type['total']) }} of this type across the portfolio.</p>
                </div>
            @empty
                <div class="card">
                    <h3>Nothing listed yet</h3>
                    <p>Reach out and we'll let you know as soon as a property opens up.</p>
                </div>
            @endforelse
        </div>
    </section>

    @foreach ($properties as $property)
        <section class="panel">
            <div style="display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap;">
                <div>
                    <span class="tag">{{ $property->type->label() }}</span>
                    <h2 style="font-size:clamp(1.4rem, 1vw + 1.1rem, 1.9rem);">{{ $property->name }}</h2>
                    <p style="color:var(--muted); font-size:.92rem; margin-top:6px;">
                        {{ $property->city }}@if($property->state), {{ $property->state }}@endif
                        @if($property->buildings->isNotEmpty())
                            &middot; {{ $property->buildings->count() }} {{ Str::plural('building', $property->buildings->count()) }}
                        @endif
                    </p>
                </div>
                <a class="btn btn-primary" href="{{ route('contact') }}">Ask about {{ $property->name }}</a>
            </div>
        </section>
    @endforeach
@endsection

@section('scripts')
<script>
(function () {
    var container = document.getElementById('stage');
    var canvas = document.getElementById('scene');
    if (!window.THREE || !window.LakeScene || !container || !canvas) return;

    var L = window.LakeScene;
    var base = L.init(canvas, container);
    var mats = L.materials();

    // One residence: a single cutaway room with a bed and a balcony ledge,
    // simpler than the home page's twin-volume villa on purpose.
    var group = new THREE.Group();
    var w = 2.1, h = 1.5, d = 1.9;

    var room = L.shell(w, h, d, mats.wall, mats.open);
    room.position.set(0, h / 2, 0);
    group.add(room);

    var slab = L.box(w + 0.08, 0.08, d + 0.08, mats.floor);
    slab.position.set(0, 0, 0);
    group.add(slab);
    var cap = L.box(w + 0.1, 0.14, d + 0.1, mats.wall);
    cap.position.set(0, h, 0);
    group.add(cap);

    var bed = L.box(0.85, 0.22, 0.6, mats.fabric2);
    bed.position.set(-0.4, 0.11, 0.2);
    group.add(bed);
    var pillow = L.box(0.3, 0.08, 0.18, mats.wall);
    pillow.position.set(-0.4, 0.26, -0.05);
    group.add(pillow);

    var wardrobe = L.box(0.4, 0.9, 0.35, mats.timber);
    wardrobe.position.set(0.75, 0.45, -0.6);
    group.add(wardrobe);

    // balcony ledge
    var ledgeH = 0.3;
    var ledge = L.box(0.03, ledgeH, 0.5, mats.timber);
    ledge.position.set(-w / 2 - 0.02, h + ledgeH / 2, 0.6);
    group.add(ledge);
    var ledge2 = ledge.clone();
    ledge2.position.z = -0.1;
    group.add(ledge2);
    var pot = new THREE.Mesh(new THREE.CylinderGeometry(0.08, 0.06, 0.16, 10), mats.timber);
    pot.position.set(-w / 2 - 0.02, h + 0.08, 0.25);
    pot.castShadow = true;
    group.add(pot);
    group.add(L.tree(mats, -w / 2 - 0.02, 0.25, 0.5));

    group.add(L.tree(mats, 1.9, -1.4, 0.95));
    group.add(L.tree(mats, -1.9, 1.3, 0.8));

    base.scene.add(group);
    var reflection = L.groundAndReflection(base.scene, group, { groundMat: mats.ground, radius: 3.8 });

    var place = L.orbit(base.camera, new THREE.Vector3(0, 0.85, 0), 6.4, 3.4, 0.62);

    L.loop(base.renderer, base.scene, base.camera, function (t, reduceMotion) {
        if (!reduceMotion) {
            place(0.62 + Math.sin(t * 0.24) * 0.05);
            group.position.y = Math.sin(t * 0.65) * 0.018;
            reflection.position.y = -0.002 - group.position.y;
        }
    });
})();
</script>
@endsection