@extends('layouts.app')

@section('title', 'CSS Smooth Shadow Generator')
@section('meta_description',
    'Generate beautiful, layered CSS box shadows. Customize color, blur, spread, and layers.
    Copy ready-to-use CSS instantly.')

@section('content')
    <div class="max-w-6xl mx-auto space-y-8" x-data="shadowGenerator()">

        <!-- Header -->
        <div class="text-center space-y-4">
            <h1 class="text-3xl md:text-5xl font-bold text-white tracking-tight">CSS Smooth Shadow Generator</h1>
            <p class="text-slate-400 text-lg max-w-2xl mx-auto">
                Create beautiful, layered, and realistic box-shadows for your web projects. <br>
                Perfect forneumorphism, glassmorphism, and realistic depth effects.
            </p>
        </div>

        <div class="grid lg:grid-cols-2 gap-12 items-start">
            <!-- Left Column: Controls -->
            <div class="space-y-8">
                <div class="bg-slate-900/50 rounded-2xl border border-white/5 p-6 space-y-8">

                    <!-- Distance Slider -->
                    <div class="space-y-4">
                        <div class="flex justify-between text-sm font-medium text-slate-300">
                            <label>Distance</label>
                            <span x-text="distance + 'px'"></span>
                        </div>
                        <input type="range" min="0" max="100" x-model.number="distance"
                            class="w-full h-2 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-indigo-500">
                    </div>

                    <!-- Blur Force Slider -->
                    <div class="space-y-4">
                        <div class="flex justify-between text-sm font-medium text-slate-300">
                            <label>Blur Force</label>
                            <span x-text="blur"></span>
                        </div>
                        <input type="range" min="0" max="100" x-model.number="blur"
                            class="w-full h-2 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-indigo-500">
                    </div>

                    <!-- Intensity Slider -->
                    <div class="space-y-4">
                        <div class="flex justify-between text-sm font-medium text-slate-300">
                            <label>Intensity (Opacity)</label>
                            <span x-text="intensity/100"></span>
                        </div>
                        <input type="range" min="1" max="50" x-model.number="intensity"
                            class="w-full h-2 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-indigo-500">
                    </div>

                    <!-- Spread Slider -->
                    <div class="space-y-4">
                        <div class="flex justify-between text-sm font-medium text-slate-300">
                            <label>Spread</label>
                            <span x-text="spread + 'px'"></span>
                        </div>
                        <input type="range" min="-50" max="50" x-model.number="spread"
                            class="w-full h-2 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-indigo-500">
                    </div>

                    <!-- Layers Slider -->
                    <div class="space-y-4">
                        <div class="flex justify-between text-sm font-medium text-slate-300">
                            <label>Layers</label>
                            <span x-text="layers"></span>
                        </div>
                        <input type="range" min="1" max="10" x-model.number="layers"
                            class="w-full h-2 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-indigo-500">
                    </div>

                    <div class="grid grid-cols-2 gap-4 pt-4 border-t border-white/5">
                        <!-- Shadow Color -->
                        <div class="space-y-2">
                            <label class="text-sm font-medium text-slate-300">Shadow Color</label>
                            <div class="flex items-center gap-2">
                                <input type="color" x-model="shadowColor"
                                    class="h-10 w-10 rounded border border-white/10 bg-slate-800 cursor-pointer">
                                <span class="text-xs text-slate-400 font-mono" x-text="shadowColor"></span>
                            </div>
                        </div>

                        <!-- Preview Background -->
                        <div class="space-y-2">
                            <label class="text-sm font-medium text-slate-300">Preview Background</label>
                            <div class="flex items-center gap-2 bg-slate-800 rounded-lg p-1 border border-white/10">
                                <button @click="previewBg = 'white'"
                                    class="flex-1 py-1.5 px-3 rounded text-xs font-medium transition-colors"
                                    :class="previewBg === 'white' ? 'bg-indigo-500 text-white shadow-sm' :
                                        'text-slate-400 hover:text-white'">
                                    Light
                                </button>
                                <button @click="previewBg = 'slate'"
                                    class="flex-1 py-1.5 px-3 rounded text-xs font-medium transition-colors"
                                    :class="previewBg === 'slate' ? 'bg-indigo-500 text-white shadow-sm' :
                                        'text-slate-400 hover:text-white'">
                                    Dark
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- CSS Output -->
                <div class="bg-slate-950 rounded-xl border border-white/10 p-4 relative group">
                    <pre class="text-xs md:text-sm text-slate-300 font-mono whitespace-pre-wrap break-all"
                        x-text="`box-shadow: \n` + cssOutput + `;`"></pre>
                    <button @click="copyOutput"
                        class="absolute top-2 right-2 p-2 rounded-lg bg-white/10 text-white hover:bg-white/20 transition-colors opacity-0 group-hover:opacity-100 focus:opacity-100">
                        <svg x-show="!copied" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" />
                        </svg>
                        <svg x-show="copied" class="w-4 h-4 text-emerald-400" fill="none" stroke="currentColor"
                            viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                        </svg>
                    </button>
                </div>
            </div>

            <!-- Right Column: Preview -->
            <div class="flex items-center justify-center min-h-[400px] rounded-2xl border border-white/5 relative overflow-hidden transition-colors duration-300"
                :class="previewBg === 'white' ? 'bg-[white]' : 'bg-slate-900'">
                <!-- Background Pattern -->
                <div
                    class="absolute inset-0 opacity-10 bg-[radial-gradient(#fff_1px,transparent_1px)] [background-size:16px_16px]">
                </div>

                <!-- The Object -->
                <div class="w-48 h-48 bg-white rounded-3xl flex items-center justify-center transition-all duration-300"
                    :style="{ boxShadow: cssOutput }">
                    <span class="text-slate-900 font-bold">Element</span>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('alpine:init', () => {
            Alpine.data('shadowGenerator', () => ({
                distance: 20,
                blur: 40,
                intensity: 24,
                spread: 0,
                layers: 6,
                shadowColor: '#000000',
                previewBg: 'white',
                copied: false,

                get cssOutput() {
                    let shadows = [];
                    const rgb = this.hexToRgb(this.shadowColor);
                    // Easing logic to create smooth layers
                    for (let i = 1; i <= this.layers; i++) {
                        const progress = i / this.layers;

                        // We use a simple power curve for distance/blur to simulate light falloff
                        const y = (this.distance * Math.pow(progress, 2)).toFixed(1);
                        const b = (this.blur * Math.pow(progress, 1.5)).toFixed(
                            1); // Usually blur grows faster
                        const s = (this.spread * progress).toFixed(1);

                        // Opacity decreases for outer content
                        // But combined they create the intensity
                        // A simplified model: base alpha / layers * logic
                        const alpha = ((this.intensity / 100) * (1 - progress) + (this.intensity /
                            100) / this.layers).toFixed(3);

                        shadows.push(
                            `0px ${y}px ${b}px ${s}px rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha})`
                        );
                    }
                    return shadows.join(',\n');
                },

                hexToRgb(hex) {
                    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
                    return result ? {
                        r: parseInt(result[1], 16),
                        g: parseInt(result[2], 16),
                        b: parseInt(result[3], 16)
                    } : {
                        r: 0,
                        g: 0,
                        b: 0
                    };
                },

                copyOutput() {
                    const code = `box-shadow: \n${this.cssOutput};`;

                    if (navigator.clipboard && navigator.clipboard.writeText) {
                        navigator.clipboard.writeText(code).then(() => {
                            this.copied = true;
                            setTimeout(() => this.copied = false, 2000);
                        });
                    } else {
                        // Fallback
                        const textArea = document.createElement("textarea");
                        textArea.value = code;
                        textArea.style.position = "fixed";
                        textArea.style.left = "-9999px";
                        document.body.appendChild(textArea);
                        textArea.focus();
                        textArea.select();
                        document.execCommand('copy');
                        document.body.removeChild(textArea);
                        this.copied = true;
                        setTimeout(() => this.copied = false, 2000);
                    }
                }
            }));
        });
    </script>
    <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-indigo-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">
                    Standard CSS box-shadows often look fake and flat. To achieve a realistic, high-end look, you need to
                    layer multiple shadows with different blurs and opacities.
                </p>
                <p class="text-slate-400 leading-relaxed">
                    This tool generates a <strong>smooth, layered shadow</strong> automatically. It uses a easing curve to
                    distribute the shadow layers, mimicking how light actually falls.
                </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-indigo-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>UI Designers</strong> creating modern interfaces.</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <svg class="w-5 h-5 text-indigo-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>Frontend Devs</strong> copying ready-to-use CSS.</span>
                    </li>
                    <li class="flex items-start gap-3">
                        <svg class="w-5 h-5 text-indigo-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>No-Code Builders</strong> improving their site polish.</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-indigo-300 bg-indigo-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>Performance Note:</strong> Using too many shadow layers (e.g. 8+) can impact rendering
                    performance on older devices. 4-6 layers is usually the sweet spot.
                </p>
            </div>
        </div>
    </div>

    {{-- Related Tools --}}
    <div class="max-w-6xl 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.change-svg-color') }}"
                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">Change
                SVG Color</a>
        </div>
    </div>
@endsection