// app/about/page.tsx

'use client';

import * as React from 'react';
import { ExternalLinkIcon, AwardIcon, UsersIcon, ZapIcon } 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 { Callout } from '@workspace/ui/components/content';
import { Badge } from '@workspace/ui/components/content';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@workspace/ui/components/ui';
import { Button } from '@workspace/ui/components/ui';

export default function AboutPage() {
  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">About Fortura</h1>
            <p className="mt-4 text-muted-foreground max-w-2xl mx-auto">
              We built it for VFX first. That's why it works for everyone else.
            </p>
          </div>
          
          <Section>
            <Container>
              <div className="flex flex-col md:flex-row gap-8 items-center">
                <div className="flex-1">
                  <h2 className="text-2xl font-bold mb-4">Our Origin Story</h2>
                  <p className="text-muted-foreground mb-4">
                    Fortura was born in the high-stakes world of Visual Effects (VFX) production. VFX studios operate on razor-thin margins, require massive computational power, and deal with enormous datasets (petabytes) that need to move fast.
                  </p>
                  <p className="text-muted-foreground mb-4">
                    We saw firsthand how the cloud billing model was financially unsustainable for these studios. They were hemorrhaging money on egress fees, rent for virtual machines that sat idle half the time, and paying premium prices for "enterprise" support that often lagged behind community forums.
                  </p>
                  <p className="text-muted-foreground">
                    So, we built a better way. A way to own the hardware, colocate it for low-cost power and bandwidth, and automate the hell out of operations so a small team could manage massive infrastructure.
                  </p>
                </div>
                <div className="flex-1 flex justify-center">
                  {/* Placeholder for an image or graphic */}
                  <div className="bg-muted border rounded-xl w-full h-64 flex items-center justify-center">
                    <span className="text-muted-foreground">VFX Studio Image/Graphic</span>
                  </div>
                </div>
              </div>
            </Container>
          </Section>
          
          <Section background="muted">
            <Container>
              <h2 className="text-2xl font-bold mb-6 text-center">Why That Matters</h2>
              <Grid columns={{ initial: 1, md: 3 }} gap="6">
                <Card>
                  <CardHeader>
                    <AwardIcon className="size-8 text-primary mb-2" />
                    <CardTitle>Petabyte Scale</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <CardDescription>
                      We cut our teeth on systems handling hundreds of terabytes to petabytes of data. This means we know how to design for scale, performance, and cost-efficiency from the ground up.
                    </CardDescription>
                  </CardContent>
                </Card>
                <Card>
                  <CardHeader>
                    <UsersIcon className="size-8 text-primary mb-2" />
                    <CardTitle>Low Budgets</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <CardDescription>
                      VFX studios have tight budgets. Every dollar spent on infrastructure is a dollar not spent on creative talent or compute rendering the next shot. This discipline forces us to find the absolute cheapest, most efficient solutions.
                    </CardDescription>
                  </CardContent>
                </Card>
                <Card>
                  <CardHeader>
                    <ZapIcon className="size-8 text-primary mb-2" />
                    <CardTitle>Real-Time Demands</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <CardDescription>
                      In VFX, deadlines are absolute. A render farm that's down is a studio that's losing money. This means we obsess over uptime, redundancy, and zero-downtime upgrades. What works for 24/7 VFX pipelines works for any business-critical application.
                    </CardDescription>
                  </CardContent>
                </Card>
              </Grid>
            </Container>
          </Section>
          
          <Section>
            <Container>
              <h2 className="text-2xl font-bold mb-6">Our Mission</h2>
              <p className="text-muted-foreground mb-4 max-w-3xl">
                Our mission is to fundamentally change how enterprises think about infrastructure. The cloud model of "rent forever" is a bad deal for anyone with significant scale or data. It's a wealth transfer from innovative businesses to cloud providers.
              </p>
              <p className="text-muted-foreground mb-6 max-w-3xl">
                We show you how to own your infrastructure, colocate it for performance and cost, and operate it with a tiny fraction of the overhead of a cloud provider. You keep the performance, you keep the data, and you keep the savings.
              </p>
              <Callout variant="default">
                <span className="font-semibold">"Your hosting provider is fucking you."</span> This isn't just a tagline; it's a technical reality. We're here to help you take control.
              </Callout>
            </Container>
          </Section>
          
          <Section background="muted" className="text-center">
            <Container>
              <h2 className="text-2xl font-bold mb-4">Ready to take control?</h2>
              <p className="mb-6 text-muted-foreground max-w-2xl mx-auto">
                Book a free architecture call to see how much you can save by moving from renting to owning.
              </p>
              <Button asChild size="lg">
                <a href="/contact">
                  Book Architecture Call
                  <ExternalLinkIcon className="ml-2 size-4" />
                </a>
              </Button>
            </Container>
          </Section>
        </Container>
      </Section>
      <Footer />
    </div>
  );
}