@extends('layouts.site')

@section('title', 'Amenities')
@section('description', 'What comes with a residence at ' . config('app.name') . ' - from smart controls to shared outdoor space.')

@section('content')
    <section class="page-banner">
        <div>
            <span class="eyebrow">Amenities</span>
            <h1>Everything a home<br>needs, <span class="soft">already there.</span></h1>
            <p class="lede">A residence at {{ config('app.name') }} comes with more than four walls. Every building is designed around a shared set of amenities, so day-to-day life is easier from the day you move in.</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;">The rooftop terrace, rendered in 3D</div>
        </div>
    </section>

    <section class="panel">
        <span class="tag">Included with every residence</span>
        <div class="grid-3">
            <div class="card">
                <h3>Smart controls</h3>
                <p>Lighting, climate and door access from one app, whether you're on the sofa or on your way home.</p>
            </div>
            <div class="card">
                <h3>24/7 security</h3>
                <p>Gated entry, CCTV coverage and on-site staff around the clock - not just a camera pointed at the gate.</p>
            </div>
            <div class="card">
                <h3>Covered parking</h3>
                <p>Reserved, covered parking for residents, with visitor spaces kept separate so you're never hunting for a spot.</p>
            </div>
            <div class="card">
                <h3>Rooftop terrace</h3>
                <p>Shared outdoor space above the top floor - seating, planting and room to breathe above the street.</p>
            </div>
            <div class="card">
                <h3>Landscaped grounds</h3>
                <p>Planted courtyards and walkways maintained as part of your upkeep, not an afterthought.</p>
            </div>
            <div class="card">
                <h3>Maintenance on call</h3>
                <p>Raise a request from the resident portal and it reaches the team that actually built your building.</p>
            </div>
        </div>
    </section>

    <section class="panel" style="text-align:center;">
        <h2 style="font-size:clamp(1.4rem, 1vw + 1.1rem, 1.9rem);">Want to see it in person?</h2>
        <p style="color:var(--muted); margin-top:10px;">We'll walk you through a residence and its amenities together.</p>
        <div style="margin-top:20px;">
            <a class="btn btn-primary" href="{{ route('contact') }}">Book a tour</a>
        </div>
    </section>
@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();

    // An open-air rooftop terrace: a deck slab, a railing, and somewhere
    // to sit - no walls, since this scene is about the shared space itself.
    var group = new THREE.Group();
    var deckW = 2.6, deckD = 2.0, deckH = 0.18;

    var base1 = L.box(deckW + 0.4, 0.5, deckD + 0.4, mats.wallDeep);
    base1.position.set(0, 0.25, 0);
    group.add(base1);

    var deck = L.box(deckW, deckH, deckD, mats.floor);
    deck.position.set(0, 0.5 + deckH / 2, 0);
    group.add(deck);

    var railH = 0.32;
    var top = 0.5 + deckH;
    for (var rx = -deckW / 2 + 0.1; rx <= deckW / 2 - 0.1 + 0.001; rx += (deckW - 0.2) / 10) {
        var post = L.box(0.03, railH, 0.03, mats.timber);
        post.position.set(rx, top + railH / 2, deckD / 2);
        group.add(post);
        var post2 = post.clone();
        post2.position.z = -deckD / 2;
        group.add(post2);
    }
    var railTop = L.box(deckW, 0.03, 0.03, mats.timber);
    railTop.position.set(0, top + railH, deckD / 2);
    group.add(railTop);
    var railTop2 = railTop.clone();
    railTop2.position.z = -deckD / 2;
    group.add(railTop2);
    var railSide = L.box(0.03, railH, deckD, mats.timber);
    railSide.position.set(-deckW / 2, top + railH / 2, 0);
    group.add(railSide);
    var railSide2 = railSide.clone();
    railSide2.position.x = deckW / 2;
    group.add(railSide2);

    var lounge = L.box(0.6, 0.09, 0.26, mats.fabric1);
    lounge.position.set(-0.6, top + 0.1, 0.4);
    group.add(lounge);
    var loungeBack = L.box(0.22, 0.3, 0.26, mats.fabric1);
    loungeBack.position.set(-0.88, top + 0.2, 0.4);
    loungeBack.rotation.z = -0.3;
    group.add(loungeBack);

    var lounge2 = lounge.clone();
    lounge2.position.set(0.4, top + 0.1, -0.3);
    group.add(lounge2);
    var loungeBack2 = loungeBack.clone();
    loungeBack2.position.set(0.68, top + 0.2, -0.3);
    group.add(loungeBack2);

    var sideTable = new THREE.Mesh(new THREE.CylinderGeometry(0.09, 0.09, 0.22, 12), mats.timber);
    sideTable.position.set(-0.15, top + 0.11, 0.05);
    sideTable.castShadow = true;
    group.add(sideTable);

    var pot1 = new THREE.Mesh(new THREE.CylinderGeometry(0.1, 0.08, 0.2, 10), mats.timber);
    pot1.position.set(1.1, top + 0.1, 0.75);
    pot1.castShadow = true;
    group.add(pot1);
    var plant1 = L.tree(mats, 1.1, 0, 0.5);
    plant1.position.y = top + 0.2;
    group.add(plant1);

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

    var place = L.orbit(base.camera, new THREE.Vector3(0, top + 0.15, 0), 5.6, 3.2, 0.55);

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