import Link from "next/link";

import { BrandLogo } from "@/components/brand/brand-logo";
import { ArrowRightIcon } from "@/components/icons/arrow-right";
import { DualPathCta } from "@/components/marketing/dual-path-cta";
import { HybridJourney } from "@/components/marketing/hybrid-journey";
import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";

export default function HomePage() {
  return (
    <>
      {/* Hero — editorial, spacious, brand-led */}
      <section className="relative overflow-hidden">
        <div
          aria-hidden
          className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_80%_60%_at_15%_0%,rgb(149_32_130_/_0.18),transparent_55%),radial-gradient(ellipse_50%_40%_at_90%_80%,rgb(0_79_141_/_0.14),transparent_50%),radial-gradient(ellipse_40%_30%_at_60%_100%,rgb(0_157_99_/_0.1),transparent_45%)]"
        />
        <div className="relative mx-auto grid max-w-6xl gap-12 px-5 py-20 lg:grid-cols-[1.15fr_0.85fr] lg:items-end lg:gap-16 lg:px-8 lg:py-28">
          <div>
            <p className="mb-5 text-xs font-medium uppercase tracking-[0.2em] text-muted-foreground">
              hybrid blockchain
            </p>
            <h1 className="font-display text-4xl font-semibold tracking-tight text-balance sm:text-5xl lg:text-6xl lg:leading-[1.05]">
              Private speed.
              <br />
              <span className="text-accent-hover">Public proof.</span>
            </h1>
            <p className="prose-measure mt-6 text-base leading-relaxed text-muted-foreground sm:text-lg">
              krypco runs transactions on a fast permissioned layer and anchors
              cryptographic commitments to a public chain — confidential where
              it matters, verifiable where it counts.
            </p>
            <div className="mt-8 flex flex-wrap items-center gap-3">
              <Link
                href="/portal"
                className={cn(buttonVariants({ size: "lg" }), "gap-2")}
              >
                Open portal
                <ArrowRightIcon size={15} />
              </Link>
              <Link
                href="/how-it-works"
                className={cn(
                  buttonVariants({ variant: "outline", size: "lg" }),
                )}
              >
                How it works
              </Link>
            </div>
          </div>

          <div className="relative flex justify-center lg:justify-end">
            <div className="relative rounded-3xl border border-border/50 bg-card/60 p-10 shadow-[0_24px_64px_-16px_rgb(0_0_0_/_0.75),0_0_0_1px_rgb(255_255_255_/_0.04)] backdrop-blur-sm">
              <BrandLogo height={140} priority />
              <p className="mt-6 max-w-[14rem] text-center text-xs leading-relaxed text-muted-foreground lg:text-left">
                Official mark — private geometry, public color. Same brand on
                the site and in the portal.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* Dual doors — equal weight */}
      <section className="section-pad">
        <div className="mx-auto max-w-6xl px-5 lg:px-8">
          <div className="mb-10 max-w-xl">
            <p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">
              Two doors. Same network.
            </p>
            <h2 className="font-display mt-3 text-3xl font-semibold tracking-tight sm:text-4xl">
              Who are you here for?
            </h2>
            <p className="mt-3 text-sm leading-relaxed text-muted-foreground sm:text-base">
              Business and builders take different paths. Both land on the same
              hybrid truth.
            </p>
          </div>
          <DualPathCta />
        </div>
      </section>

      {/* Hybrid journey */}
      <section className="section-pad">
        <div className="mx-auto max-w-6xl px-5 lg:px-8">
          <div className="mb-12 grid gap-6 lg:grid-cols-[1fr_1.2fr] lg:items-end">
            <div>
              <p className="text-xs font-medium uppercase tracking-[0.18em] text-proof">
                The hybrid path
              </p>
              <h2 className="font-display mt-3 text-3xl font-semibold tracking-tight sm:text-4xl">
                One transaction. Two layers.
              </h2>
            </div>
            <p className="text-sm leading-relaxed text-muted-foreground sm:text-base">
              Follow the full arc in the portal: private block → commitment →
              public anchor. No black boxes.
            </p>
          </div>
          <HybridJourney />
          <div className="mt-12">
            <Link
              href="/portal/explorer"
              className={cn(
                buttonVariants({ variant: "outline" }),
                "gap-2",
              )}
            >
              Follow a transaction in the explorer
              <ArrowRightIcon size={15} />
            </Link>
          </div>
        </div>
      </section>

      {/* Quiet credibility strip — same soft elevation as K mark card */}
      <section className="section-pad">
        <div className="mx-auto max-w-6xl px-5 lg:px-8">
          <div className="grid overflow-hidden rounded-3xl border border-border/50 bg-card/60 shadow-[0_24px_64px_-16px_rgb(0_0_0_/_0.75),0_0_0_1px_rgb(255_255_255_/_0.04)] backdrop-blur-sm sm:grid-cols-3">
            {[
              {
                label: "Private layer",
                value: "Permissioned",
                hint: "Access control + confidential data",
              },
              {
                label: "Public layer",
                value: "Anchored",
                hint: "State roots anyone can verify",
              },
              {
                label: "Portal",
                value: "Follow-along",
                hint: "Explorer for the full hybrid path",
              },
            ].map((item, i) => (
              <div
                key={item.label}
                className={cn(
                  "px-6 py-8 sm:px-8",
                  i > 0 && "border-t border-border/40 sm:border-t-0 sm:border-l",
                )}
              >
                <p className="text-xs uppercase tracking-[0.14em] text-muted-foreground">
                  {item.label}
                </p>
                <p className="font-display mt-2 text-2xl font-semibold tracking-tight">
                  {item.value}
                </p>
                <p className="mt-2 text-sm text-muted-foreground">{item.hint}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
}