@extends('layouts.app')

@section('title', 'MailCredit — Email Marketing Made Simple')

@section('content')

    {{-- Hero --}}
    <section class="relative overflow-hidden">
        {{-- Background glow --}}
        <div class="absolute inset-0 pointer-events-none">
            <div
                class="absolute top-0 left-1/2 -translate-x-1/2 w-[900px] h-[600px] bg-indigo-600/10 rounded-full blur-[120px]">
            </div>
            <div class="absolute top-32 left-1/4 w-[300px] h-[300px] bg-purple-600/10 rounded-full blur-[80px]"></div>
            <div class="absolute top-20 right-1/4 w-[250px] h-[250px] bg-pink-600/8 rounded-full blur-[80px]"></div>
        </div>

        <div class="relative max-w-7xl mx-auto px-6 pt-24 pb-20 text-center">
            <div
                class="inline-flex items-center gap-2 bg-indigo-500/10 border border-indigo-500/20 rounded-full px-4 py-2 text-sm font-semibold text-indigo-400 mb-8 fade-in">
                <span class="w-2 h-2 rounded-full bg-indigo-400 animate-pulse"></span>
                Naira-Powered Email Marketing Platform
            </div>

            <h1 class="text-5xl md:text-7xl font-black tracking-tight leading-tight mb-6 slide-up"
                style="animation-delay:.1s">
                Send Emails<br>
                <span class="gradient-text">That Convert.</span>
            </h1>

            <p class="text-lg md:text-xl text-gray-400 max-w-2xl mx-auto mb-10 font-medium slide-up"
                style="animation-delay:.2s">
                Fund your wallet in Naira, pick a beautiful template, enter your campaign details and blast targeted emails
                in minutes. Simple. Powerful. Affordable.
            </p>

            <div class="flex flex-col sm:flex-row gap-4 justify-center slide-up" style="animation-delay:.3s">
                <a href="{{ route('register') }}" class="btn-primary px-8 py-4 rounded-xl text-base font-bold text-white">
                    Start For Free →
                </a>
                <a href="{{ route('login') }}"
                    class="px-8 py-4 rounded-xl text-base font-bold text-gray-300 border border-white/10 hover:border-indigo-500/40 transition-all">
                    Sign In
                </a>
            </div>

            {{-- Stats --}}
            <div class="mt-16 grid grid-cols-3 gap-6 max-w-lg mx-auto slide-up" style="animation-delay:.4s">
                @foreach([['₦5', 'Per Email Sent'], ['99%', 'Delivery Rate'], ['24h', 'Support']] as $stat)
                    <div class="card-glass rounded-2xl p-4">
                        <div class="text-2xl font-black text-white">{{ $stat[0] }}</div>
                        <div class="text-xs text-gray-500 mt-1 font-medium">{{ $stat[1] }}</div>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    {{-- How it works --}}
    <section class="max-w-7xl mx-auto px-6 py-20">
        <div class="text-center mb-14">
            <h2 class="text-3xl md:text-4xl font-black text-white mb-3">How It Works</h2>
            <p class="text-gray-500 font-medium">Three simple steps to launch your campaign</p>
        </div>

        <div class="grid md:grid-cols-3 gap-6">
            @foreach([
                    ['01', 'Fund Your Wallet', 'Deposit Naira to your MailCredit wallet. Admin approves payments within minutes. Your balance is credited instantly.', 'from-indigo-600 to-indigo-800', 'M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z'],
                    ['02', 'Choose a Template', 'Browse our library of professionally designed email templates. Each template supports dynamic content — title, currency, amount, and date.', 'from-purple-600 to-purple-800', 'M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z'],
                    ['03', 'Send Your Campaign', 'Enter your campaign details, paste your recipient list, and hit send. Track delivery in real-time on your dashboard.', 'from-pink-600 to-pink-800', 'M12 19l9 2-9-18-9 18 9-2zm0 0v-8'],
                ] as $step)
                 <div class="card-glass rounded-2xl p-6 hover:border-white/15 transition-all group">
                    <div class="w-12 h-12 rounded-xl bg-gradient-to-br {{ $step[3] }} flex items-center justify-center mb-5 group-hover:scale-110 transition-transform">
                        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $step[4] }}"/>
                        </svg>
                    </div>
                    <div class="text-xs font-black text-gray-600 mb-2 tracking-widest">STEP {{ $step[0] }}</div>
                    <h3 class="text-lg font-black text-white mb-2">{{ $step[1] }}</h3>
                    <p class="text-sm text-gray-500 leading-relaxed font-medium">{{ $step[2] }}</p>
                </div>
            @endforeach
        </div>
    </section>

    {{-- Features --}}
    <section class="max-w-7xl mx-auto px-6 py-12">
        <div class="card-glass rounded-3xl p-8 md:p-12 relative overflow-hidden">
            <div class="absolute top-0 right-0 w-96 h-96 bg-indigo-600/5 rounded-full blur-3xl pointer-events-none"></div>
            <div class="grid md:grid-cols-2 gap-12 items-center">
                <div>
                    <h2 class="text-3xl md:text-4xl font-black text-white mb-5">

                                           Everything You Need to<br><span class="gradient-text">Reach Your Audience</span>
                    </h2>
                    <p class="text-gray-400 font-medium mb-8 leading-relaxed">
                        MailCredit gives you a powerful yet simple platform to run email campaigns with full control over your content and budget.
                    </p>

                               <div class="space-y-4">
                        @foreach([
                                'Custom HTML email templates with dynamic variables',
                                'Real-time campaign delivery tracking',
                                'Naira wallet system — fund and spend easily',
                                'Admin-approved payments for total security',
                                'Per-email billing — only pay for what you send',
                                'Bulk recipient import via paste or upload',
                            ] as $feature)
                            <div class="flex items-center gap-3">
                                <div class="w-5 h-5 rounded-full bg-indigo-500/20 flex items-center justify-center flex-shrink-0">
                                    <svg class="w-3 h-3 text-indigo-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/>
                                    </svg>
                                 </div>
                                <span class="text-sm font-semibold text-gray-300">{{ $feature }}</span>
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="grid grid-cols-2 gap-4">
                    @foreach([
                                    ['Dynamic Templates', 'Personalise every email with live data', 'text-indigo-400', 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'],
                                    ['Wallet Balance', 'Deposit Naira, spend as you go', 'text-purple-400', 'M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z'],
                                    ['Bulk Sending', 'Thousands of recipients at once', 'text-pink-400', 'M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z'],
                                    ['Live Tracking', 'Monitor sent, failed per recipient', 'text-emerald-400', 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z'],
                                ] as $feat)
                                <div class="bg-white/3 border border-white/6 rounded-2xl p-5 hover:border-white/12 transition-all">
                                    <svg class="w-6 h-6 {{ $feat[2] }} mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ $feat[3] }}"/>
                                    </svg>

                                               <div class="text-sm f
                           ont-black text-white mb-1">{{ $feat[0] }}</div>
                                    <div class="text-xs text-gray-600 font-medium">{{ $feat[1] }}</div>
                                </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

    {{-- CTA --}}
    <section class="max-w-7xl mx-auto px-6 py-20">
        <div class="text-center">
            <h2 class="text-4xl md:text-5xl font-black text-white mb-5">
                Ready to Start<br><span class="gradient-text">Sending?</span>
            </h2>
            <p class="text-gray-500 font-medium mb-8 max-w-md mx-auto">Join thousands of businesses using MailCredit to reach their audience with powerful email campaigns.</p>
            <a href="{{ route('register') }}" class="btn-primary inline-block px-10 py-4 rounded-xl text-base font-bold text-white">
                Create Free Account →
            </a>
        </div>
    </section>

@endsection