@extends('layouts.app')

@section('content')

<div class="min-h-screen bg-gradient-to-br from-purple-200 via-pink-200 to-yellow-100 py-16 relative overflow-hidden">

    <!-- ✨ Floating Gradient Circles Background -->
    <div class="absolute -top-20 -left-20 w-96 h-96 bg-gradient-to-r from-pink-300 via-purple-300 to-indigo-400 rounded-full opacity-30 animate-pulse-slow"></div>
    <div class="absolute -bottom-32 -right-32 w-96 h-96 bg-gradient-to-r from-yellow-300 via-orange-300 to-red-400 rounded-full opacity-30 animate-pulse-slow"></div>

    <div class="relative max-w-7xl mx-auto px-6">

        <!-- =======================
             ORIGINAL ABOUT CONTENT
             ======================= -->
        <div class="min-h-screen">

            <!-- SECTION 1: HERO -->
            <section class="text-center max-w-4xl mx-auto px-6">
                <h1 class="text-5xl font-extrabold text-black-700 mb-4">About Our Portfolio Builder</h1>
                <br>
                <p class="text-lg text-gray-700 leading-relaxed">
                    Welcome to our powerful <strong>Multi-User Portfolio Builder</strong> — a platform where users can
                    create stunning digital portfolios, showcase their skills, and present their achievements with ease.
                </p>
                <img src="/storage/portfolio.png" alt="About Banner" class="mx-auto mt-6 rounded-xl shadow-lg w-full max-w-3xl">
            </section>

            <!-- SECTION 2: PLATFORM FEATURES -->
            <section class="mt-16 px-6 max-w-6xl mx-auto">
                <h2 class="text-3xl font-bold text-indigo-700 text-center">Platform Features</h2>
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mt-10">

                    <div class="bg-white p-6 rounded-xl shadow">
                        <i class="fa-solid fa-user-pen text-3xl text-indigo-600"></i>
                        <h3 class="text-xl font-semibold mt-3">Profile Builder</h3>
                        <p class="text-gray-600 text-sm">Users can create personalized portfolios with detailed profiles.</p>
                    </div>

                    <div class="bg-white p-6 rounded-xl shadow">
                        <i class="fa-solid fa-layer-group text-3xl text-indigo-600"></i>
                        <h3 class="text-xl font-semibold mt-3">Projects Showcase</h3>
                        <p class="text-gray-600 text-sm">Add, edit, and display projects beautifully.</p>
                    </div>

                    <div class="bg-white p-6 rounded-xl shadow">
                        <i class="fa-solid fa-graduation-cap text-3xl text-indigo-600"></i>
                        <h3 class="text-xl font-semibold mt-3">Skills & Experience</h3>
                        <p class="text-gray-600 text-sm">Users can highlight professional skills and experience.</p>
                    </div>

                    <div class="bg-white p-6 rounded-xl shadow">
                        <i class="fa-solid fa-globe text-3xl text-indigo-600"></i>
                        <h3 class="text-xl font-semibold mt-3">Public Portfolios</h3>
                        <p class="text-gray-600 text-sm">Each user gets a public portfolio page to share globally.</p>
                    </div>

                </div>
            </section>

            <!-- SECTION 3: PLATFORM STATS -->
            <section class="mt-20 bg-white/70 backdrop-blur-xl py-12">
                <h2 class="text-3xl font-bold text-center text-indigo-700">Platform Statistics</h2>

                <div class="grid grid-cols-2 sm:grid-cols-4 gap-6 max-w-4xl mx-auto mt-10 text-center">
                    <div class="p-6 rounded-xl shadow bg-white">
                        <div class="text-4xl font-bold text-indigo-700">{{ $projectsCount ?? ($projects->count() ?? 0) }}</div>
                        <p class="text-gray-600 text-sm">Projects</p>
                    </div>

                    <div class="p-6 rounded-xl shadow bg-white">
                        <div class="text-4xl font-bold text-indigo-700">{{ $skills->count() ?? 0 }}</div>
                        <p class="text-gray-600 text-sm">Skills</p>
                    </div>

                    <div class="p-6 rounded-xl shadow bg-white">
                        <div class="text-4xl font-bold text-indigo-700">{{ $experiences->count() ?? 0 }}</div>
                        <p class="text-gray-600 text-sm">Experience Records</p>
                    </div>

                    <div class="p-6 rounded-xl shadow bg-white">
                        <div class="text-4xl font-bold text-indigo-700">{{ $users->count() ?? 0 }}</div>
                        <p class="text-gray-600 text-sm">Registered Users</p>
                    </div>
                </div>
            </section>

            <!-- SECTION 4: HOW IT WORKS -->
            <section class="mt-20 max-w-6xl mx-auto px-6">
                <h2 class="text-3xl font-bold text-indigo-700 text-center">How It Works</h2>

                <div class="grid grid-cols-1 md:grid-cols-3 gap-10 mt-12">
                    <div class="bg-white p-6 rounded-xl shadow">
                        <span class="w-12 h-12 flex items-center justify-center bg-indigo-600 text-white rounded-full">1</span>
                        <h3 class="text-xl font-semibold mt-4">Create Account</h3>
                        <p class="text-gray-600 text-sm">Sign up on our platform and get your dashboard instantly.</p>
                    </div>

                    <div class="bg-white p-6 rounded-xl shadow">
                        <span class="w-12 h-12 flex items-center justify-center bg-indigo-600 text-white rounded-full">2</span>
                        <h3 class="text-xl font-semibold mt-4">Add Portfolio Data</h3>
                        <p class="text-gray-600 text-sm">Add skills, experience, projects, and personal information.</p>
                    </div>

                    <div class="bg-white p-6 rounded-xl shadow">
                        <span class="w-12 h-12 flex items-center justify-center bg-indigo-600 text-white rounded-full">3</span>
                        <h3 class="text-xl font-semibold mt-4">Publish & Share</h3>
                        <p class="text-gray-600 text-sm">Your portfolio becomes live — share it with the world.</p>
                    </div>
                </div>
            </section>

            <!-- SECTION 5: MISSION & VISION -->
            <section class="mt-20 bg-indigo-50 py-16">
                <div class="max-w-5xl mx-auto px-6 text-center">
                    <h2 class="text-3xl font-bold text-indigo-700">Our Mission & Vision</h2>

                    <p class="mt-6 text-gray-700 leading-relaxed">
                        Our mission is to help individuals create beautiful, professional digital portfolios without
                        needing advanced technical knowledge.
                    </p>

                    <p class="mt-4 text-gray-700 leading-relaxed">
                        We aim to empower students, professionals, and freelancers with tools to showcase their work,
                        improve career opportunities, and build their online presence.
                    </p>
                </div>
            </section>

        </div>

    </div>
</div>

<style>
@keyframes pulse-slow {
    0%,100% { transform: scale(1); opacity: 0.3; }
    50% { transform: scale(1.2); opacity: 0.5; }
}
.animate-pulse-slow {
    animation: pulse-slow 10s ease-in-out infinite;
}
</style>

@endsection