// app/stack/page.tsx

'use client';

import * as React from 'react';
import { ExternalLinkIcon } from 'lucide-react';

import { Navbar } from '@workspace/ui/components/layout';
import { Footer } from '@workspace/ui/components/layout';
import { Container } from '@workspace/ui/components/layout';
import { AnimatedSection } from '@workspace/ui/components/animate-ui/section';
import { Callout } from '@workspace/ui/components/content';
import { Badge } from '@workspace/ui/components/content';
import { Button } from '@workspace/ui/components/ui';
import { PlaceholderIcon } from '@workspace/ui/components/icons'; // Using placeholder for now

// Mock data for Core Frameworks
const CORE_FRAMEWORKS = [
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: "Nextcloud",
    description: "Your self-hosted productivity platform. Files, collaboration, office suite, and more."
  },
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: "Seafile",
    description: "High-performance file sync and sharing with robust access controls."
  },
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: "n8n",
    description: "Workflow automation. Connect your tools and data with low-code automation."
  },
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: "Keycloak",
    description: "Identity and Access Management (IAM). Single Sign-On (SSO) for all your apps."
  },
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: "PostgreSQL",
    description: "The world's most advanced open-source relational database."
  },
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: "MinIO",
    description: "High-performance, S3-compatible object storage."
  }
];

// Mock data for AI-Native Stack
const AI_NATIVE_STACK = [
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: "Local LLM Inference",
    description: "Run large language models on your own hardware for complete privacy."
  },
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: "RAG Engine",
    description: "Retrieval-Augmented Generation over your private data collections."
  },
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: "Vector DB",
    description: "Store and query embeddings for semantic search and AI applications."
  }
];

// Mock data for Integrations
const INTEGRATIONS = [
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: "SSO (SAML, OIDC)",
    description: "Seamless single sign-on with existing identity providers."
  },
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: "LDAP",
    description: "Integrate with existing directory services for user management."
  },
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: "Jira",
    description: "Link issues, automate workflows, and sync data with Jira."
  },
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: "Slack",
    description: "Send notifications, trigger workflows, and collaborate in Slack."
  },
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: "Git",
    description: "Self-host Git repositories and integrate with CI/CD pipelines."
  },
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: "API Connectors",
    description: "Pre-built connectors for hundreds of SaaS and enterprise APIs."
  }
];

export default function StackPage() {
  return (
    <div className="flex flex-col min-h-screen">
      <Navbar />
      
      {/* Hero Section */}
      <AnimatedSection className="border-b border-muted">
        <Container maxWidth="10xl">
          <div className="py-20 md:py-28">
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold">Our Stack</h1>
            <p className="mt-6 text-xl text-muted-foreground max-w-3xl">
              Proven, open-source foundations. No lock-in. No black boxes.
            </p>
          </div>
        </Container>
      </AnimatedSection>
      
      {/* Core Frameworks */}
      <AnimatedSection className="py-20 border-b border-muted">
        <Container maxWidth="10xl">
          <h2 className="text-4xl font-bold mb-16">Core Frameworks</h2>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {CORE_FRAMEWORKS.map((f, index) => (
              <div key={f.title} className="flex items-start gap-6 p-8 rounded-lg border border-muted bg-background transition-all duration-300 hover:border-foreground/20">
                <div className="flex items-center justify-center w-12 h-12 rounded-full bg-muted/50 text-primary">
                  {f.icon}
                </div>
                <div>
                  <div className="text-4xl font-light text-muted-foreground mb-2">
                    {index < 9 ? `0${index + 1}` : index + 1}
                  </div>
                  <h3 className="text-2xl font-bold">{f.title}</h3>
                  <p className="text-muted-foreground mt-2">{f.description}</p>
                </div>
              </div>
            ))}
          </div>
        </Container>
      </AnimatedSection>
      
      {/* AI-Native Stack */}
      <AnimatedSection className="py-20 border-b border-muted bg-muted/30">
        <Container maxWidth="10xl">
          <div className="flex flex-wrap items-center justify-between gap-6 mb-16">
            <h2 className="text-4xl font-bold">AI-Native</h2>
            <Badge variant="info" className="text-lg py-2 px-4">Private & Secure</Badge>
          </div>
          <p className="text-xl text-muted-foreground max-w-4xl mb-16">
            Leverage AI on your terms. All inference happens on hardware you control, over data you own. Zero leakage to third parties.
          </p>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {AI_NATIVE_STACK.map((f, index) => (
              <div key={f.title} className="flex items-start gap-6 p-8 rounded-lg border border-muted bg-background transition-all duration-300 hover:border-foreground/20">
                <div className="flex items-center justify-center w-12 h-12 rounded-full bg-muted/50 text-primary">
                  {f.icon}
                </div>
                <div>
                  <div className="text-4xl font-light text-muted-foreground mb-2">
                    {index < 9 ? `0${index + 1}` : index + 1}
                  </div>
                  <h3 className="text-2xl font-bold">{f.title}</h3>
                  <p className="text-muted-foreground mt-2">{f.description}</p>
                </div>
              </div>
            ))}
          </div>
          
          <Callout variant="info" className="mt-16 p-8 text-lg">
            <span className="font-semibold">AI Compliance:</span> Our local AI stack ensures strict adherence to data privacy regulations (GDPR, HIPAA) and eliminates risks associated with sending sensitive data to external LLM providers.
          </Callout>
        </Container>
      </AnimatedSection>
      
      {/* Integrations */}
      <AnimatedSection className="py-20 border-b border-muted">
        <Container maxWidth="10xl">
          <h2 className="text-4xl font-bold mb-16">Integrations</h2>
          <p className="text-xl text-muted-foreground max-w-4xl mb-16">
            We wire your new stack into your existing ecosystem. Connect to SSO, directories, project management, communication tools, and more.
          </p>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
            {INTEGRATIONS.map((f, index) => (
              <div key={f.title} className="flex items-start gap-6 p-8 rounded-lg border border-muted bg-background transition-all duration-300 hover:border-foreground/20">
                <div className="flex items-center justify-center w-12 h-12 rounded-full bg-muted/50 text-primary">
                  {f.icon}
                </div>
                <div>
                  <div className="text-4xl font-light text-muted-foreground mb-2">
                    {index < 9 ? `0${index + 1}` : index + 1}
                  </div>
                  <h3 className="text-2xl font-bold">{f.title}</h3>
                  <p className="text-muted-foreground mt-2">{f.description}</p>
                </div>
              </div>
            ))}
          </div>
        </Container>
      </AnimatedSection>
      
      {/* CTA Section */}
      <AnimatedSection className="py-20 border-b border-muted">
        <Container maxWidth="10xl">
          <div className="max-w-4xl mx-auto text-center">
            <h2 className="text-4xl font-bold mb-6">Want to see a specific tool?</h2>
            <p className="text-xl text-muted-foreground mb-8 max-w-3xl mx-auto">
              Our stack is flexible. If you have a specific open-source tool in mind, we can likely integrate it.
            </p>
            <Button asChild size="lg">
              <a href="/contact">
                Discuss Your Stack
                <ExternalLinkIcon className="ml-2 size-5" />
              </a>
            </Button>
          </div>
        </Container>
      </AnimatedSection>
      
      <Footer />
    </div>
  );
}