import SectionHead from '@/components/vyndr/SectionHead';
import { Wordmark } from '@/components/vyndr';

type RouteStubProps = {
  /** Page name, e.g. "Terminal". */
  title: string;
  /** When real content lands, e.g. "SESSION 35". */
  arriving: string;
  /** One-line system-voice description of what's coming. */
  blurb?: string;
};

/**
 * Placeholder for a VYNDR 2.0 route whose real screen ships in a later session
 * (§C.3.5). Uses the design system + system language so a "coming soon" still
 * feels intentional, never a blank 404.
 */
export default function RouteStub({ title, arriving, blurb }: RouteStubProps) {
  return (
    <section
      className="scanlines"
      style={{
        minHeight: 'calc(100vh - 200px)',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        gap: 18,
        padding: '40px 24px',
        textAlign: 'center',
        background: 'var(--bg-0)',
        position: 'relative',
      }}
    >
      <Wordmark size="md" cursor beta />
      <SectionHead accent="var(--g-c)">▚ ROUTE UNDER CONSTRUCTION · {arriving}</SectionHead>
      <h1 style={{ fontSize: 30, fontWeight: 800, letterSpacing: '-0.02em', margin: 0, color: 'var(--text-0)' }}>
        {title}
      </h1>
      <p className="mono" style={{ fontSize: 13, color: 'var(--text-1)', maxWidth: 420, lineHeight: 1.6 }}>
        {blurb || 'This surface is being built. The signal is live; the screen lands soon.'}
      </p>
    </section>
  );
}
