import type { Metadata } from "next";
import Link from "next/link";

import { BrandLogo } from "@/components/brand/brand-logo";
import { PageHero } from "@/components/marketing/page-hero";
import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";

export const metadata: Metadata = {
  title: "About",
  description: "What krypco is and why the hybrid model exists.",
};

export default function AboutPage() {
  return (
    <>
      <PageHero
        eyebrow="About"
        title="Built for both privacy and proof"
        description="krypco is a modern hybrid blockchain: a high-performance permissioned layer paired with public-chain verifiability."
      />

      <section className="section-pad">
        <div className="mx-auto grid max-w-6xl items-start gap-12 px-5 lg:grid-cols-[0.9fr_1.1fr] lg:px-8">
          <div className="flex justify-center rounded-3xl border border-border bg-card p-12">
            <BrandLogo height={120} />
          </div>
          <div className="space-y-6">
            <p className="text-base leading-relaxed text-muted-foreground">
              Teams should not have to choose between “everything public” and
              “trust us, it’s private.” krypco keeps execution where access can
              be controlled, and anchors commitments where anyone can verify.
            </p>
            <p className="text-base leading-relaxed text-muted-foreground">
              The public website tells that story. The portal is where you
              follow the chain — blocks, transactions, and the hybrid path.
            </p>
            <div className="flex flex-wrap gap-3 pt-2">
              <Link href="/how-it-works" className={cn(buttonVariants())}>
                How it works
              </Link>
              <Link
                href="/contact"
                className={cn(buttonVariants({ variant: "outline" }))}
              >
                Contact
              </Link>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}