@extends('layouts.app')

@section('title', 'Instant Home Valuation Tool - Frantyapp')
@section('meta_description', 'Get an instant automated property valuation estimate for your house, villa, or land plot in Abuja or Lagos with Frantyapp.')

@section('content')
<div class="bg-black text-white py-16 border-b border-neutral-800">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center max-w-3xl">
        <span class="text-xs font-bold uppercase tracking-[0.3em] text-white bg-neutral-900 px-3 py-1 border border-neutral-800">Seller Lead Magnet</span>
        <h1 class="font-serif-heading font-extrabold text-3xl sm:text-5xl mt-2">Instant Automated Home Valuation</h1>
        <p class="text-gray-400 text-sm sm:text-base mt-2 font-light">Find out the estimated market value of your property or land in Abuja within seconds.</p>
    </div>
</div>

<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
    
    @if(session('valuation_result'))
        <div class="border-2 border-brand-blue bg-neutral-900 text-white p-8 mb-10 text-center shadow-2xl" data-aos="zoom-in">
            <span class="text-[10px] font-bold uppercase tracking-[0.3em] text-white">Automated Estimate Result</span>
            <h2 class="font-serif-heading font-extrabold text-4xl text-white mt-2">
                ₦{{ session('valuation_result')['value'] }}
            </h2>
            <p class="text-xs text-gray-300 mt-2 font-light">Estimated market valuation for property at <strong>{{ session('valuation_result')['address'] }}, {{ session('valuation_result')['city'] }}</strong>.</p>
            
            <div class="mt-6 pt-6 border-t border-neutral-800 flex justify-center space-x-4">
                <a href="https://wa.me/2348031234567?text=Hello%20Frantyapp,%20I%20got%20a%20valuation%20estimate%20of%20N{{ session('valuation_result')['value'] }}%20for%20my%20property%20at%20{{ urlencode(session('valuation_result')['address']) }}." target="_blank" class="px-6 py-3 bg-brand-blue text-white text-xs font-bold uppercase tracking-widest hover:bg-brand-darkblue">
                    Speak With Certified Valuation Broker
                </a>
            </div>
        </div>
    @endif

    <div class="border border-gray-200 p-8 sm:p-10 bg-white shadow-xl">
        <h3 class="font-serif-heading font-bold text-2xl text-black mb-6">Enter Property Details For Instant Estimate</h3>

        <form action="{{ route('valuation.store') }}" method="POST" class="space-y-6">
            @csrf

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">Your Full Name</label>
                    <input type="text" name="owner_name" required placeholder="John Doe" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 text-xs font-medium focus:outline-none focus:border-brand-blue">
                </div>
                <div>
                    <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">Email Address</label>
                    <input type="email" name="owner_email" required placeholder="owner@gmail.com" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 text-xs font-medium focus:outline-none focus:border-brand-blue">
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">Phone / WhatsApp</label>
                    <input type="tel" name="owner_phone" required placeholder="+234..." class="w-full px-4 py-3 bg-gray-50 border border-gray-200 text-xs font-medium focus:outline-none focus:border-brand-blue">
                </div>
                <div>
                    <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">City / State</label>
                    <select name="city" required class="w-full px-4 py-3 bg-gray-50 border border-gray-200 text-xs font-medium focus:outline-none focus:border-brand-blue">
                        <option value="Abuja">Abuja (FCT)</option>
                        <option value="Lagos">Lagos State</option>
                    </select>
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <div>
                    <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">Property Type</label>
                    <select name="property_type" required class="w-full px-4 py-3 bg-gray-50 border border-gray-200 text-xs font-medium">
                        <option value="House">House / Duplex</option>
                        <option value="Villa">Luxury Villa</option>
                        <option value="Land">Land Plot</option>
                        <option value="Apartment">Apartment</option>
                    </select>
                </div>
                <div>
                    <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">Bedrooms</label>
                    <input type="number" name="bedrooms" value="3" min="0" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 text-xs">
                </div>
                <div>
                    <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">Property Condition</label>
                    <select name="condition" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 text-xs font-medium">
                        <option value="Brand New">Brand New / Fully Finished</option>
                        <option value="Good">Good / Renovated</option>
                        <option value="Fair">Fair / Requires Touch-up</option>
                    </select>
                </div>
            </div>

            <div>
                <label class="block text-[10px] font-bold text-gray-500 uppercase tracking-widest mb-1">Street Address or District Name</label>
                <input type="text" name="property_address" required placeholder="e.g. Off Gana Street, Maitama, Abuja" class="w-full px-4 py-3 bg-gray-50 border border-gray-200 text-xs font-medium">
            </div>

            <button type="submit" class="w-full py-4 bg-brand-blue text-white text-xs font-bold uppercase tracking-[0.2em] hover:bg-brand-darkblue shadow-lg transition-colors">
                Generate Instant Valuation Estimate
            </button>
        </form>
    </div>
</div>
@endsection
