module Web.View.StaticPages.Landing where

import Web.View.Prelude

data LandingView = LandingView

instance View LandingView where
    html LandingView = [hsx|
        <div class="max-w-4xl mx-auto py-12 px-6">

            {-- Hero --}
            <div class="text-center mb-16">
                <h1 class="text-4xl font-bold text-gray-900 mb-4">inter-hub</h1>
                <p class="text-xl text-gray-600 mb-2">
                    Reference implementation of the <strong>Interaction Hub Framework (IHF)</strong>
                </p>
                <p class="text-gray-500 max-w-2xl mx-auto">
                    A governed, observable interaction substrate for hub-based AI-enabled software
                    systems. Every UI element is a governed artifact with a full traceability chain
                    from rendered widget to observed outcome.
                </p>
                <div class="mt-8 flex justify-center gap-4">
                    <a href={CapabilitiesAction}
                       class="bg-indigo-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-indigo-700 transition-colors">
                        Explore Capabilities
                    </a>
                    <a href={HubsAction}
                       class="border border-gray-300 text-gray-700 px-6 py-3 rounded-lg font-medium hover:bg-gray-50 transition-colors">
                        Go to Management UI
                    </a>
                </div>
            </div>

            {-- Traceability chain --}
            <div class="mb-16">
                <h2 class="text-2xl font-semibold text-gray-800 mb-6 text-center">Full Traceability Chain</h2>
                <div class="bg-white rounded-xl border border-gray-200 p-6">
                    <div class="flex flex-wrap items-center justify-center gap-2 text-sm font-medium">
                        {chainLink "Widget" "indigo"}
                        {arrow}
                        {chainLink "InteractionEvent" "blue"}
                        {chainLink "Annotation" "blue"}
                        {arrow}
                        {chainLink "RequirementCandidate" "violet"}
                        {arrow}
                        {chainLink "Requirement" "purple"}
                        {arrow}
                        {chainLink "DecisionRecord" "fuchsia"}
                        {arrow}
                        {chainLink "DeploymentRecord" "rose"}
                        {arrow}
                        {chainLink "OutcomeSignal" "orange"}
                        {arrow}
                        {chainLink "Learning" "emerald"}
                    </div>
                    <p class="text-center text-gray-400 text-xs mt-4">
                        Append-only event log · PostgreSQL-enforced invariants · Full lineage inspector
                    </p>
                </div>
            </div>

            {-- Key capabilities grid --}
            <div class="mb-16">
                <h2 class="text-2xl font-semibold text-gray-800 mb-6 text-center">Key Capabilities</h2>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    {capCard "Governed Widgets"
                        "Every UI element carries a stable widget-id, version history, and owner hub. Type discriminators reference a registry — no bare TEXT."
                        "indigo"}
                    {capCard "AI Agent Federation"
                        "Multi-agent routing, delegation trees, collective proposals, model selection policies, and AI governance overlays. Phase 11 complete."
                        "violet"}
                    {capCard "Continuous Learning"
                        "Outcome correlation engine, pattern performance ranking, adaptive friction thresholds, and institutional knowledge base with full-text search. Phase 12 complete."
                        "emerald"}
                    {capCard "External API Surface"
                        "REST API v2 with JWT auth, OpenAPI 3.1 spec, TypeScript + Python SDKs, webhook subscriptions, and per-consumer API keys."
                        "blue"}
                    {capCard "Hub Federation"
                        "Cross-hub propagation detection, routing rules, stewardship roles, federated policy overlays, and GAAF compliance governance."
                        "orange"}
                    {capCard "Widget Marketplace"
                        "Published widget patterns with versioned adoption, governance template library, and hub registry for domain extension discovery."
                        "rose"}
                </div>
            </div>

            {-- Status bar --}
            <div class="bg-emerald-50 border border-emerald-200 rounded-xl p-6 text-center">
                <div class="flex justify-center gap-8 text-sm">
                    <div>
                        <div class="font-bold text-emerald-700 text-lg">12 / 12</div>
                        <div class="text-emerald-600">IHF Phases Complete</div>
                    </div>
                    <div>
                        <div class="font-bold text-emerald-700 text-lg">3.68</div>
                        <div class="text-emerald-600">GAAF Score (Strong)</div>
                    </div>
                    <div>
                        <div class="font-bold text-emerald-700 text-lg">58</div>
                        <div class="text-emerald-600">Controllers</div>
                    </div>
                    <div>
                        <div class="font-bold text-emerald-700 text-lg">IHF v0.2</div>
                        <div class="text-emerald-600">Specification</div>
                    </div>
                </div>
            </div>

            {-- Nav to docs --}
            <div class="mt-10 flex justify-center gap-6 text-sm text-gray-500">
                <a href={TutorialAction} class="hover:text-indigo-600">Tutorial →</a>
                <a href={ExtensionGuideAction} class="hover:text-indigo-600">Extension Guide →</a>
                <a href={CapabilitiesAction} class="hover:text-indigo-600">Full Capabilities →</a>
            </div>
        </div>
    |]
      where
        chainLink (label :: Text) (color :: Text) = [hsx|
            <span class={("inline-block px-2 py-1 rounded text-xs bg-" <> color <> "-100 text-" <> color <> "-800 font-mono") :: Text}>
                {label}
            </span>
        |]
        arrow = [hsx|<span class="text-gray-400">→</span>|]
        capCard title_ body_ color = [hsx|
            <div class={("bg-white rounded-lg border border-gray-200 p-5 border-l-4 border-l-" <> color <> "-500") :: Text}>
                <h3 class="font-semibold text-gray-800 mb-2">{title_ :: Text}</h3>
                <p class="text-sm text-gray-600">{body_ :: Text}</p>
            </div>
        |]