<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>openApps — Society of Open Systems</title>
    <link rel="canonical" href="https://apps.godsway-sackey.org/">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&family=Inter:wght@300;400;600&display=swap" rel="stylesheet">
    <style>
        body { font-family: 'Inter', sans-serif; background-color: #0f172a; color: #e2e8f0; overflow-x: hidden; }
        h1, h2, h3 { font-family: 'Space Grotesk', sans-serif; }
        
        #splash-screen {
            position: fixed; inset: 0; background: #020617; z-index: 100;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            animation: slideUp 1s cubic-bezier(0.87, 0, 0.13, 1) forwards 2.5s;
        }
        @keyframes slideUp { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-100%); opacity: 0; pointer-events: none; } }
        @keyframes fadeIn { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }

        .node { fill: #38bdf8; animation: pulse 3s infinite; }
        .link { stroke: #475569; stroke-width: 1; opacity: 0.5; }
        @keyframes pulse { 0%, 100% { opacity: 0.5; r: 2; } 50% { opacity: 1; r: 4; } }

        .glass-card {
            background: rgba(30, 41, 59, 0.4); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.05);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .glass-card:hover {
            transform: translateY(-5px); border-color: rgba(255, 255, 255, 0.2);
            background: rgba(30, 41, 59, 0.6); box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);
        }
        .ambient-glow {
            position: absolute; top: 0; left: 0; right: 0; height: 100vh;
            background: radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.1), transparent 70%);
            pointer-events: none; z-index: -1;
        }
        .reveal-1 { opacity: 0; animation: fadeIn 1s ease-out 3s forwards; }
        .reveal-2 { opacity: 0; animation: fadeIn 1s ease-out 3.2s forwards; }
        .reveal-3 { opacity: 0; animation: fadeIn 1s ease-out 3.4s forwards; }
    </style>
    <!-- Google AdSense -->
    <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4742072450184493" crossorigin="anonymous"></script>
