@extends('layouts.site')

@section('title', 'Contact')
@section('description', 'Get in touch with ' . config('app.name') . ' about a residence in Pune.')

@section('content')
    <section class="page-banner">
        <div>
            <span class="eyebrow">Get in touch</span>
            <h1>Let's find your<br>next <span class="soft">address.</span></h1>
            <p class="lede">Tell us what you're looking for and someone from {{ config('app.name') }} will get back to you - usually the same day.</p>

            <div class="grid-2" style="margin-top:28px; max-width: 420px;">
                <div class="card" style="background:transparent; border:none; padding:0;">
                    <h3 style="font-size:.82rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.06em;">Email</h3>
                    <p style="color:var(--ink); font-size:.98rem; margin-top:6px;">hello@lakegroup.example</p>
                </div>
                <div class="card" style="background:transparent; border:none; padding:0;">
                    <h3 style="font-size:.82rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.06em;">Phone</h3>
                    <p style="color:var(--ink); font-size:.98rem; margin-top:6px;">+91 20 4567 8900</p>
                </div>
                <div class="card" style="background:transparent; border:none; padding:0;">
                    <h3 style="font-size:.82rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.06em;">Office</h3>
                    <p style="color:var(--ink); font-size:.98rem; margin-top:6px;">Pune, Maharashtra</p>
                </div>
                <div class="card" style="background:transparent; border:none; padding:0;">
                    <h3 style="font-size:.82rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.06em;">Hours</h3>
                    <p style="color:var(--ink); font-size:.98rem; margin-top:6px;">Mon-Sat, 10am-6:30pm</p>
                </div>
            </div>
        </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;">Find us, rendered in 3D</div>
        </div>
    </section>

    <section class="panel" style="max-width: 640px;">
        <span class="tag">Send an enquiry</span>

        @if (session('status'))
            <div class="form-alert success">{{ session('status') }}</div>
        @endif
        @if ($errors->any())
            <div class="form-alert error">Please check the form: {{ $errors->first() }}</div>
        @endif

        <form method="POST" action="{{ route('contact.store') }}" style="display:flex; flex-direction:column; gap:16px;">
            @csrf
            <div class="grid-2">
                <div class="field">
                    <label for="name">Full name</label>
                    <input id="name" name="name" type="text" value="{{ old('name') }}" required>
                </div>
                <div class="field">
                    <label for="phone">Phone</label>
                    <input id="phone" name="phone" type="tel" value="{{ old('phone') }}" required>
                </div>
            </div>
            <div class="field">
                <label for="email">Email (optional)</label>
                <input id="email" name="email" type="email" value="{{ old('email') }}">
            </div>
            <div class="field">
                <label for="notes">What are you looking for?</label>
                <textarea id="notes" name="notes" rows="4" placeholder="e.g. a 2 BHK in Pune, ready to move in">{{ old('notes') }}</textarea>
            </div>
            <button class="btn btn-primary" type="submit" style="align-self:flex-start;">Send enquiry</button>
        </form>
    </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 location marker: a map disc with a couple of quiet dots, and one
    // pin picked out in the brand blue standing in for our address.
    var group = new THREE.Group();

    var disc = new THREE.Mesh(new THREE.CylinderGeometry(1.7, 1.7, 0.08, 40), mats.wall);
    disc.position.y = 0.04;
    disc.receiveShadow = true;
    group.add(disc);

    [[-0.9, 0.6], [0.8, -0.5], [-0.4, -0.9], [1.0, 0.7]].forEach(function (p) {
        var dot = new THREE.Mesh(new THREE.CylinderGeometry(0.05, 0.05, 0.04, 12), mats.timber);
        dot.position.set(p[0], 0.1, p[1]);
        dot.castShadow = true;
        group.add(dot);
    });

    var pinHead = new THREE.Mesh(new THREE.SphereGeometry(0.26, 20, 20, 0, Math.PI * 2, 0, Math.PI / 1.6), mats.accent);
    pinHead.position.y = 1.05;
    pinHead.castShadow = true;
    group.add(pinHead);

    var pinTip = new THREE.Mesh(new THREE.ConeGeometry(0.26, 0.55, 20), mats.accent);
    pinTip.position.y = 0.62;
    pinTip.rotation.x = Math.PI;
    pinTip.castShadow = true;
    group.add(pinTip);

    var pinDot = L.box(0.1, 0.1, 0.02, mats.wall);
    pinDot.position.set(0, 1.05, 0.24);
    group.add(pinDot);

    group.add(L.tree(mats, -1.4, -1.0, 0.85));
    group.add(L.tree(mats, 1.4, 1.0, 0.7));

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

    var place = L.orbit(base.camera, new THREE.Vector3(0, 0.7, 0), 5.0, 3.0, 0.5);

    L.loop(base.renderer, base.scene, base.camera, function (t, reduceMotion) {
        if (!reduceMotion) {
            place(0.5 + Math.sin(t * 0.24) * 0.06);
            pinHead.position.y = 1.05 + Math.sin(t * 1.4) * 0.03;
            pinTip.position.y = 0.62 + Math.sin(t * 1.4) * 0.03;
            pinDot.position.y = 1.05 + Math.sin(t * 1.4) * 0.03;
        }
    });
})();
</script>
@endsection