// 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 } from '@workspace/ui/components/layout';
import { AnimatedSection } from '@workspace/ui/components/animate-ui/section';
import { CostCalculator } from '@workspace/ui/components/interactive';
import { MetricsKPI } from '@workspace/ui/components/content';
import { CostReductionChart } from '@workspace/ui/components/content/cost-reduction-chart';
import { Badge } from '@workspace/ui/components/content';
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from '@workspace/ui/components/ui';
import Image from 'next/image';

export default function PricingPage() {
  return (
    <div className="flex flex-col min-h-screen">
      <Navbar />

      {/* Hero Section – soft gradient band distinct from homepage/solutions */}
      <AnimatedSection className="bg-gradient-to-b from-muted/30 to-transparent border-b border-muted">
        <Container maxWidth="10xl">
          <div className="relative py-20 md:py-28 text-center">
            {/* Optional decorative pricing art (drop /hero/pricing-hero-art.webp in public) */}
            <Image
              src="/hero/pricing-hero-art.webp"
              alt=""
              aria-hidden
              fill
              sizes="100vw"
              className="object-cover opacity-20 -z-10 rounded-sm"
              priority={false}
            />
            <div className="flex items-center justify-center gap-2">
              <Badge variant="outline">TCO Focused</Badge>
              <Badge variant="outline">CapEx + OpEx</Badge>
              <Badge variant="outline">Transparent Assumptions</Badge>
            </div>
            <h1 className="mt-6 text-4xl md:text-5xl lg:text-6xl font-bold">
              Pricing & ROI
            </h1>
            <p className="mt-6 text-xl text-muted-foreground max-w-3xl mx-auto">
              Model your total cost of ownership and break-even timeline when
              you own the hardware and colocate it—no more cloud rent.
            </p>
            {/* KPI strip */}
            <div className="mt-12 grid grid-cols-3 gap-6 max-w-xl mx-auto">
              <MetricsKPI value="12mo" label="typical break-even" />
              <MetricsKPI value="65%" label="avg. monthly savings" />
              <MetricsKPI value="$350/mo" label="after year one" />
            </div>
          </div>
        </Container>
      </AnimatedSection>

      {/* Cost Calculator – bordered panel with subtle header */}
      <AnimatedSection className="py-20 border-b border-muted">
        <Container maxWidth="10xl">
          <Card className="border-muted">
            <CardHeader className="border-b border-muted bg-card/50">
              <CardTitle className="text-2xl">Your Estimate</CardTitle>
            </CardHeader>
            <CardContent className="pt-8">
              <CostCalculator />
            </CardContent>
          </Card>
        </Container>
      </AnimatedSection>

      {/* Cost Curve – visual summary to complement calculator */}
      <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-12 items-center">
            <div>
              <h2 className="text-3xl font-bold">Cost curve over time</h2>
              <p className="mt-4 text-muted-foreground max-w-prose">
                Upfront spend pays for itself quickly. After break-even, ongoing
                costs are mostly power, space, and amortized hardware—all
                predictable and under your control.
              </p>
            </div>
            <div>
              <CostReductionChart />
            </div>
          </div>
        </Container>
      </AnimatedSection>

      {/* Notes & Assumptions – concise context for numbers */}
      <AnimatedSection className="py-16 border-b border-muted">
        <Container maxWidth="10xl">
          <div className="max-w-3xl mx-auto text-sm text-muted-foreground space-y-2">
            <p>
              Assumptions: commodity servers, 36–48 month amortization, market
              colo rates, and conservative utilization.
            </p>
            <p>
              Exact results depend on workload profile, redundancy requirements,
              and growth assumptions. We’ll tailor the model during your
              architecture call.
            </p>
          </div>
        </Container>
      </AnimatedSection>

      <Footer />
    </div>
  );
}