// app/process/page.tsx

'use client';

import * as React from '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 { Steps } from '@workspace/ui/components/content';
import { FinalCTASection } from '@workspace/ui/components/content';
import { Badge } from '@workspace/ui/components/content';
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from '@workspace/ui/components/ui';
import Image from 'next/image';

// 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 />

      {/* Hero Section – distinct gradient band to differentiate from Solutions */}
      <AnimatedSection className="bg-gradient-to-b from-muted/30 to-transparent border-b border-muted">
        <Container maxWidth="10xl">
          <div className="py-20 md:py-28">
            <div className="flex flex-wrap gap-2">
              <Badge variant="outline">Desire Paths</Badge>
              <Badge variant="outline">Zero-Downtime Migration</Badge>
              <Badge variant="outline">SRE-Managed</Badge>
            </div>
            <h1 className="mt-6 text-4xl md:text-5xl lg:text-6xl font-bold">
              Our Process
            </h1>
            <p className="mt-6 text-xl text-muted-foreground max-w-3xl">
              A six-step path from audit to steady-state operations—minimizing
              retraining, maximizing savings.
            </p>
          </div>
        </Container>
      </AnimatedSection>

      {/* Process Diagram (optional image placeholder) */}
      <AnimatedSection className="py-16 border-b border-muted">
        <Container maxWidth="10xl">
          <Card className="border-muted">
            <CardHeader>
              <CardTitle>Process diagram</CardTitle>
            </CardHeader>
            <CardContent>
              <div className="relative w-full h-64 md:h-80 lg:h-96">
                <Image
                  src="/process/process-diagram.webp"
                  alt="Six-step migration process diagram"
                  fill
                  sizes="100vw"
                  className="object-cover rounded-sm"
                />
              </div>
            </CardContent>
          </Card>
        </Container>
      </AnimatedSection>

      {/* Process Steps with phase legend */}
      <AnimatedSection className="py-20 border-b border-muted">
        <Container maxWidth="10xl">
          {/* Phase legend */}
          <div className="mb-10 grid grid-cols-1 md:grid-cols-3 gap-4">
            <div className="rounded-sm border border-muted p-4 bg-background/50">
              <div className="text-xs tracking-wide text-muted-foreground">
                Phase 1
              </div>
              <div className="mt-1 font-semibold">Discover & Map</div>
              <div className="mt-2 text-sm text-muted-foreground">
                Steps 1–2
              </div>
            </div>
            <div className="rounded-sm border border-muted p-4 bg-background/50">
              <div className="text-xs tracking-wide text-muted-foreground">
                Phase 2
              </div>
              <div className="mt-1 font-semibold">Design & Pilot</div>
              <div className="mt-2 text-sm text-muted-foreground">
                Steps 3–4
              </div>
            </div>
            <div className="rounded-sm border border-muted p-4 bg-background/50">
              <div className="text-xs tracking-wide text-muted-foreground">
                Phase 3
              </div>
              <div className="mt-1 font-semibold">Migrate & Operate</div>
              <div className="mt-2 text-sm text-muted-foreground">
                Steps 5–6
              </div>
            </div>
          </div>
          <Steps steps={PROCESS_STEPS} />
        </Container>
      </AnimatedSection>

      {/* Deliverables */}
      <AnimatedSection className="py-20 border-b border-muted">
        <Container maxWidth="10xl">
          <h2 className="text-3xl font-bold mb-8">Key Deliverables</h2>
          <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
            <Card>
              <CardHeader>
                <CardTitle>Architecture Blueprint</CardTitle>
              </CardHeader>
              <CardContent className="text-muted-foreground">
                Hardware spec, network plan, security model, and service layout
                mapped to your workloads.
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <CardTitle>Migration Plan</CardTitle>
              </CardHeader>
              <CardContent className="text-muted-foreground">
                Sequenced cutover with rollback points, data move playbooks, and
                testing gates.
              </CardContent>
            </Card>
            <Card>
              <CardHeader>
                <CardTitle>Runbook & SLOs</CardTitle>
              </CardHeader>
              <CardContent className="text-muted-foreground">
                Operability docs, monitoring dashboards, on-call rotations, and
                measurable service objectives.
              </CardContent>
            </Card>
          </div>
        </Container>
      </AnimatedSection>

      {/* Engagement Model */}
      <AnimatedSection className="py-20 bg-muted/30 border-y border-muted">
        <Container maxWidth="10xl">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
            <Card className="border-muted">
              <CardHeader>
                <CardTitle>Embedded With You</CardTitle>
              </CardHeader>
              <CardContent className="text-muted-foreground space-y-2">
                <p>
                  Weekly working sessions, async updates, and direct
                  engineer-to-engineer channels.
                </p>
                <p>
                  We map desire paths, automate toil, and keep your stack
                  familiar.
                </p>
              </CardContent>
            </Card>
            <Card className="border-muted">
              <CardHeader>
                <CardTitle>Support & Ops</CardTitle>
              </CardHeader>
              <CardContent className="text-muted-foreground space-y-2">
                <p>
                  24/7 monitoring, upgrades, and incident response handled by
                  our SREs.
                </p>
                <p>
                  You own the hardware and data; we keep it healthy and fast.
                </p>
              </CardContent>
            </Card>
          </div>
        </Container>
      </AnimatedSection>

      {/* Final CTA */}
      <AnimatedSection className="py-20 border-b border-muted">
        <Container maxWidth="10xl">
          <FinalCTASection
            title="Ready to kick off discovery?"
            description="We’ll audit your spend, map your workflows, and design the fastest path to break-even."
            primaryCtaText="Book Discovery Call"
            primaryCtaHref="/contact"
            secondaryCtaText="Download Blueprint"
            secondaryCtaHref="/download-blueprint"
          />
        </Container>
      </AnimatedSection>

      <Footer />
    </div>
  );
}