@extends('layouts.app')

@section('title', 'True Cost Calculator')
@section('meta_description',
    'Convert the price of an item into the hours and days of your life it costs to buy it. A
    financial reality check.')

@section('content')
    <div class="max-w-4xl mx-auto space-y-12" x-data="trueCost()">

        <!-- Header -->
        <div class="text-center space-y-4">
            <h1 class="text-3xl md:text-5xl font-bold text-white tracking-tight">True Cost Calculator</h1>
            <p class="text-slate-400 text-lg max-w-2xl mx-auto">
                Before you buy that new gadget, calculate how much of your life you're trading for it.
            </p>
        </div>

        <div class="grid md:grid-cols-2 gap-8 items-start">

            <!-- Input Column -->
            <div class="bg-slate-900/50 border border-white/10 rounded-3xl p-8 space-y-6">

                <!-- Annual Salary -->
                <div class="space-y-2">
                    <label class="text-sm font-medium text-slate-300">Annual Salary ($)</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 pl-4 flex items-center text-slate-500">$</span>
                        <input type="number" x-model="salary"
                            class="w-full bg-slate-950/50 border border-white/10 rounded-xl pl-8 pr-4 py-3 text-white placeholder-slate-600 focus:outline-none focus:border-emerald-500 transition-colors"
                            placeholder="50000">
                    </div>
                </div>

                <!-- Hours per Week -->
                <div class="space-y-2">
                    <label class="text-sm font-medium text-slate-300">Hours Worked Per Week</label>
                    <input type="number" x-model="hoursPerWeek"
                        class="w-full bg-slate-950/50 border border-white/10 rounded-xl px-4 py-3 text-white placeholder-slate-600 focus:outline-none focus:border-emerald-500 transition-colors">
                </div>

                <!-- Tax Rate -->
                <div class="space-y-4 pt-2">
                    <div class="flex justify-between items-center text-sm">
                        <span class="text-slate-300">Estimated Tax Rate</span>
                        <span class="text-emerald-400 font-medium" x-text="taxRate + '%'"></span>
                    </div>
                    <input type="range" min="0" max="50" step="1" x-model="taxRate"
                        class="w-full h-2 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-emerald-500">
                    <p class="text-xs text-slate-500">Deducts taxes to show your *real* take-home pay.</p>
                </div>

                <div class="border-t border-white/10 my-6"></div>

                <!-- Item Cost -->
                <div class="space-y-2">
                    <label class="text-sm font-medium text-emerald-400">Cost of Item ($)</label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 pl-4 flex items-center text-emerald-500/50">$</span>
                        <input type="number" x-model="itemCost"
                            class="w-full bg-emerald-500/10 border border-emerald-500/30 rounded-xl pl-8 pr-4 py-4 text-white text-xl font-bold placeholder-emerald-500/30 focus:outline-none focus:border-emerald-500 transition-colors"
                            placeholder="1200">
                    </div>
                </div>

            </div>

            <!-- Result Column -->
            <div class="space-y-6">

                <!-- Hourly Wage Card -->
                <div class="bg-white/5 border border-white/10 rounded-3xl p-6 flex items-center justify-between">
                    <div>
                        <p class="text-sm text-slate-400">Your Real Hourly Wage</p>
                        <p class="text-xs text-slate-600">(After taxes)</p>
                    </div>
                    <div class="text-2xl font-bold text-white">
                        $<span x-text="hourlyWage.toFixed(2)"></span><span
                            class="text-sm text-slate-500 font-normal">/hr</span>
                    </div>
                </div>

                <!-- The Cost Card -->
                <div
                    class="bg-gradient-to-br from-emerald-500/10 to-teal-500/10 border border-emerald-500/20 rounded-3xl p-8 text-center space-y-2 relative overflow-hidden">
                    <div class="absolute inset-0 bg-emerald-500/5 blur-3xl rounded-full transform scale-150"></div>

                    <p class="text-emerald-400 font-medium relative z-10 uppercase tracking-widest text-xs">This item costs
                        you</p>

                    <div class="relative z-10 py-4">
                        <span class="text-6xl md:text-7xl font-bold text-white" x-text="daysCost"></span>
                        <span class="text-xl text-emerald-200">days</span>
                    </div>

                    <p class="text-slate-300 relative z-10" x-show="hoursCost > 0">
                        Total: <strong class="text-white" x-text="hoursCost"></strong> working hours
                    </p>
                </div>

                <!-- Context -->
                <div class="bg-slate-900/50 border border-white/5 rounded-2xl p-6 text-center space-y-4"
                    x-show="itemCost > 0">
                    <p class="text-slate-300 italic">
                        "Is this item worth <span x-text="daysCost"></span> days of sitting at your desk?"
                    </p>
                    <div class="w-full bg-slate-800 rounded-full h-2 overflow-hidden">
                        <div class="bg-emerald-500 h-full rounded-full transition-all duration-1000"
                            :style="`width: ${Math.min((itemCost / (salary * (1 - taxRate/100))) * 100, 100)}%`"></div>
                    </div>
                    <p class="text-xs text-slate-500">Percentage of net annual income</p>
                </div>

            </div>

        </div>

        <!-- Info Panel -->
        <div class="mt-24 bg-slate-900/50 rounded-3xl p-8 md:p-12 border border-white/5 relative overflow-hidden">
            <div class="absolute top-0 right-0 -mr-20 -mt-20 w-80 h-80 bg-emerald-500/10 rounded-full blur-3xl"></div>

            <div class="relative z-10 grid md:grid-cols-2 gap-12">
                <div class="space-y-6">
                    <h2 class="text-2xl font-bold text-white">Why use this tool?</h2>
                    <p class="text-slate-400 leading-relaxed">
                        It's easy to swipe a credit card for a $100 dinner. Use this tool to pause and ask: <span
                            class="text-emerald-400">"Is that dinner worth 5 hours of my work?"</span>
                    </p>
                    <p class="text-slate-400 leading-relaxed">
                        By converting prices into "Life Energy" (the time you traded to earn that money), you can curb
                        impulse buying and make financial decisions that align with your values.
                    </p>
                </div>

                <div class="space-y-6">
                    <h2 class="text-2xl font-bold text-white">Who is this for?</h2>
                    <ul class="space-y-3 text-slate-400">
                        <li class="flex items-start gap-3">
                            <svg class="w-5 h-5 text-emerald-400 mt-1 shrink-0" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7">
                                </path>
                            </svg>
                            <span><strong>Impulse Buyers</strong> trying to save more money.</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <svg class="w-5 h-5 text-emerald-400 mt-1 shrink-0" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7">
                                </path>
                            </svg>
                            <span><strong>Negotiators</strong> seeing the real impact of a raise.</span>
                        </li>
                        <li class="flex items-start gap-3">
                            <svg class="w-5 h-5 text-emerald-400 mt-1 shrink-0" fill="none" stroke="currentColor"
                                viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7">
                                </path>
                            </svg>
                            <span><strong>FIRE Adherents</strong> tracking their time-value of money.</span>
                        </li>
                    </ul>
                </div>
            </div>

            <div class="mt-12 pt-8 border-t border-white/5">
                <div class="flex items-center gap-4 text-sm text-emerald-300 bg-emerald-500/10 p-4 rounded-xl">
                    <svg class="w-6 h-6 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z">
                        </path>
                    </svg>
                    <p>
                        <strong>Privacy Guarantee:</strong> This calculator runs 100% in your browser. Your salary data is
                        never sent to our servers.
                    </p>
                </div>
            </div>
        </div>

    </div>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('trueCost', () => ({
                salary: 50000,
                hoursPerWeek: 40,
                taxRate: 20,
                itemCost: 1200,

                get hourlyWage() {
                    const grossYearly = parseFloat(this.salary) || 0;
                    const taxMultiplier = 1 - (this.taxRate / 100);
                    const netYearly = grossYearly * taxMultiplier;
                    const weeklyHours = parseFloat(this.hoursPerWeek) || 40;

                    // 52 weeks in a year
                    const totalHours = weeklyHours * 52;

                    if (totalHours === 0) return 0;
                    return netYearly / totalHours;
                },

                get hoursCost() {
                    const wage = this.hourlyWage;
                    const cost = parseFloat(this.itemCost) || 0;
                    if (wage <= 0) return 0;
                    return (cost / wage).toFixed(1);
                },

                get daysCost() {
                    const hours = parseFloat(this.hoursCost);
                    const dailyHours = parseFloat(this.hoursPerWeek) / 5 || 8; // Avg hours per day
                    if (dailyHours === 0) return 0;
                    return (hours / dailyHours).toFixed(1);
                }
            }));
        });
    </script>

    {{-- Related Tools --}}
    <div class="max-w-4xl mx-auto mt-12 pt-8 border-t border-white/5">
        <p class="text-sm text-slate-500 mb-4">Related tools</p>
        <div class="flex flex-wrap gap-3">
            <a href="{{ route('tools.bulk-deal') }}"
                class="inline-flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg text-sm text-slate-300 hover:text-white transition-colors">Cost
                Per Unit Calculator</a>
            <a href="{{ route('tools.fair.share') }}"
                class="inline-flex items-center gap-2 px-4 py-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-lg text-sm text-slate-300 hover:text-white transition-colors">Fair
                Share Calculator</a>
        </div>
    </div>
@endsection