@extends('layouts.site')

@section('title', 'About')
@section('description', 'The story and values behind ' . config('app.name') . ', a residential developer in Pune.')

@section('content')
    <section class="page-banner">
        <div>
            <span class="eyebrow">Our story</span>
            <h1>Built for people<br>who plan <span class="soft">to stay.</span></h1>
            <p class="lede">{{ config('app.name') }} started with a simple idea: a home should be designed by people who intend to still be answering for it a decade later. We build, let and manage every residence ourselves - no reselling the relationship to someone else once the keys are handed over.</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 portfolio, rendered in 3D</div>
        </div>
    </section>

    <section class="panel">
        <span class="tag">Where we stand today</span>
        <div class="stat-row">
            <div class="stat"><b>{{ $propertiesCount }}</b><span>Properties under management</span></div>
            <div class="stat"><b>{{ $unitsCount }}</b><span>Homes across the portfolio</span></div>
            <div class="stat"><b>{{ $citiesCount }}</b><span>{{ Str::plural('city', $citiesCount) }} served</span></div>
        </div>
    </section>

    <section class="panel">
        <span class="tag">How we work</span>
        <div class="grid-3">
            <div class="card">
                <h3>Design first</h3>
                <p>Every unit is planned around how it will actually be lived in - light, storage and layout come before finishes.</p>
            </div>
            <div class="card">
                <h3>Transparent dealings</h3>
                <p>Rent, deposits and renewal terms are laid out before you sign, and stay visible to you for as long as you live with us.</p>
            </div>
            <div class="card">
                <h3>Long-term stewardship</h3>
                <p>We manage what we build. Maintenance requests reach the same team that designed the building, not a call centre.</p>
            </div>
        </div>
    </section>

    <section class="panel" style="text-align:center;">
        <h2 style="font-size:clamp(1.4rem, 1vw + 1.1rem, 1.9rem);">Curious what that looks like in practice?</h2>
        <p style="color:var(--muted); margin-top:10px;">See what's available right now, or send us a note and we'll walk you through it.</p>
        <div style="display:flex; justify-content:center; gap:14px; margin-top:20px; flex-wrap:wrap;">
            <a class="btn btn-primary" href="{{ route('properties') }}">See properties</a>
            <a class="btn btn-ghost" href="{{ route('contact') }}">Talk to us</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();

    // A small skyline: three volumes of varying height, one picked out in
    // the brand blue, standing in for a growing portfolio rather than a
    // single address.
    var group = new THREE.Group();
    var blocks = [
        { x: -1.5, h: 1.3, w: 0.9, d: 0.9, mat: mats.wall },
        { x: 0, h: 2.0, w: 1.0, d: 1.0, mat: mats.accent },
        { x: 1.5, h: 1.6, w: 0.95, d: 0.95, mat: mats.wallDeep }
    ];
    blocks.forEach(function (b) {
        var m = L.box(b.w, b.h, b.d, b.mat);
        m.position.set(b.x, b.h / 2, 0);
        group.add(m);

        var cap = L.box(b.w + 0.06, 0.05, b.d + 0.06, mats.timber);
        cap.position.set(b.x, b.h, 0);
        group.add(cap);

        // a simple window grid on the front face
        var cols = 2, rows = Math.max(2, Math.round(b.h / 0.32));
        for (var r = 0; r < rows; r++) {
            for (var c = 0; c < cols; c++) {
                var win = L.box(0.14, 0.14, 0.02, mats.gold);
                win.position.set(
                    b.x - b.w / 4 + c * (b.w / 2),
                    0.22 + r * (b.h - 0.3) / rows,
                    b.d / 2 + 0.01
                );
                group.add(win);
            }
        }
    });

    group.add(L.tree(mats, -2.6, 0.6, 1.0));
    group.add(L.tree(mats, 2.6, 0.6, 1.0));

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

    var place = L.orbit(base.camera, new THREE.Vector3(0, 1.0, 0), 7.4, 3.6, 0.5);

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