// app/pricing/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, Section } from '@workspace/ui/components/layout';
import { CostCalculator } from '@workspace/ui/components/interactive';

export default function PricingPage() {
  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">Pricing</h1>
            <p className="mt-4 text-muted-foreground max-w-2xl mx-auto">
              Calculate your Total Cost of Ownership (TCO) and see how much you can save by moving from renting to owning your infrastructure.
            </p>
          </div>
          <CostCalculator />
        </Container>
      </Section>
      <Footer />
    </div>
  );
}