</head>
<body class="min-h-screen flex flex-col relative">

    <div id="splash-screen">
        <svg width="120" height="120" viewBox="0 0 100 100" class="mb-6">
            <circle cx="50" cy="50" r="40" stroke="#334155" stroke-width="1" fill="none" />
            <circle cx="50" cy="50" r="20" stroke="#94a3b8" stroke-width="1" fill="none" />
            <circle cx="50" cy="20" r="4" class="node" style="animation-delay: 0s" />
            <circle cx="80" cy="50" r="4" class="node" style="animation-delay: 1s" />
            <circle cx="50" cy="80" r="4" class="node" style="animation-delay: 2s" />
            <circle cx="20" cy="50" r="4" class="node" style="animation-delay: 3s" />
            <line x1="50" y1="20" x2="80" y2="50" class="link" />
            <line x1="80" y1="50" x2="50" y2="80" class="link" />
            <line x1="50" y1="80" x2="20" y2="50" class="link" />
            <line x1="20" y1="50" x2="50" y2="20" class="link" />
        </svg>
        <h1 class="text-3xl font-bold tracking-widest text-slate-200">SOCIETY OF OPEN SYSTEMS</h1>
        <p class="text-slate-500 mt-2 text-sm font-mono">Initializing Ecosystem...</p>
    </div>

    <div class="ambient-glow"></div>

    <!-- Consulting back-link bar -->
    <div class="fixed top-0 left-0 right-0 z-50 bg-slate-950/90 backdrop-blur border-b border-slate-800 px-6 py-2 flex items-center justify-between text-xs font-mono">
        <a href="https://godsway-sackey.org" class="text-slate-400 hover:text-sky-400 transition flex items-center gap-1.5">
            <svg xmlns="http://www.w3.org/2000/svg" class="inline w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
            godsway-sackey.org
        </a>
        <span class="text-slate-600">apps.godsway-sackey.org</span>
    </div>

    <main class="flex-1 w-full max-w-7xl mx-auto px-6 pt-24 pb-20">
        
        <header class="text-center mb-16 reveal-1">
            <div class="mx-auto w-24 h-24 mb-8 relative">
                <div class="absolute inset-0 bg-blue-500/20 blur-xl rounded-full"></div>
                <svg viewBox="0 0 100 100" class="w-full h-full relative z-10">
                    <circle cx="50" cy="50" r="45" stroke="rgba(255,255,255,0.1)" stroke-width="1" fill="none" />
                    <path d="M50 10 L90 50 L50 90 L10 50 Z" stroke="rgba(56, 189, 248, 0.5)" stroke-width="1" fill="none" />
                    <circle cx="50" cy="50" r="5" fill="#38bdf8" />
                </svg>
            </div>
            <h1 class="text-5xl md:text-7xl font-bold mb-6 tracking-tight leading-tight">
                Society of <br>
                <span class="bg-clip-text text-transparent bg-gradient-to-r from-sky-400 to-indigo-400">Open Systems</span>
            </h1>
            <div class="max-w-3xl mx-auto space-y-6">
                <p class="text-xl md:text-2xl text-slate-300 font-light italic leading-relaxed">
                    "That which is created for the common good belongs to no one, and therefore, belongs to everyone."
                </p>
                <div class="h-px w-24 bg-slate-700 mx-auto"></div>
                <p class="text-slate-400 leading-relaxed text-sm md:text-base">
                    A decentralized collective building sovereign, offline-first digital infrastructure for LMICs. 
                    Radically affordable. Privacy-first.
                </p>
            </div>
        </header>

        <section class="reveal-2 mb-10 rounded-2xl border border-amber-400/35 bg-amber-500/10 p-5 md:p-6">
            <p class="text-xs font-semibold uppercase tracking-[0.2em] text-amber-300">Under Development Notice</p>
            <p class="mt-2 text-sm md:text-base text-slate-200 leading-relaxed">
                Several openApps modules are still in active development. You can explore what is live today,
                but some workflows are placeholders while we ship full releases.
            </p>
        </section>

        <h3 class="text-slate-500 font-mono text-sm uppercase tracking-widest mb-6 ml-1 reveal-2">Ecosystem Portals</h3>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16 reveal-2">
            
            <a href="/openHealth/" class="glass-card p-6 rounded-2xl group relative overflow-hidden flex flex-col justify-between min-h-[260px]">
                <div class="absolute top-0 right-0 w-48 h-48 bg-emerald-500/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 transition duration-700 group-hover:bg-emerald-500/20"></div>
                <div class="relative z-10">
                    <div class="flex items-center gap-4 mb-4">
                        <div class="p-3 bg-emerald-500/10 rounded-xl text-emerald-400"><i class="fa-solid fa-heart-pulse text-2xl"></i></div>
                        <h2 class="text-xl font-bold text-white">openHealth</h2>
                    </div>
                    <p class="text-slate-400 mb-6 text-sm">Clinical OS. From patient identity (MPI) to diagnostics and care.</p>
                </div>
                <span class="relative z-10 text-emerald-400 text-xs font-bold uppercase tracking-widest group-hover:text-emerald-300 transition flex items-center">
                    Enter Portal <i class="fa-solid fa-arrow-right ml-2 group-hover:translate-x-1 transition"></i>
                </span>
            </a>

            <a href="/openEdu/" class="glass-card p-6 rounded-2xl group relative overflow-hidden flex flex-col justify-between min-h-[260px]">
                <div class="absolute top-0 right-0 w-48 h-48 bg-sky-500/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 transition duration-700 group-hover:bg-sky-500/20"></div>
                <div class="relative z-10">
                    <div class="flex items-center gap-4 mb-4">
                        <div class="p-3 bg-sky-500/10 rounded-xl text-sky-400"><i class="fa-solid fa-graduation-cap text-2xl"></i></div>
                        <h2 class="text-xl font-bold text-white">openEdu</h2>
                    </div>
                    <p class="text-slate-400 mb-6 text-sm">Knowledge OS. School management and educational tracking.</p>
                </div>
                <span class="relative z-10 text-sky-400 text-xs font-bold uppercase tracking-widest group-hover:text-sky-300 transition flex items-center">
                    Enter Portal <i class="fa-solid fa-arrow-right ml-2 group-hover:translate-x-1 transition"></i>
                </span>
            </a>

            <a href="/openAgro/" class="glass-card p-6 rounded-2xl group relative overflow-hidden flex flex-col justify-between min-h-[260px]">
                <div class="absolute top-0 right-0 w-48 h-48 bg-green-500/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 transition duration-700 group-hover:bg-green-500/20"></div>
                <div class="relative z-10">
                    <div class="flex items-center gap-4 mb-4">
                        <div class="p-3 bg-green-500/10 rounded-xl text-green-400"><i class="fa-solid fa-leaf text-2xl"></i></div>
                        <h2 class="text-xl font-bold text-white">openAgro</h2>
                    </div>
                    <p class="text-slate-400 mb-6 text-sm">Agricultural OS. Farm management and crop tracking.</p>
                </div>
                <span class="relative z-10 text-green-400 text-xs font-bold uppercase tracking-widest group-hover:text-green-300 transition flex items-center">
                    Enter Portal <i class="fa-solid fa-arrow-right ml-2 group-hover:translate-x-1 transition"></i>
                </span>
            </a>

            <a href="/openBuilder/" class="glass-card p-6 rounded-2xl group relative overflow-hidden flex flex-col justify-between min-h-[260px]">
                <div class="absolute top-0 right-0 w-48 h-48 bg-yellow-500/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 transition duration-700 group-hover:bg-yellow-500/20"></div>
                <div class="relative z-10">
                    <div class="flex items-center gap-4 mb-4">
                        <div class="p-3 bg-yellow-500/10 rounded-xl text-yellow-400"><i class="fa-solid fa-hammer text-2xl"></i></div>
                        <h2 class="text-xl font-bold text-white">openBuilder</h2>
                    </div>
                    <p class="text-slate-400 mb-6 text-sm">Construction OS. Material tracking and project management.</p>
                </div>
                <span class="relative z-10 text-yellow-400 text-xs font-bold uppercase tracking-widest group-hover:text-yellow-300 transition flex items-center">
                    Enter Portal <i class="fa-solid fa-arrow-right ml-2 group-hover:translate-x-1 transition"></i>
                </span>
            </a>

            <a href="/openCare/" class="glass-card p-6 rounded-2xl group relative overflow-hidden flex flex-col justify-between min-h-[260px]">
                <div class="absolute top-0 right-0 w-48 h-48 bg-rose-500/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 transition duration-700 group-hover:bg-rose-500/20"></div>
                <div class="relative z-10">
                    <div class="flex items-center gap-4 mb-4">
                        <div class="p-3 bg-rose-500/10 rounded-xl text-rose-400"><i class="fa-solid fa-hand-holding-medical text-2xl"></i></div>
                        <h2 class="text-xl font-bold text-white">openCare</h2>
                    </div>
                    <p class="text-slate-400 mb-6 text-sm">Social Care OS. Connect and manage community care.</p>
                </div>
                <span class="relative z-10 text-rose-400 text-xs font-bold uppercase tracking-widest group-hover:text-rose-300 transition flex items-center">
                    Enter Portal <i class="fa-solid fa-arrow-right ml-2 group-hover:translate-x-1 transition"></i>
                </span>
            </a>

            <a href="/openChurch/" class="glass-card p-6 rounded-2xl group relative overflow-hidden flex flex-col justify-between min-h-[260px]">
                <div class="absolute top-0 right-0 w-48 h-48 bg-purple-500/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 transition duration-700 group-hover:bg-purple-500/20"></div>
                <div class="relative z-10">
                    <div class="flex items-center gap-4 mb-4">
                        <div class="p-3 bg-purple-500/10 rounded-xl text-purple-400"><i class="fa-solid fa-church text-2xl"></i></div>
                        <h2 class="text-xl font-bold text-white">openChurch</h2>
                    </div>
                    <p class="text-slate-400 mb-6 text-sm">Church OS. Manage congregation and events.</p>
                </div>
                <span class="relative z-10 text-purple-400 text-xs font-bold uppercase tracking-widest group-hover:text-purple-300 transition flex items-center">
                    Enter Portal <i class="fa-solid fa-arrow-right ml-2 group-hover:translate-x-1 transition"></i>
                </span>
            </a>

            <a href="/openForms/" class="glass-card p-6 rounded-2xl group relative overflow-hidden flex flex-col justify-between min-h-[260px]">
                <div class="absolute top-0 right-0 w-48 h-48 bg-teal-500/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 transition duration-700 group-hover:bg-teal-500/20"></div>
                <div class="relative z-10">
                    <div class="flex items-center gap-4 mb-4">
                        <div class="p-3 bg-teal-500/10 rounded-xl text-teal-400"><i class="fa-solid fa-clipboard-list text-2xl"></i></div>
                        <h2 class="text-xl font-bold text-white">openForms</h2>
                    </div>
                    <p class="text-slate-400 mb-6 text-sm">Forms OS. Dynamic community form builder.</p>
                </div>
                <span class="relative z-10 text-teal-400 text-xs font-bold uppercase tracking-widest group-hover:text-teal-300 transition flex items-center">
                    Enter Portal <i class="fa-solid fa-arrow-right ml-2 group-hover:translate-x-1 transition"></i>
                </span>
            </a>

            <a href="/openEnergy/" class="glass-card p-6 rounded-2xl group relative overflow-hidden flex flex-col justify-between min-h-[260px]">
                <div class="absolute top-0 right-0 w-48 h-48 bg-blue-600/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 transition duration-700 group-hover:bg-blue-600/20"></div>
                <div class="relative z-10">
                    <div class="flex items-center gap-4 mb-4">
                        <div class="p-3 bg-blue-600/10 rounded-xl text-blue-400"><i class="fa-solid fa-bolt text-2xl"></i></div>
                        <h2 class="text-xl font-bold text-white">openEnergy</h2>
                    </div>
                    <p class="text-slate-400 mb-6 text-sm">Energy OS. Track and manage electrical infrastructure.</p>
                </div>
                <span class="relative z-10 text-blue-400 text-xs font-bold uppercase tracking-widest group-hover:text-blue-300 transition flex items-center">
                    Enter Portal <i class="fa-solid fa-arrow-right ml-2 group-hover:translate-x-1 transition"></i>
                </span>
            </a>

            <a href="/openFashion/" class="glass-card p-6 rounded-2xl group relative overflow-hidden flex flex-col justify-between min-h-[260px]">
                <div class="absolute top-0 right-0 w-48 h-48 bg-rose-700/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 transition duration-700 group-hover:bg-rose-700/20"></div>
                <div class="relative z-10">
                    <div class="flex items-center gap-4 mb-4">
                        <div class="p-3 bg-rose-700/10 rounded-xl text-rose-400"><i class="fa-solid fa-shirt text-2xl"></i></div>
                        <h2 class="text-xl font-bold text-white">openFashion</h2>
                    </div>
                    <p class="text-slate-400 mb-6 text-sm">Style OS. Boutique and tailoring management.</p>
                </div>
                <span class="relative z-10 text-rose-400 text-xs font-bold uppercase tracking-widest group-hover:text-rose-300 transition flex items-center">
                    Enter Portal <i class="fa-solid fa-arrow-right ml-2 group-hover:translate-x-1 transition"></i>
                </span>
            </a>

            <a href="/openFinance/" class="glass-card p-6 rounded-2xl group relative overflow-hidden flex flex-col justify-between min-h-[260px]">
                <div class="absolute top-0 right-0 w-48 h-48 bg-blue-500/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 transition duration-700 group-hover:bg-blue-500/20"></div>
                <div class="relative z-10">
                    <div class="flex items-center gap-4 mb-4">
                        <div class="p-3 bg-blue-500/10 rounded-xl text-blue-400"><i class="fa-solid fa-coins text-2xl"></i></div>
                        <h2 class="text-xl font-bold text-white">openFinance</h2>
                    </div>
                    <p class="text-slate-400 mb-6 text-sm">Finance OS. Accounts, billing, and transactions.</p>
                </div>
                <span class="relative z-10 text-blue-400 text-xs font-bold uppercase tracking-widest group-hover:text-blue-300 transition flex items-center">
                    Enter Portal <i class="fa-solid fa-arrow-right ml-2 group-hover:translate-x-1 transition"></i>
                </span>
            </a>

            <a href="/openStudio/" class="glass-card p-6 rounded-2xl group relative overflow-hidden flex flex-col justify-between min-h-[260px]">
                <div class="absolute top-0 right-0 w-48 h-48 bg-indigo-500/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 transition duration-700 group-hover:bg-indigo-500/20"></div>
                <div class="relative z-10">
                    <div class="flex items-center gap-4 mb-4">
                        <div class="p-3 bg-indigo-500/10 rounded-xl text-indigo-400"><i class="fa-solid fa-camera text-2xl"></i></div>
                        <h2 class="text-xl font-bold text-white">openStudio</h2>
                    </div>
                    <p class="text-slate-400 mb-6 text-sm">Media OS. Studio management and bookings.</p>
                </div>
                <span class="relative z-10 text-indigo-400 text-xs font-bold uppercase tracking-widest group-hover:text-indigo-300 transition flex items-center">
                    Enter Portal <i class="fa-solid fa-arrow-right ml-2 group-hover:translate-x-1 transition"></i>
                </span>
            </a>

            <a href="/openTrials/" class="glass-card p-6 rounded-2xl group relative overflow-hidden flex flex-col justify-between min-h-[260px]">
                <div class="absolute top-0 right-0 w-48 h-48 bg-cyan-500/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 transition duration-700 group-hover:bg-cyan-500/20"></div>
                <div class="relative z-10">
                    <div class="flex items-center gap-4 mb-4">
                        <div class="p-3 bg-cyan-500/10 rounded-xl text-cyan-400"><i class="fa-solid fa-vial-circle-check text-2xl"></i></div>
                        <h2 class="text-xl font-bold text-white">openTrials</h2>
                    </div>
                    <p class="text-slate-400 mb-6 text-sm">Trial OS. Clinical and demographic trials.</p>
                </div>
                <span class="relative z-10 text-cyan-400 text-xs font-bold uppercase tracking-widest group-hover:text-cyan-300 transition flex items-center">
                    Enter Portal <i class="fa-solid fa-arrow-right ml-2 group-hover:translate-x-1 transition"></i>
                </span>
            </a>

            <a href="/openQuote/" class="glass-card p-6 rounded-2xl group relative overflow-hidden flex flex-col justify-between min-h-[260px]">
                <div class="absolute top-0 right-0 w-48 h-48 bg-sky-500/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 transition duration-700 group-hover:bg-sky-500/20"></div>
                <div class="relative z-10">
                    <div class="flex items-center gap-4 mb-4">
                        <div class="p-3 bg-sky-500/10 rounded-xl text-sky-400"><i class="fa-solid fa-file-invoice text-2xl"></i></div>
                        <h2 class="text-xl font-bold text-white">openQuote</h2>
                    </div>
                    <p class="text-slate-400 mb-6 text-sm">Estimates OS. Provide rapid pricing and quotes.</p>
                </div>
                <span class="relative z-10 text-sky-400 text-xs font-bold uppercase tracking-widest group-hover:text-sky-300 transition flex items-center">
                    Enter Portal <i class="fa-solid fa-arrow-right ml-2 group-hover:translate-x-1 transition"></i>
                </span>
            </a>

            <a href="/openShop/" class="glass-card p-6 rounded-2xl group relative overflow-hidden flex flex-col justify-between min-h-[260px]">
                <div class="absolute top-0 right-0 w-48 h-48 bg-violet-500/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 transition duration-700 group-hover:bg-violet-500/20"></div>
                <div class="relative z-10">
                    <div class="flex items-center gap-4 mb-4">
                        <div class="p-3 bg-violet-500/10 rounded-xl text-violet-400"><i class="fa-solid fa-store text-2xl"></i></div>
                        <h2 class="text-xl font-bold text-white">openShop</h2>
                    </div>
                    <p class="text-slate-400 mb-6 text-sm">Retail OS. Inventory and storefront management.</p>
                </div>
                <span class="relative z-10 text-violet-400 text-xs font-bold uppercase tracking-widest group-hover:text-violet-300 transition flex items-center">
                    Enter Portal <i class="fa-solid fa-arrow-right ml-2 group-hover:translate-x-1 transition"></i>
                </span>
            </a>

            <a href="/openXpens/" class="glass-card p-6 rounded-2xl group relative overflow-hidden flex flex-col justify-between min-h-[260px]">
                <div class="absolute top-0 right-0 w-48 h-48 bg-red-600/10 rounded-full blur-3xl -translate-y-1/2 translate-x-1/2 transition duration-700 group-hover:bg-red-600/20"></div>
                <div class="relative z-10">
                    <div class="flex items-center gap-4 mb-4">
                        <div class="p-3 bg-red-600/10 rounded-xl text-red-400"><i class="fa-solid fa-money-bill-transfer text-2xl"></i></div>
                        <h2 class="text-xl font-bold text-white">openXpens</h2>
                    </div>
                    <p class="text-slate-400 mb-6 text-sm">Expense OS. Track costs and ledger entries.</p>
                </div>
                <span class="relative z-10 text-red-400 text-xs font-bold uppercase tracking-widest group-hover:text-red-300 transition flex items-center">
                    Enter Portal <i class="fa-solid fa-arrow-right ml-2 group-hover:translate-x-1 transition"></i>
                </span>
            </a>
        </div>

        <section class="reveal-3 mb-8 rounded-2xl border border-slate-700/80 bg-slate-900/80 p-5 md:p-6">
            <div class="flex flex-wrap items-start justify-between gap-4 mb-4">
                <div>
                    <h3 class="text-lg md:text-xl font-bold text-white">Send Feedback Or Feature Requests</h3>
                    <p class="text-sm text-slate-400 mt-1">Responses go directly to WhatsApp for now.</p>
                </div>
                <p class="text-xs font-mono uppercase tracking-wider text-slate-500">WhatsApp: +233269609634</p>
            </div>
            <form id="feedback-form" class="grid grid-cols-1 md:grid-cols-2 gap-3">
                <input id="feedback-name" type="text" placeholder="Your name" class="w-full rounded-xl border border-slate-700 bg-slate-950 px-4 py-3 text-sm text-slate-200 placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-sky-500" required>
                <input id="feedback-app" type="text" placeholder="App name (e.g. openHealth, openTrials)" class="w-full rounded-xl border border-slate-700 bg-slate-950 px-4 py-3 text-sm text-slate-200 placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-sky-500" required>
                <select id="feedback-type" class="w-full rounded-xl border border-slate-700 bg-slate-950 px-4 py-3 text-sm text-slate-200 focus:outline-none focus:ring-2 focus:ring-sky-500" required>
                    <option value="" disabled selected>Select message type</option>
                    <option value="Feedback">Feedback</option>
                    <option value="Feature Request">Feature Request</option>
                    <option value="Bug Report">Bug Report</option>
                </select>
                <input id="feedback-contact" type="text" placeholder="Contact (optional)" class="w-full rounded-xl border border-slate-700 bg-slate-950 px-4 py-3 text-sm text-slate-200 placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-sky-500">
                <textarea id="feedback-message" placeholder="Share details..." rows="5" class="md:col-span-2 w-full rounded-xl border border-slate-700 bg-slate-950 px-4 py-3 text-sm text-slate-200 placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-sky-500" required></textarea>
                <button type="submit" class="md:col-span-2 inline-flex items-center justify-center gap-2 rounded-xl bg-sky-500 px-5 py-3 text-sm font-semibold text-slate-950 hover:bg-sky-400 transition">
                    Send To WhatsApp <i class="fa-brands fa-whatsapp"></i>
                </button>
            </form>
        </section>



    </main>

    <footer class="border-t border-slate-800 bg-slate-950 py-8 px-6 text-center reveal-3">
        <p class="text-xs text-slate-500 max-w-2xl mx-auto mb-2">
            <strong class="text-slate-400">DISCLAIMER:</strong> The Society of Open Systems is a decentralized collective. We have no formal corporate ties. Software is provided "as is" for the common good.
        </p>
        <p class="text-[10px] text-slate-600 font-mono uppercase mb-3">© 2026 SOCIETY OF OPEN SYSTEMS</p>
        <p class="text-[10px] text-slate-700">
            Built by <a href="https://godsway-sackey.org" class="text-slate-500 hover:text-sky-400 transition">Godsway Sackey</a> · Solutions Architect
        </p>
    </footer>

    <script>
        const FEEDBACK_WHATSAPP = '233269609634';
        const form = document.getElementById('feedback-form');

        if (form) {
            form.addEventListener('submit', (event) => {
                event.preventDefault();
                const name = document.getElementById('feedback-name').value.trim();
                const app = document.getElementById('feedback-app').value.trim();
                const type = document.getElementById('feedback-type').value;
                const contact = document.getElementById('feedback-contact').value.trim() || 'Not provided';
                const message = document.getElementById('feedback-message').value.trim();

                const payload = [
                    'openApps Feedback',
                    `Type: ${type}`,
                    `App: ${app}`,
                    `Name: ${name}`,
                    `Contact: ${contact}`,
                    '',
                    message,
                ].join('\n');

                const url = `https://wa.me/${FEEDBACK_WHATSAPP}?text=${encodeURIComponent(payload)}`;
                window.open(url, '_blank', 'noopener,noreferrer');
            });
        }
    </script>

</body>
</html>