// app/process/page.tsx

'use client';

import * as React from 'react';
import { MoveUpRightIcon } 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 { Steps } from '@workspace/ui/components/content';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@workspace/ui/components/ui';
import { Button } from '@workspace/ui/components/ui';

// Mock data for Process Steps (full 6 steps)
const PROCESS_STEPS = [
  {
    title: "Discovery",
    description: "We deep-dive into your current infrastructure, workloads, and pain points.",
    youDo: "Share access to cloud billing, architecture docs, and team interviews.",
    weDo: "Analyze costs, identify waste, and map technical dependencies."
  },
  {
    title: "Shadow & Map",
    description: "We observe how your teams actually work and map desire paths.",
    youDo: "Participate in workflow observations and workshops.",
    weDo: "Document real workflows, identify automation opportunities, and draft the future state."
  },
  {
    title: "Architect",
    description: "We design a tailored, owned infrastructure solution.",
    youDo: "Review and approve the proposed architecture and migration plan.",
    weDo: "Specify hardware, select software stack, and design for performance and cost."
  },
  {
    title: "Pilot",
    description: "We build and test a critical component in the new environment.",
    youDo: "Provide feedback on performance, usability, and integration.",
    weDo: "Deploy, test, and iterate on the pilot component with your team."
  },
  {
    title: "Migrate",
    description: "We execute the planned migration with zero downtime.",
    youDo: "Validate functionality and performance post-migration.",
    weDo: "Cutover workloads, decommission old systems, and optimize the new stack."
  },
  {
    title: "Operate",
    description: "We manage the infrastructure, you focus on your core business.",
    youDo: "Use the system and provide ongoing feedback for improvements.",
    weDo: "Monitor, maintain, upgrade, and support the infrastructure 24/7."
  }
];

export default function ProcessPage() {
  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">Our Process</h1>
            <p className="mt-4 text-muted-foreground max-w-2xl mx-auto">
              A proven 6-step approach to migrate from cloud rent to owned infrastructure with minimal retraining and maximum savings.
            </p>
          </div>
          
          <Steps steps={PROCESS_STEPS} />
          
          {/* Embedding Card */}
          <Section background="muted" className="mt-16">
            <Container>
              <Card>
                <CardHeader>
                  <CardTitle className="flex items-center">
                    <span>Embedding</span>
                    <MoveUpRightIcon className="ml-2 size-5 text-primary" />
                  </CardTitle>
                </CardHeader>
                <CardContent>
                  <CardDescription>
                    We sit with your teams, map real workflows, then automate the boring.
                  </CardDescription>
                  <p className="mt-2 text-sm">
                    Our "Desire Paths" methodology ensures the system we build fits how your team actually works, not how a generic cloud platform prescribes. This minimizes retraining and maximizes adoption.
                  </p>
                  <div className="mt-4">
                    <Button variant="outline" asChild>
                      <a href="/contact">Book Discovery Call</a>
                    </Button>
                  </div>
                </CardContent>
              </Card>
            </Container>
          </Section>
        </Container>
      </Section>
      <Footer />
    </div>
  );
}