// app/solutions/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, Section, Grid } from '@workspace/ui/components/layout';
import { FeatureGrid } from '@workspace/ui/components/content';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@workspace/ui/components/ui';
import { Button } from '@workspace/ui/components/ui';
import { PlaceholderIcon } from '@workspace/ui/components/icons'; // Using placeholder for now

// Mock data for Industries
const INDUSTRIES = [
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: "Technology",
    description: "From SaaS startups to enterprise software, we help you scale efficiently without the cloud tax."
  },
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: "Legal",
    description: "Secure, private document management and collaboration environments with strict access controls."
  },
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: "Medical",
    description: "HIPAA-compliant infrastructure for storing, processing, and analyzing sensitive patient data."
  },
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: "Media",
    description: "High-bandwidth, low-latency solutions for content creation, storage, and distribution."
  },
  {
    icon: <PlaceholderIcon className="size-6" />,
    title: "Research",
    description: "Powerful compute and storage for data-intensive scientific research and simulations."
  }
];

export default function SolutionsPage() {
  return (
    <div className="flex flex-col min-h-screen">
      <Navbar />
      <Section className="flex-grow">
        <Container>
          <div className="text-center mb-12">
            <h1 className="text-3xl md:text-4xl font-bold">Solutions by Industry</h1>
            <p className="mt-4 text-muted-foreground max-w-2xl mx-auto">
              We tailor our approach to the unique challenges and requirements of your vertical.
            </p>
          </div>
          
          <FeatureGrid features={INDUSTRIES} columns={{ initial: 1, sm: 2, md: 3 }} />
          
          <Section background="muted" className="text-center mt-16">
            <Container>
              <h2 className="text-2xl font-bold mb-4">Don't see your industry?</h2>
              <p className="mb-6 text-muted-foreground max-w-2xl mx-auto">
                Our core principles apply broadly. Contact us to discuss how we can adapt our approach for your specific use case.
              </p>
              <Button asChild>
                <a href="/contact">
                  Contact Us
                  <ExternalLinkIcon className="ml-2 size-4" />
                </a>
              </Button>
            </Container>
          </Section>
        </Container>
      </Section>
      <Footer />
    </div>
  );
}