Skyline: Hero City

"use client";

import * as React from "react";

import { Skyline } from "@/components/ui/skyline";

export function SkylineDemo() {
  const [trains, setTrains] = React.useState(0);

  return (
    <div className="relative w-full max-w-5xl overflow-hidden rounded-2xl border border-zinc-950/10 bg-[#fafaf9] text-zinc-950 dark:border-white/10 dark:bg-[#07080c] dark:text-zinc-100">
      <div className="relative z-10 mx-auto flex max-w-xl flex-col items-center px-6 pt-12 text-center sm:pt-16">
        <h2 className="font-serif text-4xl leading-[1.02] font-normal tracking-[-0.02em] text-balance sm:text-5xl">
          Rent the flat where the <em className="text-[#2747ff] dark:text-[#8292ff]">evening light</em> comes in
        </h2>
        <p className="mt-4 max-w-md text-[15px] leading-relaxed text-pretty text-zinc-600 dark:text-zinc-400">
          Westlight maps which way every window faces and how far each door is from the station, so you can pick a
          home for the hours you are actually in it.
        </p>
        <div className="mt-7 flex flex-wrap items-center justify-center gap-2.5">
          <a
            href="#"
            className="inline-flex h-10 items-center gap-1.5 rounded-full bg-zinc-950 px-5 text-sm font-medium text-[#fafaf9] transition-colors hover:bg-zinc-800 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-950 dark:bg-zinc-100 dark:text-zinc-950 dark:hover:bg-white dark:focus-visible:outline-zinc-100"
          >
            Browse west-facing flats
            <svg viewBox="0 0 16 16" fill="none" className="size-3.5" aria-hidden>
              <path d="M3 8h10m-4-4 4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </a>
          <button
            type="button"
            onClick={() => setTrains((n) => n + 1)}
            className="inline-flex h-10 items-center rounded-full border border-zinc-950/20 px-5 text-sm font-medium transition-[background-color,scale] duration-150 hover:bg-zinc-950/5 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zinc-950 active:scale-[0.97] dark:border-white/25 dark:hover:bg-white/5 dark:focus-visible:outline-zinc-100"
          >
            Check the commute
          </button>
        </div>
        <p className="mt-5 font-mono text-[11px] tracking-[0.12em] text-zinc-500 uppercase tabular-nums dark:text-zinc-500">
          1,284 flats <span className="text-[#ff5a1f]">·</span> 9 lines <span className="text-[#ff5a1f]">·</span> updated hourly
        </p>
      </div>
      <Skyline
        seed={12}
        train
        headway={7}
        departures={trains}
        sun={0.64}
        className="mt-6 h-56 [--skyline-sun:#ff5a1f] [--skyline-tint:#4562ff] sm:mt-2 sm:h-72 dark:text-[#1b1f2e] dark:[--skyline-light:#ffd27a] dark:[--skyline-tint:#3149f0]"
      />
    </div>
  );
}