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

import { HybridJourney } from "@/components/marketing/hybrid-journey";
import { PageHero } from "@/components/marketing/page-hero";
import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";

export const metadata: Metadata = {
  title: "How it works",
  description:
    "How krypco combines a private permissioned layer with public-chain anchoring.",
};

export default function HowItWorksMarketingPage() {
  return (
    <>
      <PageHero
        eyebrow="Mechanics"
        title="Private where it runs. Public where it proves."
        description="krypco is a hybrid blockchain: transactions execute on a permissioned layer, then cryptographic commitments land on a public chain so history can be checked without leaking confidential data."
      />

      <section className="section-pad">
        <div className="mx-auto max-w-6xl px-5 lg:px-8">
          <HybridJourney />
        </div>
      </section>

      <section className="section-pad">
        <div className="mx-auto grid max-w-6xl gap-10 px-5 lg:grid-cols-2 lg:gap-16 lg:px-8">
          <div>
            <h2 className="font-display text-2xl font-semibold tracking-tight">
              Why hybrid
            </h2>
            <p className="mt-4 text-sm leading-relaxed text-muted-foreground sm:text-base">
              Pure public chains expose too much. Pure private ledgers ask you
              to trust without a public check. krypco keeps speed and access
              control on the private side, and posts anchors so outsiders can
              still verify that commitments match.
            </p>
          </div>
          <div className="rounded-2xl border border-border bg-card p-8">
            <h3 className="font-display text-lg font-semibold">
              See it in the portal
            </h3>
            <p className="mt-3 text-sm leading-relaxed text-muted-foreground">
              The portal is built so you can follow a transaction from private
              block through public anchor — not just read a diagram.
            </p>
            <Link
              href="/portal/explorer"
              className={cn(buttonVariants({ variant: "primary" }), "mt-6")}
            >
              Open the explorer
            </Link>
          </div>
        </div>
      </section>
    </>
  );
}