Select

<div className="max-w-sm w-full">
  <Select
    label="PRIMARY REPLICATION GATEWAY"
    placeholder="Choose egress region..."
    helperText="Select target region for realtime commit sync"
    options={[
      { value: 'us-east', label: 'US East (Virginia Hub)' },
      { value: 'us-west', label: 'US West (Oregon Node)' },
      { value: 'eu-central', label: 'EU Central (Frankfurt Nexus)' },
      { value: 'ap-east', label: 'AP East (Hong Kong Uplink)' },
    ]}
  />
</div>

<div className="max-w-sm w-full">
  <Select
    label="ORBITAL CLUSTER REGION"
    placeholder="Select planetary node..."
    options={groupedOptions}
  />
</div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-2xl">
  <Select
    variant="neon"
    label="AI INFERENCE MODEL"
    options={[
      { value: 'gpt-siber-v4', label: 'Cyber-LLM v4 (Quantum)' },
      { value: 'neural-mesh-v2', label: 'Neural Mesh v2 (Lattice)' },
    ]}
  />

  <Select
    variant="glass"
    label="ENCRYPTION PROTOCOL"
    options={[
      { value: 'lattice', label: 'Kyber-1024 (Post-Quantum)' },
      { value: 'curve', label: 'Curve25519 (Elliptic)' },
    ]}
  />
</div>

<div className="grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-2xl">
  <Select
    label="DECOMMISSIONED SUBNET"
    error="GATEWAY_OFFLINE: Destination port 443 is quarantined"
    options={basicOptions}
    defaultValue="us-west"
  />

  <Select
    label="VERIFIED UPLINK ROUTE"
    success
    helperText="Latency 0.38ms within permissible bounds"
    options={basicOptions}
    defaultValue="eu-central"
  />
</div>

<div className="flex flex-col gap-4 max-w-sm w-full">
  <Select selectSize="sm" options={basicOptions} placeholder="Compact menu (sm - 32px)..." />
  <Select selectSize="md" options={basicOptions} placeholder="Standard menu (md - 40px)..." />
  <Select selectSize="lg" options={basicOptions} placeholder="Hero menu (lg - 48px)..." />
</div>

<div className="relative w-full max-w-md p-8 rounded-2xl bg-white/[0.04] backdrop-blur-xl border border-white/10 shadow-2xl overflow-hidden">
  <div className="relative z-10 space-y-6">
    <div className="flex items-center justify-between pb-4 border-b border-white/[0.08]">
      <div className="flex items-center gap-2">
        <Globe className="h-4 w-4 text-cyan-400" />
        <span className="font-mono text-xs font-bold text-white tracking-wider">ROUTING GATEWAY TARGET</span>
      </div>
      <Badge variant="glass" dot dotColor="cyan">BGP-4</Badge>
    </div>

    <div className="space-y-4">
      <Select
        variant="glass"
        label="PRIMARY EGRESS CLUSTER"
        options={groupedOptions}
        defaultValue="fra-03"
      />
      <Select
        variant="glass"
        label="FAILOVER PEER"
        options={groupedOptions}
        defaultValue="dub-01"
      />
    </div>

    <div className="pt-2">
      <Button variant="neon" glow className="w-full">
        ESTABLISH BGP PEER
      </Button>
    </div>
  </div>
  <BorderBeam variant="neon" size={140} duration={6} borderWidth={1.5} glow />
</div>

<Card className="max-w-md mx-auto border-cyan-500/30 bg-[#070b14] shadow-xl">
  <CardHeader className="pb-4 border-b border-white/[0.06]">
    <div className="flex items-center justify-between">
      <CardTitle className="text-sm font-mono text-cyan-400 tracking-wider">SENTINEL DISPATCH MATRIX</CardTitle>
      <Badge variant="neon" size="sm">READY</Badge>
    </div>
    <CardDescription className="text-xs text-slate-400">
      Route incoming sector alerts to active defense agents.
    </CardDescription>
  </CardHeader>

  <CardContent className="p-6 space-y-4">
    <Select
      variant="neon"
      label="ASSIGNED TACTICAL SENTINEL"
      options={[
        { value: 's-01', label: 'SENTINEL_ALPHA (Kinetic Rail)' },
        { value: 's-02', label: 'SENTINEL_BETA (EMP Wave)' },
        { value: 's-03', label: 'SENTINEL_GAMMA (Laser Intercept)' },
      ]}
      defaultValue="s-01"
    />

    <Select
      variant="neon"
      label="INTERCEPTION ESCALATION LEVEL"
      options={[
        { value: 'def-1', label: 'DEFCON 1 — Immediate Kinetic Strike' },
        { value: 'def-2', label: 'DEFCON 2 — Lock Target & Await Ack' },
        { value: 'def-3', label: 'DEFCON 3 — Passive Surveillance' },
      ]}
      defaultValue="def-2"
    />

    <div className="pt-2 flex justify-end gap-3">
      <Button variant="secondary" size="sm">STAND DOWN</Button>
      <Button variant="neon" size="sm" glow>DEPLOY ORDERS</Button>
    </div>
  </CardContent>
</Card>